AlarmMg.vue

<template>
  <div class="EnseList">
    <el-row class="topBar">
      <el-col>
        <div class="tagBox">
          <div class="deadtime">最后更新时间：{{alarmNumObj.statisticsTime}}</div>
          <div :class="['tagi', {active:tabIndex == null}]" @click="taggle(null)">
            当前预警总数：
            <dv-digital-flop :config="config" />
          </div>
          <div :class="['tagi','done', {active:tabIndex == 1}]" @click="taggle('1')">
            已处理预警数：
            <dv-digital-flop :config="config2" />
          </div>
          <div :class="['tagi', 'ing',{active:tabIndex == 0}]" @click="taggle('0')">
            处理中预警数：
            <dv-digital-flop :config="config3" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table :data="tableData.pageData" stripe style="width:100%;" :loading="loading">
      <el-table-column width="50" type="index" label="序号"></el-table-column>
      <el-table-column prop="unitName" label="企业名称"></el-table-column>
      <el-table-column prop="alarmInfo" label="预警信息">
        <template slot-scope="scope">
          <font class="dg">{{scope.row.alarmInfo}}</font>
        </template>
      </el-table-column>
      <el-table-column prop="alarmTime" label="预警时间"></el-table-column>
      <el-table-column prop="handleTime" label="消除时间"></el-table-column>
      <el-table-column prop="hand_result" label="处理结果"></el-table-column>
      <el-table-column prop="handleType" label="消除类型">
        <template slot-scope="scope">
          <font v-if="scope.row.handleType == 0">
            <span class="mark none">未处理</span>
          </font>
          <font v-if="scope.row.handleType == 1">
            <span class="mark auto">自动消警</span>
          </font>
          <font v-if="scope.row.handleType == 2">
            <span class="mark handle">手动消警</span>
          </font>
        </template>
      </el-table-column>
      <el-table-column prop="category" label="设备类型"></el-table-column>
      <el-table-column prop="contacts" label="联系人"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称"></el-table-column>
      <el-table-column prop="dangerGrade" label="预警等级"></el-table-column>
      <el-table-column label="操作" width="170">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="small"
            @click="handle(scope.row)"
            v-if="scope.row.handleType == 0"
          >
            <i class="el-icon-bell"></i>手动消警
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="PAGE.page"
      :page-size="PAGE.size"
    ></el-pagination>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
  components: {}
})
export default class EnterprisesMg extends Vue {
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = { alarmStatus: "" };
  @Provide() tabIndex: any = null;
  @Provide() loading: Boolean = false;
  @Provide() enterpriseId:string = '';
  @Provide() alarmNumObj:any = {};

  @Provide() config: any = {
    number: [100],
    style: {
      fontSize: 18,
      fill: "#ffffff"
    },
    content: "{nt}个"
  };
  @Provide() config2: any = {
    number: [100],
    style: {
      fontSize: 18,
      fill: "#ffffff"
    },
    content: "{nt}个"
  };
  @Provide() config3: any = {
    number: [100],
    style: {
      fontSize: 18,
      fill: "#ffffff"
    },
    content: "{nt}个"
  };

  getTableData() {
    let that = this,
      param = Object.assign({enterpriseId: that.enterpriseId}, that.PAGE, that.searchData);
    that.loading = true;
    METHOD.axiosPost(that, `/alarmInfo/getAlarmInfoList`, param, function(
      res: any
    ) {
      that.loading = false;
      if (res.code == 0) {
        that.tableData = res.data;
      }
    });
  }
  getNumsData() {
    let that = this;
    METHOD.axiosGet(that, `/alarmInfo/getAlarmNum?enterpriseId=${that.enterpriseId}`, function(res: any) {
      if (res.code == 0) {
        let datas = res.data;
        that.alarmNumObj = res.data;
        that.$nextTick(() => {
          that.config = {
            number: [datas.alarmTotal],
            style: {
              fontSize: 18,
              fill: "#ffffff"
            },
            content: "{nt}个"
          };
          that.config2 = {
            number: [datas.alarmDone],
            style: {
              fontSize: 18,
              fill: "#ffffff"
            },
            content: "{nt}个"
          };
          that.config3 = {
            number: [datas.alarmIng],
            style: {
              fontSize: 18,
              fill: "#ffffff"
            },
            content: "{nt}个"
          };
        });
      }
    });
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  taggle(status: string) {
    this.searchData.alarmStatus = status;
    this.getTableData();
    this.tabIndex = status;
  }
  handle(row: any) {
    let that = this;
    (that as any)
      .$confirm("确定手动消警吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        METHOD.axiosGet(that, `/alarmInfo/handleAlarmInfo/${row.id}`, function(
          res: any
        ) {
          if (res.code == 0) {
            (that as any).$message({
              type: "success",
              message: "操作成功!"
            });
            that.getTableData();
          }
        });
      });
  }
  created() {
    this.enterpriseId = METHOD.enterpriseId;
    this.getTableData();
    this.getNumsData();
  }
  mounted() {}
}
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
.dv-digital-flop {
  display: inline-block;
  width: 5em;
  height: 30px;
}
</style>