windLifecontrolPro/src/views/IntegratedAlarm/safe/components/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 }}条 -->
          {{ alarmList.length }}条
        </div>
      </div>
    </div>
    <el-table :data="alarmList" style="width: 100%" height="calc(100% - 51px)">
      <el-table-column
        prop="tsName"
        label="报警时间"
        width="120"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="wpName"
        label="场站"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        v-if="deviceType != 'booststation'"
        align="center"
        prop="deviceName"
        label="设备"
        width="50"
        show-overflow-tooltip
      />
      <el-table-column
        prop="description"
        label="报警信息"
        align="left"
        show-overflow-tooltip
      />
      <!-- <el-table-column label="级别" width="80" show-overflow-tooltip>
        <template #default="scope">
          <el-tag
            class="ml-2"
            :type="
              scope.row.lv === 5
                ? 'danger'
                : scope.row.lv === 4
                ? 'warning'
                : 'info'
            "
            >{{ scope.row.lvName }}</el-tag
          >
        </template>
      </el-table-column> -->

      <el-table-column
        label="状态"
        width="75"
        align="center"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span
            :style="`color:${
              scope.row.isClose
                ? 'var(--el-color-success)'
                : 'var(--el-color-danger)'
            }`"
            >{{ scope.row.isClose ? "已解除" : "未解除" }}</span
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="showDialog"
      top="50px"
      width="90%"
      modal-class="alarmDialog"
      :show-close="true"
      draggable
      @close="
        () => {
          stopUpdate = false;
        }
      "
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">{{ title }}</div>
        </div>
      </template>
      <el-card>
        <el-table
          :data="dialogTableData"
          style="width: 100%"
          height="620px"
          border
          stripe
        >
          <el-table-column
            prop="fullTsName"
            label="报警时间"
            width="220"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="wpName"
            label="场站"
            width="180"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="code"
            label="报警设备"
            width="100"
            align="center"
            show-overflow-tooltip
          />
          <!-- <el-table-column
            prop="characteristic"
            label="报警特征"
            width="100"
            show-overflow-tooltip
          /> -->
          <el-table-column label="报警描述" align="left">
            <template #default="scope">
              <span
                class="alertDescCursor"
                @click="goToAlertDescPage(scope.row)"
                >{{ scope.row.description || "--" }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="faultCause"
            label="报警故障原因"
            align="left"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              {{ row.faultCause == "NULL" ? "--" : row.faultCause }}
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="报警解除时间"
            align="center"
            width="220"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span>{{ scope.row.endts || scope.row.closeTime || "--" }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="resolvent"
            label="报警解决方法"
            show-overflow-tooltip
          /> -->
          <!-- <el-table-column label="级别" width="100" show-overflow-tooltip>
            <template #default="scope">
              <el-tag
                class="ml-2"
                :type="
                  scope.row.lv === 5
                    ? 'danger'
                    : scope.row.lv === 4
                    ? 'warning'
                    : 'info'
                "
                >{{ scope.row.lvName }}</el-tag
              >
            </template>
          </el-table-column> -->
          <el-table-column
            label="报警是否解除"
            width="120"
            align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span
                :style="`color:${
                  scope.row.isClose
                    ? 'var(--el-color-success)'
                    : 'var(--el-color-danger)'
                }`"
                >{{ scope.row.isClose ? "已解除" : "未解除" }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
              <el-button
                type="text"
                style="color: #05bb4c"
                size="small"
                @click="confirm(scope.row)"
                >确认本条</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <template #footer>
        <el-button
          type="info"
          plain
          @click="confirmAll"
          :disabled="!dialogTableData.length"
          >确认所有报警</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { confirmAlart } from "@/api/zhbj/index.js";
export default {
  props: {
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    deviceType: {
      type: String,
      default: () => {
        return "";
      },
    },
    alarmType: {
      type: String,
      default: () => {
        return "";
      },
    },
  },

  data() {
    return {
      alarmList: [
        {
            tsName: '06-11 12:00:00',
            wpName: '风电场1',
            deviceName: '#36',
            description: '变频器报告电网已接入',
            isClose: true
        },
        {
            tsName: '06-11 12:00:00',
            wpName: '风电场2',
            deviceName: '#58',
            description: '风机等待运行就绪',
            isClose: false
        }
    ],
      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("removeWarningList", alarmItem);
              }
              this.stopUpdate = false;
            })
            .catch(() => {
              this.BASE.showMsg({
                msg: "确认失败，请重试",
              });
            });
        })
        .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("removeWarningList", this.dialogTableData);
              }
              this.stopUpdate = false;
            })
            .catch(() => {
              this.BASE.showMsg({
                msg: "确认失败，请重试",
              });
            });
        })
        .catch(() => {
          this.stopUpdate = false;
        });
    },

    goToAlertDescPage(alertItem) {
      if (this.alarmType == "custom") {
        this.$router.push({
          path: "/integratedAlarm/safe/customWarning",
          query: {
            deviceId: alertItem.deviceId,
            alarmId: alertItem.alarmId,
            modelId: alertItem.modelId,
          },
        });
      } else if (this.alarmType == "booststation") {
        this.$router.push({
          path: "/integratedAlarm/safe/historyWarning",
          query: {
            deviceId: alertItem.wpName,
            alarmId: alertItem.alarmId,
            deviceType: this.deviceType,
          },
        });
      } else {
        this.$router.push({
          path: "/integratedAlarm/safe/historyWarning",
          query: {
            deviceId: alertItem.deviceId,
            alarmId: alertItem.alarmId,
            deviceType: this.deviceType,
            modelId: alertItem.modelId,
          },
        });
      }
    },
  },

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

<style lang="less" 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: 700px;
    max-height: 700ox;
    padding: 0;
    overflow: hidden;
    .el-card {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      margin: 20px;

      .alertDescCursor {
        cursor: pointer;
        transition: 0.2s;

        &:hover {
          color: var(--el-color-primary);
          text-decoration: underline;
          transition: 0.2s;
        }
      }
    }

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