目标设备管理界面

snowy-admin-web/src/views/motoring/analyse/assess.vue

@@ -0,0 +1,310 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" bordered :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<!-- 搜索区域 -->
+				<div class="table-search">
+					<div class="table-search-form">
+						<a-row :gutter="10">
+							<a-form
+								ref="searchFormRef"
+								name="advanced_search"
+								layout="inline"
+								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
+								:model="searchFormState"
+								class="ant-advanced-search-form"
+							>
+								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
+									<a-form-item label="开始时间" name="searchKey">
+										<a-date-picker
+											v-model:value="searchFormState.searchKey"
+											show-time
+											format="YYYY-MM-DD HH:mm:ss"
+											value-format="YYYY-MM-DD HH:mm:ss"
+											style="width: 100%"
+										/>
+									</a-form-item>
+								</a-col>
+								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
+									<a-form-item label="结束时间" name="jssj">
+										<a-date-picker
+											v-model:value="searchFormState.jssj"
+											show-time
+											format="YYYY-MM-DD HH:mm:ss"
+											value-format="YYYY-MM-DD HH:mm:ss"
+											style="width: 100%"
+										/>
+									</a-form-item>
+								</a-col>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="searchFormState.type == 'qst'">
+									<a-form-item label="采集类型" name="cjlx">
+										<a-select v-model:value="searchFormState.cjlx" placeholder="请选择采集类型">
+											<a-select-option value="1">温度</a-select-option>
+											<a-select-option value="2">湿度</a-select-option>
+											<a-select-option value="3">氧气浓度</a-select-option>
+										</a-select>
+									</a-form-item>
+								</a-col>
+							</a-form>
+						</a-row>
+					</div>
+					<div class="table-search-buttons">
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+				</div>
+				<!-- 其他操作区域 -->
+				<div class="table-head-btn">
+					<div class="btn-right">
+						<a-button class="xn-mg08">
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+						<a-button>
+							<template #icon><printer-outlined /></template>打印
+						</a-button>
+					</div>
+				</div>
+			</template>
+		</s-table>
+		<div class="item-right">
+			<!-- 单位 -->
+			<div class="unit">
+				<unitSearch ref="unitSearchRef" />
+			</div>
+			<!-- 监控点 -->
+			<div class="monitor">
+				<monitorSearch ref="monitorSearchRef" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import jobApi from '@/api/dev/jobApi'
+	import unitSearch from './unitSearch.vue'
+	import monitorSearch from './monitorSearch.vue'
+
+	const unitSearchRef = ref(null)
+	const monitorSearchRef = ref(null)
+	onMounted(() => {
+		unitSearchRef.value.onOpen() //获取单位数据
+		monitorSearchRef.value.onOpen() //获取监控点数据
+	})
+
+	const tableRef = ref()
+	const searchFormState = ref({})
+	const columns = [
+		{
+			title: '部门名称',
+			dataIndex: 'bmmc',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控点',
+			dataIndex: 'jkd',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '冷链编号',
+			dataIndex: 'llcode',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '品牌',
+			dataIndex: 'pp',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '温度情况',
+			dataIndex: 'wdqk',
+			align: 'center',
+			ellipsis: true,
+			children: [
+				{
+					title: '平均温度',
+					dataIndex: 'pjwd',
+					align: 'center',
+					ellipsis: true
+				},
+				{
+					title: '最高温度',
+					dataIndex: 'zgwd',
+					align: 'center',
+					ellipsis: true
+				},
+				{
+					title: '最低温度',
+					dataIndex: 'zdwd',
+					align: 'center',
+					ellipsis: true
+				}
+			]
+		},
+
+		{
+			title: '报警情况',
+			dataIndex: 'bjqk',
+			align: 'center',
+			ellipsis: true,
+			children: [
+				{
+					title: '超温报警次数',
+					dataIndex: 'cwbjcs',
+					align: 'center',
+					ellipsis: true
+				},
+				{
+					title: '采集报警次数',
+					dataIndex: 'cjbjcs',
+					align: 'center',
+					ellipsis: true
+				}
+			]
+		},
+
+		{
+			title: '温度评估值',
+			dataIndex: 'wdpgz',
+			align: 'center',
+			ellipsis: true
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						bmmc: '上海海关基数中心1',
+						jkd: '监控点',
+						llcode: 'LL-20241112',
+						pp: '海尔',
+						pjwd: 33,
+						zgwd: 1,
+						zdwd: 0,
+						cwbjcs: 0,
+						cjbjcs: 20,
+						wdpgz: 0
+					},
+					{
+						bmmc: '上海海关基数中心2',
+						jkd: '监控点',
+						llcode: 'LL-20241112',
+						pp: '海尔',
+						pjwd: 21,
+						zgwd: 0,
+						zdwd: 2,
+						cwbjcs: 0,
+						cjbjcs: 34,
+						wdpgz: 0
+					},
+					{
+						bmmc: '上海海关基数中心2',
+						jkd: '监控点',
+						llcode: 'LL-20241112',
+						pp: '海尔',
+						pjwd: 4,
+						zgwd: 6,
+						zdwd: 1,
+						cwbjcs: 1,
+						cjbjcs: 10,
+						wdpgz: 0
+					},
+					{
+						bmmc: '上海海关基数中心4',
+						jkd: '监控点',
+						llcode: 'LL-20241112',
+						pp: '海尔',
+						pjwd: 24,
+						zgwd: 3,
+						zdwd: 3,
+						cwbjcs: 0,
+						cjbjcs: 16,
+						wdpgz: 0
+					},
+					{
+						bmmc: '上海海关基数中心5',
+						jkd: '监控点',
+						llcode: 'LL-20241112',
+						pp: '海尔',
+						pjwd: 15,
+						zgwd: 0,
+						zdwd: 0,
+						cwbjcs: 1,
+						cjbjcs: 12,
+						wdpgz: 0
+					},
+					{
+						bmmc: '上海海关基数中心6',
+						jkd: '监控点',
+						llcode: 'LL-20241112',
+						pp: '海尔',
+						pjwd: 2,
+						zgwd: 0,
+						zdwd: 1,
+						cwbjcs: 1,
+						cjbjcs: 31,
+						wdpgz: 0
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		width: 100%;
+		display: flex;
+		padding: 15px 20px;
+
+		.table-wrapper {
+			width: 75%;
+		}
+
+		// 右边的搜索区域
+		.item-right {
+			width: 25%;
+			padding: 5px 10px;
+
+			.unit,
+			.monitor {
+				width: 100%;
+				height: 350px;
+				padding: 10px;
+				margin-bottom: 10px;
+				border-radius: 5px;
+				border: 1px solid #eaeaea;
+				overflow-y: auto;
+			}
+		}
+	}
+	// 树形结构的样式
+	:deep(.ant-tree-treenode) {
+		width: 100%;
+		margin-bottom: 5px;
+		border-radius: 5px;
+		padding: 5px 0 !important;
+		border: 1px solid #eaeaea;
+	}
+
+	// 分页居中显示
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
+</style>

snowy-admin-web/src/views/motoring/analyse/curve.vue

@@ -14,7 +14,7 @@
 								:model="searchFormState"
 								class="ant-advanced-search-form"
 							>
-								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
 									<a-form-item label="开始时间" name="searchKey">
 										<a-date-picker
 											v-model:value="searchFormState.searchKey"
@@ -25,7 +25,7 @@
 										/>
 									</a-form-item>
 								</a-col>
-								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
 									<a-form-item label="结束时间" name="jssj">
 										<a-date-picker
 											v-model:value="searchFormState.jssj"
@@ -37,25 +37,35 @@
 									</a-form-item>
 								</a-col>
 
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
 									<a-form-item label="报表类型" name="type">
 										<a-select v-model:value="searchFormState.type" placeholder="请选择报警类型">
 											<a-select-option value="qst">趋势图</a-select-option>
+											<a-select-option value="tjlb">统计列表</a-select-option>
 										</a-select>
 									</a-form-item></a-col
 								>
-								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
 									<a-form-item
-										label="是否展示全部区间"
+										label="展示全部区间"
 										name="isshow"
-										:label-col="{ style: { width: '120px', justifyContent: 'end' } }"
+										:label-col="{ style: { width: '100px', justifyContent: 'end' } }"
 									>
-										<a-select v-model:value="searchFormState.isshow" placeholder="请选择是否展示全部区间">
+										<a-select v-model:value="searchFormState.isshow" placeholder="请选择展示全部区间">
 											<a-select-option value="1">是</a-select-option>
 											<a-select-option value="1">否</a-select-option>
 										</a-select>
 									</a-form-item>
 								</a-col>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="searchFormState.type == 'qst'">
+									<a-form-item label="采集类型" name="cjlx">
+										<a-select v-model:value="searchFormState.cjlx" placeholder="请选择采集类型">
+											<a-select-option value="1">温度</a-select-option>
+											<a-select-option value="2">湿度</a-select-option>
+											<a-select-option value="3">氧气浓度</a-select-option>
+										</a-select>
+									</a-form-item>
+								</a-col>
 							</a-form>
 						</a-row>
 					</div>
@@ -65,15 +75,6 @@
 					</div>
 				</div>
 			</template>
-
-			<template #headerCell="{ title, column }">
-				<template v-if="column.dataIndex === 'type'">
-					<text>{{ title }}</text>
-					<a-select ref="select" v-model:value="value1" style="width: 250px; margin-left: 10px">
-						<a-select-option value="1">二氧化碳浓度</a-select-option>
-					</a-select>
-				</template>
-			</template>
 		</s-table>
 
 		<div class="item-right">
@@ -106,15 +107,41 @@
 
 	// 搜索表单
 	const searchFormState = ref({
-		type: 'qst',
+		type: 'tjlb',
 		isshow: '1'
 	})
 	const tableRef = ref()
 
 	const columns = [
 		{
-			title: '采集类型',
-			dataIndex: 'type'
+			title: '对象名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控点名称',
+			dataIndex: 'jkdname',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集值1',
+			dataIndex: 'cjz',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集值2',
+			dataIndex: 'cjz2',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集时间',
+			dataIndex: 'cjsj',
+			align: 'center',
+			ellipsis: true
 		}
 	]
 
@@ -124,9 +151,58 @@
 			const obj = {
 				current: 1,
 				pages: 1,
-				records: [],
+				records: [
+					{
+						cjsj: '2024-08-28 07:03:24',
+						name: '-70度超低温冷冻储存箱',
+						cjz: '/',
+						cjz2: '/',
+
+						jkdname: '监控点1'
+					},
+					{
+						cjsj: '2024-08-28 09:21:51',
+						name: '-71度超低温冷冻储存箱',
+						cjz: '/',
+						cjz2: '/',
+
+						jkdname: '监控点2'
+					},
+					{
+						cjsj: '2024-08-28 11:06:20',
+						name: '-72度超低温冷冻储存箱',
+						cjz: '/',
+						cjz2: '/',
+
+						jkdname: '监控点2'
+					},
+					{
+						cjsj: '2024-08-28 11:54:19',
+						name: '-73度超低温冷冻储存箱',
+						cjz: '/',
+						cjz2: '/',
+
+						jkdname: '监控点4'
+					},
+					{
+						cjsj: '2024-08-28 16:17:36',
+						name: '-74度超低温冷冻储存箱',
+						cjz: '/',
+						cjz2: '/',
+
+						jkdname: '监控点5'
+					},
+					{
+						cjsj: '2024-08-28 19:35:58',
+						name: '-75度超低温冷冻储存箱',
+						cjz: '/',
+						cjz2: '/',
+
+						jkdname: '监控点6'
+					}
+				],
 				size: 10,
-				total: 0
+				total: 6
 			}
 			return obj
 		})

snowy-admin-web/src/views/motoring/analyse/daily.vue

@@ -117,6 +117,12 @@
 			align: 'center',
 			ellipsis: true
 		},
+		{
+			title: '报警最大值',
+			dataIndex: 'bjzdz',
+			align: 'center',
+			ellipsis: true
+		},
 		{
 			title: '采集状态',
 			dataIndex: 'state',
@@ -143,6 +149,7 @@
 						time: '2024-08-28 07:03:24',
 						dxmc: '-70度超低温冷冻储存箱',
 						bjzxz: '/',
+						bjzdz: '/',
 						state: '2',
 						stateVlaue: '异常',
 						bmmc: '上海海关基数中心1'
@@ -151,6 +158,7 @@
 						time: '2024-08-28 09:21:51',
 						dxmc: '-71度超低温冷冻储存箱',
 						bjzxz: '/',
+						bjzdz: '/',
 						state: '1',
 						stateVlaue: '正常',
 						bmmc: '上海海关基数中心2'
@@ -159,6 +167,7 @@
 						time: '2024-08-28 11:06:20',
 						dxmc: '-72度超低温冷冻储存箱',
 						bjzxz: '/',
+						bjzdz: '/',
 						state: '2',
 						stateVlaue: '异常',
 						bmmc: '上海海关基数中心2'
@@ -167,6 +176,7 @@
 						time: '2024-08-28 11:54:19',
 						dxmc: '-73度超低温冷冻储存箱',
 						bjzxz: '/',
+						bjzdz: '/',
 						state: '2',
 						stateVlaue: '异常',
 						bmmc: '上海海关基数中心4'
@@ -175,6 +185,7 @@
 						time: '2024-08-28 16:17:36',
 						dxmc: '-74度超低温冷冻储存箱',
 						bjzxz: '/',
+						bjzdz: '/',
 						state: '1',
 						stateVlaue: '正常',
 						bmmc: '上海海关基数中心5'
@@ -183,6 +194,7 @@
 						time: '2024-08-28 19:35:58',
 						dxmc: '-75度超低温冷冻储存箱',
 						bjzxz: '/',
+						bjzdz: '/',
 						state: '2',
 						stateVlaue: '异常',
 						bmmc: '上海海关基数中心6'

snowy-admin-web/src/views/motoring/analyse/index.vue

@@ -6,25 +6,41 @@
 				<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>
 				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
-				<div class="tbas-title" :class="activeKey == '3' ? 'active' : ''" @click="activeclick('3')">管理评估</div>
+				<div class="tbas-title" :class="activeKey == '3' ? 'active' : ''" @click="activeclick('3')">日统计</div>
+				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
+				<div class="tbas-title" :class="activeKey == '4' ? 'active' : ''" @click="activeclick('4')">信号强度统计</div>
+				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
+				<div class="tbas-title" :class="activeKey == '5' ? 'active' : ''" @click="activeclick('5')">温度评估</div>
+				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
+				<div class="tbas-title" :class="activeKey == '6' ? 'active' : ''" @click="activeclick('6')">管理评估</div>
 			</div>
 		</div>
 
 		<div class="query-body">
 			<Dailyr ref="dailyrRef" v-if="activeKey == '1'" />
 			<Curve ref="curveRef" v-if="activeKey == '2'" />
-			<Evaluate ref="evaluateRef" v-if="activeKey == '3'" />
+			<Statistics ref="statisticsRef" v-if="activeKey == '3'" />
+			<Signal ref="signalRef" v-if="activeKey == '4'" />
+			<Assess ref="assessRef" v-if="activeKey == '5'" />
+			<Evaluate ref="evaluateRef" v-if="activeKey == '6'" />
 		</div>
 	</div>
 </template>
 <script setup>
 	import Dailyr from './daily.vue'
 	import Curve from './curve.vue'
+	import Statistics from './statistics.vue'
+	import Signal from './signal.vue'
+	import Assess from './assess.vue'
+
 	import Evaluate from './evaluate.vue'
 
 	const activeKey = ref('1')
 	const dailyrRef = ref(null)
 	const curveRef = ref(null)
+	const statisticsRef = ref(null)
+	const signalRef = ref(null)
+	const assessRef = ref(null)
 	const evaluateRef = ref(null)
 
 	onMounted(() => {})

snowy-admin-web/src/views/motoring/analyse/signal.vue

@@ -0,0 +1,208 @@
+<template>
+	<div class="table_item">
+		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
+			<template #operator>
+				<!-- 搜索区域 -->
+				<div class="table-search">
+					<div class="table-search-form">
+						<a-row :gutter="10">
+							<a-form
+								ref="searchFormRef"
+								name="advanced_search"
+								layout="inline"
+								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
+								:model="searchFormState"
+								class="ant-advanced-search-form"
+							>
+								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
+									<a-form-item label="开始时间" name="searchKey">
+										<a-date-picker
+											v-model:value="searchFormState.searchKey"
+											show-time
+											format="YYYY-MM-DD HH:mm:ss"
+											value-format="YYYY-MM-DD HH:mm:ss"
+											style="width: 100%"
+										/>
+									</a-form-item>
+								</a-col>
+								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
+									<a-form-item label="结束时间" name="jssj">
+										<a-date-picker
+											v-model:value="searchFormState.jssj"
+											show-time
+											format="YYYY-MM-DD HH:mm:ss"
+											value-format="YYYY-MM-DD HH:mm:ss"
+											style="width: 100%"
+										/>
+									</a-form-item>
+								</a-col>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="searchFormState.type == 'qst'">
+									<a-form-item label="采集类型" name="cjlx">
+										<a-select v-model:value="searchFormState.cjlx" placeholder="请选择采集类型">
+											<a-select-option value="1">温度</a-select-option>
+											<a-select-option value="2">湿度</a-select-option>
+											<a-select-option value="3">氧气浓度</a-select-option>
+										</a-select>
+									</a-form-item>
+								</a-col>
+							</a-form>
+						</a-row>
+					</div>
+					<div class="table-search-buttons">
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+				</div>
+			</template>
+		</s-table>
+
+		<div class="item-right">
+			<!-- 单位 -->
+			<div class="unit">
+				<unitSearch ref="unitSearchRef" />
+			</div>
+			<!-- 监控点 -->
+			<div class="monitor">
+				<monitorSearch ref="monitorSearchRef" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import jobApi from '@/api/dev/jobApi'
+	import unitSearch from './unitSearch.vue'
+	import monitorSearch from './monitorSearch.vue'
+
+	const unitSearchRef = ref(null)
+	const monitorSearchRef = ref(null)
+
+	onMounted(() => {
+		unitSearchRef.value.onOpen() //获取单位数据
+		monitorSearchRef.value.onOpen() //获取监控点数据
+	})
+
+	// 搜索表单
+	const searchFormState = ref({})
+	const tableRef = ref()
+
+	const columns = [
+		{
+			title: '采集器编码',
+			dataIndex: 'code',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集器名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '信号强度统计',
+			dataIndex: 'tj',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集时间',
+			dataIndex: 'sj',
+			align: 'center',
+			ellipsis: true
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						code: 'CJQ-20241112-00',
+						name: '-70度超低温冷冻储存箱',
+						tj: '60',
+						sj: '2024-08-28 07:03:24'
+					},
+					{
+						code: 'CJQ-20241112-01',
+						name: '-71度超低温冷冻储存箱',
+						tj: '61',
+						sj: '2024-08-28 07:03:24'
+					},
+					{
+						code: 'CJQ-20241112-02',
+						name: '-72度超低温冷冻储存箱',
+						tj: '62',
+						sj: '2024-08-28 07:03:24'
+					},
+					{
+						code: 'CJQ-20241112-03',
+						name: '-73度超低温冷冻储存箱',
+						tj: '63',
+						sj: '2024-08-28 07:03:24'
+					},
+					{
+						code: 'CJQ-20241112-04',
+						name: '-74度超低温冷冻储存箱',
+						tj: '64',
+						sj: '2024-08-28 07:03:24'
+					},
+					{
+						code: 'CJQ-20241112-05',
+						name: '-75度超低温冷冻储存箱',
+						tj: '65',
+						sj: '2024-08-28 07:03:24'
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		width: 100%;
+		display: flex;
+		padding: 15px 20px;
+
+		.table-wrapper {
+			width: 75%;
+		}
+
+		// 右边的搜索区域
+		.item-right {
+			width: 25%;
+			padding: 5px 10px;
+
+			.unit,
+			.monitor {
+				width: 100%;
+				height: 350px;
+				padding: 10px;
+				margin-bottom: 10px;
+				border-radius: 5px;
+				border: 1px solid #eaeaea;
+				overflow-y: auto;
+			}
+		}
+	}
+	// 树形结构的样式
+	:deep(.ant-tree-treenode) {
+		width: 100%;
+		margin-bottom: 5px;
+		border-radius: 5px;
+		padding: 5px 0 !important;
+		border: 1px solid #eaeaea;
+	}
+
+	// 分页居中显示
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
+</style>

snowy-admin-web/src/views/motoring/analyse/statistics.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-search">
+					<div class="table-search-form">
+						<a-row :gutter="10">
+							<a-form
+								ref="searchFormRef"
+								name="advanced_search"
+								layout="inline"
+								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
+								:model="searchFormState"
+								class="ant-advanced-search-form"
+							>
+								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
+									<a-form-item label="开始时间" name="searchKey">
+										<a-date-picker
+											v-model:value="searchFormState.searchKey"
+											show-time
+											format="YYYY-MM-DD HH:mm:ss"
+											value-format="YYYY-MM-DD HH:mm:ss"
+											style="width: 100%"
+										/>
+									</a-form-item>
+								</a-col>
+								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
+									<a-form-item label="结束时间" name="jssj">
+										<a-date-picker
+											v-model:value="searchFormState.jssj"
+											show-time
+											format="YYYY-MM-DD HH:mm:ss"
+											value-format="YYYY-MM-DD HH:mm:ss"
+											style="width: 100%"
+										/>
+									</a-form-item>
+								</a-col>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="searchFormState.type == 'qst'">
+									<a-form-item label="采集类型" name="cjlx">
+										<a-select v-model:value="searchFormState.cjlx" placeholder="请选择采集类型">
+											<a-select-option value="1">温度</a-select-option>
+											<a-select-option value="2">湿度</a-select-option>
+											<a-select-option value="3">氧气浓度</a-select-option>
+										</a-select>
+									</a-form-item>
+								</a-col>
+							</a-form>
+						</a-row>
+					</div>
+					<div class="table-search-buttons">
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+				</div>
+				<!-- 其他操作区域 -->
+				<div class="table-head-btn">
+					<div class="btn-right">
+						<a-button class="xn-mg08">
+							<template #icon><download-outlined /></template>导出
+						</a-button>
+						<a-button>
+							<template #icon><printer-outlined /></template>打印
+						</a-button>
+					</div>
+				</div>
+			</template>
+		</s-table>
+
+		<div class="item-right">
+			<!-- 单位 -->
+			<div class="unit">
+				<unitSearch ref="unitSearchRef" />
+			</div>
+			<!-- 监控点 -->
+			<div class="monitor">
+				<monitorSearch ref="monitorSearchRef" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import jobApi from '@/api/dev/jobApi'
+	import unitSearch from './unitSearch.vue'
+	import monitorSearch from './monitorSearch.vue'
+
+	const unitSearchRef = ref(null)
+	const monitorSearchRef = ref(null)
+
+	onMounted(() => {
+		unitSearchRef.value.onOpen() //获取单位数据
+		monitorSearchRef.value.onOpen() //获取监控点数据
+	})
+
+	// 搜索表单
+	const searchFormState = ref({})
+	const tableRef = ref()
+
+	const columns = [
+		{
+			title: '对象名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '监控点名称',
+			dataIndex: 'jkdname',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '日期',
+			dataIndex: 'rq',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '采集类型',
+			dataIndex: 'type',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '范围',
+			dataIndex: 'fw',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '最大值',
+			dataIndex: 'zdz',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '最小值',
+			dataIndex: 'zxz',
+			align: 'center',
+			ellipsis: true
+		},
+		{
+			title: '平均值',
+			dataIndex: 'pjz',
+			align: 'center',
+			ellipsis: true
+		}
+	]
+
+	const loadData = (parameter) => {
+		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// return res
+			const obj = {
+				current: 1,
+				pages: 1,
+				records: [
+					{
+						name: '-70度超低温冷冻储存箱',
+						jkdname: '监控点1',
+						rq: '2024-08-28 07:03:24',
+						type: '温度',
+						fw: '/',
+						zdz: '/',
+						zxz: '/',
+						pjz: '/'
+					},
+					{
+						name: '-71度超低温冷冻储存箱',
+						jkdname: '监控点2',
+						rq: '2024-08-28 09:21:51',
+						type: '湿度',
+						fw: '/',
+						zdz: '/',
+						zxz: '/',
+						pjz: '/'
+					},
+					{
+						name: '-72度超低温冷冻储存箱',
+						jkdname: '监控点2',
+						rq: '2024-08-28 11:06:20',
+						type: '温度',
+						fw: '/',
+						zdz: '/',
+						zxz: '/',
+						pjz: '/'
+					},
+					{
+						name: '-73度超低温冷冻储存箱',
+						jkdname: '监控点4',
+						rq: '2024-08-28 11:54:19',
+						type: '湿度',
+						fw: '/',
+						zdz: '/',
+						zxz: '/',
+						pjz: '/'
+					},
+					{
+						name: '-74度超低温冷冻储存箱',
+						jkdname: '监控点5',
+						rq: '2024-08-28 16:17:36',
+						type: '湿度',
+						fw: '/',
+						zdz: '/',
+						zxz: '/',
+						pjz: '/'
+					},
+					{
+						name: '-75度超低温冷冻储存箱',
+						jkdname: '监控点6',
+						rq: '2024-08-28 19:35:58',
+						type: '温度',
+						fw: '/',
+						zdz: '/',
+						zxz: '/',
+						pjz: '/'
+					}
+				],
+				size: 10,
+				total: 6
+			}
+			return obj
+		})
+	}
+
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		width: 100%;
+		display: flex;
+		padding: 15px 20px;
+
+		.table-wrapper {
+			width: 75%;
+		}
+
+		// 右边的搜索区域
+		.item-right {
+			width: 25%;
+			padding: 5px 10px;
+
+			.unit,
+			.monitor {
+				width: 100%;
+				height: 350px;
+				padding: 10px;
+				margin-bottom: 10px;
+				border-radius: 5px;
+				border: 1px solid #eaeaea;
+				overflow-y: auto;
+			}
+		}
+	}
+	// 树形结构的样式
+	:deep(.ant-tree-treenode) {
+		width: 100%;
+		margin-bottom: 5px;
+		border-radius: 5px;
+		padding: 5px 0 !important;
+		border: 1px solid #eaeaea;
+	}
+
+	// 分页居中显示
+	:deep(.ant-table-pagination-right) {
+		justify-content: center !important;
+	}
+</style>

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

@@ -92,24 +92,19 @@
 			title: '生成时间',
 			dataIndex: 'sctime',
 			align: 'center',
-			ellipsis: true,
-			sorter: true,
-			width: '10%'
+			ellipsis: true
 		},
 		{
 			title: '发送时间',
 			dataIndex: 'fstime',
 			align: 'center',
-			ellipsis: true,
-			sorter: true,
-			width: '10%'
+			ellipsis: true
 		},
 		{
 			title: '接收人',
 			dataIndex: 'jsr',
 			align: 'center',
-			ellipsis: true,
-			sorter: true
+			ellipsis: true
 		},
 		{
 			title: '对象编码',
@@ -121,8 +116,7 @@
 			title: '对象名称',
 			dataIndex: 'name',
 			align: 'center',
-			ellipsis: true,
-			sorter: true
+			ellipsis: true
 		},
 		{
 			title: '发送内容',
@@ -153,29 +147,25 @@
 			title: '微信',
 			dataIndex: 'wx',
 			align: 'center',
-			ellipsis: true,
-			sorter: true
+			ellipsis: true
 		},
 		{
 			title: '邮件',
 			dataIndex: 'yj',
 			align: 'center',
-			ellipsis: true,
-			sorter: true
+			ellipsis: true
 		},
 		{
 			title: '状态',
 			dataIndex: 'zt',
 			align: 'center',
-			ellipsis: true,
-			sorter: true
+			ellipsis: true
 		},
 		{
 			title: '故障原因',
 			dataIndex: 'gzyy',
 			align: 'center',
-			ellipsis: true,
-			sorter: true
+			ellipsis: true
 		}
 	]
 

snowy-admin-web/tsconfig.json

@@ -8,5 +8,5 @@
 			"@/*": ["./src/*"]
 		}
 	},
-	"include": ["src/**/*"]
+	"include": ["src/**/*", "src/views/motoring/analyse/statistics.vue"]
 }