监控设备管理

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

@@ -0,0 +1,273 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<div class="table-head">
+					<div class="head-left">
+						<a-button type="primary">显示新设备</a-button>
+						<a-form
+							ref="searchFormRef"
+							name="advanced_search"
+							:model="searchFormState"
+							layout="inline"
+							class="ant-advanced-search-form"
+						>
+							<a-form-item label="冷链编号" name="code">
+								<a-input v-model:value="searchFormState.code" placeholder="请输入冷链编号" />
+							</a-form-item>
+						</a-form>
+						<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>
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+						<a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus" @change="handleChange">
+							<a-select-option value="1">搜索模式</a-select-option>
+						</a-select>
+					</div>
+				</div>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'state'">
+					<span>
+						<a-tag :color="record.state == '1' ? '#50cd7c' : record.state == '2' ? '#cd201f' : '#87d068'">
+							{{ record.stateValue }}
+						</a-tag>
+					</span>
+				</template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-button type="link" size="small">编辑</a-button>
+					<a-button type="link" size="small">删除</a-button>
+					<a-button type="link" size="small">记录</a-button>
+				</template>
+			</template>
+		</s-table>
+	</div>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+	const searchFormRef = ref()
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const value1 = ref('1')
+	const columns = [
+		{
+			title: '所属部门',
+			dataIndex: 'ssbm',
+			align: 'center',
+			ellipsis: true,
+
+			width: 200
+		},
+		{
+			title: '采集器编号',
+			dataIndex: 'code',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集器名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true,
+
+			width: 200
+		},
+		{
+			title: '型号',
+			dataIndex: 'xh',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '最后心跳时间',
+			dataIndex: 'date',
+			align: 'center',
+			ellipsis: true,
+
+			width: 200
+		},
+		{
+			title: '设备状态',
+			dataIndex: 'state',
+			align: 'center',
+			ellipsis: true
+		},
+
+		{
+			title: '传感器路数',
+			dataIndex: 'bjsxx',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '对应监控对象',
+			dataIndex: 'dyjkdx',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控对象位置',
+			dataIndex: 'jkdxwz',
+			align: 'center',
+			ellipsis: true
+		},
+
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 150
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						ssbm: '广州海关技术中心',
+						code: 'Y6578945621',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						date: '2024-09-28 07:03:24',
+						state: '1',
+						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冰箱三层一格'
+							}
+						]
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code: 'Y6578945622',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						date: '2024-11-05 07:12:42',
+						state: '1',
+						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: '1',
+								stateValue: '正常',
+								bjsxx: '1',
+								dyjkdx: 'BSL-3超低温冰箱',
+								jkdxwz: 'ABCLSY冰箱三层'
+							}
+						]
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code: 'Y6578945623',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						date: '2024-11-05 09:22:45',
+						state: '1',
+						stateValue: '正常',
+						bjsxx: '1',
+						dyjkdx: 'BSL-3超低温冰箱',
+						jkdxwz: 'ABCLSY冰箱三层'
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code: 'Y6578945624',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						date: '2024-11-05 09:27:55',
+						state: '1',
+						stateValue: '正常',
+						bjsxx: '1',
+						dyjkdx: 'BSL-3超低温冰箱',
+						jkdxwz: 'ABCLSY冰箱三层'
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code: 'Y6578945625',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						date: '2024-11-05 10:16:11',
+						state: '2',
+						stateValue: '异常',
+						bjsxx: '1',
+						dyjkdx: 'BSL-3超低温冰箱',
+						jkdxwz: 'ABCLSY冰箱三层'
+					},
+					{
+						ssbm: '广州海关技术中心',
+						code: 'Y6578945626',
+						name: 'ABSL-3超低温冰箱123456',
+						xh: '三代GPRS采集-VH',
+						date: '2024-11-05 14:57:31',
+						state: '2',
+						stateValue: '异常',
+						bjsxx: '1',
+						dyjkdx: 'BSL-3超低温冰箱',
+						jkdxwz: 'ABCLSY冰箱三层'
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+
+		.table-head {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.head-left {
+				width: 60%;
+				display: flex;
+			}
+
+			.ant-btn {
+				margin-right: 10px;
+			}
+		}
+
+		:deep(.ant-table-pagination-right) {
+			justify-content: center !important;
+		}
+	}
+</style>

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

@@ -1,12 +1,84 @@
 <template>
-	<div>监控设备管理</div>
+	<div class="query-box">
+		<div class="query-head">
+			<div class="query-tbas">
+				<div class="tbas-title" :class="activeKey == '1' ? 'active' : ''" @click="activeclick('1')">冷链采集器</div>
+				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
+				<div class="tbas-title" :class="activeKey == '2' ? 'active' : ''" @click="activeclick('2')">冷链中继器</div>
+			</div>
+		</div>
+
+		<div class="query-body">
+			<Collector ref="collectorRef" v-if="activeKey == '1'" />
+			<Repeater ref="repeaterRef" v-if="activeKey == '2'" />
+		</div>
+	</div>
 </template>
 <script setup>
+	import Collector from './collector.vue'
+	import Repeater from './repeater.vue'
+
+	const activeKey = ref('1')
+	const collectorRef = ref(null)
+	const repeaterRef = ref(null)
+
 	onMounted(() => {})
 
 	onBeforeMount(() => {})
 
+	// 点击标签
+	const activeclick = (v) => {
+		activeKey.value = v
+	}
+
 	// 监听
-	watch()
+	watch(
+		() => activeKey.value,
+		(newValue) => {
+			if (newValue === '1' && collectorRef.value) {
+				collectorRef.value.loadData()
+			} else if (newValue === '2' && repeaterRef.value) {
+				repeaterRef.value.loadData()
+			}
+		},
+		{
+			immediate: true // 立即执行
+		}
+	)
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+	.query-box {
+		width: 100%;
+		height: 100vh;
+		overflow: hidden;
+		background-color: #fff;
+
+		// 顶部
+		.query-head {
+			width: 100%;
+			height: 50px;
+			display: flex;
+			justify-content: space-between;
+			padding: 15px;
+			border-bottom: 1px solid #e7e7e7;
+
+			.query-tbas {
+				width: 95%;
+				display: flex;
+
+				.tbas-title {
+					height: 35px;
+					line-height: 25px;
+					color: #a7a7a7;
+					font-size: 16px;
+					cursor: pointer;
+				}
+
+				.active {
+					color: #1b8fff;
+					border-bottom: 2px solid #1b8fff;
+				}
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,14 @@
+<template>
+	<div class="table_item">冷链中继器</div>
+</template>
+
+<script setup>
+	import tool from '@/utils/tool'
+	import jobApi from '@/api/dev/jobApi'
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+	}
+</style>