fd_dwgz_zhyw/src/components/sbsAlarm/index.vue

<template>
  <el-drawer
    class="custom-drawer"
    v-model="drawer"
    :title="title + '报警列表'"
    direction="rtl"
    size="45%"
    :before-close="handleClose"
  >
    <div class="drawer-form">
      <div class="select-item">
        开始日期：
        <el-date-picker
          v-model="begin"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择日期"
          size="mini"
          popper-class="date-select"
        >
        </el-date-picker>
      </div>
      <div class="select-item">
        结束日期：
        <el-date-picker
          v-model="end"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择日期"
          size="mini"
          popper-class="date-select"
        >
        </el-date-picker>
      </div>
      <div class="btns">
        <el-button round size="mini" class="buttons" @click="getAlarm"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="table-wrapper">
      <el-table height="100%" :data="drawerList">
        <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
        style="display: flex; justify-content: flex-end; align-items: center"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-size="page.pagesize"
        layout="total, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </el-drawer>
</template>
<script>
import { GetTableData } from "@/api/zhbj/index.js";
import dayjs from "dayjs";
export default {
  name: "sbsAlarm", //
  components: {},
  props: {},
  data() {
    return {
       drawer: false,
      title: "",
      drawerList: [],
      description: "",
      sub: "",
      begin: "",
      end: "",
      page: { currentPage: 1, pagesize: 22, total: 0 },
      tableHeader: [
        { title: "时间", code: "ts", width: "160" },
        { title: "场站名称", code: "stationname", width: "140" },
        { title: "报警描述", code: "description" },
        // { title: "级别", code: "rank", width: "110" },
        { title: "是否确认", code: "confirmed", width: "110" },
        { title: "是否解除", code: "endts", width: "110" },
      ],
    };
  },
 watch: {
    "$store.state.drawer": {
      handler(val) {
        this.drawer = val;
      },
      immediate: true,
    },
  },
  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>