system-phone 1.4.0 → 3.0.2

package/src/components/screen/ChargeContentPage.vue

@@ -0,0 +1,656 @@
+<template>
+  <div>
+    <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
+      <div class="layui-row" style="height: 10%;background-color: darkblue;">
+        <total-item
+          :text="totalData[0].text"
+          :charge-total-icon="imgChargeTotal1"
+          :number-color="totalNumberColor[0]"
+          :number="totalData[0].number"
+        ></total-item>
+      </div>
+      <div class="layui-row" style="height: 10%;background-color: darkblue;">
+        <total-item
+          :text="totalData[1].text"
+          :charge-total-icon="imgChargeTotal2"
+          :number-color="totalNumberColor[1]"
+          :number="totalData[1].number"
+        ></total-item>
+      </div>
+      <div class="layui-row" style="height: 10%;background-color: darkblue;">
+        <total-item
+          :text="totalData[2].text"
+          :charge-total-icon="imgChargeTotal3"
+          :number-color="totalNumberColor[2]"
+          :number="totalData[2].number"
+        ></total-item>
+      </div>
+      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
+        <module-title :font="countFont"></module-title>
+      </div>
+      <div class="layui-row" style="height: 50%;background-color: darkblue;margin-top: 10px">
+        <div class="count-data-list">
+          <div class="list-item" v-for="(index, item) in countData" style="height: 20%">
+            <list-count-item
+              :text="item.text"
+              :count="item.count"
+              :percentage="item.percentage"
+              :bar-color="countColor[index]"
+            >
+            </list-count-item>
+          </div>
+        </div>
+      </div>
+
+      <!--    <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">-->
+      <!--      <module-title-->
+      <!--        :module-tile-icon="chargeGasAnalysisIcon"-->
+      <!--        :title="chargeGasAnalysisTitle2"-->
+      <!--        :font="chargeGasAnalysisFont"-->
+      <!--      >-->
+      <!--      </module-title>-->
+      <!--    </div>-->
+
+
+      <!--    <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">-->
+      <!--      <div class="chart" id="saleGasAnalysys2"></div>-->
+      <!--    </div>-->
+    </div>
+    <div class="layui-container" style="height: 100%;background-color: darkblue;margin-top: -10px"
+    >
+      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
+        <module-title
+          :module-tile-icon="chargeGasAnalysisIcon"
+          :title="chargeGasAnalysisTitle1"
+          :font="chargeGasAnalysisFont"
+        >
+        </module-title>
+      </div>
+      <div class="layui-row" style="height: 50%;background-color: darkblue;margin-top: 10px">
+        <div class="chart" id="saleGasAnalysys1" style="background-color: darkblue"></div>
+      </div>
+
+
+    </div>
+    <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
+      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
+        <module-title :module-tile-icon="otherBusinessIcon"
+                      :title="otherBusinessTitle" :font="otherBusinessFont"></module-title>
+      </div>
+      <div class="layui-row" style="height: 50%;background-color: darkblue">
+        <div class="chart" id="saleGasAnalysys2" style="background-color: darkblue;height: 180%"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  title:"ChargeContentPage",
+  data(){
+    return {
+      otherBusinessIcon:require('src/assets/images/收费其他业务.png'),
+      otherBusinessTitle:'今日其他业务占比',
+      otherBusinessFont:5,
+      oterBusinessData:[
+        {
+          name: "开户",
+          value: 1232,
+        },
+        {
+          name: "补换折（卡）",
+          value: 754,
+        },
+        {
+          name: "换表清零",
+          value: 611,
+        },
+        {
+          name: "增容",
+          value: 400,
+        },
+        {
+          name: "销户",
+          value: 200,
+        },
+        {
+          name: "其他",
+          value: 466,
+        },
+      ],
+
+      leftChartSaleAmountData: [
+        1800, 2300, 1600, 1100, 600, 900, 1500, 500, 560, 700, 800, 1300,
+      ], //物联网表民用用气
+      leftChartNSaleAmountData: [
+        180, 1500, 900, 1300, 800, 350, 1200, 560, 120, 1300, 1452, 1700,
+      ], //物联网表非民用用气
+      tongBi: [24, 30, 20, 12, 90, 43, 19, 0, 0, 13, 60, 50], //同比
+      huanBi: [24, 16, 37, 66, 28, 75, 60, 80, 30, 65, 56, 79], //环比
+      monthData: [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ],
+      chargeGasAnalysisIcon: require("src/assets/images/收费售气量分析.png"),
+      chargeGasAnalysisTitle1: "售气量分析",
+      chargeGasAnalysisTitle2: "售气量分析(7-12月)",
+      chargeGasAnalysisFont: 5,
+      countColor: [
+        "#EE7A2F",
+        "#19FBAE",
+        "#F7DC3D",
+        "#FFA327",
+        "#29fb49",
+        "#EE7A2F",
+        "#EE7A2F",
+      ],
+      countData: [
+        {
+          text: "物联网表收费",
+          count: 12210,
+          percentage: "54%",
+          barColor: "#EE7A2F",
+        },
+        {
+          text: "金额卡表收费",
+          count: 8451,
+          percentage: "18%",
+          barColor: "#19FBAE",
+        },
+        {
+          text: "气量卡表收费",
+          count: 6358,
+          percentage: "12%",
+          barColor: "#F7DC3D",
+        },
+        {
+          text: "机表收费",
+          count: 4107,
+          percentage: "9%",
+          barColor: "#FFA327",
+        },
+        {
+          text: "超用收费",
+          count: 3318,
+          percentage: "7%",
+          barColor: "#29fb49",
+        },
+      ],
+      countFont:5,
+      imgChargeTotal1: require("src/assets/images/收费total1.png"),
+      imgChargeTotal2: require("src/assets/images/收费total2.png"),
+      imgChargeTotal3: require("src/assets/images/收费total3.png"),
+      totalNumberColor: ["#FFAC41", "#F7DC3D", "#00FFDE"],
+      totalData: [
+        { number: 1245137, text: "今日售气量" },
+        { number: 124513, text: "今日售气笔数" },
+        { number: 1000013, text: "今日售气金额" },
+      ],
+
+    }
+  },
+  ready(){
+    this.myLeftChart3()
+    this.otherBusineeChart()
+  },
+  methods:{
+    otherBusineeChart(){
+      let mychart = echarts.init(document.getElementById('saleGasAnalysys2'));
+      let data = JSON.parse(JSON.stringify(this.oterBusinessData));
+      let arrName = getArrayValue(data, "name");
+      let arrValue = getArrayValue(data, "value");
+      let sumValue = eval(arrValue.join("+"));
+      let objData = array2obj(data, "name");
+      let percentage = getArrPercentage(data,"name")
+      let optionData = getData(data);
+      function getArrayValue(array, key) {
+        var key = key || "value";
+        var res = [];
+        if (array) {
+          array.forEach(function (t) {
+            res.push(t[key]);
+          });
+        }
+        return res;
+      }
+
+      function array2obj(array, key) {
+        var resObj = {};
+        for (var i = 0; i < array.length; i++) {
+          resObj[array[i][key]] = array[i];
+        }
+        return resObj;
+      }
+      function getArrPercentage(arr,key) {
+        let percentageObj = {}
+        for(let i=0;i<data.length;i++){
+          percentageObj[arr[i][key]] = ((data[i].value / sumValue) * 100).toFixed(2) + "%"
+        }
+        return percentageObj
+      }
+      function getData(data) {
+        var res = {
+          series: [],
+          yAxis: [],
+        };
+        for (let i = 0; i < data.length; i++) {
+          // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
+          res.series.push({
+            name: "",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [78 - i * 13 + "%", 85 - i * 13 + "%"],
+            center: ["50%", "30%"],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              borderWidth: 5,
+            },
+            data: [
+              {
+                value: data[i].value,
+                name: data[i].name,
+              },
+              {
+                value: sumValue - data[i].value,
+                name: "",
+                itemStyle: {
+                  color: "rgba(0,0,0,0)",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+            ],
+          });
+          res.series.push({
+            name: "",
+            type: "pie",
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [78 - i * 13 + "%", 85 - i * 13 + "%"],
+            center: ["50%", "30%"],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              borderWidth: 5,
+            },
+            data: [
+              {
+                value: 7.5,
+                itemStyle: {
+                  color: "rgb(0, 28, 124)",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+              {
+                value: 2.5,
+                name: "",
+                itemStyle: {
+                  color: "rgb(0, 28, 124)",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+            ],
+          });
+          // res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
+        }
+        return res;
+      }
+
+      let option = {
+        // backgroundColor: "#000",
+        legend: {
+          show: true,
+          icon: "circle",
+          top: "60%",
+          left: "5%",
+          data: arrName,
+          width: 50,
+          padding: [0, 10],
+          itemGap: 19,
+          formatter: function (name) {
+            return (
+              "{title|" + name + "}      {value|" + objData[name].value + "}   {title|" + percentage[name] + "}"
+            );
+          },
+
+          textStyle: {
+            rich: {
+              title: {
+                fontSize: 14,
+                lineHeight: 15,
+                color: "#B2B0CB",
+                width: 120
+              },
+              value: {
+                fontSize: 14,
+                lineHeight: 15,
+                color: "#B2B0CB",
+                width: 80
+              },
+            },
+          },
+        },
+        // tooltip: {
+        //   show: true,
+        //   trigger: "item",
+        //   formatter: "{a}<br>{b}:{c}({d}%)",
+        // },
+        color: [
+          "rgb(238, 122, 47)",
+          "rgb(0, 228, 196)",
+          "rgb(13, 126, 254)",
+          "rgb(247, 219, 53)",
+          "rgb(101, 223, 127)",
+          "rgb(255, 125, 125)"
+        ],
+        grid: {
+          top: "11%",
+          bottom: "60%",
+          left: "20%",
+          containLabel: false,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              inside: true,
+              textStyle: {
+                color: "#fff",
+                fontSize: 13,
+              },
+              show: true,
+            },
+            data: optionData.yAxis,
+          },
+        ],
+        xAxis: [
+          {
+            show: false,
+          },
+        ],
+        series: optionData.series,
+      };
+      mychart.setOption(option);
+      window.addEventListener("resize", function() {
+        mychart.resize();
+      });
+
+    },
+    myLeftChart3() {
+      let mychart = echarts.init(document.getElementById('saleGasAnalysys1'));
+
+      // 2. 指定配置和数据
+      let option = {
+        title: {
+          show: true,
+          text: "万m³",
+          textStyle: {
+            color: "rgba(255,255,255,.6)",
+            fontSize: 14,
+          },
+          left: 0,
+          top: 12,
+        },
+        color: [
+          new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0.37,
+                color: "rgba(0,255,255,0.9)",
+              },
+              {
+                offset: 1,
+                color: "rgba(3,6,114,0.1)",
+              },
+            ],
+            false
+          ),
+          new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0.37,
+                color: "rgba(1,245,152,0.9)",
+              },
+              {
+                offset: 1,
+                color: "rgba(3,6,114,0.1)",
+              },
+            ],
+            false
+          ),
+        ],
+
+        tooltip: {
+          // 通过坐标轴来触发
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+          formatter: function (params) {
+            let relVal = params[0].name;
+            for (let i = 0, l = params.length; i < l; i++) {
+              if (
+                params[i].seriesName === "同比" ||
+                params[i].seriesName === "环比"
+              ) {
+                relVal +=
+                  "<br/>" +
+                  params[i].seriesName +
+                  " : " +
+                  params[i].value +
+                  "%";
+              } else {
+                relVal +=
+                  "<br/>" + params[i].seriesName + " : " + params[i].value;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          // 距离容器10%
+          right: "30%",
+          // 修饰图例文字的颜色
+          textStyle: {
+            color: "#4c9bfd",
+          },
+          itemGap: 30,
+          // 如果series 里面设置了name，此时图例组件的data可以省略
+          // data: ["邮件营销", "联盟广告"]
+        },
+        grid: {
+          top: "18%",
+          left: "0",
+          right: "4%",
+          bottom: "3%",
+          show: true,
+          borderColor: "#012f4a",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: this.monthData,
+          // 去除刻度
+          axisTick: {
+            show: false,
+          },
+          // 修饰刻度标签的颜色
+          axisLabel: {
+            color: "rgba(255,255,255,.7)",
+          },
+          // 去除x坐标轴的颜色
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            // interval: 500,
+            // max: 3500,
+            // 去除刻度
+            axisTick: {
+              show: false,
+            },
+            // 修饰刻度标签的颜色
+            axisLabel: {
+              color: "rgba(255,255,255,.7)",
+            },
+            // 修改y轴分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "#012f4a",
+              },
+            },
+          },
+          {
+            name: "万m³",
+            type: "value",
+            nameTextStyle: {
+              color: "rgba(255,255,255,.7)",
+            },
+            // nameGap: 12,
+            // interval: 30,
+            // min: -90,
+            // 去除刻度
+            axisTick: {
+              show: false,
+            },
+            // 修饰刻度标签的颜色
+            axisLabel: {
+              color: "rgba(255,255,255,.7)",
+            },
+            // 修改y轴分割线的颜色
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#012f4a",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "民用",
+            type: "bar",
+            barWidth: "15%",
+            barGap: 0,
+            emphasis: {
+              focus: "series",
+            },
+            data: JSON.parse(JSON.stringify(this.leftChartSaleAmountData)),
+          },
+          {
+            name: "非民用",
+            type: "bar",
+            barWidth: "15%",
+            barGap: "40%",
+            data: JSON.parse(JSON.stringify(this.leftChartNSaleAmountData)),
+          },
+          {
+            name: "同比",
+            type: "line",
+            stack: "总量",
+            // 是否让线条圆滑显示
+            smooth: true,
+            lineStyle: {
+              color: "rgba(193,162,81,.9)",
+              type: "dotted",
+              width: 3,
+              join: "miter",
+              miterLimit: 40,
+            },
+            showSymbol: false,
+            yAxisIndex: 1,
+            data: JSON.parse(JSON.stringify(this.tongBi)),
+          },
+          {
+            name: "环比",
+            type: "line",
+            stack: "总量",
+            lineStyle: {
+              color: "rgba(0,212,139,.9)",
+            },
+            smooth: true,
+            showSymbol: false, //取消折线的衔接点
+            yAxisIndex: 1,
+            data: JSON.parse(JSON.stringify(this.huanBi)),
+          },
+        ],
+      };
+      // 3. 把配置和数据给实例对象
+      mychart.setOption(option);
+      window.addEventListener("resize", function () {
+        mychart.resize();
+      });
+    },
+  }
+}
+</script>
+<style lang="less">
+#saleGasAnalysys1{
+  div{
+    height: 0%;
+  }
+}
+</style>