{"remainingRequest":"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=style&index=0&id=69e71d64&lang=less&scoped=true&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\HomePop\\ringMainUnit.vue","mtime":1689642397095},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\css-loader\\index.js","mtime":1689642389821},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1689642396087},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\postcss-loader\\src\\index.js","mtime":1689642393431},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\less-loader\\dist\\cjs.js","mtime":1689642392421},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1689642396086}],"contextDependencies":[],"result":["\r\n.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",{"version":3,"sources":["ringMainUnit.vue"],"names":[],"mappings":";AAuwCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"ringMainUnit.vue","sourceRoot":"src/views/HomePop","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"]}]}