jn_sis_zhfx/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="center"
            :width="item.width"
          >
            <template #default="{ row }">
              <span v-if="item.code == 'rank'">{{ getRank(row.rank) }}</span>
              <span v-else-if="item.code == 'endts'">{{
                row.endts ? "解除" : "未解除"
              }}</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 { GetTableData } from "@/api/zhbj/index.js";
import dayjs from "dayjs";
export default {
  name: "alarm", //
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      tableHeader: [
        { title: "时间", code: "ts", width: "200" },
        { title: "场站名称", code: "stationname", width: "200" },
        { title: "设备名称", code: "devicename", width: "180" },
        { title: "报警描述", code: "description" },
        { title: "级别", code: "rank", width: "120" },
        { title: "是否确认", code: "confirmed", width: "120" },
        { title: "是否解除", code: "endts", width: "120" },
      ],
      page: {
        pagesize: 10,
        currentPage: 1,
        total: 0,
      },
      wtid: "",
      wpid: "",
      wtype: 0,
    };
  },
  created() {},
  methods: {
    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() {
      GetTableData({
        begin: dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
        end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        alarmType: this.wtype == -1 ? "windturbine" : "inverter",
        stationid: this.wpid,
        deviceid: this.wtid,
        pageNum: this.page.currentPage,
        pageSize: this.page.pagesize,
        description: "",
      }).then(({ data }) => {
        if (data.ls.length) {
          this.tableData = data.ls.map((item) => {
            return {
              ...item,
              confirmed: item.confirmed ? "是" : "否",
              ts: dayjs(item.ts).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>