{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\enterprisePollutionMonitoring.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\enterprisePollutionMonitoring.vue","mtime":1689746748756},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js","mtime":1689642388897},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1689642396086}],"contextDependencies":[],"result":["\r\n//引入echarts\r\nimport * as echarts from \"echarts\";\r\n// 工单统计弹窗组件\r\nimport workOrder from \"../component/workOrder.vue\";\r\nimport ringMainUnit from \"./HomePop/ringMainUnit.vue\";\r\nimport routeDetail from \"../component/routeDetail.vue\";\r\n\r\n// 线路详情\r\nimport lineDetail from \"../component/lineDetail.vue\";\r\nexport default {\r\n  name: \"twentyKV\",\r\n  components: {\r\n    ringMainUnit, //环网柜弹窗\r\n    workOrder, //工单统计弹窗\r\n    routeDetail, //线路故障跳闸明细\r\n    lineDetail, //线路详情弹窗\r\n  },\r\n  data() {\r\n    return {\r\n      pageShow: true,\r\n      totals: 5,\r\n      pageSize: 10,\r\n      page: 1,\r\n      threeImg: require(\"../assets/images/pieBorder.png\"),\r\n      enlargeShow: true,\r\n      dateList: [\"周\", \"月\"],\r\n      acolor: true, //是否展示颜色\r\n      currentIndex: -1,\r\n      alarmInformationData: [],\r\n      alarmInformationShow: false, //报警详情信息弹窗\r\n      realTimeAlarmShow: false, //实时报警弹窗\r\n      modelOthers: false,\r\n      componentShow: \"\",\r\n      CompanyInfo: {},\r\n      tableData: [],\r\n      btnArr: [\"总览\", \"环网柜\", \"分支箱\", \"箱变\", \"开闭所\"],\r\n      btnActive: 0,\r\n      iconGround: [\r\n        {\r\n          icon: require(\"@/assets/images/huanwanggui.png\"),\r\n          name: \"环网柜\",\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/fenzhixiang.png\"),\r\n          name: \"分支箱\",\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/xiangbian.png\"),\r\n          name: \"箱变\",\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/kaibisuo.png\"),\r\n          name: \"开闭所\",\r\n        },\r\n      ],\r\n      btnEnlarge: [\r\n        {\r\n          icon: require(\"@/assets/images/btnTiShi.png\"),\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/btnFangDa.png\"),\r\n        },\r\n      ],\r\n      btnEnlarge1: [\r\n        {\r\n          icon: require(\"@/assets/images/btnTiShi.png\"),\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/suoxiao.png\"),\r\n        },\r\n      ],\r\n      options: [\r\n        {\r\n          value: \"\",\r\n          label: \"\",\r\n        },\r\n      ],\r\n      value: \"\",\r\n      topContent: [\r\n        {\r\n          name: \"配变数量\",\r\n          count: \"\",\r\n        },\r\n        {\r\n          name: \"重复停运台次\",\r\n          count: \"\",\r\n        },\r\n        {\r\n          name: \"配变重复停运率\",\r\n          count: \"\",\r\n        },\r\n      ],\r\n      device: \"\",\r\n      tableData: [],\r\n      tableKey: +new Date(),\r\n      scrollTop: 0, //table距离顶部距离\r\n      option: null,\r\n      myChartBin: null,\r\n      // 工单\r\n      orderItem: null,\r\n      orderShow: \"\",\r\n      // 线路故障明细\r\n      routeItem: null,\r\n      routeShow: \"\",\r\n      // 配电线路\r\n      lineItem: null,\r\n      lineShow: \"\",\r\n      timer: null, //定时器\r\n      emergencyList: [], //告警数据\r\n      rowTime: \"\",\r\n      pvTable: [\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n           name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n        name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n           name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n           name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n           name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n      ],\r\n    };\r\n  },\r\n  created() {},\r\n  mounted() {\r\n    this.detailedTwo11();\r\n    this.detailedTwo22();\r\n    this.detailedTwo33();\r\n     this.detailedTwo44();\r\n    this.barCharts();\r\n    this.detailen();\r\n  },\r\n  methods: {\r\n    detailedTwo11() {\r\n      var fontColor = \"#fff\";\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n    var option = {\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"shadow\",\r\n          },\r\n        },\r\n        legend: {\r\n          textStyle: {\r\n            fontSize: 18, //字体大小\r\n            color: \"#ffffff\", //字体颜色\r\n          },\r\n\r\n          data: [\"用电量\", \"碳排放量\"],\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            data: [\r\n              \"10kv北红线124\",\r\n              \"10kv北红线125\",\r\n              \"10kv北红线126\",\r\n              \"10kv北红线127\",\r\n              \"10kv北红线128\",\r\n            ],\r\n            axisLabel: {\r\n              show: true,\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"value\",\r\n            name: \"\",\r\n            axisLabel: {\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"用电量\",\r\n            type: \"bar\",\r\n            itemStyle: {\r\n              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                { offset: 1, color: \"rgba(86,254,226,.2) \" },\r\n                { offset: 0.5, color: \"rgb(86,254,226,.6)\" },\r\n                { offset: 0, color: \"rgb(86,254,226)\" },\r\n              ]),\r\n              borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n              borderWidth: 0,\r\n            },\r\n            emphasis: {\r\n              focus: \"series\",\r\n            },\r\n            data: [320, 332, 301, 334, 390],\r\n          },\r\n          {\r\n            name: \"碳排放量\",\r\n            type: \"bar\",\r\n            itemStyle: {\r\n              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                { offset: 1, color: \"rgba(237,125,49,.2) \" },\r\n                { offset: 0.5, color: \"rgb(237,125,49,.6)\" },\r\n                { offset: 0, color: \"rgb(237,125,49)\" },\r\n              ]),\r\n              borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n              borderWidth: 0,\r\n            },\r\n            emphasis: {\r\n              focus: \"series\",\r\n            },\r\n            data: [220, 182, 191, 234, 290],\r\n          },\r\n        ],\r\n      };\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailedTwo22() {\r\n       // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\r\n       var honorData = [\r\n        {\r\n          name: \"用电量（单位：亿）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        {\r\n          name: \"碳排放量（单位：万）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        \r\n      ];\r\n      var honorXAxisData = [\r\n        \"盐都区\",\r\n        \"建湖县\",\r\n        \"射阳县\",\r\n        \"阜宁县\",\r\n        \"滨海县\",\r\n      ];\r\n      // // 设置灰色背景色的长度\r\n      var isMax = 2000;\r\n      var bjData1 = [\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n      ];\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo2\"));\r\n\r\n      var option = {\r\n        color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"none\",\r\n          },\r\n        },\r\n      \r\n\r\n        legend: {\r\n          right: 5,\r\n          top: \"5%\",\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          itemGap: 15,\r\n          textStyle: {\r\n            color: \"#ACCFFF\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"5%\",\r\n          right: \"5%\",\r\n          bottom: \"5%\",\r\n          top: \"10%\",\r\n          containLabel: true,\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"value\",\r\n            show: false,\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n              formatter: function (value) {\r\n                return value + \"(万元)\";\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"category\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n            },\r\n            offset: 20,\r\n            data: honorXAxisData,\r\n          },\r\n        ],\r\n        series: [\r\n         {\r\n            name: \"用电量（单位：亿）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"inside\",\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 14,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[0].data,\r\n          },\r\n          {\r\n            name: \"碳排放量（单位：万）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"top\",\r\n                formatter: function (params) {\r\n                  console.log(params);\r\n                  // return  params.seriesName + params.value ;\r\n                  return \"完成\" + params.value;\r\n                },\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 12,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[1].data,\r\n          },\r\n        ],\r\n      };\r\n\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailedTwo33() {\r\n      // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\r\n      var honorData = [\r\n        {\r\n          name: \"用电量（单位：亿）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        {\r\n          name: \"碳排放量（单位：万）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        \r\n      ];\r\n      var honorXAxisData = [\r\n        \"盐都区\",\r\n        \"建湖县\",\r\n        \"射阳县\",\r\n        \"阜宁县\",\r\n        \"滨海县\",\r\n      ];\r\n      // // 设置灰色背景色的长度\r\n      var isMax = 2000;\r\n      var bjData1 = [\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n      ];\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n\r\n      var option = {\r\n        color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"none\",\r\n          },\r\n        },\r\n      \r\n\r\n        legend: {\r\n          right: 5,\r\n          top: \"5%\",\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          itemGap: 15,\r\n          textStyle: {\r\n            color: \"#ACCFFF\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"5%\",\r\n          right: \"5%\",\r\n          bottom: \"5%\",\r\n          top: \"10%\",\r\n          containLabel: true,\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"value\",\r\n            show: false,\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n              formatter: function (value) {\r\n                return value + \"(万元)\";\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"category\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n            },\r\n            offset: 20,\r\n            data: honorXAxisData,\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"用电量（单位：亿）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"inside\",\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 14,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[0].data,\r\n          },\r\n          {\r\n            name: \"碳排放量（单位：万）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"top\",\r\n                formatter: function (params) {\r\n                  console.log(params);\r\n                  // return  params.seriesName + params.value ;\r\n                  return \"完成\" + params.value;\r\n                },\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 12,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[1].data,\r\n          },\r\n        ],\r\n      };\r\n\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n      detailedTwo44() {\r\n    \r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo4\"));\r\n    var data = [{\r\n        name: \"使用中资源量\",\r\n        value: 754\r\n    },\r\n    {\r\n        name: \"维修中资源量\",\r\n        value: 611\r\n    },\r\n    {\r\n        name: \"保养中资源量\",\r\n        value: 400\r\n    },\r\n    {\r\n        name: \"已损坏资源量\",\r\n        value: 200\r\n    }\r\n];\r\nvar arrName = getArrayValue(data, \"name\");\r\nvar arrValue = getArrayValue(data, \"value\");\r\nvar sumValue = eval(arrValue.join('+'));\r\nvar objData = array2obj(data, \"name\");\r\nvar optionData = getData(data)\r\nfunction getArrayValue(array, key) {\r\n    var key = key || \"value\";\r\n    var res = [];\r\n    if (array) {\r\n        array.forEach(function(t) {\r\n            res.push(t[key]);\r\n        });\r\n    }\r\n    return res;\r\n}\r\n\r\nfunction array2obj(array,key) {\r\n\tvar resObj = {};\r\n\tfor(var i=0;i<array.length;i++){\r\n\t\tresObj[array[i][key]] = array[i];\r\n\t}\r\n\treturn resObj;\r\n}\r\n\r\nfunction getData(data) {\r\n    var res = {\r\n        series: [],\r\n        yAxis: []\r\n    };\r\n    for (let i = 0; i < data.length; i++) {\r\n        // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);\r\n        res.series.push({\r\n            name: '',\r\n            type: 'pie',\r\n            clockWise: false, //顺时加载\r\n            hoverAnimation: false, //鼠标移入变大\r\n            radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],\r\n            center: [\"30%\", \"55%\"],\r\n            label: {\r\n                show: false\r\n            },\r\n            itemStyle: {\r\n                label: {\r\n                    show: false,\r\n                },\r\n                labelLine: {\r\n                    show: false\r\n                },\r\n                borderWidth: 5,\r\n            },\r\n            data: [{\r\n                value: data[i].value,\r\n                name: data[i].name\r\n            }, {\r\n                value: sumValue - data[i].value,\r\n                name: '',\r\n                itemStyle: {\r\n                    color: \"rgba(0,0,0,0)\",\r\n                    borderWidth: 0\r\n                },\r\n                tooltip: {\r\n                    show: false\r\n                },\r\n                hoverAnimation: false\r\n            }]\r\n        });\r\n        res.series.push({\r\n            name: '',\r\n            type: 'pie',\r\n            silent: true,\r\n            z: 1,\r\n            clockWise: false, //顺时加载\r\n            hoverAnimation: false, //鼠标移入变大\r\n            radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],\r\n            center: [\"30%\", \"55%\"],\r\n            label: {\r\n                show: false\r\n            },\r\n            itemStyle: {\r\n                label: {\r\n                    show: false,\r\n                },\r\n                labelLine: {\r\n                    show: false\r\n                },\r\n                borderWidth: 5,\r\n            },\r\n            data: [{\r\n                value: 7.5,\r\n                itemStyle: {\r\n                    color: \"rgb(3, 31, 62)\",\r\n                    borderWidth: 0\r\n                },\r\n                tooltip: {\r\n                    show: false\r\n                },\r\n                hoverAnimation: false\r\n            }, {\r\n                value: 2.5,\r\n                name: '',\r\n                itemStyle: {\r\n                    color: \"rgba(0,0,0,0)\",\r\n                    borderWidth: 0\r\n                },\r\n                tooltip: {\r\n                    show: false\r\n                },\r\n                hoverAnimation: false\r\n            }]\r\n        });\r\n        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + \"%\");\r\n    }\r\n    return res;\r\n}\r\nvar option = {\r\n    legend: {\r\n        show: true,\r\n        icon:\"circle\",\r\n        top: \"center\",\r\n        left: '70%',\r\n        data: arrName,\r\n        width:50,\r\n        padding: [0, 5],\r\n        itemGap: 25,\r\n        formatter: function(name) {\r\n            return \"{title|\" + name + \"}\\n{value|\" + (objData[name].value) +\"}  {title|项}\"\r\n        },\r\n       \r\n        textStyle: {\r\n            rich: {\r\n                title: {\r\n                    fontSize: 16,\r\n                    lineHeight: 15,\r\n                    color: \"rgb(0, 178, 246)\"\r\n                },\r\n                value: {\r\n                    fontSize: 18,\r\n                    lineHeight: 20,\r\n                    color: \"#fff\"\r\n                }\r\n            }\r\n        },\r\n    },\r\n    tooltip: {\r\n        show: true,\r\n        trigger: \"item\",\r\n        formatter: \"{a}<br>{b}:{c}({d}%)\"\r\n    },\r\n    color: ['rgb(24, 183, 142)', 'rgb(1, 179, 238)', 'rgb(22, 75, 205)', 'rgb(52, 52, 176)'],\r\n    grid: {\r\n        top: '16%',\r\n        bottom: '53%',\r\n        left: \"30%\",\r\n        containLabel: false\r\n    },\r\n    yAxis: [{\r\n        type: 'category',\r\n        inverse: true,\r\n        axisLine: {\r\n            show: false\r\n        },\r\n        axisTick: {\r\n            show: false\r\n        },\r\n        axisLabel: {\r\n            interval: 0,\r\n            inside: true,\r\n            textStyle: {\r\n                color: \"#fff\",\r\n                fontSize: 16,\r\n            },\r\n            show: true\r\n        },\r\n        data: optionData.yAxis\r\n    }],\r\n    xAxis: [{\r\n        show: false\r\n    }],\r\n    series: optionData.series\r\n};\r\n      \r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    barCharts() {\r\n       // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\r\n        var honorData = [\r\n        {\r\n          name: \"用电量（单位：亿）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        {\r\n          name: \"碳排放量（单位：万）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        \r\n      ];\r\n      var honorXAxisData = [\r\n        \"盐都区\",\r\n        \"建湖县\",\r\n        \"射阳县\",\r\n        \"阜宁县\",\r\n        \"滨海县\",\r\n      ];\r\n      // // 设置灰色背景色的长度\r\n      var isMax = 2000;\r\n      var bjData1 = [\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n      ];\r\n      var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\r\n\r\n      var option = {\r\n        color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"none\",\r\n          },\r\n        },\r\n      \r\n\r\n        legend: {\r\n          right: 5,\r\n          top: \"5%\",\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          itemGap: 15,\r\n          textStyle: {\r\n            color: \"#ACCFFF\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"5%\",\r\n          right: \"5%\",\r\n          bottom: \"5%\",\r\n          top: \"10%\",\r\n          containLabel: true,\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"value\",\r\n            show: false,\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n              formatter: function (value) {\r\n                return value + \"(万元)\";\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"category\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n            },\r\n            offset: 20,\r\n            data: honorXAxisData,\r\n          },\r\n        ],\r\n        series: [\r\n         {\r\n            name: \"用电量（单位：亿）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"inside\",\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 14,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[0].data,\r\n          },\r\n          {\r\n            name: \"碳排放量（单位：万）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"top\",\r\n                formatter: function (params) {\r\n                  console.log(params);\r\n                  // return  params.seriesName + params.value ;\r\n                  return \"完成\" + params.value;\r\n                },\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 12,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[1].data,\r\n          },\r\n        ],\r\n      };\r\n\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailen() {\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\r\n      var option = {\r\n        color: [\r\n          \"#A0CE3A\",\r\n          \"#31C5C0\",\r\n          \"#1E9BD1\",\r\n          \"#0F347B\",\r\n          \"#585247\",\r\n          \"#7F6AAD\",\r\n          \"#009D85\",\r\n          \"rgba(250,250,250,0.3)\",\r\n        ],\r\n\r\n        tooltip: {\r\n          trigger: \"item\",\r\n          formatter: \"{a} <br/>{b} : {c} ({d}%)\",\r\n        },\r\n\r\n        legend: {\r\n          orient: \"vertical\",\r\n          top: \"middle\",\r\n          right: \"5%\",\r\n          textStyle: {\r\n            color: \"#fff\",\r\n            fontSize: 18,\r\n          },\r\n          //格式化图例文本\r\n          formatter(name) {\r\n            // console.log(option);\r\n            let than = option.series[0].data; //获取series中的data\r\n            let total = 0;\r\n            let tarValue;\r\n            for (let i = 0, l = than.length; i < l; i++) {\r\n              total += than[i].value;\r\n              if (than[i].name == name) {\r\n                tarValue = than[i].value;\r\n              }\r\n            }\r\n            let p = (tarValue / total) * 100;\r\n            return p.toFixed(2) + \"%\";\r\n          },\r\n          icon: \"roundRect\",\r\n          data: [\r\n            \"国网大丰市供电公司\",\r\n            \"设备管理部\",\r\n            \"国网射阳县供电公司\",\r\n            \"国网响水县供电公司\",\r\n            \"盐城运维检修部(检修分公司)\",\r\n            \"开发区供电服务中心\",\r\n          ],\r\n        },\r\n\r\n        calculable: true,\r\n        series: [\r\n          {\r\n            type: \"pie\",\r\n            center: [\"35%\", \"50%\"],\r\n            radius: [30, 120],\r\n            roseType: \"area\",\r\n            labelLine: {\r\n              normal: {\r\n                length: 20, //第一条线\r\n                length: 5, //第二条线\r\n                lineStyle: {\r\n                  width: 3, // 线条的宽度\r\n                  color: \"rgb(86,254,226)\", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色\r\n                },\r\n              },\r\n            },\r\n\r\n            itemStyle: {\r\n              normal: {\r\n                label: {\r\n                  show: true,\r\n                  fontSize: 20,\r\n                  color: \"#fff\",\r\n                },\r\n              },\r\n            },\r\n            data: [\r\n              { value: 22, name: \"国网大丰市供电公司\" },\r\n              { value: 20, name: \"设备管理部\" },\r\n              { value: 21, name: \"国网射阳县供电公司\" },\r\n              { value: 25, name: \"国网响水县供电公司\" },\r\n              { value: 20, name: \"盐城运维检修部(检修分公司)\" },\r\n              { value: 30, name: \"开发区供电服务中心\" },\r\n            ],\r\n          },\r\n        ],\r\n      };\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n  },\r\n  watch: {},\r\n};\r\n",{"version":3,"sources":["enterprisePollutionMonitoring.vue"],"names":[],"mappings":";AAgPA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"enterprisePollutionMonitoring.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n  <div class=\"home\">\r\n    <div class=\"left\" id=\"left\">\r\n      \r\n       <div class=\"one\" style=\"height: 100%\">\r\n        <div class=\"cartitle\">\r\n          <div class=\"titleFont\">\r\n            <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>年度行业用电量排放量</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n               <div id=\"detailedTwo1\"></div>\r\n               \r\n          </div>\r\n        \r\n           \r\n        </div>\r\n          <div class=\"line\">\r\n               <div id=\"detailedTwo4\"></div>\r\n               \r\n          </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"left1\" id=\"left\">\r\n      <div class=\"two\" style=\"height: 49%\">\r\n        <div class=\"cartitle\">\r\n          <div class=\"titleFont\">\r\n            <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>区县用电量与碳排放量</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <!-- <div class=\"enselect\">\r\n              <img src=\"../assets/02/地区选择下拉菜单.png\" alt=\"\" />\r\n              <span class=\"text\">2022</span>\r\n            </div> -->\r\n         \r\n             <div id=\"detailedTwo3\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"two\" style=\"height: 49%\">\r\n        <div class=\"cartitle\">\r\n          <div class=\"titleFont\">\r\n            <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>企业用电量与碳排放量</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <!-- <div class=\"enselect\">\r\n              <img src=\"../assets/02/地区选择下拉菜单.png\" alt=\"\" />\r\n              <span class=\"text\">2022</span>\r\n            </div> -->\r\n            <div id=\"detailedTwo2\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"middle\" id=\"middle\">\r\n      <div class=\"map\" style=\"height: 100%\">\r\n        <img class=\"allimg\" src=\"../assets/indexN/大丰市选中.png\" alt=\"\" />\r\n        <div class=\"imgboxone\">\r\n          <div class=\"contents\">\r\n            <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left\"\r\n                      src=\"../assets/index/总数据图标1.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>年度总用电量（2021）</span>\r\n                  </div>\r\n                  <h5 class=\"yellow\">\r\n                    &nbsp;&nbsp;&nbsp;9.279 <span style=\"color: #fff\">万</span>\r\n                  </h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left; height: 30px; width: 30px\"\r\n                      src=\"../assets/index/总数据图标2.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>年度总用电量（2022）</span>\r\n                  </div>\r\n                  <h5 class=\"orange\">\r\n                    &nbsp;&nbsp;118.5<span style=\"color: #fff\">万</span>\r\n                  </h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left; height: 30px; width: 30px\"\r\n                      src=\"../assets/index/总数据图标1.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>年度总碳排放量（2021）</span>\r\n                  </div>\r\n                  <h5 class=\"yellow\">&nbsp;&nbsp;44</h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left; height: 30px; width: 30px\"\r\n                      src=\"../assets/index/总数据图标2.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>年度总碳排放量（2022）</span>\r\n                  </div>\r\n                  <h5 class=\"orange\">&nbsp;&nbsp;10</h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n             <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left; height: 30px; width: 30px\"\r\n                      src=\"../assets/index/总数据图标2.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>年度客户总数（2021）</span>\r\n                  </div>\r\n                  <h5 class=\"orange\">&nbsp;&nbsp;10</h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n             <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left; height: 30px; width: 30px\"\r\n                      src=\"../assets/index/总数据图标2.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>年度客户总数（2022）</span>\r\n                  </div>\r\n                  <h5 class=\"orange\">&nbsp;&nbsp;4968</h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"right\" id=\"right\">\r\n      <div class=\"two\" style=\"height: 49%\">\r\n        <div class=\"cartitle\">\r\n          <div class=\"titleFont\">\r\n            <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>行业用电量与碳排放量</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <div id=\"barCharts\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"two\" style=\"height: 49%\">\r\n        <div class=\"cartitle\">\r\n          <div class=\"titleFont\">\r\n            <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>两高行业用电量</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <div id=\"detailen\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"right1\" id=\"right\">\r\n      <div class=\"one\" style=\"height: 100%\">\r\n        <div class=\"cartitle\">\r\n          <div class=\"titleFont\">\r\n            <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>两高行业用电明细</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <table>\r\n              <thead style=\"color: #fff; font-size: 30px\">\r\n                <tr>\r\n                  <td>客户名称</td>\r\n                  <td>用电地址</td>\r\n                  <td>用电日期</td>\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                <tr v-for=\"(item, index) in pvTable\" :key=\"index\">\r\n                  <td>{{ item.name }}</td>\r\n                  <td>{{ item.stationNumber }}</td>\r\n                  <td class=\"titleFont\">{{ item.alternatorNumber }}</td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <audio\r\n      controls=\"controls\"\r\n      hidden\r\n      src=\"../assets/videos/police.wav\"\r\n      ref=\"audio\"\r\n    ></audio>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n//引入echarts\r\nimport * as echarts from \"echarts\";\r\n// 工单统计弹窗组件\r\nimport workOrder from \"../component/workOrder.vue\";\r\nimport ringMainUnit from \"./HomePop/ringMainUnit.vue\";\r\nimport routeDetail from \"../component/routeDetail.vue\";\r\n\r\n// 线路详情\r\nimport lineDetail from \"../component/lineDetail.vue\";\r\nexport default {\r\n  name: \"twentyKV\",\r\n  components: {\r\n    ringMainUnit, //环网柜弹窗\r\n    workOrder, //工单统计弹窗\r\n    routeDetail, //线路故障跳闸明细\r\n    lineDetail, //线路详情弹窗\r\n  },\r\n  data() {\r\n    return {\r\n      pageShow: true,\r\n      totals: 5,\r\n      pageSize: 10,\r\n      page: 1,\r\n      threeImg: require(\"../assets/images/pieBorder.png\"),\r\n      enlargeShow: true,\r\n      dateList: [\"周\", \"月\"],\r\n      acolor: true, //是否展示颜色\r\n      currentIndex: -1,\r\n      alarmInformationData: [],\r\n      alarmInformationShow: false, //报警详情信息弹窗\r\n      realTimeAlarmShow: false, //实时报警弹窗\r\n      modelOthers: false,\r\n      componentShow: \"\",\r\n      CompanyInfo: {},\r\n      tableData: [],\r\n      btnArr: [\"总览\", \"环网柜\", \"分支箱\", \"箱变\", \"开闭所\"],\r\n      btnActive: 0,\r\n      iconGround: [\r\n        {\r\n          icon: require(\"@/assets/images/huanwanggui.png\"),\r\n          name: \"环网柜\",\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/fenzhixiang.png\"),\r\n          name: \"分支箱\",\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/xiangbian.png\"),\r\n          name: \"箱变\",\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/kaibisuo.png\"),\r\n          name: \"开闭所\",\r\n        },\r\n      ],\r\n      btnEnlarge: [\r\n        {\r\n          icon: require(\"@/assets/images/btnTiShi.png\"),\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/btnFangDa.png\"),\r\n        },\r\n      ],\r\n      btnEnlarge1: [\r\n        {\r\n          icon: require(\"@/assets/images/btnTiShi.png\"),\r\n        },\r\n        {\r\n          icon: require(\"@/assets/images/suoxiao.png\"),\r\n        },\r\n      ],\r\n      options: [\r\n        {\r\n          value: \"\",\r\n          label: \"\",\r\n        },\r\n      ],\r\n      value: \"\",\r\n      topContent: [\r\n        {\r\n          name: \"配变数量\",\r\n          count: \"\",\r\n        },\r\n        {\r\n          name: \"重复停运台次\",\r\n          count: \"\",\r\n        },\r\n        {\r\n          name: \"配变重复停运率\",\r\n          count: \"\",\r\n        },\r\n      ],\r\n      device: \"\",\r\n      tableData: [],\r\n      tableKey: +new Date(),\r\n      scrollTop: 0, //table距离顶部距离\r\n      option: null,\r\n      myChartBin: null,\r\n      // 工单\r\n      orderItem: null,\r\n      orderShow: \"\",\r\n      // 线路故障明细\r\n      routeItem: null,\r\n      routeShow: \"\",\r\n      // 配电线路\r\n      lineItem: null,\r\n      lineShow: \"\",\r\n      timer: null, //定时器\r\n      emergencyList: [], //告警数据\r\n      rowTime: \"\",\r\n      pvTable: [\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n           name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n        name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n           name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n           name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n          name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n        {\r\n           name: \"尤伟健\",\r\n          stationNumber: \"江苏省盐城市***组47\",\r\n          alternatorNumber: \"2022-05-27\",\r\n        },\r\n      ],\r\n    };\r\n  },\r\n  created() {},\r\n  mounted() {\r\n    this.detailedTwo11();\r\n    this.detailedTwo22();\r\n    this.detailedTwo33();\r\n     this.detailedTwo44();\r\n    this.barCharts();\r\n    this.detailen();\r\n  },\r\n  methods: {\r\n    detailedTwo11() {\r\n      var fontColor = \"#fff\";\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n    var option = {\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"shadow\",\r\n          },\r\n        },\r\n        legend: {\r\n          textStyle: {\r\n            fontSize: 18, //字体大小\r\n            color: \"#ffffff\", //字体颜色\r\n          },\r\n\r\n          data: [\"用电量\", \"碳排放量\"],\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            data: [\r\n              \"10kv北红线124\",\r\n              \"10kv北红线125\",\r\n              \"10kv北红线126\",\r\n              \"10kv北红线127\",\r\n              \"10kv北红线128\",\r\n            ],\r\n            axisLabel: {\r\n              show: true,\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"value\",\r\n            name: \"\",\r\n            axisLabel: {\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"用电量\",\r\n            type: \"bar\",\r\n            itemStyle: {\r\n              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                { offset: 1, color: \"rgba(86,254,226,.2) \" },\r\n                { offset: 0.5, color: \"rgb(86,254,226,.6)\" },\r\n                { offset: 0, color: \"rgb(86,254,226)\" },\r\n              ]),\r\n              borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n              borderWidth: 0,\r\n            },\r\n            emphasis: {\r\n              focus: \"series\",\r\n            },\r\n            data: [320, 332, 301, 334, 390],\r\n          },\r\n          {\r\n            name: \"碳排放量\",\r\n            type: \"bar\",\r\n            itemStyle: {\r\n              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                { offset: 1, color: \"rgba(237,125,49,.2) \" },\r\n                { offset: 0.5, color: \"rgb(237,125,49,.6)\" },\r\n                { offset: 0, color: \"rgb(237,125,49)\" },\r\n              ]),\r\n              borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n              borderWidth: 0,\r\n            },\r\n            emphasis: {\r\n              focus: \"series\",\r\n            },\r\n            data: [220, 182, 191, 234, 290],\r\n          },\r\n        ],\r\n      };\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailedTwo22() {\r\n       // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\r\n       var honorData = [\r\n        {\r\n          name: \"用电量（单位：亿）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        {\r\n          name: \"碳排放量（单位：万）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        \r\n      ];\r\n      var honorXAxisData = [\r\n        \"盐都区\",\r\n        \"建湖县\",\r\n        \"射阳县\",\r\n        \"阜宁县\",\r\n        \"滨海县\",\r\n      ];\r\n      // // 设置灰色背景色的长度\r\n      var isMax = 2000;\r\n      var bjData1 = [\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n      ];\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo2\"));\r\n\r\n      var option = {\r\n        color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"none\",\r\n          },\r\n        },\r\n      \r\n\r\n        legend: {\r\n          right: 5,\r\n          top: \"5%\",\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          itemGap: 15,\r\n          textStyle: {\r\n            color: \"#ACCFFF\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"5%\",\r\n          right: \"5%\",\r\n          bottom: \"5%\",\r\n          top: \"10%\",\r\n          containLabel: true,\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"value\",\r\n            show: false,\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n              formatter: function (value) {\r\n                return value + \"(万元)\";\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"category\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n            },\r\n            offset: 20,\r\n            data: honorXAxisData,\r\n          },\r\n        ],\r\n        series: [\r\n         {\r\n            name: \"用电量（单位：亿）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"inside\",\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 14,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[0].data,\r\n          },\r\n          {\r\n            name: \"碳排放量（单位：万）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"top\",\r\n                formatter: function (params) {\r\n                  console.log(params);\r\n                  // return  params.seriesName + params.value ;\r\n                  return \"完成\" + params.value;\r\n                },\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 12,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[1].data,\r\n          },\r\n        ],\r\n      };\r\n\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailedTwo33() {\r\n      // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\r\n      var honorData = [\r\n        {\r\n          name: \"用电量（单位：亿）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        {\r\n          name: \"碳排放量（单位：万）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        \r\n      ];\r\n      var honorXAxisData = [\r\n        \"盐都区\",\r\n        \"建湖县\",\r\n        \"射阳县\",\r\n        \"阜宁县\",\r\n        \"滨海县\",\r\n      ];\r\n      // // 设置灰色背景色的长度\r\n      var isMax = 2000;\r\n      var bjData1 = [\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n      ];\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n\r\n      var option = {\r\n        color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"none\",\r\n          },\r\n        },\r\n      \r\n\r\n        legend: {\r\n          right: 5,\r\n          top: \"5%\",\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          itemGap: 15,\r\n          textStyle: {\r\n            color: \"#ACCFFF\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"5%\",\r\n          right: \"5%\",\r\n          bottom: \"5%\",\r\n          top: \"10%\",\r\n          containLabel: true,\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"value\",\r\n            show: false,\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n              formatter: function (value) {\r\n                return value + \"(万元)\";\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"category\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n            },\r\n            offset: 20,\r\n            data: honorXAxisData,\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"用电量（单位：亿）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"inside\",\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 14,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[0].data,\r\n          },\r\n          {\r\n            name: \"碳排放量（单位：万）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"top\",\r\n                formatter: function (params) {\r\n                  console.log(params);\r\n                  // return  params.seriesName + params.value ;\r\n                  return \"完成\" + params.value;\r\n                },\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 12,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[1].data,\r\n          },\r\n        ],\r\n      };\r\n\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n      detailedTwo44() {\r\n    \r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo4\"));\r\n    var data = [{\r\n        name: \"使用中资源量\",\r\n        value: 754\r\n    },\r\n    {\r\n        name: \"维修中资源量\",\r\n        value: 611\r\n    },\r\n    {\r\n        name: \"保养中资源量\",\r\n        value: 400\r\n    },\r\n    {\r\n        name: \"已损坏资源量\",\r\n        value: 200\r\n    }\r\n];\r\nvar arrName = getArrayValue(data, \"name\");\r\nvar arrValue = getArrayValue(data, \"value\");\r\nvar sumValue = eval(arrValue.join('+'));\r\nvar objData = array2obj(data, \"name\");\r\nvar optionData = getData(data)\r\nfunction getArrayValue(array, key) {\r\n    var key = key || \"value\";\r\n    var res = [];\r\n    if (array) {\r\n        array.forEach(function(t) {\r\n            res.push(t[key]);\r\n        });\r\n    }\r\n    return res;\r\n}\r\n\r\nfunction array2obj(array,key) {\r\n\tvar resObj = {};\r\n\tfor(var i=0;i<array.length;i++){\r\n\t\tresObj[array[i][key]] = array[i];\r\n\t}\r\n\treturn resObj;\r\n}\r\n\r\nfunction getData(data) {\r\n    var res = {\r\n        series: [],\r\n        yAxis: []\r\n    };\r\n    for (let i = 0; i < data.length; i++) {\r\n        // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);\r\n        res.series.push({\r\n            name: '',\r\n            type: 'pie',\r\n            clockWise: false, //顺时加载\r\n            hoverAnimation: false, //鼠标移入变大\r\n            radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],\r\n            center: [\"30%\", \"55%\"],\r\n            label: {\r\n                show: false\r\n            },\r\n            itemStyle: {\r\n                label: {\r\n                    show: false,\r\n                },\r\n                labelLine: {\r\n                    show: false\r\n                },\r\n                borderWidth: 5,\r\n            },\r\n            data: [{\r\n                value: data[i].value,\r\n                name: data[i].name\r\n            }, {\r\n                value: sumValue - data[i].value,\r\n                name: '',\r\n                itemStyle: {\r\n                    color: \"rgba(0,0,0,0)\",\r\n                    borderWidth: 0\r\n                },\r\n                tooltip: {\r\n                    show: false\r\n                },\r\n                hoverAnimation: false\r\n            }]\r\n        });\r\n        res.series.push({\r\n            name: '',\r\n            type: 'pie',\r\n            silent: true,\r\n            z: 1,\r\n            clockWise: false, //顺时加载\r\n            hoverAnimation: false, //鼠标移入变大\r\n            radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],\r\n            center: [\"30%\", \"55%\"],\r\n            label: {\r\n                show: false\r\n            },\r\n            itemStyle: {\r\n                label: {\r\n                    show: false,\r\n                },\r\n                labelLine: {\r\n                    show: false\r\n                },\r\n                borderWidth: 5,\r\n            },\r\n            data: [{\r\n                value: 7.5,\r\n                itemStyle: {\r\n                    color: \"rgb(3, 31, 62)\",\r\n                    borderWidth: 0\r\n                },\r\n                tooltip: {\r\n                    show: false\r\n                },\r\n                hoverAnimation: false\r\n            }, {\r\n                value: 2.5,\r\n                name: '',\r\n                itemStyle: {\r\n                    color: \"rgba(0,0,0,0)\",\r\n                    borderWidth: 0\r\n                },\r\n                tooltip: {\r\n                    show: false\r\n                },\r\n                hoverAnimation: false\r\n            }]\r\n        });\r\n        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + \"%\");\r\n    }\r\n    return res;\r\n}\r\nvar option = {\r\n    legend: {\r\n        show: true,\r\n        icon:\"circle\",\r\n        top: \"center\",\r\n        left: '70%',\r\n        data: arrName,\r\n        width:50,\r\n        padding: [0, 5],\r\n        itemGap: 25,\r\n        formatter: function(name) {\r\n            return \"{title|\" + name + \"}\\n{value|\" + (objData[name].value) +\"}  {title|项}\"\r\n        },\r\n       \r\n        textStyle: {\r\n            rich: {\r\n                title: {\r\n                    fontSize: 16,\r\n                    lineHeight: 15,\r\n                    color: \"rgb(0, 178, 246)\"\r\n                },\r\n                value: {\r\n                    fontSize: 18,\r\n                    lineHeight: 20,\r\n                    color: \"#fff\"\r\n                }\r\n            }\r\n        },\r\n    },\r\n    tooltip: {\r\n        show: true,\r\n        trigger: \"item\",\r\n        formatter: \"{a}<br>{b}:{c}({d}%)\"\r\n    },\r\n    color: ['rgb(24, 183, 142)', 'rgb(1, 179, 238)', 'rgb(22, 75, 205)', 'rgb(52, 52, 176)'],\r\n    grid: {\r\n        top: '16%',\r\n        bottom: '53%',\r\n        left: \"30%\",\r\n        containLabel: false\r\n    },\r\n    yAxis: [{\r\n        type: 'category',\r\n        inverse: true,\r\n        axisLine: {\r\n            show: false\r\n        },\r\n        axisTick: {\r\n            show: false\r\n        },\r\n        axisLabel: {\r\n            interval: 0,\r\n            inside: true,\r\n            textStyle: {\r\n                color: \"#fff\",\r\n                fontSize: 16,\r\n            },\r\n            show: true\r\n        },\r\n        data: optionData.yAxis\r\n    }],\r\n    xAxis: [{\r\n        show: false\r\n    }],\r\n    series: optionData.series\r\n};\r\n      \r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    barCharts() {\r\n       // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\r\n        var honorData = [\r\n        {\r\n          name: \"用电量（单位：亿）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        {\r\n          name: \"碳排放量（单位：万）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        \r\n      ];\r\n      var honorXAxisData = [\r\n        \"盐都区\",\r\n        \"建湖县\",\r\n        \"射阳县\",\r\n        \"阜宁县\",\r\n        \"滨海县\",\r\n      ];\r\n      // // 设置灰色背景色的长度\r\n      var isMax = 2000;\r\n      var bjData1 = [\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n      ];\r\n      var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\r\n\r\n      var option = {\r\n        color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"none\",\r\n          },\r\n        },\r\n      \r\n\r\n        legend: {\r\n          right: 5,\r\n          top: \"5%\",\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          itemGap: 15,\r\n          textStyle: {\r\n            color: \"#ACCFFF\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"5%\",\r\n          right: \"5%\",\r\n          bottom: \"5%\",\r\n          top: \"10%\",\r\n          containLabel: true,\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"value\",\r\n            show: false,\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n              formatter: function (value) {\r\n                return value + \"(万元)\";\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"category\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n            },\r\n            offset: 20,\r\n            data: honorXAxisData,\r\n          },\r\n        ],\r\n        series: [\r\n         {\r\n            name: \"用电量（单位：亿）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"inside\",\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 14,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[0].data,\r\n          },\r\n          {\r\n            name: \"碳排放量（单位：万）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"top\",\r\n                formatter: function (params) {\r\n                  console.log(params);\r\n                  // return  params.seriesName + params.value ;\r\n                  return \"完成\" + params.value;\r\n                },\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 12,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[1].data,\r\n          },\r\n        ],\r\n      };\r\n\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailen() {\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\r\n      var option = {\r\n        color: [\r\n          \"#A0CE3A\",\r\n          \"#31C5C0\",\r\n          \"#1E9BD1\",\r\n          \"#0F347B\",\r\n          \"#585247\",\r\n          \"#7F6AAD\",\r\n          \"#009D85\",\r\n          \"rgba(250,250,250,0.3)\",\r\n        ],\r\n\r\n        tooltip: {\r\n          trigger: \"item\",\r\n          formatter: \"{a} <br/>{b} : {c} ({d}%)\",\r\n        },\r\n\r\n        legend: {\r\n          orient: \"vertical\",\r\n          top: \"middle\",\r\n          right: \"5%\",\r\n          textStyle: {\r\n            color: \"#fff\",\r\n            fontSize: 18,\r\n          },\r\n          //格式化图例文本\r\n          formatter(name) {\r\n            // console.log(option);\r\n            let than = option.series[0].data; //获取series中的data\r\n            let total = 0;\r\n            let tarValue;\r\n            for (let i = 0, l = than.length; i < l; i++) {\r\n              total += than[i].value;\r\n              if (than[i].name == name) {\r\n                tarValue = than[i].value;\r\n              }\r\n            }\r\n            let p = (tarValue / total) * 100;\r\n            return p.toFixed(2) + \"%\";\r\n          },\r\n          icon: \"roundRect\",\r\n          data: [\r\n            \"国网大丰市供电公司\",\r\n            \"设备管理部\",\r\n            \"国网射阳县供电公司\",\r\n            \"国网响水县供电公司\",\r\n            \"盐城运维检修部(检修分公司)\",\r\n            \"开发区供电服务中心\",\r\n          ],\r\n        },\r\n\r\n        calculable: true,\r\n        series: [\r\n          {\r\n            type: \"pie\",\r\n            center: [\"35%\", \"50%\"],\r\n            radius: [30, 120],\r\n            roseType: \"area\",\r\n            labelLine: {\r\n              normal: {\r\n                length: 20, //第一条线\r\n                length: 5, //第二条线\r\n                lineStyle: {\r\n                  width: 3, // 线条的宽度\r\n                  color: \"rgb(86,254,226)\", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色\r\n                },\r\n              },\r\n            },\r\n\r\n            itemStyle: {\r\n              normal: {\r\n                label: {\r\n                  show: true,\r\n                  fontSize: 20,\r\n                  color: \"#fff\",\r\n                },\r\n              },\r\n            },\r\n            data: [\r\n              { value: 22, name: \"国网大丰市供电公司\" },\r\n              { value: 20, name: \"设备管理部\" },\r\n              { value: 21, name: \"国网射阳县供电公司\" },\r\n              { value: 25, name: \"国网响水县供电公司\" },\r\n              { value: 20, name: \"盐城运维检修部(检修分公司)\" },\r\n              { value: 30, name: \"开发区供电服务中心\" },\r\n            ],\r\n          },\r\n        ],\r\n      };\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n  },\r\n  watch: {},\r\n};\r\n</script>\r\n<style lang=\"less\" scoped>\r\n.content {\r\n  /deep/ .el-table__body td .cell {\r\n    white-space: normal !important;\r\n  }\r\n}\r\n\r\n.two {\r\n  /deep/ .el-table__body-wrapper {\r\n    height: 195px !important;\r\n  }\r\n  .enselect {\r\n    position: absolute;\r\n    right: 30px;\r\n    img {\r\n      float: right;\r\n    }\r\n    .text {\r\n      float: right;\r\n      // right: -10px;\r\n      margin-right: -60px;\r\n      font-size: 20px;\r\n\r\n      color: #fff;\r\n    }\r\n  }\r\n}\r\n\r\n// 滚动条的宽度\r\n/deep/ .el-table__body-wrapper::-webkit-scrollbar {\r\n  width: 6px; // 横向滚动条\r\n  height: 6px; // 纵向滚动条 必写\r\n  // display: block !important;\r\n}\r\n\r\n// 滚动条的滑块\r\n/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {\r\n  background-color: rgba(35, 160, 247, 1);\r\n  border-radius: 3px;\r\n}\r\n\r\n/deep/ .el-table--scrollable-x .el-table__body-wrapper {\r\n  overflow-x: hidden;\r\n}\r\n\r\n.user_skills {\r\n  /deep/ .el-table {\r\n    background-color: transparent !important;\r\n  }\r\n\r\n  /deep/ .el-table th {\r\n    background-color: transparent !important;\r\n  }\r\n\r\n  /deep/ .el-table__header {\r\n    width: 100% !important;\r\n    height: 70px;\r\n    background: url(\"../assets/images/tableBg.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n\r\n    .cell {\r\n      text-align: center !important;\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  /deep/ .el-table__header th {\r\n    border: none;\r\n    padding: 0;\r\n    height: 48px;\r\n\r\n    .cell {\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n\r\n    &.el-table__cell.is-leaf {\r\n      border: none !important;\r\n    }\r\n  }\r\n\r\n  /deep/ .el-table tr {\r\n    background-color: transparent;\r\n  }\r\n\r\n  /deep/ .el-table--enable-row-transition .el-table__body td,\r\n  .el-table .cell {\r\n    background-color: transparent !important;\r\n    border: none;\r\n    color: #ffffff;\r\n  }\r\n\r\n  /deep/ .el-table__body td .cell {\r\n    white-space: nowrap;\r\n    // word-break: break-all;\r\n    display: flex !important;\r\n    justify-content: center !important;\r\n  }\r\n\r\n  /deep/ .el-table th.el-table__cell > .cell {\r\n    color: rgb(86, 254, 226);\r\n  }\r\n\r\n  /deep/.el-table__body,\r\n  .el-table__footer,\r\n  .el-table__header {\r\n    width: 100% !important;\r\n  }\r\n\r\n  /deep/ .el-table__body td .cell {\r\n    // width: 60px !important;\r\n  }\r\n\r\n  // &::before {\r\n  //   //去除底部白线\r\n  //   left: 0;\r\n  //   bottom: 0;\r\n  //   width: 100%;\r\n  //   height: 0px;\r\n  // }\r\n  .el-table::before {\r\n    background-color: transparent;\r\n  }\r\n}\r\n\r\n.home {\r\n  width: 100%;\r\n  height: 100%;\r\n  padding: 15px 28px;\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  justify-content: space-between;\r\n  box-sizing: border-box;\r\n\r\n  .left {\r\n    padding-right: 15px;\r\n    // width: 604px;\r\n    width: 17.18%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: space-between;\r\n    \r\n    #detailedTwo1 {\r\n      width: 100%;\r\n      height: 400px;\r\n    }\r\n     #detailedTwo4 {\r\n      width: 100%;\r\n      height: 400px;\r\n    }\r\n  }\r\n\r\n  .left1 {\r\n    // width: 604px;\r\n    // padding: 0 10px;\r\n    width: 17.18%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: space-between;\r\n    #detailedTwo3 {\r\n      width: 100%;\r\n      height: 400px;\r\n    }\r\n    #detailedTwo2 {\r\n      width: 100%;\r\n      height: 350px;\r\n    }\r\n  }\r\n\r\n  .middle {\r\n    // width: 1590px;\r\n    width: 32.7%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: space-between;\r\n    .imgboxone {\r\n      background: url(\"../assets/04/总数据外框.png\") no-repeat;\r\n      width: 100%;\r\n      height: 17%;\r\n      position: relative;\r\n      top: 45%;\r\n      left: 30%;\r\n      .contents {\r\n        // height: 90%;\r\n        position: absolute;\r\n        padding: 10px;\r\n        height: 100%;\r\n        width: 53%;\r\n        display: flex;\r\n        flex-direction: row;\r\n        /* 平分剩余空间 */\r\n        justify-content: space-around;\r\n        .lines {\r\n          width: 100%;\r\n          padding: 10px 0 0 1px;\r\n          background: url(\"../assets/index/总数据小框.png\") no-repeat;\r\n        }\r\n\r\n        .total {\r\n          .num {\r\n            display: flex;\r\n            flex-flow: column nowrap;\r\n            justify-content: center;\r\n            align-items: left;\r\n            color: #ffffff;\r\n            span {\r\n              font-size: 20px;\r\n            }\r\n            h5 {\r\n              font-size: 34px;\r\n            }\r\n            .yellow {\r\n              padding-top: 30px;\r\n              color: yellow;\r\n            }\r\n            .orange {\r\n              padding-top: 30px;\r\n              color: orange;\r\n            }\r\n            .yellows {\r\n              padding-top: 20px;\r\n              color: yellow;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n    .map {\r\n      background: url(\"../assets/indexN/地图.png\") no-repeat;\r\n      vertical-align: middle;\r\n      display: table-cell;\r\n      text-align: center;\r\n      margin-left: -20%;\r\n      .allimg {\r\n        position: relative;\r\n        left: 20.5%;\r\n        top: 35%;\r\n      }\r\n    }\r\n  }\r\n\r\n  .right {\r\n    // width: 604px;\r\n    width: 16.8%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: space-between;\r\n    #barCharts {\r\n      //   width: 100%;\r\n      //   height: calc(100% - 52px);\r\n      width: 90%;\r\n      height: calc(100% - 100px);\r\n      position: absolute;\r\n    }\r\n    #detailqe {\r\n      width: 100%;\r\n      height: 350px;\r\n    }\r\n    #detailen {\r\n      width: 100%;\r\n      height: 350px;\r\n    }\r\n    .eqselect {\r\n      span {\r\n        font-size: 20px;\r\n        color: #f8f8f8;\r\n      }\r\n      img {\r\n        margin-right: 7px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .right1 {\r\n    // width: 604px;\r\n    width: 17.18%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: space-between;\r\n    #detailstop {\r\n      width: 100%;\r\n      height: 400px;\r\n    }\r\n  }\r\n}\r\n\r\n// }\r\n</style>\r\n<style lang=\"less\" scoped>\r\n//  .el-popper {\r\n//   top: 50%;\r\n// }\r\n\r\n/deep/ .popper__arrow {\r\n  left: 171px !important;\r\n  top: 95px !important;\r\n}\r\n\r\n/deep/ .el-select-dropdown {\r\n  background-color: rgb(14, 30, 46) !important;\r\n  border: 1px solid rgba(45, 143, 148, 0.5) !important;\r\n\r\n  /deep/ .el-select-dropdown__item {\r\n    color: #fff !important;\r\n  }\r\n\r\n  /deep/ .el-select-dropdown__item.hover,\r\n  /deep/ .el-select-dropdown__item:hover {\r\n    background-color: rgb(18, 54, 87) !important;\r\n  }\r\n}\r\n\r\n/deep/ .el-popper[x-placement^=\"bottom\"] {\r\n  margin-top: -146px !important;\r\n}\r\n\r\n/**\r\n表格有滚动效果但是不显示滚动条\r\n*/\r\n</style>\r\n<style lang=\"less\">\r\n.el-table .rowColor0 {\r\n  background: red !important;\r\n  animation: fade 2000ms infinite ease-in-out;\r\n}\r\n\r\n@keyframes fade {\r\n  from {\r\n    opacity: 1;\r\n  }\r\n\r\n  50% {\r\n    opacity: 0.6;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n// .el-pager li:hover{\r\n//   color:black\r\n// }\r\n.cartitle {\r\n  height: 52px;\r\n  width: 100%;\r\n  // background: url(\"../assets/images/carTitle.png\") no-repeat;\r\n  font-size: 24px;\r\n  font-weight: 600;\r\n  color: #ffffff;\r\n  line-height: 52px;\r\n  // text-align: left;\r\n  text-indent: 26px;\r\n}\r\n.titleFont {\r\n  color: transparent;\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n  background-image: linear-gradient(\r\n    to bottom,\r\n    rgb(255, 255, 255),\r\n    rgb(123, 247, 245)\r\n  );\r\n  img {\r\n    margin: 20px;\r\n  }\r\n}\r\n.content {\r\n  padding: 24px 31px 0 31px;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  justify-content: space-between;\r\n\r\n  .line {\r\n    width: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    table {\r\n      thead {\r\n        font-size: 22px !important;\r\n        height: 50px;\r\n        background: url(\"../assets/02/表格标题行.png\") no-repeat;\r\n      }\r\n      tbody {\r\n        tr {\r\n          height: 50px;\r\n          font-size: 18px !important;\r\n          color: #fff;\r\n          background: url(\"../assets/02/表格其他行.png\") no-repeat;\r\n        }\r\n      }\r\n    }\r\n\r\n    .total {\r\n      display: flex;\r\n      flex-flow: row nowrap;\r\n      justify-content: space-around;\r\n      margin-bottom: 15%;\r\n\r\n      .num {\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        justify-content: center;\r\n        align-items: center;\r\n        color: #ffffff;\r\n\r\n        .numText {\r\n          color: #ffffff;\r\n        }\r\n\r\n        .numText:before {\r\n          content: attr(text);\r\n          position: absolute;\r\n          z-index: 10;\r\n          color: rgb(86, 254, 246) !important;\r\n          -webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);\r\n        }\r\n      }\r\n    }\r\n\r\n    .info {\r\n      display: flex;\r\n      flex-flow: column nowrap;\r\n\r\n      .lists {\r\n        width: 100%;\r\n        height: 32px;\r\n        background: url(\"../assets/images/cardSquare.png\") no-repeat;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        background-size: 100% 100%;\r\n        margin-bottom: 9%;\r\n        padding: 0 10px 0 0;\r\n        box-sizing: border-box;\r\n\r\n        & > div {\r\n          font-size: 18px;\r\n          color: #ffffff;\r\n        }\r\n\r\n        .number {\r\n          color: rgb(86, 254, 226);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n.two {\r\n  background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  position: relative;\r\n}\r\n.one {\r\n  background: url(\"../assets/02/表格框.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  position: relative;\r\n\r\n  .unityBtn {\r\n    position: absolute;\r\n    top: 40px;\r\n    left: 30%;\r\n    width: 40%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n\r\n    .btn {\r\n      width: 100%;\r\n      height: 38px;\r\n      color: #fff;\r\n      font-size: 18px;\r\n      line-height: 38px;\r\n      background: url(\"../assets/images/btnAct.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n      margin-bottom: 10px;\r\n      margin-right: 15px;\r\n    }\r\n\r\n    .btnAct {\r\n      color: rgb(244, 201, 7);\r\n      background: url(\"../assets/images/unityBtn.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n      margin-right: 15px;\r\n    }\r\n  }\r\n\r\n  .unityIcon {\r\n    background: url(\"../assets/images/iconCard.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n    width: 110px;\r\n    height: 168px;\r\n    position: absolute;\r\n    right: 40px;\r\n    bottom: 80px;\r\n    display: flex;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n    flex-direction: column;\r\n    justify-content: space-around;\r\n    align-items: center;\r\n\r\n    .unityIconGround {\r\n      width: 80%;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  .unityEnlargeBtn {\r\n    width: 100px;\r\n    display: flex;\r\n    justify-content: space-around;\r\n    position: absolute;\r\n    right: 40px;\r\n    top: 40px;\r\n\r\n    .content {\r\n      width: 38px;\r\n      height: 36px;\r\n      background: url(\"../assets/images/btnkuang.png\") no-repeat !important;\r\n      background-size: 100% 100% !important;\r\n    }\r\n  }\r\n\r\n  .unitySelect {\r\n    position: absolute;\r\n    left: 40px;\r\n    width: 222px;\r\n    height: 5%;\r\n    bottom: 20px;\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    .unitySuosou {\r\n      width: 57px;\r\n      height: 53px;\r\n      background: url(\"../assets/images/sousuoKuang.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"]}]}