Administrator
/
FenXiNspUniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改统计数据

This commit is contained in:
978184212@qq.com 2026-08-24 18:10:09 +08:00
parent feac3406f9
commit 597540f977
1 changed files with 324 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

504
packDetail/pages/analysis/index.vue
View File

@ -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>