{"remainingRequest":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js!D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\林谷智能项目\\yanchengPowerSupply\\src\\views\\thirtyFiveKV.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\src\\views\\thirtyFiveKV.vue","mtime":1690183045866},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\babel.config.js","mtime":1689557787923},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1655715099000}],"contextDependencies":[],"result":["import \"core-js/modules/es6.function.name\";\nimport _defineProperty from \"D:/\\u6797\\u8C37\\u667A\\u80FD\\u9879\\u76EE/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: \"0\",\n      alternatorNumber: \"1\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"23\",\n      alternatorNumber: \"1\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"1\",\n      alternatorNumber: \"3\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"1\",\n      alternatorNumber: \"2\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"14\",\n      alternatorNumber: \"3\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"45.3w\",\n      alternatorNumber: \"2\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"13.3w\",\n      alternatorNumber: \"1\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"23\",\n      alternatorNumber: \"0\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"23\",\n      alternatorNumber: \"0\"\n    }, {\n      name: \"国网东台区供电公司\",\n      stationNumber: \"356.3w\",\n      alternatorNumber: \"2\"\n    }]), _ref;\n  },\n  created: function created() {},\n  mounted: function mounted() {\n    this.detailedTwo11();\n    this.detailedTwo22();\n    this.detailedTwo33();\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        xAxis: [{\n          type: \"category\",\n          data: [\"2018\", \"2019\", \"2020\", \"2021\", \"2022\"],\n          axisLabel: {\n            show: true,\n            textStyle: {\n              color: \"#ffffff\",\n              fontSize: \"18\"\n            }\n          },\n          axisLine: {\n            show: false\n          },\n          axisTick: {\n            show: false,\n            alignWithLabel: true\n          },\n          splitArea: {\n            show: false\n          }\n        }],\n        yAxis: [{\n          type: \"value\",\n          name: \"\",\n          axisLabel: {\n            textStyle: {\n              color: \"#ffffff\",\n              fontSize: \"18\"\n            }\n          },\n          splitLine: {\n            show: true,\n            lineStyle: {\n              type: \"dashed\",\n              // color: 'rgba(66, 192, 255, .3)',\n              color: \"rgba(102,102,102,0.6)\",\n              width: 1\n            }\n          }\n        }],\n        series: [{\n          name: \"预计年变化趋势\",\n          type: \"bar\",\n          barWidth: 40,\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      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    detailedTwo22: function detailedTwo22() {\n      var fontColor = \"#30eee9\";\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo2\"));\n      var option = {\n        tooltip: {\n          show: true,\n          trigger: \"item\"\n        },\n        grid: {\n          left: \"3%\",\n          right: \"4%\",\n          bottom: \"3%\",\n          containLabel: true\n        },\n        xAxis: {\n          type: \"category\",\n          boundaryGap: false,\n          axisLabel: {\n            color: \"#fff\",\n            fontSize: \"16\"\n          },\n          axisTick: {\n            show: false\n          },\n          splitLine: {\n            show: false,\n            lineStyle: {\n              color: \"#195384\"\n            }\n          },\n          data: [\"2018\", \"2019\", \"2020\", \"2021\", \"2022\"]\n        },\n        yAxis: {\n          type: \"value\",\n          axisLine: {\n            lineStyle: {\n              color: \"#fff\"\n            }\n          },\n          splitLine: {\n            show: true,\n            lineStyle: {\n              type: \"dashed\",\n              // color: 'rgba(66, 192, 255, .3)',\n              color: \"rgba(102,102,102,0.6)\",\n              width: 1\n            }\n          }\n        },\n        series: [{\n          name: \"总投资\",\n          type: \"line\",\n          stack: \"Total\",\n          symbol: \"none\",\n          data: [80, 132, 101, 134, 121],\n          itemStyle: {\n            normal: {\n              color: \"yellow\",\n              lineStyle: {\n                color: \"yellow\"\n              }\n            }\n          }\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    detailedTwo33: function detailedTwo33() {\n      var bg = \"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=\";\n      var bar = \"image://data:image/png;base64,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\";\n      var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];\n      var nameList = [\"盐城运维检修部(检修分公司)\", \"国网响水县供电公司\", \"国网滨海县供电公司\", \"国网大丰县供电公司\", \"国网射阳县供电公司\", \"国网东台县供电公司\", \"国网阜宁县供电公司\", \"国网建湖县供电公司\"];\n      var barWidth = 20;\n      var maxNum = 0;\n      for (var i = 0; i < data.length; i++) {\n        if (data[i] > maxNum) {\n          maxNum = data[i];\n        }\n      }\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\n      var option = {\n        grid: {\n          top: \"10%\",\n          left: \"10%\",\n          right: \"12%\",\n          bottom: \"0%\"\n        },\n        xAxis: {\n          show: false\n        },\n        yAxis: [{\n          data: data.map(function (item, index) {\n            return \"No. \".concat(index);\n          }),\n          splitLine: {\n            show: false\n          },\n          axisLabel: {\n            textStyle: {\n              fontSize: 18,\n              color: \"#30eee9\"\n            }\n          },\n          axisLine: {\n            show: false\n          },\n          axisTick: false\n        }, {\n          //名称\n          type: \"category\",\n          offset: -10,\n          position: \"left\",\n          axisLine: {\n            show: false\n          },\n          inverse: true,\n          axisTick: {\n            show: false\n          },\n          axisLabel: {\n            interval: 0,\n            color: [\"#fff\"],\n            align: \"left\",\n            verticalAlign: \"bottom\",\n            lineHeight: 40,\n            fontSize: 20\n          },\n          data: nameList\n        }],\n        series: [{\n          type: \"pictorialBar\",\n          barWidth: barWidth,\n          zlevel: 2,\n          data: data.map(function (item) {\n            return {\n              value: item,\n              symbol: bar\n            };\n          })\n        }, {\n          type: \"pictorialBar\",\n          barWidth: barWidth,\n          data: data.map(function (item) {\n            return {\n              realValue: item,\n              value: maxNum,\n              symbol: bg\n            };\n          }),\n          label: {\n            show: true,\n            position: \"right\",\n            distance: 80,\n            align: \"right\",\n            formatter: function formatter(params) {\n              return params.data.realValue + \" 万\";\n            },\n            color: \"#30eee9\",\n            fontSize: 18\n          }\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    barCharts: function barCharts() {\n      var _normal;\n      var m2R2Data = [{\n        value: 335,\n        legendname: \"22%\",\n        name: \"国网大丰市供电公司\",\n        itemStyle: {\n          color: \"#8d7fec\"\n        }\n      }, {\n        value: 310,\n        legendname: \"22%\",\n        name: \"盐城运维检修部(检修分公司)\",\n        itemStyle: {\n          color: \"#5085f2\"\n        }\n      }, {\n        value: 234,\n        legendname: \"22%\",\n        name: \"国网射阳县供电公司\",\n        itemStyle: {\n          color: \"#e75fc3\"\n        }\n      }, {\n        value: 154,\n        legendname: \"22%\",\n        name: \"国网响水县供电公司\",\n        itemStyle: {\n          color: \"#f87be2\"\n        }\n      }, {\n        value: 335,\n        legendname: \"22%\",\n        name: \"设备管理部\",\n        itemStyle: {\n          color: \"#f2719a\"\n        }\n      }, {\n        value: 335,\n        legendname: \"22%\",\n        name: \"开发区供电服务中心\",\n        itemStyle: {\n          color: \"#fca4bb\"\n        }\n      }];\n      var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\n      var option = {\n        title: [{\n          text: \"总计\",\n          subtext: 59.53 + \"万\",\n          textStyle: {\n            fontSize: 20,\n            color: \"#fff\"\n          },\n          subtextStyle: {\n            fontSize: 20,\n            color: \"yellow\"\n          },\n          textAlign: \"center\",\n          x: \"34.5%\",\n          y: \"44%\"\n        }],\n        tooltip: {\n          trigger: \"item\",\n          formatter: function formatter(parms) {\n            var str = parms.seriesName + \"</br>\" + parms.marker + \"\" + parms.data.legendname + \"</br>\" + \"数量：\" + parms.data.value + \"</br>\" + \"占比：\" + parms.percent + \"%\";\n            return str;\n          }\n        },\n        legend: {\n          type: \"scroll\",\n          orient: \"vertical\",\n          left: \"70%\",\n          align: \"left\",\n          top: \"middle\",\n          textStyle: {\n            color: \"white\",\n            fontSize: 18\n          },\n          height: 250,\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 name;\n          },\n          icon: \"roundRect\",\n          data: [\"国网大丰市供电公司\", \"设备管理部\", \"国网射阳县供电公司\", \"国网响水县供电公司\", \"盐城运维检修部(检修分公司)\", \"开发区供电服务中心\"]\n        },\n        series: [{\n          type: \"pie\",\n          center: [\"35%\", \"50%\"],\n          radius: [\"30%\", \"55%\"],\n          clockwise: false,\n          //饼图的扇区是否是顺时针排布\n          avoidLabelOverlap: false,\n          lable: {\n            normal: {\n              show: true,\n              textStyle: {\n                fontSize: 20\n              }\n            },\n            emphasis: {\n              show: true\n            }\n          },\n          labelLine: {\n            normal: (_normal = {\n              length: 10\n            }, _defineProperty(_normal, \"length\", 30), _defineProperty(_normal, \"lineStyle\", {\n              width: 3,\n              // 线条的宽度\n              color: \"rgb(86,254,226)\" //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色\n            }), _normal)\n          },\n          itemStyle: {\n            normal: {\n              borderRadius: 10,\n              borderColor: \"transparent\",\n              borderWidth: 2,\n              label: {\n                show: true,\n                formatter: \" {d}% \",\n                fontSize: 20,\n                color: \"#fff\"\n              }\n            }\n          },\n          data: m2R2Data\n        }, {\n          type: \"pie\",\n          radius: [\"110\", \"111\"],\n          center: [\"35%\", \"50%\"],\n          data: [100],\n          label: {\n            show: false\n          }\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    detailen: function detailen() {\n      var _normal2;\n      var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\n      var option = {\n        color: [\"#1E9BD1\", \"#A0CE3A\", \"#31C5C0\", \"#0F347B\", \"#585247\", \"#7F6AAD\"],\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        },\n        calculable: true,\n        series: [{\n          type: \"pie\",\n          center: [\"35%\", \"50%\"],\n          radius: [25, 100],\n          roseType: \"area\",\n          labelLine: {\n            normal: (_normal2 = {\n              length: 30\n            }, _defineProperty(_normal2, \"length\", 10), _defineProperty(_normal2, \"lineStyle\", {\n              width: 3,\n              // 线条的宽度\n              color: \"rgb(86,254,226)\" //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色\n            }), _normal2)\n          },\n          itemStyle: {\n            normal: {\n              label: {\n                show: true,\n                fontSize: 20,\n                color: \"#fff\"\n              }\n            }\n          },\n          data: [{\n            value: 21,\n            name: \"国网射阳县供电公司\"\n          }, {\n            value: 20,\n            name: \"设备管理部\"\n          }, {\n            value: 22,\n            name: \"国网大丰市供电公司\"\n          }, {\n            value: 25,\n            name: \"国网响水县供电公司\"\n          }, {\n            value: 20,\n            name: \"盐城运维检修部(检修分公司)\"\n          }, {\n            value: 30,\n            name: \"开发区供电服务中心\"\n          }]\n        }, {\n          type: \"pie\",\n          radius: [\"110\", \"111\"],\n          center: [\"35%\", \"50%\"],\n          data: [100],\n          label: {\n            show: false\n          }\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    }\n  },\n  watch: {}\n};",{"version":3,"mappings":";;AAyMA;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;EACA;EACAC;IACAC;MACA;MACA;MACA;QACAC;UACAC;UACAC;YACAC;UACA;QACA;QACAC,QACA;UACAD;UACAtC;UACAwC;YACAC;YACAC;cACAC;cACAC;YACA;UACA;UACAC;YACAJ;UACA;UACAK;YACAL;YACAM;UACA;UACAC;YAAAP;UAAA;QACA,EACA;QACAQ,QACA;UACAX;UACA5C;UACA8C;YACAE;cACAC;cACAC;YACA;UACA;UACAM;YACAT;YACAU;cACAb;cACA;cACAK;cACAS;YACA;UACA;QACA,EACA;QACAC,SACA;UACA3D;UACA4C;UACAgB;UACAC;YACAZ,uDACA;cAAAa;cAAAb;YAAA,GACA;cAAAa;cAAAb;YAAA,GACA;cAAAa;cAAAb;YAAA,EACA;YACAc;YAAA;YACAC;UACA;UACAC;YACAC;UACA;UACA5D;QACA;MAEA;MACA6D;MACAC;QACAD;MACA;IACA;IACAE;MACA;MACA;MACA;QACA5B;UACAM;UACAL;QACA;QACA4B;UACAC;UACAC;UACAC;UACAC;QACA;QACA7B;UACAD;UACA+B;UACA7B;YACAG;YACAC;UACA;UACAE;YACAL;UACA;UACAS;YACAT;YACAU;cACAR;YACA;UACA;UACA3C;QACA;QACAiD;UACAX;UACAO;YACAM;cACAR;YACA;UACA;UACAO;YACAT;YACAU;cACAb;cACA;cACAK;cACAS;YACA;UACA;QACA;QACAC,SACA;UACA3D;UACA4C;UACAgC;UACAC;UACAvE;UACAuD;YACAiB;cACA7B;cACAQ;gBACAR;cACA;YACA;UACA;QACA;MAEA;MACAkB;MACAC;QACAD;MACA;IACA;IACAY;MACA,SACA;MACA,UACA;MACA;MACA,gBACA,kBACA,aACA,aACA,aACA,aACA,aACA,aACA,YACA;MACA;MACA;MACA;QACA;UACAC;QACA;MACA;MACA;MACA;QACAV;UACAW;UACAV;UACAC;UACAC;QACA;QACA5B;UACAE;QACA;QACAQ,QACA;UACAjD;YAAA;UAAA;UACAkD;YACAT;UACA;UACAD;YACAE;cAAAE;cAAAD;YAAA;UACA;UACAE;YACAJ;UACA;UACAK;QACA,GAEA;UACA;UACAR;UACAkB;UACAoB;UACA/B;YACAJ;UACA;UACAoC;UACA/B;YACAL;UACA;UACAD;YACAsC;YACAnC;YACAoC;YACAC;YACAC;YACArC;UACA;UACA5C;QACA,EACA;QACAqD,SACA;UACAf;UACAgB;UACA4B;UACAlF;YACA;cACAwB;cACA+C;YACA;UACA;QACA,GACA;UACAjC;UACAgB;UACAtD;YACA;cACAmF;cACA3D;cACA+C;YACA;UACA;UACA9C;YACAgB;YACAmC;YACAQ;YACAL;YACAM;cACA;YACA;YACA1C;YACAC;UACA;QACA;MAEA;MACAiB;MACAC;QACAD;MACA;IACA;IACAyB;MAAA;MACA,gBACA;QACA9D;QACA+D;QACA7F;QACA6D;UAAAZ;QAAA;MACA,GACA;QACAnB;QACA+D;QACA7F;QACA6D;UAAAZ;QAAA;MACA,GACA;QACAnB;QACA+D;QACA7F;QACA6D;UAAAZ;QAAA;MACA,GACA;QACAnB;QACA+D;QACA7F;QACA6D;UAAAZ;QAAA;MACA,GACA;QACAnB;QACA+D;QACA7F;QACA6D;UAAAZ;QAAA;MACA,GACA;QACAnB;QACA+D;QACA7F;QACA6D;UAAAZ;QAAA;MACA,EACA;MACA;MACA;QACA6C,QACA;UACAC;UACAC;UACAhD;YACAE;YACAD;UACA;UACAgD;YACA/C;YACAD;UACA;UACAiD;UACAC;UACAC;QACA,EACA;QACA3D;UACAC;UACAiD;YACA,UACAU,mBACA,UACAA,eACA,KACAA,wBACA,UACA,QACAA,mBACA,UACA,QACAA,gBACA;YACA;UACA;QACA;QACAC;UACA1D;UACA2D;UACAhC;UACAc;UACAJ;UACAjC;YACAC;YACAC;UACA;UACAsD;UACA;UACAb;YACA;YACA;YACA;YACA;YACA;cACAc;cACA;gBACAC;cACA;YACA;YACA;YACA;UACA;UACAhF;UACApB,OACA,aACA,SACA,aACA,aACA,kBACA;QAEA;QACAqD,SACA;UACAf;UACA+D;UACAC;UACAC;UAAA;UACAC;UACAC;YACAjC;cACA/B;cACAC;gBACAE;cACA;YACA;YACAe;cACAlB;YACA;UACA;UAEAiE;YACAlC;cACAmC;YAAA,sCACA,2CACA;cACAvD;cAAA;cACAT;YACA;UAEA;UAEAY;YACAiB;cACAf;cACAmD;cACAlD;cACAjC;gBACAgB;gBACA4C;gBACAzC;gBACAD;cACA;YACA;UACA;UAEA3C;QACA,GACA;UACAsC;UACAgE;UACAD;UACArG;UACAyB;YACAgB;UACA;QACA;MAEA;MACAoB;MACAC;QACAD;MACA;IACA;IACAgD;MAAA;MACA;MACA;QACAlE,QACA,WACA,WACA,WACA,WACA,WACA,UACA;QACAR;UACAC;UACAiD;QACA;QACAW;UACAC;UACAtB;UACAT;UACAxB;YACAC;YACAC;UACA;UACA;UACAyC;YACA;YACA;YACA;YACA;YACA;cACAc;cACA;gBACAC;cACA;YACA;YACA;YACA;UACA;QACA;QACAU;QACAzD,SACA;UACAf;UACA+D;UACAC;UACAS;UACAL;YACAlC;cACAmC;YAAA,uCACA,4CACA;cACAvD;cAAA;cACAT;YACA;UAEA;UAEAY;YACAiB;cACA/C;gBACAgB;gBACAG;gBACAD;cACA;YACA;UACA;UACA3C,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,GACA;UACA4C;UACAgE;UACAD;UACArG;UACAyB;YACAgB;UACA;QACA;MAEA;MACAoB;MACAC;QACAD;MACA;IACA;EACA;EACAmD;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","xAxis","axisLabel","show","textStyle","color","fontSize","axisLine","axisTick","alignWithLabel","splitArea","yAxis","splitLine","lineStyle","width","series","barWidth","itemStyle","offset","borderRadius","borderWidth","emphasis","focus","myChart","window","detailedTwo22","grid","left","right","bottom","containLabel","boundaryGap","stack","symbol","normal","detailedTwo33","maxNum","top","position","inverse","interval","align","verticalAlign","lineHeight","zlevel","realValue","distance","formatter","barCharts","legendname","title","text","subtext","subtextStyle","textAlign","x","y","parms","legend","orient","height","total","tarValue","center","radius","clockwise","avoidLabelOverlap","lable","labelLine","length","borderColor","detailen","calculable","roseType","watch"],"sourceRoot":"src/views","sources":["thirtyFiveKV.vue"],"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 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=\"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 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=\"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=\"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 id=\"detailedTwo3\"></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/dfsxz.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/mainTb1.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>项目数</span>\r\n                  </div>\r\n                  <h5 class=\"yellow\">\r\n                    &nbsp;&nbsp;&nbsp;9.279 <span style=\"color: #fff\">万</span>\r\n                  </h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left; height: 30px; width: 30px\"\r\n                      src=\"../assets/index/mainTb2.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>预算费用总和</span>\r\n                  </div>\r\n                  <h5 class=\"orange\">\r\n                    &nbsp;&nbsp;118.5<span style=\"color: #fff\">万</span>\r\n                  </h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left; height: 30px; width: 30px\"\r\n                      src=\"../assets/index/mainTb1.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>计划数</span>\r\n                  </div>\r\n                  <h5 class=\"yellow\">&nbsp;&nbsp;44</h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"lines\">\r\n              <div class=\"total\">\r\n                <div class=\"num\">\r\n                  <div style=\"display: inline-block\">\r\n                    <img\r\n                      style=\"float: left; height: 30px; width: 30px\"\r\n                      src=\"../assets/index/mainTb2.png\"\r\n                      alt=\"\"\r\n                    />\r\n                    <span>物科数</span>\r\n                  </div>\r\n                  <h5 class=\"orange\">&nbsp;&nbsp;10</h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\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          <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/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            <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: \"0\",\r\n          alternatorNumber: \"1\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"23\",\r\n          alternatorNumber: \"1\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"1\",\r\n          alternatorNumber: \"3\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"1\",\r\n          alternatorNumber: \"2\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"14\",\r\n          alternatorNumber: \"3\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"45.3w\",\r\n          alternatorNumber: \"2\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"13.3w\",\r\n          alternatorNumber: \"1\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"23\",\r\n          alternatorNumber: \"0\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"23\",\r\n          alternatorNumber: \"0\",\r\n        },\r\n        {\r\n          name: \"国网东台区供电公司\",\r\n          stationNumber: \"356.3w\",\r\n          alternatorNumber: \"2\",\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.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        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            data: [\"2018\", \"2019\", \"2020\", \"2021\", \"2022\"],\r\n            axisLabel: {\r\n              show: true,\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n                fontSize: \"18\",\r\n              },\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            splitArea: { show: false },\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                fontSize: \"18\",\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: \"预计年变化趋势\",\r\n            type: \"bar\",\r\n            barWidth: 40,\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      };\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        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            color: \"#fff\",\r\n            fontSize: \"16\",\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: [\"2018\", \"2019\", \"2020\", \"2021\", \"2022\"],\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          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: \"总投资\",\r\n            type: \"line\",\r\n            stack: \"Total\",\r\n            symbol: \"none\",\r\n            data: [80, 132, 101, 134, 121],\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      };\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailedTwo33() {\r\n      var bg =\r\n        \"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=\";\r\n      var bar =\r\n        \"image://data:image/png;base64,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\";\r\n      var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];\r\n      var nameList = [\r\n        \"盐城运维检修部(检修分公司)\",\r\n        \"国网响水县供电公司\",\r\n        \"国网滨海县供电公司\",\r\n        \"国网大丰县供电公司\",\r\n        \"国网射阳县供电公司\",\r\n        \"国网东台县供电公司\",\r\n        \"国网阜宁县供电公司\",\r\n        \"国网建湖县供电公司\",\r\n      ];\r\n      var barWidth = 20;\r\n      var maxNum = 0;\r\n      for (var i = 0; i < data.length; i++) {\r\n        if (data[i] > maxNum) {\r\n          maxNum = data[i];\r\n        }\r\n      }\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n      var option = {\r\n        grid: {\r\n          top: \"10%\",\r\n          left: \"10%\",\r\n          right: \"12%\",\r\n          bottom: \"0%\",\r\n        },\r\n        xAxis: {\r\n          show: false,\r\n        },\r\n        yAxis: [\r\n          {\r\n            data: data.map((item, index) => `No. ${index}`),\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              textStyle: { fontSize: 18, color: \"#30eee9\" },\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: false,\r\n          },\r\n\r\n          {\r\n            //名称\r\n            type: \"category\",\r\n            offset: -10,\r\n            position: \"left\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            inverse: true,\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              interval: 0,\r\n              color: [\"#fff\"],\r\n              align: \"left\",\r\n              verticalAlign: \"bottom\",\r\n              lineHeight: 40,\r\n              fontSize: 20,\r\n            },\r\n            data: nameList,\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            type: \"pictorialBar\",\r\n            barWidth: barWidth,\r\n            zlevel: 2,\r\n            data: data.map(function (item) {\r\n              return {\r\n                value: item,\r\n                symbol: bar,\r\n              };\r\n            }),\r\n          },\r\n          {\r\n            type: \"pictorialBar\",\r\n            barWidth: barWidth,\r\n            data: data.map(function (item) {\r\n              return {\r\n                realValue: item,\r\n                value: maxNum,\r\n                symbol: bg,\r\n              };\r\n            }),\r\n            label: {\r\n              show: true,\r\n              position: \"right\",\r\n              distance: 80,\r\n              align: \"right\",\r\n              formatter: function (params) {\r\n                return params.data.realValue + \" 万\";\r\n              },\r\n              color: \"#30eee9\",\r\n              fontSize: 18,\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    barCharts() {\r\n      var m2R2Data = [\r\n        {\r\n          value: 335,\r\n          legendname: \"22%\",\r\n          name: \"国网大丰市供电公司\",\r\n          itemStyle: { color: \"#8d7fec\" },\r\n        },\r\n        {\r\n          value: 310,\r\n          legendname: \"22%\",\r\n          name: \"盐城运维检修部(检修分公司)\",\r\n          itemStyle: { color: \"#5085f2\" },\r\n        },\r\n        {\r\n          value: 234,\r\n          legendname: \"22%\",\r\n          name: \"国网射阳县供电公司\",\r\n          itemStyle: { color: \"#e75fc3\" },\r\n        },\r\n        {\r\n          value: 154,\r\n          legendname: \"22%\",\r\n          name: \"国网响水县供电公司\",\r\n          itemStyle: { color: \"#f87be2\" },\r\n        },\r\n        {\r\n          value: 335,\r\n          legendname: \"22%\",\r\n          name: \"设备管理部\",\r\n          itemStyle: { color: \"#f2719a\" },\r\n        },\r\n        {\r\n          value: 335,\r\n          legendname: \"22%\",\r\n          name: \"开发区供电服务中心\",\r\n          itemStyle: { color: \"#fca4bb\" },\r\n        },\r\n      ];\r\n      var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\r\n      var option = {\r\n        title: [\r\n          {\r\n            text: \"总计\",\r\n            subtext: 59.53 + \"万\",\r\n            textStyle: {\r\n              fontSize: 20,\r\n              color: \"#fff\",\r\n            },\r\n            subtextStyle: {\r\n              fontSize: 20,\r\n              color: \"yellow\",\r\n            },\r\n            textAlign: \"center\",\r\n            x: \"34.5%\",\r\n            y: \"44%\",\r\n          },\r\n        ],\r\n        tooltip: {\r\n          trigger: \"item\",\r\n          formatter: function (parms) {\r\n            var str =\r\n              parms.seriesName +\r\n              \"</br>\" +\r\n              parms.marker +\r\n              \"\" +\r\n              parms.data.legendname +\r\n              \"</br>\" +\r\n              \"数量：\" +\r\n              parms.data.value +\r\n              \"</br>\" +\r\n              \"占比：\" +\r\n              parms.percent +\r\n              \"%\";\r\n            return str;\r\n          },\r\n        },\r\n        legend: {\r\n          type: \"scroll\",\r\n          orient: \"vertical\",\r\n          left: \"70%\",\r\n          align: \"left\",\r\n          top: \"middle\",\r\n          textStyle: {\r\n            color: \"white\",\r\n            fontSize: 18,\r\n          },\r\n          height: 250,\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 name;\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        series: [\r\n          {\r\n            type: \"pie\",\r\n            center: [\"35%\", \"50%\"],\r\n            radius: [\"30%\", \"55%\"],\r\n            clockwise: false, //饼图的扇区是否是顺时针排布\r\n            avoidLabelOverlap: false,\r\n            lable: {\r\n              normal: {\r\n                show: true,\r\n                textStyle: {\r\n                  fontSize: 20,\r\n                },\r\n              },\r\n              emphasis: {\r\n                show: true,\r\n              },\r\n            },\r\n\r\n            labelLine: {\r\n              normal: {\r\n                length: 10, //第一条线\r\n                length: 30, //第二条线\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                borderRadius: 10,\r\n                borderColor: \"transparent\",\r\n                borderWidth: 2,\r\n                label: {\r\n                  show: true,\r\n                  formatter: \" {d}% \",\r\n                  fontSize: 20,\r\n                  color: \"#fff\",\r\n                },\r\n              },\r\n            },\r\n\r\n            data: m2R2Data,\r\n          },\r\n          {\r\n            type: \"pie\",\r\n            radius: [\"110\", \"111\"],\r\n            center: [\"35%\", \"50%\"],\r\n            data: [100],\r\n            label: {\r\n              show: false,\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          \"#1E9BD1\",\r\n          \"#A0CE3A\",\r\n          \"#31C5C0\",\r\n          \"#0F347B\",\r\n          \"#585247\",\r\n          \"#7F6AAD\",\r\n        ],\r\n        tooltip: {\r\n          trigger: \"item\",\r\n          formatter: \"{a} <br/>{b} : {c} ({d}%)\",\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        },\r\n        calculable: true,\r\n        series: [\r\n          {\r\n            type: \"pie\",\r\n            center: [\"35%\", \"50%\"],\r\n            radius: [25, 100],\r\n            roseType: \"area\",\r\n            labelLine: {\r\n              normal: {\r\n                length: 30, //第一条线\r\n                length: 10, //第二条线\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: 21, name: \"国网射阳县供电公司\" },\r\n              { value: 20, name: \"设备管理部\" },\r\n              { value: 22, name: \"国网大丰市供电公司\" },\r\n              { value: 25, name: \"国网响水县供电公司\" },\r\n              { value: 20, name: \"盐城运维检修部(检修分公司)\" },\r\n              { value: 30, name: \"开发区供电服务中心\" },\r\n            ],\r\n          },\r\n          {\r\n            type: \"pie\",\r\n            radius: [\"110\", \"111\"],\r\n            center: [\"35%\", \"50%\"],\r\n            data: [100],\r\n            label: {\r\n              show: false,\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    #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: 70vh;\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/mainW.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/mainMin.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/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    #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/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"]}]}