From 597540f977cf7ba78d920e6aff708bc60c1ff9ee Mon Sep 17 00:00:00 2001
From: "978184212@qq.com" <978184212@qq.com>
Date: Mon, 24 Aug 2026 18:10:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=9F=E8=AE=A1=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packDetail/pages/analysis/index.vue | 504 ++++++++++++++++++----------
 1 file changed, 324 insertions(+), 180 deletions(-)

diff --git a/packDetail/pages/analysis/index.vue b/packDetail/pages/analysis/index.vue
index 663eee3..c688d8d 100644
--- a/packDetail/pages/analysis/index.vue
+++ b/packDetail/pages/analysis/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="container">
+	<view class="container" ref="pageContainer">
 		<!-- <image src="../../static/sjfx.png" mode="" class="bgimg"></image> -->
 		<view class="pj">
 			<view class="pjtitle">
@@ -28,8 +28,8 @@
 			</view>
 			<view class="sxbox wrwCov">
 				<view class="leftsxbox">
-					<picker @change="bindPickerChange" :value="index" :range="array">
-						<view class="uni-input">{{array[index]}}
+					<picker @change="bindPickerChange" :value="index" :range="stationNameList">
+						<view class="uni-input">{{stationNameList[index]}}
 							<image src="../../static/data_btn_sanjiao_xia.png"></image>
 						</view>
 					</picker>
@@ -49,15 +49,23 @@
 			    </label>
 			  </radio-group>
 			</view>
-			<view class="qstcontent">
+			<view class="qstcontent" id="chartContainer" ref="chartContainer">
+				<!-- 有数据时显示图表 -->
 				<qiun-data-charts 
+				  :key="chartKey"
+				  v-if="hasChartData && chartData.series && chartData.series.length > 0"
 				  type="line"
 				  :opts="opts"
 				  :chartData="chartData"
 				  :enableScroll="true"
 				  :ontouch="true"
 				  canvas2d
+				  @finished="onChartFinished"
 				/>
+				<!-- 无数据时显示占位 -->
+				<view v-else class="empty-chart">
+					<text class="empty-text">暂无数据</text>
+				</view>
 			</view>
 		</view>
 		<view class="znyj">
@@ -71,8 +79,8 @@
 			</view>
 			<view class="sxbox">
 				<view class="leftsxbox">
-					<picker @change="bindPickerChange1" :value="index1" :range="array1">
-						<view class="uni-input1">{{array1[index1]}}
+					<picker @change="bindPickerChange1" :value="index1" :range="deviceNameList">
+						<view class="uni-input1">{{deviceNameList[index1]}}
 							<image src="../../static/data_btn_sanjiao_xia.png"></image>
 						</view>
 					</picker>
@@ -127,11 +135,22 @@
 				scorllheight: 0,
 				zt: '',
 				date: new Date().getFullYear().toString(),
-				array: [],
-				index: 0,
-				index1: 0,
-				array1: [],
-				arrays: [],
+				
+				// ===== 趋势图相关数据 =====
+				stationNameList: [],        // 站点名称列表（用于趋势图选择器）
+				stationList: [],            // 站点完整列表 [{label, value: stationCode}]
+				index: 0,                   // 趋势图选中的站点索引
+				stationCode: '',            // 当前选中的站点编码（趋势图接口参数）
+				
+				// ===== 预警相关数据 =====
+				deviceNameList: ['全部监测设备'], // 设备名称列表（用于预警选择器）
+				deviceList: [{              // 设备完整列表 [{label, value: deployId}]
+					label: '全部监测设备',
+					value: ''
+				}],
+				index1: 0,                  // 预警选中的设备索引
+				deployId: '',               // 当前选中的设备部署ID（预警接口参数）
+				
 				list: [],
 				tabList: ['站点名称', '告警指标', '指标值', '告警时间'],
 				pjlist: [],
@@ -185,11 +204,6 @@
 				top: 0,
 				total: 0,
 				yearStr: null,
-				stationName1: '',
-				stationCode1: null,
-				stationCode: '',
-				arrays1: [],
-				zxtdata: [],
 				timList: [{
 						value: 'yearMonth',
 						name: '年'
@@ -208,7 +222,12 @@
 				datetwo: currentDate,
 				riqinumber: 'yearMonth',
 				startDate: '2000-01-01',
-				endDate: '2030-12-31'
+				endDate: '2030-12-31',
+				// 新增：加载状态和数据状态
+				isLoadingTrend: false,
+				hasChartData: false,
+				chartKey: 0,
+				isChartRendered: false,
 			}
 		},
 		onLoad() {
@@ -224,78 +243,75 @@
 			this.index = 0
 			this.index1 = 0
 			this.getpj()
-			this.importWyw()
-			this.getazsurvMulchRecord()
+			this.getStationList()      // 获取站点列表（趋势图用）
+			this.getDeviceList()       // 获取设备列表（预警用）
 			this.getyjList()
 		},
+		// 页面显示时重置滚动
+		onShow() {
+			this.$nextTick(() => {
+				this.resetAllScroll()
+			})
+		},
 		methods: {
 			// 格式化数字
 			cutMoneyFiter(val) {
 				if (!val && val !== 0) return 0
 				return val
 			},
-			// 获取站点列表
-			importWyw() {
-				this.array = []
-				this.arrays = []
-				this.arrays1 = [{
-					label: '全部监测设备',
-					value: ''
-				}]
+			
+			// ===== 获取站点列表（趋势图专用） =====
+			getStationList() {
+				this.stationNameList = []
+				this.stationList = []
 				this.$http.get('/applet/survStationInfo/list').then(res => {
-					for (var i = 0; i < res.data.data.length; i++) {
-						this.arrays.push({
-							label: res.data.data[i].stationName,
-							value: res.data.data[i].stationCode
+					const data = res.data.data || []
+					for (var i = 0; i < data.length; i++) {
+						this.stationList.push({
+							label: data[i].stationName,
+							value: data[i].stationCode  // 站点编码
 						})
-						this.arrays1.push({
-							label: res.data.data[i].stationName,
-							value: res.data.data[i].stationCode
-						})
-						this.array.push(res.data.data[i].stationName)
+						this.stationNameList.push(data[i].stationName)
 					}
-					// 站点数据加载完成后，设置默认站点并获取趋势数据
-					if (this.array.length > 0) {
-						this.stationCode = this.arrays[0]?.value || ''
-						// 延迟一点确保数据已渲染
-						setTimeout(() => {
+					// 站点数据加载完成后，获取趋势数据
+					if (this.stationList.length > 0) {
+						this.stationCode = this.stationList[0]?.value || ''
+						this.$nextTick(() => {
 							this.qushicov()
-						}, 300)
+						})
 					}
 				}).catch(err => {
 					console.log('获取站点列表失败', err)
 				})
 			},
-			// 获取监测站点设备数据
-			getazsurvMulchRecord() {
-				this.arrays = []
-				this.array1 = ['全部监测设备']
-				this.arrays1 = [{
+			
+			// ===== 获取设备列表（预警专用） =====
+			getDeviceList() {
+				this.deviceNameList = ['全部监测设备']
+				this.deviceList = [{
 					label: '全部监测设备',
 					value: ''
 				}]
 				this.$http.get('/applet/survDeviceDeploy/survDeviceList').then(res => {
-					for (var i = 0; i < res.data.data.length; i++) {
-						this.arrays.push({
-							label: res.data.data[i].fullDeviceName,
-							value: res.data.data[i].id
+					const data = res.data.data || []
+					for (var i = 0; i < data.length; i++) {
+						this.deviceList.push({
+							label: data[i].fullDeviceName,
+							value: data[i].id  // 设备部署ID
 						})
-						this.arrays1.push({
-							label: res.data.data[i].fullDeviceName,
-							value: res.data.data[i].id
-						})
-						this.array1.push(res.data.data[i].fullDeviceName)
+						this.deviceNameList.push(data[i].fullDeviceName)
 					}
 				}).catch(err => {
 					console.log('获取设备列表失败', err)
 				})
 			},
-			// 获取预警列表
+			
+			// ===== 获取预警列表 =====
 			getyjList() {
 				let params = {}
 				params.pageNo = this.pageNo
 				params.pageSize = this.pageSize
-				params.deployId = this.stationCode1
+				params.deployId = this.deployId  // 使用设备部署ID
 				params.yearStr = this.yearStr
 				uni.showLoading({
 					title: '加载中'
@@ -318,7 +334,6 @@
 							if (data[i].alertContent && data[i].alertContent.indexOf('监测数据名称:') != -1) {
 								data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
 							}
-							// 如果alertContent是字符串，转换为数组格式
 							if (typeof data[i].alertContent === 'string') {
 								data[i].alertContent = [{
 									name: '告警',
@@ -355,7 +370,8 @@
 					console.log('获取预警列表失败', err)
 				})
 			},
-			// 分页加载
+			
+			// ===== 分页加载 =====
 			lower() {
 				if (this.isLastpage) {
 					return
@@ -369,7 +385,7 @@
 				let params = {}
 				params.pageNo = this.pageNo
 				params.pageSize = this.pageSize
-				params.deployId = this.stationCode1
+				params.deployId = this.deployId  // 使用设备部署ID
 				params.yearStr = this.yearStr
 				this.$http.get('/applet/wxclient/alertRecord', {
 					params: params
@@ -414,7 +430,8 @@
 					console.log('加载更多预警失败', err)
 				})
 			},
-			// 获取评价
+			
+			// ===== 获取评价 =====
 			getpj() {
 				this.$http.post('/applet/wxclient/displayInfo?infoType=' + 'effect_assess').then(res => {
 					let data = res.data.data.effect_assess.detailList
@@ -428,16 +445,15 @@
 					console.log('获取评价失败', err)
 				})
 			},
-			// 选择年月日
+			
+			// ===== 选择年月日 =====
 			radioChange(e) {
 				this.riqinumber = e.detail.value
-				// 更新当前选中的索引
 				this.timList.forEach((item, index) => {
 					if (item.value === e.detail.value) {
 						this.current = index
 					}
 				})
-				// 根据选择的模式调整日期格式
 				let currentDate = new Date()
 				let year = currentDate.getFullYear()
 				let month = String(currentDate.getMonth() + 1).padStart(2, '0')
@@ -452,7 +468,8 @@
 				}
 				this.qushicov()
 			},
-			// 趋势时间选择
+			
+			// ===== 趋势时间选择 =====
 			bindDateqsChange(e) {
 				let selectedDate = e.detail.value
 				if (this.riqinumber === 'yearMonth') {
@@ -464,153 +481,246 @@
 				}
 				this.qushicov()
 			},
-			// 趋势接口
+			
+			// ===== 图表渲染完成回调 =====
+			onChartFinished() {
+				this.isChartRendered = true
+				this.$nextTick(() => {
+					this.resetAllScroll()
+				})
+			},
+			
+			// ===== 重置所有滚动位置 =====
+			resetAllScroll() {
+				// 1. 重置页面滚动
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 0
+				})
+				
+				// 2. H5 环境下直接操作 DOM
+				// #ifdef H5
+				setTimeout(() => {
+					// 重置页面滚动
+					window.scrollTo(0, 0)
+					
+					// 重置所有可滚动容器
+					const scrollableElements = document.querySelectorAll('.scroll-view, .qstcontent, .container, .qiun-data-charts')
+					scrollableElements.forEach(el => {
+						if (el.scrollTop !== undefined && el.scrollTop !== 0) {
+							el.scrollTop = 0
+						}
+						if (el.scrollLeft !== undefined && el.scrollLeft !== 0) {
+							el.scrollLeft = 0
+						}
+					})
+					
+					// 重置图表内部的 canvas 滚动
+					const chartContainer = document.querySelector('.qstcontent .qiun-data-charts')
+					if (chartContainer) {
+						chartContainer.scrollLeft = 0
+						chartContainer.scrollTop = 0
+						// 重置 canvas 父容器
+						const canvasWrapper = chartContainer.querySelector('.qiun-charts')
+						if (canvasWrapper) {
+							canvasWrapper.scrollLeft = 0
+							canvasWrapper.scrollTop = 0
+						}
+						// 重置 canvas 本身
+						const canvas = chartContainer.querySelector('canvas')
+						if (canvas && canvas.parentElement) {
+							canvas.parentElement.scrollLeft = 0
+							canvas.parentElement.scrollTop = 0
+						}
+					}
+				}, 150)
+				// #endif
+				
+				// 3. 小程序环境下使用 API
+				// #ifdef MP-WEIXIN
+				setTimeout(() => {
+					const query = uni.createSelectorQuery().in(this)
+					query.select('#chartContainer').boundingClientRect()
+					query.exec((res) => {
+						if (res && res[0]) {
+							// 尝试滚动到容器顶部
+							uni.pageScrollTo({
+								scrollTop: 0,
+								duration: 0
+							})
+						}
+					})
+				}, 150)
+				// #endif
+			},
+			
+			// ===== 趋势接口 =====
 			qushicov() {
-				// 如果没有站点编码，使用默认值或等待
+				if (this.isLoadingTrend) return
+				
+				// 确保有站点编码
 				if (!this.stationCode) {
-					console.log('站点编码为空，使用默认站点')
-					if (this.arrays.length > 0) {
-						this.stationCode = this.arrays[0].value
+					if (this.stationList.length > 0) {
+						this.stationCode = this.stationList[0].value
 					} else {
-						// 如果站点还没加载完成，延迟重试
+						console.log('等待站点数据加载...')
 						setTimeout(() => {
-							if (this.arrays.length > 0) {
-								this.stationCode = this.arrays[0].value
+							if (this.stationList.length > 0) {
+								this.stationCode = this.stationList[0].value
 								this.qushicov()
 							}
-						}, 500)
+						}, 1000)
 						return
 					}
 				}
-				
-				let data = {
-					summrayMode: this.riqinumber,
-					startTime: this.dateqs,
-					stationCode: this.stationCode,
+
+				if (!this.dateqs) {
+					this.dateqs = new Date().getFullYear().toString()
 				}
+
+				this.isLoadingTrend = true
+				let data = {
+					summrayMode: this.riqinumber || 'yearMonth',
+					startTime: this.dateqs,
+					stationCode: this.stationCode,  // 站点编码
+				}
+				
 				console.log('请求趋势数据参数:', data)
 				
-				this.$http.post('/applet/survDeviceDeploy/waterIntegrateStatistic', data).then(iem => {
-					let lynum = iem.data.data
-					console.log('趋势数据返回:', lynum)
-					
-					// 数据为空时显示空图表
-					if (!lynum || !lynum.tableHead || !lynum.tableData2 || lynum.tableHead.length === 0) {
-						console.log('趋势数据为空')
+				// 清空数据
+				this.chartData = {
+					categories: [],
+					series: []
+				}
+				this.hasChartData = false
+
+				this.$http.post('/applet/survDeviceDeploy/waterIntegrateStatistic', data)
+					.then(iem => {
+						let lynum = iem.data.data
+						console.log('趋势数据返回:', lynum)
+						
+						if (!lynum || !lynum.tableHead || !lynum.tableData2 || lynum.tableHead.length === 0) {
+							console.log('趋势数据为空')
+							this.chartData = {
+								categories: [],
+								series: []
+							}
+							this.hasChartData = false
+							this.chartKey = Date.now()
+							return
+						}
+
+						this.processChartData(lynum)
+						this.hasChartData = true
+						// 数据加载完成后更新 key，强制重新渲染图表
+						this.chartKey = Date.now()
+						
+						// 重置滚动
+						this.$nextTick(() => {
+							this.resetAllScroll()
+						})
+					})
+					.catch(err => {
+						console.log('趋势数据请求失败', err)
 						this.chartData = {
 							categories: [],
 							series: []
 						}
-						return
-					}
-					
-					setTimeout(() => {
-						let categories = []
-						let displayCategories = []
-						let series = []
-						let allValues = []
-						
-						// 处理X轴数据
-						categories = lynum.tableIndex || []
-						if (categories.length > 0) {
-							const first = categories[0]
-							const middle = categories[Math.floor(categories.length / 2)]
-							const last = categories[categories.length - 1]
-							
-							displayCategories = categories.map((item, index) => {
-								if (index === 0 || index === Math.floor(categories.length / 2) || index === categories.length - 1) {
-									return item
-								}
-								return ''
-							})
-						}
-						
-						// 处理series数据
-						lynum.tableHead.forEach((header, index) => {
-							const seriesData = (lynum.tableData2 || []).map(row => {
-								const value = row[index] === "0" ? 0 : parseFloat(row[index]) || 0
-								allValues.push(value)
-								return value
-							})
-							
-							series.push({
-								name: header.eleDesc || header.name || '指标',
-								data: seriesData
-							})
-						})
-						
-						// 动态计算Y轴范围
-						if (allValues.length > 0) {
-							const maxValue = Math.max(...allValues)
-							const minValue = Math.min(...allValues)
-							const padding = maxValue * 0.1 || 10
-							const yAxisMax = maxValue + padding
-							const yAxisMin = Math.max(0, minValue - padding)
-							
-							this.opts = {
-								...this.opts,
-								yAxis: {
-									gridType: "dash",
-									dashLength: 2,
-									data: [
-										{
-											min: yAxisMin,
-											max: yAxisMax || 100
-										}
-									]
-								}
-							}
-						}
-						
-						this.chartData = {
-							categories: displayCategories,
-							series: series
-						}
-						console.log('图表数据:', this.chartData)
-					}, 300)
-				}).catch(err => {
-					console.log('趋势数据请求失败', err)
-					this.chartData = {
-						categories: [],
-						series: []
-					}
-				})
+						this.hasChartData = false
+						this.chartKey = Date.now()
+					})
+					.finally(() => {
+						this.isLoadingTrend = false
+					})
 			},
-			// 折线图切换站点
+
+			// ===== 处理图表数据 =====
+			processChartData(lynum) {
+				let categories = []
+				let displayCategories = []
+				let series = []
+				let allValues = []
+				
+				categories = lynum.tableIndex || []
+				if (categories.length > 0) {
+					const middle = Math.floor(categories.length / 2)
+					displayCategories = categories.map((item, index) => {
+						if (index === 0 || index === middle || index === categories.length - 1) {
+							return item
+						}
+						return ''
+					})
+				}
+				
+				lynum.tableHead.forEach((header, index) => {
+					const seriesData = (lynum.tableData2 || []).map(row => {
+						const value = row[index] === "0" ? 0 : parseFloat(row[index]) || 0
+						allValues.push(value)
+						return value
+					})
+					
+					series.push({
+						name: header.eleDesc || header.name || '指标',
+						data: seriesData
+					})
+				})
+				
+				if (allValues.length > 0) {
+					const maxValue = Math.max(...allValues)
+					const minValue = Math.min(...allValues)
+					const padding = (maxValue - minValue) * 0.1 || 10
+					const yAxisMax = maxValue + padding
+					const yAxisMin = Math.max(0, minValue - padding)
+					
+					this.opts = {
+						...this.opts,
+						yAxis: {
+							gridType: "dash",
+							dashLength: 2,
+							data: [
+								{
+									min: yAxisMin,
+									max: yAxisMax || 100
+								}
+							]
+						}
+					}
+				}
+				
+				this.chartData = {
+					categories: displayCategories,
+					series: series
+				}
+				console.log('图表数据更新:', this.chartData)
+			},
+			
+			// ===== 折线图切换站点 =====
 			bindPickerChange: function(e) {
 				this.index = e.detail.value
-				let stationName = this.array[this.index]
-				for (var i = 0; i < this.arrays.length; i++) {
-					if (stationName == this.arrays[i].label) {
-						this.stationCode = this.arrays[i].value
-						break
-					}
+				if (this.stationList[this.index]) {
+					this.stationCode = this.stationList[this.index].value
+					this.qushicov()
 				}
-				this.qushicov()
 			},
-			// 预警切换站点
+			
+			// ===== 预警切换设备 =====
 			bindPickerChange1: function(e) {
 				this.index1 = e.detail.value
-				this.stationName1 = this.array1[this.index1]
-				for (var i = 0; i < this.arrays1.length; i++) {
-					if (this.stationName1 == this.arrays1[i].label) {
-						this.stationCode1 = this.arrays1[i].value
-						break
-					}
-				}
-				if (this.stationName1 == '全部监测设备') {
-					this.stationCode1 = null
+				if (this.deviceList[this.index1]) {
+					this.deployId = this.deviceList[this.index1].value  // 设备部署ID
 				}
 				this.pageNo = 1
 				this.getyjList()
 			},
-			// 预警切换日期
+			
+			// ===== 预警切换日期 =====
 			bindDateChange: function(e) {
 				this.yearStr = e.detail.value
 				this.date = e.detail.value
 				this.pageNo = 1
 				this.getyjList()
 			},
+			
 			getDate(type) {
 				const date = new Date();
 				let year = date.getFullYear();
@@ -735,6 +845,8 @@
 		height: 400rpx;
 		width: 98%;
 		padding-left: 20rpx;
+		position: relative;
+		overflow: hidden;
 	}
 
 	.uni-ec-canvas {
@@ -1065,4 +1177,36 @@
 		width: 44rpx;
 		height: 44rpx;
 	}
+
+	// 空状态样式
+	.empty-chart {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #f8f9fc;
+		border-radius: 16rpx;
+		
+		.empty-text {
+			font-size: 28rpx;
+			color: #999;
+			font-family: Source Han Sans SC;
+		}
+	}
+	
+	// 重置图表滚动
+	.qstcontent {
+		.qiun-data-charts {
+			overflow: hidden !important;
+			
+			.qiun-charts {
+				overflow: hidden !important;
+			}
+			
+			canvas {
+				overflow: hidden !important;
+			}
+		}
+	}
 </style>
\ No newline at end of file