jn_sis_zhfx/src/components/alarm/index.vue

<template>
  <el-dialog v-model="dialogVisible" width="80%" top="4vh">
    <template #title>
      <div class="dialog-title">
        <img class="dialog-title-img" src="@/assets/imgs/dialog-title.png" />
        <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="48vh"
          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"
          >
          </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>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" round @click="cancel">关闭</el-button>
      </span>
    </template>
  </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" },
        { title: "场站名称", code: "stationname" },
        { title: "设备名称", code: "devicename" },
        { title: "是否确认", code: "confirmed" },
        { title: "报警描述显示", code: "description" },
      ],
      page: {
        pagesize: 10,
        currentPage: 1,
        total: 0,
      },
      wtid: "",
      wpid: "",
    };
  },
  created() {},
  methods: {
    // 初始化弹窗数据
    openDialog(wtid, wpid) {
      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: "windturbine",
        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>
.dialog-footer button:first-child {
  border-color: transparent;
  margin-right: 10px;
  background-color: rgba(0, 70, 199, 0.2) !important;
  color: #b3b3b3;
}
.el-dialog {
  .el-dialog__body {
    height: calc(100vh - 320px);
  }
}
.footerButton {
  justify-content: right;

  .el-button:first-child {
    width: 108px;
  }

  .el-button:last-of-type {
    width: 108px;
    background: rgba(0, 70, 199, 0.4) !important;
  }
}
.el-pagination {
  text-align: right;
}
</style>