{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js!E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\HomePop\\ringMainUnit.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\HomePop\\ringMainUnit.vue","mtime":1689642397095},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\babel.config.js","mtime":1689642387810},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js","mtime":1689642388897},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1689642396086}],"contextDependencies":[],"result":["import \"core-js/modules/es6.object.keys\";\nimport \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/web.dom.iterable\";\nimport { getDevice, getCabinetInfo, getCabinetList, getCabinetData, getCabinetCameraList, getCabinetPointHistory } from \"../../api/index.js\";\nimport JSMpeg from \"../../util/jsmpeg.min\";\nimport axios from \"axios\";\n// import JSMpeg from 'jsmpeg'\nexport default {\n  name: \"ringMainUnit\",\n  props: [\"ringMainUnit\"],\n  data: function data() {\n    return {\n      echartsShow: true,\n      //\n      fenzhiArr: [\"电压/KV\", \"电流/A\", \"温度/℃\"],\n      JSMpeg: null,\n      //视频\n      player: null,\n      webRtcServer: null,\n      rtsp: \"\",\n      //红外视频地址\n      rtsp1: \"\",\n      //普通视频地址\n      waterLevel: \"\",\n      //水位值\n      waterLevel1: \"\",\n      //水位告警\n      grounding: \"\",\n      photoShow: true,\n      videoShow: false,\n      videoShow1: false,\n      deviceId: \"\",\n      tabPosition: \"left\",\n      activeName: \"first\",\n      intervalName: \"interval1\",\n      intervalName1: \"\",\n      InfraredName: \"first\",\n      vectorgraphData: [{\n        vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\n        name: \"现场照片\",\n        color: \"rgb(60,127,127)\"\n      }, {\n        vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\n        name: \"红外视频\",\n        color: \"rgb(60,127,127)\"\n      }, {\n        vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\n        name: \"普通视频\",\n        color: \"rgb(60,127,127)\"\n      }],\n      tableData1: [],\n      tableData: [{\n        name: \"\",\n        phase: \"Uab\",\n        interval1: \"220\",\n        interval2: \"220\",\n        interval3: \"220\",\n        interval4: \"220\",\n        interval5: \"220\",\n        interval6: \"220\",\n        interval7: \"220\",\n        interval8: \"220\"\n      }, {\n        name: \"电压/V\",\n        phase: \"Ubc\",\n        interval1: \"220\",\n        interval2: \"220\",\n        interval3: \"220\",\n        interval4: \"220\",\n        interval5: \"220\",\n        interval6: \"220\",\n        interval7: \"220\",\n        interval8: \"220\"\n      }, {\n        name: \"\",\n        phase: \"Uca\",\n        interval1: \"220\",\n        interval2: \"220\",\n        interval3: \"220\",\n        interval4: \"220\",\n        interval5: \"220\",\n        interval6: \"220\",\n        interval7: \"220\",\n        interval8: \"220\"\n      }, {\n        name: \"\",\n        phase: \"A\",\n        interval1: \"21\",\n        interval2: \"25\",\n        interval3: \"23\",\n        interval4: \"27\",\n        interval5: \"24\",\n        interval6: \"28\",\n        interval7: \"22\",\n        interval8: \"21\"\n      }, {\n        name: \"电流/A\",\n        phase: \"B\",\n        interval1: \"25\",\n        interval2: \"20\",\n        interval3: \"24\",\n        interval4: \"23\",\n        interval5: \"24\",\n        interval6: \"22\",\n        interval7: \"21\",\n        interval8: \"29\"\n      }, {\n        name: \"\",\n        phase: \"C\",\n        interval1: \"21\",\n        interval2: \"25\",\n        interval3: \"23\",\n        interval4: \"27\",\n        interval5: \"24\",\n        interval6: \"28\",\n        interval7: \"22\",\n        interval8: \"21\"\n      }, {\n        name: \"\",\n        phase: \"A\",\n        interval1: \"21\",\n        interval2: \"25\",\n        interval3: \"23\",\n        interval4: \"27\",\n        interval5: \"24\",\n        interval6: \"28\",\n        interval7: \"22\",\n        interval8: \"21\"\n      }, {\n        name: \"温度/℃\",\n        phase: \"B\",\n        interval1: \"25\",\n        interval2: \"20\",\n        interval3: \"24\",\n        interval4: \"23\",\n        interval5: \"24\",\n        interval6: \"22\",\n        interval7: \"21\",\n        interval8: \"29\"\n      }, {\n        name: \"\",\n        phase: \"C\",\n        interval1: \"25\",\n        interval2: \"20\",\n        interval3: \"24\",\n        interval4: \"23\",\n        interval5: \"24\",\n        interval6: \"22\",\n        interval7: \"21\",\n        interval8: \"29\"\n      }],\n      tableColumns: [{\n        name: \"间隔1\"\n      }, {\n        name: \"间隔2\"\n      }, {\n        name: \"间隔3\"\n      }, {\n        name: \"间隔4\"\n      }],\n      echartsTab: [],\n      echartsTab1: [],\n      echartsData: {\n        time: [\"0点\", \"1点\", \"2点\", \"3点\", \"4点\", \"5点\", \"6点\", \"7点\", \"8点\", \"9点\", \"10点\", \"11点\", \"12点\", \"13点\", \"14点\", \"15点\", \"16点\", \"17点\", \"18点\", \"19点\", \"20点\", \"21点\", \"22点\", \"23点\"],\n        num: []\n      },\n      photoList: [{\n        photo: \"\"\n      }],\n      deviceInformation: {},\n      equipmentName: \"\",\n      deviceSn: \"\",\n      partialDischarge: [],\n      //局放数据\n      totalInterval: \"\",\n      tabName: '',\n      //选择温度tab\n      temperatureChildDataA: [],\n      temperatureChildDataB: [],\n      temperatureChildDataC: [],\n      voltageDataAB: [],\n      voltageDataBC: [],\n      voltageDataCA: []\n    };\n  },\n  mounted: function mounted() {\n    var _this = this;\n    var that = this;\n    //sssss\n    getDevice({\n      action: \"querydevice\",\n      device_name: this.ringMainUnit\n    }).then(function (res) {\n      if (res.data.data != null) {\n        _this.deviceInformation = res.data.data.device;\n      }\n    });\n    this.equipmentName = this.ringMainUnit.substring(this.ringMainUnit.length - 3, this.ringMainUnit.length);\n    if (this.equipmentName.substring(this.equipmentName.length - 2, this.equipmentName.length) == \"箱变\") {\n      this.equipmentName = \"箱变\";\n    }\n    this.getDeviceData();\n    if (this.ringMainUnit != \"金盾FH9环网柜\") {\n      window.setTimeout(function () {\n        var tab = {\n          index: 0,\n          name: \"interval1\"\n        };\n        _this.intervalClick(tab);\n      }, 1000);\n    } else {\n      window.setTimeout(function () {\n        var tab = {\n          index: 1,\n          name: \"interval2\"\n        };\n        _this.intervalClick(tab);\n      }, 1000);\n    }\n  },\n  //  beforeDestroy() {\n  //   this.webRtcServer.disconnect();\n  //   this.webRtcServer = null;\n  // },\n  // beforeDestroy () {\n  //   // 页面销毁前 关闭flvjs\n  //   this.player.destroy()\n  // },\n  methods: {\n    //查询所有网柜信息\n    getDeviceData: function getDeviceData() {\n      var _this2 = this;\n      var params = {\n        pageSize: 50,\n        token: localStorage.getItem(\"token\")\n      };\n      getCabinetList(params).then(function (res) {\n        res.data.data.data.forEach(function (item, index) {\n          if (item.name == _this2.ringMainUnit) {\n            _this2.deviceSn = item.sn;\n          }\n        });\n        //查询单个网柜\n        var data = {\n          sn: _this2.deviceSn,\n          token: localStorage.getItem(\"token\")\n        };\n        //现场图片\n        getCabinetInfo(data).then(function (res) {\n          console.log(res.data.data, \"Jieguo\");\n        });\n        //间隔监测\n        getCabinetData(data).then(function (res) {\n          var units = [];\n          console.log(res.data.data, '---------');\n          Object.keys(res.data.data.units).map(function (item, index) {\n            if (res.data.data.units[item].name.indexOf(\"开关\") != -1) {\n              units.push(res.data.data.units[item]);\n            }\n          });\n          _this2.tableColumns = Object.keys(units).map(function (x, y) {\n            var heardName = [];\n            heardName.push(heardName = \"间隔\" + units[x].name.substring(0, 1));\n            return {\n              name: heardName,\n              key: \"interval\" + units[x].name.substring(0, 1)\n            };\n          });\n          _this2.totalInterval = _this2.tableColumns.length;\n          _this2.echartsTab = Object.keys(units).map(function (x, y) {\n            var heardName = [];\n            heardName.push(heardName = \"间隔\" + units[x].name.substring(0, 1) + \"局放数据\");\n            return {\n              name: heardName,\n              key: \"interval\" + units[x].name.substring(0, 1)\n            };\n          });\n          _this2.echartsTab1 = Object.keys(units).map(function (x, y) {\n            var heardName = [];\n            heardName.push(heardName = \"间隔\" + units[x].name.substring(0, 1) + \"温度数据\");\n            return {\n              name: heardName,\n              key: \"interval\" + units[x].name.substring(0, 1)\n            };\n          });\n          var electricCurrentA = [];\n          var electricCurrentB = [];\n          var electricCurrentC = [];\n          // let voltageA = []\n          // let voltageB = []\n          // let voltageC = []\n          res.data.data.units.forEach(function (item, index) {\n            res.data.data.yc.forEach(function (n, i) {\n              if (n.name == \"温度\") {\n                n.child.forEach(function (z, j) {\n                  if (item.name == z.point_name.substring(0, 4) && z.point_name.indexOf(\"A\") != -1) {\n                    _this2.temperatureChildDataA.push(z);\n                  }\n                  if (item.name == z.point_name.substring(0, 4) && z.point_name.indexOf(\"B\") != -1) {\n                    _this2.temperatureChildDataB.push(z);\n                  }\n                  if (item.name == z.point_name.substring(0, 4) && z.point_name.indexOf(\"C\") != -1) {\n                    _this2.temperatureChildDataC.push(z);\n                  }\n                });\n              } else if (n.name == \"电流\") {\n                n.child.forEach(function (z, j) {\n                  if (item.name == z.point_name.substring(0, 4) && z.point_name.indexOf(\"a\") != -1) {\n                    electricCurrentA.push(z);\n                  }\n                  if (item.name == z.point_name.substring(0, 4) && z.point_name.indexOf(\"b\") != -1) {\n                    electricCurrentB.push(z);\n                  }\n                  if (item.name == z.point_name.substring(0, 4) && z.point_name.indexOf(\"c\") != -1) {\n                    electricCurrentC.push(z);\n                  }\n                });\n              } else if (n.name == \"局放\") {\n                n.child.forEach(function (z, j) {\n                  if (item.name == z.point_name.substring(0, 4) && z.point_name.indexOf(\"均值\") != -1) {\n                    _this2.partialDischarge.push(z);\n                  }\n                });\n              } else if (n.name == \"水位\") {\n                n.child.forEach(function (z, j) {\n                  _this2.waterLevel = z.value;\n                });\n              } else if (n.name == \"电压\") {\n                n.child.forEach(function (z, j) {\n                  if (z.point_name.indexOf(\"Uab\") != -1) {\n                    _this2.voltageDataAB.push(z);\n                  }\n                  if (z.point_name.indexOf(\"Ubc\") != -1) {\n                    _this2.voltageDataBC.push(z);\n                  }\n                  if (z.point_name.indexOf(\"Uca\") != -1) {\n                    _this2.voltageDataCA.push(z);\n                  }\n                });\n              }\n            });\n          });\n          //表格电流\n          for (var i = 0; i < electricCurrentA.length; i++) {\n            var interval = \"interval\" + electricCurrentA[i].point_name.substring(0, 1);\n            _this2.tableData[3][interval] = electricCurrentA[i].value;\n          }\n          for (var _i = 0; _i < electricCurrentB.length; _i++) {\n            var _interval = \"interval\" + electricCurrentB[_i].point_name.substring(0, 1);\n            _this2.tableData[4][_interval] = electricCurrentB[_i].value;\n          }\n          for (var _i2 = 0; _i2 < electricCurrentC.length; _i2++) {\n            var _interval2 = \"interval\" + electricCurrentC[_i2].point_name.substring(0, 1);\n            _this2.tableData[5][_interval2] = electricCurrentC[_i2].value;\n          }\n          //电压\n          for (var _i3 = 0; _i3 < _this2.voltageDataAB.length; _i3++) {\n            for (var j = 0; j < units.length; j++) {\n              var _interval3 = \"interval\" + units[j].name.substring(0, 1);\n              _this2.tableData[0][_interval3] = _this2.voltageDataAB[_i3].value + ' kV';\n            }\n          }\n          for (var _i4 = 0; _i4 < _this2.voltageDataBC.length; _i4++) {\n            for (var _j = 0; _j < units.length; _j++) {\n              var _interval4 = \"interval\" + units[_j].name.substring(0, 1);\n              _this2.tableData[1][_interval4] = _this2.voltageDataBC[_i4].value + ' kV';\n            }\n          }\n          for (var _i5 = 0; _i5 < _this2.voltageDataCA.length; _i5++) {\n            for (var _j2 = 0; _j2 < units.length; _j2++) {\n              var _interval5 = \"interval\" + units[_j2].name.substring(0, 1);\n              _this2.tableData[2][_interval5] = _this2.voltageDataCA[_i5].value + ' kV';\n            }\n          }\n          //警告\n          res.data.data.yx.forEach(function (item, index) {\n            if (item.name == \"水位告警\") {\n              _this2.waterLevel1 = item.child[0].value;\n            } else if (item.name == \"接地告警\") {\n              _this2.grounding = item.child[0].value;\n            }\n          });\n          _this2.getIntervalTep(null);\n        });\n      });\n    },\n    handleClick: function handleClick(tab) {\n      var _this3 = this;\n      var that = this;\n      if (tab.index == 0) {\n        this.activeName = \"first\";\n        this.$nextTick(function () {\n          var tab = {\n            name: 'interval1'\n          };\n          _this3.intervalClick(tab);\n        });\n      } else if (tab.index == 1) {\n        this.activeName = \"second\";\n        this.photoShow = true;\n        this.videoShow = false;\n        this.videoShow1 = false;\n        this.InfraredClick(0);\n        getDevice({\n          action: \"querydevice\",\n          device_name: that.ringMainUnit\n        }).then(function (res) {\n          if (res.data.data.pic != null) {\n            _this3.photoList = Object.keys(res.data.data.pic).map(function (item, index) {\n              var photoUrl = res.data.data.pic[index].url;\n              return {\n                photo: photoUrl\n              };\n            });\n          }\n        });\n      }\n    },\n    //echarts切换\n    intervalClick: function intervalClick(tab) {\n      if (tab != null) {\n        this.intervalName = tab.name;\n        this.intervalName1 = '';\n        var echartsData = [];\n        // let index = Number(tab.index) + 1;\n        var index = tab.name.substring(8, 9);\n        for (var i = 0; i < this.partialDischarge.length; i++) {\n          if (this.partialDischarge[i].point_name.substring(0, 4).indexOf(index) != -1) {\n            echartsData.push(this.partialDischarge[i]);\n          }\n        }\n        this.intervalShow(echartsData);\n        this.echartsShow = true;\n      } else {\n        this.intervalShow(null);\n      }\n    },\n    intervalClick1: function intervalClick1(tab) {\n      this.intervalName = '';\n      this.intervalName1 = tab.name;\n      this.echartsShow = false;\n      if (tab != null) {\n        this.getIntervalTep(tab.name);\n      } else {\n        this.getIntervalTep(null);\n      }\n    },\n    //获取间隔温度\n    getIntervalTep: function getIntervalTep(tabName) {\n      var _this4 = this;\n      var dataA = [];\n      var dataB = [];\n      var dataC = [];\n      var time = [];\n      //表格温度\n      for (var i = 0; i < this.temperatureChildDataA.length; i++) {\n        var interval = \"interval\" + this.temperatureChildDataA[i].point_name.substring(0, 1);\n        this.tableData[6][interval] = this.temperatureChildDataA[i].value;\n        if (tabName == interval) {\n          var data = {\n            token: localStorage.getItem(\"token\"),\n            sn: this.deviceSn,\n            point: this.temperatureChildDataA[i].point_id,\n            date: this.$moment().format(\"YYYY-MM-DD\")\n          };\n          getCabinetPointHistory(data).then(function (res) {\n            for (var _i6 = 0; _i6 < res.data.data.value.length; _i6++) {\n              dataA.push(parseInt(res.data.data.value[_i6]));\n            }\n          });\n        }\n      }\n      for (var _i7 = 0; _i7 < this.temperatureChildDataB.length; _i7++) {\n        var _interval6 = \"interval\" + this.temperatureChildDataB[_i7].point_name.substring(0, 1);\n        this.tableData[7][_interval6] = this.temperatureChildDataB[_i7].value;\n        if (tabName == _interval6) {\n          var _data = {\n            token: localStorage.getItem(\"token\"),\n            sn: this.deviceSn,\n            point: this.temperatureChildDataA[_i7].point_id,\n            date: this.$moment().format(\"YYYY-MM-DD\")\n          };\n          getCabinetPointHistory(_data).then(function (res) {\n            for (var _i8 = 0; _i8 < res.data.data.value.length; _i8++) {\n              dataB.push(parseInt(res.data.data.value[_i8]));\n            }\n          });\n        }\n      }\n      for (var _i9 = 0; _i9 < this.temperatureChildDataC.length; _i9++) {\n        var _interval7 = \"interval\" + this.temperatureChildDataC[_i9].point_name.substring(0, 1);\n        this.tableData[8][_interval7] = this.temperatureChildDataC[_i9].value;\n        if (tabName == _interval7) {\n          var _data2 = {\n            token: localStorage.getItem(\"token\"),\n            sn: this.deviceSn,\n            point: this.temperatureChildDataA[_i9].point_id,\n            date: this.$moment().format(\"YYYY-MM-DD\")\n          };\n          getCabinetPointHistory(_data2).then(function (res) {\n            for (var _i10 = 0; _i10 < res.data.data.value.length; _i10++) {\n              dataC.push(parseInt(res.data.data.value[_i10]));\n            }\n            for (var _i11 = 0; _i11 < res.data.data.time.length; _i11++) {\n              time.push(parseInt(res.data.data.time[_i11]));\n            }\n            setTimeout(function () {\n              _this4.$nextTick(function () {\n                _this4.temperatureShow(dataA, dataB, dataC, time);\n              });\n            }, 100);\n          });\n        }\n      }\n    },\n    //视频切换\n    InfraredClick: function InfraredClick(index) {\n      var _this5 = this;\n      var data = {\n        sn: this.deviceSn,\n        token: localStorage.getItem(\"token\")\n      };\n      if (index == 1) {\n        var that = this;\n        Object.keys(this.vectorgraphData).forEach(function (key) {\n          _this5.vectorgraphData[key].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\n          _this5.vectorgraphData[key].color = \"rgb(60,127,127)\";\n          if (key == index) {\n            _this5.vectorgraphData[index].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\n            _this5.vectorgraphData[index].color = \"#56fefe\";\n            _this5.photoShow = false;\n            _this5.videoShow = true;\n            _this5.videoShow1 = false;\n            //这里的port要与index.js的port保持一致\n            //解析视频流\n            //视频数据\n            getCabinetCameraList(data).then(function (res) {\n              console.log(res.data.data, \"视频\");\n              _this5.rtsp = res.data.data[1].url;\n              _this5.$nextTick(function () {\n                _this5.JSMpeg = new JSMpeg.Player(\"ws://localhost:9999/rtsp?url=\" + btoa(_this5.rtsp), {\n                  canvas: document.getElementById(\"canvas\")\n                });\n              });\n            });\n\n            // let video = document.getElementById('video')\n            //  try{\n            //    if ('srcObject' in video) {\n            //      video.srcObject = null;\n            //  this.webRtcServer = new WebRtcStreamer(\n            //     \"video\",\n            //     location.protocol + \"//127.0.0.1:8000\"\n            //   );\n            // //   //需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用\n            //   this.webRtcServer.connect(\n            //     \"rtsp://221.231.99.214:554/cam=109/channel=0\"\n            //   );\n            //       this.webRtcServer.connect(\n            //         \"rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4\"\n            //       );\n            //    }else{\n            //      video.src = null;\n            //    }\n\n            //  }catch(e){\n            //       console.log(e)\n            //     }\n          }\n        });\n      } else if (index == 0) {\n        var _that = this;\n        Object.keys(this.vectorgraphData).forEach(function (key) {\n          _this5.vectorgraphData[key].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\n          _this5.vectorgraphData[key].color = \"rgb(60,127,127)\";\n          if (key == index) {\n            _this5.vectorgraphData[index].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\n            _this5.vectorgraphData[index].color = \"#56fefe\";\n            _this5.photoShow = true, _this5.videoShow = false;\n            _this5.videoShow1 = false;\n          }\n        });\n      } else if (index == 2) {\n        var _that2 = this;\n        Object.keys(this.vectorgraphData).forEach(function (key) {\n          _this5.vectorgraphData[key].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\n          _this5.vectorgraphData[key].color = \"rgb(60,127,127)\";\n          if (key == index) {\n            _this5.vectorgraphData[index].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\n            _this5.vectorgraphData[index].color = \"#56fefe\";\n            _this5.photoShow = false;\n            _this5.videoShow = false;\n            _this5.videoShow1 = true;\n            //这里的port要与index.js的port保持一致\n            //解析视频流\n            getCabinetCameraList(data).then(function (res) {\n              console.log(res.data.data, \"视频\");\n              _this5.rtsp1 = res.data.data[0].url;\n              _this5.JSMpeg = new JSMpeg.Player(\"ws://localhost:9999/rtsp?url=\" + btoa(_this5.rtsp1), {\n                canvas: document.getElementById(\"canvas1\")\n              });\n            });\n          }\n        });\n      }\n    },\n    closeJSMpeg: function closeJSMpeg() {\n      //销毁\n      this.JSMpeg.destroy();\n    },\n    handleClose: function handleClose() {\n      this.$parent.componentShow = \"\";\n      this.$parent.modelOthers = false;\n      // this.$emit(\"closeStatus\", this.closeStatus)\n      this.rtsp = \"\";\n      this.rtsp1 = \"\";\n      if (this.JSMpeg != null) {\n        this.closeJSMpeg();\n      }\n    },\n    //局放图\n    intervalShow: function intervalShow(InintervalData) {\n      var num = [];\n      var time = [];\n      if (InintervalData != null && InintervalData != []) {\n        for (var i in InintervalData[0].hour_data) {\n          num.push(InintervalData[0].hour_data[i]);\n          time.push(i);\n        }\n        this.echartsData.num = num;\n        this.echartsData.time = time;\n      }\n      var that = this;\n      var data = this.echartsData;\n      var myChart = this.$echarts.init(document.getElementById(\"intervalShow\"));\n      var option = {\n        tooltip: {\n          trigger: \"axis\",\n          formatter: function formatter(params) {\n            return '时间：' + params[0].name + '<br/>' + '局放数据：' + params[0].value + 'dbm';\n          }\n        },\n        grid: {\n          top: \"10%\",\n          left: \"3%\",\n          right: \"3%\",\n          bottom: \"10%\"\n          // containLabel: true\n        },\n\n        xAxis: [{\n          type: \"category\",\n          boundaryGap: true,\n          axisLine: {\n            //坐标轴轴线相关设置。数学上的x轴\n            show: true,\n            lineStyle: {\n              color: 'color:\"#93dcfe\"'\n            }\n          },\n          axisLabel: {\n            //坐标轴刻度标签的相关设置\n            textStyle: {\n              color: \"#93dcfe\",\n              margin: 15\n            },\n            formatter: function formatter(data) {\n              return data;\n            }\n          },\n          axisTick: {\n            show: false\n          },\n          data: data.time\n        }],\n        yAxis: [{\n          //   min: 0,\n          //   max: 100,\n          name: \"dbm\",\n          splitLine: {\n            show: true,\n            lineStyle: {\n              color: \"rgba(147,220,254,0.3)\"\n            }\n          },\n          axisLine: {\n            show: false,\n            lineStyle: {\n              color: \"#93dcfe\"\n            }\n          },\n          axisLabel: {\n            show: true,\n            textStyle: {\n              color: \"#93dcfe\"\n            }\n            // formatter: function (value) {\n            //   if (value === 0) {\n            //     return value;\n            //   }\n            //   return value + \"%\";\n            // },\n          },\n\n          axisTick: {\n            show: false\n          }\n        }],\n        series: [{\n          name: \"局放数据\",\n          type: \"line\",\n          symbol: \"circle\",\n          // 默认是空心圆（中间是白色的），改成实心圆\n          showAllSymbol: true,\n          symbolSize: 8,\n          lineStyle: {\n            normal: {\n              color: \"#1f93fa\" // 线条颜色\n            },\n\n            borderColor: \"rgba(0,0,0,.4)\"\n          },\n          itemStyle: {\n            color: \"#1f93fa\",\n            borderColor: \"#1f93fa\",\n            borderWidth: 2\n          },\n          label: {\n            normal: {\n              show: false,\n              position: \"top\",\n              formatter: [\" {a|{c}%}\"].join(\",\"),\n              rich: {\n                a: {\n                  color: \"#fff\",\n                  align: \"center\"\n                }\n              }\n            }\n          },\n          tooltip: {\n            show: true\n          },\n          data: data.num\n        }]\n      };\n      myChart.setOption(option);\n    },\n    //图\n    temperatureShow: function temperatureShow(dataA, dataB, dataC, date) {\n      var numA = dataA;\n      var time = date;\n      var numB = dataB;\n      var numC = dataC;\n      // if (temperatureData != null && temperatureData != []) {\n      //   for (const i in temperatureData[0].hour_data) {\n      //     num.push(temperatureData[0].hour_data[i]);\n      //     time.push(i);\n      //   }\n      //   this.echartsData.num = num;\n      //   this.echartsData.time = time;\n      // }\n      var that = this;\n      // var data = this.echartsData;\n      var myChart = this.$echarts.init(document.getElementById(\"temperatureShow\"));\n      var option = {\n        tooltip: {\n          trigger: \"axis\",\n          formatter: function formatter(params) {\n            return '时间：' + params[0].name + '<br/>' + '温度A：' + params[0].value + '℃' + '<br/>' + '温度B：' + params[1].value + '℃' + '<br/>' + '温度C：' + params[2].value + '℃';\n          }\n        },\n        legend: {\n          origin: 'horizontal',\n          textStyle: {\n            color: \"#fff\",\n            fontSize: \"18px\"\n          }\n        },\n        grid: {\n          top: \"10%\",\n          left: \"3%\",\n          right: \"3%\",\n          bottom: \"10%\"\n          // containLabel: true\n        },\n\n        xAxis: [{\n          type: \"category\",\n          boundaryGap: true,\n          axisLine: {\n            //坐标轴轴线相关设置。数学上的x轴\n            show: true,\n            lineStyle: {\n              color: 'color:\"#93dcfe\"'\n            }\n          },\n          axisLabel: {\n            //坐标轴刻度标签的相关设置\n            textStyle: {\n              color: \"#93dcfe\",\n              margin: 15\n            },\n            formatter: function formatter(data) {\n              return data;\n            }\n          },\n          axisTick: {\n            show: false\n          },\n          data: time\n        }],\n        yAxis: [{\n          //   min: 0,\n          //   max: 100,\n          name: \"℃\",\n          splitLine: {\n            show: true,\n            lineStyle: {\n              color: \"rgba(147,220,254,0.3)\"\n            }\n          },\n          axisLine: {\n            show: false,\n            lineStyle: {\n              color: \"#93dcfe\"\n            }\n          },\n          axisLabel: {\n            show: true,\n            textStyle: {\n              color: \"#93dcfe\"\n            }\n            // formatter: function (value) {\n            //   if (value === 0) {\n            //     return value;\n            //   }\n            //   return value + \"%\";\n            // },\n          },\n\n          axisTick: {\n            show: false\n          }\n        }],\n        series: [{\n          name: \"A相位\",\n          type: \"line\",\n          symbol: \"circle\",\n          // 默认是空心圆（中间是白色的），改成实心圆\n          showAllSymbol: true,\n          symbolSize: 8,\n          lineStyle: {\n            normal: {\n              color: \"#1f93fa\" // 线条颜色\n            },\n\n            borderColor: \"rgba(0,0,0,0.4)\"\n          },\n          itemStyle: {\n            color: \"#1f93fa\",\n            borderColor: \"#1f93fa\",\n            borderWidth: 2\n          },\n          label: {\n            normal: {\n              show: false,\n              position: \"top\",\n              formatter: [\" {a|{c}%}\"].join(\",\"),\n              rich: {\n                a: {\n                  color: \"#fff\",\n                  align: \"center\"\n                }\n              }\n            }\n          },\n          tooltip: {\n            show: true\n          },\n          data: numA\n        }, {\n          name: \"B相位\",\n          type: \"line\",\n          symbol: \"circle\",\n          // 默认是空心圆（中间是白色的），改成实心圆\n          showAllSymbol: true,\n          symbolSize: 8,\n          lineStyle: {\n            normal: {\n              color: \"rgb(39,239,94)\" // 线条颜色\n            },\n\n            borderColor: \"rgba(0,0,0,0.4)\"\n          },\n          itemStyle: {\n            color: \"rgb(39,239,94)\",\n            borderColor: \"rgb(39,239,94)\",\n            borderWidth: 2\n          },\n          label: {\n            normal: {\n              show: false,\n              position: \"top\",\n              formatter: [\" {a|{c}%}\"].join(\",\"),\n              rich: {\n                a: {\n                  color: \"#fff\",\n                  align: \"center\"\n                }\n              }\n            }\n          },\n          tooltip: {\n            show: true\n          },\n          data: numB\n        }, {\n          name: \"C相位\",\n          type: \"line\",\n          symbol: \"circle\",\n          // 默认是空心圆（中间是白色的），改成实心圆\n          showAllSymbol: true,\n          symbolSize: 8,\n          lineStyle: {\n            normal: {\n              color: \"rgb(255,193,64)\" // 线条颜色\n            },\n\n            borderColor: \"rgba(0,0,0,0.4)\"\n          },\n          itemStyle: {\n            color: \"rgb(255,193,64)\",\n            borderColor: \"rgb(255,193,64)\",\n            borderWidth: 2\n          },\n          label: {\n            normal: {\n              show: false,\n              position: \"top\",\n              formatter: [\" {a|{c}%}\"].join(\",\"),\n              rich: {\n                a: {\n                  color: \"#fff\",\n                  align: \"center\"\n                }\n              }\n            }\n          },\n          tooltip: {\n            show: true\n          },\n          data: numC\n        }]\n      };\n      myChart.setOption(option);\n    }\n  },\n  watch: {\n    equipmentName: {\n      handler: function handler(newVal, oldVal) {\n        if (newVal == \"箱变\") {\n          this.tableColumns.forEach(function (item, index) {\n            if (index == 0 || index % 2 == 0) {\n              item.name = \"进线\";\n            } else {\n              item.name = \"出线\";\n            }\n          });\n        } else {\n          this.tableColumns.forEach(function (item, index) {\n            item.name = \"间隔\" + (index + 1);\n          });\n        }\n      }\n    }\n  }\n};",{"version":3,"mappings":";;;AAyMA,SACAA,WACAC,gBACAC,gBACAC,gBACAC,sBACAC;AAEA;AACA;AACA;AACA;EACAC;EACAC;EACAC;IACA;MACAC;MACA;MACAC;MACAC;MAAA;MACAC;MACAC;MACAC;MAAA;MACAC;MAAA;MACAC;MAAA;MACAC;MAAA;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC,kBACA;QACAC;QACAvB;QACAwB;MACA,GACA;QACAD;QACAvB;QACAwB;MACA,GACA;QACAD;QACAvB;QACAwB;MACA,EACA;MACAC;MACAC,YACA;QACA1B;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAnC;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAnC;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAnC;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAnC;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAnC;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAnC;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAnC;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAnC;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,EACA;MACAC,eACA;QACApC;MACA,GACA;QACAA;MACA,GACA;QACAA;MACA,GACA;QACAA;MACA,EACA;MACAqC;MACAC;MACAC;QACAC,OACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,MACA;QACAC;MACA;MACAC,YACA;QACAC;MACA,EACA;MAEAC;MACAC;MACAC;MACAC;MAAA;MACAC;MACAC;MAAA;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;IACA;EACA;EACAC;IAAA;IACA;IACA;IACA9D;MACA+D;MACAC;IACA;MACA;QACA;MACA;IACA;IACA,iDACA,8BACA,yBACA;IACA,IACA,6BACA,+BACA,0BACA,UACA;MACA;IACA;IACA;IAEA;MACAC;QACA;UAAAC;UAAA5D;QAAA;QACA;MACA;IACA;MACA2D;QACA;UAAAC;UAAA5D;QAAA;QACA;MACA;IACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA6D;IACA;IACAC;MAAA;MACA;QACAC;QACAC;MACA;MACApE;QACAqE;UACA;YACA;UACA;QACA;QACA;QACA;UACAC;UACAF;QACA;QACA;QACArE;UACAwE;QACA;QACA;QACAtE;UACA;UACAsE;UACAC;YACA;cACAC;YACA;UACA;UACA;YACA;YACAC,eACAA,iDACA;YACA;cACAtE;cACAuE;YACA;UACA;UACA;UACA;YACA;YACAD,eACAA,0DACA;YACA;cACAtE;cACAuE;YACA;UACA;UACA;YACA;YACAD,eACAA,0DACA;YACA;cACAtE;cACAuE;YACA;UACA;UAEA;UACA;UACA;UACA;UACA;UACA;UACAN;YACAA;cACA;gBACAO;kBACA,IACAC,6CACAC,iCACA;oBACA;kBACA;kBACA,IACAD,6CACAC,iCACA;oBACA;kBACA;kBACA,IACAD,6CACAC,iCACA;oBACA;kBACA;gBACA;cACA;gBACAF;kBACA,IACAC,6CACAC,iCACA;oBACAC;kBACA;kBACA,IACAF,6CACAC,iCACA;oBACAE;kBACA;kBACA,IACAH,6CACAC,iCACA;oBACAG;kBACA;gBACA;cACA;gBACAL;kBACA,IACAC,6CACAC,kCACA;oBACA;kBACA;gBACA;cACA;gBACAF;kBACA;gBACA;cACA;gBACAA;kBACA,IACAE,mCACA;oBACA;kBACA;kBACA,IACAA,mCACA;oBACA;kBACA;kBACA,IACAA,mCACA;oBACA;kBACA;gBACA;cACA;YACA;UACA;UACA;UACA;YACA;YACA;UACA;UACA;YACA;YACA;UACA;UACA;YACA;YACA;UACA;UACA;UACA;YACA;cACA;cACA;YACA;UACA;UACA;YACA;cACA;cACA;YACA;UACA;UACA;YACA;cACA;cACA;YACA;UACA;UACA;UACAT;YACA;cACA;YACA;cACA;YACA;UACA;UACA;QACA;MACA;IAEA;IACAa;MAAA;MACA;MACA;QACA;QACA;UACA;YACA9E;UACA;UACA;QACA;MACA;QACA;QACA;QACA;QACA;QACA;QACAN;UACA+D;UACAC;QACA;UACA;YACA,sDACA;cACA;cACA;gBAAAf;cAAA;YACA,EACA;UACA;QACA;MACA;IACA;IACA;IACAoC;MACA;QACA;QACA;QACA;QACA;QACA;QACA;UACA;YACAxC;UACA;QACA;QACA;QACA;MACA;QACA;MACA;IACA;IACAyC;MACA;MACA;MACA;MACA;QACA;MACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;MACA;MACA;MACA;MACA;QACA;QACA;QACA;UACA;YACAjB;YACAE;YACAgB;YACAC;UACA;UACApF;YACA;cACAqF;YACA;UACA;QACA;MACA;MACA;QACA;QACA;QACA;UACA;YACApB;YACAE;YACAgB;YACAC;UACA;UACApF;YACA;cACAsF;YACA;UACA;QACA;MACA;MACA;QACA;QACA;QACA;UACA;YACArB;YACAE;YACAgB;YACAC;UACA;UACApF;YAEA;cACAuF;YACA;YACA;cACA9C;YACA;YACA+C;cACA;gBACA;cACA;YACA;UAEA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;QACAtB;QACAF;MACA;MACA;QACA;QACAI;UACA,uBACAG,IACA;UACA;UACA;YACA,uBACAX,MACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA9D;cACAqE;cACA;cACA;gBACA,kCACA,qDACA;kBACAsB;gBACA,EACA;cACA;YACA;;YAEA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;;YAEA;YACA;YACA;UACA;QACA;MACA;QACA;QACArB;UACA,uBACAG,IACA;UACA;UACA;YACA,uBACAX,MACA;YACA;YACA;YACA;UACA;QACA;MACA;QACA;QACAQ;UACA,uBACAG,IACA;UACA;UACA;YACA,uBACAX,MACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA9D;cACAqE;cACA;cACA,kCACA,sDACA;gBACAsB;cACA,EACA;YACA;UACA;QACA;MACA;IACA;IACAC;MACA;MACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;MACA;QACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;QACA;UACAnD;UACAD;QACA;QACA;QACA;MACA;MACA;MACA;MACA;MACA;QACAqD;UACAC;UACAC;YACA;UACA;QACA;QACAC;UACAC;UACAC;UACAC;UACAC;UACA;QACA;;QACAC,QACA;UACAC;UACAC;UACAC;YACA;YACAC;YACAC;cACAlF;YACA;UACA;UACAmF;YACA;YACAC;cACApF;cACAqF;YACA;YACAd;cACA;YACA;UACA;UACAe;YACAL;UACA;UACAvG;QACA,EACA;QACA6G,QACA;UACA;UACA;UACA/G;UACAgH;YACAP;YACAC;cACAlF;YACA;UACA;UACAgF;YACAC;YACAC;cACAlF;YACA;UACA;UACAmF;YACAF;YACAG;cACApF;YACA;YACA;YACA;YACA;YACA;YACA;YACA;UACA;;UACAsF;YACAL;UACA;QACA,EACA;QACAQ,SACA;UACAjH;UACAsG;UACAY;UAAA;UACAC;UACAC;UACAV;YACAW;cACA7F;YACA;;YACA8F;UACA;UACAC;YACA/F;YACA8F;YACAE;UACA;UACAC;YACAJ;cACAZ;cACAiB;cACA3B;cACA4B;gBACAC;kBACApG;kBACAqG;gBACA;cACA;YACA;UACA;UACAhC;YACAY;UACA;UAEAvG;QACA;MAEA;MACA4H;IACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;QACAlC;UACAC;UACAC;YACA,2EACA,2CACA;UACA;QACA;QACAiC;UACAC;UACArB;YACApF;YACA0G;UACA;QACA;QACAlC;UACAC;UACAC;UACAC;UACAC;UACA;QACA;;QACAC,QACA;UACAC;UACAC;UACAC;YACA;YACAC;YACAC;cACAlF;YACA;UACA;UACAmF;YACA;YACAC;cACApF;cACAqF;YACA;YACAd;cACA;YACA;UACA;UACAe;YACAL;UACA;UACAvG;QACA,EACA;QACA6G,QACA;UACA;UACA;UACA/G;UACAgH;YACAP;YACAC;cACAlF;YACA;UACA;UACAgF;YACAC;YACAC;cACAlF;YACA;UACA;UACAmF;YACAF;YACAG;cACApF;YACA;YACA;YACA;YACA;YACA;YACA;YACA;UACA;;UACAsF;YACAL;UACA;QACA,EACA;QACAQ,SACA;UACAjH;UACAsG;UACAY;UAAA;UACAC;UACAC;UACAV;YACAW;cACA7F;YACA;;YACA8F;UACA;UACAC;YACA/F;YACA8F;YACAE;UACA;UACAC;YACAJ;cACAZ;cACAiB;cACA3B;cACA4B;gBACAC;kBACApG;kBACAqG;gBACA;cACA;YACA;UACA;UACAhC;YACAY;UACA;UAEAvG;QACA,GACA;UACAF;UACAsG;UACAY;UAAA;UACAC;UACAC;UACAV;YACAW;cACA7F;YACA;;YACA8F;UACA;UACAC;YACA/F;YACA8F;YACAE;UACA;UACAC;YACAJ;cACAZ;cACAiB;cACA3B;cACA4B;gBACAC;kBACApG;kBACAqG;gBACA;cACA;YACA;UACA;UACAhC;YACAY;UACA;UAEAvG;QACA,GACA;UACAF;UACAsG;UACAY;UAAA;UACAC;UACAC;UACAV;YACAW;cACA7F;YACA;;YACA8F;UACA;UACAC;YACA/F;YACA8F;YACAE;UACA;UACAC;YACAJ;cACAZ;cACAiB;cACA3B;cACA4B;gBACAC;kBACApG;kBACAqG;gBACA;cACA;YACA;UACA;UACAhC;YACAY;UACA;UAEAvG;QACA;MAEA;MACA4H;IACA;EACA;EACAK;IACAtF;MACAuF;QACA;UACA;YACA;cACA3D;YACA;cACAA;YACA;UACA;QACA;UACA;YACAA;UACA;QACA;MACA;IACA;EACA;AACA","names":["getDevice","getCabinetInfo","getCabinetList","getCabinetData","getCabinetCameraList","getCabinetPointHistory","name","props","data","echartsShow","fenzhiArr","JSMpeg","player","webRtcServer","rtsp","rtsp1","waterLevel","waterLevel1","grounding","photoShow","videoShow","videoShow1","deviceId","tabPosition","activeName","intervalName","intervalName1","InfraredName","vectorgraphData","vectorgraph","color","tableData1","tableData","phase","interval1","interval2","interval3","interval4","interval5","interval6","interval7","interval8","tableColumns","echartsTab","echartsTab1","echartsData","time","num","photoList","photo","deviceInformation","equipmentName","deviceSn","partialDischarge","totalInterval","tabName","temperatureChildDataA","temperatureChildDataB","temperatureChildDataC","voltageDataAB","voltageDataBC","voltageDataCA","mounted","action","device_name","window","index","methods","getDeviceData","pageSize","token","res","sn","console","Object","units","heardName","key","n","item","z","electricCurrentA","electricCurrentB","electricCurrentC","handleClick","intervalClick","intervalClick1","getIntervalTep","point","date","dataA","dataB","dataC","setTimeout","InfraredClick","canvas","closeJSMpeg","handleClose","intervalShow","tooltip","trigger","formatter","grid","top","left","right","bottom","xAxis","type","boundaryGap","axisLine","show","lineStyle","axisLabel","textStyle","margin","axisTick","yAxis","splitLine","series","symbol","showAllSymbol","symbolSize","normal","borderColor","itemStyle","borderWidth","label","position","rich","a","align","myChart","temperatureShow","legend","origin","fontSize","watch","handler"],"sourceRoot":"src/views/HomePop","sources":["ringMainUnit.vue"],"sourcesContent":["<template>\r\n  <div :class=\"equipmentName=='分支箱'?'ringMain':''\"  class=\"ringMainUnit\"> \r\n    <div class=\"top\">\r\n      <div class=\"title\">{{ ringMainUnit }}</div>\r\n      <div class=\"close\">\r\n        <img\r\n          @click=\"handleClose\"\r\n          src=\"@/assets/images/close.png\"\r\n          style=\"cursor: pointer\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"main\">\r\n      <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\" style=\"height: 4%\" v-if=\"ringMainUnit.includes('总览')||ringMainUnit.includes('环网柜')\">\r\n        </el-tab-pane><el-tab-pane label=\"设备信息\" name=\"first\" style=\"font-size:20px\" > </el-tab-pane>\r\n        <el-tab-pane label=\"现场照片/红外视频\" name=\"second\" style=\"font-size:20px\"></el-tab-pane>\r\n        \r\n      </el-tabs>\r\n      <!-- 分支箱 -->\r\n      <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\" style=\"height: 4%\" v-if=\"ringMainUnit.includes('分支箱')\">\r\n        <el-tab-pane label=\"设备信息\" name=\"first\" style=\"font-size:20px\" ></el-tab-pane>\r\n        <el-tab-pane label=\"现场照片\" name=\"second\" style=\"font-size:20px\"></el-tab-pane>\r\n      </el-tabs>\r\n      <!-- 箱变 -->\r\n      <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\" style=\"height: 4%\" v-if=\"ringMainUnit.includes('箱变')\">\r\n        <el-tab-pane label=\"设备信息\" name=\"first\" style=\"font-size:20px\" ></el-tab-pane>\r\n        <el-tab-pane label=\"现场照片/红外视频\" name=\"second\" style=\"font-size:20px\"></el-tab-pane>\r\n      </el-tabs>\r\n      <!-- 开闭所 -->\r\n      <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\" style=\"height: 4%\" v-if=\"ringMainUnit.includes('开闭所')\">\r\n        <el-tab-pane label=\"设备信息\" name=\"first\" style=\"font-size:20px\" ></el-tab-pane>\r\n        <el-tab-pane label=\"红外线视频/监检视频/现场照片\" name=\"second\" style=\"font-size:20px\"></el-tab-pane>\r\n      </el-tabs>\r\n      <div v-if=\"activeName == 'first'\" style=\"height: 100%; width: 100%\">\r\n        <div class=\"basic\">\r\n          <div class=\"title\" style=\"margin-top: 10px\">基本信息</div>\r\n          <div class=\"content\">\r\n            <div class=\"information\">\r\n              <div class=\"informationContent\">\r\n                {{ equipmentName }}名称&nbsp;&nbsp;&nbsp;&nbsp;{{\r\n                  ringMainUnit\r\n                }}\r\n              </div>\r\n              <div class=\"informationContent\">\r\n                {{ equipmentName }}编号&nbsp;&nbsp;&nbsp;&nbsp;{{ deviceSn }}\r\n              </div>\r\n              <div class=\"informationContent\" v-if='equipmentName==\"分支箱\"'> \r\n                蓄电池电压(v)\r\n              </div>\r\n              <template v-else-if='equipmentName==\"箱变\"'>\r\n\r\n              </template>\r\n\r\n              <template v-else>\r\n              <div class=\"informationContent\" >\r\n                IP地址&nbsp;&nbsp;&nbsp;&nbsp;{{ deviceInformation.device_ip }}\r\n              </div>\r\n              <div class=\"informationContent\">\r\n                总间隔&nbsp;&nbsp;&nbsp;&nbsp;{{ totalInterval }}\r\n              </div>\r\n              </template>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"earlyWarning\" v-show='equipmentName!=\"分支箱\"'>\r\n          <div class=\"title\">预警信息</div>\r\n          <div class=\"content\">\r\n            <div class=\"information\">\r\n              <div class=\"informationContent\">\r\n                <img src=\"@/assets/images/shiliangIcon1.png\" />\r\n                电缆沟水位&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;{{ waterLevel }}米\r\n                \r\n              </div>\r\n              <div class=\"informationContent\">\r\n                <span v-if=\"equipmentName!='箱变'\" style=\"margin-left:10px\">&nbsp;状态:&nbsp;&nbsp;&nbsp;&nbsp;{{ waterLevel1 }}</span>\r\n              </div>\r\n              <div class=\"informationContent\">\r\n                <img src=\"@/assets/images/shiliangIcon2.png\" />\r\n                小电流接地故障状态&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;{{ grounding }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div v-if=\"equipmentName=='分支箱'\" class=\"interval\" >\r\n            <div class=\"title\" >出现线缆温度监测</div>\r\n            <div class=\"fenzhiMessage\">\r\n              <div class=\"fenzhiItem\" v-for=\"s in fenzhiArr\">\r\n                  <div class=\"unitNum\">\r\n                    <span>55</span>\r\n                  </div>\r\n                  <div class=\"fenzhiUnit\">\r\n                    <span>{{s}}</span>\r\n                  </div>\r\n              </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"interval\" v-else>\r\n          <div class=\"title\" v-if='equipmentName==\"箱变\"'>电参数监测</div>\r\n        \r\n          <div class=\"title\" v-else>间隔监测</div>\r\n          <!-- 分支箱 -->\r\n          \r\n          <div  class=\"table user_skills\">\r\n            <el-table\r\n              :data=\"tableData\"\r\n              style=\"width: 100%; height: 100%\"\r\n              :header-cell-style=\"{ 'text-align': 'center' }\"\r\n              :cell-style=\"{ 'text-align': 'center' }\"\r\n              stripe\r\n            >\r\n              <el-table-column prop=\"name\" label=\"\" align=\"center\" width=\"150\">\r\n              </el-table-column>\r\n              <el-table-column prop=\"phase\" label=\"相位\"> </el-table-column>\r\n              <el-table-column\r\n                v-for=\"(item, index) in tableColumns\"\r\n                :key=\"index\"\r\n                :prop=\"item.key\"\r\n                align=\"center\"\r\n                :label=\"item.name\"\r\n              >\r\n              </el-table-column>\r\n            </el-table>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"addTitle\" v-if='equipmentName==\"箱变\"'>进线局放数据</div>\r\n        <div class=\"addTitle\" v-else-if='equipmentName==\"分支箱\"'>局放数据</div>\r\n        \r\n        <div class=\"intervalData\">\r\n          <!-- <template v-if='equipmentName==\"箱变\"||equipmentName==\"分支箱\"'>\r\n          </template> -->\r\n          <el-tabs  v-model=\"intervalName\" @tab-click=\"intervalClick\">\r\n            <el-tab-pane\r\n              :label=\"item.name\"\r\n              :name=\"item.key\"\r\n              v-for=\"(item, index) in echartsTab\"\r\n              :key=\"index\"\r\n            ></el-tab-pane>\r\n          </el-tabs>\r\n          <el-tabs  v-model=\"intervalName1\" @tab-click=\"intervalClick1\">\r\n            <el-tab-pane\r\n              :label=\"item.name\"\r\n              :name=\"item.key\"\r\n              v-for=\"(item, index) in echartsTab1\"\r\n              :key=\"index\"\r\n            ></el-tab-pane>\r\n          </el-tabs>\r\n          <div id=\"intervalShow\" v-show=\"echartsShow\"></div>\r\n          <div id=\"temperatureShow\" v-show=\"!echartsShow\"></div>\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"InfraredVideo\"\r\n        v-if=\"activeName == 'second'\"\r\n        style=\"height: 96%; width: 100%\"\r\n      >\r\n        <div class=\"title\">\r\n          <el-tabs\r\n            :tab-position=\"tabPosition\"\r\n            v-model=\"InfraredName\"\r\n            style=\"height: 100%\"\r\n          >\r\n            <el-tab-pane v-for=\"(item, index) in vectorgraphData\" :key=\"index\">\r\n              <span\r\n                slot=\"label\"\r\n                style=\"display: flex; align-items: center\"\r\n                @click=\"InfraredClick(index)\"\r\n              >\r\n                <img :src=\"item.vectorgraph\" />\r\n                <span\r\n                  style=\"margin-left: 10px; font-size: 19px\"\r\n                  :style=\"{ color: item.color }\"\r\n                  >{{ item.name }}</span\r\n                >\r\n              </span>\r\n            </el-tab-pane>\r\n            <div class=\"content\" v-show=\"photoShow\">\r\n              <div\r\n                v-for=\"(item, index) in photoList\"\r\n                :key=\"index\"\r\n                style=\"margin-top: 40px; margin-right: 20px\"\r\n              >\r\n                <img :src=\"item.photo\" style=\"width: 407px; height: 274px\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"content1\" v-show=\"videoShow\">\r\n              <canvas id=\"canvas\" style=\"width: 100%; height: 100%\"></canvas>\r\n              <!-- <video id=\"video\" autoplay  style=\"width:100%; height:100%\"></video> -->\r\n            </div>\r\n            <div class=\"content1\" v-show=\"videoShow1\">\r\n              <canvas id=\"canvas1\" style=\"width: 100%; height: 100%\"></canvas>\r\n              <!-- <video id=\"video\" autoplay  style=\"width:100%; height:100%\"></video> -->\r\n            </div>\r\n          </el-tabs>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nimport {\r\n  getDevice,\r\n  getCabinetInfo,\r\n  getCabinetList,\r\n  getCabinetData,\r\n  getCabinetCameraList,\r\n  getCabinetPointHistory\r\n} from \"../../api/index.js\";\r\nimport JSMpeg from \"../../util/jsmpeg.min\";\r\nimport axios from \"axios\";\r\n// import JSMpeg from 'jsmpeg'\r\nexport default {\r\n  name: \"ringMainUnit\",\r\n  props: [\"ringMainUnit\"],\r\n  data() {\r\n    return {\r\n      echartsShow:true,\r\n      //\r\n      fenzhiArr: [\"电压/KV\", \"电流/A\", \"温度/℃\"],\r\n      JSMpeg: null, //视频\r\n      player: null,\r\n      webRtcServer: null,\r\n      rtsp: \"\", //红外视频地址\r\n      rtsp1: \"\", //普通视频地址\r\n      waterLevel: \"\", //水位值\r\n      waterLevel1: \"\", //水位告警\r\n      grounding: \"\",\r\n      photoShow: true,\r\n      videoShow: false,\r\n      videoShow1: false,\r\n      deviceId: \"\",\r\n      tabPosition: \"left\",\r\n      activeName: \"first\",\r\n      intervalName: \"interval1\",\r\n      intervalName1: \"\",\r\n      InfraredName: \"first\",\r\n      vectorgraphData: [\r\n        {\r\n          vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\r\n          name: \"现场照片\",\r\n          color: \"rgb(60,127,127)\",\r\n        },\r\n        {\r\n          vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\r\n          name: \"红外视频\",\r\n          color: \"rgb(60,127,127)\",\r\n        },\r\n        {\r\n          vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\r\n          name: \"普通视频\",\r\n          color: \"rgb(60,127,127)\",\r\n        },\r\n      ],\r\n      tableData1: [],\r\n      tableData: [\r\n        {\r\n          name: \"\",\r\n          phase: \"Uab\",\r\n          interval1: \"220\",\r\n          interval2: \"220\",\r\n          interval3: \"220\",\r\n          interval4: \"220\",\r\n          interval5: \"220\",\r\n          interval6: \"220\",\r\n          interval7: \"220\",\r\n          interval8: \"220\",\r\n        },\r\n        {\r\n          name: \"电压/V\",\r\n          phase: \"Ubc\",\r\n          interval1: \"220\",\r\n          interval2: \"220\",\r\n          interval3: \"220\",\r\n          interval4: \"220\",\r\n          interval5: \"220\",\r\n          interval6: \"220\",\r\n          interval7: \"220\",\r\n          interval8: \"220\",\r\n        },\r\n        {\r\n          name: \"\",\r\n          phase: \"Uca\",\r\n          interval1: \"220\",\r\n          interval2: \"220\",\r\n          interval3: \"220\",\r\n          interval4: \"220\",\r\n          interval5: \"220\",\r\n          interval6: \"220\",\r\n          interval7: \"220\",\r\n          interval8: \"220\",\r\n        },\r\n        {\r\n          name: \"\",\r\n          phase: \"A\",\r\n          interval1: \"21\",\r\n          interval2: \"25\",\r\n          interval3: \"23\",\r\n          interval4: \"27\",\r\n          interval5: \"24\",\r\n          interval6: \"28\",\r\n          interval7: \"22\",\r\n          interval8: \"21\",\r\n        },\r\n        {\r\n          name: \"电流/A\",\r\n          phase: \"B\",\r\n          interval1: \"25\",\r\n          interval2: \"20\",\r\n          interval3: \"24\",\r\n          interval4: \"23\",\r\n          interval5: \"24\",\r\n          interval6: \"22\",\r\n          interval7: \"21\",\r\n          interval8: \"29\",\r\n        },\r\n        {\r\n          name: \"\",\r\n          phase: \"C\",\r\n          interval1: \"21\",\r\n          interval2: \"25\",\r\n          interval3: \"23\",\r\n          interval4: \"27\",\r\n          interval5: \"24\",\r\n          interval6: \"28\",\r\n          interval7: \"22\",\r\n          interval8: \"21\",\r\n        },\r\n        {\r\n          name: \"\",\r\n          phase: \"A\",\r\n          interval1: \"21\",\r\n          interval2: \"25\",\r\n          interval3: \"23\",\r\n          interval4: \"27\",\r\n          interval5: \"24\",\r\n          interval6: \"28\",\r\n          interval7: \"22\",\r\n          interval8: \"21\",\r\n        },\r\n        {\r\n          name: \"温度/℃\",\r\n          phase: \"B\",\r\n          interval1: \"25\",\r\n          interval2: \"20\",\r\n          interval3: \"24\",\r\n          interval4: \"23\",\r\n          interval5: \"24\",\r\n          interval6: \"22\",\r\n          interval7: \"21\",\r\n          interval8: \"29\",\r\n        },\r\n        {\r\n          name: \"\",\r\n          phase: \"C\",\r\n          interval1: \"25\",\r\n          interval2: \"20\",\r\n          interval3: \"24\",\r\n          interval4: \"23\",\r\n          interval5: \"24\",\r\n          interval6: \"22\",\r\n          interval7: \"21\",\r\n          interval8: \"29\",\r\n        },\r\n      ],\r\n      tableColumns: [\r\n        {\r\n          name: \"间隔1\",\r\n        },\r\n        {\r\n          name: \"间隔2\",\r\n        },\r\n        {\r\n          name: \"间隔3\",\r\n        },\r\n        {\r\n          name: \"间隔4\",\r\n        },\r\n      ],\r\n      echartsTab: [],\r\n      echartsTab1: [],\r\n      echartsData: {\r\n        time: [\r\n          \"0点\",\r\n          \"1点\",\r\n          \"2点\",\r\n          \"3点\",\r\n          \"4点\",\r\n          \"5点\",\r\n          \"6点\",\r\n          \"7点\",\r\n          \"8点\",\r\n          \"9点\",\r\n          \"10点\",\r\n          \"11点\",\r\n          \"12点\",\r\n          \"13点\",\r\n          \"14点\",\r\n          \"15点\",\r\n          \"16点\",\r\n          \"17点\",\r\n          \"18点\",\r\n          \"19点\",\r\n          \"20点\",\r\n          \"21点\",\r\n          \"22点\",\r\n          \"23点\",\r\n        ],\r\n        num: [],\r\n      },\r\n      photoList: [\r\n        {\r\n          photo: \"\",\r\n        },\r\n      ],\r\n\r\n      deviceInformation: {},\r\n      equipmentName: \"\",\r\n      deviceSn: \"\",\r\n      partialDischarge: [], //局放数据\r\n      totalInterval: \"\",\r\n      tabName:'',//选择温度tab\r\n       temperatureChildDataA : [],\r\n       temperatureChildDataB : [],\r\n      temperatureChildDataC :[],\r\n      voltageDataAB : [],\r\n       voltageDataBC : [],\r\n      voltageDataCA :[],\r\n    };\r\n  },\r\n  mounted() {\r\n    var that = this;\r\n    //sssss\r\n    getDevice({\r\n      action: \"querydevice\",\r\n      device_name: this.ringMainUnit,\r\n    }).then((res) => {\r\n      if (res.data.data != null) {\r\n        this.deviceInformation = res.data.data.device;\r\n      }\r\n    });\r\n    this.equipmentName = this.ringMainUnit.substring(\r\n      this.ringMainUnit.length - 3,\r\n      this.ringMainUnit.length\r\n    );\r\n    if (\r\n      this.equipmentName.substring(\r\n        this.equipmentName.length - 2,\r\n        this.equipmentName.length\r\n      ) == \"箱变\"\r\n    ) {\r\n      this.equipmentName = \"箱变\";\r\n    }\r\n    this.getDeviceData();\r\n\r\n    if (this.ringMainUnit != \"金盾FH9环网柜\") {\r\n      window.setTimeout(() => {\r\n        let tab = { index: 0, name: \"interval1\" };\r\n        this.intervalClick(tab);\r\n      }, 1000);\r\n    } else {\r\n      window.setTimeout(() => {\r\n        let tab = { index: 1, name: \"interval2\" };\r\n        this.intervalClick(tab);\r\n      }, 1000);\r\n    }\r\n  },\r\n  //  beforeDestroy() {\r\n  //   this.webRtcServer.disconnect();\r\n  //   this.webRtcServer = null;\r\n  // },\r\n  // beforeDestroy () {\r\n  //   // 页面销毁前 关闭flvjs\r\n  //   this.player.destroy()\r\n  // },\r\n  methods: {\r\n    //查询所有网柜信息\r\n    getDeviceData() {\r\n      let params = {\r\n        pageSize: 50,\r\n        token: localStorage.getItem(\"token\"),\r\n      };\r\n      getCabinetList(params).then((res) => {\r\n        res.data.data.data.forEach((item, index) => {\r\n          if (item.name == this.ringMainUnit) {\r\n            this.deviceSn = item.sn;\r\n          }\r\n        });\r\n        //查询单个网柜\r\n        let data = {\r\n          sn: this.deviceSn,\r\n          token: localStorage.getItem(\"token\"),\r\n        };\r\n        //现场图片\r\n        getCabinetInfo(data).then((res) => {\r\n          console.log(res.data.data, \"Jieguo\");\r\n        });\r\n        //间隔监测\r\n        getCabinetData(data).then((res) => {\r\n          let units = [];\r\n          console.log(res.data.data,'---------');\r\n          Object.keys(res.data.data.units).map((item, index) => {\r\n            if (res.data.data.units[item].name.indexOf(\"开关\") != -1) {\r\n              units.push(res.data.data.units[item]);\r\n            }\r\n          });\r\n          this.tableColumns = Object.keys(units).map((x, y) => {\r\n            let heardName = [];\r\n            heardName.push(\r\n              (heardName = \"间隔\" + units[x].name.substring(0, 1))\r\n            );\r\n            return {\r\n              name: heardName,\r\n              key: \"interval\" + units[x].name.substring(0, 1),\r\n            };\r\n          });\r\n          this.totalInterval = this.tableColumns.length;\r\n          this.echartsTab = Object.keys(units).map((x, y) => {\r\n            let heardName = [];\r\n            heardName.push(\r\n              (heardName = \"间隔\" + units[x].name.substring(0, 1) + \"局放数据\")\r\n            );\r\n            return {\r\n              name: heardName,\r\n              key: \"interval\" + units[x].name.substring(0, 1),\r\n            };\r\n          });\r\n          this.echartsTab1 = Object.keys(units).map((x, y) => {\r\n            let heardName = [];\r\n            heardName.push(\r\n              (heardName = \"间隔\" + units[x].name.substring(0, 1) + \"温度数据\")\r\n            );\r\n            return {\r\n              name: heardName,\r\n              key: \"interval\" + units[x].name.substring(0, 1),\r\n            };\r\n          });\r\n          \r\n          let electricCurrentA = [];\r\n          let electricCurrentB = [];\r\n          let electricCurrentC = [];\r\n          // let voltageA = []\r\n          // let voltageB = []\r\n          // let voltageC = []\r\n          res.data.data.units.forEach((item, index) => {\r\n            res.data.data.yc.forEach((n, i) => {\r\n              if (n.name == \"温度\") {\r\n                n.child.forEach((z, j) => {\r\n                  if (\r\n                    item.name == z.point_name.substring(0,4) &&\r\n                    z.point_name.indexOf(\"A\") != -1\r\n                  ) {\r\n                    this.temperatureChildDataA.push(z);\r\n                  }\r\n                  if (\r\n                    item.name == z.point_name.substring(0,4) &&\r\n                    z.point_name.indexOf(\"B\") != -1\r\n                  ) {\r\n                    this.temperatureChildDataB.push(z);\r\n                  }\r\n                  if (\r\n                    item.name == z.point_name.substring(0,4) &&\r\n                    z.point_name.indexOf(\"C\") != -1\r\n                  ) {\r\n                    this.temperatureChildDataC.push(z);\r\n                  }\r\n                });\r\n              } else if (n.name == \"电流\") {\r\n                n.child.forEach((z, j) => {\r\n                  if (\r\n                    item.name == z.point_name.substring(0,4) &&\r\n                    z.point_name.indexOf(\"a\") != -1\r\n                  ) {\r\n                    electricCurrentA.push(z);\r\n                  }\r\n                  if (\r\n                    item.name == z.point_name.substring(0,4) &&\r\n                    z.point_name.indexOf(\"b\") != -1\r\n                  ) {\r\n                    electricCurrentB.push(z);\r\n                  }\r\n                  if (\r\n                    item.name == z.point_name.substring(0,4) &&\r\n                    z.point_name.indexOf(\"c\") != -1\r\n                  ) {\r\n                    electricCurrentC.push(z);\r\n                  }\r\n                });\r\n              } else if (n.name == \"局放\") {\r\n                n.child.forEach((z, j) => {\r\n                  if (\r\n                    item.name == z.point_name.substring(0,4) &&\r\n                    z.point_name.indexOf(\"均值\") != -1\r\n                  ) {\r\n                    this.partialDischarge.push(z);\r\n                  }\r\n                });\r\n              } else if (n.name == \"水位\") {\r\n                n.child.forEach((z, j) => {\r\n                  this.waterLevel = z.value;\r\n                });\r\n              }else if (n.name == \"电压\") {\r\n                n.child.forEach((z, j) => {\r\n                  if (\r\n                    z.point_name.indexOf(\"Uab\") != -1\r\n                  ) {\r\n                    this.voltageDataAB.push(z);\r\n                  }\r\n                  if (\r\n                    z.point_name.indexOf(\"Ubc\") != -1\r\n                  ) {\r\n                    this.voltageDataBC.push(z);\r\n                  }\r\n                  if (\r\n                    z.point_name.indexOf(\"Uca\") != -1\r\n                  ) {\r\n                    this.voltageDataCA.push(z);\r\n                  }\r\n                });\r\n              }\r\n            });\r\n          });\r\n          //表格电流\r\n          for (let i = 0; i < electricCurrentA.length; i++) {\r\n            let interval = \"interval\" + electricCurrentA[i].point_name.substring(0,1);\r\n            this.tableData[3][interval] = electricCurrentA[i].value;\r\n          }\r\n          for (let i = 0; i < electricCurrentB.length; i++) {\r\n            let interval = \"interval\" + electricCurrentB[i].point_name.substring(0,1);\r\n            this.tableData[4][interval] = electricCurrentB[i].value;\r\n          }\r\n          for (let i = 0; i < electricCurrentC.length; i++) {\r\n            let interval = \"interval\" + electricCurrentC[i].point_name.substring(0,1);\r\n            this.tableData[5][interval] = electricCurrentC[i].value;\r\n          }\r\n          //电压\r\n          for (let i = 0; i < this.voltageDataAB.length; i++) {\r\n            for (let j = 0; j < units.length; j++) {\r\n              let interval = \"interval\" + units[j].name.substring(0,1);\r\n              this.tableData[0][interval] = this.voltageDataAB[i].value + ' kV';\r\n            }\r\n          }\r\n          for (let i = 0; i < this.voltageDataBC.length; i++) {\r\n            for (let j = 0; j < units.length; j++) {\r\n              let interval = \"interval\" + units[j].name.substring(0,1);\r\n              this.tableData[1][interval] = this.voltageDataBC[i].value + ' kV';\r\n            }\r\n          }\r\n          for (let i = 0; i < this.voltageDataCA.length; i++) {\r\n            for (let j = 0; j < units.length; j++) {\r\n              let interval = \"interval\" + units[j].name.substring(0,1);\r\n              this.tableData[2][interval] = this.voltageDataCA[i].value + ' kV';\r\n            }\r\n          }\r\n          //警告\r\n          res.data.data.yx.forEach((item, index) => {\r\n            if (item.name == \"水位告警\") {\r\n              this.waterLevel1 = item.child[0].value;\r\n            } else if (item.name == \"接地告警\") {\r\n              this.grounding = item.child[0].value;\r\n            }\r\n          });\r\n          this.getIntervalTep(null)\r\n        });\r\n      });\r\n       \r\n    },\r\n    handleClick(tab) {\r\n      let that = this;\r\n      if (tab.index == 0) {\r\n        this.activeName = \"first\";\r\n        this.$nextTick(() => {\r\n          let tab = {\r\n            name:'interval1'\r\n          }\r\n          this.intervalClick(tab);\r\n        });\r\n      } else if (tab.index == 1) {\r\n        this.activeName = \"second\";\r\n        this.photoShow = true;\r\n        this.videoShow = false;\r\n        this.videoShow1 = false;\r\n        this.InfraredClick(0);\r\n        getDevice({\r\n          action: \"querydevice\",\r\n          device_name: that.ringMainUnit,\r\n        }).then((res) => {\r\n          if (res.data.data.pic != null) {\r\n            this.photoList = Object.keys(res.data.data.pic).map(\r\n              (item, index) => {\r\n                let photoUrl = res.data.data.pic[index].url;\r\n                return { photo: photoUrl };\r\n              }\r\n            );\r\n          }\r\n        });\r\n      }\r\n    },\r\n    //echarts切换\r\n    intervalClick(tab) {\r\n      if (tab != null) {\r\n        this.intervalName = tab.name;\r\n        this.intervalName1 = '';\r\n        let echartsData = [];\r\n        // let index = Number(tab.index) + 1;\r\n        let index = tab.name.substring(8,9)\r\n        for (let i = 0; i < this.partialDischarge.length; i++) {\r\n          if (this.partialDischarge[i].point_name.substring(0,4).indexOf(index) != -1) {\r\n            echartsData.push(this.partialDischarge[i]);\r\n          }\r\n        }\r\n        this.intervalShow(echartsData);\r\n        this.echartsShow = true\r\n      } else {\r\n        this.intervalShow(null);\r\n      }\r\n    },\r\n    intervalClick1(tab) {\r\n      this.intervalName = '';\r\n      this.intervalName1 = tab.name;\r\n      this.echartsShow = false\r\n      if (tab != null) {\r\n        this.getIntervalTep(tab.name)\r\n      } else {\r\n        this.getIntervalTep(null);\r\n      }\r\n    },\r\n    //获取间隔温度\r\n    getIntervalTep(tabName){\r\n      let dataA = []\r\n      let dataB = []\r\n      let dataC = []\r\n      let time = []\r\n        //表格温度\r\n          for (let i = 0; i < this.temperatureChildDataA.length; i++) {\r\n            let interval = \"interval\" + this.temperatureChildDataA[i].point_name.substring(0,1);\r\n            this.tableData[6][interval] = this.temperatureChildDataA[i].value;\r\n              if (tabName == interval) {\r\n                 let data = {\r\n                      token:localStorage.getItem(\"token\"),\r\n                      sn: this.deviceSn,\r\n                      point:this.temperatureChildDataA[i].point_id,\r\n                      date:this.$moment().format(\"YYYY-MM-DD\")\r\n                    }\r\n                    getCabinetPointHistory(data).then((res)=>{\r\n                      for (let i = 0; i < res.data.data.value.length; i++) {\r\n                        dataA.push(parseInt(res.data.data.value[i]))\r\n                      }\r\n                    })\r\n              }\r\n          }\r\n          for (let i = 0; i < this.temperatureChildDataB.length; i++) {\r\n            let interval = \"interval\" + this.temperatureChildDataB[i].point_name.substring(0,1);\r\n            this.tableData[7][interval] = this.temperatureChildDataB[i].value;\r\n              if (tabName == interval) {\r\n                 let data = {\r\n                      token:localStorage.getItem(\"token\"),\r\n                      sn: this.deviceSn,\r\n                      point:this.temperatureChildDataA[i].point_id,\r\n                      date:this.$moment().format(\"YYYY-MM-DD\")\r\n                    }\r\n                    getCabinetPointHistory(data).then((res)=>{\r\n                      for (let i = 0; i < res.data.data.value.length; i++) {\r\n                        dataB.push(parseInt(res.data.data.value[i]))\r\n                      }\r\n                    })\r\n              }\r\n          }\r\n          for (let i = 0; i < this.temperatureChildDataC.length; i++) {\r\n            let interval = \"interval\" + this.temperatureChildDataC[i].point_name.substring(0,1);\r\n            this.tableData[8][interval] = this.temperatureChildDataC[i].value;\r\n              if (tabName == interval) {\r\n                 let data = {\r\n                      token:localStorage.getItem(\"token\"),\r\n                      sn: this.deviceSn,\r\n                      point:this.temperatureChildDataA[i].point_id,\r\n                      date:this.$moment().format(\"YYYY-MM-DD\")\r\n                    }\r\n                    getCabinetPointHistory(data).then((res)=>{\r\n                      \r\n                      for (let i = 0; i < res.data.data.value.length; i++) {\r\n                        dataC.push(parseInt(res.data.data.value[i]))\r\n                      }\r\n                      for (let i = 0; i < res.data.data.time.length; i++) {\r\n                        time.push(parseInt(res.data.data.time[i]))\r\n                      }\r\n                      setTimeout(()=>{\r\n                        this.$nextTick(()=>{\r\n                        this.temperatureShow(dataA,dataB,dataC,time);\r\n                        })\r\n                      },100)\r\n                      \r\n                    })\r\n              }\r\n          }\r\n    },\r\n    //视频切换\r\n    InfraredClick(index) {\r\n      let data = {\r\n        sn: this.deviceSn,\r\n        token: localStorage.getItem(\"token\"),\r\n      };\r\n      if (index == 1) {\r\n        let that = this;\r\n        Object.keys(this.vectorgraphData).forEach((key) => {\r\n          this.vectorgraphData[\r\n            key\r\n          ].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\r\n          this.vectorgraphData[key].color = \"rgb(60,127,127)\";\r\n          if (key == index) {\r\n            this.vectorgraphData[\r\n              index\r\n            ].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\r\n            this.vectorgraphData[index].color = \"#56fefe\";\r\n            this.photoShow = false;\r\n            this.videoShow = true;\r\n            this.videoShow1 = false;\r\n            //这里的port要与index.js的port保持一致\r\n            //解析视频流\r\n            //视频数据\r\n            getCabinetCameraList(data).then((res) => {\r\n              console.log(res.data.data, \"视频\");\r\n              this.rtsp = res.data.data[1].url;\r\n              this.$nextTick(() => {\r\n                this.JSMpeg = new JSMpeg.Player(\r\n                  \"ws://localhost:9999/rtsp?url=\" + btoa(this.rtsp),\r\n                  {\r\n                    canvas: document.getElementById(\"canvas\"),\r\n                  }\r\n                );\r\n              });\r\n            });\r\n\r\n            // let video = document.getElementById('video')\r\n            //  try{\r\n            //    if ('srcObject' in video) {\r\n            //      video.srcObject = null;\r\n            //  this.webRtcServer = new WebRtcStreamer(\r\n            //     \"video\",\r\n            //     location.protocol + \"//127.0.0.1:8000\"\r\n            //   );\r\n            // //   //需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用\r\n            //   this.webRtcServer.connect(\r\n            //     \"rtsp://221.231.99.214:554/cam=109/channel=0\"\r\n            //   );\r\n            //       this.webRtcServer.connect(\r\n            //         \"rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4\"\r\n            //       );\r\n            //    }else{\r\n            //      video.src = null;\r\n            //    }\r\n\r\n            //  }catch(e){\r\n            //       console.log(e)\r\n            //     }\r\n          }\r\n        });\r\n      } else if (index == 0) {\r\n        let that = this;\r\n        Object.keys(this.vectorgraphData).forEach((key) => {\r\n          this.vectorgraphData[\r\n            key\r\n          ].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\r\n          this.vectorgraphData[key].color = \"rgb(60,127,127)\";\r\n          if (key == index) {\r\n            this.vectorgraphData[\r\n              index\r\n            ].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\r\n            this.vectorgraphData[index].color = \"#56fefe\";\r\n            (this.photoShow = true), (this.videoShow = false);\r\n            this.videoShow1 = false;\r\n          }\r\n        });\r\n      } else if (index == 2) {\r\n        let that = this;\r\n        Object.keys(this.vectorgraphData).forEach((key) => {\r\n          this.vectorgraphData[\r\n            key\r\n          ].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\r\n          this.vectorgraphData[key].color = \"rgb(60,127,127)\";\r\n          if (key == index) {\r\n            this.vectorgraphData[\r\n              index\r\n            ].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\r\n            this.vectorgraphData[index].color = \"#56fefe\";\r\n            this.photoShow = false;\r\n            this.videoShow = false;\r\n            this.videoShow1 = true;\r\n            //这里的port要与index.js的port保持一致\r\n            //解析视频流\r\n            getCabinetCameraList(data).then((res) => {\r\n              console.log(res.data.data, \"视频\");\r\n              this.rtsp1 = res.data.data[0].url;\r\n              this.JSMpeg = new JSMpeg.Player(\r\n                \"ws://localhost:9999/rtsp?url=\" + btoa(this.rtsp1),\r\n                {\r\n                  canvas: document.getElementById(\"canvas1\"),\r\n                }\r\n              );\r\n            });\r\n          }\r\n        });\r\n      }\r\n    },\r\n    closeJSMpeg() {\r\n      //销毁\r\n      this.JSMpeg.destroy();\r\n    },\r\n    handleClose() {\r\n      this.$parent.componentShow = \"\";\r\n      this.$parent.modelOthers = false;\r\n      // this.$emit(\"closeStatus\", this.closeStatus)\r\n      this.rtsp = \"\";\r\n      this.rtsp1 = \"\";\r\n      if (this.JSMpeg != null) {\r\n        this.closeJSMpeg();\r\n      }\r\n    },\r\n    //局放图\r\n    intervalShow(InintervalData) {\r\n      let num = [];\r\n      let time = [];\r\n      if (InintervalData != null && InintervalData != []) {\r\n        for (const i in InintervalData[0].hour_data) {\r\n          num.push(InintervalData[0].hour_data[i]);\r\n          time.push(i);\r\n        }\r\n        this.echartsData.num = num;\r\n        this.echartsData.time = time;\r\n      }\r\n      let that = this;\r\n      var data = this.echartsData;\r\n      var myChart = this.$echarts.init(document.getElementById(\"intervalShow\"));\r\n      var option = {\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          formatter:function(params){\r\n            return '时间：' + params[0].name+'<br/>'+'局放数据：'+params[0].value+'dbm'\r\n          }\r\n        },\r\n        grid: {\r\n          top: \"10%\",\r\n          left: \"3%\",\r\n          right: \"3%\",\r\n          bottom: \"10%\",\r\n          // containLabel: true\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            boundaryGap: true,\r\n            axisLine: {\r\n              //坐标轴轴线相关设置。数学上的x轴\r\n              show: true,\r\n              lineStyle: {\r\n                color: 'color:\"#93dcfe\"',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              //坐标轴刻度标签的相关设置\r\n              textStyle: {\r\n                color: \"#93dcfe\",\r\n                margin: 15,\r\n              },\r\n              formatter: function (data) {\r\n                return data;\r\n              },\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            data: data.time,\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            //   min: 0,\r\n            //   max: 100,\r\n            name: \"dbm\",\r\n            splitLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: \"rgba(147,220,254,0.3)\",\r\n              },\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n              lineStyle: {\r\n                color: \"#93dcfe\",\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              textStyle: {\r\n                color: \"#93dcfe\",\r\n              },\r\n              // formatter: function (value) {\r\n              //   if (value === 0) {\r\n              //     return value;\r\n              //   }\r\n              //   return value + \"%\";\r\n              // },\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"局放数据\",\r\n            type: \"line\",\r\n            symbol: \"circle\", // 默认是空心圆（中间是白色的），改成实心圆\r\n            showAllSymbol: true,\r\n            symbolSize: 8,\r\n            lineStyle: {\r\n              normal: {\r\n                color: \"#1f93fa\", // 线条颜色\r\n              },\r\n              borderColor: \"rgba(0,0,0,.4)\",\r\n            },\r\n            itemStyle: {\r\n              color: \"#1f93fa\",\r\n              borderColor: \"#1f93fa\",\r\n              borderWidth: 2,\r\n            },\r\n            label: {\r\n              normal: {\r\n                show: false,\r\n                position: \"top\",\r\n                formatter: [\" {a|{c}%}\"].join(\",\"),\r\n                rich: {\r\n                  a: {\r\n                    color: \"#fff\",\r\n                    align: \"center\",\r\n                  },\r\n                },\r\n              },\r\n            },\r\n            tooltip: {\r\n              show: true,\r\n            },\r\n\r\n            data: data.num,\r\n          },\r\n        ],\r\n      };\r\n      myChart.setOption(option);\r\n    },\r\n     //图\r\n    temperatureShow(dataA,dataB,dataC,date) {\r\n      let numA = dataA;\r\n      let time = date;\r\n      let numB = dataB;\r\n      let numC = dataC;\r\n      // if (temperatureData != null && temperatureData != []) {\r\n      //   for (const i in temperatureData[0].hour_data) {\r\n      //     num.push(temperatureData[0].hour_data[i]);\r\n      //     time.push(i);\r\n      //   }\r\n      //   this.echartsData.num = num;\r\n      //   this.echartsData.time = time;\r\n      // }\r\n      let that = this;\r\n      // var data = this.echartsData;\r\n      var myChart = this.$echarts.init(document.getElementById(\"temperatureShow\"));\r\n      var option = {\r\n        tooltip: {\r\n          trigger: \"axis\",\r\n          formatter:function(params){\r\n            return '时间：' + params[0].name+'<br/>'+'温度A：'+params[0].value+'℃'\r\n            +'<br/>'+'温度B：'+params[1].value+'℃'\r\n            +'<br/>'+'温度C：'+params[2].value+'℃'\r\n          }\r\n        },\r\n        legend:{\r\n          origin:'horizontal',\r\n          textStyle: {\r\n            color: \"#fff\",\r\n            fontSize: \"18px\",\r\n          },\r\n        },\r\n        grid: {\r\n          top: \"10%\",\r\n          left: \"3%\",\r\n          right: \"3%\",\r\n          bottom: \"10%\",\r\n          // containLabel: true\r\n        },\r\n        xAxis: [\r\n          {\r\n            type: \"category\",\r\n            boundaryGap: true,\r\n            axisLine: {\r\n              //坐标轴轴线相关设置。数学上的x轴\r\n              show: true,\r\n              lineStyle: {\r\n                color: 'color:\"#93dcfe\"',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              //坐标轴刻度标签的相关设置\r\n              textStyle: {\r\n                color: \"#93dcfe\",\r\n                margin: 15,\r\n              },\r\n              formatter: function (data) {\r\n                return data;\r\n              },\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n            data: time,\r\n          },\r\n        ],\r\n        yAxis: [\r\n          {\r\n            //   min: 0,\r\n            //   max: 100,\r\n            name: \"℃\",\r\n            splitLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: \"rgba(147,220,254,0.3)\",\r\n              },\r\n            },\r\n            axisLine: {\r\n              show: false,\r\n              lineStyle: {\r\n                color: \"#93dcfe\",\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              textStyle: {\r\n                color: \"#93dcfe\",\r\n              },\r\n              // formatter: function (value) {\r\n              //   if (value === 0) {\r\n              //     return value;\r\n              //   }\r\n              //   return value + \"%\";\r\n              // },\r\n            },\r\n            axisTick: {\r\n              show: false,\r\n            },\r\n          },\r\n        ],\r\n        series: [\r\n          {\r\n            name: \"A相位\",\r\n            type: \"line\",\r\n            symbol: \"circle\", // 默认是空心圆（中间是白色的），改成实心圆\r\n            showAllSymbol: true,\r\n            symbolSize: 8,\r\n            lineStyle: {\r\n              normal: {\r\n                color: \"#1f93fa\", // 线条颜色\r\n              },\r\n              borderColor: \"rgba(0,0,0,0.4)\",\r\n            },\r\n            itemStyle: {\r\n              color: \"#1f93fa\",\r\n              borderColor: \"#1f93fa\",\r\n              borderWidth: 2,\r\n            },\r\n            label: {\r\n              normal: {\r\n                show: false,\r\n                position: \"top\",\r\n                formatter: [\" {a|{c}%}\"].join(\",\"),\r\n                rich: {\r\n                  a: {\r\n                    color: \"#fff\",\r\n                    align: \"center\",\r\n                  },\r\n                },\r\n              },\r\n            },\r\n            tooltip: {\r\n              show: true,\r\n            },\r\n\r\n            data: numA,\r\n          },\r\n          {\r\n            name: \"B相位\",\r\n            type: \"line\",\r\n            symbol: \"circle\", // 默认是空心圆（中间是白色的），改成实心圆\r\n            showAllSymbol: true,\r\n            symbolSize: 8,\r\n            lineStyle: {\r\n              normal: {\r\n                color: \"rgb(39,239,94)\", // 线条颜色\r\n              },\r\n              borderColor: \"rgba(0,0,0,0.4)\",\r\n            },\r\n            itemStyle: {\r\n              color: \"rgb(39,239,94)\",\r\n              borderColor: \"rgb(39,239,94)\",\r\n              borderWidth: 2,\r\n            },\r\n            label: {\r\n              normal: {\r\n                show: false,\r\n                position: \"top\",\r\n                formatter: [\" {a|{c}%}\"].join(\",\"),\r\n                rich: {\r\n                  a: {\r\n                    color: \"#fff\",\r\n                    align: \"center\",\r\n                  },\r\n                },\r\n              },\r\n            },\r\n            tooltip: {\r\n              show: true,\r\n            },\r\n\r\n            data: numB,\r\n          },\r\n          {\r\n            name: \"C相位\",\r\n            type: \"line\",\r\n            symbol: \"circle\", // 默认是空心圆（中间是白色的），改成实心圆\r\n            showAllSymbol: true,\r\n            symbolSize: 8,\r\n            lineStyle: {\r\n              normal: {\r\n                color: \"rgb(255,193,64)\", // 线条颜色\r\n              },\r\n              borderColor: \"rgba(0,0,0,0.4)\",\r\n            },\r\n            itemStyle: {\r\n              color: \"rgb(255,193,64)\",\r\n              borderColor: \"rgb(255,193,64)\",\r\n              borderWidth: 2,\r\n            },\r\n            label: {\r\n              normal: {\r\n                show: false,\r\n                position: \"top\",\r\n                formatter: [\" {a|{c}%}\"].join(\",\"),\r\n                rich: {\r\n                  a: {\r\n                    color: \"#fff\",\r\n                    align: \"center\",\r\n                  },\r\n                },\r\n              },\r\n            },\r\n            tooltip: {\r\n              show: true,\r\n            },\r\n\r\n            data: numC,\r\n          },\r\n        ],\r\n      };\r\n      myChart.setOption(option);\r\n    },\r\n  },\r\n  watch: {\r\n    equipmentName: {\r\n      handler(newVal, oldVal) {\r\n        if (newVal == \"箱变\") {\r\n          this.tableColumns.forEach((item, index) => {\r\n            if (index == 0 || index % 2 == 0) {\r\n              item.name = \"进线\";\r\n            } else {\r\n              item.name = \"出线\";\r\n            }\r\n          });\r\n        } else {\r\n          this.tableColumns.forEach((item, index) => {\r\n            item.name=\"间隔\"+(index+1)\r\n          });\r\n        }\r\n      },\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"less\" scoped>\r\n.fenzhiMessage {\r\n  width: 100%;\r\n  margin-top: 6px;\r\n  height: calc(100% - 30px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-around;\r\n  background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n  .fenzhiItem {\r\n    background-image: url(\"../../assets/images/fenzhiBg.png\");\r\n    width: 295px;\r\n    height: 116px;\r\n    background-size: 100% 100%;\r\n    .unitNum {\r\n      height: 83px;\r\n      line-height: 83px;\r\n      width: 100%;\r\n      text-align: center;\r\n      font-size: 30px;\r\n      color: #56fefe;\r\n    }\r\n    .fenzhiUnit {\r\n      height: 33px;\r\n      text-align: center;\r\n      font-size: 20px;\r\n      line-height: 28px;\r\n      color: #fff;\r\n    }\r\n  }\r\n}\r\n.addTitle {\r\n  color: rgb(86, 244, 254);\r\n  text-align: left;\r\n}\r\n//表格\r\n.user_skills {\r\n  /**\r\n  表格有滚动效果但是不显示滚动条\r\n  */\r\n  /deep/ .is-scrolling-none {\r\n    overflow: hidden;\r\n    overflow-y: auto;\r\n    overflow-x: scroll;\r\n  }\r\n  /deep/ .is-scrolling-none::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n  /deep/.el-table--scrollable-y ::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n  /deep/.el-table--scrollable-x ::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n  /deep/ .el-table {\r\n    background-color: transparent !important;\r\n  }\r\n  /deep/ .el-table th {\r\n    background-color: transparent !important;\r\n  }\r\n  /deep/ .el-table__header {\r\n    height: 48px;\r\n    background: url(\"../../assets/images/intervalTable.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n  }\r\n  /deep/ .el-table__header th {\r\n    border: none;\r\n    padding: 0;\r\n    height: 40px;\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    &.el-table__cell.is-leaf {\r\n      border: none !important;\r\n    }\r\n  }\r\n  /deep/ .el-table tr {\r\n    background-color: transparent !important;\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  /deep/ .el-table__body td .cell {\r\n    white-space: nowrap !important;\r\n    // word-break: break-all;\r\n  }\r\n  /deep/ .el-table th.el-table__cell > .cell {\r\n    color: rgb(86, 254, 226);\r\n  }\r\n  /deep/.el-table .el-table__cell {\r\n    padding: 5px 0;\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::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::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.ringMain {\r\n  width: 1332px !important;\r\n  height: 739px !important;\r\n  background-image: url(\"../../assets/images/ringMain.png\") !important;\r\n  .main {\r\n    height: 93% !important;\r\n    .basic {\r\n      margin-top: 20px;\r\n      .title {\r\n        margin-bottom: 5px;\r\n      }\r\n    }\r\n  }\r\n}\r\n.ringMainUnit {\r\n  width: 1511px;\r\n  height: 1071px;\r\n  background: url(\"../../assets/images/ringMainUnitKuang.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  -webkit-animation: fadeInDown 0.3s;\r\n  animation: fadeInDown 0.3s;\r\n  padding: 15px 25px;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-content: space-between;\r\n  .top {\r\n    height: 4%;\r\n    width: 100%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    .title {\r\n      font-size: 28px;\r\n      font-weight: 700;\r\n      color: transparent;\r\n      -webkit-background-clip: text;\r\n      background-clip: text;\r\n      background-image: linear-gradient(\r\n        to bottom,\r\n        rgb(255, 255, 255),\r\n        rgb(86, 244, 254)\r\n      );\r\n    }\r\n  }\r\n  .main {\r\n    height: 95%;\r\n    width: 100%;\r\n    //   border: 1px solid blue;\r\n    .basic {\r\n      height: 8.8%;\r\n      width: 100%;\r\n      //   border: 1px solid red;\r\n      .title {\r\n        height: 27%;\r\n        width: 100%;\r\n        //  border: 1px solid yellow;\r\n        color: rgb(86, 244, 254);\r\n        display: flex;\r\n      }\r\n      .content {\r\n        height: 73%;\r\n        width: 100%;\r\n        background: url(\"../../assets/images/basicFrame.png\") no-repeat;\r\n        display: flex;\r\n        background-size: 100% 100%;\r\n        justify-content: space-around;\r\n        overflow: auto;\r\n        .information {\r\n          color: #ffffff;\r\n          height: 100%;\r\n          width: 96%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: space-between;\r\n          .informationContent {\r\n            height: 35px;\r\n            line-height: 35px;\r\n            background: url(\"../../assets/images/cardSquare.png\") no-repeat;\r\n            background-size: 100% 100%;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    .earlyWarning {\r\n      height: 8.8%;\r\n      width: 100%;\r\n      margin-top: 10px;\r\n      //   border: 1px solid red;\r\n      .title {\r\n        height: 27%;\r\n        width: 100%;\r\n        //  border: 1px solid yellow;\r\n        color: rgb(86, 244, 254);\r\n        display: flex;\r\n      }\r\n      .content {\r\n        height: 73%;\r\n        width: 100%;\r\n        background: url(\"../../assets/images/basicFrame.png\") no-repeat;\r\n        display: flex;\r\n        background-size: 100% 100%;\r\n        justify-content: flex-start;\r\n        .information {\r\n          color: #ffffff;\r\n          height: 100%;\r\n          width: 79%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: space-between;\r\n          display: flex;\r\n          align-items: center;\r\n          -webkit-box-pack: justify;\r\n          padding-left: 24px;\r\n          .informationContent {\r\n            height: 35px;\r\n            background: url(\"../../assets/images/cardSquare.png\") no-repeat;\r\n            background-size: 100% 100%;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    .interval {\r\n      height: 40%;\r\n      width: 100%;\r\n      margin-top: 10px;\r\n      .title {\r\n        height: 7%;\r\n        width: 100%;\r\n        color: rgb(86, 244, 254);\r\n        display: flex;\r\n      }\r\n      .table {\r\n        height: 85%;\r\n        // border: 1px solid red;\r\n        background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n        background-size: 100% 100%;\r\n        padding: 15px 20px;\r\n      }\r\n    }\r\n    .intervalData {\r\n      height: 33%;\r\n      margin-top: 10px;\r\n      padding-left: 10px;\r\n      background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n      background-size: 100% 100%;\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      /deep/ .el-tabs__nav-wrap::after {\r\n        background-color: transparent !important;\r\n      }\r\n      /deep/ .el-tabs--top{\r\n        width: 50%;\r\n      }\r\n      #intervalShow {\r\n        width: 100%;\r\n        height: calc(100% - 54px);\r\n      }\r\n      #temperatureShow{\r\n        width: 100%;\r\n        height: calc(100% - 54px);\r\n      }\r\n    }\r\n    .InfraredVideo {\r\n      .title {\r\n        height: 100%;\r\n        .content {\r\n          margin-left: 30px;\r\n          display: flex;\r\n          flex-direction: row;\r\n          flex-wrap: wrap;\r\n          justify-content: flex-start;\r\n        }\r\n      }\r\n      /deep/ .el-tabs__item {\r\n        margin-top: 20px;\r\n        padding: 0 30px;\r\n      }\r\n    }\r\n  }\r\n}\r\n.content1 {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n}\r\n/deep/.el-tabs__content {\r\n  height: 100%;\r\n  overflow: auto;\r\n  position: relative;\r\n}\r\n/**\r\n下拉显示动画效果\r\n*/\r\n@keyframes fadeInDown {\r\n  0% {\r\n    -webkit-transform: translate3d(0, -20%, 0);\r\n    transform: translate3d(0, -20%, 0);\r\n    opacity: 0;\r\n  }\r\n\r\n  100% {\r\n    -webkit-transform: none;\r\n    transform: none;\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@-webkit-keyframes fadeInDown {\r\n  0% {\r\n    -webkit-transform: translate3d(0, -20%, 0);\r\n    opacity: 0;\r\n  }\r\n\r\n  100% {\r\n    -webkit-transform: none;\r\n    opacity: 1;\r\n  }\r\n}\r\n</style>\r\n<style lang=\"less\">\r\n.el-tabs__item:hover {\r\n  color: #56fefe !important;\r\n}\r\n.el-tabs__item.is-active {\r\n  color: #56fefe !important;\r\n  font-size: 23px;\r\n}\r\n.el-tabs__item {\r\n  color: rgb(60, 127, 127) !important;\r\n  font-size: 18px;\r\n}\r\n\r\n.el-tabs__active-bar {\r\n  background-color: transparent !important;\r\n  background: url(\"../../assets/images/ringMainGH.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  bottom: -5px !important;\r\n  height: 19px !important;\r\n}\r\n.el-tabs__nav-wrap::after {\r\n  background-color: rgb(38, 114, 120) !important;\r\n}\r\n</style>\r\n"]}]}