jn_sis_zhfx/src/views/stateMonitor/focus/syzDetails.vue

<template>
  <el-dialog
      width="90%"
      @open="opened"
      @closed="closed"
      :fullscreen="true"
      :show-close="true"
      class="dialogs"
  >
    <template #title>
      <div class="showTitles currentShowTitles">
        <div class="titles">升压站</div>
      </div>
    </template>
    <div class="bodyy">
      <el-tabs
          type="border-card"
          stretch
          lazy
          style="width: 100%; height: 100%"
          v-model="activeTab"
          @tab-click="tabClick"
      >
        <el-tab-pane
            class="syzDetailsPaneItem"
            v-for="(item, index) in syzArray"
            :key="index"
            :name="item.id"
        >
          <template #label>
                <span v-if="pageshowMode % 2">
                <el-badge is-dot v-if="item.isWarning === '1'">
                    <span>{{ item.name }}</span>
                </el-badge>
                <span v-else>{{ item.name }}</span>
                </span>
            <span v-else>
                <el-badge is-dot v-if="item.isWarning === '1'">
                    <span>{{ item.name }}</span>
                </el-badge>
                <span v-else>{{ item.name }}</span>
                </span>
          </template>
          <div class="buttonGroup" v-if="item.id === 'all'">
            <el-button-group>
              <el-button type="plain" size="small" @click="changeHeight('D')"
                         :class="allHeight === 'D' ? 'showSty' : ''">大图标
              </el-button>
              <el-button type="plain" size="small" @click="changeHeight('Z')"
                         :class="allHeight === 'Z' ? 'showSty' : ''">中图标
              </el-button>
              <el-button type="plain" size="small" @click="changeHeight('X')"
                         :class="allHeight === 'X' ? 'showSty' : ''">小图标
              </el-button>
            </el-button-group>
          </div>
          <div v-if="item.id === 'all'" :style="allpageHeight"
               style="width: 100%;display: inline-block;overflow-y:auto">
            <div v-for="(item, index) in allSvgMsgData" :key="index" :style="getStyle(allHeight)">
              <div class="showAllSvgMsg" @dblclick="dblgetSvgDataFn(item.id)" :class="getWarnstyle(item)">
                <div class="showAllSvgMsg_top" v-html="item.msg"></div>
                <div class="showAllSvgMsg_bot">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div id="svg" :style="pageHeight" v-if="item.id !== 'all' && item.id === activeTab" v-html="svgMsg"
               v-loading="loading"></div>
           <Mhs ref="svgRef" v-if="item.id === 'MHS_BT'" />
          <Nss ref="svgRef" v-if="item.id === 'NSS_FDC'" />
          <Qs ref="svgRef" v-if="item.id === 'QS_FDC'" />
          <Sbq ref="svgRef" v-if="item.id === 'SBQ_FDC'" />
          <Xs ref="svgRef" v-if="item.id === 'XS_FDC'" />
           <Pl1 ref="svgRef" v-if="item.id === 'PL1_GDC'" />
          <Pl2 ref="svgRef" v-if="item.id === 'PL2_GDC'" />
          <Dwk ref="svgRef" v-if="item.id === 'DWK_GDC'" />
          <Mch ref="svgRef" v-if="item.id === 'MCH_GDC'" />
          <Xh ref="svgRef" v-if="item.id === 'XH_GDC'" />
          <Sbdl ref="svgRef" v-if="item.id === 'QS3_FDC'" />
          <div class="alarmIconBox" v-if="item.id !== 'all'" @click="switchAlarmSound(index)">
            <el-tooltip
                v-if="item.isMute"
                effect="light"
                :content="`当前${item.name}升压站报警已消音，请注意`"
                placement="left"
            >
              <i
                  class="el-icon-close-notification"
                  style="color: orangered"
              ></i>
            </el-tooltip>
            <i v-else class="el-icon-bell" style="color: rgb(219, 215, 0)"></i>
          </div>
        </el-tab-pane>
      </el-tabs>
      <CurrentWarningCard
          :currentClass="$store.state.currentWarningCardClass"
          :activeTab="activeTab || 'MHS_FDC'"
          v-if="activeTab !== 'all'"
      />
    </div>
  </el-dialog>
</template>

<script>
import Mhs from "@/components/BoosterStation/mhs.vue";
import Nss from "@/components/BoosterStation/nss.vue";
import Qs from "@/components/BoosterStation/qs.vue";
import Sbq from "@/components/BoosterStation/sbq.vue";
import Xs from "@/components/BoosterStation/xs.vue";
import Dwk from "@/components/BoosterStation/dwk.vue";
import Sbdl from "@/components/BoosterStation/sbdl.vue";
import Pl1 from "@/components/BoosterStation/pl1.vue";
import Pl2 from "@/components/BoosterStation/pl2.vue";
import Mch from "@/components/BoosterStation/mch.vue";
import Xh from "@/components/BoosterStation/xh.vue";

import api from "@api/stateMonitor/index.js";
import CurrentWarningCard from "./currentWarningCard.vue";

export default {
  props: {
    activeTabStation: {
      type: String,
      default: "",
    },
  },
  components: {
    Mhs,
    Nss,
    Qs,
    Sbq,
    Xs,
    Dwk,
    Sbdl,
    Pl1,
    Pl2,
    Mch,
    Xh,
    CurrentWarningCard
  },
  data() {
    return {
      activeTab: this.$store.state.activeTab,
      svgVisible: true,
      audio: null,
      timmer: null,
      syzArray: [],
      pageshowMode: 0,
      svgMsg: '',
      loading: false,
      allTagidArr: [],
      starTimer: null,
      allTagsMS: {},
      allrefreshData: {},
      allConditions: {},
      onlytag: {},
      allSvgMsgData: [],
      allHeight: 'D',
      allWarnData: [],
      starTimerWarn: null,
      numm: 0,
      stationSort: []
    };
  },
  computed: {
    pageHeight() {
      return {
        'height': document.documentElement.clientHeight - 60 + 'px'
      }
    },
    allpageHeight() {
      return {
        'height': document.documentElement.clientHeight - 200 + 'px'
      }
    },
  },
  mounted() {
  },
  updated() {
  },
  methods: {
    // 获取升压站报警数据
    getSyzWarnData() {
      api.alarmFault().then((res) => {
        if (res && res.data) {
          let datas = res.data
          let arr = []
          datas.forEach(it => {
            if (it.rank === '5' && it.category1 === 'SYZ') {
              // if (it.stationName.indexOf('风电场') !== -1 ) {
              //     str = it.stationName.substring(0, it.stationName.indexOf('风电场'))
              // } else if (it.stationName.indexOf('光伏电站') !== -1) {
              //     str = it.stationName.substring(0, it.stationName.indexOf('光伏电站'))
              // }
              arr.push(it.category2)
            }
            // let str = ''
          })
          this.allWarnData = this.unique(arr)
        }
      })
    },
    unique(arr) {
      let newArr = []
      for (let i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
          newArr.push(arr[i])
        }
      }
      return newArr
    },
    getWarnstyle(item) {
      let showWarn = ''
      this.allWarnData.forEach(it => {
        if (it === item.id) {
          showWarn = 'warningMaskNew'
        }
      })
      return showWarn
    },
    getStyle(type) {
      let num = null
      let num1 = null
      let num2 = null
      if (type === 'D') {
        return {
          'width': '33.3%',
          'float': 'left',
          'height': '400px'
        }
      } else if (type === 'Z') {
        num = parseInt(this.allSvgMsgData.length / 4)
        num1 = this.allSvgMsgData.length % 4
        num2 = num1 > 0 ? num + 1 : num
        return {
          'width': '25%',
          'float': 'left',
          'height': (document.documentElement.clientHeight - 200) / num2 + 'px'
        }
      } else {
        num = parseInt(this.allSvgMsgData.length / 5)
        num1 = this.allSvgMsgData.length % 5
        num2 = num1 > 0 ? num + 1 : num
        return {
          'width': '20%',
          'float': 'left',
          'height': (document.documentElement.clientHeight - 200) / num2 + 'px'
        }
      }

    },
    changeHeight(type) {
      this.allHeight = type
    },
    getAllStationtab() {
      let obj = {
        id: 'all',
        name: '全部'
      }
      api.getAllStationTab().then((res) => {
        if (res && res.data) {
          res.data.unshift(obj)
          this.syzArray = res.data
          this.activeTab = res.data[0].id
          if (this.activeTab === 'all') {
            let allMsg = res.data
            this.allSvgMsgData = []
            this.stationSort = []
            allMsg.forEach(it => {
              if (it.id !== 'all') {
                this.stationSort.push(it.name)
                this.getallSvgDataFn(it.id, it.name)
              }
            })
            // window.sessionStorage.setItem('allSvgData', [])
            console.log('allSvgMsgData', this.allSvgMsgData)
            console.log('stationSort', this.stationSort)
            console.log('allMsg', allMsg)
          }

          // this.getSvgDataFn(res.data[0].id)
        }
      })
    },
    // 获取所有升压站数据
    getallSvgDataFn(id, name) {
      let params = {
        id: id
      }
      api.getSvgData(params).then((res) => {
        let str = ''
        str = res.data.substring(res.data.indexOf('<svg'))
        str = str.replace('<svg', '<svg viewBox="0 -100 1900 1260"')
        let obj = {
          id: id,
          name: name,
          msg: str
        }
        this.allSvgMsgData.push(obj)
        if (this.allSvgMsgData.length === this.stationSort.length) {
          let sortArr = []
          this.stationSort.forEach(itc => {
            this.allSvgMsgData.forEach(itb => {
              if (itc === itb.name) {
                sortArr.push(itb)
              }
            })
          })
          this.allSvgMsgData = sortArr
        }
      })
    },
    // 获取升压站数据
    getSvgDataFn(val) {
      this.svgMsg = ''
      this.loading = true
      let params = {
        id: val
      }
      api.getSvgData(params).then((res) => {
        if (res && res.data) {
          let str = ''
          str = res.data.substring(res.data.indexOf('<svg'))
          str = str.replace('<svg', '<svg viewBox="0 0 1900 1260"')
          this.svgMsg = str
          let html = document.getElementById('svg')
          let svg1 = document.getElementsByTagName('svg')
          this.$nextTick(() => {
            if (svg1) {
              let allTags = []
              let allTagsxc = []
              let status = ['g', 'text', 'rect', 'line', 'polyline', 'circle', 'ellipse', 'polygon']
              status.forEach(it => {
                let allgs = []
                allgs = document.querySelectorAll(it);
                allTags.push(allgs)
              })
              allTags = [...allTags[0], ...allTags[1], ...allTags[2], ...allTags[3], ...allTags[4], ...allTags[5], ...allTags[6], ...allTags[7]]
              allTags.forEach((it) => {
                if (it.getAttribute("tagid")) {
                  allTagsxc.push(it);
                }
              });
              console.log('allTags222=>', allTagsxc)
              this.allTagidArr = allTagsxc
              this.getSvgInfo()
            }
            console.log('html111=>', html)
          })
          this.loading = false
        }
      })
    },
    // 获取触发器
    getSvgInfo() {
      let params = {
        id: this.activeTab
      }
      api.getAllStationSvgInfo(params).then((res) => {
        if (res && res.data) {
          if (res.data.tags) {
            let strarr = []
            let str = ''
            for (let i in res.data.tags) {
              strarr.push(res.data.tags[i].tag)
            }
            str = strarr.join(',')
            this.allTagsMS = res.data.tags
            this.allConditions = res.data.conditions
            // this.getrefreshData(str)
            this.starTimer = setInterval(() => {
              this.getrefreshData(str)
            }, 1000)
          }
          console.log('SvgInfo333=>', res)
        }
      })
    },
    // 获取根盾数据
    getrefreshData(val) {
      api.refreshData(val).then((res) => {
        if (res && res.data) {
          this.allrefreshData = res.data
          this.refreshDataFn(this.allTagsMS)
        }
        console.log('refreshData444=>', res)
      })
    },
    // 刷新数据
    refreshDataFn(datas) {
      for (let it in datas) {
        let tagId = datas[it];
        this.toRefreshFn(it, tagId);
      }
    },
    // 刷新自定义组件
    toRefreshFn(val, data) {
      var tag = this.allrefreshData[data.tag];
      if (!tag) return;
      this.allTagidArr.forEach(it => {
        this.onlytag = {}
        if (it.attributes.tagid) {
          if (val === it.attributes.tagid.value) {
            this.onlytag = it
            if (it.nodeName === 'polyline') {
              console.log('onlyTag666', this.onlytag)
            }
            if (it.nodeName !== 'text') {
              if (this.onlytag.attributes.csid) {
                let csid = this.onlytag.attributes.csid.value.split(';')
                csid.forEach(ic => {
                  if (ic) {
                    if (!this.allConditions[ic].isBinding) {
                      let num = parseInt(this.allConditions[ic].value) === 0 ? '0' : parseInt(this.allConditions[ic].value)
                      if (num) {
                        let num2 = tag.value === 0 ? '0' : tag.value
                        if (num === num2) {
                          this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
                          return
                        }
                      }
                    } else {
                      this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
                    }
                  }
                })
              }
            } else {
              this.onlytag.textContent = tag.value.toFixed(2)
            }
          }
        }
      })
      // console.log('onlyTag555', this.onlytag)
    },
    // '全部'界面双击事件
    dblgetSvgDataFn(name) {
      this.activeTab = name
      this.getSvgDataFn(name)
    },
    // 初始化第一次报警并判断是否播放声音
    initAlarm() {
      let syzAlarmArray = this.$store.getters.syzAlarmArray;

      const firstAlarmItem = syzAlarmArray.find((ele) => {
        return !ele.isConfirm && ele.rank === this.$store.state.syzAlarmRank;
      });

      firstAlarmItem &&
      this.audioPlay(this.getSound(firstAlarmItem.soundSource));

      firstAlarmItem &&
      this.$store.getters.syzAlarmArray.forEach((ele) => {
        if (ele.stationId === firstAlarmItem.stationId) {
          ele.isConfirm = true;
        }
      });

      this.activeTab =
          this.activeTabStation ||
          firstAlarmItem?.stationId ||
          syzAlarmArray.find((ele) => {
            return ele.rank === this.$store.state.syzAlarmRank;
          })?.stationId ||
          this.$store.getters.syzArray[0].id;

      syzAlarmArray.forEach((ele) => {
        if (ele.stationId === firstAlarmItem?.stationId) {
          ele.isConfirm = true;
          this.clearWarningTag(ele.stationId);
        } else if (
            !ele.isConfirm &&
            ele.stationId !== firstAlarmItem?.stationId
        ) {
          this.renderWarningTag(ele.stationId);
        }
      });

      this.$store.commit("syzAlarmArray", syzAlarmArray);
    },

    // 定时器循环数据判断小红点渲染及是否播放声音
    renderAlarm(stationId = "", playSound = true) {
      let syzAlarmArray = this.$store.getters.syzAlarmArray;

      syzAlarmArray.forEach((ele) => {
        if (ele.stationId === stationId) {
          ele.isConfirm = true;
          this.clearWarningTag(ele.stationId);
        } else if (!ele.isConfirm && ele.stationId !== stationId) {
          this.renderWarningTag(ele.stationId);
        }
      });

      const res = syzAlarmArray.find((ele) => {
        return !ele.isConfirm;
      });

      if (playSound) {
        // this.audioPlay("./static/sound/syz.mp3");
      }

      this.$store.commit("syzAlarmArray", syzAlarmArray);
    },

    // 返回音频文件路径
    getSound(fileName) {
      return `./static/sound/${fileName}.mp3`;
    },

    // 播放音频
    audioPlay(audioPath) {
      let soundMuteSelf = [];
      let soundMuteOther = [];

      this.$store.getters.syzAlarmArray.forEach((ele) => {
        if (ele.stationId === this.activeTab) {
          soundMuteSelf.push(ele);
        } else {
          soundMuteOther.push(ele);
        }
      });

      let alarmSelfLock = soundMuteSelf.some((ele) => {
        return !ele.isConfirm;
      });

      let alarmOtherLock = soundMuteOther.some((ele) => {
        return !ele.isConfirm;
      });

      if (alarmOtherLock) {
        this.audio = new Audio(audioPath);
        this.audio.play();
      } else if (alarmSelfLock) {
        this.$store.getters.syzArray.forEach((ele) => {
          if (ele.stationId === this.activeTab) {
            ele.isMute = false;
            this.audio = new Audio(audioPath);
            this.audio.play();
          }
        });
      } else if (!alarmSelfLock) {
        this.$store.getters.syzArray.forEach((ele) => {
          if (ele.stationId === this.activeTab) {
            if (!ele.isMute) {
              this.audio = new Audio(audioPath);
              this.audio.play();
            }
          }
        });
      }
    },

    // 显示某个小红点
    renderWarningTag(stationId = "") {
      this.$store.getters.syzArray.forEach((ele) => {
        if (ele.id === stationId) {
          ele.isWarning = "1";
        }
      });
      this.pageshowMode++;
    },

    // 清除某个小红点
    clearWarningTag(stationId = "") {
      this.$store.getters.syzArray.forEach((ele) => {
        if (ele.id === stationId) {
          ele.isWarning = "0";
        }
      });
      this.pageshowMode++;
    },

    // 切换报警声音开关
    switchAlarmSound(index) {
      this.$store.getters.syzArray[index].isMute =
          !this.$store.getters.syzArray[index].isMute;
    },

    opened() {
      this.initAlarm();
      this.getAllStationtab()
      this.timmer = setInterval(() => {
        this.renderAlarm();
      }, 3000);

      let starTimerWarn = setInterval(() => {
        this.getSyzWarnData()
      }, 2000)
      if (this.activeTabStation) {
        setTimeout(() => {
          clearInterval(this.starTimer);
          this.starTimer = null;
          this.$store.commit("activeTab", this.activeTabStation);
          this.renderAlarm(this.activeTabStation, false);
          if (this.activeTabStation !== 'all') {
            this.activeTab = this.activeTabStation
            this.debounce(this.getSvgDataFn(this.activeTabStation), 200)
          }
        }, 100);
      }
    },

    closed() {
      // this.$refs.svgRef[0].closed()
      // this.$refs.svgRef[1].closed()
      // this.$refs.svgRef[2].closed()
      // this.$refs.svgRef[3].closed()
      // this.$refs.svgRef[4].closed()
      clearInterval(this.starTimer);
      clearInterval(this.starTimerWarn);
      clearInterval(this.timmer);
      this.starTimer = null
      this.starTimerWarn = null
      this.timmer = null;
      this.$store.commit("activeTab", "");
      this.$store.commit("syzDialogShow", false);
    },

    tabClick(res) {
      clearInterval(this.starTimer);
      this.starTimer = null;
      this.$store.commit("activeTab", res.props.name);
      this.renderAlarm(res.props.name, false);
      if (res.props.name !== 'all') {
        this.debounce(this.getSvgDataFn(res.props.name), 200)
        // this.getSvgDataFn(res.props.name)
      }
    },
    debounce(fn, delay) {
      var delay = delay || 200;
      var timer;
      return function () {
        var th = this;
        var args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delay);
      };
    },
    throttle(fn, interval) {
      var last;
      var timer;
      var interval = interval || 200;
      return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
          clearTimeout(timer);
          timer = setTimeout(function () {
            last = now;
            fn.apply(th, args);
          }, interval);
        } else {
          last = now;
          fn.apply(th, args);
        }
      }
    }
  },
  watch: {
    "$store.state.syzArray"(res) {
      this.syzArray = res;
    },
  },
};
</script>

<style lang="less" scoped>
.bodyy {
  display: flex;
  flex-direction: row;
  background-color: black;
  width: 98%;
  margin-top: -30px;
  height: 90vh;
  position: relative;
  overflow: hidden;
  margin-left: 44px;

  .syzDetailsPaneItem {
    position: relative;

    .buttonGroup {
      margin-bottom: 10px;
      display: flex;
      // justify-content: end;
      float: right;

      .el-button-group {
        .el-button {
          min-height: 30px !important;
        }

        .showSty {
          color: #409eff;
          border-color: #c6e2ff;
          background-color: #ecf5ff;
          outline: 0;
        }
      }
    }

    .warningMaskNew {
      background-color: rgba(186, 50, 55, 0.5);
      animation: fade 2000ms infinite;
      -webkit-animation: fade 2000ms infinite;
    }

    @keyframes fade {
      from {
        opacity: 0.7;
      }

      50% {
        opacity: 0.3;
      }

      to {
        opacity: 0.7;
      }
    }

    @-webkit-keyframes fade {
      from {
        opacity: 0.7;
      }

      50% {
        opacity: 0.3;
      }

      to {
        opacity: 0.7;
      }
    }

    .showAllSvgMsg {
      width: calc(100% - 15px);
      height: calc(100% - 15px);
      // padding: 20px;
      // margin-bottom: 20px;
      // background: #3a3a3a;
      // border: 3px solid #3a3a3a;
      border: 3px solid #646464;
      border-radius: 10px;

      .showAllSvgMsg_top {
        border-radius: 10px 10px 0 0;
        height: calc(100% - 40px);
        width: 100%;
        // background: #fff;
      }

      .showAllSvgMsg_bot {
        background: #3a3a3a;
        border-radius: 0 0 8px 8px;
        height: 40px;
        text-align: center;

        span {
          position: relative;
          top: 10px;
          font-weight: bold;
          color: #fff;
        }
      }
    }

    .alarmIconBox {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;

      i {
        font-size: 20px;
      }
    }
  }
}
</style>
<style lang="less">
.bodyy {
  .pop-up-main,
  .paln-box {
    width: 100%;
    height: 90vh;
    overflow: hidden;
    position: relative;
  }

  .movableItem {
    // width: 1920PX !important;
    // height: 800PX !important;

    .svg {
      //   width: 100%;
      //   height: 92%;
      margin-left: 0;
      margin-top: 8%;
    }
  }

  .el-badge__content.is-fixed.is-dot {
    right: 0;
    top: 10px;
    background: #f25656;
    animation: twinkle 0.75s infinite;
    border-color: transparent;
  }

  @keyframes twinkle {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

.currentShowTitles {
  width: 100%;
  position: relative;

  .alarIcon {
    position: absolute;
    right: 50px;
    top: 5;
    font-size: 20px;
    cursor: pointer;
  }
}

</style>