From 171d257b5b62bc7d9ca35340b99d5e60fcfbff6e Mon Sep 17 00:00:00 2001 From: "978184212@qq.com" <978184212@qq.com> Date: Sat, 6 Dec 2025 18:45:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E7=9B=91=E6=B5=8B=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packDetail/pages/Site/detail.vue | 459 ++++++------------------------- packDetail/pages/sjdyj/index.vue | 187 ++++++------- pages/maps/index.vue | 89 ++++-- 3 files changed, 233 insertions(+), 502 deletions(-) diff --git a/packDetail/pages/Site/detail.vue b/packDetail/pages/Site/detail.vue index 1b475eb..ef4a073 100644 --- a/packDetail/pages/Site/detail.vue +++ b/packDetail/pages/Site/detail.vue @@ -2,7 +2,7 @@ - + @@ -101,19 +101,13 @@ - - + 重要污染物监测 - + {{item.name}} @@ -122,280 +116,108 @@ {{item.value || 0}}{{item.unit}} - + - - - 水质监测常规五项 - - - - - - {{item.name}} - - - {{item.value || 0}}{{item.unit}} - - - - - - - - - 土壤数据监测 - - - - - - {{item.name}} - - - {{item.value || 0}}{{item.unit}} - - - - - - - - 暂无数据 - - - - - - - - - - - - - - - - - {{details.stationName}} - - - - {{details.stationLocation}} - - - - - - 在线 - - - - - - - - {{details.deviceList.length || 0}} - - - 设备数量 - - - - - {{details.survItemCount || 0}} - - - 监测项 - - - - - {{details.survDataCount || 0}} - - - 上报数据 - - - - - - - - 站点建设时间: - - - {{details.buildTime}} - - - - - - - - 监测指标: - - - - {{item.name}} - - - - - - - - - 站点监控 - - - 监控数量{{survCamera.length ||0}}个 - - - - - - - - - - - - 监测指标 - - - 监测项目{{details.survItemCount || 0}}项 - - - - - - + 重要污染物监测 - + {{item.name}} - {{item.value ||0}}{{item.unit}} + {{item.value || 0}}{{item.unit}} - + - + - 恶臭气体监测 + 空气监测 - + {{item.name}} - {{item.value ||0}}{{item.unit}} + {{item.value || 0}}{{item.unit}} - + - + + + 土壤监测 + + + + + + {{item.name}} + + + {{item.value || 0}}{{item.unit}} + + + + + + + + + 水五常监测 + + + + + + {{item.name}} + + + {{item.value || 0}}{{item.unit}} + + + + + + + + + 恶臭监测 + + + + + + {{item.name}} + + + {{item.value || 0}}{{item.unit}} + + + + + + + 暂无数据 - - - + @@ -408,7 +230,7 @@ data(){ return{ height:0, - baseUrl:configService.apiUrl, + baseUrl:configService.staticDomainURL, scorllheight:0, details:{}, item:{}, @@ -422,15 +244,18 @@ colorList1:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A'], colorList:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A','#415FBE','#52AC2A','#EE701C'], codelist:[], - ecList:[], - qxList:[], - trList:[], list:[], token:'', dataOu:'', dataNh3:'', dataH2s:'', dataTvoc:'', + airlist:[], + soillist:[], + waterlist:[], + orientlist:[], + livelist:[], + stinklist:[], } }, onLoad(options) { @@ -460,131 +285,12 @@ this.$http.get('/applet/survStationInfo/getStationInfo',{params:params}).then(res =>{ if(res.data.code == 0){ this.details = res.data.data.stationInfo - if(this.details.deviceCount >= 10000 && this.details.deviceCount < 100000000){ - this.details.deviceCount = (this.details.deviceCount /10000).toFixed(1) + '万' - } - if(this.details.deviceCount >= 100000000){ - this.details.deviceCount = (this.details.deviceCount /100000000).toFixed(1) + '亿' - } - if(this.details.survItemCount >= 10000 && this.details.survItemCount < 100000000){ - this.details.survItemCount = (this.details.survItemCount /10000).toFixed(1) + '万' - } - if(this.details.survItemCount >= 100000000){ - this.details.survItemCount = (this.details.survItemCount /100000000).toFixed(1) + '亿' - } - if(this.details.survDataCount >= 10000 && this.details.survDataCount < 100000000){ - this.details.survDataCount = (this.details.survDataCount /10000).toFixed(1) + '万' - } - if(this.details.survDataCount >= 100000000){ - this.details.survDataCount = (this.details.survDataCount /100000000).toFixed(1) + '亿' - } - this.survItemList = res.data.data.stationInfo.survColorItems - this.survCamera = res.data.data.survCamera - // if(res.data.data.HisSurvData){ - this.list = res.data.data.HisSurvData - if(!this.list){ - for(var i=0;i { + // 只显示第一个和中间的数据 + if (i === 0 || i === Math.floor(allLabels.length / 2)) { + return val; + } + return ''; + } }, yAxis: { - // 虚线-实线 gridType: "dash", - // 虚线单位 dashLength: 2, - // 开启y轴单位 showTitle: true, - // y轴配置 data: [{ - // 不写最大最小值-自增长 - // min: 0, - // max: 150, - // y轴单位 title: '数量', }], }, @@ -199,13 +197,11 @@ textStyle: { fontSize: 12 }, - // 自定义提示框内容 format: (item, category, index, opts) => { return `${category}\n${item.seriesName}: ${item.data}` } }, markLine: { - // 可以添加标记线来更明显地显示阈值 data: [] } } @@ -483,106 +479,56 @@ maskClick(e) { this.rangetime = e; }, - // 处理图表数据（带高亮超出部分） + // 处理图表数据 getServerData(val) { const chartDataList = val.map(item => { const series = []; - // 处理主要数据 - 确保都是Number格式 + // 处理主要数据 const mainData = (item.data.slice(0, 50) || Array(this.timeList?.length || 0).fill(0)) .map(value => Number(value) || 0); const highValNum = item.highVal ? Number(item.highVal) || 0 : null; const lowValNum = item.lowVal ? Number(item.lowVal) || 0 : null; - // 正常数据线 + // 正常数据线 - 实线 series.push({ name: item.itemName, data: mainData, - color: "#1890FF" + color: "#1890FF", + lineType: "solid", + pointShape: "circle", + show: true }); - // 阈值线（保持原来的虚线） + // 最高阈值线 - 虚线 if (highValNum !== null) { series.push({ - name: '最高阈值', + name: `最高阈值: ${highValNum}`, data: Array(this.timeList?.length || 0).fill(highValNum), color: "#FF4242", - lineType: "dashed", - showLabel: true, - dataLabel: false, + lineType: "dashed", // 虚线 + pointShape: "none", // 不显示点 + show: true, }); } + // 最低阈值线 - 虚线 if (lowValNum !== null) { series.push({ - name: '最低阈值', + name: `最低阈值: ${lowValNum}`, data: Array(this.timeList?.length || 0).fill(lowValNum), color: "#19D58A", - lineType: "dashed", - showLabel: true, - dataLabel: false, + lineType: "dashed", // 虚线 + pointShape: "none", // 不显示点 + show: true, }); } return { categories: this.timeList.slice(0, 50) || [], series: series, - // 为每个图表项单独配置opts，包含对应的单位 - chartOpts: { - color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", - "#3CA272", - "#FC8452", "#9A60B4", "#ea7ccc" - ], - padding: [0, 15, 10, 5], - legend: { - show: true, - position: "top", - float: "right", - itemGap: 10, - margin: 10, - }, - enableScroll: true, - dataLabel:false, - xAxis: { - disableGrid: true, - itemCount: 14, - scrollShow: true, - scrollAlign: 'left', - labelCount: 14, - boundaryGap: 'justify' - }, - yAxis: { - gridType: "dash", - dashLength: 2, - showTitle: true, - // 动态设置单位，使用item.unit - data: [{ - title: item.unit || '单位', // 使用监测项的单位，如果没有则显示'单位' - }], - }, - extra: { - area: { - type: "curve", - opacity: 0.2, - addLine: true, - width: 2, - gradient: true, - activeType: "hollow" - }, - tooltip: { - textStyle: { - fontSize: 12 - }, - format: (item, category, index, opts) => { - return `${category}\n${item.seriesName}: ${item.data}` - } - }, - markLine: { - data: [] - } - } - } + chartOpts: this.getChartOpts(item.itemName, item.unit) }; }); @@ -592,20 +538,19 @@ ...item, chartData: chartDataList[index] ? chartDataList[index].series : [], categories: chartDataList[index] ? chartDataList[index].categories : [], - chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this - .getDefaultChartOpts(item.itemName, item.unit) + chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this.getChartOpts(item.itemName, item.unit) }; }); console.log("处理后的趋势图数据", this.resolt); }, - // 获取默认图表配置 - getDefaultChartOpts(itemName, unit) { + // 获取图表配置 + getChartOpts(itemName, unit) { return { color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ], - padding: [0, 15, 10, 15], + padding: [0, 15, 10, 5], legend: { show: true, position: "top", @@ -613,14 +558,51 @@ itemGap: 10, margin: 10, }, - enableScroll: true, + enableScroll: false, // 禁用滚动，显示所有数据 + dataLabel: false, xAxis: { disableGrid: true, - itemCount: 14, - scrollShow: true, - scrollAlign: 'left', - labelCount: 14, - boundaryGap: 'justify' + scrollShow: false, // 不显示滚动条 + labelCount: 3, // 设置显示3个标签（对应我们要显示的3个点） + boundaryGap: 'justify', + // 自定义标签显示：显示第一个、中间和倒数第三个数据 + labelFormatter: (val, i, allLabels) => { + if (!allLabels || allLabels.length === 0) { + return val; + } + + const total = allLabels.length; + + // 1. 第一个标签 + if (i === 0) { + return val; + } + + // 2. 中间标签 + const middleIndex = Math.floor(total / 2); + if (total % 2 === 0 && i === middleIndex - 1) { + // 如果是偶数个，显示中间两个中的前一个 + return val; + } else if (i === middleIndex) { + // 如果是奇数个，显示正中间 + return val; + } + + // 3. 倒数第三个标签 + // 确保有足够的数据点 + if (total >= 3) { + const thirdLastIndex = total - 3; + if (i === thirdLastIndex) { + return val; + } + } + // 如果数据少于3个，显示最后一个 + else if (i === total - 1) { + return val; + } + + return ''; // 其他标签返回空字符串 + } }, yAxis: { gridType: "dash", @@ -648,11 +630,20 @@ } }, markLine: { - data: [] + }, + line: { + width: 2, + smooth: true } } }; }, + + // 自定义图例渲染（如果需要） + customLegendRender() { + // 如果uCharts的图例样式不满足需求，可以考虑使用自定义的图例组件 + // 这里可以返回一个自定义的图例HTML或组件 + } } } diff --git a/pages/maps/index.vue b/pages/maps/index.vue index 8e24231..2ba80a2 100644 --- a/pages/maps/index.vue +++ b/pages/maps/index.vue @@ -29,10 +29,16 @@