zhgdyun/src/views/projectFront/highModulus/alarmInfo.vue

<template>
  <div class="alarm_box">
    <!-- <div class="search_box">
        <div class="search_item">
            <span>报警时间：</span>
            <el-date-picker
                v-model="timeData"
                type="datetimerange"
                range-separator="至"
                value-format="yyyy-MM-dd hh:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </div>
        <el-button type="warning" plain>刷新</el-button>
        <el-button type="primary" plain>查询</el-button>
      </div> -->
    <el-table :data="tableData" class="tables" height="660">
      <!-- 姓名 -->
      <el-table-column
        prop="measurePointName"
        label="测量点编号"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="alarmType" label="类型" align="center">
        <template slot-scope="scope" v-if="scope.row.alarmType === 1">
          <span class="color1">{{ getStatus(scope.row.alarmType) }}</span>
        </template>
        <template slot-scope="scope" v-else>
          <span class="color2">{{ getStatus(scope.row.alarmType) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="报警类型" align="center">
        <template slot-scope="scope">
          {{ getStatusTwo(scope.row.type) }}
        </template>
      </el-table-column>
      <!-- 时间 -->
      <el-table-column prop="createTime" label="时间" align="center">
      </el-table-column>
      <!-- 备注 -->
      <!-- <el-table-column prop="note" label="备注" align="center">
      </el-table-column> -->
      <!-- 操作 -->
      <!-- <el-table-column prop="status" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.status == '0'" class="status_item status_1">
            确认误报
          </div>
          <div v-else-if="scope.row.status == '1'" class="status_item status_2">
            确认真实
          </div>
          <div v-else-if="scope.row.status == '2'" class="status_item status_3">
            正在处理
          </div>
          <div v-else-if="scope.row.status == '3'" class="status_item status_4">
            申请销警
          </div>
          <div v-else-if="scope.row.status == '4'" class="status_item status_5">
            确认消警
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      class="pagerBox"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formData.pageNo"
      :page-sizes="$store.state.PAGESIZRS"
      :page-size="formData.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="Number(formData.total)"
      background
    ></el-pagination>
  </div>
</template>

<script>
import { getHighFormworkAlarmDataApi } from '@/assets/js/api/highModulus.js'
export default {
  data() {
    return {
      //   tableData: [
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-23 11:00:20',
      //       status: 0,
      //       note: '警情确认：误报；报警测点：["A01"]；报警原因：试验测试'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-23 10:35:22',
      //       status: 2,
      //       note: '警情确认：真实警情；报警测点：["A03"]；报警原因：设备故障'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-22 18:55:10',
      //       status: 3,
      //       note: '警情确认：真实警情；报警测点：["A05"]；报警原因：超出控制值'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-22 16:00:10',
      //       status: 1,
      //       note: '警情确认：真实警情；报警测点：["B01"]；报警原因：超出预警值'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-22 14:00:10',
      //       status: 1,
      //       note: '警情确认：真实警情；报警测点：["A06"]；报警原因：超出预警值'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-22 12:01:21',
      //       status: 1,
      //       note: '警情确认：真实警情；报警测点：["B05"]；报警原因：超出预警值'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-22 11:50:30',
      //       status: 1,
      //       note: '警情确认：真实警情；报警测点：["A06"]；报警原因：超出预警值'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-22 10:06:11',
      //       status: 1,
      //       note: '警情确认：真实警情；报警测点：["B11"]；报警原因：超出预警值'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-22 08:00:00',
      //       status: 1,
      //       note: '警情确认：真实警情；报警测点：["A06"]；报警原因：超出报警值'
      //     },
      //     {
      //       name: '管理员',
      //       createTime: '2021-11-21 17:06:53',
      //       status: 4,
      //       note: '警情确认：真实警情；报警测点：["A16"]；报警原因：超出预警值'
      //     }
      //   ],
      tableData: [],
      formData: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        projectSn: ''
      },

      timeData: []
    }
  },
  created() {
    this.formData.projectSn = this.$store.state.projectSn
    this.getData()
    // this.pageTotal = this.tableData.length
  },
  methods: {
    //数据转换
    getStatus(alarmType) {
      if (alarmType === 1) {
        return '报警'
      } else {
        return '预警'
      }
    },
    getStatusTwo(type) {
      if (type === 1) {
        return '电量(%)'
      } else if (type === 2) {
        return 'X轴( °)'
      } else if (type === 3) {
        return 'Y轴( °)'
      } else if (type === 4) {
        return '压力(kN)'
      } else if (type === 5) {
        return '沉降(mm)'
      }
    },
    //查询高支模-报警信息
    getData() {
      getHighFormworkAlarmDataApi(this.formData).then((res) => {
        console.log('查询高支模', res)
        this.tableData = res.result.records
        this.formData.total = res.result.total
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.alarm_box {
  height: 100%;
  width: 100%;
  background: #fff;
  .status_item {
    padding: 2px 10px;
    display: inline-block;
    border-radius: 2px;
  }
  .status_1 {
    background: #18bc9c;
    color: #fff;
  }
  .status_2 {
    background: #f39c12;
    color: #fff;
  }
  .status_3 {
    background: #909399;
    color: #fff;
  }
  .status_4 {
    background: #3498db;
    color: #fff;
  }
  .status_5 {
    background: #18bc9c;
    color: #fff;
  }
  .search_box {
    display: flex;
    padding: 20px;
    .search_item {
      margin-right: 20px;
    }
  }
  .color1 {
    color: red;
  }
  .color2 {
    color: orange;
  }
}
</style>