修改统计数据

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">
+					<picker @change="bindPickerChange" :value="index" :range="stationNameList">
-						<view class="uni-input">{{array[index]}}
+						<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">
+					<picker @change="bindPickerChange1" :value="index1" :range="deviceNameList">
-						<view class="uni-input1">{{array1[index1]}}
+						<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,
+				stationNameList: [],        // 站点名称列表（用于趋势图选择器）
-				array1: [],
+				stationList: [],            // 站点完整列表 [{label, value: stationCode}]
-				arrays: [],
+				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.getStationList()      // 获取站点列表（趋势图用）
-			this.getazsurvMulchRecord()
+			this.getDeviceList()       // 获取设备列表（预警用）
 			this.getyjList()
 		},
+		// 页面显示时重置滚动
+		onShow() {
+			this.$nextTick(() => {
+				this.resetAllScroll()
+			})
+		},
 		methods: {
 			// 格式化数字
 			cutMoneyFiter(val) {
 				if (!val && val !== 0) return 0
 				return val
 			},
-			// 获取站点列表
+			
-			importWyw() {
+			// ===== 获取站点列表（趋势图专用） =====
-				this.array = []
+			getStationList() {
-				this.arrays = []
+				this.stationNameList = []
-				this.arrays1 = [{
+				this.stationList = []
-					label: '全部监测设备',
-					value: ''
-				}]
 				this.$http.get('/applet/survStationInfo/list').then(res => {
-					for (var i = 0; i < res.data.data.length; i++) {
+					const data = res.data.data || []
-						this.arrays.push({
+					for (var i = 0; i < data.length; i++) {
-							label: res.data.data[i].stationName,
+						this.stationList.push({
-							value: res.data.data[i].stationCode
+							label: data[i].stationName,
+							value: data[i].stationCode  // 站点编码
 						})
-						this.arrays1.push({
+						this.stationNameList.push(data[i].stationName)
-							label: res.data.data[i].stationName,
-							value: res.data.data[i].stationCode
-						})
-						this.array.push(res.data.data[i].stationName)
 					}
-					// 站点数据加载完成后，设置默认站点并获取趋势数据
+					// 站点数据加载完成后，获取趋势数据
-					if (this.array.length > 0) {
+					if (this.stationList.length > 0) {
-						this.stationCode = this.arrays[0]?.value || ''
+						this.stationCode = this.stationList[0]?.value || ''
-						// 延迟一点确保数据已渲染
+						this.$nextTick(() => {
-						setTimeout(() => {
 							this.qushicov()
-						}, 300)
+						})
 					}
 				}).catch(err => {
 					console.log('获取站点列表失败', err)
 				})
 			},
-			// 获取监测站点设备数据
+			
-			getazsurvMulchRecord() {
+			// ===== 获取设备列表（预警专用） =====
-				this.arrays = []
+			getDeviceList() {
-				this.array1 = ['全部监测设备']
+				this.deviceNameList = ['全部监测设备']
-				this.arrays1 = [{
+				this.deviceList = [{
 					label: '全部监测设备',
 					value: ''
 				}]
 				this.$http.get('/applet/survDeviceDeploy/survDeviceList').then(res => {
-					for (var i = 0; i < res.data.data.length; i++) {
+					const data = res.data.data || []
-						this.arrays.push({
+					for (var i = 0; i < data.length; i++) {
-							label: res.data.data[i].fullDeviceName,
+						this.deviceList.push({
-							value: res.data.data[i].id
+							label: data[i].fullDeviceName,
+							value: data[i].id  // 设备部署ID
 						})
-						this.arrays1.push({
+						this.deviceNameList.push(data[i].fullDeviceName)
-							label: res.data.data[i].fullDeviceName,
-							value: res.data.data[i].id
-						})
-						this.array1.push(res.data.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,68 +481,177 @@
 				}
 				this.qushicov()
 			},
-			// 趋势接口
+			
-			qushicov() {
+			// ===== 图表渲染完成回调 =====
-				// 如果没有站点编码，使用默认值或等待
+			onChartFinished() {
-				if (!this.stationCode) {
+				this.isChartRendered = true
-					console.log('站点编码为空，使用默认站点')
+				this.$nextTick(() => {
-					if (this.arrays.length > 0) {
+					this.resetAllScroll()
-						this.stationCode = this.arrays[0].value
+				})
-					} else {
+			},
-						// 如果站点还没加载完成，延迟重试
+			
+			// ===== 重置所有滚动位置 =====
+			resetAllScroll() {
+				// 1. 重置页面滚动
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 0
+				})
+				
+				// 2. H5 环境下直接操作 DOM
+				// #ifdef H5
 				setTimeout(() => {
-							if (this.arrays.length > 0) {
+					// 重置页面滚动
-								this.stationCode = this.arrays[0].value
+					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) {
+					if (this.stationList.length > 0) {
+						this.stationCode = this.stationList[0].value
+					} else {
+						console.log('等待站点数据加载...')
+						setTimeout(() => {
+							if (this.stationList.length > 0) {
+								this.stationCode = this.stationList[0].value
 								this.qushicov()
 							}
-						}, 500)
+						}, 1000)
 						return
 					}
 				}
 
-				let data = {
+				if (!this.dateqs) {
-					summrayMode: this.riqinumber,
+					this.dateqs = new Date().getFullYear().toString()
-					startTime: this.dateqs,
-					stationCode: this.stationCode,
 				}
+
+				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 => {
+				// 清空数据
+				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
 						}
 
-					setTimeout(() => {
+						this.processChartData(lynum)
+						this.hasChartData = true
+						// 数据加载完成后更新 key，强制重新渲染图表
+						this.chartKey = Date.now()
+						
+						// 重置滚动
+						this.$nextTick(() => {
+							this.resetAllScroll()
+						})
+					})
+					.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 = []
 				
-						// 处理X轴数据
 				categories = lynum.tableIndex || []
 				if (categories.length > 0) {
-							const first = categories[0]
+					const middle = Math.floor(categories.length / 2)
-							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) {
+						if (index === 0 || index === middle || 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
@@ -539,11 +665,10 @@
 					})
 				})
 				
-						// 动态计算Y轴范围
 				if (allValues.length > 0) {
 					const maxValue = Math.max(...allValues)
 					const minValue = Math.min(...allValues)
-							const padding = maxValue * 0.1 || 10
+					const padding = (maxValue - minValue) * 0.1 || 10
 					const yAxisMax = maxValue + padding
 					const yAxisMin = Math.max(0, minValue - padding)
 					
@@ -566,51 +691,36 @@
 					categories: displayCategories,
 					series: series
 				}
-						console.log('图表数据:', this.chartData)
+				console.log('图表数据更新:', this.chartData)
-					}, 300)
-				}).catch(err => {
-					console.log('趋势数据请求失败', err)
-					this.chartData = {
-						categories: [],
-						series: []
-					}
-				})
 			},
-			// 折线图切换站点
+			
+			// ===== 折线图切换站点 =====
 			bindPickerChange: function(e) {
 				this.index = e.detail.value
-				let stationName = this.array[this.index]
+				if (this.stationList[this.index]) {
-				for (var i = 0; i < this.arrays.length; i++) {
+					this.stationCode = this.stationList[this.index].value
-					if (stationName == this.arrays[i].label) {
-						this.stationCode = this.arrays[i].value
-						break
-					}
-				}
 					this.qushicov()
+				}
 			},
-			// 预警切换站点
+			
+			// ===== 预警切换设备 =====
 			bindPickerChange1: function(e) {
 				this.index1 = e.detail.value
-				this.stationName1 = this.array1[this.index1]
+				if (this.deviceList[this.index1]) {
-				for (var i = 0; i < this.arrays1.length; i++) {
+					this.deployId = this.deviceList[this.index1].value  // 设备部署ID
-					if (this.stationName1 == this.arrays1[i].label) {
-						this.stationCode1 = this.arrays1[i].value
-						break
-					}
-				}
-				if (this.stationName1 == '全部监测设备') {
-					this.stationCode1 = null
 				}
 				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>