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