报警管理-监控信息

snowy-admin-web/src/views/motoring/report/list.vue

@@ -33,12 +33,12 @@
 					</div>
 				</div>
 			</template>
+
 			<template #bodyCell="{ column, record }">
 				<template v-if="column.dataIndex === 'clzt'">
-					<span>
+					<span style="cursor: pointer">
 						<a-tag
 							:color="record.clzt == '1' ? '#cd201f' : record.clzt == '2' ? '#2db7f5' : '#87d068'"
-							style="cursor: pointer"
 							@click="formRef.onOpen(record)"
 						>
 							<template #icon>
@@ -49,6 +49,125 @@
 					</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">
+							<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>
+						</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>
+
+						<!-- 归属信息 -->
+						<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>
+						</div>
+					</a-tab-pane>
+				</a-tabs>
+			</template>
 		</s-table>
 
 		<Form ref="formRef" @successful="tableRef.refresh(true)" />
@@ -63,6 +182,7 @@
 	const searchFormRef = ref()
 	const searchFormState = ref({})
 	const tableRef = ref()
+
 	const columns = [
 		{
 			title: '处理状态',
@@ -160,6 +280,8 @@
 		}
 	]
 
+	const activeKey = ref('1')
+
 	const loadData = (parameter) => {
 		if (searchFormState.value.searchKey) {
 			searchFormState.value.startCreateTime = searchFormState.value.searchKey[0]
@@ -179,127 +301,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
 		})
@@ -332,4 +402,56 @@
 	:deep(.ant-table-pagination-right) {
 		justify-content: center !important;
 	}
+
+	.list {
+		width: 60%;
+		margin: 10px 0;
+		border: 1px solid #e4e4e4;
+
+		// 标题
+		.title {
+			width: 100%;
+			padding: 10px;
+			font-weight: bold;
+			color: #802f76;
+		}
+
+		// 信息区域
+		.info {
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			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>