|
@@ -110,118 +110,43 @@
|
|
|
<template #expandedRowRender="{ record }">
|
|
|
<a-tabs v-model:activeKey="record.activeKey" size="small" type="card">
|
|
|
<a-tab-pane key="1" tab="处理过程">
|
|
|
- <!-- 报警信息 -->
|
|
|
<div class="list">
|
|
|
- <div class="title">报警信息</div>
|
|
|
- <div class="info">
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">报警时间:</div>
|
|
|
- <div class="text">{{ record.zjbjsj }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">报警类型:</div>
|
|
|
- <div class="text">{{ record.bjlx }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">设备名称:</div>
|
|
|
- <div class="text">{{ record.sbmc }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 报警通知 -->
|
|
|
- <div class="list">
|
|
|
- <div class="title">报警通知</div>
|
|
|
- <div class="info">
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">接收人:</div>
|
|
|
- <div class="text">{{ record.jsr }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">报警方式:</div>
|
|
|
- <div class="text">{{ record.type }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">详情:</div>
|
|
|
- <div class="text">{{ record.xq }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 解决过程 -->
|
|
|
- <div class="list">
|
|
|
- <div class="title">解决过程</div>
|
|
|
- <div class="info">
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">响应时间:</div>
|
|
|
- <div class="text">{{ record.xysj }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">处理人:</div>
|
|
|
- <div class="text">{{ record.clr }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">处理时间:</div>
|
|
|
- <div class="text">{{ record.clsj }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">报警原因:</div>
|
|
|
- <div class="text">{{ record.bjyy }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">异常原因:</div>
|
|
|
- <div class="text">{{ record.ycyy }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">处理措施:</div>
|
|
|
- <div class="text">{{ record.clcs }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <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">
|
|
|
- <div class="title">基本信息</div>
|
|
|
- <div class="info">
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">对象名称</div>
|
|
|
- <div class="text">{{ record.dxmc }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">对象编号:</div>
|
|
|
- <div class="text">{{ record.dxbh }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">对象类型:</div>
|
|
|
- <div class="text">{{ record.dxlx }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">购置日期:</div>
|
|
|
- <div class="text">{{ record.gzrq }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">品牌:</div>
|
|
|
- <div class="text">{{ record.pp }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">型号:</div>
|
|
|
- <div class="text">{{ record.xh }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <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>
|
|
|
|
|
|
- <!-- 归属信息 -->
|
|
|
- <div class="list">
|
|
|
- <div class="title">归属信息</div>
|
|
|
- <div class="info">
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">所属部门:</div>
|
|
|
- <div class="text">{{ record.ssbm }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">对象编码:</div>
|
|
|
- <div class="text">{{ record.dxbh }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <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>
|
|
@@ -247,22 +172,19 @@
|
|
|
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: '所属部门',
|
|
@@ -274,8 +196,7 @@
|
|
|
title: '对象编码',
|
|
|
dataIndex: 'dxbh',
|
|
|
align: 'center',
|
|
|
- ellipsis: true,
|
|
|
- sorter: true
|
|
|
+ ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '对象名称',
|
|
@@ -302,44 +223,37 @@
|
|
|
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
|
|
|
}
|
|
|
]
|
|
|
|
|
|
- const activeKey = ref('1')
|
|
|
-
|
|
|
const loadData = (parameter) => {
|
|
|
if (searchFormState.value.searchKey) {
|
|
|
searchFormState.value.startCreateTime = searchFormState.value.searchKey[0]
|
|
@@ -447,55 +361,24 @@
|
|
|
justify-content: center !important;
|
|
|
}
|
|
|
|
|
|
+ :deep(.ant-descriptions-header) {
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
.list {
|
|
|
width: 60%;
|
|
|
- margin: 10px 0;
|
|
|
- border: 1px solid #e4e4e4;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
|
- // 标题
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- font-weight: bold;
|
|
|
- color: #802f76;
|
|
|
+ :deep(.ant-descriptions) {
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
-
|
|
|
- // 信息区域
|
|
|
- .info {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
+ :deep(.ant-descriptions-header) {
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
border-bottom: none;
|
|
|
-
|
|
|
- .info-row {
|
|
|
- display: flex;
|
|
|
- flex: 1 1 33%;
|
|
|
- width: 100%;
|
|
|
- height: 45px;
|
|
|
- line-height: 45px;
|
|
|
- border: 1px solid #e4e4e4;
|
|
|
-
|
|
|
- .label {
|
|
|
- width: 100px;
|
|
|
- text-align-last: justify;
|
|
|
- padding: 0 10px;
|
|
|
- color: #802f76;
|
|
|
- font-weight: bold;
|
|
|
- border-right: 1px solid #e4e4e4;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- flex: 1;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- padding: 0 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .info:last-child {
|
|
|
- border-right: none;
|
|
|
}
|
|
|
}
|
|
|
</style>
|