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

refactor(ems): 优化曲线图表展示逻辑，时间从早到晚ASC

Browse Source 
- 移除sensorId
- 时间从早到晚ASC
- 调整查询参数和图表数据处理方式
- 添加 connectNulls 配置以优化曲线显示(不断点)
- 删除未使用的图表选项代码
- 修改图表数据同步逻辑
boardTest
zch 3 weeks ago
parent 4fd06ab01d
commit e749538016
2 changed files with 239 additions and 293 deletions
Show Stats Download Patch File Download Diff File

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

@ -119,8 +119,8 @@ export default {
// 查询参数
queryParams: {
objId: null,
monitorId: null,
collectTime: null,
sensorId: null,
speed: null,
displacement: null,
acceleration: null,
@ -179,22 +179,22 @@ export default {
children: node.children
}
},
// 递归获取树中所有节点的monitorId
getAllMonitorIds(nodes) {
let ids = [];
if (!nodes || nodes.length === 0) return ids;
nodes.forEach(node => {
if (node.code) {
ids.push(node.code);
}
if (node.children && node.children.length > 0) {
ids = ids.concat(this.getAllMonitorIds(node.children));
}
});
return ids;
},
/** 查询电实时数据列表 */
// 递归获取树中所有节点
// getAllMonitorIds(nodes) {
// let ids = [];
// if (!nodes || nodes.length === 0) return ids;
//
// nodes.forEach(node => {
// if (node.code) {
// ids.push(node.code);
// }
// if (node.children && node.children.length > 0) {
// ids = ids.concat(this.getAllMonitorIds(node.children));
// }
// });
// return ids;
// },
/** 查询实时数据列表 */
getList() {
this.loading = true
this.queryParams.params = {}
@ -202,16 +202,6 @@ export default {
this.queryParams.params['beginRecordTime'] = this.daterangeRecordTime[0]
this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1]
}
// 将monitorCode改为sensorId
if (this.queryParams.sensorId !== null) {
this.queryParams.params['sensorId'] = this.queryParams.sensorId;
}
// 如果没有选中节点，则获取所有设备ID
if (!this.queryParams.monitorId) {
this.queryParams.monitorIds = this.getAllMonitorIds(this.monitorInfoOptions);
}
this.getChart()
},
@ -225,7 +215,7 @@ export default {
reset() {
this.form = {
objId: null,
sensorId: null,
monitorId: null,
speed: null,
displacement: null,
acceleration: null,
@ -244,6 +234,7 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.queryParams.monitorCode = null
this.queryParams.monitorId = null
this.resetForm('queryForm')
this.handleQuery()
},
@ -274,16 +265,15 @@ export default {
this.queryParams.monitorIds = [];
/* this.queryParams.monitorCode = data.code*/
this.queryParams.sensorId = data.code
console.log("this.queryParams.sensorId"+this.queryParams.sensorId)
this.queryParams.monitorId = data.code
this.selectMonitorName = data.label
this.handleQuery()
},
/** 振动曲线 */
/** 曲线 */
async getChart() {
if (this.queryParams.sensorId == null) {
if (this.queryParams.monitorId == null) {
return
}
let query = JSON.parse(JSON.stringify(this.queryParams))
@ -363,6 +353,7 @@ export default {
series: [
{
name: '湿度',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
@ -457,6 +448,7 @@ export default {
series: [
{
name: '温度(℃)',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
@ -476,99 +468,99 @@ export default {
},
]
}
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",
// 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: "#058cff",
// color: '#000000'
// }
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// axisTick: {
// show: true //隐藏X轴刻度
// },
data: data.map(e => e.illuminance)
},
]
}
// 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 = {
title: {
text: this.selectMonitorName + ' 噪声曲线',
@ -643,6 +635,7 @@ export default {
series: [
{
name: '噪声',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
@ -661,176 +654,129 @@ export default {
},
]
}
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",
// 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: "#058cff",
// color: '#000000'
// }
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// axisTick: {
// show: true //隐藏X轴刻度
// },
data: data.map(e => e.concentration)
},
]
}
// 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.Chart1.setData(option1)
this.$refs.Chart2.setData(option2)
this.$refs.Chart3.setData(option3)
// 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.Chart3.chart, this.$refs.Chart4.chart, this.$refs.Chart5.chart)
// 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)
option3.dataZoom[0].start = e.start
option3.dataZoom[0].end = e.end
this.$refs.Chart3.setData(option3)
option4.dataZoom[0].start = e.start
option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4)
option5.dataZoom[0].start = e.start
option5.dataZoom[0].end = e.end
this.$refs.Chart5.setData(option5)
})
this.$refs.Chart2.chart.on('datazoom', (e) => {
option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end
this.$refs.Chart1.setData(option1)
option3.dataZoom[0].start = e.start
option3.dataZoom[0].end = e.end
this.$refs.Chart3.setData(option3)
option4.dataZoom[0].start = e.start
option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4)
option5.dataZoom[0].start = e.start
option5.dataZoom[0].end = e.end
this.$refs.Chart5.setData(option5)
})
this.$refs.Chart3.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.Chart1.setData(option1)
option4.dataZoom[0].start = e.start
option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4)
option5.dataZoom[0].start = e.start
option5.dataZoom[0].end = e.end
this.$refs.Chart5.setData(option5)
})
this.$refs.Chart4.chart.on('datazoom', (e) => {
option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2)
option3.dataZoom[0].start = e.start
option3.dataZoom[0].end = e.end
this.$refs.Chart3.setData(option3)
option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option1)
option5.dataZoom[0].start = e.start
option5.dataZoom[0].end = e.end
this.$refs.Chart5.setData(option5)
})
this.$refs.Chart5.chart.on('datazoom', (e) => {
option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2)
option3.dataZoom[0].start = e.start
option3.dataZoom[0].end = e.end
this.$refs.Chart3.setData(option3)
option4.dataZoom[0].start = e.start
option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4)
option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end
this.$refs.Chart1.setData(option1)
})
}
}

52
src/views/ems/report/currentVibrationCurve/index.vue
Unescape Escape View File

@ -119,7 +119,7 @@ export default {
queryParams: {
objId: null,
collectTime: null,
sensorId: null,
monitorId: null,
speed: null,
displacement: null,
acceleration: null,
@ -179,20 +179,20 @@ export default {
}
},
// 递归获取树中所有节点的设备编号
getAllMonitorIds(nodes) {
let ids = [];
if (!nodes || nodes.length === 0) return ids;
nodes.forEach(node => {
if (node.code) {
ids.push(node.code);
}
if (node.children && node.children.length > 0) {
ids = ids.concat(this.getAllMonitorIds(node.children));
}
});
return ids;
},
// getAllMonitorIds(nodes) {
// let ids = [];
// if (!nodes || nodes.length === 0) return ids;
//
// nodes.forEach(node => {
// if (node.code) {
// ids.push(node.code);
// }
// if (node.children && node.children.length > 0) {
// ids = ids.concat(this.getAllMonitorIds(node.children));
// }
// });
// return ids;
// },
/** 查询电实时数据列表 */
getList() {
this.loading = true
@ -201,15 +201,11 @@ export default {
this.queryParams.params['beginRecordTime'] = this.daterangeRecordTime[0]
this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1]
}
// 将monitorCode改为sensorId
if (this.queryParams.sensorId !== null) {
this.queryParams.params['sensorId'] = this.queryParams.sensorId;
}
// 如果没有选中节点，则获取所有设备ID
if (!this.queryParams.monitorId) {
this.queryParams.monitorIds = this.getAllMonitorIds(this.monitorInfoOptions);
}
// if (!this.queryParams.monitorId) {
// this.queryParams.monitorIds = this.getAllMonitorIds(this.monitorInfoOptions);
// }
this.getChart()
},
@ -224,7 +220,7 @@ export default {
reset() {
this.form = {
objId: null,
sensorId: null,
monitorId: null,
speed: null,
displacement: null,
acceleration: null,
@ -243,6 +239,7 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.queryParams.monitorCode = null
this.queryParams.monitorId = null
this.resetForm('queryForm')
this.handleQuery()
},
@ -273,8 +270,7 @@ export default {
this.queryParams.monitorIds = [];
/* this.queryParams.monitorCode = data.code*/
this.queryParams.sensorId = data.code
console.log("this.queryParams.sensorId"+this.queryParams.sensorId)
this.queryParams.monitorId = data.code
this.selectMonitorName = data.label
this.handleQuery()
@ -282,7 +278,7 @@ export default {
/** 振动曲线 */
async getChart() {
if (this.queryParams.sensorId == null) {
if (this.queryParams.monitorId == null) {
return
}
let query = JSON.parse(JSON.stringify(this.queryParams))
@ -362,6 +358,7 @@ export default {
series: [
{
name: '速度(mm/s)',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
@ -456,6 +453,7 @@ export default {
series: [
{
name: '温度(℃)',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
@ -549,6 +547,7 @@ export default {
series: [
{
name: '位移(um)',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
@ -642,6 +641,7 @@ export default {
series: [
{
name: '加速度(g)',
connectNulls: true, // 关键配置
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。

Write Preview
Loading…
Cancel
Save