yanchengPowerSupply/node_modules/.cache/babel-loader/50df700619f6778488fca33862295662.json

{"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\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\src\\views\\index.vue","mtime":1689819759152},{"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.regexp.to-string\";\nimport \"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\";\nimport { getCompanyInfo, getLine, getBanzugz, getGdtj, getDwbzgz, getGdsgdzl, getPbtyqk, getCabinetInfo, getCabinetList, getfaultReportList, getCabinetAlarmList } from \"../api/index.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: \"home\",\n  components: {\n    ringMainUnit: ringMainUnit,\n    //环网柜弹窗\n    workOrder: workOrder,\n    //工单统计弹窗\n    routeDetail: routeDetail,\n    //线路故障跳闸明细\n    lineDetail: lineDetail //线路详情弹窗\n  },\n  data: function data() {\n    var _CompanyInfo, _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      dataGzList: [{\n        bz: \"大冈\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"配网二班\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"配网一班\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"尚庄\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"秦南\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"郭猛\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"大纵湖\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"潘黄\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"学富\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"龙冈\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"西区\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }, {\n        bz: \"楼王\",\n        chbc: 0,\n        chcg: 0,\n        jd: 0,\n        total: 0,\n        wchz: 0\n      }],\n      //年故障数组\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: (_CompanyInfo = {\n        pdxl: '3.4%',\n        xlcd: '0.01%'\n      }, _defineProperty(_CompanyInfo, \"pdxl\", '3.4%'), _defineProperty(_CompanyInfo, \"pdxl\", '3.4%'), _defineProperty(_CompanyInfo, \"pdxl\", '3.4%'), _defineProperty(_CompanyInfo, \"pdxl\", '3.4%'), _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, \"gongdanList\", [{\n      gd_type_id: \"\",\n      gd_type_name: \"频繁停电\",\n      total: 0\n    }, {\n      gd_type_id: \"\",\n      gd_type_name: \"处理时间长\",\n      total: 0\n    }, {\n      gd_type_id: \"\",\n      gd_type_name: \"运检类投诉\",\n      total: 0\n    }, {\n      gd_type_id: \"\",\n      gd_type_name: \"运检类意见\",\n      total: 0\n    }, {\n      gd_type_id: \"\",\n      gd_type_name: \"民事赔偿\",\n      total: 0\n    }, {\n      gd_type_id: \"\",\n      gd_type_name: \"多次停电\",\n      total: 0\n    }]), _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\", \"\"), _ref;\n  },\n  created: function created() {},\n  mounted: function mounted() {\n    var _this = this;\n    // this.beginShowing();\n    // 监听浏览器窗口大小变化\n    window.onresize = function () {\n      clearInterval(_this.myTimer);\n      _this.beginShowing();\n    };\n    this.detailedTwo11();\n    this.horizontalChart();\n    this.detailedOne();\n    this.barCharts();\n    this.detailedFive();\n    this.shuzihuaCharts();\n    this.roseCharts();\n    this.detailen1();\n    this.handleDate(0);\n    var that = this;\n\n    //历史故障接口\n    var faultData = {\n      token: localStorage.getItem(\"token\"),\n      pageSize: \"500\",\n      page: \"1\"\n    };\n  },\n  // beforeDestroy() {\n  //   this.dataDestroy(); // 页面摧毁前，关闭定时器\n  // },\n  beforeDestroy: function beforeDestroy() {\n    // 离开当前路由前的操作\n    clearInterval(this.timer);\n    this.timer = null;\n  },\n  methods: {\n    routerTo: function routerTo(data) {\n      if (data == '盐城地区分布光伏运行监测') {\n        this.$router.push(\"/stationBuilding\");\n      }\n      if (data == '盐城东台区供电所数字化分析') {\n        this.$router.push(\"/twentyKV\");\n      }\n      if (data == '配网工程全过程物资审计') {\n        this.$router.push(\"/thirtyFiveKV\");\n      }\n      if (data == '盐城供电公司配网电能质量管控') {\n        this.$router.push(\"/powerQualityControl\");\n      }\n      if (data == '乡村振兴电力综合指数') {\n        this.$router.push(\"/ruralRevitalizationPower\");\n      }\n      if (data == '两高行业企业污染监测') {\n        this.$router.push(\"/enterprisePollutionMonitoring\");\n      }\n      if (data == '农村生活污水治理设备电量分析') {\n        this.$router.push(\"/ruralDomesticSewageTreatment\");\n      }\n      if (data == '数字化排涝抗旱辅助及检修辅助决策') {\n        this.$router.push(\"/digitalFloodDrainageDroughtRelief\");\n      }\n    },\n    detailen1: function detailen1() {\n      var fontColor = \"#30eee9\";\n      var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\n      var option = {\n        tooltip: {\n          trigger: \"axis\",\n          axisPointer: {\n            type: \"shadow\"\n          }\n        },\n        legend: {\n          textStyle: {\n            fontSize: 18,\n            //字体大小\n            color: \"#ffffff\" //字体颜色\n          },\n\n          data: [\"关联电网事故\", \"关联检修单\"]\n        },\n        xAxis: [{\n          type: \"category\",\n          data: [\"10kv北红线124\", \"10kv北红线125\", \"10kv北红线126\", \"10kv北红线127\", \"10kv北红线128\"],\n          axisLabel: {\n            show: true,\n            textStyle: {\n              color: \"#ffffff\"\n            }\n          }\n        }],\n        yAxis: [{\n          type: \"value\",\n          name: \"\",\n          axisLabel: {\n            textStyle: {\n              color: \"#ffffff\"\n            }\n          }\n        }],\n        series: [{\n          name: \"关联电网事故\",\n          type: \"bar\",\n          itemStyle: {\n            color: \"#00ffff\",\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    //班组\n    getbanzhu: function getbanzhu() {\n      var _this2 = this;\n      getBanzugz({\n        action: \"detail\"\n      }).then(function (res) {\n        console.log(res, \"班组故障详情\");\n        for (var i = 0; i < res.data.data.length; i++) {\n          if (res.data.data[i].gz_time_deal) {\n            var date = new Date(res.data.data[i].gz_time_deal);\n            res.data.data[i].gz_time_deal = _this2.$moment(date).format(\"YYYY-MM-DD HH:mm\");\n            // console.log(res.data.data[i].gz_time_deal,'转换后');\n          }\n\n          if (res.data.data[i].gz_time) {\n            var time = new Date(res.data.data[i].gz_time);\n            res.data.data[i].gz_time = _this2.$moment(time).format(\"YYYY-MM-DD HH:mm\");\n          }\n          _this2.tableData.push(res.data.data[i]);\n        }\n      });\n    },\n    //工单\n    getGongdan: function getGongdan() {\n      var _this3 = this;\n      getGdtj({\n        action: \"tongji\"\n      }).then(function (res) {\n        console.log(res, \"工单统计数据\");\n        var dataList = res.data.data;\n        for (var i = 0; i < _this3.gongdanList.length; i++) {\n          for (var j = 0; j < res.data.data.length; j++) {\n            if (_this3.gongdanList[i].gd_type_name == res.data.data[j].gd_type_name) {\n              _this3.gongdanList[i].total = res.data.data[j].total;\n              _this3.gongdanList[i].gd_type_id = res.data.data[j].gd_type_id;\n            }\n          }\n        }\n        // this.gongdanList = res.data.data;\n        _this3.detailedThree(dataList);\n        // this.$nextTick(() => {\n        //   this.detailedThree(dataList);\n        //   setInterval(() => {\n        //     this.doing();\n        //   }, 200);\n        // });\n      });\n    },\n    // //表格第一行颜色\n    rowClass: function rowClass(row, rowIndex) {\n      if (row.rowIndex === 0) {\n        return \"rowColor0\";\n      } else {\n        return \"\";\n      }\n    },\n    //切换当前页\n    handleCurrentChange: function handleCurrentChange(val) {\n      this.page = val;\n      var tableData = [];\n      if (this.emergencyList.length != 0) {\n        tableData = this.emergencyList;\n        if (val == 1) {\n          this.alarmInformationData = tableData.slice(0, 10);\n          document.getElementsByClassName(\"rowColor0\")[0].style.display = \"\";\n        } else if (val == 2) {\n          document.getElementsByClassName(\"rowColor0\")[0].style.display = \"none\";\n          this.alarmInformationData = tableData.slice(10, 20);\n        } else if (val == 3) {\n          this.alarmInformationData = tableData.slice(20, 30);\n          document.getElementsByClassName(\"rowColor0\")[0].style.display = \"none\";\n        } else if (val == 4) {\n          this.alarmInformationData = tableData.slice(30, 40);\n          document.getElementsByClassName(\"rowColor0\")[0].style.display = \"none\";\n        } else if (val == 5) {\n          this.alarmInformationData = tableData.slice(40, 50);\n          document.getElementsByClassName(\"rowColor0\")[0].style.display = \"none\";\n        }\n      } else {\n        return false;\n      }\n    },\n    // 线路详情弹窗\n    openLineDetail: function openLineDetail(e) {\n      var _this4 = this;\n      // console.log(e);\n      // var line = e + ''\n      // console.log(line);\n      getLine({\n        action: \"pdxl\"\n      }).then(function (_ref2) {\n        var data = _ref2.data;\n        console.log(data);\n        _this4.lineShow = \"lineDetail\";\n        _this4.lineItem = data.data;\n      });\n    },\n    // 线路故障跳闸明细弹窗\n    rowHandle: function rowHandle(e) {\n      // console.log(e, \"参数\");\n      this.routeItem = e;\n      this.routeShow = \"routeDetail\";\n      // console.log(this.routeItem,'线路组件名称');\n    },\n    // 工单统计的弹窗\n    openGdDetail: function openGdDetail(item) {\n      this.orderItem = item;\n      this.orderShow = \"workOrder\";\n    },\n    // 鼠标进入表格\n    // mouseover() {\n    //   clearInterval(this.myTimer);\n    // },\n    // 鼠标离开表格\n    mouseout: function mouseout() {\n      this.roll();\n    },\n    //调用unity方法\n    handleUnity: function handleUnity(index, item) {\n      this.btnActive = index;\n      this.$refs.iframe.contentWindow.handleChange(item);\n    },\n    //选择线路\n    selectLine: function selectLine(value) {\n      var _this5 = this;\n      getLine({\n        action: \"query\",\n        line_code: value\n      }).then(function (res) {\n        // console.log(res,'选择线路');\n        if (res.data.data != 0 && res.data.data != null) {\n          _this5.$refs.iframe.contentWindow.handleChangeLine(res.data.data.line_name);\n        } else if (res.data.data == null) {\n          _this5.$refs.iframe.contentWindow.handleChangeLine(\"\");\n        }\n      });\n    },\n    detailedOne: function detailedOne() {\n      var myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\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        }],\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, color: \"rgba(86,254,226,.2) \" },\n            //     { offset: 0.5, color: \"rgb(86,254,226,.6)\" },\n            //     { offset: 0, 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    shuzihuaCharts: function shuzihuaCharts() {\n      var myChart = this.$echarts.init(document.getElementById(\"shuzihua\"));\n      var option = {\n        tooltip: {\n          trigger: \"axis\",\n          axisPointer: {\n            type: \"cross\",\n            crossStyle: {\n              color: \"#999\"\n            }\n          }\n        },\n        legend: [{\n          x: \"center\",\n          data: [\"平均停电时间(小时)\", \"平均停电频次(次/户)\"],\n          textStyle: {\n            fontSize: 18,\n            color: \"#fff\"\n          }\n        }, {\n          x: \"center\",\n          top: \"5%\",\n          data: [\"总时户数\", \"停电次数\", \"应采数\"],\n          textStyle: {\n            fontSize: 18,\n            color: \"#fff\"\n          }\n        }],\n        xAxis: [{\n          type: \"category\",\n          data: [\"2019\", \"2020\", \"2021\", \"2022\"],\n          axisPointer: {\n            type: \"shadow\"\n          },\n          axisLabel: {\n            color: \"#fff\",\n            fontSize: \"18\"\n          }\n        }],\n        yAxis: [{\n          type: \"value\",\n          min: 0,\n          max: 5,\n          interval: 1,\n          axisLabel: {\n            formatter: \"{value} 万\",\n            textStyle: {\n              fontSize: \"18\"\n            }\n          },\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          type: \"value\",\n          min: 0,\n          max: 0.5,\n          interval: 0.1,\n          axisLabel: {\n            formatter: \"{value}\",\n            textStyle: {\n              fontSize: \"18\"\n            }\n          },\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: \"bar\",\n          yAxisIndex: 1,\n          tooltip: {\n            valueFormatter: function valueFormatter(value) {\n              return value;\n            }\n          },\n          itemStyle: {\n            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n              offset: 1,\n              color: \"rgba(240,230,140,.2) \"\n            }, {\n              offset: 0.5,\n              color: \"rgb(240,230,140,.6)\"\n            }, {\n              offset: 0,\n              color: \"rgb(240,230,140)\"\n            }]),\n            borderRadius: [7, 7, 0, 0],\n            // 柱状图圆角\n            borderWidth: 0\n          },\n          data: [0.13, 0.23, 0.13, 0.23]\n        }, {\n          name: \"平均停电频次(次/户)\",\n          type: \"bar\",\n          yAxisIndex: 1,\n          tooltip: {\n            valueFormatter: function valueFormatter(value) {\n              return value;\n            }\n          },\n          itemStyle: {\n            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n              offset: 1,\n              color: \"rgba(65,105,225,.2) \"\n            }, {\n              offset: 0.5,\n              color: \"rgb(65,105,225,.6)\"\n            }, {\n              offset: 0,\n              color: \"rgb(65,105,225)\"\n            }]),\n            borderRadius: [7, 7, 0, 0],\n            // 柱状图圆角\n            borderWidth: 0\n          },\n          data: [0.23, 0.13, 0.23, 0.13]\n        }, {\n          name: \"总时户数\",\n          type: \"line\",\n          tooltip: {\n            valueFormatter: function valueFormatter(value) {\n              return value;\n            }\n          },\n          itemStyle: {\n            normal: {\n              color: \"#0080ff\",\n              lineStyle: {\n                color: \"#0080ff\"\n              }\n            }\n          },\n          data: [4, 3, 2, 4]\n        }, {\n          name: \"停电次数\",\n          type: \"line\",\n          tooltip: {\n            valueFormatter: function valueFormatter(value) {\n              return value;\n            }\n          },\n          itemStyle: {\n            normal: {\n              color: \"#a6a600\",\n              lineStyle: {\n                color: \"#a6a600\"\n              }\n            }\n          },\n          data: [2, 3, 4, 3]\n        }, {\n          name: \"应采数\",\n          type: \"line\",\n          tooltip: {\n            valueFormatter: function valueFormatter(value) {\n              return value;\n            }\n          },\n          itemStyle: {\n            normal: {\n              color: \"#977000\",\n              lineStyle: {\n                color: \"#977000\"\n              }\n            }\n          },\n          data: [3, 1, 4, 2]\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    detailedTwo: function detailedTwo() {\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\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        },\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    detailedTwo11: function detailedTwo11() {\n      var fontColor = '#30eee9';\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\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        },\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    horizontalChart: function horizontalChart() {\n      var myChart = this.$echarts.init(document.getElementById(\"horizontalChart\"));\n      var honorData = [{\n        name: \"用电量（单位：亿）\",\n        data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400]\n      }, {\n        name: \"碳排放量（单位：万）\",\n        data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400]\n      }];\n      var honorXAxisData = [\"盐都区\", \"建湖县\", \"射阳县\", \"阜宁县\", \"滨海县\"];\n      // // 设置灰色背景色的长度\n      var isMax = 2000;\n      var bjData1 = [isMax, isMax, isMax, isMax, isMax, isMax, isMax, isMax, isMax];\n      var option = {\n        color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\n        tooltip: {\n          trigger: \"axis\",\n          axisPointer: {\n            type: \"none\"\n          }\n        },\n        legend: {\n          right: 5,\n          top: \"5%\",\n          itemWidth: 10,\n          itemHeight: 10,\n          itemGap: 15,\n          textStyle: {\n            color: \"#ACCFFF\",\n            fontSize: 16\n          }\n        },\n        grid: {\n          left: \"5%\",\n          right: \"5%\",\n          bottom: \"5%\",\n          top: \"10%\",\n          containLabel: true\n        },\n        xAxis: [{\n          type: \"value\",\n          show: false,\n          axisLine: {\n            show: false\n          },\n          axisTick: {\n            show: false\n          },\n          axisLabel: {\n            color: \"#6B9DD7\",\n            fontSize: 16,\n            // 文字大小\n            fontWeight: 400,\n            interval: 0,\n            formatter: function formatter(value) {\n              return value + \"(万元)\";\n            }\n          },\n          splitLine: {\n            show: false\n          }\n        }],\n        yAxis: [{\n          type: \"category\",\n          axisLine: {\n            show: false\n          },\n          axisTick: {\n            show: false\n          },\n          axisLabel: {\n            color: \"#6B9DD7\",\n            fontSize: 16,\n            // 文字大小\n            fontWeight: 400,\n            interval: 0\n          },\n          offset: 20,\n          data: honorXAxisData\n        }],\n        series: [{\n          name: \"用电量（单位：亿）\",\n          type: \"bar\",\n          stack: \"zongliang\",\n          barWidth: \"35%\",\n          zlevel: 10,\n          label: {\n            normal: {\n              show: true,\n              position: \"inside\",\n              textStyle: {\n                color: \"#fff\",\n                fontSize: 14\n              }\n            }\n          },\n          data: honorData[0].data\n        }, {\n          name: \"碳排放量（单位：万）\",\n          type: \"bar\",\n          stack: \"zongliang\",\n          barWidth: \"35%\",\n          zlevel: 10,\n          label: {\n            normal: {\n              show: true,\n              position: \"top\",\n              formatter: function formatter(params) {\n                console.log(params);\n                // return  params.seriesName + params.value ;\n                return \"完成\" + params.value;\n              },\n              textStyle: {\n                color: \"#fff\",\n                fontSize: 12\n              }\n            }\n          },\n          data: honorData[1].data\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    barCharts: function barCharts() {\n      var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\n      var value = 18;\n      var legendName = ['华北', '华中', '华东', '华南', '东北', '西北'];\n      var option = {\n        // backgroundColor: '#031845',\n        // title:{\n        //     text:\"123\",\n        //     left:'center',\n        //     top:'45%',\n        //     textStyle:{\n        //         color:\"#FFF\",\n        //         fontSize:\"80px\",\n\n        //     }\n        // },\n        tooltip: {\n          trigger: 'item',\n          formatter: \"{b} : {d}% <br/> {c}\"\n        },\n        //  graphic: {\n        //  elements: [\n        //         {\n        //          type: 'text',\n        //          left: 'center', // 相对父元素居中\n        //          top: 'center',  // 相对父元素上下的位置\n        //          style: {\n        //              fill: '#FFF',\n        //               text: ['357'],\n        //               zlevel:\"100\",\n        //               font: '80px Arial Normal',\n        //                  }\n        //         }]\n        //       },\n        //  title: {\n        //     text:'总考生数',\n        //     left:'center',\n        //     top:'center',\n        //     padding:[24,0],\n        //     textStyle:{\n        //         color:'#fff',\n        //         fontSize:18*scale,\n        //         align:'center'\n        //     }\n        // },\n        title: {\n          subtext: '59.53万',\n          text: '总计',\n          x: 'center',\n          y: '40%',\n          textStyle: {\n            fontSize: 24,\n            fontWeight: 'normal',\n            color: '#00FFFF'\n          },\n          subtextStyle: {\n            fontSize: 28,\n            fontWeight: 'normal',\n            align: \"center\",\n            color: '#CCCCCC'\n          }\n        },\n        series: [{\n          type: 'pie',\n          radius: ['80', '120'],\n          center: ['50%', '50%'],\n          color: ['#80C269', '#00FFFF', '#0090F1', '#FFA800', '#4658F6'],\n          itemStyle: {\n            normal: {\n              borderWidth: 5,\n              borderColor: '#031845'\n            }\n          },\n          data: [{\n            value: 27,\n            name: '严重不满人员'\n          }, {\n            value: 30,\n            name: '关注群体'\n          }, {\n            value: 24,\n            name: '散居外国人'\n          }, {\n            value: 27,\n            name: '上访重点人'\n          }, {\n            value: 27,\n            name: '重点精神病'\n          }],\n          labelLine: {\n            normal: {\n              show: true,\n              length: 50,\n              length2: 50,\n              lineStyle: {\n                color: '#CCCCCC',\n                width: 2\n              }\n            }\n          },\n          label: {\n            normal: {\n              formatter: '{b|{b}}\\n{hr|}\\n{c|{c}%}',\n              rich: {\n                b: {\n                  fontSize: 14,\n                  color: '#FFF',\n                  align: 'left',\n                  padding: 4\n                },\n                hr: {\n                  borderColor: '#CCCCCC',\n                  width: '100%',\n                  borderWidth: 2,\n                  height: 0\n                },\n                c: {\n                  fontSize: 14,\n                  align: 'center',\n                  padding: 4,\n                  color: '#00EDED'\n                }\n              }\n            }\n          }\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    roseCharts: function roseCharts() {\n      var myChart = this.$echarts.init(document.getElementById(\"roseCharts\"));\n      var option = {\n        color: [\"#EAEA26\", \"#906BF9\", \"#FE5656\", \"#01E17E\", \"#3DD1F9\", \"#FFAD05\"],\n        // title: {\n        //     text: '网络/安全设备',\n        //     left: '60',\n        //     top: 0,\n        //     textAlign: 'center',\n        //     textStyle: {\n        //         color: '#fff',\n        //         fontSize: 14,\n        //         fontWeight: 0\n        //     }\n        // },\n        grid: {\n          left: -100,\n          top: 50,\n          bottom: 10,\n          right: 10,\n          containLabel: true\n        },\n        tooltip: {\n          trigger: 'item',\n          formatter: \"{b} : {c} ({d}%)\"\n        },\n        legend: {\n          type: \"scroll\",\n          orient: \"vartical\",\n          // x: \"right\",\n          top: \"center\",\n          right: \"15\",\n          // bottom: \"0%\",\n          itemWidth: 16,\n          itemHeight: 8,\n          itemGap: 16,\n          textStyle: {\n            color: '#A3E2F4',\n            fontSize: 12,\n            fontWeight: 0\n          },\n          data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']\n        },\n        polar: {},\n        angleAxis: {\n          interval: 1,\n          type: 'category',\n          data: [],\n          z: 10,\n          axisLine: {\n            show: false,\n            lineStyle: {\n              color: \"#0B4A6B\",\n              width: 1,\n              type: \"solid\"\n            }\n          },\n          axisLabel: {\n            interval: 0,\n            show: true,\n            color: \"#0B4A6B\",\n            margin: 8,\n            fontSize: 16\n          }\n        },\n        radiusAxis: {\n          min: 40,\n          max: 120,\n          interval: 20,\n          axisLine: {\n            show: false,\n            lineStyle: {\n              color: \"#0B3E5E\",\n              width: 1,\n              type: \"solid\"\n            }\n          },\n          axisLabel: {\n            formatter: '{value} %',\n            show: false,\n            padding: [0, 0, 20, 0],\n            color: \"#0B3E5E\",\n            fontSize: 16\n          },\n          splitLine: {\n            lineStyle: {\n              color: \"#0B3E5E\",\n              width: 2,\n              type: \"solid\"\n            }\n          }\n        },\n        calculable: true,\n        series: [{\n          type: 'pie',\n          radius: [\"5%\", \"10%\"],\n          hoverAnimation: false,\n          labelLine: {\n            normal: {\n              show: false,\n              length: 30,\n              length2: 55\n            },\n            emphasis: {\n              show: false\n            }\n          },\n          data: [{\n            name: '',\n            value: 0,\n            itemStyle: {\n              normal: {\n                color: \"#0B4A6B\"\n              }\n            }\n          }]\n        }, {\n          type: 'pie',\n          radius: [\"90%\", \"95%\"],\n          hoverAnimation: false,\n          labelLine: {\n            normal: {\n              show: false,\n              length: 30,\n              length2: 55\n            },\n            emphasis: {\n              show: false\n            }\n          },\n          name: \"\",\n          data: [{\n            name: '',\n            value: 0,\n            itemStyle: {\n              normal: {\n                color: \"#0B4A6B\"\n              }\n            }\n          }]\n        }, {\n          stack: 'a',\n          type: 'pie',\n          radius: ['20%', '80%'],\n          roseType: 'area',\n          zlevel: 10,\n          label: {\n            normal: {\n              show: true,\n              formatter: \"{c}\",\n              textStyle: {\n                fontSize: 12\n              },\n              position: 'outside'\n            },\n            emphasis: {\n              show: true\n            }\n          },\n          labelLine: {\n            normal: {\n              show: true,\n              length: 20,\n              length2: 55\n            },\n            emphasis: {\n              show: false\n            }\n          },\n          data: [{\n            value: 10,\n            name: 'IDS'\n          }, {\n            value: 5,\n            name: 'VPN'\n          }, {\n            value: 15,\n            name: '交换机'\n          }, {\n            value: 25,\n            name: '防火墙'\n          }, {\n            value: 20,\n            name: 'WAF'\n          }, {\n            value: 35,\n            name: '堡垒机'\n          }]\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    detailedThree: function detailedThree(dataList) {\n      var _this6 = this;\n      // console.log(this.threeImg,'图片');\n      // var equipment = [dataList.yjlts, dataList.yjlyj];\n      var that = this;\n      // console.log(that,'指向');\n      var colorList = [\"#0090ff\", \"#06d3c4\", \"#66b0ed\", \"#7cb79d\", \"#2361b4\", \"rgb(198,123,244)\"];\n      var colorList1 = [\"rgb(198,123,244)\", \"#2361b4\"];\n      // 饼图数据\n      var threeList = dataList.map(function (ele) {\n        return {\n          name: ele.gd_type_name,\n          value: ele.total\n        };\n      });\n      // console.log(threeList, \"饼图数据\");\n      // var legendData = dataList.concat(\n      //   {\n      //     value: equipment[0],\n      //     name: \"运检类投诉\",\n      //   },\n      //   {\n      //     value: equipment[1],\n      //     name: \"运检类意见\",\n      //   }\n      // );\n      this.myChartBin = this.$echarts.init(document.getElementById(\"detailedThree\"));\n      // var graphicList = [];\n      // legendData.forEach((ele, index) => {\n      //   if (index <= 2) {\n      //     graphicList.push({\n      //       type: \"image\",\n      //       style: {\n      //         image: this.threeImg,\n      //         width: 164,\n      //         height: 41,\n      //         x: 250,\n      //         y: 55 * (index + 1),\n      //       },\n      //     });\n      //   } else {\n      //     graphicList.push({\n      //       type: \"image\",\n      //       style: {\n      //         image: this.threeImg,\n      //         width: 164,\n      //         height: 41,\n      //         x: 424,\n      //         y: 55 * (index - 2),\n      //       },\n      //     });\n      //   }\n      // });\n      this.option = {\n        borderColor: \"none\",\n        tooltip: {\n          formatter: function formatter(param) {\n            if (param.data.type == null) {\n              return param.data.name + \":\" + param.value + \"个\";\n            } else {\n              return param.data.name + \":\" + param.value + \"个\";\n            }\n          }\n        },\n        legend: {\n          icon: \"pin\",\n          // height: 90,\n          top: 20,\n          show: false,\n          // bottom:0,\n          // itemGap: 40,\n          // lineHeight: 80,\n          //  padding: [30, 0, 30, 0],\n          // right: '20%',\n          // orient: \"vertical\", //垂直显示\n          x: \"center\",\n          //延Y轴居中\n          data: dataList.map(function (ele) {\n            return ele.gd_type_name;\n          }),\n          textStyle: {\n            color: \"#ffffff\",\n            fontSize: 15\n\n            // width:20,\n            // height:60,\n          }\n        },\n\n        series: [{\n          name: \"\",\n          type: \"pie\",\n          radius: [0, \"70%\"],\n          center: [\"50%\", \"50%\"],\n          startAngle: 60,\n          //默认角度\n          label: {\n            position: \"inner\",\n            show: false\n          },\n          itemStyle: {\n            normal: {\n              borderColor: \"none\",\n              borderWidth: 2,\n              fontSize: 16,\n              color: function color(params) {\n                return colorList[params.dataIndex];\n              }\n            }\n          },\n          selectedMode: \"single\",\n          data: threeList\n        }\n        // {\n        //   name: \"运检类\",\n        //   type: \"pie\",\n        //   radius: [\"70%\", \"80%\"],\n        //   center: [\"20%\", \"50%\"],\n        //   startAngle: 30,\n        //   itemStyle: {\n        //     normal: {\n        //       fontSize: 16,\n        //       color: function (params) {\n        //         return colorList1[params.dataIndex];\n        //       },\n        //       // color:'#F4C907',\n        //     },\n        //   },\n        //   label: {\n        //     normal: {\n        //       formatter: function (params) {\n        //         return params.data.name + \":\" + params.data.type + \"个\";\n        //       },\n        //       color: \"auto\",\n        //       show: false,\n        //       fontSize: 16,\n        //     },\n        //   },\n\n        //   data: [\n        //     {\n        //       value: equipment[0],\n        //       name: \"运检类投诉\",\n        //       type: equipment[0],\n        //     },\n        //     {\n        //       value: equipment[1],\n        //       name: \"运检类意见\",\n        //       type: equipment[1],\n        //     },\n        //   ],\n        //   animation: false,\n        // },\n        ]\n      };\n\n      this.myChartBin.setOption(this.option);\n      window.addEventListener(\"resize\", function () {\n        _this6.myChartBin.resize();\n      });\n    },\n    doing: function doing() {\n      this.option.series[0].startAngle = this.option.series[0].startAngle - 5;\n      this.option.series[1].startAngle = this.option.series[1].startAngle - 5;\n      this.myChartBin.setOption(this.option);\n    },\n    detailedFour: function detailedFour(dataList) {\n      var yearBzData = [];\n      var yearChcg = [];\n      var yearChbc = [];\n      var yearWchz = [];\n      var yearJieDi = [];\n      var yearFenJi = [];\n      for (var i = 0; i < dataList.length; i++) {\n        yearBzData.push(dataList[i].bz);\n        yearChcg.push(dataList[i].chcg);\n        yearChbc.push(dataList[i].chbc);\n        yearWchz.push(dataList[i].wchz);\n        yearJieDi.push(dataList[i].jd);\n        yearFenJi.push(dataList[i].fjbh);\n      }\n      // console.log(yearJieDi,'接地数据');\n      var that = this;\n      var myChart = this.$echarts.init(document.getElementById(\"detailedFour\"));\n      var option = {\n        tooltip: {\n          axisPointer: {\n            type: \"shadow\",\n            textStyle: {\n              color: \"#fff\",\n              fontSize: 16\n            }\n          }\n        },\n        grid: {\n          borderWidth: 0,\n          top: 30,\n          bottom: \"17%\",\n          left: \"6%\",\n          right: \"6%\",\n          textStyle: {\n            color: \"#fff\"\n          }\n        },\n        legend: {\n          icon: \"rect\",\n          right: \"4%\",\n          textStyle: {\n            color: \"#ffffff\"\n          },\n          data: [\"重合成功\", \"重合不成\", \"无重合闸\", \"接地\", \"分级保护\"]\n        },\n        calculable: true,\n        xAxis: [{\n          type: \"category\",\n          trigger: \"axis\",\n          axisLine: {\n            show: false,\n            lineStyle: {\n              color: \"#fff\",\n              fontSize: 16\n            }\n          },\n          splitLine: {\n            show: false\n          },\n          axisTick: {\n            show: false\n          },\n          splitArea: {\n            show: false\n          },\n          axisLabel: {\n            interval: 0,\n            fontSize: 14,\n            rotate: 30\n          },\n          data: yearBzData\n        }],\n        yAxis: [{\n          type: \"value\",\n          splitLine: {\n            show: true,\n            lineStyle: {\n              color: \"rgb(83,83,83)\",\n              fontSize: 16\n            }\n          },\n          axisLine: {\n            lineStyle: {\n              color: \"#fff\",\n              fontSize: 16\n            }\n          },\n          axisTick: {\n            show: false\n          },\n          axisLabel: {\n            interval: 0\n          },\n          splitArea: {\n            show: false\n          }\n        }],\n        series: [{\n          name: \"重合成功\",\n          type: \"bar\",\n          stack: \"Total1\",\n          barMaxWidth: 15,\n          barGap: \"10%\",\n          label: {\n            show: true,\n            formatter: function formatter(params) {\n              if (params.value == 0) {\n                return \"\";\n              } else {\n                return params.value;\n              }\n            }\n          },\n          itemStyle: {\n            normal: {\n              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(194,190,190,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(194,190,190,0)\"\n              }]),\n              borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(194,190,190,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(194,190,190,0)\"\n              }])\n            }\n          },\n          data: yearChcg\n        }, {\n          name: \"重合不成\",\n          type: \"bar\",\n          barMaxWidth: 15,\n          stack: \"Total1\",\n          label: {\n            show: true,\n            formatter: function formatter(params) {\n              if (params.value == 0) {\n                return \"\";\n              } else {\n                return params.value;\n              }\n            }\n          },\n          itemStyle: {\n            normal: {\n              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(86,254,226,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(86,254,226,0)\"\n              }]),\n              borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(86,254,226,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(86,254,226,0)\"\n              }])\n            }\n          },\n          data: yearChbc\n        }, {\n          name: \"无重合闸\",\n          type: \"bar\",\n          barMaxWidth: 15,\n          stack: \"Total1\",\n          label: {\n            show: true,\n            formatter: function formatter(params) {\n              if (params.value == 0) {\n                return \"\";\n              } else {\n                return params.value;\n              }\n            }\n          },\n          itemStyle: {\n            normal: {\n              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(237,125,49,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(237,125,49,0)\"\n              }]),\n              borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(237,125,49,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(237,125,49,0)\"\n              }]),\n              barBorderRadius: 0\n            }\n          },\n          data: yearWchz\n        }, {\n          name: \"接地\",\n          type: \"bar\",\n          barMaxWidth: 15,\n          stack: \"Total1\",\n          label: {\n            show: true,\n            formatter: function formatter(params) {\n              if (params.value == 0) {\n                return \"\";\n              } else {\n                return params.value;\n              }\n            }\n          },\n          itemStyle: {\n            normal: {\n              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(35,160,247,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(35,160,247,0)\"\n              }]),\n              borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(35,160,247,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(35,160,247,0)\"\n              }]),\n              barBorderRadius: 0\n            }\n          },\n          data: yearJieDi\n        }, {\n          name: \"分级保护\",\n          type: \"bar\",\n          barMaxWidth: 15,\n          stack: \"Total1\",\n          label: {\n            show: true,\n            formatter: function formatter(params) {\n              if (params.value == 0) {\n                return \"\";\n              } else {\n                return params.value;\n              }\n            }\n          },\n          itemStyle: {\n            normal: {\n              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(156,73,200,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(156,73,200,0)\"\n              }]),\n              borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                offset: 0,\n                color: \"rgba(156,73,200,1)\"\n              }, {\n                offset: 1,\n                color: \"rgba(156,73,200,0)\"\n              }]),\n              barBorderRadius: 0\n            }\n          },\n          data: yearFenJi\n        }]\n      };\n      myChart.setOption(option);\n      window.addEventListener(\"resize\", function () {\n        myChart.resize();\n      });\n    },\n    detailedFive: function detailedFive() {\n      var myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\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        }],\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    //报警详情信息弹窗\n    enlargeBtn: function enlargeBtn(index) {\n      var _this7 = this;\n      var that = this;\n      this.pageShow = false;\n      if (index == 0) {\n        //   let endDate = this.$moment(new Date())\n        //   .format(\"YYYY-MM-DD hh:mm:ss\");\n        // let startDate =  this.$moment(new Date()).subtract(1,'h').format('YYYY-MM-DD hh:mm:ss')\n        //   this.page = 1;\n        //   let cabData = {\n        //     token: localStorage.getItem(\"token\"),\n        //     pageSize: this.pageSize,\n        //     page: this.page,\n        //     sn: \"\",\n        //     startDate: startDate,\n        //     endDate: endDate,\n        //   };\n        //   getCabinetAlarmList(cabData).then((res) => {\n        //     if (res.data.data.data != null) {\n        //       this.totals = res.data.data.total;\n        //       this.alarmInformationData = res.data.data.data;\n        //     }\n        //   });\n        this.$refs.audio.currentTime = 0; //从头开始播放提示音\n        this.$nextTick(function () {\n          _this7.$refs.audio.play();\n        });\n        this.alarmInformationShow = true;\n        this.$nextTick(function () {\n          _this7.pageShow = true;\n        });\n        this.realTimeAlarmShow = false;\n        this.handleCurrentChange(1);\n      } else if (index == 1) {\n        this.enlargeShow = false;\n        // this.$refs.iframe.contentWindow.fullscreen(1);\n        document.getElementById(\"left\").style.display = \"none\";\n        document.getElementById(\"right\").style.display = \"none\";\n        document.getElementById(\"middle\").style.width = \"100%\";\n        document.getElementById(\"middle\").style.height = \"100%\";\n        document.getElementById(\"detailed\").style.display = \"none\";\n        document.getElementById(\"threeModel\").style.height = \"100%\";\n        document.getElementById(\"threeModel\").style.width = \"100%\";\n      }\n    },\n    //报警详情信息弹窗\n    enlargeBtn1: function enlargeBtn1(index) {\n      var _this8 = this;\n      this.pageShow = false;\n      if (index == 0) {\n        // this.$refs.audio.currentTime = 0; //从头开始播放提示音\n        // this.$refs.audio.play();\n        // this.alarmInformationShow = true;\n        // this.realTimeAlarmShow = false;\n        this.$refs.audio.currentTime = 0; //从头开始播放提示音\n        this.$nextTick(function () {\n          _this8.$refs.audio.play();\n        });\n        this.alarmInformationShow = true;\n        this.$nextTick(function () {\n          _this8.pageShow = true;\n        });\n        this.realTimeAlarmShow = false;\n        this.handleCurrentChange(1);\n      } else if (index == 1) {\n        this.enlargeShow = true;\n        // this.$refs.iframe.contentWindow.fullscreen(1);\n        document.getElementById(\"left\").style.display = \"flex\";\n        document.getElementById(\"left\").style.width = \"17.18%\";\n        document.getElementById(\"right\").style.display = \"flex\";\n        document.getElementById(\"right\").style.width = \"17.18%\";\n        document.getElementById(\"middle\").style.width = \"55.7%\";\n        document.getElementById(\"middle\").style.height = \"100%\";\n        document.getElementById(\"detailed\").style.display = \"flex\";\n        document.getElementById(\"detailed\").style.height = \"350px\";\n      }\n    },\n    handleClose: function handleClose() {\n      this.alarmInformationShow = false;\n      this.$refs.audio.pause();\n      this.page = 1;\n      this.totals = 0;\n    },\n    handleDate: function handleDate(index) {\n      var _this9 = this;\n      this.currentIndex = index;\n      // if (index == 0) {\n      //周配变停运\n      getPbtyqk({\n        action: index == 0 ? \"week\" : \"month\"\n      }).then(function (res) {\n        var dataPbty = [];\n        dataPbty = res.data.data;\n        _this9.detailedFive(dataPbty);\n        var dataPb = [];\n        var dataCf = [];\n        for (var i = 0; i < dataPbty.length; i++) {\n          dataPb.push(dataPbty[i].pbsl);\n          dataCf.push(dataPbty[i].cftytc);\n        }\n        _this9.topContent[0].count = dataPb.reduce(function (x, y) {\n          return x + y;\n        });\n        _this9.topContent[1].count = dataCf.reduce(function (x, y) {\n          return x + y;\n        });\n        var pbCount = _this9.topContent[1].count / _this9.topContent[0].count * 100;\n        var pbCountString = pbCount.toString();\n        if (pbCountString.indexOf(\".\") != -1) {\n          _this9.topContent[2].count = pbCountString.substring(0, pbCountString.indexOf(\".\") + 3) + \"%\";\n        } else {\n          _this9.topContent[2].count = pbCountString + \"%\";\n        }\n      });\n      // }else if (index == 1) {\n      //   //月配变停运\n      //   getPbtyqk({\n      //     action:\"month\"\n      //   }).then((res)=>{\n      //     let dataPbty = [];\n      //     dataPbty = res.data.data\n      //     this.detailedFive(dataPbty);\n      //     let dataPb = [];\n      //     let dataCf = [];\n      //     for (let i = 0; i < dataPbty.length; i++) {\n      //       dataPb.push(dataPbty[i].pbsl);\n      //       dataCf.push(dataPbty[i].cftytc);\n      //     }\n      //     this.topContent[0].count = dataPb.reduce((x, y) => x + y)\n      //     this.topContent[1].count = dataCf.reduce((x, y) => x + y)\n      //      let pbCount =  (this.topContent[1].count/this.topContent[0].count)*100\n      //     let pbCountString = pbCount.toString()\n      //     if (pbCountString.indexOf(\".\") != -1) {\n      //       this.topContent[2].count =  pbCountString.substring(0,pbCountString.indexOf(\".\")+3) + '%'\n      //     }else{\n      //     this.topContent[2].count = pbCountString +'%'\n      //     }\n      //   })\n      // }\n    },\n    addColor: function addColor(index) {\n      if (this.currentIndex == index) {\n        return {\n          active: this.acolor\n        };\n      }\n    }\n  },\n  watch: {\n    //监听内容\n    value: function value(newVal, oldVal) {\n      if (newVal != oldVal && newVal != \"\") {\n        this.selectLine(newVal);\n      } else if (newVal == \"\") {\n        this.selectLine(\"\");\n        this.value = \"\";\n      }\n    },\n    rowTime: {\n      deep: true,\n      handler: function handler(newVal, oldVal) {\n        console.log(newVal, oldVal, \"pppppppppppppppp\");\n        if (newVal != oldVal && newVal != \"\" && oldVal != \"\") {\n          this.enlargeBtn(0);\n        }\n      }\n    }\n  }\n};",{"version":3,"mappings":";;;AAwuBA,SACAA,gBACAC,SACAC,YACAC,SACAC,WACAC,YACAC,WACAC,gBACAC,gBACAC,oBACAC;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;EACAC;EACAC;IACAC;IAAA;IACAC;IAAA;IACAC;IAAA;IACAC;EACA;EACAC;IAAA;IACA;MACAC;MACAC;MACAC;MACAC;MACAC;MAEAC;MACAC,aACA;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,EACA;MAAA;MACAC;MACAC;MAAA;MACAC;MACAC;MACAC;MAAA;MACAC;MAAA;MACAC;MACAC;MACAC;QACAC;QACAC;MAAA,yCACA,+CACA,+CACA,+CACA,sBACA;MACAC;MACAC;MACAC;MACAC,aACA;QACAC;QACAnC;MACA,GACA;QACAmC;QACAnC;MACA,GACA;QACAmC;QACAnC;MACA,GACA;QACAmC;QACAnC;MACA,EACA;MACAoC,aACA;QACAD;MACA,GACA;QACAA;MACA,EACA;MACAE,cACA;QACAF;MACA,GACA;QACAA;MACA,EACA;MACAG,UACA;QACAC;QACAC;MACA,EACA;MACAD;MACAE,aACA;QACAzC;QACA0C;MACA,GACA;QACA1C;QACA0C;MACA,GACA;QACA1C;QACA0C;MACA,EACA;MACAC;IAAA,sCACA,uCACA,iDACA,oCACA,2CACA,4CAEA,CACA;MACAC;MACAC;MACA3B;IACA,GACA;MACA0B;MACAC;MACA3B;IACA,GACA;MACA0B;MACAC;MACA3B;IACA,GACA;MACA0B;MACAC;MACA3B;IACA,GACA;MACA0B;MACAC;MACA3B;IACA,GACA;MACA0B;MACAC;MACA3B;IACA,EACA,sCAGA,0CAEA,wCAEA,0CACA,uCAGA,yCACA,oCACA,8CACA,sCACA;EAEA;EACA4B;EACAC;IAAA;IACA;IACA;IACAC;MACAC;MACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;IAEA;IACA;MACAC;MACAzC;MACAC;IACA;EAEA;EACA;EACA;EACA;EACAyC;IACA;IACAF;IACA;EACA;EACAG;IACAC;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;IACA;IACAC;MACA;MACA;MACA;QACAC;UACAC;UACAC;YACAC;UACA;QACA;QACAC;UACAC;YACAC;YAAA;YACAC;UACA;;UAEAxD;QACA;QACAyD,QACA;UACAL;UACApD,OACA,cACA,cACA,cACA,cACA,aACA;UACA0D;YACAC;YACAL;cACAE;YACA;UACA;QACA,EACA;QACAI,QACA;UACAR;UACA1D;UACAgE;YACAJ;cACAE;YACA;UACA;QACA,EACA;QACAK,SACA;UACAnE;UACA0D;UACAU;YACAN;YAAA;YACAO;YAAA;YACAC;UACA;UACAC;YACAC;UACA;UACAlE;QACA;MAEA;MACAmE;MACAzB;QACAyB;MACA;IACA;IACA;IACAC;MAAA;MACAnF;QACAoF;MACA;QACAC;QACA;UACA;YACA;YACAC,gCACA;YACA;UACA;;UACA;YACA;YACAA,2BACA;UACA;UACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACAtF;QAAAmF;MAAA;QACAC;QACA;QAEA;UACA;YACA,IACA,qEACA;cACA;cACA;YACA;UACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;MACA;IACA;IACA;IACAG;MACA;QACA;MACA;QACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;QACAjD;QACA;UACA;UACAkD;QACA;UACAA,gEACA;UACA;QACA;UACA;UACAA,gEACA;QACA;UACA;UACAA,gEACA;QACA;UACA;UACAA,gEACA;QACA;MACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;MACA;MACA5F;QAAAqF;MAAA;QAAA;QACAC;QACA;QACA;MACA;IACA;IACA;IACAO;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;MACA;IACA;IACA;IACAC;MAAA;MACAjG;QACAqF;QACAa;MACA;QACA;QACA;UACA,mDACAX,wBACA;QACA;UACA;QACA;MACA;IACA;IACAY;MAGA;MACA;QACAlC;UACAC;UACAC;YACAC;UACA;QACA;QACAK,QACA;UACAL;UACApD;UACA0D;YACAC;YACAL;cACAE;cACAD;YACA;UACA;UACA6B;YACAzB;UACA;UACA0B;YACA1B;YACA2B;UACA;UACAC;YAAA5B;UAAA;QACA,EACA;QACAC,QACA;UACAR;UACA1D;UACAgE;YACAJ;cACAE;cACAD;YACA;UACA;QACA,EACA;QACAM,SACA;UACAnE;UACA0D;UACAoC;UACA1B;YACA;YACA;YACA;YACA;YACA;YACAC;YAAA;YACAC;UACA;UACAC;YACAC;UACA;UACAlE;QACA;MAEA;MAEAmE;MAEAzB;QACAyB;MACA;IACA;IACAsB;MACA;MACA;QACAxC;UACAC;UACAC;YACAC;YACAsC;cACAlC;YACA;UACA;QACA;QACAH,SACA;UACAsC;UACA3F;UACAsD;YACAC;YACAC;UACA;QACA,GACA;UACAmC;UACAC;UACA5F;UACAsD;YACAC;YACAC;UACA;QACA,EACA;QACAC,QACA;UACAL;UACApD;UACAmD;YACAC;UACA;UACAM;YACAF;YACAD;UACA;QACA,EACA;QACAK,QACA;UACAR;UACAyC;UACAC;UACAC;UACArC;YACAsC;YACA1C;cACAC;YACA;UACA;UACA6B;YACAa;cACAzC;YACA;UACA;UACA0C;YACAvC;YACAsC;cACA7C;cACA;cACAI;cACA2C;YACA;UACA;QACA,GACA;UACA/C;UACAyC;UACAC;UACAC;UACArC;YACAsC;YACA1C;cACAC;YACA;UACA;UACA6B;YACAa;cACAzC;YACA;UACA;UACA0C;YACAvC;YACAsC;cACA7C;cACA;cACAI;cACA2C;YACA;UACA;QACA,EACA;QACAtC,SACA;UACAnE;UACA0D;UACAgD;UAEAnD;YACAoD;cACA;YACA;UACA;UACAvC;YACAN,uDACA;cAAA8C;cAAA9C;YAAA,GACA;cAAA8C;cAAA9C;YAAA,GACA;cAAA8C;cAAA9C;YAAA,EACA;YACAO;YAAA;YACAC;UACA;UACAhE;QACA,GACA;UACAN;UACA0D;UACAgD;UAEAnD;YACAoD;cACA;YACA;UACA;UACAvC;YACAN,uDACA;cAAA8C;cAAA9C;YAAA,GACA;cAAA8C;cAAA9C;YAAA,GACA;cAAA8C;cAAA9C;YAAA,EACA;YACAO;YAAA;YACAC;UACA;UACAhE;QACA,GACA;UACAN;UACA0D;UAEAH;YACAoD;cACA;YACA;UACA;UACAvC;YACAyC;cACA/C;cACAyC;gBACAzC;cACA;YACA;UACA;UACAxD;QACA,GACA;UACAN;UACA0D;UAEAH;YACAoD;cACA;YACA;UACA;UACAvC;YACAyC;cACA/C;cACAyC;gBACAzC;cACA;YACA;UACA;UACAxD;QACA,GACA;UACAN;UACA0D;UACAH;YACAoD;cACA;YACA;UACA;UACAvC;YACAyC;cACA/C;cACAyC;gBACAzC;cACA;YACA;UACA;UACAxD;QACA;MAEA;MAEAmE;MAEAzB;QACAyB;MACA;IACA;IACAqC;MAEA;MACA;QACAvD;UACAU;UACAT;QACA;QACAuD;UACAC;UACAC;UACAC;UACAC;QACA;QACApD;UACAL;UACA0D;UACApD;YACAF;YACAD;UACA;UACA8B;YACA1B;UACA;UACAuC;YACAvC;YACAsC;cACAzC;YACA;UACA;UACAxD;QACA;QACA4D;UACAR;UACAgC;YACAa;cACAzC;YACA;UACA;QACA;QACAK,SACA;UACAnE;UACA0D;UACA2D;UACAC;UACAhH;UACA8D;YACAyC;cACA/C;cACAyC;gBACAzC;cACA;YACA;UACA;QACA;MAEA;MACAW;MACAzB;QACAyB;MACA;IACA;IACA8C;MACA;MACA;MACA;QACAhE;UACAU;UACAT;QACA;QACAuD;UACAC;UACAC;UACAC;UACAC;QACA;QACApD;UACAL;UACA0D;UACApD;YACAF;YACAD;UACA;UACA8B;YACA1B;UACA;UACAuC;YACAvC;YACAsC;cACAzC;YACA;UACA;UACAxD;QACA;QACA4D;UACAR;UACAgC;YACAa;cACAzC;YACA;UACA;QACA;QACAK,SACA;UACAnE;UACA0D;UACA2D;UACAC;UACAhH;UACA8D;YACAyC;cACA/C;cACAyC;gBACAzC;cACA;YACA;UACA;QACA;MAEA;MACAW;MACAzB;QACAyB;MACA;IACA;IACA+C;MACA;MACA,iBACA;QACAxH;QACAM;MACA,GACA;QACAN;QACAM;MACA,EAEA;MACA,sBACA,OACA,OACA,OACA,OACA,MACA;MACA;MACA;MACA,eACAmH,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,OACAA,MACA;MACA;QACA3D;QACAP;UACAC;UACAC;YACAC;UACA;QACA;QAGAC;UACAsD;UACAf;UACAwB;UACAC;UACAC;UACAhE;YACAE;YACAD;UACA;QACA;QACAkD;UACAC;UACAC;UACAC;UACAhB;UACAiB;QACA;QACApD,QACA;UACAL;UACAO;UACAyB;YACAzB;UACA;UACA0B;YACA1B;UACA;UACAD;YACAF;YACAD;YAAA;YACAgE;YACAxB;YACAC;cACA;YACA;UACA;UACAE;YACAvC;UACA;QACA,EACA;QACAC,QACA;UACAR;UACAgC;YACAzB;UACA;UACA0B;YACA1B;UACA;UACAD;YACAF;YACAD;YAAA;YACAgE;YACAxB;UACA;UACAO;UACAtG;QACA,EACA;QACA6D,SACA;UACAnE;UACA0D;UACA2D;UACAvB;UACAgC;UACAtF;YACAqE;cACA5C;cACA8D;cACAnE;gBACAE;gBACAD;cACA;YACA;UACA;UACAvD;QACA,GACA;UACAN;UACA0D;UACA2D;UACAvB;UACAgC;UACAtF;YACAqE;cACA5C;cACA8D;cACAzB;gBACA1B;gBACA;gBACA;cACA;cACAhB;gBACAE;gBACAD;cACA;YACA;UACA;UACAvD;QACA;MAEA;MACAmE;MACAzB;QACAyB;MACA;IACA;IACAuD;MACA;MACA;MACA;MACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;QACAzE;UACAC;UACA8C;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA2B;UACAC;UACAC;UACAlC;UACAmC;UACAxE;YACAC;YACAgE;YACA/D;UACA;UACAuE;YACAxE;YACAgE;YACAS;YACAxE;UACA;QACA;QACAK;UACAT;UACA6E;UACAC;UACA1E;UACAM;YACAyC;cACAvC;cACAmE;YACA;UACA;UACAnI;YACAiC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA,EAEA;UACA0I;YACA7B;cACA5C;cACA0E;cACAC;cACArC;gBACAzC;gBACA2C;cACA;YACA;UACA;UACAjE;YACAqE;cACAP;cACAuC;gBACAC;kBACAjF;kBACAC;kBACAwE;kBACAS;gBACA;gBACAC;kBACAP;kBACAhC;kBACAnC;kBACA2E;gBACA;gBACAC;kBACArF;kBACAyE;kBACAS;kBACAjF;gBACA;cACA;YACA;UACA;QACA;MAGA;MACAW;MACAzB;QACAyB;MACA;IACA;IACA0E;MACA;MACA;QACArF;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACAiD;UACAC;UACAd;UACAgB;UACAD;UACAE;QACA;QACA5D;UACAC;UACA8C;QACA;QACA3C;UACAD;UACA0F;UACA;UACAlD;UACAe;UACA;UACAS;UACAC;UACAC;UACAhE;YACAE;YACAD;YACAgE;UACA;UACAvH;QACA;QACA+I;QACAC;UACAjD;UACA3C;UACApD;UACAiJ;UACA7D;YACAzB;YACAsC;cACAzC;cACA2C;cACA/C;YACA;UACA;UACAM;YACAqC;YACApC;YACAH;YACA0F;YACA3F;UACA;QACA;QACA4F;UACAtD;UACAC;UACAC;UACAX;YACAzB;YACAsC;cACAzC;cACA2C;cACA/C;YACA;UACA;UACAM;YACAsC;YACArC;YACA8E;YACAjF;YACAD;UACA;UACA2C;YACAD;cACAzC;cACA2C;cACA/C;YACA;UACA;QACA;QACAgG;QACAvF;UACAT;UACA6E;UACAoB;UACAjB;YACA7B;cACA5C;cACA0E;cACAC;YACA;YACArE;cACAN;YACA;UACA;UACA3D;YACAN;YACAuC;YACA6B;cACAyC;gBACA/C;cACA;YACA;UACA;QACA;UACAJ;UACA6E;UACAoB;UACAjB;YACA7B;cACA5C;cACA0E;cACAC;YACA;YACArE;cACAN;YACA;UACA;UACAjE;UACAM;YACAN;YACAuC;YACA6B;cACAyC;gBACA/C;cACA;YACA;UACA;QACA;UACAuD;UACA3D;UACA6E;UACAqB;UACA9B;UACAtF;YACAqE;cACA5C;cACAqC;cACA1C;gBACAC;cACA;cACAkE;YACA;YACAxD;cACAN;YACA;UACA;UACAyE;YACA7B;cACA5C;cACA0E;cACAC;YACA;YACArE;cACAN;YACA;UACA;UACA3D;YACAiC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA,GACA;YACAuC;YACAvC;UACA;QAEA;MACA;MACAyE;MACAzB;QACAyB;MACA;IACA;IACAoF;MAAA;MACA;MACA;MACA;MACA;MACA,iBACA,WACA,WACA,WACA,WACA,WACA,mBACA;MACA;MACA;MACA;QACA;UAAA7J;UAAAuC;QAAA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,qCACA0C,yCACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;QACAwD;QAEAlF;UACA+C;YACA;cACA;YACA;cACA;YACA;UACA;QACA;QAEA3C;UACAxB;UACA;UACA+D;UACAjC;UACA;UACA;UACA;UACA;UACA;UACA;UACAgC;UAAA;UACA3F;YACA;UACA;UACAsD;YACAE;YACAD;;YAEA;YACA;UACA;QACA;;QACAM,SACA;UACAnE;UACA0D;UACA6E;UACAC;UACAsB;UAAA;UACAtH;YACAuF;YACA9D;UACA;UAEAG;YACAyC;cACA4B;cACAnE;cACAT;cACAC;gBACA;cACA;YACA;UACA;UAEAiG;UACAzJ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QAAA;MAEA;;MACA;MACA0C;QACA;MACA;IACA;IACAgH;MACA;MACA;MACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;MACA;MACA;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA;MACA;MACA;MACA;MACA;QACAhH;UACAE;YACAC;YACAE;cACAE;cACAD;YACA;UACA;QACA;QACAkD;UACAzC;UACA4B;UACAgB;UACAF;UACAC;UACArD;YACAE;UACA;QACA;QACAH;UACAxB;UACA8E;UACArD;YACAE;UACA;UACAxD;QACA;QACAoJ;QACA3F,QACA;UACAL;UACAF;UACAkC;YACAzB;YACAsC;cACAzC;cACAD;YACA;UACA;UACA2C;YACAvC;UACA;UACA0B;YACA1B;UACA;UACA4B;YACA5B;UACA;UACAD;YACAqC;YACAxC;YACA2G;UACA;UACAlK;QACA,EACA;QACA4D,QACA;UACAR;UACA8C;YACAvC;YACAsC;cACAzC;cACAD;YACA;UACA;UACA6B;YACAa;cACAzC;cACAD;YACA;UACA;UACA8B;YACA1B;UACA;UACAD;YACAqC;UACA;UACAR;YACA5B;UACA;QACA,EACA;QACAE,SACA;UACAnE;UACA0D;UACA2D;UACAoD;UACAC;UACAlI;YACAyB;YACAqC;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAlC;YACAyC;cACA/C,6DACA;gBACA8C;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA;cACA2E,sDACA,GACA,GACA,GACA,GACA,CACA;gBACA7B;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA;YAEA;UACA;UACAxD;QACA,GACA;UACAN;UACA0D;UACA+G;UACApD;UACA7E;YACAyB;YACAqC;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAlC;YACAyC;cACA/C,6DACA;gBACA8C;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA;cACA2E,sDACA,GACA,GACA,GACA,GACA,CACA;gBACA7B;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA;YAEA;UACA;UACAxD;QACA,GACA;UACAN;UACA0D;UACA+G;UACApD;UACA7E;YACAyB;YACAqC;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAlC;YACAyC;cACA/C,6DACA;gBACA8C;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA;cACA2E,sDACA,GACA,GACA,GACA,GACA,CACA;gBACA7B;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA,CACA;cACA6G;YACA;UACA;UACArK;QACA,GACA;UACAN;UACA0D;UACA+G;UACApD;UACA7E;YACAyB;YACAqC;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAlC;YACAyC;cACA/C,6DACA;gBACA8C;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA;cACA2E,sDACA,GACA,GACA,GACA,GACA,CACA;gBACA7B;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA,CACA;cACA6G;YACA;UACA;UACArK;QACA,GACA;UACAN;UACA0D;UACA+G;UACApD;UACA7E;YACAyB;YACAqC;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAlC;YACAyC;cACA/C,6DACA;gBACA8C;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA;cACA2E,sDACA,GACA,GACA,GACA,GACA,CACA;gBACA7B;gBACA9C;cACA,GACA;gBACA8C;gBACA9C;cACA,EACA,CACA;cACA6G;YACA;UACA;UACArK;QACA;MAEA;MACAmE;MACAzB;QACAyB;MACA;IACA;IACAmG;MAEA;MACA;QACArH;UACAC;UACAC;YACAC;UACA;QACA;QACAK,QACA;UACAL;UACApD;UACA0D;YACAC;YACAL;cACAE;cACAD;YACA;UACA;UACA6B;YACAzB;UACA;UACA0B;YACA1B;YACA2B;UACA;UACAC;YAAA5B;UAAA;QACA,EACA;QACAC,QACA;UACAR;UACA1D;UACAgE;YACAJ;cACAE;cACAD;YACA;UACA;QACA,EACA;QACAM,SACA;UACAnE;UACA0D;UACAoC;UACA1B;YACAN,uDACA;cAAA8C;cAAA9C;YAAA,GACA;cAAA8C;cAAA9C;YAAA,GACA;cAAA8C;cAAA9C;YAAA,EACA;YACAO;YAAA;YACAC;UACA;UACAC;YACAC;UACA;UACAlE;QACA;MAEA;MACAmE;MACAzB;QACAyB;MACA;IACA;IACA;IACAoG;MAAA;MACA;MACA;MACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;MACA;QACA;QACA;QACA5F;QACAA;QACAA;QACAA;QACAA;QACAA;QACAA;MACA;IACA;IACA;IACA6F;MAAA;MACA;MACA;QACA;QACA;QACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;MACA;QACA;QACA;QACA7F;QACAA;QACAA;QACAA;QACAA;QACAA;QACAA;QACAA;MACA;IACA;IACA8F;MACA;MACA;MACA;MACA;IACA;IACAC;MAAA;MACA;MACA;MACA;MACArL;QACAgF;MACA;QACA;QACAsG;QACA;QACA;QACA;QACA;UACAC;UACAC;QACA;QACA;UAAA;QAAA;QACA;UAAA;QAAA;QACA,cACA;QACA;QACA;UACA,6BACAC;QACA;UACA;QACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;IACA;IACAC;MACA;QACA;UAAAC;QAAA;MACA;IACA;EACA;EACAC;IACA;IACAhJ;MACA;QACA;MACA;QACA;QACA;MACA;IACA;IACAiJ;MACAC;MACAC;QACA9G;QACA;UACA;QACA;MACA;IACA;EACA;AACA","names":["getCompanyInfo","getLine","getBanzugz","getGdtj","getDwbzgz","getGdsgdzl","getPbtyqk","getCabinetInfo","getCabinetList","getfaultReportList","getCabinetAlarmList","name","components","ringMainUnit","workOrder","routeDetail","lineDetail","data","pageShow","totals","pageSize","page","threeImg","enlargeShow","dataGzList","bz","chbc","chcg","jd","total","wchz","dateList","acolor","currentIndex","alarmInformationData","alarmInformationShow","realTimeAlarmShow","modelOthers","componentShow","CompanyInfo","pdxl","xlcd","tableData","btnArr","btnActive","iconGround","icon","btnEnlarge","btnEnlarge1","options","value","label","topContent","count","device","gd_type_id","gd_type_name","created","mounted","window","clearInterval","token","beforeDestroy","methods","routerTo","detailen1","tooltip","trigger","axisPointer","type","legend","textStyle","fontSize","color","xAxis","axisLabel","show","yAxis","series","itemStyle","borderRadius","borderWidth","emphasis","focus","myChart","getbanzhu","action","console","res","getGongdan","rowClass","handleCurrentChange","document","openLineDetail","rowHandle","openGdDetail","mouseout","handleUnity","selectLine","line_code","detailedOne","axisLine","axisTick","alignWithLabel","splitArea","barWidth","shuzihuaCharts","crossStyle","x","top","min","max","interval","formatter","lineStyle","splitLine","width","yAxisIndex","valueFormatter","offset","normal","detailedTwo","grid","left","right","bottom","containLabel","boundaryGap","stack","symbol","detailedTwo11","horizontalChart","isMax","itemWidth","itemHeight","itemGap","fontWeight","zlevel","position","barCharts","title","subtext","text","y","subtextStyle","align","radius","center","borderColor","labelLine","length","length2","rich","b","padding","hr","height","c","roseCharts","orient","polar","angleAxis","z","margin","radiusAxis","calculable","hoverAnimation","roseType","detailedThree","startAngle","selectedMode","doing","detailedFour","yearBzData","yearChcg","yearChbc","yearWchz","yearJieDi","yearFenJi","rotate","barMaxWidth","barGap","barBorderRadius","detailedFive","enlargeBtn","enlargeBtn1","handleClose","handleDate","dataPbty","dataPb","dataCf","pbCountString","addColor","active","watch","rowTime","deep","handler"],"sourceRoot":"src/views","sources":["index.vue"],"sourcesContent":["<template>\r\n  <div class=\"home\">\r\n    <div class=\"left\" id=\"left\">\r\n      <div class=\"one\" style=\"height: 48%\">\r\n        <div class=\"cartitle\" @click=\"routerTo('盐城地区分布光伏运行监测')\">\r\n            \r\n          <div class=\"titleFont\"> \r\n            <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>盐城地区分布光伏运行监测</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n                <span style=\"font-size: 18px\">户数高渗透率&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">容量渗透率&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">能量渗透率&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n        <div id=\"detailedTwo1\"></div>\r\n      </div>\r\n      <div class=\"two\" style=\"height: 49%\">\r\n        <div class=\"cartitle\" @click=\"routerTo('配网工程全过程物资审计')\">\r\n          <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>配网工程全过程物资审计</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n        </div>\r\n        <div class=\"content\" style=\"display:inline\">\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n                <span style=\"font-size: 18px\">项目数&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">预算费用总和</span>&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">计划数&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n        <div id=\"barCharts\"></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"left1\" id=\"left\">\r\n      <div class=\"one\" style=\"height: 48%\">\r\n        <div class=\"cartitle\" @click=\"routerTo('盐城东台区供电所数字化分析')\">\r\n          <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>盐城东台区供电所数字化分析</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n                <span style=\"font-size: 18px\">升档配变数量&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">降档配比数量</span>&nbsp;&nbsp;\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">负荷关注配变数量&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n        <div id=\"horizontalChart\"></div>\r\n      </div>\r\n      <div class=\"two\" style=\"height: 49%\">\r\n        <div class=\"cartitle\" @click=\"routerTo('盐城供电公司配网电能质量管控')\">\r\n          <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>盐城供电公司配网电能质量管控</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n                <span style=\"font-size: 18px\">月供电可靠性&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">平均停电频次&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">平均停电时间&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n        <div id=\"detailedOne\" ></div>\r\n      </div>\r\n    </div>\r\n   <div class=\"middle\" id=\"middle\">\r\n      <div class=\"map\" style=\"height: 100%\">\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                  <span style=\"font-size: 18px\">户数高渗透率</span>\r\n                  <h5 style=\"font-size: 28px; color: yellow\">3.40%</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                  <span style=\"font-size: 18px\">容量渗透率</span>\r\n                  <h5 style=\"font-size: 28px; color: orange\">0.01%</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                  <span style=\"font-size: 18px\">能量渗透率</span>\r\n                  <h5 style=\"font-size: 28px; color: yellow\">0.44%</h5>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"imgboxtwo\">\r\n          <ul class=\"contentUl\">\r\n            <li>\r\n              <h5>发电客户数</h5>\r\n              <br />\r\n              <span style=\"color: yellow\">4721</span>\r\n            </li>\r\n            <li>\r\n              <h5>变电站数量</h5>\r\n              <br />\r\n              <span style=\"color: orange\">90</span>\r\n            </li>\r\n            <li>\r\n              <h5>台区总数</h5>\r\n              <br />\r\n              <span style=\"color: yellow\">17416</span>\r\n            </li>\r\n            <li>\r\n              <h5>当前负载率</h5>\r\n              <br />\r\n              <span style=\"color: orange\">40.19%</span>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"right\" id=\"right\">\r\n      <div class=\"one\" style=\"height: 48%; width: 100%\">\r\n        <div class=\"cartitle\" @click=\"routerTo('乡村振兴电力综合指数')\">\r\n          <!-- <div style=\"\r\n              width: 82%;\r\n              display: flex;\r\n              justify-content: space-between;\r\n              align-items: center;\r\n            \"> -->\r\n            <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>乡村振兴电力综合指数</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n            <!-- <div class=\"dateSelect\">\r\n              <div style=\"text-indent: 15px\" @click=\"handleDate(index)\" :class=\"addColor(index)\"\r\n                v-for=\"(item, index) in dateList\" :key=\"index\">\r\n                {{ item }}\r\n              </div>\r\n            </div> -->\r\n          <!-- </div> -->\r\n        </div>\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n                <span style=\"font-size: 18px\">月供电可靠性&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">平均停电频次&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">平均停电时间&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n        <div  id=\"detailedFive\"></div>\r\n      </div>\r\n \r\n      <div class=\"three\" style=\"height: 48%; width: 100%\">\r\n        <div class=\"cartitle\" @click=\"routerTo('两高行业企业污染监测')\">\r\n          <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>两高行业企业污染监测</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n        </div>\r\n        <!-- <div class=\"three-content\">\r\n          <div class=\"three-left\">\r\n            <div id=\"detailedThree\"></div>\r\n          </div>\r\n\r\n          <div class=\"three-right\">\r\n            <ul>\r\n              <li v-for=\"s in gongdanList\" @click=\"openGdDetail(s)\">\r\n                {{ s.gd_type_name }}\r\n                <span style=\"color: #56fee2\">{{ s.total }}</span>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div> -->\r\n         <div class=\"content\" style=\"display:inline\">\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n                <span style=\"font-size: 18px\">项目数&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">预算费用总和</span>&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">计划数&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n        <div id=\"roseCharts\"></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"right1\" id=\"right\">\r\n      <!-- <div class=\"one\" style=\"height: 635px; width: 100%\"> -->\r\n      <div class=\"one\" style=\"height:48%; width: 100%\">\r\n        <div class=\"cartitle\" @click=\"routerTo('农村生活污水治理设备电量分析')\">\r\n          <!-- <div style=\"\r\n              width: 82%;\r\n              display: flex;\r\n              justify-content: space-between;\r\n              align-items: center;\r\n            \"> -->\r\n            <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>农村生活污水治理设备电量分析</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n            <!-- <div class=\"dateSelect\">\r\n              <div style=\"text-indent: 15px\" @click=\"handleDate(index)\" :class=\"addColor(index)\"\r\n                v-for=\"(item, index) in dateList\" :key=\"index\">\r\n                {{ item }}\r\n              </div>\r\n            </div> -->\r\n          <!-- </div> -->\r\n        </div>\r\n\r\n        <div class=\"content\">\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n                <span style=\"font-size: 18px\">户数高渗透率&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">容量渗透率&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">能量渗透率&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n         \r\n        </div>\r\n       \r\n        \r\n            <div id=\"detailen\"></div>\r\n         \r\n      </div>\r\n      <!-- <div class=\"two\" style=\"height: 340px\">\r\n        <div class=\"cartitle\">\r\n          <div class=\"titleFont\">盐都供电质量统计</div>\r\n        </div>\r\n        <div id=\"detailedTwo\"></div>\r\n      </div> -->\r\n      <div class=\"three\" style=\"height: 48%; width: 100%\">\r\n        <div class=\"cartitle\"  @click=\"routerTo('数字化排涝抗旱辅助及检修辅助决策')\">\r\n          <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n            <span>数字化排涝抗旱辅助及检修辅助决策</span>\r\n            <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n        </div>\r\n         <div class=\"content\">\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n                <span style=\"font-size: 18px\">户数高渗透率&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">容量渗透率&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n          <div class=\"line\">\r\n            <div class=\"total\">\r\n              <div class=\"num\">\r\n                <span style=\"font-size: 18px\">能量渗透率&nbsp;&nbsp;</span>\r\n                <span style=\"\r\n                    font-size: 45px;\r\n                    font-weight: 600;\r\n                    -webkit-background-clip: text;\r\n                    background-clip: text;\r\n                    background-image: linear-gradient(\r\n                      to bottom,\r\n                      rgb(189, 255, 231),\r\n                      rgb(86, 244, 254)\r\n                    );\r\n                  \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n         \r\n        </div>\r\n            <div id=\"shuzihua\"></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"realTimeAlarm\" v-show=\"realTimeAlarmShow\">\r\n      <div class=\"content\">\r\n        <img src=\"../assets/images/baojing.png\" />\r\n        <div>都政线XXX环网柜间隔3发生局部放电故障</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"alarmInformation\" v-show=\"alarmInformationShow\">\r\n      <div class=\"top\">\r\n        <div class=\"title\">报警详情信息</div>\r\n        <div class=\"close\">\r\n          <img @click=\"handleClose\" src=\"@/assets/images/close.png\" style=\"cursor: pointer\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"content\">\r\n        <div class=\"table user_skills\">\r\n          <el-table :data=\"alarmInformationData\" style=\"width: 100%; height: 100%\"\r\n            :header-cell-style=\"{ 'text-align': 'center' }\" :cell-style=\"{ 'text-align': 'center' }\"\r\n            :row-class-name=\"rowClass\">\r\n            <el-table-column label=\"序号\" width=\"100\" align=\"center\">\r\n              <template slot-scope=\"scop\">\r\n                {{ scop.$index + 1 }}\r\n              </template>\r\n            </el-table-column>\r\n            <el-table-column prop=\"cabinet_name\" label=\"告警位置\" align=\"center\">\r\n              <!-- <template slot-scope=\"scope\">\r\n                <div v-html=\"scope.row.name\"></div>\r\n              </template> -->\r\n            </el-table-column>\r\n            <!-- <el-table-column prop=\"name\" label=\"间隔\" align=\"center\">\r\n            </el-table-column> -->\r\n            <el-table-column prop=\"event_desc\" label=\"告警信息\" align=\"center\">\r\n            </el-table-column>\r\n            <el-table-column prop=\"created_at\" label=\"发生时间\" align=\"center\">\r\n            </el-table-column>\r\n          </el-table>\r\n        </div>\r\n      </div>\r\n      <el-pagination @current-change=\"handleCurrentChange\" :current-page=\"page\" :page-size=\"pageSize\"\r\n        layout=\"prev, pager, next\" :total=\"totals\" v-if=\"pageShow\">\r\n      </el-pagination>\r\n    </div>\r\n    <!-- <div style=\"height:40px;width:40px\" class=\"suoxiao\">\r\n        <img src=\"../assets/images/btnFangDa.png\" style=\"height:40px;width:40px\"/>\r\n      </div> -->\r\n    <div class=\"componentShow\" v-if=\"modelOthers\">\r\n      <keep-alive>\r\n        <component :is=\"componentShow\" :ringMainUnit=\"device\"></component>\r\n      </keep-alive>\r\n    </div>\r\n    <!-- 工单统计弹窗 -->\r\n    <div class=\"componentShow\" v-if=\"orderItem != null\">\r\n      <component :is=\"orderShow\" :orderItem=\"orderItem\"></component>\r\n    </div>\r\n\r\n    <!-- 故障跳闸明细 -->\r\n    <div class=\"componentShow\" v-if=\"routeItem != null\">\r\n      <component :is=\"routeShow\" :routeItem=\"routeItem\"></component>\r\n    </div>\r\n\r\n    <!-- 查询配电线路 -->\r\n    <div class=\"componentShow\" style=\"display: block; height: calc(100% - 100px); top: 100px\" v-if=\"lineItem != null\">\r\n      <component :is=\"lineShow\" :lineItem=\"lineItem\"></component>\r\n    </div>\r\n    <audio controls=\"controls\" hidden src=\"../assets/videos/police.wav\" ref=\"audio\"></audio>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport {\r\n  getCompanyInfo,\r\n  getLine,\r\n  getBanzugz,\r\n  getGdtj,\r\n  getDwbzgz,\r\n  getGdsgdzl,\r\n  getPbtyqk,\r\n  getCabinetInfo,\r\n  getCabinetList,\r\n  getfaultReportList,\r\n  getCabinetAlarmList,\r\n} from \"../api/index.js\";\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: \"home\",\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\r\n      enlargeShow: true,\r\n      dataGzList: [\r\n        {\r\n          bz: \"大冈\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"配网二班\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"配网一班\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"尚庄\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"秦南\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"郭猛\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"大纵湖\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"潘黄\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"学富\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"龙冈\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"西区\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n        {\r\n          bz: \"楼王\",\r\n          chbc: 0,\r\n          chcg: 0,\r\n          jd: 0,\r\n          total: 0,\r\n          wchz: 0,\r\n        },\r\n      ], //年故障数组\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        pdxl:'3.4%',\r\n        xlcd:'0.01%',\r\n        pdxl:'3.4%',\r\n        pdxl:'3.4%',\r\n        pdxl:'3.4%',\r\n        pdxl:'3.4%'\r\n      },\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      gongdanList: [\r\n        {\r\n          gd_type_id: \"\",\r\n          gd_type_name: \"频繁停电\",\r\n          total: 0,\r\n        },\r\n        {\r\n          gd_type_id: \"\",\r\n          gd_type_name: \"处理时间长\",\r\n          total: 0,\r\n        },\r\n        {\r\n          gd_type_id: \"\",\r\n          gd_type_name: \"运检类投诉\",\r\n          total: 0,\r\n        },\r\n        {\r\n          gd_type_id: \"\",\r\n          gd_type_name: \"运检类意见\",\r\n          total: 0,\r\n        },\r\n        {\r\n          gd_type_id: \"\",\r\n          gd_type_name: \"民事赔偿\",\r\n          total: 0,\r\n        },\r\n        {\r\n          gd_type_id: \"\",\r\n          gd_type_name: \"多次停电\",\r\n          total: 0,\r\n        },\r\n      ],\r\n\r\n      // 工单\r\n      orderItem: null,\r\n\r\n      orderShow: \"\",\r\n      // 线路故障明细\r\n      routeItem: null,\r\n      routeShow: \"\",\r\n\r\n      // 配电线路\r\n      lineItem: null,\r\n      lineShow: \"\",\r\n      timer: null, //定时器\r\n      emergencyList: [], //告警数据\r\n      rowTime: \"\",\r\n    };\r\n  },\r\n  created() { },\r\n  mounted() {\r\n    // this.beginShowing();\r\n    // 监听浏览器窗口大小变化\r\n    window.onresize = () => {\r\n      clearInterval(this.myTimer);\r\n      this.beginShowing();\r\n    };\r\n    \r\n    this.detailedTwo11()\r\n    this.horizontalChart()\r\n    this.detailedOne()\r\n    this.barCharts()\r\n    this.detailedFive()\r\n    this.shuzihuaCharts()\r\n    this.roseCharts()\r\n     this.detailen1();\r\n    this.handleDate(0);\r\n    let that = this;\r\n\r\n    //历史故障接口\r\n    let faultData = {\r\n      token: localStorage.getItem(\"token\"),\r\n      pageSize: \"500\",\r\n      page: \"1\",\r\n    };\r\n\r\n  },\r\n  // beforeDestroy() {\r\n  //   this.dataDestroy(); // 页面摧毁前，关闭定时器\r\n  // },\r\n  beforeDestroy() {\r\n    // 离开当前路由前的操作\r\n    clearInterval(this.timer);\r\n    this.timer = null;\r\n  },\r\n  methods: {\r\n    routerTo(data) {\r\n      if (data == '盐城地区分布光伏运行监测') {\r\n        this.$router.push(\"/stationBuilding\");\r\n      }\r\n      if (data == '盐城东台区供电所数字化分析') {\r\n        this.$router.push(\"/twentyKV\");\r\n      }\r\n      if (data == '配网工程全过程物资审计') {\r\n        this.$router.push(\"/thirtyFiveKV\");\r\n      }\r\n      if (data == '盐城供电公司配网电能质量管控') {\r\n        this.$router.push(\"/powerQualityControl\");\r\n      }\r\n      if (data == '乡村振兴电力综合指数') {\r\n        this.$router.push(\"/ruralRevitalizationPower\");\r\n      }\r\n      if (data == '两高行业企业污染监测') {\r\n        this.$router.push(\"/enterprisePollutionMonitoring\");\r\n      }\r\n      if (data == '农村生活污水治理设备电量分析') {\r\n        this.$router.push(\"/ruralDomesticSewageTreatment\");\r\n      }\r\n      if (data == '数字化排涝抗旱辅助及检修辅助决策') {\r\n        this.$router.push(\"/digitalFloodDrainageDroughtRelief\");\r\n      }\r\n    },\r\n     detailen1() {\r\n      var fontColor = \"#30eee9\";\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: \"shadow\",\r\n          },\r\n        },\r\n        legend: {\r\n          textStyle: {\r\n            fontSize: 18, //字体大小\r\n            color: \"#ffffff\", //字体颜色\r\n          },\r\n\r\n          data: [\"关联电网事故\", \"关联检修单\"],\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            data: [\r\n              \"10kv北红线124\",\r\n              \"10kv北红线125\",\r\n              \"10kv北红线126\",\r\n              \"10kv北红线127\",\r\n              \"10kv北红线128\",\r\n            ],\r\n            axisLabel: {\r\n              show: true,\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"value\",\r\n            name: \"\",\r\n            axisLabel: {\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"关联电网事故\",\r\n            type: \"bar\",\r\n            itemStyle: {\r\n              color: \"#00ffff\", // 柱状图颜色\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    //班组\r\n    getbanzhu() {\r\n      getBanzugz({\r\n        action: \"detail\",\r\n      }).then((res) => {\r\n        console.log(res, \"班组故障详情\");\r\n        for (let i = 0; i < res.data.data.length; i++) {\r\n          if (res.data.data[i].gz_time_deal) {\r\n            let date = new Date(res.data.data[i].gz_time_deal);\r\n            res.data.data[i].gz_time_deal =\r\n              this.$moment(date).format(\"YYYY-MM-DD HH:mm\");\r\n            // console.log(res.data.data[i].gz_time_deal,'转换后');\r\n          }\r\n          if (res.data.data[i].gz_time) {\r\n            let time = new Date(res.data.data[i].gz_time);\r\n            res.data.data[i].gz_time =\r\n              this.$moment(time).format(\"YYYY-MM-DD HH:mm\");\r\n          }\r\n          this.tableData.push(res.data.data[i]);\r\n        }\r\n      });\r\n    },\r\n    //工单\r\n    getGongdan() {\r\n      getGdtj({ action: \"tongji\" }).then((res) => {\r\n        console.log(res, \"工单统计数据\");\r\n        let dataList = res.data.data;\r\n\r\n        for (let i = 0; i < this.gongdanList.length; i++) {\r\n          for (let j = 0; j < res.data.data.length; j++) {\r\n            if (\r\n              this.gongdanList[i].gd_type_name == res.data.data[j].gd_type_name\r\n            ) {\r\n              this.gongdanList[i].total = res.data.data[j].total;\r\n              this.gongdanList[i].gd_type_id = res.data.data[j].gd_type_id;\r\n            }\r\n          }\r\n        }\r\n        // this.gongdanList = res.data.data;\r\n        this.detailedThree(dataList);\r\n        // this.$nextTick(() => {\r\n        //   this.detailedThree(dataList);\r\n        //   setInterval(() => {\r\n        //     this.doing();\r\n        //   }, 200);\r\n        // });\r\n      });\r\n    },\r\n    // //表格第一行颜色\r\n    rowClass(row, rowIndex) {\r\n      if (row.rowIndex === 0) {\r\n        return \"rowColor0\";\r\n      } else {\r\n        return \"\";\r\n      }\r\n    },\r\n    //切换当前页\r\n    handleCurrentChange(val) {\r\n      this.page = val\r\n      let tableData = [];\r\n      if (this.emergencyList.length != 0) {\r\n        tableData = this.emergencyList;\r\n        if (val == 1) {\r\n          this.alarmInformationData = tableData.slice(0, 10);\r\n          document.getElementsByClassName(\"rowColor0\")[0].style.display = \"\";\r\n        } else if (val == 2) {\r\n          document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n            \"none\";\r\n          this.alarmInformationData = tableData.slice(10, 20);\r\n        } else if (val == 3) {\r\n          this.alarmInformationData = tableData.slice(20, 30);\r\n          document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n            \"none\";\r\n        } else if (val == 4) {\r\n          this.alarmInformationData = tableData.slice(30, 40);\r\n          document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n            \"none\";\r\n        } else if (val == 5) {\r\n          this.alarmInformationData = tableData.slice(40, 50);\r\n          document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n            \"none\";\r\n        }\r\n      } else {\r\n        return false;\r\n      }\r\n    },\r\n    // 线路详情弹窗\r\n    openLineDetail(e) {\r\n      // console.log(e);\r\n      // var line = e + ''\r\n      // console.log(line);\r\n      getLine({ action: \"pdxl\" }).then(({ data }) => {\r\n        console.log(data);\r\n        this.lineShow = \"lineDetail\";\r\n        this.lineItem = data.data;\r\n      });\r\n    },\r\n    // 线路故障跳闸明细弹窗\r\n    rowHandle(e) {\r\n      // console.log(e, \"参数\");\r\n      this.routeItem = e;\r\n      this.routeShow = \"routeDetail\";\r\n      // console.log(this.routeItem,'线路组件名称');\r\n    },\r\n    // 工单统计的弹窗\r\n    openGdDetail(item) {\r\n      this.orderItem = item;\r\n      this.orderShow = \"workOrder\";\r\n    },\r\n    // 鼠标进入表格\r\n    // mouseover() {\r\n    //   clearInterval(this.myTimer);\r\n    // },\r\n    // 鼠标离开表格\r\n    mouseout() {\r\n      this.roll();\r\n    },\r\n    //调用unity方法\r\n    handleUnity(index, item) {\r\n      this.btnActive = index;\r\n      this.$refs.iframe.contentWindow.handleChange(item);\r\n    },\r\n    //选择线路\r\n    selectLine(value) {\r\n      getLine({\r\n        action: \"query\",\r\n        line_code: value,\r\n      }).then((res) => {\r\n        // console.log(res,'选择线路');\r\n        if (res.data.data != 0 && res.data.data != null) {\r\n          this.$refs.iframe.contentWindow.handleChangeLine(\r\n            res.data.data.line_name\r\n          );\r\n        } else if (res.data.data == null) {\r\n          this.$refs.iframe.contentWindow.handleChangeLine(\"\");\r\n        }\r\n      });\r\n    },\r\n    detailedOne() {\r\n    \r\n\r\n      let myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\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          },\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\r\n      myChart.setOption(option);\r\n\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    shuzihuaCharts() {\r\n      let myChart = this.$echarts.init(document.getElementById(\"shuzihua\"));\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        legend: [\r\n          {\r\n            x: \"center\",\r\n            data: [\"平均停电时间(小时)\", \"平均停电频次(次/户)\"],\r\n            textStyle: {\r\n              fontSize: 18,\r\n              color: \"#fff\",\r\n            },\r\n          },\r\n          {\r\n            x: \"center\",\r\n            top: \"5%\",\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            data: [\"2019\", \"2020\", \"2021\", \"2022\"],\r\n            axisPointer: {\r\n              type: \"shadow\",\r\n            },\r\n            axisLabel: {\r\n              color: \"#fff\",\r\n              fontSize: \"18\",\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"value\",\r\n            min: 0,\r\n            max: 5,\r\n            interval: 1,\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            type: \"value\",\r\n            min: 0,\r\n            max: 0.5,\r\n            interval: 0.1,\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: \"平均停电时间(小时)\",\r\n            type: \"bar\",\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              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                { offset: 1, color: \"rgba(240,230,140,.2) \" },\r\n                { offset: 0.5, color: \"rgb(240,230,140,.6)\" },\r\n                { offset: 0, color: \"rgb(240,230,140)\" },\r\n              ]),\r\n              borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n              borderWidth: 0,\r\n            },\r\n            data: [0.13, 0.23, 0.13, 0.23],\r\n          },\r\n          {\r\n            name: \"平均停电频次(次/户)\",\r\n            type: \"bar\",\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              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                { offset: 1, color: \"rgba(65,105,225,.2) \" },\r\n                { offset: 0.5, color: \"rgb(65,105,225,.6)\" },\r\n                { offset: 0, color: \"rgb(65,105,225)\" },\r\n              ]),\r\n              borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n              borderWidth: 0,\r\n            },\r\n            data: [0.23, 0.13, 0.23, 0.13],\r\n          },\r\n          {\r\n            name: \"总时户数\",\r\n            type: \"line\",\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: \"#0080ff\",\r\n                lineStyle: {\r\n                  color: \"#0080ff\",\r\n                },\r\n              },\r\n            },\r\n            data: [4, 3, 2, 4],\r\n          },\r\n          {\r\n            name: \"停电次数\",\r\n            type: \"line\",\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: \"#a6a600\",\r\n                lineStyle: {\r\n                  color: \"#a6a600\",\r\n                },\r\n              },\r\n            },\r\n            data: [2, 3, 4, 3],\r\n          },\r\n          {\r\n            name: \"应采数\",\r\n            type: \"line\",\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: \"#977000\",\r\n                lineStyle: {\r\n                  color: \"#977000\",\r\n                },\r\n              },\r\n            },\r\n            data: [3, 1, 4, 2],\r\n          },\r\n        ],\r\n      };\r\n\r\n      myChart.setOption(option);\r\n\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailedTwo() {\r\n     \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        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        },\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    detailedTwo11() {\r\n      var fontColor = '#30eee9';\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        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        },\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    horizontalChart() {\r\n      var myChart = this.$echarts.init(document.getElementById(\"horizontalChart\"));\r\n          var honorData = [\r\n        {\r\n          name: \"用电量（单位：亿）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        {\r\n          name: \"碳排放量（单位：万）\",\r\n          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n        },\r\n        \r\n      ];\r\n      var honorXAxisData = [\r\n        \"盐都区\",\r\n        \"建湖县\",\r\n        \"射阳县\",\r\n        \"阜宁县\",\r\n        \"滨海县\",\r\n      ];\r\n      // // 设置灰色背景色的长度\r\n      var isMax = 2000;\r\n      var bjData1 = [\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n        isMax,\r\n      ];\r\n      var option = {\r\n        color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"none\",\r\n          },\r\n        },\r\n      \r\n\r\n        legend: {\r\n          right: 5,\r\n          top: \"5%\",\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          itemGap: 15,\r\n          textStyle: {\r\n            color: \"#ACCFFF\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"5%\",\r\n          right: \"5%\",\r\n          bottom: \"5%\",\r\n          top: \"10%\",\r\n          containLabel: true,\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"value\",\r\n            show: false,\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n              formatter: function (value) {\r\n                return value + \"(万元)\";\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"category\",\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              color: \"#6B9DD7\",\r\n              fontSize: 16, // 文字大小\r\n              fontWeight: 400,\r\n              interval: 0,\r\n            },\r\n            offset: 20,\r\n            data: honorXAxisData,\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"用电量（单位：亿）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"inside\",\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 14,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[0].data,\r\n          },\r\n          {\r\n            name: \"碳排放量（单位：万）\",\r\n            type: \"bar\",\r\n            stack: \"zongliang\",\r\n            barWidth: \"35%\",\r\n            zlevel: 10,\r\n            label: {\r\n              normal: {\r\n                show: true,\r\n                position: \"top\",\r\n                formatter: function (params) {\r\n                  console.log(params);\r\n                  // return  params.seriesName + params.value ;\r\n                  return \"完成\" + params.value;\r\n                },\r\n                textStyle: {\r\n                  color: \"#fff\",\r\n                  fontSize: 12,\r\n                },\r\n              },\r\n            },\r\n            data: honorData[1].data,\r\n          },\r\n        ],\r\n      };\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    barCharts() {\r\n      var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\r\n      let value = 18;\r\n      let legendName = ['华北', '华中', '华东', '华南', '东北', '西北'];\r\n      var option = {\r\n        // backgroundColor: '#031845',\r\n        // title:{\r\n        //     text:\"123\",\r\n        //     left:'center',\r\n        //     top:'45%',\r\n        //     textStyle:{\r\n        //         color:\"#FFF\",\r\n        //         fontSize:\"80px\",\r\n\r\n        //     }\r\n        // },\r\n        tooltip: {\r\n          trigger: 'item',\r\n          formatter: \"{b} : {d}% <br/> {c}\"\r\n        },\r\n        //  graphic: {\r\n        //  elements: [\r\n        //         {\r\n        //          type: 'text',\r\n        //          left: 'center', // 相对父元素居中\r\n        //          top: 'center',  // 相对父元素上下的位置\r\n        //          style: {\r\n        //              fill: '#FFF',\r\n        //               text: ['357'],\r\n        //               zlevel:\"100\",\r\n        //               font: '80px Arial Normal',\r\n        //                  }\r\n        //         }]\r\n        //       },\r\n        //  title: {\r\n        //     text:'总考生数',\r\n        //     left:'center',\r\n        //     top:'center',\r\n        //     padding:[24,0],\r\n        //     textStyle:{\r\n        //         color:'#fff',\r\n        //         fontSize:18*scale,\r\n        //         align:'center'\r\n        //     }\r\n        // },\r\n        title: {\r\n        subtext: '59.53万',\r\n          text: '总计',\r\n          x: 'center',\r\n          y: '40%',\r\n          textStyle: {\r\n            fontSize: 24,\r\n            fontWeight: 'normal',\r\n            color: '#00FFFF',\r\n          },\r\n          subtextStyle: {\r\n            fontSize: 28,\r\n            fontWeight: 'normal',\r\n            align: \"center\",\r\n            color: '#CCCCCC'\r\n          },\r\n        },\r\n        series: [{\r\n          type: 'pie',\r\n          radius: ['80', '120'],\r\n          center: ['50%', '50%'],\r\n          color: ['#80C269', '#00FFFF', '#0090F1', '#FFA800', '#4658F6'],\r\n          itemStyle: {\r\n            normal: {\r\n              borderWidth: 5,\r\n              borderColor: '#031845',\r\n            }\r\n          },\r\n          data: [{\r\n            value: 27,\r\n            name: '严重不满人员'\r\n          },\r\n          {\r\n            value: 30,\r\n            name: '关注群体'\r\n          },\r\n          {\r\n            value: 24,\r\n            name: '散居外国人'\r\n          },\r\n          {\r\n            value: 27,\r\n            name: '上访重点人'\r\n          },\r\n          {\r\n            value: 27,\r\n            name: '重点精神病'\r\n          }\r\n\r\n          ],\r\n          labelLine: {\r\n            normal: {\r\n              show: true,\r\n              length: 50,\r\n              length2: 50,\r\n              lineStyle: {\r\n                color: '#CCCCCC',\r\n                width: 2\r\n              }\r\n            }\r\n          },\r\n          label: {\r\n            normal: {\r\n              formatter: '{b|{b}}\\n{hr|}\\n{c|{c}%}',\r\n              rich: {\r\n                b: {\r\n                  fontSize:14,\r\n                  color: '#FFF',\r\n                  align: 'left',\r\n                  padding: 4\r\n                },\r\n                hr: {\r\n                  borderColor: '#CCCCCC',\r\n                  width: '100%',\r\n                  borderWidth: 2,\r\n                  height: 0\r\n                },\r\n                c: {\r\n                  fontSize: 14,\r\n                  align: 'center',\r\n                  padding: 4,\r\n                  color: '#00EDED'\r\n                }\r\n              }\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     roseCharts() {\r\n      var myChart = this.$echarts.init(document.getElementById(\"roseCharts\"));\r\n      var option = {\r\n    color: [\"#EAEA26\", \"#906BF9\", \"#FE5656\", \"#01E17E\", \"#3DD1F9\", \"#FFAD05\"],\r\n    // title: {\r\n    //     text: '网络/安全设备',\r\n    //     left: '60',\r\n    //     top: 0,\r\n    //     textAlign: 'center',\r\n    //     textStyle: {\r\n    //         color: '#fff',\r\n    //         fontSize: 14,\r\n    //         fontWeight: 0\r\n    //     }\r\n    // },\r\n    grid: {\r\n        left: -100,\r\n        top: 50,\r\n        bottom: 10,\r\n        right: 10,\r\n        containLabel: true\r\n    },\r\n    tooltip: {\r\n        trigger: 'item',\r\n        formatter: \"{b} : {c} ({d}%)\"\r\n    },\r\n    legend: {\r\n        type: \"scroll\",\r\n        orient: \"vartical\",\r\n        // x: \"right\",\r\n        top: \"center\",\r\n        right: \"15\",\r\n        // bottom: \"0%\",\r\n        itemWidth: 16,\r\n        itemHeight: 8,\r\n        itemGap: 16,\r\n        textStyle: {\r\n            color: '#A3E2F4',\r\n            fontSize: 12,\r\n            fontWeight: 0\r\n        },\r\n        data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']\r\n    },\r\n    polar: {},\r\n    angleAxis: {\r\n        interval: 1,\r\n        type: 'category',\r\n        data: [],\r\n        z: 10,\r\n        axisLine: {\r\n            show: false,\r\n            lineStyle: {\r\n                color: \"#0B4A6B\",\r\n                width: 1,\r\n                type: \"solid\"\r\n            },\r\n        },\r\n        axisLabel: {\r\n            interval: 0,\r\n            show: true,\r\n            color: \"#0B4A6B\",\r\n            margin: 8,\r\n            fontSize: 16\r\n        },\r\n    },\r\n    radiusAxis: {\r\n        min: 40,\r\n        max: 120,\r\n        interval: 20,\r\n        axisLine: {\r\n            show: false,\r\n            lineStyle: {\r\n                color: \"#0B3E5E\",\r\n                width: 1,\r\n                type: \"solid\"\r\n            },\r\n        },\r\n        axisLabel: {\r\n            formatter: '{value} %',\r\n            show: false,\r\n            padding: [0, 0, 20, 0],\r\n            color: \"#0B3E5E\",\r\n            fontSize: 16\r\n        },\r\n        splitLine: {\r\n            lineStyle: {\r\n                color: \"#0B3E5E\",\r\n                width: 2,\r\n                type: \"solid\"\r\n            }\r\n        }\r\n    },\r\n    calculable: true,\r\n    series: [{\r\n        type: 'pie',\r\n        radius: [\"5%\", \"10%\"],\r\n        hoverAnimation: false,\r\n        labelLine: {\r\n            normal: {\r\n                show: false,\r\n                length: 30,\r\n                length2: 55\r\n            },\r\n            emphasis: {\r\n                show: false\r\n            }\r\n        },\r\n        data: [{\r\n            name: '',\r\n            value: 0,\r\n            itemStyle: {\r\n                normal: {\r\n                    color: \"#0B4A6B\"\r\n                }\r\n            }\r\n        }]\r\n    }, {\r\n        type: 'pie',\r\n        radius: [\"90%\", \"95%\"],\r\n        hoverAnimation: false,\r\n        labelLine: {\r\n            normal: {\r\n                show: false,\r\n                length: 30,\r\n                length2: 55\r\n            },\r\n            emphasis: {\r\n                show: false\r\n            }\r\n        },\r\n        name: \"\",\r\n        data: [{\r\n            name: '',\r\n            value: 0,\r\n            itemStyle: {\r\n                normal: {\r\n                    color: \"#0B4A6B\"\r\n                }\r\n            }\r\n        }]\r\n    },{\r\n        stack: 'a',\r\n        type: 'pie',\r\n        radius: ['20%', '80%'],\r\n        roseType: 'area',\r\n        zlevel:10,\r\n        label: {\r\n            normal: {\r\n                show: true,\r\n                formatter: \"{c}\",\r\n                textStyle: {\r\n                    fontSize: 12,\r\n                },\r\n                position: 'outside'\r\n            },\r\n            emphasis: {\r\n                show: true\r\n            }\r\n        },\r\n        labelLine: {\r\n            normal: {\r\n                show: true,\r\n                length: 20,\r\n                length2: 55\r\n            },\r\n            emphasis: {\r\n                show: false\r\n            }\r\n        },\r\n        data: [{\r\n                value: 10,\r\n                name: 'IDS'\r\n            },\r\n            {\r\n                value: 5,\r\n                name: 'VPN'\r\n            },\r\n            {\r\n                value: 15,\r\n                name: '交换机'\r\n            },\r\n            {\r\n                value: 25,\r\n                name: '防火墙'\r\n            },\r\n            {\r\n                value: 20,\r\n                name: 'WAF'\r\n            },\r\n            {\r\n                value: 35,\r\n                name: '堡垒机'\r\n            }\r\n        ]\r\n    }, ]\r\n}\r\n      myChart.setOption(option);\r\n      window.addEventListener(\"resize\", () => {\r\n        myChart.resize();\r\n      });\r\n    },\r\n    detailedThree(dataList) {\r\n      // console.log(this.threeImg,'图片');\r\n      // var equipment = [dataList.yjlts, dataList.yjlyj];\r\n      var that = this;\r\n      // console.log(that,'指向');\r\n      var colorList = [\r\n        \"#0090ff\",\r\n        \"#06d3c4\",\r\n        \"#66b0ed\",\r\n        \"#7cb79d\",\r\n        \"#2361b4\",\r\n        \"rgb(198,123,244)\",\r\n      ];\r\n      var colorList1 = [\"rgb(198,123,244)\", \"#2361b4\"];\r\n      // 饼图数据\r\n      var threeList = dataList.map((ele) => {\r\n        return { name: ele.gd_type_name, value: ele.total };\r\n      });\r\n      // console.log(threeList, \"饼图数据\");\r\n      // var legendData = dataList.concat(\r\n      //   {\r\n      //     value: equipment[0],\r\n      //     name: \"运检类投诉\",\r\n      //   },\r\n      //   {\r\n      //     value: equipment[1],\r\n      //     name: \"运检类意见\",\r\n      //   }\r\n      // );\r\n      this.myChartBin = this.$echarts.init(\r\n        document.getElementById(\"detailedThree\")\r\n      );\r\n      // var graphicList = [];\r\n      // legendData.forEach((ele, index) => {\r\n      //   if (index <= 2) {\r\n      //     graphicList.push({\r\n      //       type: \"image\",\r\n      //       style: {\r\n      //         image: this.threeImg,\r\n      //         width: 164,\r\n      //         height: 41,\r\n      //         x: 250,\r\n      //         y: 55 * (index + 1),\r\n      //       },\r\n      //     });\r\n      //   } else {\r\n      //     graphicList.push({\r\n      //       type: \"image\",\r\n      //       style: {\r\n      //         image: this.threeImg,\r\n      //         width: 164,\r\n      //         height: 41,\r\n      //         x: 424,\r\n      //         y: 55 * (index - 2),\r\n      //       },\r\n      //     });\r\n      //   }\r\n      // });\r\n      this.option = {\r\n        borderColor: \"none\",\r\n\r\n        tooltip: {\r\n          formatter: function (param) {\r\n            if (param.data.type == null) {\r\n              return param.data.name + \":\" + param.value + \"个\";\r\n            } else {\r\n              return param.data.name + \":\" + param.value + \"个\";\r\n            }\r\n          },\r\n        },\r\n\r\n        legend: {\r\n          icon: \"pin\",\r\n          // height: 90,\r\n          top: 20,\r\n          show: false,\r\n          // bottom:0,\r\n          // itemGap: 40,\r\n          // lineHeight: 80,\r\n          //  padding: [30, 0, 30, 0],\r\n          // right: '20%',\r\n          // orient: \"vertical\", //垂直显示\r\n          x: \"center\", //延Y轴居中\r\n          data: dataList.map((ele) => {\r\n            return ele.gd_type_name;\r\n          }),\r\n          textStyle: {\r\n            color: \"#ffffff\",\r\n            fontSize: 15,\r\n\r\n            // width:20,\r\n            // height:60,\r\n          },\r\n        },\r\n        series: [\r\n          {\r\n            name: \"\",\r\n            type: \"pie\",\r\n            radius: [0, \"70%\"],\r\n            center: [\"50%\", \"50%\"],\r\n            startAngle: 60, //默认角度\r\n            label: {\r\n              position: \"inner\",\r\n              show: false,\r\n            },\r\n\r\n            itemStyle: {\r\n              normal: {\r\n                borderColor: \"none\",\r\n                borderWidth: 2,\r\n                fontSize: 16,\r\n                color: function (params) {\r\n                  return colorList[params.dataIndex];\r\n                },\r\n              },\r\n            },\r\n\r\n            selectedMode: \"single\",\r\n            data: threeList,\r\n          },\r\n          // {\r\n          //   name: \"运检类\",\r\n          //   type: \"pie\",\r\n          //   radius: [\"70%\", \"80%\"],\r\n          //   center: [\"20%\", \"50%\"],\r\n          //   startAngle: 30,\r\n          //   itemStyle: {\r\n          //     normal: {\r\n          //       fontSize: 16,\r\n          //       color: function (params) {\r\n          //         return colorList1[params.dataIndex];\r\n          //       },\r\n          //       // color:'#F4C907',\r\n          //     },\r\n          //   },\r\n          //   label: {\r\n          //     normal: {\r\n          //       formatter: function (params) {\r\n          //         return params.data.name + \":\" + params.data.type + \"个\";\r\n          //       },\r\n          //       color: \"auto\",\r\n          //       show: false,\r\n          //       fontSize: 16,\r\n          //     },\r\n          //   },\r\n\r\n          //   data: [\r\n          //     {\r\n          //       value: equipment[0],\r\n          //       name: \"运检类投诉\",\r\n          //       type: equipment[0],\r\n          //     },\r\n          //     {\r\n          //       value: equipment[1],\r\n          //       name: \"运检类意见\",\r\n          //       type: equipment[1],\r\n          //     },\r\n          //   ],\r\n          //   animation: false,\r\n          // },\r\n        ],\r\n      };\r\n      this.myChartBin.setOption(this.option);\r\n      window.addEventListener(\"resize\", () => {\r\n        this.myChartBin.resize();\r\n      });\r\n    },\r\n    doing() {\r\n      this.option.series[0].startAngle = this.option.series[0].startAngle - 5;\r\n      this.option.series[1].startAngle = this.option.series[1].startAngle - 5;\r\n      this.myChartBin.setOption(this.option);\r\n    },\r\n    detailedFour(dataList) {\r\n      let yearBzData = [];\r\n      let yearChcg = [];\r\n      let yearChbc = [];\r\n      let yearWchz = [];\r\n      let yearJieDi = [];\r\n      let yearFenJi = []\r\n      for (let i = 0; i < dataList.length; i++) {\r\n        yearBzData.push(dataList[i].bz);\r\n        yearChcg.push(dataList[i].chcg);\r\n        yearChbc.push(dataList[i].chbc);\r\n        yearWchz.push(dataList[i].wchz);\r\n        yearJieDi.push(dataList[i].jd);\r\n        yearFenJi.push(dataList[i].fjbh)\r\n      }\r\n      // console.log(yearJieDi,'接地数据');\r\n      let that = this;\r\n      let myChart = this.$echarts.init(document.getElementById(\"detailedFour\"));\r\n      var option = {\r\n        tooltip: {\r\n          axisPointer: {\r\n            type: \"shadow\",\r\n            textStyle: {\r\n              color: \"#fff\",\r\n              fontSize: 16,\r\n            },\r\n          },\r\n        },\r\n        grid: {\r\n          borderWidth: 0,\r\n          top: 30,\r\n          bottom: \"17%\",\r\n          left: \"6%\",\r\n          right: \"6%\",\r\n          textStyle: {\r\n            color: \"#fff\",\r\n          },\r\n        },\r\n        legend: {\r\n          icon: \"rect\",\r\n          right: \"4%\",\r\n          textStyle: {\r\n            color: \"#ffffff\",\r\n          },\r\n          data: [\"重合成功\", \"重合不成\", \"无重合闸\", \"接地\", \"分级保护\"],\r\n        },\r\n        calculable: true,\r\n        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            trigger: \"axis\",\r\n            axisLine: {\r\n              show: false,\r\n              lineStyle: {\r\n                color: \"#fff\",\r\n                fontSize: 16,\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            splitArea: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              interval: 0,\r\n              fontSize: 14,\r\n              rotate: 30,\r\n            },\r\n            data: yearBzData,\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: \"value\",\r\n            splitLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: \"rgb(83,83,83)\",\r\n                fontSize: 16,\r\n              },\r\n            },\r\n            axisLine: {\r\n              lineStyle: {\r\n                color: \"#fff\",\r\n                fontSize: 16,\r\n              },\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              interval: 0,\r\n            },\r\n            splitArea: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"重合成功\",\r\n            type: \"bar\",\r\n            stack: \"Total1\",\r\n            barMaxWidth: 15,\r\n            barGap: \"10%\",\r\n            label: {\r\n              show: true,\r\n              formatter: function (params) {\r\n                if (params.value == 0) {\r\n                  return \"\";\r\n                } else {\r\n                  return params.value;\r\n                }\r\n              },\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: \"rgba(194,190,190,1)\",\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(194,190,190,0)\",\r\n                  },\r\n                ]),\r\n                borderColor: new that.$echarts.graphic.LinearGradient(\r\n                  0,\r\n                  0,\r\n                  0,\r\n                  1,\r\n                  [\r\n                    {\r\n                      offset: 0,\r\n                      color: \"rgba(194,190,190,1)\",\r\n                    },\r\n                    {\r\n                      offset: 1,\r\n                      color: \"rgba(194,190,190,0)\",\r\n                    },\r\n                  ]\r\n                ),\r\n              },\r\n            },\r\n            data: yearChcg,\r\n          },\r\n          {\r\n            name: \"重合不成\",\r\n            type: \"bar\",\r\n            barMaxWidth: 15,\r\n            stack: \"Total1\",\r\n            label: {\r\n              show: true,\r\n              formatter: function (params) {\r\n                if (params.value == 0) {\r\n                  return \"\";\r\n                } else {\r\n                  return params.value;\r\n                }\r\n              },\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: \"rgba(86,254,226,1)\",\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(86,254,226,0)\",\r\n                  },\r\n                ]),\r\n                borderColor: new that.$echarts.graphic.LinearGradient(\r\n                  0,\r\n                  0,\r\n                  0,\r\n                  1,\r\n                  [\r\n                    {\r\n                      offset: 0,\r\n                      color: \"rgba(86,254,226,1)\",\r\n                    },\r\n                    {\r\n                      offset: 1,\r\n                      color: \"rgba(86,254,226,0)\",\r\n                    },\r\n                  ]\r\n                ),\r\n              },\r\n            },\r\n            data: yearChbc,\r\n          },\r\n          {\r\n            name: \"无重合闸\",\r\n            type: \"bar\",\r\n            barMaxWidth: 15,\r\n            stack: \"Total1\",\r\n            label: {\r\n              show: true,\r\n              formatter: function (params) {\r\n                if (params.value == 0) {\r\n                  return \"\";\r\n                } else {\r\n                  return params.value;\r\n                }\r\n              },\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: \"rgba(237,125,49,1)\",\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(237,125,49,0)\",\r\n                  },\r\n                ]),\r\n                borderColor: new that.$echarts.graphic.LinearGradient(\r\n                  0,\r\n                  0,\r\n                  0,\r\n                  1,\r\n                  [\r\n                    {\r\n                      offset: 0,\r\n                      color: \"rgba(237,125,49,1)\",\r\n                    },\r\n                    {\r\n                      offset: 1,\r\n                      color: \"rgba(237,125,49,0)\",\r\n                    },\r\n                  ]\r\n                ),\r\n                barBorderRadius: 0,\r\n              },\r\n            },\r\n            data: yearWchz,\r\n          },\r\n          {\r\n            name: \"接地\",\r\n            type: \"bar\",\r\n            barMaxWidth: 15,\r\n            stack: \"Total1\",\r\n            label: {\r\n              show: true,\r\n              formatter: function (params) {\r\n                if (params.value == 0) {\r\n                  return \"\";\r\n                } else {\r\n                  return params.value;\r\n                }\r\n              },\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: \"rgba(35,160,247,1)\",\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(35,160,247,0)\",\r\n                  },\r\n                ]),\r\n                borderColor: new that.$echarts.graphic.LinearGradient(\r\n                  0,\r\n                  0,\r\n                  0,\r\n                  1,\r\n                  [\r\n                    {\r\n                      offset: 0,\r\n                      color: \"rgba(35,160,247,1)\",\r\n                    },\r\n                    {\r\n                      offset: 1,\r\n                      color: \"rgba(35,160,247,0)\",\r\n                    },\r\n                  ]\r\n                ),\r\n                barBorderRadius: 0,\r\n              },\r\n            },\r\n            data: yearJieDi,\r\n          },\r\n          {\r\n            name: \"分级保护\",\r\n            type: \"bar\",\r\n            barMaxWidth: 15,\r\n            stack: \"Total1\",\r\n            label: {\r\n              show: true,\r\n              formatter: function (params) {\r\n                if (params.value == 0) {\r\n                  return \"\";\r\n                } else {\r\n                  return params.value;\r\n                }\r\n              },\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: \"rgba(156,73,200,1)\",\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(156,73,200,0)\",\r\n                  },\r\n                ]),\r\n                borderColor: new that.$echarts.graphic.LinearGradient(\r\n                  0,\r\n                  0,\r\n                  0,\r\n                  1,\r\n                  [\r\n                    {\r\n                      offset: 0,\r\n                      color: \"rgba(156,73,200,1)\",\r\n                    },\r\n                    {\r\n                      offset: 1,\r\n                      color: \"rgba(156,73,200,0)\",\r\n                    },\r\n                  ]\r\n                ),\r\n                barBorderRadius: 0,\r\n              },\r\n            },\r\n            data: yearFenJi,\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    detailedFive() {\r\n     \r\n      let myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\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          },\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    //报警详情信息弹窗\r\n    enlargeBtn(index) {\r\n      let that = this;\r\n      this.pageShow = false\r\n      if (index == 0) {\r\n        //   let endDate = this.$moment(new Date())\r\n        //   .format(\"YYYY-MM-DD hh:mm:ss\");\r\n        // let startDate =  this.$moment(new Date()).subtract(1,'h').format('YYYY-MM-DD hh:mm:ss')\r\n        //   this.page = 1;\r\n        //   let cabData = {\r\n        //     token: localStorage.getItem(\"token\"),\r\n        //     pageSize: this.pageSize,\r\n        //     page: this.page,\r\n        //     sn: \"\",\r\n        //     startDate: startDate,\r\n        //     endDate: endDate,\r\n        //   };\r\n        //   getCabinetAlarmList(cabData).then((res) => {\r\n        //     if (res.data.data.data != null) {\r\n        //       this.totals = res.data.data.total;\r\n        //       this.alarmInformationData = res.data.data.data;\r\n        //     }\r\n        //   });\r\n        this.$refs.audio.currentTime = 0; //从头开始播放提示音\r\n        this.$nextTick(() => {\r\n          this.$refs.audio.play();\r\n        });\r\n        this.alarmInformationShow = true;\r\n        this.$nextTick(() => {\r\n          this.pageShow = true\r\n        })\r\n        this.realTimeAlarmShow = false;\r\n        this.handleCurrentChange(1);\r\n      } else if (index == 1) {\r\n        this.enlargeShow = false;\r\n        // this.$refs.iframe.contentWindow.fullscreen(1);\r\n        document.getElementById(\"left\").style.display = \"none\";\r\n        document.getElementById(\"right\").style.display = \"none\";\r\n        document.getElementById(\"middle\").style.width = \"100%\";\r\n        document.getElementById(\"middle\").style.height = \"100%\";\r\n        document.getElementById(\"detailed\").style.display = \"none\";\r\n        document.getElementById(\"threeModel\").style.height = \"100%\";\r\n        document.getElementById(\"threeModel\").style.width = \"100%\";\r\n      }\r\n    },\r\n    //报警详情信息弹窗\r\n    enlargeBtn1(index) {\r\n      this.pageShow = false\r\n      if (index == 0) {\r\n        // this.$refs.audio.currentTime = 0; //从头开始播放提示音\r\n        // this.$refs.audio.play();\r\n        // this.alarmInformationShow = true;\r\n        // this.realTimeAlarmShow = false;\r\n        this.$refs.audio.currentTime = 0; //从头开始播放提示音\r\n        this.$nextTick(() => {\r\n          this.$refs.audio.play();\r\n        });\r\n        this.alarmInformationShow = true;\r\n        this.$nextTick(() => {\r\n          this.pageShow = true\r\n        })\r\n        this.realTimeAlarmShow = false;\r\n        this.handleCurrentChange(1);\r\n      } else if (index == 1) {\r\n        this.enlargeShow = true;\r\n        // this.$refs.iframe.contentWindow.fullscreen(1);\r\n        document.getElementById(\"left\").style.display = \"flex\";\r\n        document.getElementById(\"left\").style.width = \"17.18%\";\r\n        document.getElementById(\"right\").style.display = \"flex\";\r\n        document.getElementById(\"right\").style.width = \"17.18%\";\r\n        document.getElementById(\"middle\").style.width = \"55.7%\";\r\n        document.getElementById(\"middle\").style.height = \"100%\";\r\n        document.getElementById(\"detailed\").style.display = \"flex\";\r\n        document.getElementById(\"detailed\").style.height = \"350px\";\r\n      }\r\n    },\r\n    handleClose() {\r\n      this.alarmInformationShow = false;\r\n      this.$refs.audio.pause();\r\n      this.page = 1;\r\n      this.totals = 0;\r\n    },\r\n    handleDate(index) {\r\n      this.currentIndex = index;\r\n      // if (index == 0) {\r\n      //周配变停运\r\n      getPbtyqk({\r\n        action: index == 0 ? \"week\" : \"month\",\r\n      }).then((res) => {\r\n        let dataPbty = [];\r\n        dataPbty = res.data.data;\r\n        this.detailedFive(dataPbty);\r\n        let dataPb = [];\r\n        let dataCf = [];\r\n        for (let i = 0; i < dataPbty.length; i++) {\r\n          dataPb.push(dataPbty[i].pbsl);\r\n          dataCf.push(dataPbty[i].cftytc);\r\n        }\r\n        this.topContent[0].count = dataPb.reduce((x, y) => x + y);\r\n        this.topContent[1].count = dataCf.reduce((x, y) => x + y);\r\n        let pbCount =\r\n          (this.topContent[1].count / this.topContent[0].count) * 100;\r\n        let pbCountString = pbCount.toString();\r\n        if (pbCountString.indexOf(\".\") != -1) {\r\n          this.topContent[2].count =\r\n            pbCountString.substring(0, pbCountString.indexOf(\".\") + 3) + \"%\";\r\n        } else {\r\n          this.topContent[2].count = pbCountString + \"%\";\r\n        }\r\n      });\r\n      // }else if (index == 1) {\r\n      //   //月配变停运\r\n      //   getPbtyqk({\r\n      //     action:\"month\"\r\n      //   }).then((res)=>{\r\n      //     let dataPbty = [];\r\n      //     dataPbty = res.data.data\r\n      //     this.detailedFive(dataPbty);\r\n      //     let dataPb = [];\r\n      //     let dataCf = [];\r\n      //     for (let i = 0; i < dataPbty.length; i++) {\r\n      //       dataPb.push(dataPbty[i].pbsl);\r\n      //       dataCf.push(dataPbty[i].cftytc);\r\n      //     }\r\n      //     this.topContent[0].count = dataPb.reduce((x, y) => x + y)\r\n      //     this.topContent[1].count = dataCf.reduce((x, y) => x + y)\r\n      //      let pbCount =  (this.topContent[1].count/this.topContent[0].count)*100\r\n      //     let pbCountString = pbCount.toString()\r\n      //     if (pbCountString.indexOf(\".\") != -1) {\r\n      //       this.topContent[2].count =  pbCountString.substring(0,pbCountString.indexOf(\".\")+3) + '%'\r\n      //     }else{\r\n      //     this.topContent[2].count = pbCountString +'%'\r\n      //     }\r\n      //   })\r\n      // }\r\n    },\r\n    addColor(index) {\r\n      if (this.currentIndex == index) {\r\n        return { active: this.acolor };\r\n      }\r\n    },\r\n  },\r\n  watch: {\r\n    //监听内容\r\n    value(newVal, oldVal) {\r\n      if (newVal != oldVal && newVal != \"\") {\r\n        this.selectLine(newVal);\r\n      } else if (newVal == \"\") {\r\n        this.selectLine(\"\");\r\n        this.value = \"\";\r\n      }\r\n    },\r\n    rowTime: {\r\n      deep: true,\r\n      handler(newVal, oldVal) {\r\n        console.log(newVal, oldVal, \"pppppppppppppppp\");\r\n        if (newVal != oldVal && newVal != \"\" && oldVal != \"\") {\r\n          this.enlargeBtn(0);\r\n        }\r\n      },\r\n    },\r\n  },\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}\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    // width: 604px;\r\n    width: 17.18%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: space-between;\r\n\r\n    &>div {\r\n      width: 100%;\r\n      background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n      position: relative;\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: 21px;\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\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: 262px;\r\n          display: flex;\r\n          flex-flow: column nowrap;\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,\r\n                    rgb(86, 244, 254),\r\n                    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   \r\n      #detailedTwo1 {\r\n        //   width: 100%;\r\n        //   height: calc(100% - 52px);\r\n        width: 100%;\r\n        height: calc(100% - 200px);\r\n      }\r\n\r\n      #horizontalChart {\r\n        //   width: 100%;\r\n        //   height: calc(100% - 52px);\r\n        width: 100%;\r\n        height: calc(100% - 150px);\r\n      }\r\n   \r\n      #barCharts {\r\n        //   width: 100%;\r\n        //   height: calc(100% - 52px);\r\n        width: 60%;\r\n        height: calc(100% - 200px);\r\n        position: absolute;\r\n        top: 28%;\r\n        left: 33%;\r\n      }\r\n    }\r\n  }\r\n\r\n  .left1 {\r\n    // width: 604px;\r\n    width: 17.18%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: space-between;\r\n\r\n    &>div {\r\n      width: 100%;\r\n      background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n      background-size: 100% 100%;\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: 21px;\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\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: 262px;\r\n          display: flex;\r\n          flex-flow: column nowrap;\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,\r\n                    rgb(86, 244, 254),\r\n                    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\r\n      #detailedTwo1 {\r\n        width: 100%;\r\n        height: calc(100% - 52px);\r\n      }\r\n   #detailedOne {\r\n      width: 100%;\r\n      height: calc(100% - 200px);\r\n    }\r\n      #horizontalChart {\r\n        //   width: 100%;\r\n        //   height: calc(100% - 52px);\r\n        width: 100%;\r\n        height: calc(100% - 200px);\r\n      }\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/02/地图弹窗三个数据外框.png\") no-repeat;\r\n      background-size: 100%;\r\n      float: right;\r\n      width: 40vh;\r\n      height: 25vh;\r\n      position: relative;\r\n      top: 5vh;\r\n      right: 1vh;\r\n      .contents {\r\n        padding: 10px 10px 10px 10px;\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        .lines {\r\n          width: 100%;\r\n          display: flex;\r\n          flex-flow: column nowrap;\r\n          background: url(\"../assets/02/弹窗里的小框子.png\") no-repeat;\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            float: left;\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        }\r\n      }\r\n    }\r\n    .imgboxtwo {\r\n      padding: 0 0 0 20px;\r\n      background: url(\"../assets/02/地图弹窗四个内容的框.png\") no-repeat;\r\n      background-size: 100%;\r\n      float: left;\r\n      width: 40vh;\r\n      height: 25vh;\r\n      position: relative;\r\n      top: 52vh;\r\n      left: 30vh;\r\n      display: flex;\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          h5 {\r\n            float: left;\r\n          }\r\n          span {\r\n            font-size: 30px;\r\n          }\r\n          width: 49.5%;\r\n          //高度调整\r\n          height: 49%;\r\n          list-style: none;\r\n          font-size: 24px;\r\n          color: #fff;\r\n          background: url(\"../assets/02/弹窗里的小框子.png\") no-repeat;\r\n        }\r\n      }\r\n    }\r\n\r\n    .map {\r\n      background: url(\"../assets/indexN/地图.png\") no-repeat;\r\n      vertical-align: middle;\r\n      display: table-cell;\r\n      text-align: center;\r\n      margin-left: -20%;\r\n    }\r\n  }\r\n\r\n\r\n  .right {\r\n    // width: 604px;\r\n    width: 17.18%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: space-between;\r\n    \r\n    &>div {\r\n      width: 100%;\r\n      background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n     position: relative;\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: 21px;\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      .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: 262px;\r\n          display: flex;\r\n          flex-flow: column nowrap;\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,\r\n                    rgb(86, 244, 254),\r\n                    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    }\r\n\r\n    .one {\r\n      .top {\r\n        width: 100%;\r\n        height: 10%;\r\n        display: flex;\r\n        justify-content: space-around;\r\n        flex-direction: row;\r\n        align-items: center;\r\n\r\n        .topContent {\r\n          width: 30%;\r\n          display: flex;\r\n          justify-content: flex-start;\r\n          align-items: center;\r\n          white-space: nowrap;\r\n        }\r\n      }\r\n    }\r\n\r\n    #detailedThree {\r\n      width: 100%;\r\n      // height: calc(100% - 52px);\r\n      height: 100%;\r\n    }\r\n\r\n    #detailedTwo {\r\n      width: 100%;\r\n      height: calc(100% - 52px);\r\n    }\r\n\r\n    #detailedFive {\r\n      width: 100%;\r\n      height: calc(100% - 150px);\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\r\n    &>div {\r\n      width: 100%;\r\n      background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n    position: relative;\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: 21px;\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      .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: 262px;\r\n          display: flex;\r\n          flex-flow: column nowrap;\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,\r\n                    rgb(86, 244, 254),\r\n                    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    }\r\n  #detailen {\r\n      width: 100%;\r\n      height: calc(100% - 150px);\r\n    }\r\n    #shuzihua {\r\n      width: 100%;\r\n      height: calc(100% - 150px);\r\n    }\r\n    .one {\r\n      .top {\r\n        width: 100%;\r\n        height: 10%;\r\n        display: flex;\r\n        justify-content: space-around;\r\n        flex-direction: row;\r\n        align-items: center;\r\n\r\n        .topContent {\r\n          width: 30%;\r\n          display: flex;\r\n          justify-content: flex-start;\r\n          align-items: center;\r\n          white-space: nowrap;\r\n        }\r\n      }\r\n    }\r\n\r\n    #detailedThree {\r\n      width: 100%;\r\n      // height: calc(100% - 52px);\r\n      height: 100%;\r\n    }\r\n\r\n    #detailedTwo {\r\n      width: 100%;\r\n      height: calc(100% - 52px);\r\n    }\r\n\r\n    #detailedFive {\r\n      width: 100%;\r\n      height: calc(100% - 150px);\r\n    }\r\n  }\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(to bottom,\r\n        rgb(255, 255, 255),\r\n        rgb(123, 247, 245));\r\n         img {\r\n    margin: 20px;\r\n  }\r\n  }\r\n\r\n  //弹窗样式\r\n  .componentShow {\r\n    width: 100%;\r\n    height: 100%;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: 111;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: rgba(0, 0, 0, 0.8);\r\n  }\r\n\r\n  .realTimeAlarm {\r\n    width: 517px;\r\n    height: 136px;\r\n    position: fixed;\r\n    left: 0;\r\n    right: 0;\r\n    margin: 0 auto;\r\n    top: 40%;\r\n    background: url(\"../assets/images/realTimeAlarmKuang.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    .content {\r\n      color: #ffffff;\r\n      width: 75%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-evenly;\r\n      margin-top: 4%;\r\n    }\r\n  }\r\n\r\n  .alarmInformation {\r\n    width: 900px;\r\n    height: 380px;\r\n    position: fixed;\r\n    left: 0;\r\n    right: 0;\r\n    margin: 0 auto;\r\n    top: 28%;\r\n    background: url(\"../assets/images/baojingxinxiKuang.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    padding: 10px 13px;\r\n\r\n    ::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n\r\n    .top {\r\n      height: 10%;\r\n      width: 91%;\r\n      display: flex;\r\n      align-content: flex-start;\r\n      justify-content: space-between;\r\n\r\n      .title {\r\n        font-size: 20px;\r\n        font-weight: 900;\r\n        color: transparent;\r\n        align-items: center;\r\n        display: flex;\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        background-image: linear-gradient(to bottom,\r\n            rgb(255, 255, 255),\r\n            rgb(86, 244, 254));\r\n      }\r\n    }\r\n\r\n    .content {\r\n      height: 82%;\r\n      width: 100%;\r\n      overflow: auto;\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          height: 48px;\r\n          background: url(\"../assets/images/tableBg.png\") no-repeat;\r\n          background-size: 100% 100%;\r\n        }\r\n\r\n        /deep/ .el-table__header th {\r\n          border: none;\r\n          padding: 0;\r\n          height: 40px;\r\n\r\n          .cell {\r\n            height: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-around;\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          color: #fff !important;\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        }\r\n\r\n        /deep/ .el-table th.el-table__cell>.cell {\r\n          color: #ffffff;\r\n        }\r\n\r\n        /deep/.el-table .el-table__cell {\r\n          padding: 3px 0;\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\r\n        .el-table::before {\r\n          background-color: transparent;\r\n        }\r\n\r\n        ::v-deep .el-table .el-table__body tr.el-table__row td {\r\n          background: rgba(79, 218, 255, 0.1) !important;\r\n        }\r\n\r\n        ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {\r\n          background: rgba(79, 218, 255, 0.06) !important;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .dateSelect {\r\n    display: flex;\r\n    font-size: 12px;\r\n    background: url(\"../assets/images/dateKuang.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n    height: 25px;\r\n    width: 61px;\r\n    align-items: center;\r\n  }\r\n\r\n  .active {\r\n    width: 32px;\r\n    height: 25px;\r\n    color: rgb(78, 230, 207);\r\n    background: url(\"../assets/images/dateAction.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n    line-height: 26px;\r\n  }\r\n}\r\n\r\n.suoxiao {\r\n  position: absolute;\r\n  bottom: 0;\r\n  right: 0;\r\n}\r\n\r\n// }\r\n</style>\r\n<style lang=\"less\" scoped>\r\n.three {\r\n  .three-content {\r\n    width: 100%;\r\n    height: calc(100% - 52px);\r\n    display: flex;\r\n\r\n    .three-left {\r\n      width: 40%;\r\n      height: 100%;\r\n    }\r\n\r\n    .three-right {\r\n      width: 60%;\r\n      height: 100%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n\r\n      ul {\r\n        width: 100%;\r\n\r\n        li {\r\n          width: 164px;\r\n          height: 41px;\r\n          margin-top: 15px;\r\n          background-image: url(../assets/images/pieBorder.png);\r\n          float: left;\r\n          color: #fff;\r\n          line-height: 41px;\r\n          font-size: 18px;\r\n        }\r\n\r\n        li:nth-child(2n) {\r\n          margin-left: 10px;\r\n        }\r\n      }\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: 262px;\r\n          display: flex;\r\n          flex-flow: column nowrap;\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,\r\n                    rgb(86, 244, 254),\r\n                    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      }\r\n        #roseCharts {\r\n        //   width: 100%;\r\n        //   height: calc(100% - 52px);\r\n        width: 60%;\r\n        height: calc(100% - 200px);\r\n        position: absolute;\r\n        top: 28%;\r\n        left: 33%;\r\n      }\r\n    \r\n}\r\n\r\n.selectChange {\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n\r\n  .el-select {\r\n    margin-left: -44px;\r\n\r\n    /deep/ .el-input__inner {\r\n      background: url(\"../assets/images/selectCard.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n      border: none;\r\n      padding-left: 58px;\r\n    }\r\n\r\n    /deep/ .el-input__prefix,\r\n    /deep/ .el-input__suffix {\r\n      position: absolute;\r\n      top: 0;\r\n      -webkit-transition: all 0.3s;\r\n      height: 100%;\r\n      text-align: center;\r\n      margin-right: 17px;\r\n    }\r\n\r\n    /deep/ .el-input__inner::-webkit-input-placeholder {\r\n      color: rgb(78, 230, 207); // 初始化的文字颜色\r\n    }\r\n\r\n    /deep/ .el-input__inner {\r\n      color: rgb(78, 230, 207);\r\n    }\r\n  }\r\n}\r\n\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</style>"]}]}