From eb7c194ea9a4bdc28db1f9788a36b205a164ad72 Mon Sep 17 00:00:00 2001 From: "978184212@qq.com" <978184212@qq.com> Date: Thu, 23 Jul 2026 19:25:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=86=E8=8A=82=E5=86=85?= =?UTF-8?q?=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packDetail/pages/analysis/index.vue | 558 +++++++++++----------------- packDetail/pages/sjdyj/index.vue | 17 +- pages/index/indexData.js | 2 +- 3 files changed, 217 insertions(+), 360 deletions(-) diff --git a/packDetail/pages/analysis/index.vue b/packDetail/pages/analysis/index.vue index c0433ea..663eee3 100644 --- a/packDetail/pages/analysis/index.vue +++ b/packDetail/pages/analysis/index.vue @@ -40,11 +40,11 @@ - + - @@ -126,16 +126,19 @@ height: 0, scorllheight: 0, zt: '', - date: new Date().getFullYear(), + date: new Date().getFullYear().toString(), array: [], - index: '', - index1: '', + index: 0, + index1: 0, array1: [], arrays: [], list: [], tabList: ['站点名称', '告警指标', '指标值', '告警时间'], pjlist: [], - chartData: {}, + chartData: { + categories: [], + series: [] + }, opts: { color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], padding: [15,10,0,15], @@ -144,9 +147,8 @@ enableScroll: false, legend: {}, xAxis: { - disabled: false, // 启用X轴 - // 不设置itemCount，因为我们自定义显示的数据 - gridType: 'dash', // 网格类型 + disabled: false, + gridType: 'dash', dashLength: 2, }, yAxis: { @@ -176,8 +178,8 @@ allNum: '', isLastpage: '', intervalId: null, - loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式 - isLoadMore: false, //是否加载中 + loadStatus: 'more', + isLoadMore: false, show: false, show1: false, top: 0, @@ -190,8 +192,7 @@ zxtdata: [], timList: [{ value: 'yearMonth', - name: '年', - checked: 'true' + name: '年' }, { value: 'monthDays', @@ -203,9 +204,11 @@ }, ], current: 0, - dateqs:new Date().getFullYear(), - datetwo:currentDate, - riqinumber:'yearMonth', + dateqs: new Date().getFullYear().toString(), + datetwo: currentDate, + riqinumber: 'yearMonth', + startDate: '2000-01-01', + endDate: '2030-12-31' } }, onLoad() { @@ -214,7 +217,7 @@ var pxToRpxScale = 750 / res.windowWidth var ktxStatusHeight = res.statusBarHeight * pxToRpxScale var navigationHeight = 44 * pxToRpxScale - this.height = res.windowHeight * pxToRpxScale //将px 转换rpx + this.height = res.windowHeight * pxToRpxScale this.scorllheight = this.height } }); @@ -224,10 +227,14 @@ this.importWyw() this.getazsurvMulchRecord() this.getyjList() - // this.gettj() - this.qushicov() }, methods: { + // 格式化数字 + cutMoneyFiter(val) { + if (!val && val !== 0) return 0 + return val + }, + // 获取站点列表 importWyw() { this.array = [] this.arrays = [] @@ -247,12 +254,22 @@ }) this.array.push(res.data.data[i].stationName) } + // 站点数据加载完成后，设置默认站点并获取趋势数据 + if (this.array.length > 0) { + this.stationCode = this.arrays[0]?.value || '' + // 延迟一点确保数据已渲染 + setTimeout(() => { + this.qushicov() + }, 300) + } + }).catch(err => { + console.log('获取站点列表失败', err) }) }, - // 获取监测站点数据 + // 获取监测站点设备数据 getazsurvMulchRecord() { this.arrays = [] - this.array1 = ['全部监测设备', ] + this.array1 = ['全部监测设备'] this.arrays1 = [{ label: '全部监测设备', value: '' @@ -269,6 +286,8 @@ }) this.array1.push(res.data.data[i].fullDeviceName) } + }).catch(err => { + console.log('获取设备列表失败', err) }) }, // 获取预警列表 @@ -295,11 +314,18 @@ data[i].shi = data[i].times[3]; data[i].fen = data[i].times[4]; data[i].miao = data[i].times[5]; - data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i] - .fen - if (data[i].alertContent.indexOf('监测数据名称:') != -1) { + data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i].fen + 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: '告警', + val: data[i].alertContent, + unit: '' + }] + } } this.list = this.list.concat(data) this.total = res.data.data.total @@ -315,7 +341,6 @@ this.loadStatus = 'nomore' } else { this.isLastpage = false; - // this.isLoadMore=true this.loadStatus = 'more' } } else { @@ -325,11 +350,13 @@ } uni.hideLoading(); this.isRefresher = false + }).catch(err => { + uni.hideLoading(); + console.log('获取预警列表失败', err) }) }, // 分页加载 lower() { - // 最后一页了，取消下拉功能 if (this.isLastpage) { return } @@ -357,11 +384,17 @@ data[i].shi = data[i].times[3]; data[i].fen = data[i].times[4]; data[i].miao = data[i].times[5]; - data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i] - .fen - if (data[i].alertContent.indexOf('监测数据名称:') != -1) { + data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i].fen + if (data[i].alertContent && data[i].alertContent.indexOf('监测数据名称:') != -1) { data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '') } + if (typeof data[i].alertContent === 'string') { + data[i].alertContent = [{ + name: '告警', + val: data[i].alertContent, + unit: '' + }] + } } this.list = this.list.concat(data) if (res.data.data.total != 0) { @@ -370,7 +403,6 @@ this.loadStatus = 'nomore' } else { this.isLastpage = false; - // this.isLoadMore=true this.loadStatus = 'more' } } else { @@ -378,6 +410,8 @@ this.loadStatus = 'nomore' } } + }).catch(err => { + console.log('加载更多预警失败', err) }) }, // 获取评价 @@ -390,335 +424,178 @@ this.pjnr = data[i].detailValue } } + }).catch(err => { + console.log('获取评价失败', err) }) }, // 选择年月日 - radioChange(e){ + radioChange(e) { this.riqinumber = e.detail.value - this.bindDateqsChange(this.datetwo,'twotime') - }, - // 趋势时间 - bindDateqsChange(e,tiem) { - if (tiem=='twotime') { - let selectedDate = e - if (this.riqinumber === 'monthDays') { - this.dateqs = selectedDate.slice(0, 7); // YYYY-MM - } else if (this.riqinumber === 'yearMonth') { - this.dateqs = selectedDate.slice(0, 4); // YYYY - } else { - this.dateqs = selectedDate; // YYYY-MM-DD + // 更新当前选中的索引 + 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') + let day = String(currentDate.getDate()).padStart(2, '0') + + if (this.riqinumber === 'yearMonth') { + this.dateqs = String(year) + } else if (this.riqinumber === 'monthDays') { + this.dateqs = year + '-' + month } else { - let selectedDate = e.detail.value; - if (this.riqinumber === 'monthDays') { - this.dateqs = selectedDate.slice(0, 7); // YYYY-MM - } else if (this.riqinumber === 'yearMonth') { - this.dateqs = selectedDate.slice(0, 4); // YYYY - } else { - this.dateqs = selectedDate; // YYYY-MM-DD - } + this.dateqs = year + '-' + month + '-' + day } - - this.qushicov(); + this.qushicov() + }, + // 趋势时间选择 + bindDateqsChange(e) { + let selectedDate = e.detail.value + if (this.riqinumber === 'yearMonth') { + this.dateqs = selectedDate.slice(0, 4) + } else if (this.riqinumber === 'monthDays') { + this.dateqs = selectedDate.slice(0, 7) + } else { + this.dateqs = selectedDate + } + this.qushicov() }, // 趋势接口 qushicov() { - let data = { - summrayMode: this.riqinumber, - startTime: this.dateqs, - stationCode:this.stationCode, - } - this.$http.post('/applet/survDeviceDeploy/waterIntegrateStatistic', data).then(iem => { - let lynum = iem.data.data - - setTimeout(() => { - let categories = []; - let displayCategories = []; // 用于显示的X轴数据 - let series = []; - let allValues = []; // 收集所有数值 - - if (lynum.tableHead && lynum.tableHead.length > 0) { - categories = lynum.tableIndex; - - // 计算要显示的X轴数据：第一个、中间、最后一个 - if (categories.length > 0) { - const first = categories[0]; - const middle = categories[Math.floor(categories.length / 2)]; - const last = categories[categories.length - 3]; - - // 创建显示用的categories数组，只在这三个位置有值，其他为空字符串 - displayCategories = categories.map((item, index) => { - if (index === 0 || index === Math.floor(categories.length / 2) || index === categories.length - 2) { - 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, - data: seriesData - }); - }); - - // 动态计算Y轴范围 - 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); // 确保最小值不小于0 - - // 更新opts中的yAxis配置 - this.opts = { - ...this.opts, - yAxis: { - gridType: "dash", - dashLength: 2, - data: [ - { - min: yAxisMin, - max: yAxisMax - } - ] - } - }; - } - - let res = { - categories: displayCategories, // 使用处理后的显示数据 - series: series - }; - this.chartData = JSON.parse(JSON.stringify(res)); - }, 500); - }) - }, - // 获取折线图 - gettj() { + // 如果没有站点编码，使用默认值或等待 if (!this.stationCode) { - this.stationCode = 'S_1' + console.log('站点编码为空，使用默认站点') + if (this.arrays.length > 0) { + this.stationCode = this.arrays[0].value + } else { + // 如果站点还没加载完成，延迟重试 + setTimeout(() => { + if (this.arrays.length > 0) { + this.stationCode = this.arrays[0].value + this.qushicov() + } + }, 500) + return + } } - this.$http.post('/applet/wxclient/getPplutionSummry?stationCode=' + this.stationCode).then(res => { - this.zxtdata = res.data.data[0] - this.ec.option.legend.data = ['总磷', '总氮', '硝态氮'] - this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF'] - this.ec.option.series = [{ - name: '总磷', - type: 'line', - stack: 'Total1', - areaStyle: { //区域填充渐变颜色 - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色 - }, { - offset: 1, - color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色 - }], - global: false // 缺省为 false + + let data = { + summrayMode: this.riqinumber, + 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: [] + } + 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 } - }, - emphasis: { - focus: 'series' - }, - data: this.zxtdata.TPSummry - }, - { - name: '总氮', - type: 'line', - stack: 'Total2', - areaStyle: { //区域填充渐变颜色 - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(255, 197, 59, 1)' // 0% 处的颜色 - }, { - offset: 1, - color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色 - }], - global: false // 缺省为 false + 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 + } + ] } - }, - emphasis: { - focus: 'series' - }, - data: this.zxtdata.TNSummry - }, - { - name: '硝态氮', - type: 'line', - stack: 'Total3', - areaStyle: { //区域填充渐变颜色 - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(59, 160, 255, 1)' // 0% 处的颜色 - }, { - offset: 1, - color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } - }, - emphasis: { - focus: 'series' - }, - data: this.zxtdata.NOSummry - }, - ] - if (this.array[this.index].indexOf('畜禽') != -1) { - this.ec.option.legend.data = ['总磷', '总氮', 'COD', '氨氮'] - this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF', '#FF3B3B'] - this.ec.option.series = [{ - name: '总磷', - type: 'line', - stack: 'Total1', - areaStyle: { //区域填充渐变颜色 - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色 - }, { - offset: 1, - color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } - }, - emphasis: { - focus: 'series' - }, - data: this.zxtdata.TPSummry - }, - { - name: '总氮', - type: 'line', - stack: 'Total2', - areaStyle: { //区域填充渐变颜色 - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(255, 197, 59, 1)' // 0% 处的颜色 - }, { - offset: 1, - color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } - }, - emphasis: { - focus: 'series' - }, - data: this.zxtdata.TNSummry - }, - { - name: 'COD', - type: 'line', - stack: 'Total3', - areaStyle: { //区域填充渐变颜色 - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(59, 160, 255, 1)' // 0% 处的颜色 - }, { - offset: 1, - color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } - }, - emphasis: { - focus: 'series' - }, - data: this.zxtdata.CODSummry - }, - { - name: '氨氮', - type: 'line', - stack: 'Total4', - areaStyle: { //区域填充渐变颜色 - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, - color: 'rgba(255, 59, 59, 1)' // 0% 处的颜色 - }, { - offset: 1, - color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } - }, - emphasis: { - focus: 'series' - }, - data: this.zxtdata.NHSummry - }, - ] + } + } + + this.chartData = { + categories: displayCategories, + series: series + } + console.log('图表数据:', this.chartData) + }, 300) + }).catch(err => { + console.log('趋势数据请求失败', err) + this.chartData = { + categories: [], + series: [] } }) }, // 折线图切换站点 bindPickerChange: function(e) { this.index = e.detail.value - this.stationName = this.array[this.index] + let stationName = this.array[this.index] for (var i = 0; i < this.arrays.length; i++) { - if (this.stationName == this.arrays[i].label) { + if (stationName == this.arrays[i].label) { this.stationCode = this.arrays[i].value + break } } - // this.gettj() this.qushicov() }, // 预警切换站点 bindPickerChange1: function(e) { this.index1 = e.detail.value this.stationName1 = this.array1[this.index1] - for (var i = 0; i < this.arrays.length; i++) { + 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 == '全部监测设备') { @@ -739,7 +616,6 @@ let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); - if (type === 'start') { year = year - 10; } else if (type === 'end') { @@ -755,12 +631,10 @@