diff --git a/src/views/ems/report/currentIOTCurve/index.vue b/src/views/ems/report/currentIOTCurve/index.vue
index b0dc2d8..34d3ea8 100644
--- a/src/views/ems/report/currentIOTCurve/index.vue
+++ b/src/views/ems/report/currentIOTCurve/index.vue
@@ -55,11 +55,23 @@
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -96,6 +108,8 @@ export default {
selectMonitorName: null,
//计量设备信息
baseMonitorInfoList: [],
+ // 选中设备的类型，用于控制图表显示
+ selectedDeviceType: null,
// 采集方式时间范围
daterangeRecordTime: [],
// 遮罩层
@@ -261,25 +275,58 @@ export default {
/** 节点单击事件 */
handleNodeClick(data) {
+ // 曲线页面只支持单个设备，如果是父节点则不处理
+ if (data.children && data.children.length > 0) {
+ this.$message.warning('曲线页面请选择具体设备节点查看数据');
+ return;
+ }
+
// 点击节点时清空monitorIds，只使用选中的monitorId
this.queryParams.monitorIds = [];
-
- /* this.queryParams.monitorCode = data.code*/
- this.queryParams.monitorId = data.code
-
- this.selectMonitorName = data.label
- this.handleQuery()
+ this.queryParams.monitorId = data.code;
+ this.selectMonitorName = data.label;
+
+ // 存储选中设备的类型，用于控制图表显示
+ this.selectedDeviceType = data.type;
+ console.log('选中设备:', data.label, 'type:', data.type);
+
+ this.handleQuery();
},
/** 曲线 */
async getChart() {
- if (this.queryParams.monitorId == null) {
+ if (this.queryParams.monitorId == null || !this.selectedDeviceType) {
return
}
let query = JSON.parse(JSON.stringify(this.queryParams))
- // const {data} = await vibrationInstantList(query)
const {data} = await getRecordIotenvInstantList(query)
- let option1 = {
+
+ // 根据设备类型创建对应的图表配置
+ this.createChartByType(data);
+ },
+
+ // 根据设备类型创建图表
+ createChartByType(data) {
+ switch (this.selectedDeviceType) {
+ case 5: // 温度传感器：只显示温度
+ this.createTemperatureChart(data);
+ break;
+ case 6: // 温湿度传感器：显示温度和湿度
+ this.createHumidityChart(data);
+ this.createTemperatureChart(data);
+ this.linkCharts(['Chart1', 'Chart2']);
+ break;
+ case 7: // 噪声传感器：只显示噪声
+ this.createNoiseChart(data);
+ break;
+ default:
+ console.warn('未知的设备类型:', this.selectedDeviceType);
+ }
+ },
+
+ // 创建湿度图表
+ createHumidityChart(data) {
+ let option = {
title: {
text: this.selectMonitorName + ' 湿度曲线',
x: 'center'
@@ -308,25 +355,25 @@ export default {
xAxis: {
data: data.map(e => e.recodeTime),
axisLine: {
- show: true, //隐藏X轴轴线
+ show: true,
lineStyle: {
color: '#000000'
}
},
axisTick: {
- show: true //隐藏X轴刻度
+ show: true
},
axisLabel: {
show: true,
textStyle: {
- color: '#000000' //X轴文字颜色
+ color: '#000000'
}
}
},
yAxis: [
{
type: 'value',
- name: '湿度',
+ name: '湿度(%)',
nameTextStyle: {
color: '#000000'
},
@@ -353,27 +400,22 @@ export default {
series: [
{
name: '湿度',
- connectNulls: true, // 关键配置
+ connectNulls: true,
type: 'line',
- smooth: true, //平滑曲线显示
- showAllSymbol: true, //显示所有图形。
- symbol: 'circle', //标记的图形为实心圆
- symbolSize: 10, //标记的大小
- // itemStyle: {
- // //折线拐点标志的样式
- // color: "#058cff",
- // },
- // lineStyle: {
- // color: "#058cff",
- // },
- // areaStyle: {
- // color: "rgba(5,140,255, 0.2)",
- // },
+ smooth: true,
+ showAllSymbol: true,
+ symbol: 'circle',
+ symbolSize: 10,
data: data.map(e => e.humidity)
- },
+ }
]
- }
- let option2 = {
+ };
+ this.$refs.Chart1.setData(option);
+ },
+
+ // 创建温度图表
+ createTemperatureChart(data) {
+ let option = {
title: {
text: this.selectMonitorName + ' 温度曲线',
x: 'center'
@@ -384,7 +426,6 @@ export default {
left: '10%',
right: '3%'
},
-
dataZoom: [{
type: 'slider'
}],
@@ -403,18 +444,18 @@ export default {
xAxis: {
data: data.map(e => e.recodeTime),
axisLine: {
- show: true, //隐藏X轴轴线
+ show: true,
lineStyle: {
color: '#000000'
}
},
axisTick: {
- show: true //隐藏X轴刻度
+ show: true
},
axisLabel: {
show: true,
textStyle: {
- color: '#000000' //X轴文字颜色
+ color: '#000000'
}
}
},
@@ -448,120 +489,22 @@ export default {
series: [
{
name: '温度(℃)',
- connectNulls: true, // 关键配置
+ connectNulls: true,
type: 'line',
- smooth: true, //平滑曲线显示
- showAllSymbol: true, //显示所有图形。
- symbol: 'circle', //标记的图形为实心圆
- symbolSize: 10, //标记的大小
- // itemStyle: {
- // //折线拐点标志的样式
- // color: "#058cff",
- // },
- // lineStyle: {
- // color: "#058cff",
- // },
- // areaStyle: {
- // color: "rgba(5,140,255, 0.2)",
- // },
+ smooth: true,
+ showAllSymbol: true,
+ symbol: 'circle',
+ symbolSize: 10,
data: data.map(e => e.temperature)
- },
+ }
]
- }
- // let option3 = {
- // title: {
- // text: this.selectMonitorName + ' 照度曲线',
- // x: 'center'
- // },
- // grid: {
- // top: '15%',
- // bottom: '10%',
- // left: '10%',
- // right: '3%'
- // },
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: 'shadow',
- // label: {
- // show: true
- // }
- // }
- // },
- // dataZoom: [{
- // type: 'slider'
- // }],
- // legend: {
- // right: 0
- // },
- // xAxis: {
- // data: data.map(e => e.recodeTime),
- // axisLine: {
- // show: true, //隐藏X轴轴线
- // lineStyle: {
- // color: '#000000'
- // }
- // },
- // axisTick: {
- // show: true //隐藏X轴刻度
- // },
- // axisLabel: {
- // show: true,
- // textStyle: {
- // color: '#000000' //X轴文字颜色
- // }
- // }
- // },
- // yAxis: [
- // {
- // type: 'value',
- // name: '照度',
- // nameTextStyle: {
- // color: '#000000'
- // },
- // splitLine: {
- // show: false
- // },
- // axisTick: {
- // show: true
- // },
- // axisLine: {
- // show: true,
- // lineStyle: {
- // color: '#000000'
- // }
- // },
- // axisLabel: {
- // show: true,
- // textStyle: {
- // color: '#000000'
- // }
- // }
- // }
- // ],
- // series: [
- // {
- // name: '照度',
- // type: 'line',
- // smooth: true, //平滑曲线显示
- // showAllSymbol: true, //显示所有图形。
- // symbol: 'circle', //标记的图形为实心圆
- // symbolSize: 10, //标记的大小
- // // itemStyle: {
- // // //折线拐点标志的样式
- // // color: "#058cff",
- // // },
- // // lineStyle: {
- // // color: "#058cff",
- // // },
- // // areaStyle: {
- // // color: "rgba(5,140,255, 0.2)",
- // // },
- // data: data.map(e => e.illuminance)
- // },
- // ]
- // }
- let option4 = {
+ };
+ this.$refs.Chart2.setData(option);
+ },
+
+ // 创建噪声图表
+ createNoiseChart(data) {
+ let option = {
title: {
text: this.selectMonitorName + ' 噪声曲线',
x: 'center'
@@ -590,25 +533,25 @@ export default {
xAxis: {
data: data.map(e => e.recodeTime),
axisLine: {
- show: true, //隐藏X轴轴线
+ show: true,
lineStyle: {
color: '#000000'
}
},
axisTick: {
- show: true //隐藏X轴刻度
+ show: true
},
axisLabel: {
show: true,
textStyle: {
- color: '#000000' //X轴文字颜色
+ color: '#000000'
}
}
},
yAxis: [
{
type: 'value',
- name: '噪声',
+ name: '噪声(dB)',
nameTextStyle: {
color: '#000000'
},
@@ -635,154 +578,71 @@ export default {
series: [
{
name: '噪声',
- connectNulls: true, // 关键配置
+ connectNulls: true,
type: 'line',
- smooth: true, //平滑曲线显示
- showAllSymbol: true, //显示所有图形。
- symbol: 'circle', //标记的图形为实心圆
- symbolSize: 10, //标记的大小
- // itemStyle: {
- // color: "#058cff",
- // },
- // lineStyle: {
- // color: "#058cff",
- // },
- // areaStyle: {
- // color: "rgba(5,140,255, 0.2)",
- // },
+ smooth: true,
+ showAllSymbol: true,
+ symbol: 'circle',
+ symbolSize: 10,
data: data.map(e => e.noise)
- },
+ }
]
- }
- // let option5 = {
- // title: {
- // text: this.selectMonitorName + ' 硫化氢浓度曲线',
- // x: 'center'
- // },
- // grid: {
- // top: '15%',
- // bottom: '10%',
- // left: '10%',
- // right: '3%'
- // },
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: 'shadow',
- // label: {
- // show: true
- // }
- // }
- // },
- // dataZoom: [{
- // type: 'slider'
- // }],
- // legend: {
- // right: 0
- // },
- // xAxis: {
- // data: data.map(e => e.recodeTime),
- // axisLine: {
- // show: true, //隐藏X轴轴线
- // lineStyle: {
- // color: '#000000'
- // }
- // },
- // axisTick: {
- // show: true //隐藏X轴刻度
- // },
- // axisLabel: {
- // show: true,
- // textStyle: {
- // color: '#000000' //X轴文字颜色
- // }
- // }
- // },
- // yAxis: [
- // {
- // type: 'value',
- // name: '硫化氢浓度',
- // nameTextStyle: {
- // color: '#000000'
- // },
- // splitLine: {
- // show: false
- // },
- // axisTick: {
- // show: true
- // },
- // axisLine: {
- // show: true,
- // lineStyle: {
- // color: '#000000'
- // }
- // },
- // axisLabel: {
- // show: true,
- // textStyle: {
- // color: '#000000'
- // }
- // }
- // }
- // ],
- // series: [
- // {
- // name: '硫化氢浓度',
- // type: 'line',
- // smooth: true, //平滑曲线显示
- // showAllSymbol: true, //显示所有图形。
- // symbol: 'circle', //标记的图形为实心圆
- // symbolSize: 10, //标记的大小
- // // itemStyle: {
- // // color: "#058cff",
- // // },
- // // lineStyle: {
- // // color: "#058cff",
- // // },
- // // areaStyle: {
- // // color: "rgba(5,140,255, 0.2)",
- // // },
- // data: data.map(e => e.concentration)
- // },
- // ]
- // }
+ };
+ this.$refs.Chart4.setData(option);
+ },
-
- this.$refs.Chart1.setData(option1)
- this.$refs.Chart2.setData(option2)
- // this.$refs.Chart3.setData(option3)
- this.$refs.Chart4.setData(option4)
- // this.$refs.Chart5.setData(option5)
- echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart, this.$refs.Chart4.chart)
- this.$refs.Chart1.chart.on('datazoom', (e) => {
- option2.dataZoom[0].start = e.start
- option2.dataZoom[0].end = e.end
- this.$refs.Chart2.setData(option2)
- option4.dataZoom[0].start = e.start
- option4.dataZoom[0].end = e.end
- this.$refs.Chart4.setData(option4)
- })
- this.$refs.Chart2.chart.on('datazoom', (e) => {
- option1.dataZoom[0].start = e.start
- option1.dataZoom[0].end = e.end
- this.$refs.Chart1.setData(option1)
- option4.dataZoom[0].start = e.start
- option4.dataZoom[0].end = e.end
- this.$refs.Chart4.setData(option4)
- })
- this.$refs.Chart4.chart.on('datazoom', (e) => {
- option2.dataZoom[0].start = e.start
- option2.dataZoom[0].end = e.end
- this.$refs.Chart2.setData(option2)
- option1.dataZoom[0].start = e.start
- option1.dataZoom[0].end = e.end
- this.$refs.Chart4.setData(option1)
- })
+ // 链接多个图表的缩放联动
+ linkCharts(chartRefs) {
+ if (chartRefs.length < 2) return;
+
+ // 连接图表
+ const charts = chartRefs.map(ref => this.$refs[ref].chart);
+ echarts.connect(...charts);
+
+ // 设置缩放联动
+ chartRefs.forEach((ref, index) => {
+ this.$refs[ref].chart.on('datazoom', (e) => {
+ chartRefs.forEach((otherRef, otherIndex) => {
+ if (index !== otherIndex) {
+ // 更新其他图表的缩放
+ this.$refs[otherRef].chart.dispatchAction({
+ type: 'dataZoom',
+ start: e.start,
+ end: e.end
+ });
+ }
+ });
+ });
+ });
}
}
}