project-neic/src/components/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>
          <CL v-if="item.id === 'CL_FDC'" />
          <KB v-if="item.id === 'KB_FDC'" />
          <KB v-if="item.id === 'DX_FDC'" />
          <div class="alarmIconBox" @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'"
      />
    </div>
  </el-dialog>
</template>
<script>
import CL from "../BoosterStation/cl.vue";
import DX from "../BoosterStation/dx.vue";
import KB from "../BoosterStation/kb.vue";

import CurrentWarningCard from "./currentWarningCard.vue";
export default {
  components: {
    CL,
    DX,
    KB,
    CurrentWarningCard,
  },
  data() {
    return {
      activeTab: this.$store.state.activeTab,
      svgVisible: true,
      audio: null,
      timmer: null,
      syzArray: this.$store.getters.syzArray || [],
      pageshowMode: 0,
    };
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
    // 初始化第一次报警并判断是否播放声音
    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 =
        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.timmer = setInterval(() => {
        this.renderAlarm();
      }, 3000);
    },

    closed() {
      clearInterval(this.timmer);
      this.timmer = null;
      this.$store.commit("activeTab", "");
      this.$store.commit("syzDialogShow", false);
    },

    tabClick(res) {
      this.$store.commit("activeTab", res.props.name);
      this.renderAlarm(res.props.name, false);
    },
  },
  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;

    .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: 100% !important;
    height: 100% !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>