{"remainingRequest":"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":1689560886124},{"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":["\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// 工单统计弹窗组件\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      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    this.detailedTwo11()\r\n    this.horizontalChart()\r\n    this.barCharts()\r\n    // 盐都区供电公司概况\r\n    getCompanyInfo().then((res) => {\r\n      // console.log(res,'....');\r\n      this.CompanyInfo = res.data.data;\r\n    });\r\n\r\n    // 查询总线路\r\n    getLine({ action: \"all\" }).then((res) => {\r\n      if (res.data != \"\") {\r\n        this.options = Object.keys(res.data.data).map((item, index) => {\r\n          return {\r\n            value: res.data.data[index].line_code,\r\n            label: res.data.data[index].line_name,\r\n          };\r\n        });\r\n      }\r\n    });\r\n    //周查询班组\r\n    this.getbanzhu();\r\n    this.timer = window.setInterval(() => {\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    }, 60000);\r\n    //工单统计action:'tongji'\r\n    this.getGongdan();\r\n    this.timer = window.setInterval(() => {\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    }, 60000);\r\n\r\n    //年度查询班组\r\n    getBanzugz({\r\n      action: \"year\",\r\n    }).then((res) => {\r\n      console.log(res, \"年数据\");\r\n      this.dataGzList = res.data.data;\r\n      // console.log(this.dataGzList,'年度查询班组数据');\r\n      for (let i = 0; i < this.dataGzList.length; i++) {\r\n        for (let j = 0; j < res.data.data.length; j++) {\r\n          if (this.dataGzList[i].bz == res.data.data[j].bz) {\r\n            this.dataGzList[i].chbc = res.data.data[j].chbc;\r\n            this.dataGzList[i].chcg = res.data.data[j].chcg;\r\n            this.dataGzList[i].jd = res.data.data[j].jd;\r\n            this.dataGzList[i].total = res.data.data[j].total;\r\n            this.dataGzList[i].wchz = res.data.data[j].wchz;\r\n          }\r\n        }\r\n      }\r\n      this.detailedFour(this.dataGzList);\r\n    });\r\n    //本周故障\r\n    getDwbzgz().then((res) => {\r\n      let dataBzgz = [];\r\n      dataBzgz = res.data.data;\r\n      this.detailedOne(dataBzgz);\r\n    });\r\n    //供电质量统计\r\n    getGdsgdzl().then((res) => {\r\n      let dataGdzl = [];\r\n      dataGdzl = res.data.data;\r\n      //   this.detailedTwo(dataGdzl);\r\n    });\r\n    // //配变停运\r\n    // getPbtyqk({\r\n    //   action:\"week\"\r\n    // }).then((res)=>{\r\n    //   let dataPbty = [];\r\n    //   dataPbty = res.data.data\r\n    //   console.log(dataPbty,'dataPbty');\r\n    //   this.detailedFive(dataPbty);\r\n    //   let dataPb = [];\r\n    //   let dataCf = [];\r\n    //   let dataCfl = [];\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    //     dataCfl.push(dataPbty[i].pbcftyl)\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    this.handleDate(0);\r\n    let that = this;\r\n    window.addEventListener(\"message\", function (e) {\r\n      var res = e.data;\r\n      if (res.val != null) {\r\n        that.modelOthers = true;\r\n        that.componentShow = \"ringMainUnit\";\r\n        that.device = res.val;\r\n      }\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    getfaultReportList(faultData).then((res) => {\r\n      // this.alarmInformationData = res.data.data.data;\r\n    });\r\n    window.setInterval(() => {\r\n      let endDate = this.$moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\");\r\n      let startDate = this.$moment(new Date())\r\n        .subtract(1, \"h\")\r\n        .format(\"YYYY-MM-DD HH:mm:ss\");\r\n      let cabData = {\r\n        token: localStorage.getItem(\"token\"),\r\n        pageSize: 50,\r\n        page: 1,\r\n        sn: \"\",\r\n        startDate: startDate,\r\n        endDate: endDate,\r\n        confirm: \"\",\r\n      };\r\n      getCabinetAlarmList(cabData).then((res) => {\r\n        let event_desc = ''\r\n        if (res.data.data.data != null) {\r\n          res.data.data.data.forEach((item, index) => {\r\n            if (item.event_desc.indexOf(\"开关\") != -1) {\r\n              event_desc = item.event_desc.replace('开关', '间隔')\r\n            } else {\r\n              event_desc = item.event_desc\r\n            }\r\n          });\r\n          this.emergencyList = res.data.data.data.filter(item => {\r\n            return item.event_desc.indexOf(\"通讯状态\") == -1\r\n          });\r\n          this.emergencyList.forEach((item, index) => {\r\n            item.event_desc = event_desc\r\n          });\r\n          this.totals = this.emergencyList.length;\r\n          let dataList = this.emergencyList;\r\n          if (dataList.length != 0) {\r\n            this.rowTime = dataList[0].created_at;\r\n          } else {\r\n            return false;\r\n          }\r\n        }\r\n      });\r\n    }, 10000);\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    },\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    // beginShowing() {\r\n    //   this.$nextTick(function () {\r\n    //     // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离\r\n    //     if (this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {\r\n    //       this.tableHeight =\r\n    //         window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;\r\n    //       this.$refs.tableBox.doLayout();\r\n    //       this.roll();\r\n    //     }\r\n    //   });\r\n    // },\r\n    // roll() {\r\n    //   // 拿到表格挂载后的真实DOM\r\n    //   const table = this.$refs.tableBox;\r\n    //   // 拿到表格中承载数据的div元素\r\n    //   const bodyWrapper = table.bodyWrapper;\r\n    //   // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)\r\n    //   this.myTimer = setInterval(() => {\r\n    //     // 元素自增距离顶部1像素\r\n    //     bodyWrapper.scrollTop++;\r\n    //     // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)\r\n    //     if (\r\n    //       bodyWrapper.clientHeight + bodyWrapper.scrollTop ===\r\n    //       bodyWrapper.scrollHeight\r\n    //     ) {\r\n    //       // 重置table距离顶部距离\r\n    //       bodyWrapper.scrollTop = 0;\r\n    //     }\r\n    //   }, 100);\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(dataBzgz) {\r\n      let dataList = [];\r\n      let newArr = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];\r\n      let dataDw = [];\r\n      for (let i = 0; i < dataBzgz.length; i++) {\r\n        dataList.push(dataBzgz[i].gzcs);\r\n        dataDw.push(dataBzgz[i].dw);\r\n      }\r\n\r\n      let myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\r\n      var option = {\r\n        tooltip: {\r\n          show: true,\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"shadow\",\r\n          },\r\n        },\r\n        grid: {\r\n          top: \"18%\",\r\n          left: \"5%\",\r\n          right: \"3%\",\r\n          bottom: \"5%\",\r\n          containLabel: true,\r\n        },\r\n\r\n        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            data: dataDw,\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            axisLabel: {\r\n              color: \"#ffffff\",\r\n              interval: 0,\r\n              fontSize: 16,\r\n            },\r\n            axisLine: {\r\n              show: false, //隐藏X轴轴线\r\n              lineStyle: {\r\n                color: \"#01FCE3\",\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            name: \"单位：次\",\r\n            type: \"value\",\r\n            data: [0, 2, 4, 6, 8, 10],\r\n            nameTextStyle: {\r\n              color: \"#ffffff\",\r\n              // padding:[25,0,0,0]\r\n              fontSize: 16,\r\n            },\r\n            axisLabel: {\r\n              color: \"#ffffff\",\r\n            },\r\n            splitLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                type: \"solid\",\r\n                // color: 'rgba(66, 192, 255, .3)',\r\n                color: \"rgba(102,102,102,0.6)\",\r\n                width: 1,\r\n                // color: 'red'\r\n                fontSize: 16,\r\n              },\r\n            },\r\n            splitArea: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          // {\r\n          //   type: \"bar\",\r\n          //   barWidth: 22,\r\n          //   itemStyle: {\r\n          //     normal: {\r\n          //       label: {\r\n          //         fontSize: 14,\r\n          //         formatter(params) {\r\n          //           for (let i = 0; i < dataList.length; i++) {\r\n          //             if (params.dataIndex == i) {\r\n          //               return dataDw[i] + \"\\n\" + \"\\n\" + dataList[i];\r\n          //             }\r\n          //           }\r\n          //         },\r\n          //         show: true,\r\n          //         position: \"top\",\r\n          //         color: \"#ffffff\",\r\n          //       },\r\n          //       color: \"none\",\r\n          //     },\r\n          //   },\r\n          //   silent: true,\r\n          //   // barGap: \"-100%\",\r\n          //   data: newArr,\r\n          // },\r\n          {\r\n            name: \"\",\r\n            type: \"bar\",\r\n            barWidth: 30,\r\n            itemStyle: {\r\n              color: (params) => {\r\n                // console.log(params, '数据');\r\n                let colorList = [\r\n                  new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n                    { offset: 0, color: \"rgba(23,74,100,0.6)\" },\r\n                    { offset: 1, color: \"rgb(86,254,226)\" },\r\n                  ]),\r\n                  new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n                    {\r\n                      offset: 0,\r\n                      color: \"rgba(237,125,49,.2)\",\r\n                    },\r\n                    {\r\n                      offset: 1,\r\n                      color: \"rgba(237,125,49,1)\",\r\n                    },\r\n                  ]),\r\n                ];\r\n                if (params.name == \"盐都\") {\r\n                  return colorList[1];\r\n                } else {\r\n                  return colorList[0];\r\n                }\r\n              },\r\n              fontSize: 16,\r\n            },\r\n            data: dataList,\r\n            label: {\r\n              show: true,\r\n              position: \"top\",\r\n              fontStyle: \"normal\",\r\n              fontWeight: \"normal\",\r\n              color: \"#ffffff\",\r\n            },\r\n            //  z: -1,\r\n            // //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。\r\n            // barGap: '-100%',\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(dataGdzl) {\r\n      let gdsList = [];\r\n      let xlcczList = [];\r\n      let pbcczList = [];\r\n      let ddyList = [];\r\n      for (let i = 0; i < dataGdzl.length; i++) {\r\n        gdsList.push(dataGdzl[i].gds);\r\n        xlcczList.push(dataGdzl[i].xlccz);\r\n        pbcczList.push(dataGdzl[i].pbccz);\r\n        ddyList.push(dataGdzl[i].ddy);\r\n      }\r\n      let that = this;\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n      var option = {\r\n        //  animation: true,\r\n        // animationDuration: 20000,\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"cross\",\r\n            label: {\r\n              backgroundColor: \"#6a7985\",\r\n            },\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"4%\",\r\n          right: \"4%\",\r\n          bottom: \"5%\",\r\n          top: \"15%\",\r\n          containLabel: true,\r\n        },\r\n        legend: {\r\n          top: 10,\r\n          icon: \"rect\",\r\n          right: 25,\r\n          data: [\"线路重超载\", \"配变重超载\", \"低电压\"],\r\n          textStyle: {\r\n            color: \"#fff\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        xAxis: {\r\n          type: \"category\",\r\n          data: gdsList,\r\n          axisLine: {\r\n            //  改变x轴颜色\r\n            lineStyle: {\r\n              color: \"none\",\r\n            },\r\n          },\r\n          axisLabel: {\r\n            //  改变x轴字体颜色和大小\r\n            interval: 0,\r\n            textStyle: {\r\n              color: \"#ffffff\",\r\n              fontSize: 16,\r\n            },\r\n          },\r\n          splitLine: {\r\n            show: false,\r\n            lineStyle: {\r\n              color: [\"#315070\"],\r\n              width: 1,\r\n              type: \"solid\",\r\n            },\r\n          },\r\n        },\r\n        yAxis: {\r\n          type: \"value\",\r\n          axisLine: {\r\n            //  改变y轴颜色\r\n            show: false,\r\n            lineStyle: {\r\n              color: \"none\",\r\n            },\r\n          },\r\n          axisLabel: {\r\n            //  改变y轴字体颜色和大小\r\n            //formatter: '{value} m³ ', //  给y轴添加单位\r\n            textStyle: {\r\n              color: \"#ffffff\",\r\n              fontSize: 16,\r\n            },\r\n          },\r\n          axisTick: {\r\n            show: false,\r\n          },\r\n          splitLine: {\r\n            show: true,\r\n            lineStyle: {\r\n              color: [\"#315070\"],\r\n              width: 1,\r\n              type: \"solid\",\r\n            },\r\n          },\r\n        },\r\n        series: [\r\n          {\r\n            type: \"line\",\r\n            smooth: true,\r\n            symbol: \"circle\",\r\n            symbolSize: 7,\r\n            markPoint: {\r\n              symbol: \"circle\",\r\n            },\r\n            name: \"线路重超载\",\r\n            data: xlcczList,\r\n            itemStyle: {\r\n              normal: {\r\n                color: \"#3D7EEB\",\r\n                borderColor: \"#3D7EEB\",\r\n                borderWidth: 2,\r\n              },\r\n            },\r\n            lineStyle: {\r\n              normal: {\r\n                width: 2,\r\n                color: \"#327BFA\",\r\n                shadowColor: \"#327BFA\",\r\n                shadowBlur: 10,\r\n              },\r\n            },\r\n            areaStyle: {\r\n              color: {\r\n                type: \"linear\",\r\n                x: 0,\r\n                y: 0,\r\n                x2: 0,\r\n                y2: 1,\r\n                colorStops: [\r\n                  {\r\n                    offset: 0.5,\r\n                    color: \"rgba(61,126,235,0.5)\", // 0% 处的颜色\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(61,126,235,0)\", // 100% 处的颜色\r\n                  },\r\n                ],\r\n                global: false, // 缺省为 false\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: \"line\",\r\n            smooth: true,\r\n            symbol: \"circle\",\r\n            symbolSize: 7,\r\n            markPoint: {\r\n              symbol: \"circle\",\r\n            },\r\n            data: pbcczList,\r\n            name: \"配变重超载\",\r\n            itemStyle: {\r\n              normal: {\r\n                color: \"#17D8A1\",\r\n                borderColor: \"#17D8A1\",\r\n                borderWidth: 2,\r\n              },\r\n            },\r\n            lineStyle: {\r\n              normal: {\r\n                width: 2,\r\n                color: \"#17D8A1\",\r\n                shadowColor: \"#17D8A1\",\r\n                shadowBlur: 10,\r\n              },\r\n            },\r\n            areaStyle: {\r\n              color: {\r\n                type: \"linear\",\r\n                x: 0,\r\n                y: 0,\r\n                x2: 0,\r\n                y2: 1,\r\n                colorStops: [\r\n                  {\r\n                    offset: 0.5,\r\n                    color: \"rgba(23,216,161,0.5)\", // 0% 处的颜色\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(23,216,161,0)\", // 100% 处的颜色\r\n                  },\r\n                ],\r\n                global: false, // 缺省为 false\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: \"line\",\r\n            smooth: true,\r\n            symbol: \"circle\",\r\n            symbolSize: 7,\r\n            markPoint: {\r\n              symbol: \"circle\",\r\n            },\r\n            data: ddyList,\r\n            name: \"低电压\",\r\n            itemStyle: {\r\n              normal: {\r\n                color: \"#F4C907\",\r\n                borderColor: \"#F4C907\",\r\n                borderWidth: 2,\r\n              },\r\n            },\r\n            lineStyle: {\r\n              normal: {\r\n                width: 2,\r\n                color: \"#F4C907\",\r\n                shadowColor: \"#F4C907\",\r\n                shadowBlur: 10,\r\n              },\r\n            },\r\n            areaStyle: {\r\n              color: {\r\n                type: \"linear\",\r\n                x: 0,\r\n                y: 0,\r\n                x2: 0,\r\n                y2: 1,\r\n                colorStops: [\r\n                  {\r\n                    offset: 0.5,\r\n                    color: \"rgba(106,117,79,1)\", // 0% 处的颜色\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(106,117,79,0)\", // 100% 处的颜色\r\n                  },\r\n                ],\r\n                global: false, // 缺省为 false\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\r\n        grid: {\r\n          left: '5%',\r\n          right: '10%',\r\n          top: '20%',\r\n          bottom: '15%',\r\n          containLabel: true\r\n        },\r\n        tooltip: {\r\n          show: true,\r\n          trigger: 'item'\r\n        },\r\n        legend: {\r\n          show: true,\r\n          x: 'center',\r\n          y: '35',\r\n          icon: 'stack',\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          textStyle: {\r\n            color: '#1bb4f6'\r\n          },\r\n          data: ['已采纳', '已发布', '浏览量']\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisLabel: {\r\n              color: fontColor\r\n            },\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#397cbc'\r\n              }\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n              lineStyle: {\r\n                color: '#195384'\r\n              }\r\n            },\r\n            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']\r\n          }\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: 'value',\r\n            name: '信息量',\r\n            min: 0,\r\n            max: 1000,\r\n            axisLabel: {\r\n              formatter: '{value}',\r\n              textStyle: {\r\n                color: '#2ad1d2'\r\n              }\r\n            },\r\n            axisLine: {\r\n              lineStyle: {\r\n                color: '#27b4c2'\r\n              }\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            splitLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#11366e',\r\n                type: \"dashed\",\r\n              }\r\n            }\r\n          },\r\n          // {\r\n          // \ttype : 'value',\r\n          // \tname : '浏览量',\r\n          // \tmin:0,\r\n          // \tmax:1000,\r\n          // \taxisLabel : {\r\n          // \t\tformatter: '{value} 人',\r\n          // \t\ttextStyle:{\r\n          // \t\t\tcolor:'#186afe'\r\n          // \t\t}\r\n          // \t},\r\n          // \taxisLine:{\r\n          // \t\tlineStyle:{\r\n          // \t\t\tcolor:'#186afe'\r\n          // \t\t}\r\n          // \t},\r\n          // \taxisTick:{\r\n          //     \tshow:false,\r\n          //     },\r\n          // \tsplitLine:{\r\n          // \t\tshow:true,\r\n          // \t\tlineStyle:{\r\n          // \t\t\tcolor:'#11366e'\r\n          // \t\t}\r\n          // \t}\r\n          // }\r\n        ],\r\n        series: [\r\n          // {\r\n          // \tname:'已采纳',\r\n          // \ttype:'line',\r\n          // \tstack: '总量',\r\n          // \tsymbol:'circle',\r\n          // \tsymbolSize: 8,\r\n          //     itemStyle: {\r\n          //         normal: {\r\n          // \t\t\tcolor:'#0092f6',\r\n          //             lineStyle: {\r\n          // \t\t\t\tcolor: \"#0092f6\",\r\n          // \t\t\t\twidth:1\r\n          //             },\r\n          //             areaStyle: { \r\n          // \t\t\t\tcolor: '#94C9EC'\r\n          // \t\t\t\t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n          // \t\t\t\t// \toffset: 0,\r\n          // \t\t\t\t// \tcolor: 'rgba(7,44,90,0.3)'\r\n          // \t\t\t\t// }, {\r\n          // \t\t\t\t// \toffset: 1,\r\n          // \t\t\t\t// \tcolor: 'rgba(0,146,246,0.9)'\r\n          // \t\t\t\t// }]),\r\n          //             }\r\n          //         }\r\n          // \t},\r\n          // \tmarkPoint:{\r\n          // \t\titemStyle:{\r\n          // \t\t\tnormal:{\r\n          // \t\t\t\tcolor:'red'\r\n          // \t\t\t}\r\n          // \t\t}\r\n          // \t},\r\n          // \tdata:[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]\r\n          // },\r\n          {\r\n            name: '已发布',\r\n            type: 'line',\r\n            stack: '总量',\r\n            symbol: 'circle',\r\n            symbolSize: 8,\r\n\r\n            itemStyle: {\r\n              normal: {\r\n                color: '#00d4c7',\r\n                lineStyle: {\r\n                  color: \"#00d4c7\",\r\n                  width: 1\r\n                },\r\n                // areaStyle: { \r\n                // \tcolor: '#94C9EC'\r\n                // \t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n                // \t// \toffset: 0,\r\n                // \t// \tcolor: 'rgba(7,44,90,0.3)'\r\n                // \t// }, {\r\n                // \t// \toffset: 1,\r\n                // \t// \tcolor: 'rgba(0,212,199,0.9)'\r\n                // \t// }]),\r\n                // }\r\n              }\r\n            },\r\n            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]\r\n          },\r\n          // {\r\n          // \tname:'浏览量',\r\n          // \ttype:'line',\r\n          // \tstack: '总量',\r\n          // \tsymbol:'circle',\r\n          // \tsymbolSize: 8,\r\n          //     itemStyle: {\r\n          //         normal: {\r\n          //             color: '#aecb56',\r\n          //             lineStyle: {\r\n          // \t\t\t\tcolor: \"#aecb56\",\r\n          // \t\t\t\twidth:1\r\n          //             },\r\n          //             areaStyle: { \r\n          // \t\t\t\tcolor: '#94C9EC'\r\n          // \t\t\t\t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n          // \t\t\t\t// \toffset: 0,\r\n          // \t\t\t\t// \tcolor: 'rgba(7,44,90,0.3)'\r\n          // \t\t\t\t// }, {\r\n          // \t\t\t\t// \toffset: 1,\r\n          // \t\t\t\t// \tcolor: 'rgba(114,144,89,0.9)'\r\n          // \t\t\t\t// }]),\r\n          //             }\r\n          //         }\r\n          // \t},\r\n          // \tdata:[150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190]\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      const CubeLeft = this.$echarts.graphic.extendShape({\r\n        shape: {\r\n          x: 0,\r\n          y: 0\r\n        },\r\n        buildPath: function (ctx, shape) {\r\n          console.log(ctx, shape);\r\n          const yAxisPoint = shape.yAxisPoint\r\n          const c0 = [shape.x, shape.y]\r\n          const c1 = [shape.x + 9, shape.y - 9]\r\n          const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9]\r\n          const c3 = [yAxisPoint[0], yAxisPoint[1]]\r\n          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()\r\n        }\r\n      })\r\n      const CubeRight = this.$echarts.graphic.extendShape({\r\n        shape: {\r\n          x: 0,\r\n          y: 0\r\n        },\r\n        buildPath: function (ctx, shape) {\r\n          const yAxisPoint = shape.yAxisPoint\r\n          const c1 = [shape.x, shape.y]\r\n          const c2 = [yAxisPoint[0], yAxisPoint[1]]\r\n          const c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18]\r\n          const c4 = [shape.x + 9, shape.y + 18]\r\n          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()\r\n        }\r\n      })\r\n      const CubeTop = this.$echarts.graphic.extendShape({\r\n        shape: {\r\n          x: 0,\r\n          y: 0\r\n        },\r\n        buildPath: function (ctx, shape) {\r\n          const c1 = [shape.x, shape.y]\r\n          const c2 = [shape.x + 9, shape.y + 18]\r\n          const c3 = [shape.x + 18, shape.y + 9]\r\n          const c4 = [shape.x + 9, shape.y - 9]\r\n          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()\r\n        }\r\n      })\r\n      this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)\r\n      this.$echarts.graphic.registerShape('CubeRight', CubeRight)\r\n      this.$echarts.graphic.registerShape('CubeTop', CubeTop)\r\n      const MAX = [6000, 6000, 6000, 6000, 6000]\r\n      const VALUE = [2012, 1230, 3790, 2349, 1654]\r\n      const NAMES = ['德州', '德城区', '陵城区', '禹城市', '乐陵市'];\r\n      var option = {\r\n        title: {\r\n          text: '',\r\n          top: 32,\r\n          left: 18,\r\n          textStyle: {\r\n            color: '#00F6FF',\r\n            fontSize: 24\r\n          }\r\n        },\r\n        grid: {\r\n          left: 20,\r\n          right: 40,\r\n          bottom: '19%',\r\n          top: 107,\r\n          containLabel: true\r\n        },\r\n        yAxis: {\r\n          type: 'category',\r\n          data: NAMES,\r\n          axisLine: {\r\n            show: false,\r\n            lineStyle: {\r\n              color: 'white'\r\n            }\r\n          },\r\n          offset: 20,\r\n          axisTick: {\r\n            show: false,\r\n            length: 9,\r\n            alignWithLabel: true,\r\n            lineStyle: {\r\n              color: '#7DFFFD'\r\n            }\r\n          },\r\n          axisLabel: {\r\n            fontSize: 10\r\n          }\r\n        },\r\n        xAxis: {\r\n          type: 'value',\r\n          axisLine: {\r\n            show: false,\r\n            lineStyle: {\r\n              color: 'white'\r\n            }\r\n          },\r\n          splitLine: {\r\n            show: false\r\n          },\r\n          axisTick: {\r\n            show: false\r\n          },\r\n          axisLabel: {\r\n            show: false,\r\n            fontSize: 16\r\n          },\r\n          boundaryGap: ['20%', '20%']\r\n        },\r\n        series: [{\r\n          type: 'custom',\r\n          renderItem: function (params, api) {\r\n            const location = api.coord([api.value(0), api.value(1)])\r\n            return {\r\n              type: 'group',\r\n              children: [{\r\n                type: 'CubeLeft',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                style: {\r\n                  fill: 'rgba(7,29,97,.6)'\r\n                }\r\n              }, {\r\n                type: 'CubeRight',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                style: {\r\n                  fill: 'rgba(10,35,108,.7)'\r\n                }\r\n              }, {\r\n                type: 'CubeTop',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                style: {\r\n                  fill: 'rgba(11,42,106,.8)'\r\n                }\r\n              }]\r\n            }\r\n          },\r\n          data: MAX\r\n        },\r\n        {\r\n          type: 'custom',\r\n          renderItem: (params, api) => {\r\n            const location = api.coord([api.value(0), api.value(1)])\r\n            return {\r\n              type: 'group',\r\n              children: [{\r\n                type: 'CubeLeft',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                // style: {\r\n                //     fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n                //             offset: 0,\r\n                //             color: '#3B80E2'\r\n                //         },\r\n                //         {\r\n                //             offset: 1,\r\n                //             color: '#49BEE5'\r\n                //         }\r\n                //     ])\r\n                // }\r\n              }, {\r\n                type: 'CubeRight',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                // style: {\r\n                //     fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n                //             offset: 0,\r\n                //             color: '#3B80E2'\r\n                //         },\r\n                //         {\r\n                //             offset: 1,\r\n                //             color: '#49BEE5'\r\n                //         }\r\n                //     ])\r\n                // }\r\n              }, {\r\n                type: 'CubeTop',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                // style: {\r\n                //     fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n                //             offset: 0,\r\n                //             color: '#3B80E2'\r\n                //         },\r\n                //         {\r\n                //             offset: 1,\r\n                //             color: '#49BEE5'\r\n                //         }\r\n                //     ])\r\n                // }\r\n              }]\r\n            }\r\n          },\r\n          data: VALUE\r\n        },\r\n        {\r\n          type: 'bar',\r\n          label: {\r\n            normal: {\r\n              show: true,\r\n              position: 'right',\r\n              formatter: (e) => {\r\n                switch (e.name) {\r\n                  case '10kV线路':\r\n                    return VALUE[0]\r\n                  case '公用配变':\r\n                    return VALUE[1]\r\n                  case '35kV主变':\r\n                    return VALUE[2]\r\n                  case '水':\r\n\r\n                }\r\n              },\r\n              fontSize: 16,\r\n              color: '#fff',\r\n              offset: [25, 4]\r\n            }\r\n          },\r\n          itemStyle: {\r\n            color: 'transparent'\r\n          },\r\n          data: MAX\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          text: '3246',\r\n          subtext: '重点人员(人)',\r\n          x: 'center',\r\n          y: '43%',\r\n          textStyle: {\r\n            fontSize: 80,\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: ['140', '180'],\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: 32,\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: 32,\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    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(dataPbty) {\r\n      let dataListx = [];\r\n      let dataPb = [];\r\n      let dataGz = [];\r\n      let dataCf = [];\r\n      for (let i = 0; i < dataPbty.length; i++) {\r\n        dataListx.push(dataPbty[i].gds);\r\n        dataGz.push(dataPbty[i].gztytc);\r\n        dataPb.push(dataPbty[i].pbsl);\r\n        dataCf.push(dataPbty[i].cftytc);\r\n      }\r\n      var datacoords = [];\r\n      var datacoords1 = [];\r\n      for (var i = 0; i < dataListx.length; i++) {\r\n        datacoords.push([\r\n          {\r\n            coord: [i, dataGz[i]],\r\n          },\r\n          {\r\n            coord: [i + 1, dataGz[i + 1]],\r\n          },\r\n        ]);\r\n      }\r\n      for (var i = 0; i < dataListx.length; i++) {\r\n        datacoords1.push([\r\n          {\r\n            coord: [i, dataCf[i]],\r\n          },\r\n          {\r\n            coord: [i + 1, dataCf[i + 1]],\r\n          },\r\n        ]);\r\n      }\r\n      let that = this;\r\n      let myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\r\n      var option = {\r\n        animation: true, //控制动画示否开启\r\n        animationDuration: 2000,\r\n        animationEasing: \"bounceOut\", //缓动动画\r\n        animationThreshold: 8, //动画元素的阈值\r\n        grid: {\r\n          top: \"15%\",\r\n          bottom: \"30%\", //也可设置left和right设置距离来控制图表的大小\r\n        },\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"shadow\",\r\n            label: {\r\n              show: true,\r\n            },\r\n          },\r\n        },\r\n        legend: {\r\n          data: [\"配变数量\", \"故障停运\", \"重复停运\"],\r\n          top: \"0%\",\r\n          //  icon:'roundRect',\r\n          //  itemHeight:2, // 粗细\r\n          textStyle: {\r\n            color: \"#ffffff\",\r\n          },\r\n        },\r\n        xAxis: {\r\n          data: dataListx,\r\n          axisLine: {\r\n            show: false, //隐藏X轴轴线\r\n            lineStyle: {\r\n              color: \"#01FCE3\",\r\n            },\r\n          },\r\n          axisTick: {\r\n            show: false, //隐藏X轴刻度\r\n          },\r\n          axisLabel: {\r\n            show: true,\r\n            interval: 0,\r\n            textStyle: {\r\n              color: \"#ffffff\", //X轴文字颜色\r\n              fontSize: \"16px\",\r\n            },\r\n          },\r\n        },\r\n        yAxis: [\r\n          {\r\n            type: \"value\",\r\n            name: \"配变数量\",\r\n            nameTextStyle: {\r\n              color: \"#ffffff\",\r\n              padding: [0, 30, 0, 0],\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n              lineStyle: {\r\n                color: \"#FFFFFF\",\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              interval: 0,\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: \"value\",\r\n            name: \"停运台次\",\r\n            nameTextStyle: {\r\n              color: \"#ffffff\",\r\n            },\r\n            position: \"right\",\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n\r\n              // formatter: \"{value} %\", //右侧Y轴文字显示\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: \"value\",\r\n            gridIndex: 0,\r\n            min: 50,\r\n            max: 100,\r\n            splitNumber: 8,\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              show: false,\r\n            },\r\n            splitArea: {\r\n              show: true,\r\n              areaStyle: {\r\n                color: [\"rgba(250,250,250,0.0)\", \"rgba(250,250,250,0.05)\"],\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"故障停运\",\r\n            type: \"line\",\r\n            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用\r\n            smooth: false, //平滑曲线显示\r\n            showAllSymbol: true, //显示所有图形。\r\n            shadowOffsetX: 0, // 折线的X偏移\r\n            shadowOffsetY: 10, // 折线的Y偏移\r\n            symbol: \"circle\", //标记的图形为实心圆\r\n            symbolSize: 1, //标记的大小\r\n            itemStyle: {\r\n              //折线拐点标志的样式\r\n              color: \"rgb(237,125,49)\",\r\n            },\r\n            lineStyle: {\r\n              color: \"rgb(237,125,49)\",\r\n            },\r\n            // areaStyle: {\r\n            //   show:false,\r\n            //   color: \"rgba(5,140,255, 0.2)\",\r\n            // },\r\n            emphasis: {\r\n              focus: \"series\",\r\n            },\r\n            data: dataGz,\r\n          },\r\n          {\r\n            showSymbol: false,\r\n            name: \"故障停运\",\r\n            type: \"lines\",\r\n            yAxisIndex: 1,\r\n            polyline: true,\r\n            smooth: false,\r\n            coordinateSystem: \"cartesian2d\",\r\n            zlevel: 1,\r\n            effect: {\r\n              show: true,\r\n              smooth: false,\r\n              period: 6,\r\n              trailLenth: 0.1,\r\n              symbolSize: 6,\r\n              symbol: \"circle\",\r\n            },\r\n            lineStyle: {\r\n              color: \"#fff\",\r\n              width: 1,\r\n              opacity: 0,\r\n              curveness: 0,\r\n              cap: \"round\",\r\n            },\r\n            data: datacoords,\r\n          },\r\n          {\r\n            name: \"重复停运\",\r\n            type: \"line\",\r\n            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用\r\n            smooth: false, //平滑曲线显示\r\n            shadowOffsetX: 0, // 折线的X偏移\r\n            shadowOffsetY: 10, // 折线的Y偏移\r\n            showAllSymbol: true, //显示所有图形。\r\n            symbol: \"circle\", //标记的图形为实心圆\r\n            symbolSize: 1, //标记的大小\r\n            itemStyle: {\r\n              //折线拐点标志的样式\r\n              show: false,\r\n              color: \"#058cff\",\r\n            },\r\n            lineStyle: {\r\n              show: false,\r\n              color: \"#058cff\",\r\n            },\r\n            // areaStyle: {\r\n            //   show:false,\r\n            //   color: \"rgba(5,140,255, 0.2)\",\r\n            // },\r\n            data: dataCf,\r\n          },\r\n          {\r\n            showSymbol: false,\r\n            name: \"重复停运\",\r\n            type: \"lines\",\r\n            yAxisIndex: 1,\r\n            polyline: true,\r\n            smooth: false,\r\n            coordinateSystem: \"cartesian2d\",\r\n            zlevel: 1,\r\n            effect: {\r\n              show: true,\r\n              smooth: false,\r\n              period: 6,\r\n              trailLenth: 0.1,\r\n              symbolSize: 6,\r\n              symbol: \"circle\",\r\n            },\r\n            lineStyle: {\r\n              color: \"#fff\",\r\n              width: 1,\r\n              opacity: 0,\r\n              curveness: 0,\r\n              cap: \"round\",\r\n            },\r\n            data: datacoords1,\r\n          },\r\n          {\r\n            name: \"配变数量\",\r\n            type: \"bar\",\r\n            barWidth: 15,\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              },\r\n            },\r\n            data: dataPb,\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",{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAymBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views","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          <div class=\"titleFont\">盐城地区分布光伏运行监测</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\">\r\n          <div class=\"titleFont\">配网工程全过程物资审计</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\">\r\n          <div class=\"titleFont\">盐都东台区供电所数字化分析</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\">\r\n          <div class=\"titleFont\">盐城供电公司配网电能质量管控</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\" style=\"height: calc(100% - 200px)\"></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"middle\" id=\"middle\">\r\n      <div class=\"one\" style=\"height: 635px; width: 100%\" id=\"threeModel\">\r\n        <!-- <iframe\r\n          src=\"/unityWeb/index.html\"\r\n          style=\"height: 100%; width: 100%; border: none\"\r\n          ref=\"iframe\"\r\n        ></iframe> -->\r\n        <div class=\"unityBtn\">\r\n          <div class=\"btn\" :class=\"{ btnAct: btnActive == index }\" v-for=\"(item, index) in btnArr\" :key=\"index\"\r\n            @click=\"handleUnity(index, item)\">\r\n            {{ item }}\r\n          </div>\r\n        </div>\r\n        <div class=\"unityIcon\">\r\n          <div class=\"unityIconGround\" v-for=\"(item, index) in iconGround\" :key=\"index\">\r\n            <img :src=\"item.icon\" />\r\n            <div style=\"color: #ffffff\">{{ item.name }}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"unityEnlargeBtn\">\r\n          <div class=\"content\" v-for=\"(item, index) in enlargeShow == true\r\n            ? btnEnlarge\r\n            : btnEnlarge1\" :key=\"index\" @click=\"\r\n    enlargeShow == true ? enlargeBtn(index) : enlargeBtn1(index)\r\n    \">\r\n            <img :src=\"item.icon\" style=\"margin: 7px\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"unitySelect\">\r\n          <div class=\"unitySuosou\">\r\n            <img src=\"../assets/images/sousuo.png\" style=\"margin-top: 16px\" />\r\n          </div>\r\n          <div class=\"selectChange\">\r\n            <el-select v-model=\"value\" :popper-append-to-body=\"false\" clearable placeholder=\"请选择线路\">\r\n              <el-option v-for=\"(item, index) in options\" :key=\"index\" :label=\"item.label\" :value=\"item.value\">\r\n              </el-option>\r\n            </el-select>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"detailed\" id=\"detailed\">\r\n        <div class=\"two\" style=\"\r\n            height: 350px;\r\n            width: 780px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n          \">\r\n          <div class=\"cartitle\">\r\n            <div class=\"titleFont\">线路故障跳闸明细</div>\r\n          </div>\r\n          <!-- <el-scrollbar class=\"scrollbar\"> -->\r\n          <div class=\"table user_skills\">\r\n            <el-table :data=\"tableData\" :header-cell-style=\"{ 'text-align': 'center' }\"\r\n              :cell-style=\"{ 'text-align': 'center' }\" height=\"100%\" width=\"100%\" ref=\"tableBox\" style=\"font-size: 16px\"\r\n              @row-click=\"rowHandle\">\r\n              <el-table-column label=\"\" align=\"center\" width=\"20\">\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=\"bz\" label=\"班组\" :show-overflow-tooltip=\"true\">\r\n              </el-table-column>\r\n              <el-table-column prop=\"gzxl\" width=\"90\" label=\"故障线路\">\r\n              </el-table-column>\r\n              <!-- <el-table-column\r\n                prop=\"gzyy\"\r\n                label=\"故障原因\"\r\n                width=\"90\"\r\n                :show-overflow-tooltip=\"true\"\r\n              > -->\r\n              <!-- </el-table-column> -->\r\n              <el-table-column align=\"center\" label=\"故障状态\">\r\n                <template slot-scope=\"scope\">\r\n                  <div style=\"color: #ffbc3a\">\r\n                    {{ scope.row.gz_state_dsc }}\r\n                  </div>\r\n                </template>\r\n              </el-table-column>\r\n              <el-table-column label=\"故障类型\">\r\n                <template slot-scope=\"scope\">\r\n                  <div style=\"color: #ffbc3a\">\r\n                    {{ scope.row.gz_type_dsc }}\r\n                  </div>\r\n                </template>\r\n              </el-table-column>\r\n              <el-table-column label=\"故障时间\" width=\"160\" align=\"center\">\r\n                <template slot-scope=\"scope\">\r\n                  <div style=\"color: #2793ff\">\r\n                    {{ scope.row.gz_time }}\r\n                  </div>\r\n                </template>\r\n              </el-table-column>\r\n              <el-table-column label=\"影响时户数\" align=\"center\">\r\n                <template slot-scope=\"scope\">\r\n                  <div style=\"color: #2793ff\">\r\n                    {{ scope.row.yxshs }}\r\n                  </div>\r\n                </template>\r\n              </el-table-column>\r\n              <el-table-column label=\"处理完成时间\" width=\"160\" align=\"center\">\r\n                <template slot-scope=\"scope\">\r\n                  <div style=\"color: #2793ff\">\r\n                    {{ scope.row.gz_time_deal }}\r\n                  </div>\r\n                </template>\r\n              </el-table-column>\r\n              <!-- <el-table-column prop=\"jiedi\" label=\"接地\" width=\"55\">\r\n                <template slot-scope=\"scope\">\r\n                  <div style=\"color: #794af8\">\r\n                    {{ scope.row.jiedi }}\r\n                  </div>\r\n                </template>\r\n              </el-table-column> -->\r\n              <!-- <el-table-column prop=\"heji\" label=\"合计\" width=\"55\">\r\n                <template slot-scope=\"scope\">\r\n                  <div style=\"color: #ee8316\">\r\n                    {{ scope.row.heji }}\r\n                  </div>\r\n                </template>\r\n              </el-table-column> -->\r\n            </el-table>\r\n          </div>\r\n          <!-- </el-scrollbar> -->\r\n          <!-- <div class=\"detailedOneList\">\r\n            <div>单位</div>\r\n            < <div>\r\n            工区\r\n          </div>\r\n          <div>\r\n            三新\r\n          </div>\r\n          <div>\r\n            盐都\r\n          </div>\r\n          <div>\r\n            滨海\r\n          </div>\r\n          <div>\r\n            大丰\r\n          </div>\r\n          <div>\r\n            东台\r\n          </div>\r\n          <div>\r\n            阜宁\r\n          </div>\r\n          <div>\r\n            建湖\r\n          </div>\r\n          <div>\r\n            射阳\r\n          </div>\r\n          <div>\r\n            响水\r\n          </div> \r\n          </div> -->\r\n        </div>\r\n        <!-- <div class=\"three\" style=\"height: 350px; width: 780px\">\r\n          <div class=\"cartitle\">\r\n            <div class=\"titleFont\">本年度线路故障调查明细</div>\r\n          </div>\r\n          <div id=\"detailedFour\"></div>\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\">\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\">盐都配变停运管理情况</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=\"top\">\r\n          <div class=\"topContent\" v-for=\"(item, index) in topContent\" :key=\"index\">\r\n            <div style=\"color: #ffffff\">{{ item.name }}</div>\r\n            <div style=\"color: rgb(86, 254, 226); font-size: 22px\">\r\n              {{ item.count }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div style=\"height: 90%\" id=\"detailedFive\"></div>\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\">\r\n          <div class=\"titleFont\">工单统计</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>\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\">\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\">盐都配变停运管理情况</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=\"top\">\r\n          <div class=\"topContent\" v-for=\"(item, index) in topContent\" :key=\"index\">\r\n            <div style=\"color: #ffffff\">{{ item.name }}</div>\r\n            <div style=\"color: rgb(86, 254, 226); font-size: 22px\">\r\n              {{ item.count }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div style=\"height: 90%\" id=\"detailedFive\"></div>\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\">\r\n          <div class=\"titleFont\">工单统计</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>\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// 工单统计弹窗组件\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      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    this.detailedTwo11()\r\n    this.horizontalChart()\r\n    this.barCharts()\r\n    // 盐都区供电公司概况\r\n    getCompanyInfo().then((res) => {\r\n      // console.log(res,'....');\r\n      this.CompanyInfo = res.data.data;\r\n    });\r\n\r\n    // 查询总线路\r\n    getLine({ action: \"all\" }).then((res) => {\r\n      if (res.data != \"\") {\r\n        this.options = Object.keys(res.data.data).map((item, index) => {\r\n          return {\r\n            value: res.data.data[index].line_code,\r\n            label: res.data.data[index].line_name,\r\n          };\r\n        });\r\n      }\r\n    });\r\n    //周查询班组\r\n    this.getbanzhu();\r\n    this.timer = window.setInterval(() => {\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    }, 60000);\r\n    //工单统计action:'tongji'\r\n    this.getGongdan();\r\n    this.timer = window.setInterval(() => {\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    }, 60000);\r\n\r\n    //年度查询班组\r\n    getBanzugz({\r\n      action: \"year\",\r\n    }).then((res) => {\r\n      console.log(res, \"年数据\");\r\n      this.dataGzList = res.data.data;\r\n      // console.log(this.dataGzList,'年度查询班组数据');\r\n      for (let i = 0; i < this.dataGzList.length; i++) {\r\n        for (let j = 0; j < res.data.data.length; j++) {\r\n          if (this.dataGzList[i].bz == res.data.data[j].bz) {\r\n            this.dataGzList[i].chbc = res.data.data[j].chbc;\r\n            this.dataGzList[i].chcg = res.data.data[j].chcg;\r\n            this.dataGzList[i].jd = res.data.data[j].jd;\r\n            this.dataGzList[i].total = res.data.data[j].total;\r\n            this.dataGzList[i].wchz = res.data.data[j].wchz;\r\n          }\r\n        }\r\n      }\r\n      this.detailedFour(this.dataGzList);\r\n    });\r\n    //本周故障\r\n    getDwbzgz().then((res) => {\r\n      let dataBzgz = [];\r\n      dataBzgz = res.data.data;\r\n      this.detailedOne(dataBzgz);\r\n    });\r\n    //供电质量统计\r\n    getGdsgdzl().then((res) => {\r\n      let dataGdzl = [];\r\n      dataGdzl = res.data.data;\r\n      //   this.detailedTwo(dataGdzl);\r\n    });\r\n    // //配变停运\r\n    // getPbtyqk({\r\n    //   action:\"week\"\r\n    // }).then((res)=>{\r\n    //   let dataPbty = [];\r\n    //   dataPbty = res.data.data\r\n    //   console.log(dataPbty,'dataPbty');\r\n    //   this.detailedFive(dataPbty);\r\n    //   let dataPb = [];\r\n    //   let dataCf = [];\r\n    //   let dataCfl = [];\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    //     dataCfl.push(dataPbty[i].pbcftyl)\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    this.handleDate(0);\r\n    let that = this;\r\n    window.addEventListener(\"message\", function (e) {\r\n      var res = e.data;\r\n      if (res.val != null) {\r\n        that.modelOthers = true;\r\n        that.componentShow = \"ringMainUnit\";\r\n        that.device = res.val;\r\n      }\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    getfaultReportList(faultData).then((res) => {\r\n      // this.alarmInformationData = res.data.data.data;\r\n    });\r\n    window.setInterval(() => {\r\n      let endDate = this.$moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\");\r\n      let startDate = this.$moment(new Date())\r\n        .subtract(1, \"h\")\r\n        .format(\"YYYY-MM-DD HH:mm:ss\");\r\n      let cabData = {\r\n        token: localStorage.getItem(\"token\"),\r\n        pageSize: 50,\r\n        page: 1,\r\n        sn: \"\",\r\n        startDate: startDate,\r\n        endDate: endDate,\r\n        confirm: \"\",\r\n      };\r\n      getCabinetAlarmList(cabData).then((res) => {\r\n        let event_desc = ''\r\n        if (res.data.data.data != null) {\r\n          res.data.data.data.forEach((item, index) => {\r\n            if (item.event_desc.indexOf(\"开关\") != -1) {\r\n              event_desc = item.event_desc.replace('开关', '间隔')\r\n            } else {\r\n              event_desc = item.event_desc\r\n            }\r\n          });\r\n          this.emergencyList = res.data.data.data.filter(item => {\r\n            return item.event_desc.indexOf(\"通讯状态\") == -1\r\n          });\r\n          this.emergencyList.forEach((item, index) => {\r\n            item.event_desc = event_desc\r\n          });\r\n          this.totals = this.emergencyList.length;\r\n          let dataList = this.emergencyList;\r\n          if (dataList.length != 0) {\r\n            this.rowTime = dataList[0].created_at;\r\n          } else {\r\n            return false;\r\n          }\r\n        }\r\n      });\r\n    }, 10000);\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    },\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    // beginShowing() {\r\n    //   this.$nextTick(function () {\r\n    //     // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离\r\n    //     if (this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {\r\n    //       this.tableHeight =\r\n    //         window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;\r\n    //       this.$refs.tableBox.doLayout();\r\n    //       this.roll();\r\n    //     }\r\n    //   });\r\n    // },\r\n    // roll() {\r\n    //   // 拿到表格挂载后的真实DOM\r\n    //   const table = this.$refs.tableBox;\r\n    //   // 拿到表格中承载数据的div元素\r\n    //   const bodyWrapper = table.bodyWrapper;\r\n    //   // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)\r\n    //   this.myTimer = setInterval(() => {\r\n    //     // 元素自增距离顶部1像素\r\n    //     bodyWrapper.scrollTop++;\r\n    //     // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)\r\n    //     if (\r\n    //       bodyWrapper.clientHeight + bodyWrapper.scrollTop ===\r\n    //       bodyWrapper.scrollHeight\r\n    //     ) {\r\n    //       // 重置table距离顶部距离\r\n    //       bodyWrapper.scrollTop = 0;\r\n    //     }\r\n    //   }, 100);\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(dataBzgz) {\r\n      let dataList = [];\r\n      let newArr = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];\r\n      let dataDw = [];\r\n      for (let i = 0; i < dataBzgz.length; i++) {\r\n        dataList.push(dataBzgz[i].gzcs);\r\n        dataDw.push(dataBzgz[i].dw);\r\n      }\r\n\r\n      let myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\r\n      var option = {\r\n        tooltip: {\r\n          show: true,\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"shadow\",\r\n          },\r\n        },\r\n        grid: {\r\n          top: \"18%\",\r\n          left: \"5%\",\r\n          right: \"3%\",\r\n          bottom: \"5%\",\r\n          containLabel: true,\r\n        },\r\n\r\n        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            data: dataDw,\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            axisLabel: {\r\n              color: \"#ffffff\",\r\n              interval: 0,\r\n              fontSize: 16,\r\n            },\r\n            axisLine: {\r\n              show: false, //隐藏X轴轴线\r\n              lineStyle: {\r\n                color: \"#01FCE3\",\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            name: \"单位：次\",\r\n            type: \"value\",\r\n            data: [0, 2, 4, 6, 8, 10],\r\n            nameTextStyle: {\r\n              color: \"#ffffff\",\r\n              // padding:[25,0,0,0]\r\n              fontSize: 16,\r\n            },\r\n            axisLabel: {\r\n              color: \"#ffffff\",\r\n            },\r\n            splitLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                type: \"solid\",\r\n                // color: 'rgba(66, 192, 255, .3)',\r\n                color: \"rgba(102,102,102,0.6)\",\r\n                width: 1,\r\n                // color: 'red'\r\n                fontSize: 16,\r\n              },\r\n            },\r\n            splitArea: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          // {\r\n          //   type: \"bar\",\r\n          //   barWidth: 22,\r\n          //   itemStyle: {\r\n          //     normal: {\r\n          //       label: {\r\n          //         fontSize: 14,\r\n          //         formatter(params) {\r\n          //           for (let i = 0; i < dataList.length; i++) {\r\n          //             if (params.dataIndex == i) {\r\n          //               return dataDw[i] + \"\\n\" + \"\\n\" + dataList[i];\r\n          //             }\r\n          //           }\r\n          //         },\r\n          //         show: true,\r\n          //         position: \"top\",\r\n          //         color: \"#ffffff\",\r\n          //       },\r\n          //       color: \"none\",\r\n          //     },\r\n          //   },\r\n          //   silent: true,\r\n          //   // barGap: \"-100%\",\r\n          //   data: newArr,\r\n          // },\r\n          {\r\n            name: \"\",\r\n            type: \"bar\",\r\n            barWidth: 30,\r\n            itemStyle: {\r\n              color: (params) => {\r\n                // console.log(params, '数据');\r\n                let colorList = [\r\n                  new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n                    { offset: 0, color: \"rgba(23,74,100,0.6)\" },\r\n                    { offset: 1, color: \"rgb(86,254,226)\" },\r\n                  ]),\r\n                  new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n                    {\r\n                      offset: 0,\r\n                      color: \"rgba(237,125,49,.2)\",\r\n                    },\r\n                    {\r\n                      offset: 1,\r\n                      color: \"rgba(237,125,49,1)\",\r\n                    },\r\n                  ]),\r\n                ];\r\n                if (params.name == \"盐都\") {\r\n                  return colorList[1];\r\n                } else {\r\n                  return colorList[0];\r\n                }\r\n              },\r\n              fontSize: 16,\r\n            },\r\n            data: dataList,\r\n            label: {\r\n              show: true,\r\n              position: \"top\",\r\n              fontStyle: \"normal\",\r\n              fontWeight: \"normal\",\r\n              color: \"#ffffff\",\r\n            },\r\n            //  z: -1,\r\n            // //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。\r\n            // barGap: '-100%',\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(dataGdzl) {\r\n      let gdsList = [];\r\n      let xlcczList = [];\r\n      let pbcczList = [];\r\n      let ddyList = [];\r\n      for (let i = 0; i < dataGdzl.length; i++) {\r\n        gdsList.push(dataGdzl[i].gds);\r\n        xlcczList.push(dataGdzl[i].xlccz);\r\n        pbcczList.push(dataGdzl[i].pbccz);\r\n        ddyList.push(dataGdzl[i].ddy);\r\n      }\r\n      let that = this;\r\n      var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n      var option = {\r\n        //  animation: true,\r\n        // animationDuration: 20000,\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"cross\",\r\n            label: {\r\n              backgroundColor: \"#6a7985\",\r\n            },\r\n          },\r\n        },\r\n        grid: {\r\n          left: \"4%\",\r\n          right: \"4%\",\r\n          bottom: \"5%\",\r\n          top: \"15%\",\r\n          containLabel: true,\r\n        },\r\n        legend: {\r\n          top: 10,\r\n          icon: \"rect\",\r\n          right: 25,\r\n          data: [\"线路重超载\", \"配变重超载\", \"低电压\"],\r\n          textStyle: {\r\n            color: \"#fff\",\r\n            fontSize: 16,\r\n          },\r\n        },\r\n        xAxis: {\r\n          type: \"category\",\r\n          data: gdsList,\r\n          axisLine: {\r\n            //  改变x轴颜色\r\n            lineStyle: {\r\n              color: \"none\",\r\n            },\r\n          },\r\n          axisLabel: {\r\n            //  改变x轴字体颜色和大小\r\n            interval: 0,\r\n            textStyle: {\r\n              color: \"#ffffff\",\r\n              fontSize: 16,\r\n            },\r\n          },\r\n          splitLine: {\r\n            show: false,\r\n            lineStyle: {\r\n              color: [\"#315070\"],\r\n              width: 1,\r\n              type: \"solid\",\r\n            },\r\n          },\r\n        },\r\n        yAxis: {\r\n          type: \"value\",\r\n          axisLine: {\r\n            //  改变y轴颜色\r\n            show: false,\r\n            lineStyle: {\r\n              color: \"none\",\r\n            },\r\n          },\r\n          axisLabel: {\r\n            //  改变y轴字体颜色和大小\r\n            //formatter: '{value} m³ ', //  给y轴添加单位\r\n            textStyle: {\r\n              color: \"#ffffff\",\r\n              fontSize: 16,\r\n            },\r\n          },\r\n          axisTick: {\r\n            show: false,\r\n          },\r\n          splitLine: {\r\n            show: true,\r\n            lineStyle: {\r\n              color: [\"#315070\"],\r\n              width: 1,\r\n              type: \"solid\",\r\n            },\r\n          },\r\n        },\r\n        series: [\r\n          {\r\n            type: \"line\",\r\n            smooth: true,\r\n            symbol: \"circle\",\r\n            symbolSize: 7,\r\n            markPoint: {\r\n              symbol: \"circle\",\r\n            },\r\n            name: \"线路重超载\",\r\n            data: xlcczList,\r\n            itemStyle: {\r\n              normal: {\r\n                color: \"#3D7EEB\",\r\n                borderColor: \"#3D7EEB\",\r\n                borderWidth: 2,\r\n              },\r\n            },\r\n            lineStyle: {\r\n              normal: {\r\n                width: 2,\r\n                color: \"#327BFA\",\r\n                shadowColor: \"#327BFA\",\r\n                shadowBlur: 10,\r\n              },\r\n            },\r\n            areaStyle: {\r\n              color: {\r\n                type: \"linear\",\r\n                x: 0,\r\n                y: 0,\r\n                x2: 0,\r\n                y2: 1,\r\n                colorStops: [\r\n                  {\r\n                    offset: 0.5,\r\n                    color: \"rgba(61,126,235,0.5)\", // 0% 处的颜色\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(61,126,235,0)\", // 100% 处的颜色\r\n                  },\r\n                ],\r\n                global: false, // 缺省为 false\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: \"line\",\r\n            smooth: true,\r\n            symbol: \"circle\",\r\n            symbolSize: 7,\r\n            markPoint: {\r\n              symbol: \"circle\",\r\n            },\r\n            data: pbcczList,\r\n            name: \"配变重超载\",\r\n            itemStyle: {\r\n              normal: {\r\n                color: \"#17D8A1\",\r\n                borderColor: \"#17D8A1\",\r\n                borderWidth: 2,\r\n              },\r\n            },\r\n            lineStyle: {\r\n              normal: {\r\n                width: 2,\r\n                color: \"#17D8A1\",\r\n                shadowColor: \"#17D8A1\",\r\n                shadowBlur: 10,\r\n              },\r\n            },\r\n            areaStyle: {\r\n              color: {\r\n                type: \"linear\",\r\n                x: 0,\r\n                y: 0,\r\n                x2: 0,\r\n                y2: 1,\r\n                colorStops: [\r\n                  {\r\n                    offset: 0.5,\r\n                    color: \"rgba(23,216,161,0.5)\", // 0% 处的颜色\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(23,216,161,0)\", // 100% 处的颜色\r\n                  },\r\n                ],\r\n                global: false, // 缺省为 false\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: \"line\",\r\n            smooth: true,\r\n            symbol: \"circle\",\r\n            symbolSize: 7,\r\n            markPoint: {\r\n              symbol: \"circle\",\r\n            },\r\n            data: ddyList,\r\n            name: \"低电压\",\r\n            itemStyle: {\r\n              normal: {\r\n                color: \"#F4C907\",\r\n                borderColor: \"#F4C907\",\r\n                borderWidth: 2,\r\n              },\r\n            },\r\n            lineStyle: {\r\n              normal: {\r\n                width: 2,\r\n                color: \"#F4C907\",\r\n                shadowColor: \"#F4C907\",\r\n                shadowBlur: 10,\r\n              },\r\n            },\r\n            areaStyle: {\r\n              color: {\r\n                type: \"linear\",\r\n                x: 0,\r\n                y: 0,\r\n                x2: 0,\r\n                y2: 1,\r\n                colorStops: [\r\n                  {\r\n                    offset: 0.5,\r\n                    color: \"rgba(106,117,79,1)\", // 0% 处的颜色\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: \"rgba(106,117,79,0)\", // 100% 处的颜色\r\n                  },\r\n                ],\r\n                global: false, // 缺省为 false\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\r\n        grid: {\r\n          left: '5%',\r\n          right: '10%',\r\n          top: '20%',\r\n          bottom: '15%',\r\n          containLabel: true\r\n        },\r\n        tooltip: {\r\n          show: true,\r\n          trigger: 'item'\r\n        },\r\n        legend: {\r\n          show: true,\r\n          x: 'center',\r\n          y: '35',\r\n          icon: 'stack',\r\n          itemWidth: 10,\r\n          itemHeight: 10,\r\n          textStyle: {\r\n            color: '#1bb4f6'\r\n          },\r\n          data: ['已采纳', '已发布', '浏览量']\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisLabel: {\r\n              color: fontColor\r\n            },\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#397cbc'\r\n              }\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n              lineStyle: {\r\n                color: '#195384'\r\n              }\r\n            },\r\n            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']\r\n          }\r\n        ],\r\n        yAxis: [\r\n          {\r\n            type: 'value',\r\n            name: '信息量',\r\n            min: 0,\r\n            max: 1000,\r\n            axisLabel: {\r\n              formatter: '{value}',\r\n              textStyle: {\r\n                color: '#2ad1d2'\r\n              }\r\n            },\r\n            axisLine: {\r\n              lineStyle: {\r\n                color: '#27b4c2'\r\n              }\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            splitLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#11366e',\r\n                type: \"dashed\",\r\n              }\r\n            }\r\n          },\r\n          // {\r\n          // \ttype : 'value',\r\n          // \tname : '浏览量',\r\n          // \tmin:0,\r\n          // \tmax:1000,\r\n          // \taxisLabel : {\r\n          // \t\tformatter: '{value} 人',\r\n          // \t\ttextStyle:{\r\n          // \t\t\tcolor:'#186afe'\r\n          // \t\t}\r\n          // \t},\r\n          // \taxisLine:{\r\n          // \t\tlineStyle:{\r\n          // \t\t\tcolor:'#186afe'\r\n          // \t\t}\r\n          // \t},\r\n          // \taxisTick:{\r\n          //     \tshow:false,\r\n          //     },\r\n          // \tsplitLine:{\r\n          // \t\tshow:true,\r\n          // \t\tlineStyle:{\r\n          // \t\t\tcolor:'#11366e'\r\n          // \t\t}\r\n          // \t}\r\n          // }\r\n        ],\r\n        series: [\r\n          // {\r\n          // \tname:'已采纳',\r\n          // \ttype:'line',\r\n          // \tstack: '总量',\r\n          // \tsymbol:'circle',\r\n          // \tsymbolSize: 8,\r\n          //     itemStyle: {\r\n          //         normal: {\r\n          // \t\t\tcolor:'#0092f6',\r\n          //             lineStyle: {\r\n          // \t\t\t\tcolor: \"#0092f6\",\r\n          // \t\t\t\twidth:1\r\n          //             },\r\n          //             areaStyle: { \r\n          // \t\t\t\tcolor: '#94C9EC'\r\n          // \t\t\t\t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n          // \t\t\t\t// \toffset: 0,\r\n          // \t\t\t\t// \tcolor: 'rgba(7,44,90,0.3)'\r\n          // \t\t\t\t// }, {\r\n          // \t\t\t\t// \toffset: 1,\r\n          // \t\t\t\t// \tcolor: 'rgba(0,146,246,0.9)'\r\n          // \t\t\t\t// }]),\r\n          //             }\r\n          //         }\r\n          // \t},\r\n          // \tmarkPoint:{\r\n          // \t\titemStyle:{\r\n          // \t\t\tnormal:{\r\n          // \t\t\t\tcolor:'red'\r\n          // \t\t\t}\r\n          // \t\t}\r\n          // \t},\r\n          // \tdata:[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]\r\n          // },\r\n          {\r\n            name: '已发布',\r\n            type: 'line',\r\n            stack: '总量',\r\n            symbol: 'circle',\r\n            symbolSize: 8,\r\n\r\n            itemStyle: {\r\n              normal: {\r\n                color: '#00d4c7',\r\n                lineStyle: {\r\n                  color: \"#00d4c7\",\r\n                  width: 1\r\n                },\r\n                // areaStyle: { \r\n                // \tcolor: '#94C9EC'\r\n                // \t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n                // \t// \toffset: 0,\r\n                // \t// \tcolor: 'rgba(7,44,90,0.3)'\r\n                // \t// }, {\r\n                // \t// \toffset: 1,\r\n                // \t// \tcolor: 'rgba(0,212,199,0.9)'\r\n                // \t// }]),\r\n                // }\r\n              }\r\n            },\r\n            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]\r\n          },\r\n          // {\r\n          // \tname:'浏览量',\r\n          // \ttype:'line',\r\n          // \tstack: '总量',\r\n          // \tsymbol:'circle',\r\n          // \tsymbolSize: 8,\r\n          //     itemStyle: {\r\n          //         normal: {\r\n          //             color: '#aecb56',\r\n          //             lineStyle: {\r\n          // \t\t\t\tcolor: \"#aecb56\",\r\n          // \t\t\t\twidth:1\r\n          //             },\r\n          //             areaStyle: { \r\n          // \t\t\t\tcolor: '#94C9EC'\r\n          // \t\t\t\t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n          // \t\t\t\t// \toffset: 0,\r\n          // \t\t\t\t// \tcolor: 'rgba(7,44,90,0.3)'\r\n          // \t\t\t\t// }, {\r\n          // \t\t\t\t// \toffset: 1,\r\n          // \t\t\t\t// \tcolor: 'rgba(114,144,89,0.9)'\r\n          // \t\t\t\t// }]),\r\n          //             }\r\n          //         }\r\n          // \t},\r\n          // \tdata:[150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190]\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      const CubeLeft = this.$echarts.graphic.extendShape({\r\n        shape: {\r\n          x: 0,\r\n          y: 0\r\n        },\r\n        buildPath: function (ctx, shape) {\r\n          console.log(ctx, shape);\r\n          const yAxisPoint = shape.yAxisPoint\r\n          const c0 = [shape.x, shape.y]\r\n          const c1 = [shape.x + 9, shape.y - 9]\r\n          const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9]\r\n          const c3 = [yAxisPoint[0], yAxisPoint[1]]\r\n          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()\r\n        }\r\n      })\r\n      const CubeRight = this.$echarts.graphic.extendShape({\r\n        shape: {\r\n          x: 0,\r\n          y: 0\r\n        },\r\n        buildPath: function (ctx, shape) {\r\n          const yAxisPoint = shape.yAxisPoint\r\n          const c1 = [shape.x, shape.y]\r\n          const c2 = [yAxisPoint[0], yAxisPoint[1]]\r\n          const c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18]\r\n          const c4 = [shape.x + 9, shape.y + 18]\r\n          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()\r\n        }\r\n      })\r\n      const CubeTop = this.$echarts.graphic.extendShape({\r\n        shape: {\r\n          x: 0,\r\n          y: 0\r\n        },\r\n        buildPath: function (ctx, shape) {\r\n          const c1 = [shape.x, shape.y]\r\n          const c2 = [shape.x + 9, shape.y + 18]\r\n          const c3 = [shape.x + 18, shape.y + 9]\r\n          const c4 = [shape.x + 9, shape.y - 9]\r\n          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()\r\n        }\r\n      })\r\n      this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)\r\n      this.$echarts.graphic.registerShape('CubeRight', CubeRight)\r\n      this.$echarts.graphic.registerShape('CubeTop', CubeTop)\r\n      const MAX = [6000, 6000, 6000, 6000, 6000]\r\n      const VALUE = [2012, 1230, 3790, 2349, 1654]\r\n      const NAMES = ['德州', '德城区', '陵城区', '禹城市', '乐陵市'];\r\n      var option = {\r\n        title: {\r\n          text: '',\r\n          top: 32,\r\n          left: 18,\r\n          textStyle: {\r\n            color: '#00F6FF',\r\n            fontSize: 24\r\n          }\r\n        },\r\n        grid: {\r\n          left: 20,\r\n          right: 40,\r\n          bottom: '19%',\r\n          top: 107,\r\n          containLabel: true\r\n        },\r\n        yAxis: {\r\n          type: 'category',\r\n          data: NAMES,\r\n          axisLine: {\r\n            show: false,\r\n            lineStyle: {\r\n              color: 'white'\r\n            }\r\n          },\r\n          offset: 20,\r\n          axisTick: {\r\n            show: false,\r\n            length: 9,\r\n            alignWithLabel: true,\r\n            lineStyle: {\r\n              color: '#7DFFFD'\r\n            }\r\n          },\r\n          axisLabel: {\r\n            fontSize: 10\r\n          }\r\n        },\r\n        xAxis: {\r\n          type: 'value',\r\n          axisLine: {\r\n            show: false,\r\n            lineStyle: {\r\n              color: 'white'\r\n            }\r\n          },\r\n          splitLine: {\r\n            show: false\r\n          },\r\n          axisTick: {\r\n            show: false\r\n          },\r\n          axisLabel: {\r\n            show: false,\r\n            fontSize: 16\r\n          },\r\n          boundaryGap: ['20%', '20%']\r\n        },\r\n        series: [{\r\n          type: 'custom',\r\n          renderItem: function (params, api) {\r\n            const location = api.coord([api.value(0), api.value(1)])\r\n            return {\r\n              type: 'group',\r\n              children: [{\r\n                type: 'CubeLeft',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                style: {\r\n                  fill: 'rgba(7,29,97,.6)'\r\n                }\r\n              }, {\r\n                type: 'CubeRight',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                style: {\r\n                  fill: 'rgba(10,35,108,.7)'\r\n                }\r\n              }, {\r\n                type: 'CubeTop',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                style: {\r\n                  fill: 'rgba(11,42,106,.8)'\r\n                }\r\n              }]\r\n            }\r\n          },\r\n          data: MAX\r\n        },\r\n        {\r\n          type: 'custom',\r\n          renderItem: (params, api) => {\r\n            const location = api.coord([api.value(0), api.value(1)])\r\n            return {\r\n              type: 'group',\r\n              children: [{\r\n                type: 'CubeLeft',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                // style: {\r\n                //     fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n                //             offset: 0,\r\n                //             color: '#3B80E2'\r\n                //         },\r\n                //         {\r\n                //             offset: 1,\r\n                //             color: '#49BEE5'\r\n                //         }\r\n                //     ])\r\n                // }\r\n              }, {\r\n                type: 'CubeRight',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                // style: {\r\n                //     fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n                //             offset: 0,\r\n                //             color: '#3B80E2'\r\n                //         },\r\n                //         {\r\n                //             offset: 1,\r\n                //             color: '#49BEE5'\r\n                //         }\r\n                //     ])\r\n                // }\r\n              }, {\r\n                type: 'CubeTop',\r\n                shape: {\r\n                  api,\r\n                  xValue: api.value(0),\r\n                  yValue: api.value(1),\r\n                  x: location[0],\r\n                  y: location[1],\r\n                  yAxisPoint: api.coord([0, api.value(1)])\r\n                },\r\n                // style: {\r\n                //     fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n                //             offset: 0,\r\n                //             color: '#3B80E2'\r\n                //         },\r\n                //         {\r\n                //             offset: 1,\r\n                //             color: '#49BEE5'\r\n                //         }\r\n                //     ])\r\n                // }\r\n              }]\r\n            }\r\n          },\r\n          data: VALUE\r\n        },\r\n        {\r\n          type: 'bar',\r\n          label: {\r\n            normal: {\r\n              show: true,\r\n              position: 'right',\r\n              formatter: (e) => {\r\n                switch (e.name) {\r\n                  case '10kV线路':\r\n                    return VALUE[0]\r\n                  case '公用配变':\r\n                    return VALUE[1]\r\n                  case '35kV主变':\r\n                    return VALUE[2]\r\n                  case '水':\r\n\r\n                }\r\n              },\r\n              fontSize: 16,\r\n              color: '#fff',\r\n              offset: [25, 4]\r\n            }\r\n          },\r\n          itemStyle: {\r\n            color: 'transparent'\r\n          },\r\n          data: MAX\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          text: '3246',\r\n          subtext: '重点人员(人)',\r\n          x: 'center',\r\n          y: '43%',\r\n          textStyle: {\r\n            fontSize: 80,\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: ['140', '180'],\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: 32,\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: 32,\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    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(dataPbty) {\r\n      let dataListx = [];\r\n      let dataPb = [];\r\n      let dataGz = [];\r\n      let dataCf = [];\r\n      for (let i = 0; i < dataPbty.length; i++) {\r\n        dataListx.push(dataPbty[i].gds);\r\n        dataGz.push(dataPbty[i].gztytc);\r\n        dataPb.push(dataPbty[i].pbsl);\r\n        dataCf.push(dataPbty[i].cftytc);\r\n      }\r\n      var datacoords = [];\r\n      var datacoords1 = [];\r\n      for (var i = 0; i < dataListx.length; i++) {\r\n        datacoords.push([\r\n          {\r\n            coord: [i, dataGz[i]],\r\n          },\r\n          {\r\n            coord: [i + 1, dataGz[i + 1]],\r\n          },\r\n        ]);\r\n      }\r\n      for (var i = 0; i < dataListx.length; i++) {\r\n        datacoords1.push([\r\n          {\r\n            coord: [i, dataCf[i]],\r\n          },\r\n          {\r\n            coord: [i + 1, dataCf[i + 1]],\r\n          },\r\n        ]);\r\n      }\r\n      let that = this;\r\n      let myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\r\n      var option = {\r\n        animation: true, //控制动画示否开启\r\n        animationDuration: 2000,\r\n        animationEasing: \"bounceOut\", //缓动动画\r\n        animationThreshold: 8, //动画元素的阈值\r\n        grid: {\r\n          top: \"15%\",\r\n          bottom: \"30%\", //也可设置left和right设置距离来控制图表的大小\r\n        },\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          axisPointer: {\r\n            type: \"shadow\",\r\n            label: {\r\n              show: true,\r\n            },\r\n          },\r\n        },\r\n        legend: {\r\n          data: [\"配变数量\", \"故障停运\", \"重复停运\"],\r\n          top: \"0%\",\r\n          //  icon:'roundRect',\r\n          //  itemHeight:2, // 粗细\r\n          textStyle: {\r\n            color: \"#ffffff\",\r\n          },\r\n        },\r\n        xAxis: {\r\n          data: dataListx,\r\n          axisLine: {\r\n            show: false, //隐藏X轴轴线\r\n            lineStyle: {\r\n              color: \"#01FCE3\",\r\n            },\r\n          },\r\n          axisTick: {\r\n            show: false, //隐藏X轴刻度\r\n          },\r\n          axisLabel: {\r\n            show: true,\r\n            interval: 0,\r\n            textStyle: {\r\n              color: \"#ffffff\", //X轴文字颜色\r\n              fontSize: \"16px\",\r\n            },\r\n          },\r\n        },\r\n        yAxis: [\r\n          {\r\n            type: \"value\",\r\n            name: \"配变数量\",\r\n            nameTextStyle: {\r\n              color: \"#ffffff\",\r\n              padding: [0, 30, 0, 0],\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n              lineStyle: {\r\n                color: \"#FFFFFF\",\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              interval: 0,\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: \"value\",\r\n            name: \"停运台次\",\r\n            nameTextStyle: {\r\n              color: \"#ffffff\",\r\n            },\r\n            position: \"right\",\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n\r\n              // formatter: \"{value} %\", //右侧Y轴文字显示\r\n              textStyle: {\r\n                color: \"#ffffff\",\r\n              },\r\n            },\r\n          },\r\n          {\r\n            type: \"value\",\r\n            gridIndex: 0,\r\n            min: 50,\r\n            max: 100,\r\n            splitNumber: 8,\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            axisLabel: {\r\n              show: false,\r\n            },\r\n            splitArea: {\r\n              show: true,\r\n              areaStyle: {\r\n                color: [\"rgba(250,250,250,0.0)\", \"rgba(250,250,250,0.05)\"],\r\n              },\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"故障停运\",\r\n            type: \"line\",\r\n            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用\r\n            smooth: false, //平滑曲线显示\r\n            showAllSymbol: true, //显示所有图形。\r\n            shadowOffsetX: 0, // 折线的X偏移\r\n            shadowOffsetY: 10, // 折线的Y偏移\r\n            symbol: \"circle\", //标记的图形为实心圆\r\n            symbolSize: 1, //标记的大小\r\n            itemStyle: {\r\n              //折线拐点标志的样式\r\n              color: \"rgb(237,125,49)\",\r\n            },\r\n            lineStyle: {\r\n              color: \"rgb(237,125,49)\",\r\n            },\r\n            // areaStyle: {\r\n            //   show:false,\r\n            //   color: \"rgba(5,140,255, 0.2)\",\r\n            // },\r\n            emphasis: {\r\n              focus: \"series\",\r\n            },\r\n            data: dataGz,\r\n          },\r\n          {\r\n            showSymbol: false,\r\n            name: \"故障停运\",\r\n            type: \"lines\",\r\n            yAxisIndex: 1,\r\n            polyline: true,\r\n            smooth: false,\r\n            coordinateSystem: \"cartesian2d\",\r\n            zlevel: 1,\r\n            effect: {\r\n              show: true,\r\n              smooth: false,\r\n              period: 6,\r\n              trailLenth: 0.1,\r\n              symbolSize: 6,\r\n              symbol: \"circle\",\r\n            },\r\n            lineStyle: {\r\n              color: \"#fff\",\r\n              width: 1,\r\n              opacity: 0,\r\n              curveness: 0,\r\n              cap: \"round\",\r\n            },\r\n            data: datacoords,\r\n          },\r\n          {\r\n            name: \"重复停运\",\r\n            type: \"line\",\r\n            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用\r\n            smooth: false, //平滑曲线显示\r\n            shadowOffsetX: 0, // 折线的X偏移\r\n            shadowOffsetY: 10, // 折线的Y偏移\r\n            showAllSymbol: true, //显示所有图形。\r\n            symbol: \"circle\", //标记的图形为实心圆\r\n            symbolSize: 1, //标记的大小\r\n            itemStyle: {\r\n              //折线拐点标志的样式\r\n              show: false,\r\n              color: \"#058cff\",\r\n            },\r\n            lineStyle: {\r\n              show: false,\r\n              color: \"#058cff\",\r\n            },\r\n            // areaStyle: {\r\n            //   show:false,\r\n            //   color: \"rgba(5,140,255, 0.2)\",\r\n            // },\r\n            data: dataCf,\r\n          },\r\n          {\r\n            showSymbol: false,\r\n            name: \"重复停运\",\r\n            type: \"lines\",\r\n            yAxisIndex: 1,\r\n            polyline: true,\r\n            smooth: false,\r\n            coordinateSystem: \"cartesian2d\",\r\n            zlevel: 1,\r\n            effect: {\r\n              show: true,\r\n              smooth: false,\r\n              period: 6,\r\n              trailLenth: 0.1,\r\n              symbolSize: 6,\r\n              symbol: \"circle\",\r\n            },\r\n            lineStyle: {\r\n              color: \"#fff\",\r\n              width: 1,\r\n              opacity: 0,\r\n              curveness: 0,\r\n              cap: \"round\",\r\n            },\r\n            data: datacoords1,\r\n          },\r\n          {\r\n            name: \"配变数量\",\r\n            type: \"bar\",\r\n            barWidth: 15,\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              },\r\n            },\r\n            data: dataPb,\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\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\r\n    .table {\r\n      width: 100%;\r\n      padding: 20px 14px 0 14px;\r\n      box-sizing: border-box;\r\n      height: calc(100% - 52px);\r\n    }\r\n\r\n    .one {\r\n      background: url(\"../assets/images/ditu.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n      position: relative;\r\n\r\n      .unityBtn {\r\n        position: absolute;\r\n        top: 40px;\r\n        left: 30%;\r\n        width: 40%;\r\n        display: flex;\r\n        justify-content: space-between;\r\n\r\n        .btn {\r\n          width: 100%;\r\n          height: 38px;\r\n          color: #fff;\r\n          font-size: 18px;\r\n          line-height: 38px;\r\n          background: url(\"../assets/images/btnAct.png\") no-repeat;\r\n          background-size: 100% 100%;\r\n          margin-bottom: 10px;\r\n          margin-right: 15px;\r\n        }\r\n\r\n        .btnAct {\r\n          color: rgb(244, 201, 7);\r\n          background: url(\"../assets/images/unityBtn.png\") no-repeat;\r\n          background-size: 100% 100%;\r\n          margin-right: 15px;\r\n        }\r\n      }\r\n\r\n      .unityIcon {\r\n        background: url(\"../assets/images/iconCard.png\") no-repeat;\r\n        background-size: 100% 100%;\r\n        width: 110px;\r\n        height: 168px;\r\n        position: absolute;\r\n        right: 40px;\r\n        bottom: 80px;\r\n        display: flex;\r\n        -webkit-box-orient: vertical;\r\n        -webkit-box-direction: normal;\r\n        flex-direction: column;\r\n        justify-content: space-around;\r\n        align-items: center;\r\n\r\n        .unityIconGround {\r\n          width: 80%;\r\n          display: flex;\r\n          justify-content: space-between;\r\n          align-items: center;\r\n        }\r\n      }\r\n\r\n      .unityEnlargeBtn {\r\n        width: 100px;\r\n        display: flex;\r\n        justify-content: space-around;\r\n        position: absolute;\r\n        right: 40px;\r\n        top: 40px;\r\n\r\n        .content {\r\n          width: 38px;\r\n          height: 36px;\r\n          background: url(\"../assets/images/btnkuang.png\") no-repeat !important;\r\n          background-size: 100% 100% !important;\r\n        }\r\n      }\r\n\r\n      .unitySelect {\r\n        position: absolute;\r\n        left: 40px;\r\n        width: 222px;\r\n        height: 5%;\r\n        bottom: 20px;\r\n        display: flex;\r\n        align-items: center;\r\n\r\n        .unitySuosou {\r\n          width: 57px;\r\n          height: 53px;\r\n          background: url(\"../assets/images/sousuoKuang.png\") no-repeat;\r\n          background-size: 100% 100%;\r\n        }\r\n      }\r\n    }\r\n\r\n    .two {\r\n      #detailedOne {\r\n        width: 100%;\r\n        height: calc(100% - 100px) !important;\r\n        z-index: 2;\r\n        margin-top: -3%;\r\n      }\r\n    }\r\n\r\n    .detailed {\r\n      display: flex;\r\n      flex-flow: row nowrap;\r\n      justify-content: space-between;\r\n\r\n      &>div {\r\n        background: url(\"../assets/images/detailedCard.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/detailed.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    }\r\n\r\n    //  ...\r\n    .detailedOneList {\r\n      display: flex;\r\n      flex-direction: row;\r\n      justify-content: flex-start;\r\n      height: 14%;\r\n      align-items: center;\r\n      color: #ffffff;\r\n      background: url(\"../assets/images/tableBg.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n      width: 92%;\r\n      z-index: 1;\r\n      position: relative;\r\n    }\r\n\r\n    #detailedFour {\r\n      width: 100%;\r\n      height: calc(100% - 52px);\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\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\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% - 52px);\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\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\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% - 52px);\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  }\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}\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>"]}]}