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="name"
                label="姓名"
                >
            </el-table-column>
            <!-- 时间 -->
            <el-table-column
                prop="createTime"
                label="时间"
                >
            </el-table-column>
            <!-- 备注 -->
            <el-table-column
                prop="note"
                label="备注">
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
                prop="status"
                label="操作"
                width="200">
                <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="filterForm.pageNo"
                :page-sizes="$store.state.PAGESIZRS"
                :page-size="filterForm.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="pageTotal"
                background
            ></el-pagination>
  </div>
</template>

<script>
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"]；报警原因：超出预警值'
            }],
            filterForm:{
                pageNo: 1,
                pageSize: 10,
            },
            timeData: [],
            pageTotal: 0
        }
    },
    created(){
        this.pageTotal = this.tableData.length
    },
    methods:{
        handleSizeChange(){

        },
        handleCurrentChange(){

        }
    }
}
</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;
        }
    }
}
</style>