zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ems): 重构曲线页面

Browse Source 
- 根据设备类型动态显示图表
- 优化图表布局和样式
- 添加无数据提示信息
- 重构图表数据处理逻辑
- 优化图表联动缩放功能
boardTest
zch 3 weeks ago
parent b1c72d6ae9
commit c607c11182
1 changed files with 154 additions and 294 deletions
Show Stats Download Patch File Download Diff File

448
src/views/ems/report/currentIOTCurve/index.vue
Unescape Escape View File

@ -55,11 +55,23 @@
</el-form-item>
</el-form>
<Chart ref="Chart1" class="chart1"/>
<Chart ref="Chart2" class="chart2"/>
<Chart ref="Chart3" class="chart3"/>
<Chart ref="Chart4" class="chart4"/>
<Chart ref="Chart5" class="chart5"/>
<!-- 根据设备类型显示对应的图表 -->
<!-- type=5: 只显示温度 -->
<Chart v-if="selectedDeviceType === 5" ref="Chart2" class="chart-single"/>
<!-- type=6: 显示温度和湿度 -->
<div v-if="selectedDeviceType === 6">
<Chart ref="Chart1" class="chart-half"/>
<Chart ref="Chart2" class="chart-half"/>
</div>
<!-- type=7: 只显示噪声 -->
<Chart v-if="selectedDeviceType === 7" ref="Chart4" class="chart-single"/>
<!-- 未选择设备或其他类型时显示提示 -->
<div v-if="!selectedDeviceType" class="no-data-tip">
<p>请在左侧树中选择具体设备节点查看数据曲线</p>
</div>
</el-col>
</el-row>
@ -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
});
}
});
});
});
}
}
}
</script>
<style scoped>
/* 单个图表样式（type=5温度 或 type=7噪声） */
.chart-single {
width: 100%;
height: 60vh;
margin: 20px 0;
}
/* 双图表样式（type=6温湿度） */
.chart-half {
width: 50%;
height: 45vh;
display: inline-block;
margin: 10px 0;
}
/* 提示信息样式 */
.no-data-tip {
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 16px;
}
/* 保留原有样式以防兼容性问题 */
.chart1 {
width: 50%;
height: 40vh;

Write Preview
Loading…
Cancel
Save