From 36b53cdb37c91160f72c807339ac3a16e4c820bd Mon Sep 17 00:00:00 2001 From: "978184212@qq.com" <978184212@qq.com> Date: Mon, 1 Dec 2025 19:22:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packDetail/pages/sjdyj/index.vue | 243 ++++++++++++++++++++++--------- pages.json | 2 +- pages/maps/index.vue | 22 +-- 3 files changed, 185 insertions(+), 82 deletions(-) diff --git a/packDetail/pages/sjdyj/index.vue b/packDetail/pages/sjdyj/index.vue index 19599d0..00ac442 100644 --- a/packDetail/pages/sjdyj/index.vue +++ b/packDetail/pages/sjdyj/index.vue @@ -3,8 +3,8 @@ - + {{item.dictLabel}} @@ -14,14 +14,8 @@ - + @@ -41,17 +35,17 @@ {{it}} - + {{item.itemName?item.itemName:''}} - + {{item.survValue?item.survValue:''}} - + {{item.normalValue?item.normalValue:''}} - + {{item.survUnit?item.survUnit:''}} @@ -83,14 +77,16 @@ 时间区间： - + - {{item.itemName}}{{item.unit}} + {{item.itemName}} - + @@ -149,7 +145,7 @@ value: 0, rangeList: [], isActive: 0, - rangetime: [currentDate, currentDate], + rangetime: currentDate, deployId: '', resolt: [], chartData: {}, @@ -157,29 +153,38 @@ color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ], - padding: [15, 15, 10, 15], + padding: [0, 15, 10, 15], // 上边距增加以容纳顶部图例 legend: { - show: false, // 显示图例，方便区分各条线 + show: true, // 显示图例 position: "top", - float: "center", - itemGap: 20 + float: "right", // 图例放在右侧 + itemGap: 10, + margin: 10, }, enableScroll: true, xAxis: { disableGrid: true, - itemCount: 14, + itemCount: 8, scrollShow: true, scrollAlign: 'left', labelCount: 14, - boundaryGap: 'justify' + boundaryGap: 'justify', }, yAxis: { + // 虚线-实线 gridType: "dash", + // 虚线单位 dashLength: 2, - // 添加数据格式化，显示数值 - format: (val) => { - return val.toFixed(2); - } + // 开启y轴单位 + showTitle: true, + // y轴配置 + data: [{ + // 不写最大最小值-自增长 + // min: 0, + // max: 150, + // y轴单位 + title: '数量', + }], }, extra: { area: { @@ -209,8 +214,8 @@ }, onLoad() { this.getList() - this.startTime = this.rangetime[0] - this.endTime = this.rangetime[1] + this.startTime = this.rangetime + this.endTime = this.rangetime }, onShow() { // 页面显示时重新获取数据 @@ -232,8 +237,8 @@ }, watch: { rangetime(newval) { - this.startTime = this.rangetime[0] - this.endTime = this.rangetime[1] + this.startTime = newval + this.endTime = newval this.qushiList() }, }, @@ -261,7 +266,7 @@ this.deviceNo = ''; this.isLastpage = false; this.loadStatus = 'more'; - + this.getList().then(() => { // 停止下拉刷新 setTimeout(() => { @@ -291,11 +296,11 @@ pageNo: this.pageNo, pageSize: this.pageSize }; - + uni.showLoading({ title: '加载中' }); - + // 根据当前激活的tab设置URL let url = ''; if (this.isActive == 0) { @@ -306,14 +311,14 @@ params.deviceNo = this.deviceNo; } } - + this.$http.get(url, { params: params }).then(res => { uni.hideLoading(); if (res.data.code == 0) { var data = res.data.data.records || []; - + // 如果是第一页，清空列表；否则追加 if (this.pageNo === 1) { this.List = data; @@ -359,15 +364,15 @@ if (this.isLastpage || this.loadStatus === 'loading') { return; } - + this.loadStatus = 'loading'; this.pageNo = this.pageNo + 1; - + var params = { pageNo: this.pageNo, pageSize: this.pageSize }; - + // 根据当前激活的tab设置URL let url = ''; if (this.isActive == 0) { @@ -378,14 +383,14 @@ params.deviceNo = this.deviceNo; } } - + this.$http.get(url, { params: params }).then(res => { if (res.data.code == 0) { var data = res.data.data.records || []; this.List = this.List.concat(data); - + // 更新分页状态 const total = res.data.data.total || 0; if (total > 0) { @@ -476,8 +481,7 @@ }, // 选择日期范围 maskClick(e) { - this.startTime = e[0]; - this.endTime = e[1]; + this.rangetime = e; }, // 处理图表数据（带高亮超出部分） getServerData(val) { @@ -505,12 +509,8 @@ data: Array(this.timeList?.length || 0).fill(highValNum), color: "#FF4242", lineType: "solid", - showLabel: false, - // 全局隐藏数据标签 - dataLabel: { - fontSize: 0, - show: false - }, + showLabel: true, + dataLabel: false, }); } @@ -520,18 +520,69 @@ data: Array(this.timeList?.length || 0).fill(lowValNum), color: "#19D58A", lineType: "solid", - showLabel: false, - // 全局隐藏数据标签 - dataLabel: { - fontSize: 0, - show: false - }, + showLabel: true, + dataLabel: false, }); } return { categories: this.timeList.slice(0, 50) || [], - series: series + series: series, + // 为每个图表项单独配置opts，包含对应的单位 + chartOpts: { + color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", + "#3CA272", + "#FC8452", "#9A60B4", "#ea7ccc" + ], + padding: [0, 15, 10, 15], + 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: [] + } + } + } }; }); @@ -539,19 +590,67 @@ this.resolt = this.resolt.map((item, index) => { return { ...item, - chartData: chartDataList[index] || this.getDefaultChartData(item.itemName) + chartData: chartDataList[index] ? chartDataList[index].series : [], + categories: chartDataList[index] ? chartDataList[index].categories : [], + chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this + .getDefaultChartOpts(item.itemName, item.unit) }; }); console.log("处理后的趋势图数据", this.resolt); }, - // 获取默认图表数据 - getDefaultChartData(itemName) { + + // 获取默认图表配置 + getDefaultChartOpts(itemName, unit) { return { - categories: [], - series: [{ - name: itemName, - data: [] - }] + color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", + "#FC8452", "#9A60B4", "#ea7ccc" + ], + padding: [0, 15, 10, 15], + legend: { + show: true, + position: "top", + float: "right", + itemGap: 10, + margin: 10, + }, + enableScroll: true, + xAxis: { + disableGrid: true, + itemCount: 14, + scrollShow: true, + scrollAlign: 'left', + labelCount: 14, + boundaryGap: 'justify' + }, + yAxis: { + gridType: "dash", + dashLength: 2, + showTitle: true, + data: [{ + title: 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: [] + } + } }; }, } @@ -835,32 +934,34 @@ margin-bottom: 10rpx; } } + /* 确保列表容器有固定高度才能滚动 */ .liebiaos { - height: calc(100vh - 100rpx); /* 根据你的实际布局调整 */ + height: calc(100vh - 100rpx); + /* 根据你的实际布局调整 */ } - + .load { padding: 20rpx 0; text-align: center; } - + .zwsj { height: calc(100vh - 100rpx); display: flex; align-items: center; justify-content: center; } - + .inzwsj { text-align: center; } - + .zwsjimg { width: 200rpx; height: 200rpx; } - + .zwsjtext { font-size: 28rpx; color: #999; diff --git a/pages.json b/pages.json index f98416d..81d90b9 100644 --- a/pages.json +++ b/pages.json @@ -141,7 +141,7 @@ { "path": "pages/vidio/soilindex", "style": { - "navigationBarTitleText": "土壤监测", + "navigationBarTitleText": "长期定位监测点位", "navigationStyle": "default", "navigationBarBackgroundColor":"#0F6EFF" } diff --git a/pages/maps/index.vue b/pages/maps/index.vue index fde2458..9f41e95 100644 --- a/pages/maps/index.vue +++ b/pages/maps/index.vue @@ -141,8 +141,8 @@ switch(item.type) { case 'soil': iconPath = this.baseUrl + '/icon/device/soil.png'; - width = 40; - height = 40; + width = 32; + height = 47; break; case 'camera': iconPath = this.baseUrl + '/icon/device/cam.png'; @@ -242,11 +242,14 @@ url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(marker))}` }) } else if (marker.stationType === 'device') { + uni.navigateTo({ + url: `/packDetail/pages/vidio/soilindex` + }) // 处理设备点击事件 - uni.showToast({ - title: `设备: ${marker.stationName}`, - icon: 'none' - }); + // uni.showToast({ + // title: `设备: ${marker.stationName}`, + // icon: 'none' + // }); // 可以在这里添加设备详情页面的跳转逻辑 } } @@ -343,9 +346,8 @@ item.iconPath = this.baseUrl +'/'+ item.stationIcon; item.latitude = Number(item.stationLatitude); item.longitude = Number(item.stationLongitude); - item.width = 172; - item.height = 148; - + item.width = 239; + item.height = 186; const markerItem = { id: item.id, iconPath: item.iconPath, @@ -361,7 +363,7 @@ stationType: item.stationType, stationName: item.stationName, stationCode: item.stationCode, - joinCluster: true + joinCluster: true, }; this.markers.push(markerItem); }