fd_dwgz_zhyw/src/components/alarm/index.vue

<template>
  <el-dialog v-model="dialogVisible" width="80%" top="120px">
    <template #title>
      <div class="dialog-title">
        <div class="title">设备报警信息</div>
      </div>
    </template>
    <div class="dialog-body">
      <img class="dialog-img" src="@/assets/imgs/dialog.png" />
      <div class="dialog-table">
        <el-table
          :data="tableData"
          stripe
          size="mini"
          height="450px"
          ref="fitting_table"
          style="width: 100%"
        >
          <el-table-column
            v-for="(item, index) in tableHeader"
            :key="index"
            sortable
            :prop="item.code"
            :label="item.title"
            :align="item.code == 'description' ? 'left' : 'center'"
            :width="item.width"
          >
            <template #default="{ row }">
              <span v-if="item.code == 'rank'">{{ getRank(row.rank) }}</span>
              <span
                v-else-if="item.code == 'closeTime' && item.title == '是否解除'"
                >{{ row.closeTime ? "已解除" : "未解除" }}</span
              >
              <span v-else>{{ row[item.code] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-size="page.pagesize"
          layout="total, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { GetDeviceTableData } from "@/api/zhbj/index.js";
import dayjs from "dayjs";
export default {
  name: "alarm", //
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      tableHeader: [
        { title: "时间", code: "lastUpdateTime", width: "200" },
        { title: "场站名称", code: "stationName", width: "200" },
        { title: "设备名称", code: "deviceName", width: "180" },
        { title: "报警描述", code: "description" },
        { title: "是否解除", code: "closeTime", width: "120" },
        // { title: "解除时间", code: "closeTime", width: "200" },
        { title: "是否确认", code: "confirmed", width: "120" },
      ],
      page: {
        pagesize: 10,
        currentPage: 1,
        total: 0,
      },
      wtid: "",
      wpid: "",
      wtype: 0,
    };
  },
  created() {},
  methods: {
    getTime(closeTime) {
      return dayjs(closeTime).format("YYYY-MM-DD HH:mm:ss");
    },
    getRank(rank) {
      if (rank === 1) {
        return "低级";
      } else if (rank === 2) {
        return "低中级";
      } else if (rank === 3) {
        return "中级";
      } else if (rank === 4) {
        return "中高级";
      } else if (rank === 5) {
        return "高级";
      }
    },
    // 初始化弹窗数据
    openDialog(wtid, wpid, type) {
      this.wtype = type;
      this.wtid = wtid;
      this.wpid = wpid;
      if (wtid && wpid) {
        this.getTableData();
        this.dialogVisible = true;
      }
    },
    getTableData() {
      this.BASE.showLoading();
      GetDeviceTableData({
        begin: "",
        end: "",
        alarmType: this.wtype == -1 ? "windturbine" : "inverter",
        stationid: this.wpid,
        deviceid: this.wtid,
        pageNum: this.page.currentPage,
        pageSize: this.page.pagesize,
        description: "",
        isclose: false,
      }).then(({ data }) => {
        this.BASE.closeLoading();
        if (data.records.length) {
          this.tableData = data.records.map((item) => {
            return {
              ...item,
              confirmed: item.confirmed ? "是" : "否",
              lastUpdateTime: dayjs(item.lastUpdateTime).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
            };
          });
          this.page.total = data.total;
        } else {
          this.tableData = [];
          this.page.total = 0;
        }
      });
    },
    // 取消操作
    cancel() {
      this.wtid = "";
      this.wpid = "";
      this.page.currentPage = 1;
      this.dialogVisible = false;
    },

    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
    },
  },
  mounted() {},
  computed: {},
};
</script>
<style lang="less" scoped>
.el-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>