1 line
86 KiB
JSON
1 line
86 KiB
JSON
{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js!E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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":1689746903525},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\babel.config.js","mtime":1689642387810},{"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":["import \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/web.dom.iterable\";\nimport _defineProperty from \"E:/2023/yancheng0718/yanchengPowerSupply/node_modules/@babel/runtime/helpers/esm/defineProperty.js\";\n//引入echarts\nimport * as echarts from \"echarts\";\n// 工单统计弹窗组件\nimport workOrder from \"../component/workOrder.vue\";\nimport ringMainUnit from \"./HomePop/ringMainUnit.vue\";\nimport routeDetail from \"../component/routeDetail.vue\";\n\n// 线路详情\nimport lineDetail from \"../component/lineDetail.vue\";\nexport default {\n name: \"twentyKV\",\n components: {\n ringMainUnit: ringMainUnit,\n //环网柜弹窗\n workOrder: workOrder,\n //工单统计弹窗\n routeDetail: routeDetail,\n //线路故障跳闸明细\n lineDetail: lineDetail //线路详情弹窗\n },\n data: function data() {\n var _ref;\n return _ref = {\n pageShow: true,\n totals: 5,\n pageSize: 10,\n page: 1,\n threeImg: require(\"../assets/images/pieBorder.png\"),\n enlargeShow: true,\n dateList: [\"周\", \"月\"],\n acolor: true,\n //是否展示颜色\n currentIndex: -1,\n alarmInformationData: [],\n alarmInformationShow: false,\n //报警详情信息弹窗\n realTimeAlarmShow: false,\n //实时报警弹窗\n modelOthers: false,\n componentShow: \"\",\n CompanyInfo: {},\n tableData: [],\n btnArr: [\"总览\", \"环网柜\", \"分支箱\", \"箱变\", \"开闭所\"],\n btnActive: 0,\n iconGround: [{\n icon: require(\"@/assets/images/huanwanggui.png\"),\n name: \"环网柜\"\n }, {\n icon: require(\"@/assets/images/fenzhixiang.png\"),\n name: \"分支箱\"\n }, {\n icon: require(\"@/assets/images/xiangbian.png\"),\n name: \"箱变\"\n }, {\n icon: require(\"@/assets/images/kaibisuo.png\"),\n name: \"开闭所\"\n }],\n btnEnlarge: [{\n icon: require(\"@/assets/images/btnTiShi.png\")\n }, {\n icon: require(\"@/assets/images/btnFangDa.png\")\n }],\n btnEnlarge1: [{\n icon: require(\"@/assets/images/btnTiShi.png\")\n }, {\n icon: require(\"@/assets/images/suoxiao.png\")\n }],\n options: [{\n value: \"\",\n label: \"\"\n }],\n value: \"\",\n topContent: [{\n name: \"配变数量\",\n count: \"\"\n }, {\n name: \"重复停运台次\",\n count: \"\"\n }, {\n name: \"配变重复停运率\",\n count: \"\"\n }],\n device: \"\"\n }, _defineProperty(_ref, \"tableData\", []), _defineProperty(_ref, \"tableKey\", +new Date()), _defineProperty(_ref, \"scrollTop\", 0), _defineProperty(_ref, \"option\", null), _defineProperty(_ref, \"myChartBin\", null), _defineProperty(_ref, \"orderItem\", null), _defineProperty(_ref, \"orderShow\", \"\"), _defineProperty(_ref, \"routeItem\", null), _defineProperty(_ref, \"routeShow\", \"\"), _defineProperty(_ref, \"lineItem\", null), _defineProperty(_ref, \"lineShow\", \"\"), _defineProperty(_ref, \"timer\", null), _defineProperty(_ref, \"emergencyList\", []), _defineProperty(_ref, \"rowTime\", \"\"), _defineProperty(_ref, \"pvTable\", [{\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }, {\n name: \"尤伟健\",\n stationNumber: \"江苏省盐城市***组47\",\n alternatorNumber: \"2022-05-27\"\n }]), _ref;\n },\n created: function created() {},\n mounted: function mounted() {\n this.detailedTwo11();\n this.detailedTwo22();\n this.detailedTwo33();\n this.detailedTwo44();\n this.barCharts();\n this.detailen();\n },\n methods: {\n detailedTwo11: function detailedTwo11() {\n var fontColor = \"#fff\";\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\n var option = {\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"shadow\"\n }\n },\n legend: {\n textStyle: {\n fontSize: 18,\n //字体大小\n color: \"#ffffff\" //字体颜色\n },\n\n data: [\"用电量\", \"碳排放量\"]\n },\n xAxis: [{\n type: \"category\",\n data: [\"10kv北红线124\", \"10kv北红线125\", \"10kv北红线126\", \"10kv北红线127\", \"10kv北红线128\"],\n axisLabel: {\n show: true,\n textStyle: {\n color: \"#ffffff\"\n }\n }\n }],\n yAxis: [{\n type: \"value\",\n name: \"\",\n axisLabel: {\n textStyle: {\n color: \"#ffffff\"\n }\n }\n }],\n series: [{\n name: \"用电量\",\n type: \"bar\",\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 1,\n color: \"rgba(86,254,226,.2) \"\n }, {\n offset: 0.5,\n color: \"rgb(86,254,226,.6)\"\n }, {\n offset: 0,\n color: \"rgb(86,254,226)\"\n }]),\n borderRadius: [7, 7, 0, 0],\n // 柱状图圆角\n borderWidth: 0\n },\n emphasis: {\n focus: \"series\"\n },\n data: [320, 332, 301, 334, 390]\n }, {\n name: \"碳排放量\",\n type: \"bar\",\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 1,\n color: \"rgba(237,125,49,.2) \"\n }, {\n offset: 0.5,\n color: \"rgb(237,125,49,.6)\"\n }, {\n offset: 0,\n color: \"rgb(237,125,49)\"\n }]),\n borderRadius: [7, 7, 0, 0],\n // 柱状图圆角\n borderWidth: 0\n },\n emphasis: {\n focus: \"series\"\n },\n data: [220, 182, 191, 234, 290]\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailedTwo22: function detailedTwo22() {\n // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\n var honorData = [{\n name: \"用电量（单位：亿）\",\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400]\n }, {\n name: \"碳排放量（单位：万）\",\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400]\n }];\n var honorXAxisData = [\"盐都区\", \"建湖县\", \"射阳县\", \"阜宁县\", \"滨海县\"];\n // // 设置灰色背景色的长度\n var isMax = 2000;\n var bjData1 = [isMax, isMax, isMax, isMax, isMax, isMax, isMax, isMax, isMax];\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo2\"));\n var option = {\n color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"none\"\n }\n },\n legend: {\n right: 5,\n top: \"5%\",\n itemWidth: 10,\n itemHeight: 10,\n itemGap: 15,\n textStyle: {\n color: \"#ACCFFF\",\n fontSize: 16\n }\n },\n grid: {\n left: \"5%\",\n right: \"5%\",\n bottom: \"5%\",\n top: \"10%\",\n containLabel: true\n },\n xAxis: [{\n type: \"value\",\n show: false,\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: \"#6B9DD7\",\n fontSize: 16,\n // 文字大小\n fontWeight: 400,\n interval: 0,\n formatter: function formatter(value) {\n return value + \"(万元)\";\n }\n },\n splitLine: {\n show: false\n }\n }],\n yAxis: [{\n type: \"category\",\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: \"#6B9DD7\",\n fontSize: 16,\n // 文字大小\n fontWeight: 400,\n interval: 0\n },\n offset: 20,\n data: honorXAxisData\n }],\n series: [{\n name: \"用电量（单位：亿）\",\n type: \"bar\",\n stack: \"zongliang\",\n barWidth: \"35%\",\n zlevel: 10,\n label: {\n normal: {\n show: true,\n position: \"inside\",\n textStyle: {\n color: \"#fff\",\n fontSize: 14\n }\n }\n },\n data: honorData[0].data\n }, {\n name: \"碳排放量（单位：万）\",\n type: \"bar\",\n stack: \"zongliang\",\n barWidth: \"35%\",\n zlevel: 10,\n label: {\n normal: {\n show: true,\n position: \"top\",\n formatter: function formatter(params) {\n console.log(params);\n // return params.seriesName + params.value ;\n return \"完成\" + params.value;\n },\n textStyle: {\n color: \"#fff\",\n fontSize: 12\n }\n }\n },\n data: honorData[1].data\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailedTwo33: function detailedTwo33() {\n // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\n var honorData = [{\n name: \"用电量（单位：亿）\",\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400]\n }, {\n name: \"碳排放量（单位：万）\",\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400]\n }];\n var honorXAxisData = [\"盐都区\", \"建湖县\", \"射阳县\", \"阜宁县\", \"滨海县\"];\n // // 设置灰色背景色的长度\n var isMax = 2000;\n var bjData1 = [isMax, isMax, isMax, isMax, isMax, isMax, isMax, isMax, isMax];\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\n var option = {\n color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"none\"\n }\n },\n legend: {\n right: 5,\n top: \"5%\",\n itemWidth: 10,\n itemHeight: 10,\n itemGap: 15,\n textStyle: {\n color: \"#ACCFFF\",\n fontSize: 16\n }\n },\n grid: {\n left: \"5%\",\n right: \"5%\",\n bottom: \"5%\",\n top: \"10%\",\n containLabel: true\n },\n xAxis: [{\n type: \"value\",\n show: false,\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: \"#6B9DD7\",\n fontSize: 16,\n // 文字大小\n fontWeight: 400,\n interval: 0,\n formatter: function formatter(value) {\n return value + \"(万元)\";\n }\n },\n splitLine: {\n show: false\n }\n }],\n yAxis: [{\n type: \"category\",\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: \"#6B9DD7\",\n fontSize: 16,\n // 文字大小\n fontWeight: 400,\n interval: 0\n },\n offset: 20,\n data: honorXAxisData\n }],\n series: [{\n name: \"用电量（单位：亿）\",\n type: \"bar\",\n stack: \"zongliang\",\n barWidth: \"35%\",\n zlevel: 10,\n label: {\n normal: {\n show: true,\n position: \"inside\",\n textStyle: {\n color: \"#fff\",\n fontSize: 14\n }\n }\n },\n data: honorData[0].data\n }, {\n name: \"碳排放量（单位：万）\",\n type: \"bar\",\n stack: \"zongliang\",\n barWidth: \"35%\",\n zlevel: 10,\n label: {\n normal: {\n show: true,\n position: \"top\",\n formatter: function formatter(params) {\n console.log(params);\n // return params.seriesName + params.value ;\n return \"完成\" + params.value;\n },\n textStyle: {\n color: \"#fff\",\n fontSize: 12\n }\n }\n },\n data: honorData[1].data\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailedTwo44: function detailedTwo44() {\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo4\"));\n var data = [{\n name: \"使用中资源量\",\n value: 754\n }, {\n name: \"维修中资源量\",\n value: 611\n }, {\n name: \"保养中资源量\",\n value: 400\n }, {\n name: \"已损坏资源量\",\n value: 200\n }];\n var arrName = getArrayValue(data, \"name\");\n var arrValue = getArrayValue(data, \"value\");\n var sumValue = eval(arrValue.join('+'));\n var objData = array2obj(data, \"name\");\n var optionData = getData(data);\n function getArrayValue(array, key) {\n var key = key || \"value\";\n var res = [];\n if (array) {\n array.forEach(function (t) {\n res.push(t[key]);\n });\n }\n return res;\n }\n function array2obj(array, key) {\n var resObj = {};\n for (var i = 0; i < array.length; i++) {\n resObj[array[i][key]] = array[i];\n }\n return resObj;\n }\n function getData(data) {\n var res = {\n series: [],\n yAxis: []\n };\n for (var i = 0; i < data.length; i++) {\n // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);\n res.series.push({\n name: '',\n type: 'pie',\n clockWise: false,\n //顺时加载\n hoverAnimation: false,\n //鼠标移入变大\n radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],\n center: [\"30%\", \"55%\"],\n label: {\n show: false\n },\n itemStyle: {\n label: {\n show: false\n },\n labelLine: {\n show: false\n },\n borderWidth: 5\n },\n data: [{\n value: data[i].value,\n name: data[i].name\n }, {\n value: sumValue - data[i].value,\n name: '',\n itemStyle: {\n color: \"rgba(0,0,0,0)\",\n borderWidth: 0\n },\n tooltip: {\n show: false\n },\n hoverAnimation: false\n }]\n });\n res.series.push({\n name: '',\n type: 'pie',\n silent: true,\n z: 1,\n clockWise: false,\n //顺时加载\n hoverAnimation: false,\n //鼠标移入变大\n radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],\n center: [\"30%\", \"55%\"],\n label: {\n show: false\n },\n itemStyle: {\n label: {\n show: false\n },\n labelLine: {\n show: false\n },\n borderWidth: 5\n },\n data: [{\n value: 7.5,\n itemStyle: {\n color: \"rgb(3, 31, 62)\",\n borderWidth: 0\n },\n tooltip: {\n show: false\n },\n hoverAnimation: false\n }, {\n value: 2.5,\n name: '',\n itemStyle: {\n color: \"rgba(0,0,0,0)\",\n borderWidth: 0\n },\n tooltip: {\n show: false\n },\n hoverAnimation: false\n }]\n });\n res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + \"%\");\n }\n return res;\n }\n var option = {\n legend: {\n show: true,\n icon: \"circle\",\n top: \"center\",\n left: '70%',\n data: arrName,\n width: 50,\n padding: [0, 5],\n itemGap: 25,\n formatter: function formatter(name) {\n return \"{title|\" + name + \"}\\n{value|\" + objData[name].value + \"} {title|项}\";\n },\n textStyle: {\n rich: {\n title: {\n fontSize: 16,\n lineHeight: 15,\n color: \"rgb(0, 178, 246)\"\n },\n value: {\n fontSize: 18,\n lineHeight: 20,\n color: \"#fff\"\n }\n }\n }\n },\n tooltip: {\n show: true,\n trigger: \"item\",\n formatter: \"{a}<br>{b}:{c}({d}%)\"\n },\n color: ['rgb(24, 183, 142)', 'rgb(1, 179, 238)', 'rgb(22, 75, 205)', 'rgb(52, 52, 176)'],\n grid: {\n top: '16%',\n bottom: '53%',\n left: \"30%\",\n containLabel: false\n },\n yAxis: [{\n type: 'category',\n inverse: true,\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n interval: 0,\n inside: true,\n textStyle: {\n color: \"#fff\",\n fontSize: 16\n },\n show: true\n },\n data: optionData.yAxis\n }],\n xAxis: [{\n show: false\n }],\n series: optionData.series\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n barCharts: function barCharts() {\n // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\n var honorData = [{\n name: \"用电量（单位：亿）\",\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400]\n }, {\n name: \"碳排放量（单位：万）\",\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400]\n }];\n var honorXAxisData = [\"盐都区\", \"建湖县\", \"射阳县\", \"阜宁县\", \"滨海县\"];\n // // 设置灰色背景色的长度\n var isMax = 2000;\n var bjData1 = [isMax, isMax, isMax, isMax, isMax, isMax, isMax, isMax, isMax];\n var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\n var option = {\n color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"none\"\n }\n },\n legend: {\n right: 5,\n top: \"5%\",\n itemWidth: 10,\n itemHeight: 10,\n itemGap: 15,\n textStyle: {\n color: \"#ACCFFF\",\n fontSize: 16\n }\n },\n grid: {\n left: \"5%\",\n right: \"5%\",\n bottom: \"5%\",\n top: \"10%\",\n containLabel: true\n },\n xAxis: [{\n type: \"value\",\n show: false,\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: \"#6B9DD7\",\n fontSize: 16,\n // 文字大小\n fontWeight: 400,\n interval: 0,\n formatter: function formatter(value) {\n return value + \"(万元)\";\n }\n },\n splitLine: {\n show: false\n }\n }],\n yAxis: [{\n type: \"category\",\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: \"#6B9DD7\",\n fontSize: 16,\n // 文字大小\n fontWeight: 400,\n interval: 0\n },\n offset: 20,\n data: honorXAxisData\n }],\n series: [{\n name: \"用电量（单位：亿）\",\n type: \"bar\",\n stack: \"zongliang\",\n barWidth: \"35%\",\n zlevel: 10,\n label: {\n normal: {\n show: true,\n position: \"inside\",\n textStyle: {\n color: \"#fff\",\n fontSize: 14\n }\n }\n },\n data: honorData[0].data\n }, {\n name: \"碳排放量（单位：万）\",\n type: \"bar\",\n stack: \"zongliang\",\n barWidth: \"35%\",\n zlevel: 10,\n label: {\n normal: {\n show: true,\n position: \"top\",\n formatter: function formatter(params) {\n console.log(params);\n // return params.seriesName + params.value ;\n return \"完成\" + params.value;\n },\n textStyle: {\n color: \"#fff\",\n fontSize: 12\n }\n }\n },\n data: honorData[1].data\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailen: function detailen() {\n var _normal;\n var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\n var option = {\n color: [\"#A0CE3A\", \"#31C5C0\", \"#1E9BD1\", \"#0F347B\", \"#585247\", \"#7F6AAD\", \"#009D85\", \"rgba(250,250,250,0.3)\"],\n tooltip: {\n trigger: \"item\",\n formatter: \"{a} <br/>{b} : {c} ({d}%)\"\n },\n legend: {\n orient: \"vertical\",\n top: \"middle\",\n right: \"5%\",\n textStyle: {\n color: \"#fff\",\n fontSize: 18\n },\n //格式化图例文本\n formatter: function formatter(name) {\n // console.log(option);\n var than = option.series[0].data; //获取series中的data\n var total = 0;\n var tarValue;\n for (var i = 0, l = than.length; i < l; i++) {\n total += than[i].value;\n if (than[i].name == name) {\n tarValue = than[i].value;\n }\n }\n var p = tarValue / total * 100;\n return p.toFixed(2) + \"%\";\n },\n icon: \"roundRect\",\n data: [\"国网大丰市供电公司\", \"设备管理部\", \"国网射阳县供电公司\", \"国网响水县供电公司\", \"盐城运维检修部(检修分公司)\", \"开发区供电服务中心\"]\n },\n calculable: true,\n series: [{\n type: \"pie\",\n center: [\"35%\", \"50%\"],\n radius: [30, 120],\n roseType: \"area\",\n labelLine: {\n normal: (_normal = {\n length: 20\n }, _defineProperty(_normal, \"length\", 5), _defineProperty(_normal, \"lineStyle\", {\n width: 3,\n // 线条的宽度\n color: \"rgb(86,254,226)\" //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色\n }), _normal)\n },\n itemStyle: {\n normal: {\n label: {\n show: true,\n fontSize: 20,\n color: \"#fff\"\n }\n }\n },\n data: [{\n value: 22,\n name: \"国网大丰市供电公司\"\n }, {\n value: 20,\n name: \"设备管理部\"\n }, {\n value: 21,\n name: \"国网射阳县供电公司\"\n }, {\n value: 25,\n name: \"国网响水县供电公司\"\n }, {\n value: 20,\n name: \"盐城运维检修部(检修分公司)\"\n }, {\n value: 30,\n name: \"开发区供电服务中心\"\n }]\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n }\n },\n watch: {}\n};",{"version":3,"mappings":";;;AAgPA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;EACAA;EACAC;IACAC;IAAA;IACAC;IAAA;IACAC;IAAA;IACAC;EACA;EACAC;IAAA;IACA;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MAAA;MACAC;MACAC;MACAC;MAAA;MACAC;MAAA;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC,aACA;QACAC;QACA1B;MACA,GACA;QACA0B;QACA1B;MACA,GACA;QACA0B;QACA1B;MACA,GACA;QACA0B;QACA1B;MACA,EACA;MACA2B,aACA;QACAD;MACA,GACA;QACAA;MACA,EACA;MACAE,cACA;QACAF;MACA,GACA;QACAA;MACA,EACA;MACAG,UACA;QACAC;QACAC;MACA,EACA;MACAD;MACAE,aACA;QACAhC;QACAiC;MACA,GACA;QACAjC;QACAiC;MACA,GACA;QACAjC;QACAiC;MACA,EACA;MACAC;IAAA,sCACA,uCACA,iDACA,oCACA,2CACA,0CAEA,0CACA,wCAEA,0CACA,uCAEA,yCACA,oCACA,8CACA,sCACA,sCACA,CACA;MACAlC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,GACA;MACApC;MACAmC;MACAC;IACA,EACA;EAEA;EACAC;EACAC;IACA;IACA;IACA;IACA;IACA;IACA;EACA;EACAC;IACAC;MACA;MACA;MACA;QACAC;UACAC;UACAC;YACAC;UACA;QACA;QACAC;UACAC;YACAC;YAAA;YACAC;UACA;;UAEA1C;QACA;QACA2C,QACA;UACAL;UACAtC,OACA,cACA,cACA,cACA,cACA,aACA;UACA4C;YACAC;YACAL;cACAE;YACA;UACA;QACA,EACA;QACAI,QACA;UACAR;UACA5C;UACAkD;YACAJ;cACAE;YACA;UACA;QACA,EACA;QACAK,SACA;UACArD;UACA4C;UACAU;YACAN,uDACA;cAAAO;cAAAP;YAAA,GACA;cAAAO;cAAAP;YAAA,GACA;cAAAO;cAAAP;YAAA,EACA;YACAQ;YAAA;YACAC;UACA;UACAC;YACAC;UACA;UACArD;QACA,GACA;UACAN;UACA4C;UACAU;YACAN,uDACA;cAAAO;cAAAP;YAAA,GACA;cAAAO;cAAAP;YAAA,GACA;cAAAO;cAAAP;YAAA,EACA;YACAQ;YAAA;YACAC;UACA;UACAC;YACAC;UACA;UACArD;QACA;MAEA;MACAsD;MACAC;QACAD;MACA;IACA;IACAE;MACA;MACA,iBACA;QACA9D;QACAM;MACA,GACA;QACAN;QACAM;MACA,EAEA;MACA,sBACA,OACA,OACA,OACA,OACA,MACA;MACA;MACA;MACA,eACAyD,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,MACA;MACA;MAEA;QACAf;QACAP;UACAC;UACAC;YACAC;UACA;QACA;QAGAC;UACAmB;UACAC;UACAC;UACAC;UACAC;UACAtB;YACAE;YACAD;UACA;QACA;QACAsB;UACAC;UACAN;UACAO;UACAN;UACAO;QACA;QACAvB,QACA;UACAL;UACAO;UACAsB;YACAtB;UACA;UACAuB;YACAvB;UACA;UACAD;YACAF;YACAD;YAAA;YACA4B;YACAC;YACAC;cACA;YACA;UACA;UACAC;YACA3B;UACA;QACA,EACA;QACAC,QACA;UACAR;UACA6B;YACAtB;UACA;UACAuB;YACAvB;UACA;UACAD;YACAF;YACAD;YAAA;YACA4B;YACAC;UACA;UACArB;UACAjD;QACA,EACA;QACA+C,SACA;UACArD;UACA4C;UACAmC;UACAC;UACAC;UACAlD;YACAmD;cACA/B;cACAgC;cACArC;gBACAE;gBACAD;cACA;YACA;UACA;UACAzC;QACA,GACA;UACAN;UACA4C;UACAmC;UACAC;UACAC;UACAlD;YACAmD;cACA/B;cACAgC;cACAN;gBACAO;gBACA;gBACA;cACA;cACAtC;gBACAE;gBACAD;cACA;YACA;UACA;UACAzC;QACA;MAEA;MAEAsD;MACAC;QACAD;MACA;IACA;IACAyB;MACA;MACA,iBACA;QACArF;QACAM;MACA,GACA;QACAN;QACAM;MACA,EAEA;MACA,sBACA,OACA,OACA,OACA,OACA,MACA;MACA;MACA;MACA,eACAyD,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,MACA;MACA;MAEA;QACAf;QACAP;UACAC;UACAC;YACAC;UACA;QACA;QAGAC;UACAmB;UACAC;UACAC;UACAC;UACAC;UACAtB;YACAE;YACAD;UACA;QACA;QACAsB;UACAC;UACAN;UACAO;UACAN;UACAO;QACA;QACAvB,QACA;UACAL;UACAO;UACAsB;YACAtB;UACA;UACAuB;YACAvB;UACA;UACAD;YACAF;YACAD;YAAA;YACA4B;YACAC;YACAC;cACA;YACA;UACA;UACAC;YACA3B;UACA;QACA,EACA;QACAC,QACA;UACAR;UACA6B;YACAtB;UACA;UACAuB;YACAvB;UACA;UACAD;YACAF;YACAD;YAAA;YACA4B;YACAC;UACA;UACArB;UACAjD;QACA,EACA;QACA+C,SACA;UACArD;UACA4C;UACAmC;UACAC;UACAC;UACAlD;YACAmD;cACA/B;cACAgC;cACArC;gBACAE;gBACAD;cACA;YACA;UACA;UACAzC;QACA,GACA;UACAN;UACA4C;UACAmC;UACAC;UACAC;UACAlD;YACAmD;cACA/B;cACAgC;cACAN;gBACAO;gBACA;gBACA;cACA;cACAtC;gBACAE;gBACAD;cACA;YACA;UACA;UACAzC;QACA;MAEA;MAEAsD;MACAC;QACAD;MACA;IACA;IACA0B;MAEA;MACA;QACAtF;QACA8B;MACA,GACA;QACA9B;QACA8B;MACA,GACA;QACA9B;QACA8B;MACA,GACA;QACA9B;QACA8B;MACA,EACA;MACA;MACA;MACA;MACA;MACA;MACA;QACA;QACA;QACA;UACAyD;YACAC;UACA;QACA;QACA;MACA;MAEA;QACA;QACA;UACAC;QACA;QACA;MACA;MAEA;QACA;UACApC;UACAD;QACA;QACA;UACA;UACAoC;YACAxF;YACA4C;YACA8C;YAAA;YACAC;YAAA;YACAC;YACAC;YACA9D;cACAoB;YACA;YACAG;cACAvB;gBACAoB;cACA;cACA2C;gBACA3C;cACA;cACAM;YACA;YACAnD;cACAwB;cACA9B;YACA;cACA8B;cACA9B;cACAsD;gBACAN;gBACAS;cACA;cACAhB;gBACAU;cACA;cACAwC;YACA;UACA;UACAH;YACAxF;YACA4C;YACAmD;YACAC;YACAN;YAAA;YACAC;YAAA;YACAC;YACAC;YACA9D;cACAoB;YACA;YACAG;cACAvB;gBACAoB;cACA;cACA2C;gBACA3C;cACA;cACAM;YACA;YACAnD;cACAwB;cACAwB;gBACAN;gBACAS;cACA;cACAhB;gBACAU;cACA;cACAwC;YACA;cACA7D;cACA9B;cACAsD;gBACAN;gBACAS;cACA;cACAhB;gBACAU;cACA;cACAwC;YACA;UACA;UACAH;QACA;QACA;MACA;MACA;QACA3C;UACAM;UACAzB;UACAuC;UACAK;UACAhE;UACA2F;UACAC;UACA9B;UACAS;YACA;UACA;UAEA/B;YACAqD;cACAC;gBACArD;gBACAsD;gBACArD;cACA;cACAlB;gBACAiB;gBACAsD;gBACArD;cACA;YACA;UACA;QACA;QACAP;UACAU;UACAT;UACAmC;QACA;QACA7B;QACAqB;UACAJ;UACAM;UACAD;UACAE;QACA;QACApB;UACAR;UACA0D;UACA7B;YACAtB;UACA;UACAuB;YACAvB;UACA;UACAD;YACA0B;YACA2B;YACAzD;cACAE;cACAD;YACA;YACAI;UACA;UACA7C;QACA;QACA2C;UACAE;QACA;QACAE;MACA;MAEAO;MACAC;QACAD;MACA;IACA;IACA4C;MACA;MACA,iBACA;QACAxG;QACAM;MACA,GACA;QACAN;QACAM;MACA,EAEA;MACA,sBACA,OACA,OACA,OACA,OACA,MACA;MACA;MACA;MACA,eACAyD,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,MACA;MACA;MAEA;QACAf;QACAP;UACAC;UACAC;YACAC;UACA;QACA;QAGAC;UACAmB;UACAC;UACAC;UACAC;UACAC;UACAtB;YACAE;YACAD;UACA;QACA;QACAsB;UACAC;UACAN;UACAO;UACAN;UACAO;QACA;QACAvB,QACA;UACAL;UACAO;UACAsB;YACAtB;UACA;UACAuB;YACAvB;UACA;UACAD;YACAF;YACAD;YAAA;YACA4B;YACAC;YACAC;cACA;YACA;UACA;UACAC;YACA3B;UACA;QACA,EACA;QACAC,QACA;UACAR;UACA6B;YACAtB;UACA;UACAuB;YACAvB;UACA;UACAD;YACAF;YACAD;YAAA;YACA4B;YACAC;UACA;UACArB;UACAjD;QACA,EACA;QACA+C,SACA;UACArD;UACA4C;UACAmC;UACAC;UACAC;UACAlD;YACAmD;cACA/B;cACAgC;cACArC;gBACAE;gBACAD;cACA;YACA;UACA;UACAzC;QACA,GACA;UACAN;UACA4C;UACAmC;UACAC;UACAC;UACAlD;YACAmD;cACA/B;cACAgC;cACAN;gBACAO;gBACA;gBACA;cACA;cACAtC;gBACAE;gBACAD;cACA;YACA;UACA;UACAzC;QACA;MAEA;MAEAsD;MACAC;QACAD;MACA;IACA;IACA6C;MAAA;MACA;MACA;QACAzD,QACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,wBACA;QAEAP;UACAC;UACAmC;QACA;QAEAhC;UACA6D;UACAzC;UACAD;UACAlB;YACAE;YACAD;UACA;UACA;UACA8B;YACA;YACA;YACA;YACA;YACA;cACA8B;cACA;gBACAC;cACA;YACA;YACA;YACA;UACA;UACAlF;UACApB,OACA,aACA,SACA,aACA,aACA,kBACA;QAEA;QAEAuG;QACAxD,SACA;UACAT;UACAiD;UACAD;UACAkB;UACAhB;YACAZ;cACA6B;YAAA,sCACA,0CACA;cACAd;cAAA;cACAjD;YACA;UAEA;UAEAM;YACA4B;cACAnD;gBACAoB;gBACAJ;gBACAC;cACA;YACA;UACA;UACA1C,OACA;YAAAwB;YAAA9B;UAAA,GACA;YAAA8B;YAAA9B;UAAA,GACA;YAAA8B;YAAA9B;UAAA,GACA;YAAA8B;YAAA9B;UAAA,GACA;YAAA8B;YAAA9B;UAAA,GACA;YAAA8B;YAAA9B;UAAA;QAEA;MAEA;MACA4D;MACAC;QACAD;MACA;IACA;EACA;EACAoD;AACA","names":["name","components","ringMainUnit","workOrder","routeDetail","lineDetail","data","pageShow","totals","pageSize","page","threeImg","enlargeShow","dateList","acolor","currentIndex","alarmInformationData","alarmInformationShow","realTimeAlarmShow","modelOthers","componentShow","CompanyInfo","tableData","btnArr","btnActive","iconGround","icon","btnEnlarge","btnEnlarge1","options","value","label","topContent","count","device","stationNumber","alternatorNumber","created","mounted","methods","detailedTwo11","tooltip","trigger","axisPointer","type","legend","textStyle","fontSize","color","xAxis","axisLabel","show","yAxis","series","itemStyle","offset","borderRadius","borderWidth","emphasis","focus","myChart","window","detailedTwo22","isMax","right","top","itemWidth","itemHeight","itemGap","grid","left","bottom","containLabel","axisLine","axisTick","fontWeight","interval","formatter","splitLine","stack","barWidth","zlevel","normal","position","console","detailedTwo33","detailedTwo44","array","res","resObj","clockWise","hoverAnimation","radius","center","labelLine","silent","z","width","padding","rich","title","lineHeight","inverse","inside","barCharts","detailen","orient","total","tarValue","calculable","roseType","length","watch"],"sourceRoot":"src/views","sources":["enterprisePollutionMonitoring.vue"],"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 89.21<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 39.83<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\"> 242.6<span style=\"color: #fff\">万kwh</span></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\"> 108.3<span style=\"color: #fff\">万kwh</span></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\"> 3673</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\"> 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"]}]} |