{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\digitalFloodDrainageDroughtRelief.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\digitalFloodDrainageDroughtRelief.vue","mtime":1689920064933},{"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: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n ],\r\n };\r\n },\r\n created() {},\r\n mounted() {\r\n this.xianDuan();\r\n this.detailedTwo11();\r\n this.detailedTwo22();\r\n this.detailedTwo33();\r\n this.detailedTwo44();\r\n this.detailedTwo55();\r\n this.detailen();\r\n },\r\n methods: {\r\n //地图画线\r\n xianDuan() {\r\n var canvas = document.getElementById(\"myCanvas\");\r\n var ctx = canvas.getContext(\"2d\");\r\n ctx.font = \"26px Arial\";\r\n ctx.fillStyle = \"#fff\";\r\n ctx.fillText(\"11.87万\", 320, 140);\r\n ctx.fillText(\"14.76万\", 400, 200);\r\n ctx.fillText(\"2.113万\", 270, 360);\r\n ctx.fillText(\"39.12万\", 480, 285);\r\n ctx.fillText(\"7.399万\", 320, 440);\r\n ctx.fillText(\"7.399万\", 480, 410);\r\n ctx.fillText(\"255.1万\", 640, 465);\r\n ctx.fillText(\"298.4万\", 750, 660);\r\n ctx.stroke();\r\n },\r\n detailedTwo11() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"item\",\r\n },\r\n legend: {\r\n textStyle: {\r\n fontSize: 18, //字体大小\r\n color: \"#ffffff\", //字体颜色\r\n data: [\"2021\", \"2022\"],\r\n },\r\n },\r\n grid: {\r\n left: \"3%\",\r\n right: \"4%\",\r\n bottom: \"3%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#195384\",\r\n },\r\n },\r\n data: [\r\n \"1月\",\r\n \"2月\",\r\n \"3月\",\r\n \"4月\",\r\n \"5月\",\r\n \"6月\",\r\n \"7月\",\r\n \"8月\",\r\n \"9月\",\r\n \"10月\",\r\n \"11月\",\r\n \"12月\",\r\n ],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n axisLabel: {\r\n textStyle: { fontSize: 16, color: \"#fff\" },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"2021\",\r\n type: \"line\",\r\n stack: \"Total\",\r\n smooth: true,\r\n symbol: \"none\",\r\n data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],\r\n itemStyle: {\r\n normal: {\r\n color: \"yellow\",\r\n lineStyle: {\r\n color: \"yellow\",\r\n },\r\n },\r\n },\r\n },\r\n {\r\n name: \"2022\",\r\n type: \"line\",\r\n smooth: true,\r\n stack: \"Total\",\r\n symbol: \"none\",\r\n data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],\r\n itemStyle: {\r\n normal: {\r\n color: \"rgba(0,212,199,1)\",\r\n lineStyle: {\r\n color: \"rgba(0,212,199,1)\",\r\n },\r\n },\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 detailedTwo22() {\r\n var fontColor = \"#30eee9\";\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo2\"));\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"item\",\r\n },\r\n legend: {\r\n textStyle: {\r\n fontSize: 18, //字体大小\r\n color: \"#ffffff\", //字体颜色\r\n data: [\"2021\", \"2022\"],\r\n },\r\n },\r\n grid: {\r\n left: \"3%\",\r\n right: \"4%\",\r\n bottom: \"3%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#195384\",\r\n },\r\n },\r\n data: [\r\n \"1月\",\r\n \"2月\",\r\n \"3月\",\r\n \"4月\",\r\n \"5月\",\r\n \"6月\",\r\n \"7月\",\r\n \"8月\",\r\n \"9月\",\r\n \"10月\",\r\n \"11月\",\r\n \"12月\",\r\n ],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n axisLabel: {\r\n textStyle: { fontSize: 16, color: \"#fff\" },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"2021\",\r\n type: \"line\",\r\n stack: \"Total\",\r\n smooth: true,\r\n symbol: \"none\",\r\n data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],\r\n itemStyle: {\r\n normal: {\r\n color: \"yellow\",\r\n lineStyle: {\r\n color: \"yellow\",\r\n },\r\n },\r\n },\r\n },\r\n {\r\n name: \"2022\",\r\n type: \"line\",\r\n smooth: true,\r\n stack: \"Total\",\r\n symbol: \"none\",\r\n data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],\r\n itemStyle: {\r\n normal: {\r\n color: \"rgba(0,212,199,1)\",\r\n lineStyle: {\r\n color: \"rgba(0,212,199,1)\",\r\n },\r\n },\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 var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"item\",\r\n },\r\n legend: {\r\n textStyle: {\r\n fontSize: 18, //字体大小\r\n color: \"#ffffff\", //字体颜色\r\n data: [\"2021\", \"2022\"],\r\n },\r\n },\r\n grid: {\r\n left: \"3%\",\r\n right: \"4%\",\r\n bottom: \"3%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#195384\",\r\n },\r\n },\r\n data: [\r\n \"1月\",\r\n \"2月\",\r\n \"3月\",\r\n \"4月\",\r\n \"5月\",\r\n \"6月\",\r\n \"7月\",\r\n \"8月\",\r\n \"9月\",\r\n \"10月\",\r\n \"11月\",\r\n \"12月\",\r\n ],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n axisLabel: {\r\n textStyle: { fontSize: 16, color: \"#fff\" },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"2021\",\r\n type: \"line\",\r\n stack: \"Total\",\r\n smooth: true,\r\n symbol: \"none\",\r\n data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],\r\n itemStyle: {\r\n normal: {\r\n color: \"yellow\",\r\n lineStyle: {\r\n color: \"yellow\",\r\n },\r\n },\r\n },\r\n },\r\n {\r\n name: \"2022\",\r\n type: \"line\",\r\n smooth: true,\r\n stack: \"Total\",\r\n symbol: \"none\",\r\n data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],\r\n itemStyle: {\r\n normal: {\r\n color: \"rgba(0,212,199,1)\",\r\n lineStyle: {\r\n color: \"rgba(0,212,199,1)\",\r\n },\r\n },\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 var myChart = this.$echarts.init(document.getElementById(\"detailedTwo4\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n grid: {\r\n left: \"10%\", // grid布局设置适当调整避免X轴文字只能部分显示\r\n right: \"1%\", // grid布局设置适当调整避免X轴文字只能部分显示\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: [\"2021\", \"2022\"],\r\n },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: [\r\n \"苗庄河西泵\",\r\n \"中堡排涝泵\",\r\n \"新东排涝泵\",\r\n \"山河村泵\",\r\n \"花垛南泵\",\r\n \"吉兴北泵\",\r\n ],\r\n axisLabel: {\r\n interval: 0,\r\n color: \"#fff\",\r\n fontSize: \"16\",\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n min: 0,\r\n max: 160,\r\n interval: 40,\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 18,\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"2021\",\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: [150, 63, 72, 33, 47, 88],\r\n },\r\n {\r\n name: \"2022\",\r\n type: \"bar\",\r\n itemStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 1, color: \"rgba(255,255,0,.2) \" },\r\n { offset: 0.5, color: \"rgb(255,255,0,.6)\" },\r\n { offset: 0, color: \"rgb(255,255,0)\" },\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: [45, 123, 35, 67, 58, 124],\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 detailedTwo55() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo5\"));\r\n var img =\r\n \"data:image/png;base64,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\";\r\n var trafficWay = [\r\n {\r\n name: \"启用\",\r\n value: 32,\r\n },\r\n {\r\n name: \"未启用\",\r\n value: 67,\r\n },\r\n ];\r\n\r\n var data = [];\r\n var color = [\r\n \"#00ffff\",\r\n \"#00cfff\",\r\n \"#006ced\",\r\n \"#ffe000\",\r\n \"#ffa800\",\r\n \"#ff5b00\",\r\n \"#ff3000\",\r\n ];\r\n for (var i = 0; i < trafficWay.length; i++) {\r\n data.push(\r\n {\r\n value: trafficWay[i].value,\r\n name: trafficWay[i].name,\r\n itemStyle: {\r\n normal: {\r\n borderWidth: 5,\r\n shadowBlur: 20,\r\n borderColor: color[i],\r\n shadowColor: color[i],\r\n },\r\n },\r\n },\r\n {\r\n value: 2,\r\n name: \"\",\r\n itemStyle: {\r\n normal: {\r\n label: {\r\n show: false,\r\n },\r\n labelLine: {\r\n show: false,\r\n },\r\n color: \"rgba(0, 0, 0, 0)\",\r\n borderColor: \"rgba(0, 0, 0, 0)\",\r\n borderWidth: 0,\r\n },\r\n },\r\n }\r\n );\r\n }\r\n var seriesOption = [\r\n {\r\n name: \"\",\r\n type: \"pie\",\r\n clockWise: false,\r\n radius: [70, 75],\r\n hoverAnimation: false,\r\n itemStyle: {\r\n normal: {\r\n label: {\r\n show: true,\r\n position: \"outside\",\r\n color: \"#fff\",\r\n fontSize: 16,\r\n formatter: function (params) {\r\n var percent = 0;\r\n var total = 0;\r\n for (var i = 0; i < trafficWay.length; i++) {\r\n total += trafficWay[i].value;\r\n }\r\n percent = ((params.value / total) * 100).toFixed(0);\r\n if (params.name !== \"\") {\r\n return \"\" + params.name + \"\\n\" + \"\\n\" + \"\" + percent + \"%\";\r\n } else {\r\n return \"\";\r\n }\r\n },\r\n },\r\n labelLine: {\r\n length: 10,\r\n length2: 5,\r\n show: true,\r\n color: \"#00ffff\",\r\n },\r\n },\r\n },\r\n data: data,\r\n },\r\n ];\r\n var option = {\r\n // backgroundColor: \"#013A54\",\r\n color: color,\r\n title: {\r\n text: \"\",\r\n top: \"48%\",\r\n textAlign: \"center\",\r\n left: \"49%\",\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 18,\r\n fontWeight: \"400\",\r\n },\r\n },\r\n graphic: {\r\n elements: [\r\n {\r\n type: \"image\",\r\n z: 3,\r\n style: {\r\n image: img,\r\n width: 120,\r\n height: 120,\r\n },\r\n left: \"center\",\r\n top: \"center\",\r\n position: [50, 50],\r\n },\r\n ],\r\n },\r\n\r\n tooltip: {\r\n show: false,\r\n },\r\n\r\n toolbox: {\r\n show: false,\r\n },\r\n series: seriesOption,\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 tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"cross\",\r\n crossStyle: {\r\n color: \"#999\",\r\n },\r\n },\r\n },\r\n grid: {\r\n bottom: \"10%\", //图表距离容器上面多少距离\r\n top: \"20%\", //图表距离容器上面多少距离\r\n containLabel: true, //防止标签溢出\r\n },\r\n legend: [\r\n {\r\n x: \"center\",\r\n data: [\"投运15年以上设备数量\", \"统计时间所辖线路设备数量\"],\r\n textStyle: {\r\n fontSize: 18,\r\n color: \"#fff\",\r\n },\r\n },\r\n {\r\n x: \"center\",\r\n top: \"8%\",\r\n data: [\"设备老化占比\", \"设备绝缘率\"],\r\n textStyle: {\r\n fontSize: 18,\r\n color: \"#fff\",\r\n },\r\n },\r\n ],\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n show: true,\r\n data: [\r\n \"10kv星雨线163\",\r\n \"10kv智谋线183\",\r\n \"10kv朝阳线164\",\r\n \"10kv杨庄线1811\",\r\n \"10kv森达线174\",\r\n \"10kv武港线176\",\r\n ],\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n axisLabel: {\r\n interval: 0, //设置成 0 强制显示所有标签\r\n rotate: -20, //使文本旋转\r\n color: \"#fff\",\r\n fontSize: \"16\",\r\n },\r\n axisTick: {\r\n //x轴刻度相关设置\r\n alignWithLabel: true,\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n min: 0,\r\n max: 160,\r\n interval: 40,\r\n axisLabel: {\r\n textStyle: {\r\n fontSize: \"18\",\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n {\r\n type: \"value\",\r\n min: 20,\r\n max: 100,\r\n interval: 20,\r\n axisLabel: {\r\n formatter: \"{value}%\",\r\n textStyle: {\r\n fontSize: \"18\",\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"投运15年以上设备数量\",\r\n type: \"bar\",\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 1, color: \"rgba(255,255,0,.2) \" },\r\n { offset: 0.5, color: \"rgb(255,255,0,.6)\" },\r\n { offset: 0, color: \"rgb(255,255,0)\" },\r\n ]),\r\n borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n borderWidth: 0,\r\n },\r\n data: [89, 78, 89, 56, 100, 56],\r\n },\r\n {\r\n name: \"统计时间所辖线路设备数量\",\r\n type: \"bar\",\r\n\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\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 data: [56, 78, 99, 76, 55, 67],\r\n },\r\n {\r\n name: \"设备老化占比\",\r\n type: \"line\",\r\n yAxisIndex: 1,\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: \"orange\",\r\n lineStyle: {\r\n color: \"orange\",\r\n },\r\n },\r\n },\r\n data: [40, 77, 56, 89, 70, 50],\r\n },\r\n {\r\n name: \"设备绝缘率\",\r\n type: \"line\",\r\n yAxisIndex: 1,\r\n\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: \"Cyan\",\r\n lineStyle: {\r\n color: \"Cyan\",\r\n },\r\n },\r\n },\r\n data: [45, 56, 76, 43, 66, 60],\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":["digitalFloodDrainageDroughtRelief.vue"],"names":[],"mappings":";AA+NA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;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;;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;;AAEA;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;;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;;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","file":"digitalFloodDrainageDroughtRelief.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n <div class=\"home\">\r\n <div class=\"left\" 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/btjt.png\" alt=\"\" />\r\n <span>排涝泵用电量分析</span>\r\n <img src=\"./../assets/indexN/btjt1.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 </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/btjt.png\" alt=\"\" />\r\n <span>排涝泵用电时长分析</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div id=\"detailedTwo2\"></div>\r\n </div>\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/btjt.png\" alt=\"\" />\r\n <span>建湖公司近两年汛情指数分析</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\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/btjt.png\" alt=\"\" />\r\n <span>用户电量详细分析</span>\r\n <img src=\"./../assets/indexN/btjt1.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/dqxcxl.png\" alt=\"\" />\r\n <span class=\"text\">2022</span>\r\n </div> -->\r\n <div id=\"detailedTwo4\"></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 <canvas id=\"myCanvas\" width=\"1000\" height=\"700\"></canvas>\r\n <div class=\"imgboxtwo\">\r\n <div class=\"cartitle\">\r\n <div c>抗旱排涝启用清单</div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div id=\"detailedTwo5\"></div>\r\n </div>\r\n <div></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/btjt.png\" alt=\"\" />\r\n <span>数字化辅助地方排涝抗旱管理系统</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <ul class=\"contentUl\">\r\n <li>\r\n <div style=\"position: relative; height: 80%\">\r\n <img src=\"../assets/05/sjfx.png\" />\r\n <div class=\"text\">\r\n 10\r\n <span style=\"font-size: 15px; color: #fff\"\r\n > 个</span\r\n >\r\n </div>\r\n </div>\r\n <h4>辖区管理供电所</h4>\r\n </li>\r\n <li>\r\n <div style=\"position: relative; height: 80%\">\r\n <img src=\"../assets/05/sjfx.png\" />\r\n <div class=\"text\" style=\"left: 10%\">\r\n 13884\r\n <span style=\"font-size: 15px; color: #fff\"\r\n > 个</span\r\n >\r\n </div>\r\n </div>\r\n <h4>辖区管理台区</h4>\r\n </li>\r\n <li>\r\n <div style=\"position: relative; height: 80%\">\r\n <img src=\"../assets/05/sjfx.png\" />\r\n <div class=\"text\">\r\n 306\r\n <span style=\"font-size: 15px; color: #fff\"> 条</span>\r\n </div>\r\n </div>\r\n <h4>自然村</h4>\r\n </li>\r\n <li>\r\n <div style=\"position: relative; height: 80%\">\r\n <img src=\"../assets/05/sjfx.png\" />\r\n <div class=\"text\" style=\"color: orange\">\r\n 9108\r\n <span style=\"font-size: 15px; color: #fff\">台</span>\r\n </div>\r\n </div>\r\n <h4>辖区管理配变</h4>\r\n </li>\r\n <li>\r\n <div style=\"position: relative; height: 80%\">\r\n <img src=\"../assets/05/sjfx.png\" />\r\n <div class=\"texts\">\r\n 4776\r\n <span style=\"font-size: 15px; color: #fff\"\r\n > 户</span\r\n >\r\n </div>\r\n </div>\r\n <h4>辖区用户</h4>\r\n </li>\r\n <li>\r\n <div style=\"position: relative; height: 80%\">\r\n <img src=\"../assets/05/sjfx.png\" />\r\n <div class=\"texts\">\r\n 1094\r\n <span style=\"font-size: 15px; color: #fff\">个</span>\r\n </div>\r\n </div>\r\n <h4>辖区排涝泵</h4>\r\n </li>\r\n </ul>\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/btjt.png\" alt=\"\" />\r\n <span>设备老化明细情况分析</span>\r\n <img src=\"./../assets/indexN/btjt1.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/btjt.png\" alt=\"\" />\r\n <span>数字化辅助地方排涝抗旱管理系统</span>\r\n <img src=\"./../assets/indexN/btjt1.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/05/dateXl.png\" alt=\"\" />\r\n <span class=\"text\">辖区管理配变详情</span>\r\n </div>\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>{{ 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: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n {\r\n name: \"建湖县供电公司\",\r\n stationNumber: \"上岗供电所\",\r\n alternatorNumber: \"PMS_三港***配变更换\",\r\n },\r\n ],\r\n };\r\n },\r\n created() {},\r\n mounted() {\r\n this.xianDuan();\r\n this.detailedTwo11();\r\n this.detailedTwo22();\r\n this.detailedTwo33();\r\n this.detailedTwo44();\r\n this.detailedTwo55();\r\n this.detailen();\r\n },\r\n methods: {\r\n //地图画线\r\n xianDuan() {\r\n var canvas = document.getElementById(\"myCanvas\");\r\n var ctx = canvas.getContext(\"2d\");\r\n ctx.font = \"26px Arial\";\r\n ctx.fillStyle = \"#fff\";\r\n ctx.fillText(\"11.87万\", 320, 140);\r\n ctx.fillText(\"14.76万\", 400, 200);\r\n ctx.fillText(\"2.113万\", 270, 360);\r\n ctx.fillText(\"39.12万\", 480, 285);\r\n ctx.fillText(\"7.399万\", 320, 440);\r\n ctx.fillText(\"7.399万\", 480, 410);\r\n ctx.fillText(\"255.1万\", 640, 465);\r\n ctx.fillText(\"298.4万\", 750, 660);\r\n ctx.stroke();\r\n },\r\n detailedTwo11() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"item\",\r\n },\r\n legend: {\r\n textStyle: {\r\n fontSize: 18, //字体大小\r\n color: \"#ffffff\", //字体颜色\r\n data: [\"2021\", \"2022\"],\r\n },\r\n },\r\n grid: {\r\n left: \"3%\",\r\n right: \"4%\",\r\n bottom: \"3%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#195384\",\r\n },\r\n },\r\n data: [\r\n \"1月\",\r\n \"2月\",\r\n \"3月\",\r\n \"4月\",\r\n \"5月\",\r\n \"6月\",\r\n \"7月\",\r\n \"8月\",\r\n \"9月\",\r\n \"10月\",\r\n \"11月\",\r\n \"12月\",\r\n ],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n axisLabel: {\r\n textStyle: { fontSize: 16, color: \"#fff\" },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"2021\",\r\n type: \"line\",\r\n stack: \"Total\",\r\n smooth: true,\r\n symbol: \"none\",\r\n data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],\r\n itemStyle: {\r\n normal: {\r\n color: \"yellow\",\r\n lineStyle: {\r\n color: \"yellow\",\r\n },\r\n },\r\n },\r\n },\r\n {\r\n name: \"2022\",\r\n type: \"line\",\r\n smooth: true,\r\n stack: \"Total\",\r\n symbol: \"none\",\r\n data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],\r\n itemStyle: {\r\n normal: {\r\n color: \"rgba(0,212,199,1)\",\r\n lineStyle: {\r\n color: \"rgba(0,212,199,1)\",\r\n },\r\n },\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 detailedTwo22() {\r\n var fontColor = \"#30eee9\";\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo2\"));\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"item\",\r\n },\r\n legend: {\r\n textStyle: {\r\n fontSize: 18, //字体大小\r\n color: \"#ffffff\", //字体颜色\r\n data: [\"2021\", \"2022\"],\r\n },\r\n },\r\n grid: {\r\n left: \"3%\",\r\n right: \"4%\",\r\n bottom: \"3%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#195384\",\r\n },\r\n },\r\n data: [\r\n \"1月\",\r\n \"2月\",\r\n \"3月\",\r\n \"4月\",\r\n \"5月\",\r\n \"6月\",\r\n \"7月\",\r\n \"8月\",\r\n \"9月\",\r\n \"10月\",\r\n \"11月\",\r\n \"12月\",\r\n ],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n axisLabel: {\r\n textStyle: { fontSize: 16, color: \"#fff\" },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"2021\",\r\n type: \"line\",\r\n stack: \"Total\",\r\n smooth: true,\r\n symbol: \"none\",\r\n data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],\r\n itemStyle: {\r\n normal: {\r\n color: \"yellow\",\r\n lineStyle: {\r\n color: \"yellow\",\r\n },\r\n },\r\n },\r\n },\r\n {\r\n name: \"2022\",\r\n type: \"line\",\r\n smooth: true,\r\n stack: \"Total\",\r\n symbol: \"none\",\r\n data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],\r\n itemStyle: {\r\n normal: {\r\n color: \"rgba(0,212,199,1)\",\r\n lineStyle: {\r\n color: \"rgba(0,212,199,1)\",\r\n },\r\n },\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 var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"item\",\r\n },\r\n legend: {\r\n textStyle: {\r\n fontSize: 18, //字体大小\r\n color: \"#ffffff\", //字体颜色\r\n data: [\"2021\", \"2022\"],\r\n },\r\n },\r\n grid: {\r\n left: \"3%\",\r\n right: \"4%\",\r\n bottom: \"3%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#195384\",\r\n },\r\n },\r\n data: [\r\n \"1月\",\r\n \"2月\",\r\n \"3月\",\r\n \"4月\",\r\n \"5月\",\r\n \"6月\",\r\n \"7月\",\r\n \"8月\",\r\n \"9月\",\r\n \"10月\",\r\n \"11月\",\r\n \"12月\",\r\n ],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n axisLabel: {\r\n textStyle: { fontSize: 16, color: \"#fff\" },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"2021\",\r\n type: \"line\",\r\n stack: \"Total\",\r\n smooth: true,\r\n symbol: \"none\",\r\n data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],\r\n itemStyle: {\r\n normal: {\r\n color: \"yellow\",\r\n lineStyle: {\r\n color: \"yellow\",\r\n },\r\n },\r\n },\r\n },\r\n {\r\n name: \"2022\",\r\n type: \"line\",\r\n smooth: true,\r\n stack: \"Total\",\r\n symbol: \"none\",\r\n data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],\r\n itemStyle: {\r\n normal: {\r\n color: \"rgba(0,212,199,1)\",\r\n lineStyle: {\r\n color: \"rgba(0,212,199,1)\",\r\n },\r\n },\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 var myChart = this.$echarts.init(document.getElementById(\"detailedTwo4\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n grid: {\r\n left: \"10%\", // grid布局设置适当调整避免X轴文字只能部分显示\r\n right: \"1%\", // grid布局设置适当调整避免X轴文字只能部分显示\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: [\"2021\", \"2022\"],\r\n },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: [\r\n \"苗庄河西泵\",\r\n \"中堡排涝泵\",\r\n \"新东排涝泵\",\r\n \"山河村泵\",\r\n \"花垛南泵\",\r\n \"吉兴北泵\",\r\n ],\r\n axisLabel: {\r\n interval: 0,\r\n color: \"#fff\",\r\n fontSize: \"16\",\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n min: 0,\r\n max: 160,\r\n interval: 40,\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 18,\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"2021\",\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: [150, 63, 72, 33, 47, 88],\r\n },\r\n {\r\n name: \"2022\",\r\n type: \"bar\",\r\n itemStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 1, color: \"rgba(255,255,0,.2) \" },\r\n { offset: 0.5, color: \"rgb(255,255,0,.6)\" },\r\n { offset: 0, color: \"rgb(255,255,0)\" },\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: [45, 123, 35, 67, 58, 124],\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 detailedTwo55() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo5\"));\r\n var img =\r\n \"data:image/png;base64,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\";\r\n var trafficWay = [\r\n {\r\n name: \"启用\",\r\n value: 32,\r\n },\r\n {\r\n name: \"未启用\",\r\n value: 67,\r\n },\r\n ];\r\n\r\n var data = [];\r\n var color = [\r\n \"#00ffff\",\r\n \"#00cfff\",\r\n \"#006ced\",\r\n \"#ffe000\",\r\n \"#ffa800\",\r\n \"#ff5b00\",\r\n \"#ff3000\",\r\n ];\r\n for (var i = 0; i < trafficWay.length; i++) {\r\n data.push(\r\n {\r\n value: trafficWay[i].value,\r\n name: trafficWay[i].name,\r\n itemStyle: {\r\n normal: {\r\n borderWidth: 5,\r\n shadowBlur: 20,\r\n borderColor: color[i],\r\n shadowColor: color[i],\r\n },\r\n },\r\n },\r\n {\r\n value: 2,\r\n name: \"\",\r\n itemStyle: {\r\n normal: {\r\n label: {\r\n show: false,\r\n },\r\n labelLine: {\r\n show: false,\r\n },\r\n color: \"rgba(0, 0, 0, 0)\",\r\n borderColor: \"rgba(0, 0, 0, 0)\",\r\n borderWidth: 0,\r\n },\r\n },\r\n }\r\n );\r\n }\r\n var seriesOption = [\r\n {\r\n name: \"\",\r\n type: \"pie\",\r\n clockWise: false,\r\n radius: [70, 75],\r\n hoverAnimation: false,\r\n itemStyle: {\r\n normal: {\r\n label: {\r\n show: true,\r\n position: \"outside\",\r\n color: \"#fff\",\r\n fontSize: 16,\r\n formatter: function (params) {\r\n var percent = 0;\r\n var total = 0;\r\n for (var i = 0; i < trafficWay.length; i++) {\r\n total += trafficWay[i].value;\r\n }\r\n percent = ((params.value / total) * 100).toFixed(0);\r\n if (params.name !== \"\") {\r\n return \"\" + params.name + \"\\n\" + \"\\n\" + \"\" + percent + \"%\";\r\n } else {\r\n return \"\";\r\n }\r\n },\r\n },\r\n labelLine: {\r\n length: 10,\r\n length2: 5,\r\n show: true,\r\n color: \"#00ffff\",\r\n },\r\n },\r\n },\r\n data: data,\r\n },\r\n ];\r\n var option = {\r\n // backgroundColor: \"#013A54\",\r\n color: color,\r\n title: {\r\n text: \"\",\r\n top: \"48%\",\r\n textAlign: \"center\",\r\n left: \"49%\",\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 18,\r\n fontWeight: \"400\",\r\n },\r\n },\r\n graphic: {\r\n elements: [\r\n {\r\n type: \"image\",\r\n z: 3,\r\n style: {\r\n image: img,\r\n width: 120,\r\n height: 120,\r\n },\r\n left: \"center\",\r\n top: \"center\",\r\n position: [50, 50],\r\n },\r\n ],\r\n },\r\n\r\n tooltip: {\r\n show: false,\r\n },\r\n\r\n toolbox: {\r\n show: false,\r\n },\r\n series: seriesOption,\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 tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"cross\",\r\n crossStyle: {\r\n color: \"#999\",\r\n },\r\n },\r\n },\r\n grid: {\r\n bottom: \"10%\", //图表距离容器上面多少距离\r\n top: \"20%\", //图表距离容器上面多少距离\r\n containLabel: true, //防止标签溢出\r\n },\r\n legend: [\r\n {\r\n x: \"center\",\r\n data: [\"投运15年以上设备数量\", \"统计时间所辖线路设备数量\"],\r\n textStyle: {\r\n fontSize: 18,\r\n color: \"#fff\",\r\n },\r\n },\r\n {\r\n x: \"center\",\r\n top: \"8%\",\r\n data: [\"设备老化占比\", \"设备绝缘率\"],\r\n textStyle: {\r\n fontSize: 18,\r\n color: \"#fff\",\r\n },\r\n },\r\n ],\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n show: true,\r\n data: [\r\n \"10kv星雨线163\",\r\n \"10kv智谋线183\",\r\n \"10kv朝阳线164\",\r\n \"10kv杨庄线1811\",\r\n \"10kv森达线174\",\r\n \"10kv武港线176\",\r\n ],\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n axisLabel: {\r\n interval: 0, //设置成 0 强制显示所有标签\r\n rotate: -20, //使文本旋转\r\n color: \"#fff\",\r\n fontSize: \"16\",\r\n },\r\n axisTick: {\r\n //x轴刻度相关设置\r\n alignWithLabel: true,\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n min: 0,\r\n max: 160,\r\n interval: 40,\r\n axisLabel: {\r\n textStyle: {\r\n fontSize: \"18\",\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n {\r\n type: \"value\",\r\n min: 20,\r\n max: 100,\r\n interval: 20,\r\n axisLabel: {\r\n formatter: \"{value}%\",\r\n textStyle: {\r\n fontSize: \"18\",\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"投运15年以上设备数量\",\r\n type: \"bar\",\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 1, color: \"rgba(255,255,0,.2) \" },\r\n { offset: 0.5, color: \"rgb(255,255,0,.6)\" },\r\n { offset: 0, color: \"rgb(255,255,0)\" },\r\n ]),\r\n borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n borderWidth: 0,\r\n },\r\n data: [89, 78, 89, 56, 100, 56],\r\n },\r\n {\r\n name: \"统计时间所辖线路设备数量\",\r\n type: \"bar\",\r\n\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\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 data: [56, 78, 99, 76, 55, 67],\r\n },\r\n {\r\n name: \"设备老化占比\",\r\n type: \"line\",\r\n yAxisIndex: 1,\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: \"orange\",\r\n lineStyle: {\r\n color: \"orange\",\r\n },\r\n },\r\n },\r\n data: [40, 77, 56, 89, 70, 50],\r\n },\r\n {\r\n name: \"设备绝缘率\",\r\n type: \"line\",\r\n yAxisIndex: 1,\r\n\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: \"Cyan\",\r\n lineStyle: {\r\n color: \"Cyan\",\r\n },\r\n },\r\n },\r\n data: [45, 56, 76, 43, 66, 60],\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 // &::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 #detailedTwo1 {\r\n width: 100%;\r\n height: 350px;\r\n }\r\n #detailedTwo2 {\r\n width: 100%;\r\n height: 350px;\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: 350px;\r\n }\r\n #detailedTwo4 {\r\n width: 100%;\r\n height: 400px;\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 #detailedTwo5 {\r\n height: 100%;\r\n width: 100%;\r\n }\r\n .imgboxtwo {\r\n background: url(\"../assets/09/qyqdk.png\") no-repeat;\r\n background-size: 100%;\r\n float: left;\r\n left: 20%;\r\n top: 70%;\r\n width: 28vh;\r\n height: 28vh;\r\n position: relative;\r\n .cartitle {\r\n height: 32px;\r\n width: 100%;\r\n // background: url(\"../assets/images/carTitle.png\") no-repeat;\r\n font-size: 17px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n line-height: 32px;\r\n // text-align: left;\r\n text-indent: 26px;\r\n }\r\n .content {\r\n height: 65%;\r\n padding: 0 15px 0 15px;\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 height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n display: flex;\r\n flex-wrap: wrap;\r\n ul {\r\n height: 100%;\r\n li {\r\n text-align: left;\r\n height: 33%;\r\n font-size: 23px;\r\n color: #f8f8f8;\r\n }\r\n }\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: center;\r\n color: #ffffff;\r\n h5 {\r\n font-size: 28px;\r\n }\r\n .yellow {\r\n color: yellow;\r\n }\r\n .orange {\r\n color: orange;\r\n }\r\n span {\r\n float: left;\r\n font-size: 18px;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .map {\r\n background: url(\"../assets/indexN/map.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 #detailqe {\r\n width: 100%;\r\n height: 350px;\r\n }\r\n #detailen {\r\n width: 100%;\r\n height: 400px;\r\n }\r\n .contentUl {\r\n display: flex;\r\n margin: 0;\r\n padding: 10px;\r\n width: 100%;\r\n height: 100%;\r\n /* flex布局 */\r\n display: flex;\r\n // 开启换行\r\n flex-wrap: wrap;\r\n // 主轴上两端对齐\r\n justify-content: space-between;\r\n // 副轴上两端对齐\r\n align-content: space-between;\r\n //li盒子大小设置\r\n li {\r\n width: 33%;\r\n height: 49%;\r\n list-style: none;\r\n img {\r\n margin-top: 30%;\r\n }\r\n .text {\r\n position: absolute;\r\n z-index: 2;\r\n left: 30%;\r\n top: 20%;\r\n align-items: center;\r\n font-size: 32px;\r\n color: yellow;\r\n }\r\n .texts {\r\n color: orange;\r\n position: absolute;\r\n z-index: 2;\r\n left: 25%;\r\n top: 20%;\r\n align-items: center;\r\n font-size: 32px;\r\n }\r\n h4 {\r\n color: #fff;\r\n font-size: 18px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n line-height: 1;\r\n }\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 .enselect {\r\n position: absolute;\r\n // margin-bottom: 30%;\r\n // left: 30px;\r\n img {\r\n // position: relative;\r\n float: left;\r\n }\r\n .text {\r\n position: absolute;\r\n top: 5px;\r\n left: 20px;\r\n // right: -10px;\r\n font-size: 22px;\r\n color: #fff;\r\n }\r\n }\r\n table {\r\n margin-top: 70px;\r\n }\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/bgbth.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/bgqth.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/bgk.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"]}]}