|
@@ -2,78 +2,189 @@
|
|
|
<div class="table_item">
|
|
|
<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.dxbh">
|
|
|
<template #operator>
|
|
|
- <div class="table-head">
|
|
|
- <div class="head-left">
|
|
|
- <a-form
|
|
|
- ref="searchFormRef"
|
|
|
- name="advanced_search"
|
|
|
- :model="searchFormState"
|
|
|
- class="ant-advanced-search-form"
|
|
|
- >
|
|
|
- <a-form-item label="报警时间" name="searchKey">
|
|
|
- <a-range-picker v-model:value="searchFormState.searchKey" value-format="YYYY/MM/DD" />
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <div class="table-search">
|
|
|
+ <div class="table-search-form">
|
|
|
+ <a-row :gutter="10">
|
|
|
+ <a-form
|
|
|
+ ref="searchFormRef"
|
|
|
+ name="advanced_search"
|
|
|
+ layout="inline"
|
|
|
+ :label-col="{ style: { width: '70px', justifyContent: 'end' } }"
|
|
|
+ :model="searchFormState"
|
|
|
+ class="ant-advanced-search-form"
|
|
|
+ >
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
|
|
+ <a-form-item label="报警时间" name="searchKey">
|
|
|
+ <a-range-picker
|
|
|
+ v-model:value="searchFormState.searchKey"
|
|
|
+ value-format="YYYY/MM/DD"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
+ <a-form-item label="报警状态" name="jkdmc">
|
|
|
+ <a-select v-model:value="searchFormState.jkdmc" placeholder="请选择报警状态">
|
|
|
+ <a-select-option value="1">已处理</a-select-option>
|
|
|
+ <a-select-option value="2">未处理</a-select-option>
|
|
|
+ <a-select-option value="3">处理中</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item></a-col
|
|
|
+ >
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
|
|
|
+ ><a-form-item label="对象编码" name="code">
|
|
|
+ <a-input v-model:value="searchFormState.code" placeholder="请输入对象编码" /> </a-form-item
|
|
|
+ ></a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
|
|
|
+ ><a-form-item label="对象名称" name="code">
|
|
|
+ <a-input v-model:value="searchFormState.code" placeholder="请输入对象名称" /> </a-form-item
|
|
|
+ ></a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
|
|
|
+ ><a-form-item label="发生时间" name="syzt">
|
|
|
+ <a-select v-model:value="searchFormState.syzt" placeholder="请选择发生时间">
|
|
|
+ <a-select-option value="1">>10分钟</a-select-option>
|
|
|
+ <a-select-option value="2">>30分钟</a-select-option>
|
|
|
+ <a-select-option value="3">>1小时</a-select-option>
|
|
|
+ <a-select-option value="4">>5小时</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item></a-col
|
|
|
+ >
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
+ <a-form-item label="报警类型" name="jkdmc">
|
|
|
+ <a-select v-model:value="searchFormState.jkdmc" placeholder="请选择报警类型">
|
|
|
+ <a-select-option value="1">超限报警</a-select-option>
|
|
|
+ <a-select-option value="2">传感器故障</a-select-option>
|
|
|
+ <a-select-option value="3">电池报警</a-select-option>
|
|
|
+ <a-select-option value="4">断线报警</a-select-option>
|
|
|
+ <a-select-option value="5">其他报警</a-select-option>
|
|
|
+ <a-select-option value="6">外部电源断开</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item></a-col
|
|
|
+ >
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
|
|
|
+ ><a-form-item label="报警原因" name="bjyy">
|
|
|
+ <a-input v-model:value="searchFormState.bjyy" placeholder="请输入报警原因" /> </a-form-item
|
|
|
+ ></a-col>
|
|
|
+ </a-form>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <div class="table-search-buttons">
|
|
|
<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
|
|
|
<a-button class="xn-mg08" @click="reset">重置</a-button>
|
|
|
</div>
|
|
|
- <div class="head-right">
|
|
|
- <a-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 其他操作区域 -->
|
|
|
+ <div class="table-head-btn">
|
|
|
+ <div class="btn-right">
|
|
|
+ <a-button class="xn-mg08">
|
|
|
<template #icon><logout-outlined /></template>处理
|
|
|
</a-button>
|
|
|
- <a-button>
|
|
|
+ <a-button class="xn-mg08">
|
|
|
<template #icon><logout-outlined /></template>全部处理
|
|
|
</a-button>
|
|
|
<a-button>
|
|
|
<template #icon><download-outlined /></template>导出
|
|
|
</a-button>
|
|
|
- <a-button>
|
|
|
- <template #icon><search-outlined /></template>搜索模式
|
|
|
- </a-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
<template v-if="column.dataIndex === 'clzt'">
|
|
|
- <span>
|
|
|
- <a-tag :color="record.clzt == '1' ? '#cd201f' : record.clzt == '2' ? '#2db7f5' : '#87d068'">
|
|
|
+ <span style="cursor: pointer">
|
|
|
+ <a-tag color="#cd201f" v-if="record.clzt == '1'" @click="formRef.onOpen(record)">
|
|
|
+ <template #icon>
|
|
|
+ <form-outlined />
|
|
|
+ </template>
|
|
|
+ {{ record.clztValue }}
|
|
|
+ </a-tag>
|
|
|
+
|
|
|
+ <a-tag v-else-if="record.clzt == '2'" color="#87d068">
|
|
|
{{ record.clztValue }}
|
|
|
</a-tag>
|
|
|
</span>
|
|
|
</template>
|
|
|
</template>
|
|
|
+ <template #expandedRowRender="{ record }">
|
|
|
+ <a-tabs v-model:activeKey="record.activeKey" size="small" type="card">
|
|
|
+ <a-tab-pane key="1" tab="处理过程">
|
|
|
+ <div class="list">
|
|
|
+ <a-descriptions title="报警信息" bordered size="small">
|
|
|
+ <a-descriptions-item label="报警时间">{{ record.zjbjsj }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="报警类型">{{ record.bjlx }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="设备名称">{{ record.sbmc }}</a-descriptions-item>
|
|
|
+ </a-descriptions>
|
|
|
+
|
|
|
+ <a-descriptions title="报警通知" bordered size="small">
|
|
|
+ <a-descriptions-item label="接收人" :span="2">{{ record.jsr }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="报警方式" :span="2">{{ record.type }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="详情">{{ record.xq }}</a-descriptions-item>
|
|
|
+ </a-descriptions>
|
|
|
+
|
|
|
+ <a-descriptions title="解决过程" bordered size="small">
|
|
|
+ <a-descriptions-item label="响应时间">{{ record.xysj }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="处理人">{{ record.clr }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="处理时间">{{ record.clsj }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="报警原因">{{ record.bjyy }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="异常原因">{{ record.ycyy }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="处理措施">{{ record.clcs }}</a-descriptions-item>
|
|
|
+ </a-descriptions>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="2" tab="监控信息">
|
|
|
+ <div class="list">
|
|
|
+ <a-descriptions title="基本信息" bordered size="small">
|
|
|
+ <a-descriptions-item label="对象名称">{{ record.dxmc }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="对象编号">{{ record.dxbh }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="购置日期">{{ record.gzrq }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="品牌">{{ record.pp }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="型号">{{ record.xh }}</a-descriptions-item>
|
|
|
+ </a-descriptions>
|
|
|
+
|
|
|
+ <a-descriptions title="归属信息" bordered size="small">
|
|
|
+ <a-descriptions-item label="所属部门">{{ record.ssbm }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="对象编码">{{ record.dxbh }}</a-descriptions-item>
|
|
|
+ </a-descriptions>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </template>
|
|
|
</s-table>
|
|
|
+
|
|
|
+ <Form ref="formRef" @successful="tableRef.refresh(true)" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import tool from '@/utils/tool'
|
|
|
import jobApi from '@/api/dev/jobApi'
|
|
|
+ import Form from './form.vue'
|
|
|
+ const formRef = ref()
|
|
|
const searchFormRef = ref()
|
|
|
const searchFormState = ref({})
|
|
|
const tableRef = ref()
|
|
|
+
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '处理状态',
|
|
|
dataIndex: 'clzt',
|
|
|
align: 'center',
|
|
|
ellipsis: true,
|
|
|
- sorter: true,
|
|
|
width: '10%'
|
|
|
},
|
|
|
{
|
|
|
title: '报警开始时间',
|
|
|
dataIndex: 'bjkssj',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '最近报警时间',
|
|
|
dataIndex: 'zjbjsj',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '所属部门',
|
|
@@ -85,8 +196,7 @@
|
|
|
title: '对象编码',
|
|
|
dataIndex: 'dxbh',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '对象名称',
|
|
@@ -113,39 +223,34 @@
|
|
|
ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
- title: '相应时间',
|
|
|
+ title: '响应时间',
|
|
|
dataIndex: 'xysj',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '处理时间',
|
|
|
dataIndex: 'clsj',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '处理人',
|
|
|
dataIndex: 'clr',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '异常原因',
|
|
|
dataIndex: 'ycyy',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '处理措施',
|
|
|
dataIndex: 'clcs',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
}
|
|
|
]
|
|
|
|
|
@@ -168,127 +273,75 @@
|
|
|
bjkssj: '2024-08-28 07:03:24',
|
|
|
zjbjsj: '2024-08-28 09:03:42',
|
|
|
ssbm: '上海海关技术中心',
|
|
|
- dxbh: '',
|
|
|
+ dxbh: '1111',
|
|
|
dxmc: '-20度冰箱',
|
|
|
jsr: '周小杰',
|
|
|
- bjlx: '超限报警',
|
|
|
+ bjlx: '超限报警1',
|
|
|
bjyy: '温度超上限',
|
|
|
bjyy: '温度超上限',
|
|
|
hfzcsj: '',
|
|
|
xysj: '',
|
|
|
- clsj: '',
|
|
|
+ clsj: '2024-08-30 09:27:56',
|
|
|
clr: '',
|
|
|
ycyy: '',
|
|
|
clcs: '',
|
|
|
name: '-21度冰箱',
|
|
|
fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
|
|
|
- type: '短信报警',
|
|
|
+ type: '短信报警1',
|
|
|
dx: '13578945780',
|
|
|
dh: '/',
|
|
|
wx: '/',
|
|
|
yj: '/',
|
|
|
zt: '发送成功',
|
|
|
- clcs: ''
|
|
|
- },
|
|
|
- {
|
|
|
- clzt: '2',
|
|
|
- clztValue: '已处理',
|
|
|
- bjkssj: '2024-08-28 11:32:12',
|
|
|
- zjbjsj: '2024-08-28 11:52:42',
|
|
|
- ssbm: '上海海关技术中心',
|
|
|
- dxbh: '',
|
|
|
- dxmc: '-20度冰箱',
|
|
|
- jsr: '周小杰',
|
|
|
- bjlx: '超限报警',
|
|
|
- bjyy: '温度超上限',
|
|
|
- bjyy: '温度超上限',
|
|
|
- hfzcsj: '',
|
|
|
- xysj: '',
|
|
|
- clsj: '',
|
|
|
- clr: '',
|
|
|
- ycyy: '',
|
|
|
- clcs: ''
|
|
|
- },
|
|
|
- {
|
|
|
- clzt: '1',
|
|
|
- clztValue: '未处理',
|
|
|
- bjkssj: '2024-08-28 13:07:34',
|
|
|
- zjbjsj: '2024-08-28 13:10:12',
|
|
|
- ssbm: '上海海关技术中心',
|
|
|
- dxbh: '',
|
|
|
- dxmc: '-20度冰箱',
|
|
|
- jsr: '周小杰',
|
|
|
- bjlx: '超限报警',
|
|
|
- bjyy: '温度超上限',
|
|
|
- bjyy: '温度超上限',
|
|
|
- hfzcsj: '',
|
|
|
- xysj: '',
|
|
|
- clsj: '',
|
|
|
- clr: '',
|
|
|
- ycyy: '',
|
|
|
clcs: '',
|
|
|
- name: '-23度冰箱'
|
|
|
+ sbmc: '冰箱',
|
|
|
+ xq: '2024-08-28 09:03:42 短信报警',
|
|
|
+ xysj: '2024-08-28 09:03:42',
|
|
|
+ clr: '周小杰',
|
|
|
+ dxlx: '冰箱',
|
|
|
+ gzrq: '2024-05-30 14:27:03',
|
|
|
+ pp: '海尔',
|
|
|
+ xh: '68'
|
|
|
},
|
|
|
{
|
|
|
clzt: '2',
|
|
|
clztValue: '已处理',
|
|
|
- bjkssj: '2024-08-28 15:41:04',
|
|
|
- zjbjsj: '2024-08-28 15:55:51',
|
|
|
- ssbm: '上海海关技术中心',
|
|
|
- dxbh: '',
|
|
|
- dxmc: '-20度冰箱',
|
|
|
- jsr: '周小杰',
|
|
|
- bjlx: '超限报警',
|
|
|
+ bjkssj: '2024-08-31 09:24:56',
|
|
|
+ zjbjsj: '2024-08-31 11:15:10',
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ dxbh: '2222',
|
|
|
+ dxmc: '-56度冰箱',
|
|
|
+ jsr: '欧阳天添',
|
|
|
+ bjlx: '超限报警2',
|
|
|
bjyy: '温度超上限',
|
|
|
bjyy: '温度超上限',
|
|
|
hfzcsj: '',
|
|
|
xysj: '',
|
|
|
- clsj: '',
|
|
|
+ clsj: '2024-09-01 11:56:01',
|
|
|
clr: '',
|
|
|
ycyy: '',
|
|
|
- clcs: ''
|
|
|
- },
|
|
|
- {
|
|
|
- clzt: '1',
|
|
|
- clztValue: '未处理',
|
|
|
- bjkssj: '2024-08-28 16:43:14',
|
|
|
- zjbjsj: '2024-08-28 16:57:32',
|
|
|
- ssbm: '上海海关技术中心',
|
|
|
- dxbh: '',
|
|
|
- dxmc: '-20度冰箱',
|
|
|
- jsr: '周小杰',
|
|
|
- bjlx: '超限报警',
|
|
|
- bjyy: '温度超上限',
|
|
|
- bjyy: '温度超上限',
|
|
|
- hfzcsj: '',
|
|
|
- xysj: '',
|
|
|
- clsj: '',
|
|
|
- clr: '',
|
|
|
- ycyy: '',
|
|
|
- clcs: ''
|
|
|
- },
|
|
|
- {
|
|
|
- clzt: '2',
|
|
|
- clztValue: '已处理',
|
|
|
- bjkssj: '2024-08-28 18:21:33',
|
|
|
- zjbjsj: '2024-08-28 18:33:12',
|
|
|
- ssbm: '上海海关技术中心',
|
|
|
- dxbh: '',
|
|
|
- dxmc: '-20度冰箱',
|
|
|
- jsr: '周小杰',
|
|
|
- bjlx: '超限报警',
|
|
|
- bjyy: '温度超上限',
|
|
|
- bjyy: '温度超上限',
|
|
|
- hfzcsj: '',
|
|
|
- xysj: '',
|
|
|
- clsj: '',
|
|
|
- clr: '',
|
|
|
- ycyy: '',
|
|
|
- clcs: ''
|
|
|
+ clcs: '',
|
|
|
+ name: '-21度冰箱',
|
|
|
+ fsnr: '广州海关基数中心-[-56度冰箱]报警;温度超过上限:-7.7℃',
|
|
|
+ type: '电话报警',
|
|
|
+ dx: '15464789745',
|
|
|
+ dh: '/',
|
|
|
+ wx: '/',
|
|
|
+ yj: '/',
|
|
|
+ zt: '发送成功',
|
|
|
+ clcs: '',
|
|
|
+ sbmc: '冰箱',
|
|
|
+ xq: '2024-08-31 11:15:10 电话报警',
|
|
|
+ xysj: '2024-08-31 11:15:10',
|
|
|
+ clr: '欧阳天添',
|
|
|
+ dxlx: '冰箱',
|
|
|
+ gzrq: '2024-05-30 14:27:03',
|
|
|
+ pp: '海尔',
|
|
|
+ xh: '68'
|
|
|
}
|
|
|
],
|
|
|
size: 10,
|
|
|
- total: 6
|
|
|
+ total: 1
|
|
|
}
|
|
|
return obj
|
|
|
})
|
|
@@ -303,22 +356,29 @@
|
|
|
<style lang="less" scoped>
|
|
|
.table_item {
|
|
|
padding: 15px 20px;
|
|
|
- .table-head {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .head-left {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- .ant-btn {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
:deep(.ant-table-pagination-right) {
|
|
|
justify-content: center !important;
|
|
|
}
|
|
|
+
|
|
|
+ :deep(.ant-descriptions-header) {
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ width: 60%;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ :deep(.ant-descriptions) {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ :deep(.ant-descriptions-header) {
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|