冰箱点位温湿度趋势图接口对接

snowy-admin-web/src/api/coldchain/alarmTrendApi.js

@@ -2,11 +2,23 @@ import { baseRequest } from '@/utils/request'
 
 const request = (url, ...arg) => baseRequest(`/coldchain/monitornotice/` + url, ...arg)
 
-/**
- * 首页近三天报警趋势Api接口
- **/
 export default {
+	// 首页近三天报警趋势Api接口
 	threeDays(data) {
 		return request('getNoticeByDate', data, 'get')
+	},
+
+	// 获取冰箱实时数据
+	realTimeData(data) {
+		return request('getRealtime', data, 'get')
+	},
+
+	// 获取冰箱点位监控数据趋势
+	pointDataTrend(data) {
+		return request('getTrend', data, 'get')
+	},
+
+	like(data) {
+		return request('/coldchain/api/app/device/view', data, 'post')
 	}
 }

snowy-admin-web/src/layout/components/userbar.vue

@@ -6,6 +6,13 @@
 			<fullscreen-outlined />
 		</div>
 		<!--		<dev-user-message />-->
+		<!-- 操作手册 -->
+		<div v-if="!isMobile" class="screen panel-item hidden-sm-and-down" @click="operateManual">
+			<a-tooltip>
+				<template #title>操作手册</template>
+				<SwitcherOutlined />
+			</a-tooltip>
+		</div>
 		<a-dropdown class="user panel-item">
 			<div class="user-avatar">
 				<a-avatar :src="userInfo ? userInfo.avatar : undefined" />
@@ -42,6 +49,7 @@
 				</a-menu>
 			</template>
 		</a-dropdown> -->
+
 		<div v-if="setDrawer === 'true'" class="setting panel-item" @click="openSetting">
 			<layout-outlined />
 		</div>
@@ -161,6 +169,11 @@
 			screenFull.toggle(element)
 		}
 	}
+
+	// 操作手册
+	const operateManual = () => {
+		console.log('操作手册')
+	}
 </script>
 
 <style lang="less" scoped>

snowy-admin-web/src/views/auth/login/login.vue

@@ -362,7 +362,7 @@
 				text-align: center;
 				padding: 4px;
 				box-sizing: border-box;
-				margin: 80px auto 20px;
+				margin: 40px auto 20px;
 				border: 1px solid #a0a0a0;
 				.code {
 					width: 100px;

snowy-admin-web/src/views/biz/monitor/point/index.vue

@@ -195,7 +195,8 @@
 		router.push({
 			path: url,
 			query: {
-				id: record.id
+				id: record.monitorDeviceId,
+				roads: record.sensorRoute
 			}
 		})
 	}

snowy-admin-web/src/views/biz/monitor/trendchart/index.vue

@@ -7,60 +7,78 @@
 		</a-page-header>
 
 		<div class="table_head">
-			<div class="head_name">{{ data.name }}</div>
+			<div class="head_name">{{ data.regionName }}</div>
 			<div class="head_row">
 				<div class="label">
-					<img src="/src/assets/images/monitor/01.png" />
+					<img
+						src="/src/assets/images/monitor/01.png"
+						v-if="data.sensorType == 'W' || data.sensorType == 'WS' || data.sensorType == 'WSC'"
+					/>
+					<img src="/src/assets/images/monitor/01-1.png" v-else />
 				</div>
 				<div class="value">
 					<div>温度</div>
-					<div class="num">{{ data.temperature + '℃' }}</div>
+					<div class="num" v-if="data.temperature">{{ data.temperature + '℃' }}</div>
 				</div>
 			</div>
 			<div class="head_row">
 				<div class="label">
-					<img src="/src/assets/images/monitor/02.png" />
+					<img src="/src/assets/images/monitor/02.png" v-if="data.sensorType == 'WS' || data.sensorType == 'WSC'" />
+					<img src="/src/assets/images/monitor/02-2.png" v-else />
 				</div>
 				<div class="value">
 					<div>温度</div>
-					<div class="num">{{ data.humidity + '%' }}</div>
+					<div class="num" v-if="data.humidity">{{ data.humidity + '%' }}</div>
 				</div>
 			</div>
 			<div class="head_row">
 				<div class="label">
-					<img src="/src/assets/images/monitor/03.png" />
+					<img src="/src/assets/images/monitor/03.png" v-if="data.sensorType == 'WSC'" />
+					<img src="/src/assets/images/monitor/03-3.png" v-else />
 				</div>
 				<div class="value">
 					<div>二氧化碳</div>
-					<div class="num">{{ data.CO2 + '%' }}</div>
+					<div class="num" v-if="data.CO2">{{ data.CO2 + '%' }}</div>
 				</div>
 			</div>
 
 			<div class="head_time">
-				{{ '更新时间 ：' + data.time }}
+				{{ '更新时间 ：' + data.updateTime }}
 			</div>
 		</div>
 
 		<div class="table_search">
 			<div class="search_left">
+				<span>查询范围：</span>
 				<a-range-picker
 					v-model:value="timeValue"
-					style="width: 400px"
-					show-time
-					format="YYYY-MM-DD HH:mm:ss"
-					value-format="YYYY-MM-DD HH:mm:ss"
+					style="width: 300px"
+					format="YYYY-MM-DD"
+					value-format="YYYY-MM-DD"
 					:disabled-date="disabledDate"
+					:allowClear="false"
+					@change="getEchartData"
 				/>
 
 				<a-radio-group v-model:value="periodValue" button-style="solid">
 					<a-radio-button value="week">最近一周</a-radio-button>
-					<a-radio-button value="halfaMonth">最近半个月</a-radio-button>
-					<a-radio-button value="oneMonth">最近一个月</a-radio-button>
-					<a-radio-button value="threeMonths">最近三个月</a-radio-button>
+					<a-radio-button value="halfaMonth">最近半月</a-radio-button>
+					<a-radio-button value="oneMonth">最近一月</a-radio-button>
+					<a-radio-button value="threeMonths">最近三月</a-radio-button>
 				</a-radio-group>
 			</div>
 
 			<div class="search_right">
+				<span>数据维度：</span>
+				<a-radio-group v-model:value="radioValue" button-style="solid">
+					<a-radio-button value="null">系统默认</a-radio-button>
+					<a-radio-button value="1m">分钟</a-radio-button>
+					<a-radio-button value="1h">小时</a-radio-button>
+					<a-radio-button value="12h">半天</a-radio-button>
+					<a-radio-button value="1d">天</a-radio-button>
+					<a-radio-button value="1w">自然周</a-radio-button>
+					<a-radio-button value="1mo">月度</a-radio-button>
+				</a-radio-group>
 				<a-button class="xn-mg08">
 					<template #icon><download-outlined /></template>导出
 				</a-button>
@@ -77,35 +95,40 @@
 </template>
 <script setup>
 	import * as echarts from 'echarts'
+	import alarmTrendApi from '@/api/coldchain/alarmTrendApi.js'
 	import { useRoute } from 'vue-router'
 	import router from '@/router'
 	import dayjs from 'dayjs' // 用于处理日期和时间
 	const Route = useRoute()
-	const queryId = ref() //监控对象的id
+	const queryValue = ref({}) //监控对象的参数
+	const radioValue = ref('null') //时间段
 
-	const data = ref({
-		name: '冰箱001-上层',
-		temperature: 26,
-		humidity: 80,
-		CO2: 50,
-		time: ' 2024-12-09 11:46'
-	})
+	const data = ref({})
 	const periodValue = ref('week')
 	const timeValue = ref([])
 
 	onBeforeMount(() => {
 		calculateDateRange()
 		if (Route.query.id) {
-			queryId.value = Route.query.id
+			queryValue.value = { ...Route.query }
 		}
 	})
 	onMounted(() => {
-		init()
+		if (queryValue.value.id) {
+			getData()
+			getEchartData()
+		}
 	})
 
-	// 监听 periodValue 变化，重新计算日期范围
+	// 监听 查询范围 变化，重新计算日期范围
 	watch(periodValue, () => {
 		calculateDateRange()
+		getEchartData()
+	})
+
+	// 监听 数据维度 变化，重新计算日期范围
+	watch(radioValue, () => {
+		getEchartData()
 	})
 
 	// 计算时间范围
@@ -119,11 +142,11 @@
 		switch (periodValue.value) {
 			case 'week':
 				startDate = new Date(now)
-				startDate.setDate(now.getDate() - 7) // 最近一周
+				startDate.setDate(now.getDate() - 6) // 最近一周
 				break
 			case 'halfaMonth':
 				startDate = new Date(now)
-				startDate.setDate(now.getDate() - 15) // 最近半个月
+				startDate.setDate(now.getDate() - 14) // 最近半个月
 				break
 			case 'oneMonth':
 				startDate = new Date(now)
@@ -150,23 +173,81 @@
 		return current.isBefore(ninetyDaysAgo, 'day') || current.isAfter(today, 'day')
 	}
 
-	// 格式化日期为 "YYYY-MM-DD HH:mm:ss"
+	// 格式化日期为 "YYYY-MM-DD"
 	const formatDate = (date) => {
 		const year = date.getFullYear()
 		const month = String(date.getMonth() + 1).padStart(2, '0')
 		const day = String(date.getDate()).padStart(2, '0')
-		const hours = String(date.getHours()).padStart(2, '0')
-		const minutes = String(date.getMinutes()).padStart(2, '0')
-		const seconds = String(date.getSeconds()).padStart(2, '0')
+		return `${year}-${month}-${day}`
+	}
 
-		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+	// 获取基础信息
+	const getData = () => {
+		const parameter = {
+			deviceId: queryValue.value.id,
+			roads: queryValue.value.roads
+		}
+		alarmTrendApi.realTimeData(parameter).then((res) => {
+			data.value = res
+		})
 	}
 
-	const init = () => {
-		getEcharts1()
-		getEcharts2()
-		getEcharts3()
+	// 获取折线图数据
+	const getEchartData = () => {
+		const parameter = {
+			deviceId: queryValue.value.id,
+			roads: queryValue.value.roads,
+			startTime: timeValue.value[0],
+			endTime: timeValue.value[1],
+			aggregationWindow: radioValue.value === 'null' ? null : radioValue.value
+		}
+		alarmTrendApi
+			.pointDataTrend(parameter)
+			.then((res) => {
+				if (res) {
+					// 温度
+					if (
+						res.sensorEchartDataResult.temperature &&
+						res.sensorEchartDataResult.temperature.x &&
+						res.sensorEchartDataResult.temperature.x.length
+					) {
+						getEcharts1({
+							up: res.temperatureUp,
+							down: res.temperatureDown,
+							data: res.sensorEchartDataResult.temperature
+						})
+					}
+
+					// 湿度
+					if (
+						res.sensorEchartDataResult.humidity &&
+						res.sensorEchartDataResult.humidity.x &&
+						res.sensorEchartDataResult.humidity.x.length
+					) {
+						getEcharts2({
+							up: res.humidityUp,
+							down: res.humidityDown,
+							data: res.sensorEchartDataResult.humidity
+						})
+					}
+
+					// co2
+					if (
+						res.sensorEchartDataResult.co2 &&
+						res.sensorEchartDataResult.co2.x &&
+						res.sensorEchartDataResult.co2.x.length
+					) {
+						getEcharts3({
+							up: res.co2Up,
+							down: res.co2Down,
+							data: res.sensorEchartDataResult.co2
+						})
+					}
+				}
+			})
+			.finally(() => {})
 	}
+
 	// 温度
 	const getEcharts1 = (val) => {
 		let Echarts = echarts.init(document.getElementById('temperature'))
@@ -192,31 +273,33 @@
 				top: '15%',
 				left: '5%',
 				right: '7%',
-				bottom: '10%'
+				bottom: '25%'
 			},
 			xAxis: {
 				type: 'category',
-				data: [
-					'2024-12-02',
-					'2024-12-03',
-					'2024-12-04',
-					'2024-12-05',
-					'2024-12-06',
-					'2024-12-07',
-					'2024-12-08',
-					'2024-12-09'
-				],
+				data: val.data.x,
 				axisLine: {
 					show: true,
 					lineStyle: {
 						color: '#7e848e'
 					}
 				},
+				axisLabel: {
+					color: '#A1A7B3',
+					interval: 0,
+					rotate: '10'
+				},
 				axisTick: {
 					show: false
 				},
 				splitLine: {
 					show: true
+				},
+				name: '日期',
+				nameTextStyle: {
+					color: '#484848',
+					fontSize: 14,
+					fontWeight: 'bold'
 				}
 			},
 			yAxis: {
@@ -229,8 +312,6 @@
 					show: true
 				},
 				name: '温度',
-				nameLocation: 'end',
-				nameGap: 15,
 				nameTextStyle: {
 					color: '#484848',
 					fontSize: 14,
@@ -239,10 +320,39 @@
 					padding: [0, 0, 0, -50]
 				}
 			},
+			dataZoom: [
+				{
+					show: true,
+					height: 10,
+					xAxisIndex: [0],
+					left: '10%',
+					right: '10%',
+					bottom: '6%',
+					start: 70,
+					end: 100,
+					handleIcon:
+						'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+					handleSize: '110%',
+					handleStyle: {
+						color: '#d3dee5'
+					},
+					textStyle: {
+						color: '#000'
+					},
+					borderColor: '#90979c'
+				},
+				{
+					type: 'inside',
+					show: true,
+					height: 15,
+					start: 1,
+					end: 35
+				}
+			],
 			series: [
 				{
 					name: '温度',
-					data: [16, 12, 36, 23, 20, 18, 20, 22],
+					data: val.data.y,
 					type: 'line',
 					symbol: 'circle',
 					lineStyle: {
@@ -276,7 +386,7 @@
 						data: [
 							{
 								name: '温度上限',
-								yAxis: 40,
+								yAxis: val.up,
 								lineStyle: {
 									color: '#f3956e',
 									width: 2,
@@ -291,7 +401,7 @@
 							},
 							{
 								name: '温度下限',
-								yAxis: 5,
+								yAxis: val.down,
 								lineStyle: {
 									color: '#41b982',
 									width: 2,
@@ -342,20 +452,11 @@
 				top: '15%',
 				left: '5%',
 				right: '7%',
-				bottom: '10%'
+				bottom: '25%'
 			},
 			xAxis: {
 				type: 'category',
-				data: [
-					'2024-12-02',
-					'2024-12-03',
-					'2024-12-04',
-					'2024-12-05',
-					'2024-12-06',
-					'2024-12-07',
-					'2024-12-08',
-					'2024-12-09'
-				],
+				data: val.data.x,
 				axisLine: {
 					show: true,
 					lineStyle: {
@@ -367,6 +468,17 @@
 				},
 				splitLine: {
 					show: true
+				},
+				axisLabel: {
+					color: '#A1A7B3',
+					interval: 0,
+					rotate: '10'
+				},
+				name: '日期',
+				nameTextStyle: {
+					color: '#484848',
+					fontSize: 14,
+					fontWeight: 'bold'
 				}
 			},
 			yAxis: {
@@ -389,10 +501,39 @@
 					padding: [0, 0, 0, -50]
 				}
 			},
+			dataZoom: [
+				{
+					show: true,
+					height: 10,
+					xAxisIndex: [0],
+					left: '10%',
+					right: '10%',
+					bottom: '6%',
+					start: 70,
+					end: 100,
+					handleIcon:
+						'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+					handleSize: '110%',
+					handleStyle: {
+						color: '#d3dee5'
+					},
+					textStyle: {
+						color: '#000'
+					},
+					borderColor: '#90979c'
+				},
+				{
+					type: 'inside',
+					show: true,
+					height: 15,
+					start: 1,
+					end: 35
+				}
+			],
 			series: [
 				{
 					name: '湿度',
-					data: [16, 12, 36, 23, 20, 18, 20, 22],
+					data: val.data.y,
 					type: 'line',
 					symbol: 'circle',
 					lineStyle: {
@@ -426,7 +567,7 @@
 						data: [
 							{
 								name: '湿度上限',
-								yAxis: 40,
+								yAxis: val.up,
 								lineStyle: {
 									color: '#f3956e',
 									width: 2,
@@ -441,7 +582,7 @@
 							},
 							{
 								name: '湿度下限',
-								yAxis: 5,
+								yAxis: val.down,
 								lineStyle: {
 									color: '#41b982',
 									width: 2,
@@ -491,31 +632,33 @@
 				top: '15%',
 				left: '5%',
 				right: '7%',
-				bottom: '10%'
+				bottom: '25%'
 			},
 			xAxis: {
 				type: 'category',
-				data: [
-					'2024-12-02',
-					'2024-12-03',
-					'2024-12-04',
-					'2024-12-05',
-					'2024-12-06',
-					'2024-12-07',
-					'2024-12-08',
-					'2024-12-09'
-				],
+				data: val.data.x,
 				axisLine: {
 					show: true,
 					lineStyle: {
 						color: '#7e848e'
 					}
 				},
+				axisLabel: {
+					color: '#A1A7B3',
+					interval: 0,
+					rotate: '10'
+				},
 				axisTick: {
 					show: false
 				},
 				splitLine: {
 					show: true
+				},
+				name: '日期',
+				nameTextStyle: {
+					color: '#484848',
+					fontSize: 14,
+					fontWeight: 'bold'
 				}
 			},
 			yAxis: {
@@ -538,10 +681,39 @@
 					padding: [0, 0, 0, -50]
 				}
 			},
+			dataZoom: [
+				{
+					show: true,
+					height: 10,
+					xAxisIndex: [0],
+					left: '10%',
+					right: '10%',
+					bottom: '6%',
+					start: 70,
+					end: 100,
+					handleIcon:
+						'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+					handleSize: '110%',
+					handleStyle: {
+						color: '#d3dee5'
+					},
+					textStyle: {
+						color: '#000'
+					},
+					borderColor: '#90979c'
+				},
+				{
+					type: 'inside',
+					show: true,
+					height: 15,
+					start: 1,
+					end: 35
+				}
+			],
 			series: [
 				{
 					name: '二氧化碳',
-					data: [16, 12, 36, 23, 20, 18, 20, 22],
+					data: val.data.y,
 					type: 'line',
 					symbol: 'circle',
 					lineStyle: {
@@ -575,7 +747,7 @@
 						data: [
 							{
 								name: '二氧化碳上限',
-								yAxis: 40,
+								yAxis: val.up,
 								lineStyle: {
 									color: '#f3956e',
 									width: 2,
@@ -590,7 +762,7 @@
 							},
 							{
 								name: '二氧化碳下限',
-								yAxis: 5,
+								yAxis: val.down,
 								lineStyle: {
 									color: '#41b982',
 									width: 2,
@@ -685,8 +857,10 @@
 			align-items: center;
 			justify-content: space-between;
 
-			:deep(.ant-radio-button-wrapper) {
-				margin: 0 10px;
+			.search_left {
+				:deep(.ant-radio-button-wrapper) {
+					margin: 0 10px;
+				}
 			}
 		}