alertGuardian-JinNeng/src/pages/safe/safecomponent.vue

<template>
  <div class="safeCom" @click="clickAlarmItem">
    <div class="safeCom_head">
      <i
        :class="['iconfont', iconfonts()]"
        style="font-size: 24px; margin-right: 10px"
      ></i>
      <div style="display: flex; justify-content: space-between; width: 100%">
        <div class="safeCom_title">{{ title }}</div>
        <div
          style="font-size: 14px; position: relative; right: 35px; top: 15px"
        >
          共{{ alarmList.length }}/{{ fullTableData.length }}条
        </div>
      </div>
    </div>
    <el-table :data="alarmList" style="width: 100%" height="calc(100% - 51px)">
      <el-table-column
        prop="tsName"
        label="报警时间"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="lvName"
        label="报警等级"
        show-overflow-tooltip
      />
      <el-table-column
        prop="alarmName"
        label="报警类型"
        show-overflow-tooltip
      />
      <el-table-column
        prop="isCloseName"
        label="是否解除"
        show-overflow-tooltip
      />
    </el-table>
    <el-dialog
      v-model="showDialog"
      :title="title"
      top="50px"
      width="75%"
      modal-class="alarmDialog"
      :show-close="false"
      draggable
      @closed="
        () => {
          stopUpdate = false;
        }
      "
    >
      <el-card>
        <el-table
          :data="dialogTableData"
          style="width: 100%"
          height="420px"
          border
        >
          <el-table-column
            prop="tsName"
            label="报警时间"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column
            prop="code"
            label="报警设备"
            show-overflow-tooltip
          />
          <el-table-column
            prop="alarmName"
            label="报警类型"
            show-overflow-tooltip
          />
          <el-table-column
            prop="characteristic"
            label="报警特征"
            show-overflow-tooltip
          />
          <el-table-column
            prop="isCloseName"
            label="报警是否解除"
            show-overflow-tooltip
          />
          <el-table-column
            prop="faultCause"
            label="报警故障原因"
            show-overflow-tooltip
          />
          <el-table-column
            prop="resolvent"
            label="报警解决方法"
            show-overflow-tooltip
          />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="text" size="small" @click="confirm(scope.row)"
                >确认本条</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-button class="confirmAllBtn" type="info" plain @click="confirmAll"
        >确认所有报警</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    deviceType: {
      type: String,
      default: () => {
        return "";
      },
    },
    alarmType: {
      type: String,
      default: () => {
        return "";
      },
    },
  },

  data() {
    return {
      alarmList: [],
      iconfontsObj: {
        booststation: "iconIOTtubiao_huabanfuben",
        windturbine: "iconfengji",
        custom: "iconzidingyi",
        inverter: "iconzidingyi",
      },
      showDialog: false,
      dialogTableData: [],
      fullTableData: [],
      stopUpdate: false,
    };
  },

  created() {
    this.initWarningList();
  },

  methods: {
    iconfonts() {
      return this.iconfontsObj[this.deviceType];
    },

    initWarningList() {
      let alarmList = [];
      let fullTableData = [];
      let dialogTableData = [];
      this.$store.state.warningList.forEach((ele) => {
        if (
          this.deviceType === ele.deviceType &&
          this.alarmType === ele.alarmType
        ) {
          alarmList?.length < this.$store.state.warningListLimitLength &&
            alarmList.push(ele);
          dialogTableData?.length < 50 && dialogTableData.push(ele);
          fullTableData.push(ele);
        }
      });
      alarmList.sort((a, b) => {
        return b.ts - a.ts;
      });
      dialogTableData.sort((a, b) => {
        return b.ts - a.ts;
      });
      fullTableData.sort((a, b) => {
        return b.ts - a.ts;
      });
      this.alarmList = alarmList;
      if (!this.stopUpdate) {
        this.dialogTableData = dialogTableData;
      }
      this.fullTableData = fullTableData;
    },

    clickAlarmItem() {
      this.showDialog = true;
    },

    confirm(alarmItem) {
      this.stopUpdate = true;
      this.$confirm("您确定要执行此操作吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          confirmAlart([alarmItem]).then((res) => {
            if (res.code === 200) {
              this.BASE.showMsg({
                type: "success",
                msg: `${this.title}确认成功`,
              });
              this.$store.commit("removeWarning", alarmItem);
              this.playAudioEffect();
            }
            this.stopUpdate = false;
          });
        })
        .catch(() => {
          this.stopUpdate = false;
        });
    },

    confirmAll() {
      this.stopUpdate = true;
      this.$confirm("您确定要执行此操作吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          confirmAlart(this.dialogTableData).then((res) => {
            if (res.code === 200) {
              this.BASE.showMsg({
                type: "success",
                msg: `全部${this.title}确认成功`,
              });
              this.$store.commit("removeWarning", this.dialogTableData);
              this.playAudioEffect();
            }
            this.stopUpdate = false;
          });
        })
        .catch(() => {
          this.stopUpdate = false;
        });
    },
  },

  watch: {
    "$store.state.warningList.length"() {
      this.initWarningList();
    },
  },
};
</script>

<style lang="scss" scoped>
.safeCom {
  width: 100%;
  height: calc(100% - 20px);
  cursor: pointer;
  .safeCom_head {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid rgb(221, 221, 221);
    .safeCom_title {
      font-size: 24px;
      text-align: center;
    }
    .safeCom_fifter {
      flex: 1;
    }
  }
}

.currentAlartDialogHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style lang="scss">
.alarmDialog {
  .el-dialog__body {
    height: 500px;
    max-height: 500px;
    padding: 0;
    overflow: hidden;
    .el-card {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      margin: 20px;
    }

    .confirmAllBtn {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
}
</style>
<style lang="scss" >
.alarmDialog {
  z-index: 5100 !important;
}
</style>