hb-neic-project/src/components/warning/warningCard.vue

/* 告警区 */
<template>
  <div style="padding-left: 5px; padding-right: 5px">
    <el-table
      :data="values"
      class="table"
      height="19vh"
      :header-cell-style="{
        background: '#000000',
        color: 'rgb(220,220,220)',
        padding: '4px',
        fontSize: '14px',
        'border-bottom': 'solid 1px black',
      }"
      :cell-class-name="setCellClassName"
      @row-dblclick="itemDblclick"
    >
      <el-table-column
        prop="lastUpdateTime"
        align="center"
        label="时间"
        width="150"
      >
      </el-table-column>

      <el-table-column
        prop="stationName"
        align="center"
        label="场站名称"
        width="100"
      >
      </el-table-column>
      <el-table-column width="60" align="end">
        <template #default="scope">
          <span>
            <img
              class="titleImg"
              v-if="scope.row.category1 === 'SYZ'"
              src="../../assets/img/controlcenter/warning.png"
              alt=""
            />
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="alertText" align="center" label="描述" width="160">
      </el-table-column>
      <el-table-column prop="isSelected" align="center" label="确认">
        <template v-slot="scope">
          <input
            type="checkbox"
            v-model="scope.row.isSelected"
            @click="itemChecked(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <WindturbineDetailPages
    v-model="dialogVisible"
    :windturbine="currentWindturbine"
    @close="close"
  ></WindturbineDetailPages>
  <StationSvgDetailPages
    v-model="svgVisible"
    :svgWeb="svgWeb"
    @close="close"
  ></StationSvgDetailPages>
</template>

<script>
import MessageBridge from "utils/MessageBridge";
import WindturbineDetailPages from "../WindturbineDetailPages.vue";
import BackgroundData from "utils/BackgroundData";
import api from "api/index";
import StationSvgDetailPages from "../stationSvgDetailPages.vue";

export default {
  name: "AlarmArea",
  components: {
    WindturbineDetailPages,
    // Sbdl,
    StationSvgDetailPages,
  },
  created() {
    this.faultMessage();
    this.intervals = setInterval(this.faultMessage, 15000);
  },
  mounted() {},
  props: {},
  data() {
    return {
      values: [],
      dialogVisible: false,
      showSvg: false,
      svgVisible: false,
      svgWeb: "",
      stationName: "",
      currentWindturbine: {},
      audio: null,
      intervals: null,
    };
  },
  methods: {
    faultMessage(json) {
      api.alarmFault().then((res) => {
        if (res.data) {
          this.values = []
          let val = res.data;
          if (Object.keys(val).length > 0) {
            // let syzAlarmArray = this.$store.state.syzAlarmArray || [];
            // val.forEach((ele) => {
            //   if (
            //     ele.category1 === "SYZ" &&
            //     ele.rank === this.$store.state.syzAlarmRank
            //   ) {
            //     let item = syzAlarmArray.find((findEle) => {
            //       return ele.idString === findEle.idString;
            //     });
            //     if (!item) {
            //       ele.soundSource = "syz";
            //       ele.isConfirm = false;
            //       syzAlarmArray.push(ele);
            //     }
            //   }
            // });

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

            // this.$store.commit(
            //   "showWarningMask",
            //   syzAlarmArray.some((ele) => {
            //     return ele.rank === this.$store.state.syzAlarmRank;
            //   })
            // );

            // const syzAlarmItem = this.$store.getters.syzAlarmArray.some(
            //   (ele) => {
            //     return (
            //       ele.category1 === "SYZ" &&
            //       ele.rank === this.$store.state.syzAlarmRank
            //     );
            //   }
            // );

            // const syzDialogShow = this.$store.getters.syzAlarmArray.some(
            //   (ele) => {
            //     return !ele.isConfirm;
            //   }
            // );

            // syzDialogShow && this.$store.commit("syzDialogShow", syzDialogShow);

            // let syzBtnFlicker = syzAlarmArray.some((ele) => {
            //   return ele.rank === this.$store.state.syzAlarmRank;
            // });

            // this.$store.commit("syzBtnFlicker", syzBtnFlicker);

            for (let v in val) {
              let vl = val[v];
              if (vl.category1 !== "GF" && vl.objectId.indexOf("GDC") < 0) {
                this.values.push(vl);
              }
            }

            // let fjAlarArray = [];
            // let fjDataArray = [];

            // this.values.forEach((ele) => {
            //   if (ele.category1 === "FJ") {
            //     if (ele.rank >= this.$store.state.fjAlarmRank) {
            //       fjAlarArray.push(ele);
            //     } else {
            //       fjDataArray.push(ele);
            //     }
            //   }
            // });

            // if (syzAlarmItem) {
            //   let syzRes = syzAlarmArray.find((syzAlarmItem) => {
            //     return (
            //       syzAlarmItem.category1 === "SYZ" &&
            //       syzAlarmItem.rank === this.$store.state.syzAlarmRank &&
            //       this.$store.getters.syzArray.some((findEle) => {
            //         return (
            //           findEle.id === syzAlarmItem.stationId && !findEle.isMute
            //         );
            //       })
            //     );
            //   });
            //   if (syzRes) {
            //     // this.syzAudioPlay(syzAlarmArray);
            //     this.audioPlay(this.getSound("syz"));
            //   } else {
            //     this.audioPlay(this.getSound("wd"));
            //   }
            // } else if (!syzAlarmItem && fjAlarArray.length) {
            //   this.audioPlay(this.getSound(fjAlarArray[0].soundSource || "wd"));
            // }

            // this.values = [].concat(fjAlarArray, fjDataArray);
          }
        }
      });
    },
    // 返回音频文件路径
    getSound(fileName) {
      return `./static/sound/${fileName}.mp3`;
    },

    // 播放音频
    audioPlay(audioPath) {
      this.audio = new Audio(audioPath);
      this.audio.play();
    },

    // 升压站报警播放逻辑,因升压站报警声音是否播放牵扯的分支很多,所以单独声明函数处理
    syzAudioPlay(syzAlarmArray) {
      let syzArray = this.$base.deepCopy(this.$store.getters.syzArray);
      syzArray.forEach((pEle) => {
        pEle.alarmList = [];
        syzAlarmArray.forEach((cEle) => {
          if (pEle.id === cEle.stationId) {
            pEle.alarmList.push(cEle);
          }
        });
      });

      let alarmSoundLock1 = false;
      let alarmSoundLock2 = false;

      syzArray.forEach((pEle) => {
        pEle.alarmList.forEach((cEle) => {
          if (!cEle.isConfirm) {
            pEle.isMute = false;
            alarmSoundLock1 = true;
            if (cEle.stationId === this.$store.state.activeTab) {
              cEle.isConfirm = true;
            }
          }
        });
      });

      if (alarmSoundLock1) {
        this.audioPlay(this.getSound("syz"));
      } else {
        for (let i = 0; i < syzArray.length; i++) {
          if (syzArray[i].alarmList.length) {
            alarmSoundLock2 = syzArray[i].alarmList.some((ele) => {
              return (
                !syzArray[i].isMute &&
                ele.rank === this.$store.state.syzAlarmRank
              );
            });
          }
        }
      }
      alarmSoundLock2 && this.audioPlay(this.getSound("syz"));

      syzArray.forEach((ele) => {
        Array.isArray(ele.alarmList) && delete ele.alarmList;
      });
      this.$store.commit("syzArray", syzArray);
    },

    /* 行双击 */
    itemDblclick(row) {
      if (row.category1 === "FJ") {
        this.dialogVisible = true;
        this.showSvg = false;
        this.currentWindturbine = row;
      } else if (row.category1 === "SYZ") {
        this.svgVisible = true;
        this.svgWeb = row.stationId;
      }
    },
    close() {
      this.dialogVisible = false;
      this.svgVisible = false;
    },
    /* 报警确认 */
    itemChecked(row) {
      if (row.isSelected == true) {
        row.isSelected = false;
        return;
      }
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "确认报警需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        row.isSelected = false;
        return;
      }
      row.isSelected = true;
      this.confirm(row);
    },
    confirm(item) {
      api
        .sendWarning({
          snapID: item.snapIDString,
          faultID: item.idString,
          userName: BackgroundData.getInstance().LoginUser.name,
        })
        .then((msg) => {
          let mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
          let tp = msg.data > 0 ? "success" : "error";
          msg.data === 0 ? (item.isSelected = false) : "";
          this.$notify({
            title: "报警",
            message: mms,
            type: tp,
            position: "bottom-right",
            offset: 60,
            duration: 3000,
          });
          this.faultMessage();
        });
    },
    setCellClassName({ row }) {
      if (row.rank >= this.$store.state.fjAlarmRank) {
        return "cellBase flicker";
      } else {
        return "cellBase";
      }
    },
  },
  unmounted() {
    clearInterval(this.intervals);
    this.intervals = null;
  },
};
</script>
<style scoped>
.el-table::before {
  width: 0;
}

.table {
  background-color: #000000;
}

.titleImg {
  width: 20px;
  height: 20px;
  margin-left: 22px;
  display: flex;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px;
  height: 0px;
  background-color: black;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #292929;
  border-radius: 6px;
}

:deep(.el-table td, .el-table th) {
  border-bottom: 2px solid black;
}
.el-table__body-wrapper {
  background-color: black;
}
tr {
  line-height: 1.5;
  background: #1e1e1e;
  margin-bottom: 2px;
  border-radius: 5px;
}

/* .ToolBar {
  position: absolute;
  right: 12px;
  width: 586px;
  text-align: center;
  z-index: 2;
  font-size: 14px;
  height: 28px;
  margin: 5px;
  background: #1e1e1e;
} */
.table-main {
  font-size: 14px;
  width: 600px;
  text-align: center;
  background: #000000;
  margin: 5px;
  border-collapse: separate;
  border-spacing: 0px 5px;
}
</style>
<style lang="less">
.cellBase {
  background: rgb(30, 30, 30) !important;
  color: rgb(220, 220, 220);
  padding: 3px;
  font-size: 12px;
}
.cellBase.flicker {
  animation: flicker 0.6s infinite;
}
@keyframes flicker {
  0% {
    color: rgb(220, 220, 220);
  }
  50% {
    color: orangered;
  }
  100% {
    color: rgb(220, 220, 220);
  }
}
</style>