|
|
|
|
<template>
|
|
|
|
|
<avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
|
|
|
|
|
@row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
|
|
|
|
|
@current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
|
|
|
|
|
<template #menu-left>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<template #menu-right>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<template #alarm="scope">
|
|
|
|
|
<el-tag v-if="scope.row.alarm" type="danger">未处理</el-tag>
|
|
|
|
|
<el-tag v-else type="success">已处理</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
<template #endTime="scope">
|
|
|
|
|
<span>{{ timeFun(scope.row) }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</avue-crud>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
selectionList: [],
|
|
|
|
|
option: {
|
|
|
|
|
height: 'auto',
|
|
|
|
|
calcHeight: 32,
|
|
|
|
|
tip: false,
|
|
|
|
|
size: 'medium',
|
|
|
|
|
simplePage: true,
|
|
|
|
|
searchShow: true,
|
|
|
|
|
searchMenuSpan: 6,
|
|
|
|
|
searchIcon: true,
|
|
|
|
|
searchIndex: 3,
|
|
|
|
|
tree: false,
|
|
|
|
|
border: true,
|
|
|
|
|
index: true,
|
|
|
|
|
selection: true,
|
|
|
|
|
viewBtn: false,
|
|
|
|
|
delBtn: false,
|
|
|
|
|
addBtn: false,
|
|
|
|
|
editBtnText: '修改',
|
|
|
|
|
addBtnIcon: ' ',
|
|
|
|
|
viewBtnIcon: ' ',
|
|
|
|
|
delBtnIcon: ' ',
|
|
|
|
|
editBtnIcon: ' ',
|
|
|
|
|
viewBtnText: '详情',
|
|
|
|
|
labelWidth: 120,
|
|
|
|
|
menuWidth: 120,
|
|
|
|
|
dialogWidth: 1040,
|
|
|
|
|
dialogClickModal: false,
|
|
|
|
|
searchEnter: true,
|
|
|
|
|
excelBtn: false,
|
|
|
|
|
filterBtn: true,
|
|
|
|
|
searchShowBtn: false,
|
|
|
|
|
columnSort: true,
|
|
|
|
|
excelBtn: true,
|
|
|
|
|
columnSort: true,
|
|
|
|
|
index: false,
|
|
|
|
|
showOverflowTooltip: true,
|
|
|
|
|
menu: false,
|
|
|
|
|
searchLabelPosition:'left',
|
|
|
|
|
searchLabelPosition:'left',
|
|
|
|
|
searchGutter:24,
|
|
|
|
|
searchSpan:6,
|
|
|
|
|
menuAlign: 'left',
|
|
|
|
|
gridBtn:false,
|
|
|
|
|
searchMenuPosition:'right',
|
|
|
|
|
align: 'center',
|
|
|
|
|
column: [
|
|
|
|
|
{
|
|
|
|
|
label: '编码',
|
|
|
|
|
prop: 'code',
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
search: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '时间',
|
|
|
|
|
prop: 'startTime',
|
|
|
|
|
search: true,
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '错误点',
|
|
|
|
|
prop: 'errorPoint',
|
|
|
|
|
search: true,
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '消息文本',
|
|
|
|
|
prop: 'messText',
|
|
|
|
|
search: true,
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '状态',
|
|
|
|
|
prop: 'alarm',
|
|
|
|
|
search: true,
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '持续时间',
|
|
|
|
|
prop: 'endTime',
|
|
|
|
|
search: false,
|
|
|
|
|
sortable: true,
|
|
|
|
|
filter: true,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
form: {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
page: {
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
total: 0,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 多选
|
|
|
|
|
selectionChange(list) {
|
|
|
|
|
this.selectionList = list;
|
|
|
|
|
},
|
|
|
|
|
timeFun(row) {
|
|
|
|
|
let endTime;
|
|
|
|
|
if (row.endTime !== null) {
|
|
|
|
|
endTime = new Date(row.endTime).getTime();
|
|
|
|
|
} else {
|
|
|
|
|
endTime = new Date().getTime();
|
|
|
|
|
}
|
|
|
|
|
let str = '';
|
|
|
|
|
const time = endTime - new Date(row.startTime).getTime();
|
|
|
|
|
|
|
|
|
|
var date = new Date(time);
|
|
|
|
|
// 获取小时
|
|
|
|
|
var hh = Math.floor(time / (60 * 60 * 1000));
|
|
|
|
|
// 获取分
|
|
|
|
|
var mm =
|
|
|
|
|
date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
|
|
|
|
|
// /获取秒
|
|
|
|
|
var ss =
|
|
|
|
|
date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
|
|
|
|
|
|
|
|
|
|
if (time > 24 * 60 * 60 * 1000) {
|
|
|
|
|
str =
|
|
|
|
|
Math.floor(time / 86400000) +
|
|
|
|
|
'天' +
|
|
|
|
|
hh +
|
|
|
|
|
'小时' +
|
|
|
|
|
mm +
|
|
|
|
|
'分' +
|
|
|
|
|
ss +
|
|
|
|
|
'秒';
|
|
|
|
|
} else if (time > 60 * 60 * 1000) {
|
|
|
|
|
str = hh + '小时' + mm + '分' + ss + '秒';
|
|
|
|
|
} else if (time > 60 * 1000) {
|
|
|
|
|
str = mm + '分' + ss + '秒';
|
|
|
|
|
} else {
|
|
|
|
|
str = ss + '秒';
|
|
|
|
|
}
|
|
|
|
|
return str;
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
this.loading = true
|
|
|
|
|
this.data = [
|
|
|
|
|
{
|
|
|
|
|
"alarm": false,
|
|
|
|
|
"code": "28",
|
|
|
|
|
"endTime": "2023-03-23 16:50:50",
|
|
|
|
|
"errorPoint": "东楼喷淋塔D",
|
|
|
|
|
"key": "DPHL",
|
|
|
|
|
"keyValue": 1,
|
|
|
|
|
"messText": "pH值低",
|
|
|
|
|
"startTime": "2023-03-23 16:50:40",
|
|
|
|
|
"torId": 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"alarm": false,
|
|
|
|
|
"code": "29",
|
|
|
|
|
"endTime": "2023-03-23 16:50:50",
|
|
|
|
|
"errorPoint": "东楼喷淋塔E",
|
|
|
|
|
"key": "EPHL",
|
|
|
|
|
"keyValue": 2,
|
|
|
|
|
"messText": "pH值低",
|
|
|
|
|
"startTime": "2023-03-23 16:50:40",
|
|
|
|
|
"torId": 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"alarm": false,
|
|
|
|
|
"code": "25",
|
|
|
|
|
"endTime": "2023-03-23 16:50:45",
|
|
|
|
|
"errorPoint": "东楼喷淋塔A",
|
|
|
|
|
"key": "APHL",
|
|
|
|
|
"keyValue": 3,
|
|
|
|
|
"messText": "pH值低",
|
|
|
|
|
"startTime": "2023-03-23 16:50:41",
|
|
|
|
|
"torId": 3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"alarm": false,
|
|
|
|
|
"code": "48",
|
|
|
|
|
"endTime": "2023-03-24 08:54:11",
|
|
|
|
|
"errorPoint": "西楼喷淋塔h",
|
|
|
|
|
"key": "hhPHL",
|
|
|
|
|
"keyValue": 4,
|
|
|
|
|
"messText": "pH值低",
|
|
|
|
|
"startTime": "2023-03-24 08:54:01",
|
|
|
|
|
"torId": 4
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
this.page.total = this.data.length
|
|
|
|
|
this.loading = false
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.selectionClear()
|
|
|
|
|
}, 500)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped></style>
|
