fd_dwgz_zhyw_nx/src/views/IntegratedAlarm/safe/components/safecomponent.vue

<template>
 <!-- @click="clickAlarmItem" -->
  <div class="safeCom">
    <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="dialogTableData"
      style="width: 100%"
      height="calc(100% - 100px)"
    >
      <el-table-column
        prop="tsName"
        label="时间"
        width="120"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="wpName"
        label="场站"
        align="center"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        v-if="deviceType != 'booststation'"
        align="center"
        prop="deviceName"
        label="设备"
        width="80"
        show-overflow-tooltip
      />
      <el-table-column
        :prop="alarmType === 'custom' ? 'characteristic' : 'description'"
        align="center"
        label="信息"
        show-overflow-tooltip
      />
      <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
        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-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: #1890ff !important"
            size="small"
            @click="confirm(scope.row)"
            >确认本条</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px; display: flex; justify-content: end;">
      <el-button type="primary" plain @click="confirmAll"
        >确认所有报警</el-button
      >
    </div>
    <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)"
                >{{
                  alarmType === "custom"
                    ? scope.row.characteristic
                    : 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: #1890ff !important"
                size="small"
                @click="confirm(scope.row)"
                >确认本条</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <template #footer>
        <el-button type="primary" plain @click="confirmAll"
          >确认所有报警</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: [],
      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() {
      if (this.$store.state.warningList?.length > 0) {
        let alarmList = [];
        this.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;
        console.log("alarmList===>>>>", this.alarmList);
        if (!this.stopUpdate) {
          this.dialogTableData = dialogTableData;
        }
        // this.fullTableData = fullTableData;
      }
      // else {
      // this.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,
      //   }
      // ];
      // }
    },

    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;
      if (!this?.dialogTableData?.length) {
        this.BASE.showMsg({
          type: "error",
          msg: "暂无报警可进行确认",
        });
      } else {
        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/customWarning",
          query: {
            deviceId: alertItem.deviceId,
            alarmId: alertItem.alarmId,
            modelId: alertItem.modelId,
          },
        });
      } else if (this.alarmType == "booststation") {
        this.$router.push({
          path: "/integratedAlarm/historyWarning",
          query: {
            deviceId: alertItem.wpName,
            alarmId: alertItem.alarmId,
            deviceType: this.deviceType,
          },
        });
      } else {
        this.$router.push({
          path: "/integratedAlarm/historyWarning",
          query: {
            deviceId: alertItem.deviceId,
            alarmId: alertItem.alarmId,
            deviceType: this.deviceType,
            modelId: alertItem.modelId,
          },
        });
      }
    },
  },

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

<style lang="less" scoped>
.safeCom {
  width: 100%;
  height: 100%;
  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">
.safeCom {
  .el-table__header-wrapper {
    background: #132347 !important;
  }
}

.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>