jn_sis_zhfx/src/components/deligoAlarmList/index.vue

<template>
  <div class="warn-dialog">
    <div class="warn-wrapper">
      <div class="warn-top">
        <div class="warn-title">
          <div class="warn-icon">
            <img src="@assets/imgs/warn-icon.png" />
          </div>
          <div class="warn-name">实时告警</div>
          <div class="warn-num">{{ warnNum ? warnNum : 0 }}</div>
        </div>
        <div class="warn-close" @click="displayAlarm">
          <img src="@assets/imgs/warn-close.png" />
        </div>
      </div>
      <div class="warn-list">
        <div class="warn-table">
          <el-table
            @selection-change="handleSelectionChange"
            :data="warnList"
            size="mini"
            stripe
            height="100%"
            width="100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column type="selection" width="40" align="center">
            </el-table-column>
            <el-table-column
              v-for="(header, index) in tableHeader"
              :key="index"
              :label="header.title"
              :align="header.code == '' ? 'left' : 'center'"
              :prop="header.code"
              show-overflow-tooltip
              :width="header.width"
            >
              <template #default="{ row }">
                <div v-if="header.code == ''" @dblclick="handleTo(row)">
                  {{ row["wpName"] }}{{ row["deviceName"]
                  }}{{ row.alarmType != "booststation" ? "设备" : ""
                  }}{{ row["description"] }}
                </div>
                <div
                  v-else-if="header.code == 'isCloseName'"
                  :style="`color:${row.isClose ? '#05bb4c' : '#d35400'}`"
                >
                  {{ row[header.code] }}
                </div>
                <div v-else>
                  {{ row[header.code] }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="warn-btns">
          <div class="setting svg-icon" @click="setAlarmConfig">
            <SvgIcon svgid="svg-setting" />
          </div>
          <el-button class="confirm-one" @click="confirm">选择确认 </el-button>
          <el-button class="confirm-all" @click="confirmAll"
            >全部确认
          </el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="setting-dialog" v-if="displaySetting">
    <div class="setting-wrapper">
      <div class="box-title">
        <div class="box-name">报警配置</div>
        <div class="box-close" @click="cancle">
          <img src="@assets/imgs/warn-close.png" />
        </div>
      </div>
      <div class="box-content">
        <el-tabs type="border-card" v-model="activeTab">
          <el-tab-pane
            v-for="(item, index) in configArray"
            :key="index"
            :name="item.id"
          >
            <template #label>
              <div class="alartPaneLabel">
                <span>{{ getAlartLevelName(item.alarmLevel) }}</span>
                <div class="alartBadge" :class="getAlartStatus(item)"></div>
              </div>
            </template>
            <el-form label-width="120px">
              <el-form-item label="报警弹窗:">
                <el-switch
                  v-model="item.isAlart"
                  active-text="弹出"
                  inactive-text="不弹出"
                />
              </el-form-item>
              <el-form-item label="播放声音:">
                <el-switch
                  v-model="item.isAlarmSound"
                  active-text="播放"
                  inactive-text="不播放"
                />
              </el-form-item>
              <el-form-item label="必须确认:">
                <el-switch
                  v-model="item.isContinuousAlarm"
                  active-text="是"
                  inactive-text="否"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div class="btnBox">
          <el-button @click="save">保存配置</el-button>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script>
import { confirmAlart } from "@/api/zhbj/index.js";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import dayjs from "dayjs";

export default {
  name: "byPase", //首页标题栏
  props: {
    alarmConfigArray: {
      type: Array,
      required: true,
    },
    dialogList: {
      type: Array,
    },
  },
  components: { SvgIcon },
  data() {
    return {
      tableHeader: [
        { title: "时间", code: "tsName", width: "120" },
        { title: "描述", code: "", width: "" },
        { title: "是否解除", code: "isCloseName", width: "80" },
      ],
      checkedRow: [],
      warnList: [],
    };
  },

  created() {
    this.warnList = this.dialogList;
  },
  mounted() {},
  computed: {
    warnNum() {
      return this.$store.state.warnList.length;
    },
    list() {
      return this.$store.state.warnList;
    },
  },

  methods: {
    handleTo(row) {
      console.log(row);
      if (row.alarmType == "booststation") {
        this.$router.push({
          path: "/stateMonitor/alarmCenter",
          query: {
            id: row.id,
            stationId: row.stationId,
            alarmType: row.alarmType,
            ts: row.ts,
            endts: row.isClose
              ? dayjs(row.endts).valueOf() || dayjs(row.closeTime).valueOf()
              : "",
          },
        });
      } else {
        this.$router.push({
          path: "/stateMonitor/alarmCenter",
          query: {
            id: row.id,
            stationId: row.stationId,
            deviceId: row.deviceId,
            alarmType: row.alarmType,
            ts: row.ts,
            endts: row.isClose
              ? dayjs(row.endts).valueOf() || dayjs(row.closeTime).valueOf()
              : "",
          },
        });
      }
    },
    init(list) {
      this.warnList = list;
    },
    tableRowClassName({ row }) {
      if (row.isClose) {
        return "isConfirm";
      } else {
        return "";
      }
    },
    cancle() {
      this.configArray = this.alarmConfigArray;
      this.displaySetting = false;
    },

    handleSelectionChange(rows) {
      this.checkedRow = rows;
    },
    displayAlarm() {
      this.$emit("close");
    },
    confirm() {
      this.$confirm("您确定要执行此操作吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let arr = [];

        arr = this.checkedRow.map((item) => {
          return { alarmType: item.alarmType, id: item.id };
        });

        confirmAlart(arr).then((res) => {
          if (res.code === 200) {
            this.BASE.showMsg({
              type: "success",
              msg: "确认成功",
            });
            this.checkedRow.forEach((ele) => {
              for (let i = 0; i < this.warnList.length; i++) {
                if (
                  `${ele.id}${ele.ts}` ===
                  `${this.warnList[i].id}${this.warnList[i].ts}`
                ) {
                  setTimeout(() => {
                    this.warnList.splice(i, 1);
                  }, 0);
                  break;
                }
              }
            });
            this.$store.commit("setWarning", this.warnList);
            this.$emit("confirmed");
          }
        });
      });
    },
    confirmAll() {
      this.$confirm("您确定要执行此操作吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let arr = [];
        let oldList = this.warnList;
        arr = oldList.map((item) => {
          return { alarmType: item.alarmType, id: item.id };
        });
        confirmAlart(arr).then((res) => {
          if (res.code === 200) {
            this.BASE.showMsg({
              type: "success",
              msg: "确认成功",
            });
            this.warnList = [];
            this.$emit("confirmed", true);
          }
        });
      });
    },
    setAlarmConfig() {
      this.$emit("setConfig");
    },
  },
};
</script>

<style lang="less" scoped>
.warn-dialog {
  position: absolute;
  right: -12px;
  bottom: -6px;
  z-index: 1000;
  width: 540px;
  height: 510px;
  .warn-wrapper {
    width: 100%;
    height: 100%;
    // position: absolute;
    // bottom: 25px;
    // right: 17px;
    border-radius: 6px;
    background: url("~@/assets/imgs/warn-border.png") no-repeat;
    background-color: #000;
    background-size: 100% 100%;

    .warn-top {
      width: 100%;
      height: 60px;
      padding: 0 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: url("~@/assets/imgs/warn-top.png") no-repeat;
      background-size: 100% 100%;
      .warn-close {
        cursor: pointer;
      }
      .warn-title {
        display: flex;
        align-items: center;
        position: relative;
        &::after {
          position: absolute;
          bottom: 5px;
          right: -15px;
          content: "";
          width: 7px;
          height: 7px;
          border-right: 2px solid #fd7f00;
          border-bottom: 2px solid #fd7f00;
        }
        .warn-name {
          padding: 0 15px;
        }
        .warn-num {
          font-size: 20px;
          font-family: Bicubik;
          font-weight: 400;
          color: #ff8300;
        }
      }
    }
    .warn-list {
      height: calc(100% - 60px);
      padding: 10px;
      .warn-table {
        height: calc(100% - 48px);
        width: 100%;
        .el-table::v-deep {
          background: #000;
        }
      }
      .warn-btns {
        position: relative;
        .el-button ::v-deep {
          //   background: url("~@/assets/imgs/warn-btn.png") no-repeat;
          background-size: 100% 100%;
          height: 37px;
          border-radius: 5px;
          border-width: 0;
          color: #fff;
          font-size: 16px;
          margin-top: 10px;
          &:hover,
          &:focus {
            color: #fff;
            background-color: transparent;
            border-width: 0;
          }
          &.confirm-one {
            width: 100px;
            background: url("~@/assets/imgs/confirmone.png") no-repeat;
            transform: translateX(50%);
          }
          &.confirm-all {
            width: 160px;
            background: url("~@/assets/imgs/confirmall.png") no-repeat;
            transform: translateX(75%);
          }
        }
        .setting {
          position: absolute;
          top: 55%;
          left: 10px;
          transform: translateY(-50%);
          cursor: pointer;
        }
      }
    }
  }
}
::v-deep .el-table__header-wrapper .el-checkbox {
  // display: none;//设置不成功，页面卡顿
  visibility: hidden;
}
</style>