soc_web/src/views/resumption/protection/dialog.history.vue

<template>
  <div class="device-info">
    <DialogCom
      title="布撤防历史"
      :visible.sync="isShow"
      width="600px"
      @close="close"
    >
      <div class="page-body">
        <div>
          <div style="margin-bottom: 20px">
            <span> 所属机构：</span>
            <span>{{ protection.orgName }}</span>
          </div>
          <div style="margin-bottom: 20px">
            <span>报警控制器名称：</span>
            <span>{{ protection.name }}</span>
          </div>
          <div style="margin-bottom: 20px">
            <span> 24小时报警控制器：</span>
            <span>{{ protection.allHour ? "是" : "否" }}</span>
          </div>
          <div style="margin-bottom: 20px">
            <span>上报时间范围：</span>
            <DataRangePicker
              v-model="queryParams.updateTime"
              key="daterange"
              type="daterange"
              clearable
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </DataRangePicker>
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="statusText" label="报警控制器状态"
              ><template slot-scope="r">
                {{ getLabel(statusDict, r.row.status) }}
              </template></el-table-column
            >
            <el-table-column prop="updateTime" label="布撤防登记时间">
            </el-table-column>
            <el-table-column
              prop="statusUpdatorName"
              label="登记人"
            ></el-table-column>
          </el-table>
          <div style="margin-top: 20px; text-align: right">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">关闭</el-button>
        <!--<el-button type="primary" @click="onSubmit">确定</el-button> -->
      </div>
    </DialogCom>
  </div>
</template>

<script>
import * as api from "@/api/resumption/protection";
import { getLabel } from "./../../commonOption";
import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
export default {
  data() {
    const params = this.$route.params;
    return {
      id: params ? params.id : null,
      isShow: false,
      protection: {},
      tableData: [],
      queryParams: this.resetSearch(),
      total: 1,
    };
  },
  props: {
    statusDict: {
      type: Array,
    },
  },
  watch: {
    "queryParams.updateTime": {
      deep: true,
      handler(v) {
        this.refresh();
      },
    },
  },
  computed: {},
  methods: {
    getLabel,
    async refresh() {
      this.pageNum = 1;
      this.getList();
    },
    async getList() {
      await api.history(this.queryParams).then((v) => {
        this.tableData = v.rows;
        this.total = v.total;
      });
    },
    onHide() {
      this.isShow = false;
    },
    close() {
      this.queryParams = this.resetSearch();
      this.tableData = [];
      this.total = 0;
    },
    async show(protection) {
      this.protection = protection;
      this.queryParams = this.resetSearch();
      this.queryParams.protectionId = protection.id;
      await this.refresh();
      this.isShow = true;
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    resetSearch() {
      return {
        pageNum: 1,
        pageSize: 10,
        protectionId: null,
        updateTime: [new Date(new Date() - 3600 * 1000 * 24 * 90), new Date()],
      };
    },
    // 事件
    //apimark//
  },
  created() {},
  mounted() {},
  components: {
    DataRangePicker,
    // EditAttribute,
  },
};
</script>

<style lang="scss">
.device_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
</style>