system-phone 1.3.11 → 3.0.1

package/src/components/screen/ContentPage.vue

@@ -0,0 +1,611 @@
+<template>
+<div  style="height: 100%;background: url('src/assets/images/back.png')">
+  <div style="background-color: darkblue;height: 100%" >
+    <div class="total-number">
+      <total-user-number :total-data="totalData[0]" :user-total-icon="userTotalIcon1"></total-user-number>
+    </div>
+    <div class="gas-nature-number" id="gasNatureNumberLeft" style="margin-top: 15px"></div>
+    <div style="height: 5%">
+      <module-title :module-tile-icon="juMingIcon"
+                    :title="juMingTitle"
+                    :font="juMingFont">
+      </module-title>
+    </div>
+    <div id="juMing"></div>
+  </div>
+  <div style="background-color: darkblue;height: 100%">
+    <div class="total-number">
+      <total-user-number :total-data="totalData[1]" :user-total-icon="userTotalIcon2"></total-user-number>
+    </div>
+    <div class="gas-nature-number" id="gasNatureNumberRight"></div>
+    <div id="nJuMing"></div>
+  </div>
+<!--  <div class="gas-nature-number" id="gasNatureNumberRight"></div>-->
+</div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export  default {
+  title:"content-page",
+  data(){
+    return {
+      juMingIcon:require('src/assets/images/居民增长分析.png'),
+      juMingTitle:'居民用户增长分析',
+      juMingFont:6,
+
+      userTotalIcon1:require('../../assets/images/居民用户.png'),
+      userTotalIcon2:require('../../assets/images/非居民用户.png'),
+      residengtMonth:['1月','2月','3月','4月','5月','6月'],
+      nResidentMonth:['1月','2月','3月','4月','5月','6月'],
+
+      totalData:[{title:'居民用户',number:65412},{title:'非居民用户',number:5412}],
+      juMingIncrementData:[8000,8530,9560,10860,13000,13265],
+      nJuMingIncrementData:[456,789,100,1023,1500,1689],
+      juMjingNatureData:[{name: "生活用户", value: 487696}, {name: "壁挂锅炉", value: 99806}],
+      nJumingNatureData:[
+        { value: 335, name: "商业" },
+        { value: 310, name: "公福" },
+        { value: 274, name: "小区自备锅炉" },
+        { value: 235, name: "福利院校" },
+        { value: 235, name: "集中供热" },
+      ],
+    }
+  },
+  ready(){
+    this.getJuMingPie()
+    this.getJuMingLine()
+    this.getNJuMingPie()
+    this.getNJuMingLine()
+  },
+  methods:{
+    getNJuMingLine(){
+      let myChart = echarts.init(document.getElementById('nJuMing'));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: "#dddc6b"
+            }
+          }
+        },
+        grid: {
+          left: "10",
+          top: "30",
+          right: "10",
+          bottom: "10",
+          containLabel: true
+        },
+
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,.6)",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.2)"
+              }
+            },
+
+            data: this.nResidentMonth
+          },
+          {
+            axisPointer: { show: false },
+            axisLine: { show: false },
+            position: "bottom",
+            offset: 20
+          }
+        ],
+
+        yAxis: [
+          {
+            type: "value",
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,.6)",
+                fontSize: 12
+              }
+            },
+
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: "非居民用户",
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: "#00d887",
+                width: 2
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 216, 135, 0.4)"
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(0, 216, 135, 0.1)"
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)"
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "#00d887",
+                borderColor: "rgba(221, 220, 107, .1)",
+                borderWidth: 12
+              }
+            },
+            data: this.nJuMingIncrementData
+          }
+        ]
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+    getJuMingLine(){
+      console.log(document.getElementById('juMing'))
+      let myChart = echarts.init(document.getElementById('juMing'));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: "#dddc6b"
+            }
+          }
+        },
+        grid: {
+          left: "10",
+          top: "30",
+          right: "10",
+          bottom: "10",
+          containLabel: true
+        },
+
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,.6)",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.2)"
+              }
+            },
+
+            data: JSON.parse(JSON.stringify(this.residengtMonth))
+          },
+          {
+            axisPointer: { show: false },
+            axisLine: { show: false },
+            position: "bottom",
+            offset: 20
+          }
+        ],
+
+        yAxis: [
+          {
+            type: "value",
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,.6)",
+                fontSize: 12
+              }
+            },
+
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: "居民用户",
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: "#0184d5",
+                width: 2
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1, 132, 213, 0.4)"
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(1, 132, 213, 0.1)"
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)"
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "#0184d5",
+                borderColor: "rgba(221, 220, 107, .1)",
+                borderWidth: 12
+              }
+            },
+            data:this.juMingIncrementData
+          }
+        ]
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+    getNJuMingPie(){
+      // let data = JSON.parse(JSON.stringify(this.nJumingNatureData))
+      let arr = [{normal:{color:'#2A70EF'}},
+        {normal:{color:'#288ED5'}},
+        {normal:{color:'#48ABC8'}},
+        {normal:{color:'#A0E66C'}},
+        {normal:{color:'#F6CC5F'}},
+        {normal:{color:'#EE7A2F'}}]
+      let data = this.nJumingNatureData
+      data.forEach((item,index) => {
+        item.itemStyle = arr[index]
+      })
+      console.log(data)
+      let colorList = ['#2A70EF','#288ED5','#48ABC8','#A0E66C','#F6CC5F','#EE7A2F','#EE7A2F']
+      let myChart = echarts.init(document.getElementById('gasNatureNumberRight'));
+      let option = {
+        legend: {
+          // selectedMode: false, // 取消图例上的点击事件
+          type: "plain",
+          icon: "circle",
+          orient: "vertical",
+          left: "40%",
+          top: "23%",
+          align: "left",
+          itemGap: 15,
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
+          symbolKeepAspect: false,
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                verticalAlign: "right",
+                align: "left",
+                width: 80,
+                fontSize: 12,
+              },
+              value: {
+                align: "left",
+                width: 60,
+                fontSize: 12,
+              },
+              count: {
+                align: "left",
+                width: 30,
+                fontSize: 12,
+              }
+            },
+          },
+          data: data.map((item) => item.name),
+          formatter: function (name) {
+            let className = "upRate";
+            let rateIcon = "▲";
+            if (data && data.length) {
+              let sum = 0
+              data.forEach(item => {
+                sum += item.value
+              });
+              for (var i = 0; i < data.length; i++) {
+                if (name === data[i].name) {
+
+                  return (
+                    "{name| " +
+                    name +
+                    "} " +
+                    "{value| " +
+                    data[i].value +
+                    "} " +
+                    "{count| " +
+                    ((data[i].value/sum)*100).toFixed(2) +
+                    "%} "
+                  );
+                }
+              }
+            }
+          },
+        },
+        visualMap: {
+          show: false,
+          min: 80,
+          max: 600,
+          inRange: {
+            colorLightness: [0, 1],
+          },
+        },
+        color: [
+          "#F6CC5F",
+          "rgb(0, 228, 196)"
+        ],
+        series: [
+          {
+            name: "非居民用户数",
+            type: "pie",
+            radius: "55%",
+            center: ["20%", "50%"],
+            data: data,
+            label: {
+              normal: {
+                show: false,
+                position: "center",
+                formatter: "{text|{c}}\n{b}",
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return colorList[params.dataIndex]
+                }
+              }
+            },
+            // roseType: "angle",
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+    getJuMingPie(){
+      // console.log('5555',this.$echarts)
+      // console.log(document.getElementById('gasNatureNumberLeft'))
+      let myChart = echarts.init(document.getElementById('gasNatureNumberLeft'));
+      let data = JSON.parse(JSON.stringify(this.juMjingNatureData))
+      let xdata = [];
+      data.forEach(item => {
+        xdata.push(item.name)
+      })
+      // // data = [{name: "生活用户", value: 487696}, {name: "壁挂锅炉", value: 99806}]
+      let option = {
+        title: {
+          // text: "{header1| 名称与占比}" + "{header2| 数量}" + "{header3| 比例}",
+          textAlign: "left",
+          left: "49%",
+          top: "30%",
+          textStyle: {
+            color: "#ccc",
+            rich: {
+              header1: {
+                width: 200,
+                fontSize: 15,
+              },
+              header2: {
+                width: 120,
+                fontSize: 15,
+              },
+              header3: {
+                fontSize: 15,
+              },
+            },
+          },
+        },
+        // tooltip: {
+        //   trigger: "item",
+        //   formatter: "{a} <br/>{b} : {c} ({d}%)",
+        // },
+        legend: {
+          // selectedMode: false, // 取消图例上的点击事件
+          orient: "vartical",
+          x: "left",
+          top: "60%",
+          left: "center",
+          bottom: "0%",
+          data: xdata,
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                verticalAlign: "right",
+                align: "left",
+                width: 80,
+                fontSize: 14,
+              },
+              value: {
+                align: "left",
+                width: 70,
+                fontSize: 14,
+              },
+              count: {
+                align: "left",
+                width: 50,
+                fontSize: 14,
+              }
+            },
+          },
+          formatter: function (name) {
+            let className = "upRate";
+            let rateIcon = "▲";
+            if (data && data.length) {
+              let sum = 0
+              data.forEach(item => {
+                sum += item.value
+              });
+              for (var i = 0; i < data.length; i++) {
+                if (name === data[i].name) {
+                  return (
+                    "{name| " +
+                    name +
+                    "}" +
+                    "{value| " +
+                    data[i].value +
+                    "}" +
+                    "{count| " +
+                    ((data[i].value/sum)*100).toFixed(2) +
+                    "%} "
+                  );
+                }
+              }
+            }
+          },
+        },
+        graphic:{
+          type:'image',
+          left:'center',
+          top:'25%',
+          style:{
+            image:require('../../assets/images/居民用户.png'),
+            width:40,
+            height:35,
+
+          }
+        },
+        color: [
+          "rgb(0, 228, 196)",
+          "#F6CC5F"
+        ],
+        series: [
+          {
+            name: "居民用户",
+            type: "pie",
+            clockWise: true,
+            radius: ["40%", "55%"],
+            center: ["50%", "30%"],
+            data: data,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  fontSize: "12",
+                },
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            clockWise: true,
+            hoverAnimation: false,
+            radius: [39, "30%"],
+            center: ["25%", "50%"]
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+        myChart.resize({
+          width:100
+        });
+      });
+    },
+  }
+}
+</script>
+<style lang="less">
+#juMing{
+  width: 100%;
+  height: 50%;
+div{
+  height: 0%;
+}
+}
+#nJuMing{
+  width: 100%;
+  height: 50%;
+  div{
+    height: 0%;
+  }
+}
+</style>
+<style lang="less" scoped>
+#nJuMing{
+  width: 100%;
+  height: 50%;
+}
+#juMing{
+  width: 100%;
+  height: 50%;
+  div{
+    height: 10%;
+  }
+}
+.total-number{
+  width: 100%;
+  height: 6%;
+}
+.gas-nature-number{
+  width: 100%;
+  height: 38%;
+}
+</style>