.

api/iot/data_station.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询设备-设备单据摘要列表
+export function list(query) {
+	return request({
+		url: '/iotlog/data_station/list',
+		method: 'get',
+		params: query
+	})
+}

api/iot/data_valve.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询设备-设备单据摘要列表
+export function list(query) {
+    return request({
+        url: '/iotlog/data_valve/list',
+        method: 'get',
+        params: query
+    })
+}

components/custom-index-chart/custom-index-chart.vue

@@ -0,0 +1,347 @@
+<template>
+	<u-popup :show="open" mode="center" @close="close" closeable>
+		<view class="jz-info" style="width: 95vw;">
+			<view style="font-size: 16px;font-weight: 600;margin-bottom: 10px;">{{title}}</view>
+			<view style="width: 100%;">
+				<u-tabs :list="tabs" @click="tabsClick"></u-tabs>
+			</view>
+			<view style="height: 50vh;">
+				<canvas id="chartRef" style="zoom: 1 ;height: 100%;width: 100%;" canvas-id="mychart"
+					:canvas-type="canvasType" :data="dataList" :change:data="echarts.dataHandler" />
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	import plugin from "@/plugins"
+	import {
+		timestampFormat
+	} from '@/utils/common.js'
+	import * as station from "@/api/iot/data_station.js";
+	import * as valve from "@/api/iot/data_valve.js";
+
+	export default {
+		name: "ADC",
+		components: {},
+		props: {},
+		data() {
+			return {
+				title: "设备曲线",
+				open: false,
+				wo: null,
+				tabs: [{
+						name: '当天',
+						day: 0,
+					},
+					{
+						name: '近两天',
+						day: -1,
+					},
+					{
+						name: '近三天',
+						day: -2,
+					},
+				],
+				item: null,
+				type: null,
+				dataList: null,
+				canvasType: '2d',
+			}
+		},
+		created() {},
+		mounted() {},
+		methods: {
+			/**
+			 * 显示方法
+			 * @param type 1基站 2阀门
+			 * @param row
+			 * @param data 
+			 */
+			async show(row) {
+				this.open = true;
+				if (row?.deviceTypeId == 1) {
+					this.type = "station";
+					this.title = `设备曲线【${row.deviceCode}】`;
+				} else {
+					this.type = "valve";
+					this.title = `设备曲线【${row.showName}】`;
+				}
+				this.item = row;
+				this.getList(0);
+			},
+			tabsClick(e) {
+				this.getList(e.day);
+			},
+			getList(day) {
+				uni.showLoading({
+					mask: true,
+					icon: 'none'
+				})
+				if (this.type == "station") {
+					let queryParams = {
+						pageNum: 1,
+						pageSize: 9999,
+						deviceId: this.item.deviceId,
+						deviceCode: this.item.deviceCode,
+						reportType: "device_thing",
+						params: {
+							beginTime: this.getNowFormatDate(day),
+							endTime: this.getNowFormatDate(1),
+						}
+					}
+					station.list(queryParams).then(res => {
+						uni.hideLoading()
+						this.dataList = {
+							type: this.type,
+							data: res.rows || []
+						};
+					})
+				} else if (this.type == "valve") {
+					let queryParams = {
+						pageNum: 1,
+						pageSize: 9999,
+						landId: this.item.landId,
+						wogId: this.item.landGroupId,
+						woId: this.item.id,
+						reportType: "device_thing",
+						params: {
+							beginTime: this.getNowFormatDate(day),
+							endTime: this.getNowFormatDate(1),
+						}
+					}
+					valve.list(queryParams).then(res => {
+						uni.hideLoading()
+						this.dataList = {
+							type: this.type,
+							data: res.rows || []
+						};
+					})
+				}
+
+			},
+			close() {
+				this.dataList = null;
+				this.open = false;
+				this.$emit('close');
+			},
+			getNowFormatDate(_day = 0) {
+				let date = new Date();
+				date.setDate(date.getDate() + _day);
+
+				let year = date.getFullYear();
+				let month = date.getMonth() + 1;
+				if (month < 10) {
+					month = "0" + month;
+				}
+				let d = date.getDate();
+				if (d < 10) {
+					d = "0" + d;
+				}
+				return year + "-" + month + "-" + d + " 00:00:00";
+			},
+		}
+	}
+</script>
+<script module="echarts" lang="renderjs">
+	import * as echartsJS from 'echarts';
+
+	export default {
+		data() {
+			return {
+				_echarts: null,
+			}
+		},
+		created() {},
+		mounted() {},
+		methods: {
+			dataHandler(e) {
+				if (!e) {
+					this.dispose();
+					return;
+				}
+				this.setEchart(e);
+			},
+			setEchart(e) {
+				if (this._echarts) {
+					this._echarts.clear();
+				}
+				// 初始化 ECharts 实例
+				let _echarts = echartsJS.init(document.getElementById("chartRef"));
+				let xAxis = [];
+				let adcObj = {
+					battery: [],
+					temperature: [],
+					humidity: [],
+					motoAdc: [],
+					pressure1: [],
+					pressure2: [],
+					pressure3: [],
+					pressure4: [],
+				};
+				e.data.forEach(item => {
+					xAxis.push(item.reportTime);
+					adcObj.battery.push(item.battery || 0);
+					adcObj.temperature.push(item.temperature || 0);
+					if (e.type == "valve") {
+						adcObj.humidity.push(item.humidity || 0);
+						adcObj.motoAdc.push(item.motoAdc ? (item.motoAdc / 1000).toFixed(3) : 0);
+						if (item.pressure1 != null) {
+							adcObj.pressure1.push(item.pressure1);
+						}
+						if (item.pressure2 != null) {
+							adcObj.pressure2.push(item.pressure2);
+						}
+						if (item.pressure3 != null) {
+							adcObj.pressure3.push(item.pressure3);
+						}
+						if (item.pressure4 != null) {
+							adcObj.pressure4.push(item.pressure4);
+						}
+					}
+				});
+				let series = [];
+				let legendName = [];
+				for (const key in adcObj) {
+					if (adcObj[key].length) {
+						let name = "";
+						switch (key) {
+							case "battery":
+								name = "电量(%)";
+								break;
+							case "temperature":
+								name = "温度(℃)";
+								break;
+							case "humidity":
+								name = "湿度(%)";
+								break;
+							case "motoAdc":
+								name = "最大电流(A)";
+								break;
+							case "pressure1":
+								name = "压力1";
+								break;
+							case "pressure2":
+								name = "压力2";
+								break;
+							case "pressure3":
+								name = "压力3";
+								break;
+							case "pressure4":
+								name = "压力4";
+								break;
+						}
+						legendName.push(name);
+						series.push({
+							name: name,
+							type: "line",
+							stack: key,
+							data: adcObj[key],
+							smooth: true
+						});
+					}
+				}
+				let option = {
+					tooltip: {
+						trigger: "axis",
+						axisPointer: {
+							type: "shadow"
+						},
+						backgroundColor: "rgba(21, 45, 85, 0.6)",
+						textStyle: {
+							color: "#fff"
+						}
+					},
+					legend: {
+						data: legendName,
+						textStyle: {
+							color: "#333"
+						}
+					},
+					grid: {
+						left: "3%",
+						right: "4%",
+						bottom: "3%",
+						containLabel: true
+					},
+					xAxis: {
+						type: "category",
+						boundaryGap: false,
+						data: xAxis,
+						axisTick: {
+							show: true
+						},
+						axisLine: {
+							lineStyle: {
+								color: "red"
+							}
+						},
+						axisLabel: {
+							color: "#333"
+						}
+					},
+					yAxis: {
+						type: "value",
+						axisLabel: {
+							color: "#333",
+							fontSize: 14
+						},
+						splitLine: {
+							lineStyle: {
+								color: "#666",
+								type: "dashed"
+							}
+						},
+						axisLine: {
+							lineStyle: {
+								color: "red"
+							}
+						}
+					},
+					series
+				};
+
+				_echarts.setOption(option);
+				this._echarts = _echarts;
+			},
+			dispose() {
+				if (this._echarts) {
+					this._echarts.dispose();
+				}
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.jz-info {
+		padding: 15px;
+
+		view {
+			display: flex;
+
+			uni-text {
+				line-height: 48rpx;
+			}
+
+			uni-text:nth-child(odd) {
+				width: 100px;
+				margin-right: 10px;
+				color: #666;
+				background: #f3f3f3;
+			}
+
+			uni-text:nth-child(even) {
+				width: calc(100% - 100px);
+				color: #000;
+				word-wrap: break-word;
+				/* 支持旧版浏览器 */
+				overflow-wrap: break-word;
+				/* 推荐 */
+				white-space: normal;
+				/* 可选：如果需要连字符 */
+				hyphens: auto;
+			}
+
+		}
+	}
+</style>

package.json

@@ -15,6 +15,7 @@
 	"dependencies": {
 		"axios": "0.28.1",
 		"dayjs": "^1.11.13",
+		"echarts": "^5.6.0",
 		"jsencrypt": "^3.3.2",
 		"leaflet": "^1.9.4",
 		"mqtt": "^3.0.0"

pages/index.vue

@@ -129,7 +129,7 @@
 										</view>
 									</u-col>
 									<u-col span="4" style="align-items: center;">
-										<view class="fixed">
+										<view class="fixed" @click="openDialog('chart',item)">
 											<custom-signal :online="dc.dataObj[item.deviceCode]?.online"
 												:isp="dc.dataObj[item.deviceCode]?.isp"
 												:value="dc.dataObj[item.deviceCode]?.rssi" />
@@ -253,7 +253,8 @@
 												</u-row>
 											</view>
 											<view class="control" v-if="dc.dataObj[child.dataKey]">
-												<view class="icon iconfont icon-tubiao"></view>
+												<view class="icon iconfont icon-tubiao"
+													@click="openDialog('chart',child)" />
 												<u-row v-if="child.device.deviceTypeKey == 'valve'">
 													<u-col span="3" style="margin-top: -10px;">
 														<u-button :disabled="child.device.disable?.open1"
@@ -543,6 +544,8 @@
 	<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="" @confirm="swiperConfirm" />
 	<!-- ADC -->
 	<custom-index-adc ref="adcRef" />
+	<!-- ADC -->
+	<custom-index-chart ref="adcChartRef" />
 	<!-- 墒情 -->
 	<custom-index-mp ref="mpRef" />
 
@@ -683,9 +686,9 @@
 			// 打开弹窗
 			async openDialog(key, row = null) {
 				switch (key) {
-					// case "chart": //曲线
+					case "chart": //曲线
-					// 	this.$refs.adcChartRef.show(row);
+						this.$refs.adcChartRef.show(row);
-					// 	break;
+						break;
 						// case "wo":
 						// 	this.$refs.woRemarkRef.show(row);
 						// 	break;

plugins/modal.js

@@ -68,10 +68,14 @@ export default {
 	},
 	// 打开遮罩层
 	loading(text) {
-		uni.showLoading({
+		let obj = {};
+		if (text) {
+			obj = {
 				title: text,
 				icon: 'none'
-		})
+			}
+		}
+		uni.showLoading(obj)
 	},
 	// 关闭遮罩层
 	closeLoading() {