报警管理中的表格样式调整

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

@@ -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>