249 lines
7.3 KiB
Vue
249 lines
7.3 KiB
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> |