监控设备管理界面

snowy-admin-web/src/views/basicset/devicetype/model.vue

@@ -55,35 +55,42 @@
 	const tableRef = ref()
 	const columns = [
 		{
-			title: '型号编号',
+			title: '对象类别',
 			dataIndex: 'code',
 			align: 'center',
 			ellipsis: true
 		},
 		{
-			title: '型号名称',
+			title: '品牌',
+			dataIndex: 'pp',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '对象型号名称',
 			dataIndex: 'name',
 			align: 'center',
 			ellipsis: true
 		},
 		{
-			title: '描述',
-			dataIndex: 'describe',
+			title: '对象型号图片',
+			dataIndex: 'img',
 			align: 'center',
 			ellipsis: true
 		},
 		{
-			title: '创立日期',
-			dataIndex: 'date',
+			title: '描述',
+			dataIndex: 'describe',
 			align: 'center',
 			ellipsis: true
 		},
 		{
-			title: '创建人',
-			dataIndex: 'creator',
+			title: '创立时间',
+			dataIndex: 'date',
 			align: 'center',
 			ellipsis: true
 		},
+
 		{
 			title: '操作',
 			dataIndex: 'action',

snowy-admin-web/src/views/basicset/mem/collector.vue

@@ -87,6 +87,28 @@
 					<a-button type="link" size="small">记录</a-button>
 				</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 bordered size="small">
+								<a-descriptions-item label="采集器名称" :span="2">{{ '90160206' }}</a-descriptions-item>
+								<a-descriptions-item label="采集器编码" :span="2">{{ '90160206' }}</a-descriptions-item>
+								<a-descriptions-item label="采集器设备状态" :span="2">{{ '正常' }}</a-descriptions-item>
+								<a-descriptions-item label="创建时间" :span="2">{{ '2024-10-09 09:36:21' }}</a-descriptions-item>
+							</a-descriptions>
+						</div>
+					</a-tab-pane>
+					<a-tab-pane key="2" tab="1路">
+						<div class="list">
+							<a-descriptions bordered size="small">
+								<a-descriptions-item label="传感器类型" :span="2">{{ '温度' }}</a-descriptions-item>
+								<a-descriptions-item label="传感器路数" :span="2">{{ '1' }}</a-descriptions-item>
+							</a-descriptions>
+						</div>
+					</a-tab-pane>
+				</a-tabs>
+			</template>
 		</s-table>
 	</div>
 </template>
@@ -186,21 +208,7 @@
 						stateValue: '正常',
 						bjsxx: '1',
 						dyjkdx: 'BSL-3超低温冰箱',
-						jkdxwz: 'ABCLSY冰箱三层',
-						children: [
-							{
-								ssbm: '广州海关技术中心',
-								code: 'Y-01-6578945621',
-								name: 'ABSL-3超低温冰箱123456',
-								xh: '三代GPRS采集-VH',
-								date: '2024-09-28 07:03:24',
-								state: '2',
-								stateValue: '异常',
-								bjsxx: '1',
-								dyjkdx: 'BSL-3超低温冰箱',
-								jkdxwz: 'ABCLSY冰箱三层一格'
-							}
-						]
+						jkdxwz: 'ABCLSY冰箱三层'
 					},
 					{
 						ssbm: '广州海关技术中心',
@@ -212,21 +220,7 @@
 						stateValue: '正常',
 						bjsxx: '1',
 						dyjkdx: 'BSL-3超低温冰箱',
-						jkdxwz: 'ABCLSY冰箱三层',
-						children: [
-							{
-								ssbm: '广州海关技术中心',
-								code: 'Y-01-6578945622',
-								name: 'ABSL-3超低温冰箱123456',
-								xh: '三代GPRS采集-VH',
-								date: '2024-09-28 07:03:24',
-								state: '2',
-								stateValue: '异常',
-								bjsxx: '1',
-								dyjkdx: 'BSL-3超低温冰箱',
-								jkdxwz: 'ABCLSY冰箱三层'
-							}
-						]
+						jkdxwz: 'ABCLSY冰箱三层'
 					},
 					{
 						ssbm: '广州海关技术中心',
@@ -302,4 +296,20 @@
 			justify-content: center !important;
 		}
 	}
+	.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>