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

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

@ -119,8 +119,8 @@ export default {
// 查询参数 // 查询参数
queryParams: { queryParams: {
objId: null, objId: null,
monitorId: null,
collectTime: null, collectTime: null,
sensorId: null,
speed: null, speed: null,
displacement: null, displacement: null,
acceleration: null, acceleration: null,
@ -179,22 +179,22 @@ export default {
children: node.children children: node.children
} }
}, },
// 递归获取树中所有节点的monitorId // 递归获取树中所有节点
getAllMonitorIds(nodes) { // getAllMonitorIds(nodes) {
let ids = []; // let ids = [];
if (!nodes || nodes.length === 0) return ids; // if (!nodes || nodes.length === 0) return ids;
//
nodes.forEach(node => { // nodes.forEach(node => {
if (node.code) { // if (node.code) {
ids.push(node.code); // ids.push(node.code);
} // }
if (node.children && node.children.length > 0) { // if (node.children && node.children.length > 0) {
ids = ids.concat(this.getAllMonitorIds(node.children)); // ids = ids.concat(this.getAllMonitorIds(node.children));
} // }
}); // });
return ids; // return ids;
}, // },
/** 查询电实时数据列表 */ /** 查询实时数据列表 */
getList() { getList() {
this.loading = true this.loading = true
this.queryParams.params = {} this.queryParams.params = {}
@ -202,16 +202,6 @@ export default {
this.queryParams.params['beginRecordTime'] = this.daterangeRecordTime[0] this.queryParams.params['beginRecordTime'] = this.daterangeRecordTime[0]
this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1] 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() this.getChart()
}, },
@ -225,7 +215,7 @@ export default {
reset() { reset() {
this.form = { this.form = {
objId: null, objId: null,
sensorId: null, monitorId: null,
speed: null, speed: null,
displacement: null, displacement: null,
acceleration: null, acceleration: null,
@ -244,6 +234,7 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.queryParams.monitorCode = null this.queryParams.monitorCode = null
this.queryParams.monitorId = null
this.resetForm('queryForm') this.resetForm('queryForm')
this.handleQuery() this.handleQuery()
}, },
@ -274,16 +265,15 @@ export default {
this.queryParams.monitorIds = []; this.queryParams.monitorIds = [];
/* this.queryParams.monitorCode = data.code*/ /* this.queryParams.monitorCode = data.code*/
this.queryParams.sensorId = data.code this.queryParams.monitorId = data.code
console.log("this.queryParams.sensorId"+this.queryParams.sensorId)
this.selectMonitorName = data.label this.selectMonitorName = data.label
this.handleQuery() this.handleQuery()
}, },
/** 振动曲线 */ /** 曲线 */
async getChart() { async getChart() {
if (this.queryParams.sensorId == null) { if (this.queryParams.monitorId == null) {
return return
} }
let query = JSON.parse(JSON.stringify(this.queryParams)) let query = JSON.parse(JSON.stringify(this.queryParams))
@ -363,6 +353,7 @@ export default {
series: [ series: [
{ {
name: '湿度', name: '湿度',
connectNulls: true, // 关键配置
type: 'line', type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
@ -457,6 +448,7 @@ export default {
series: [ series: [
{ {
name: '温度(℃)', name: '温度(℃)',
connectNulls: true, // 关键配置
type: 'line', type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
@ -476,99 +468,99 @@ export default {
}, },
] ]
} }
let option3 = { // let option3 = {
title: { // title: {
text: this.selectMonitorName + ' 照度曲线', // text: this.selectMonitorName + ' 照度曲线',
x: 'center' // x: 'center'
}, // },
grid: { // grid: {
top: '15%', // top: '15%',
bottom: '10%', // bottom: '10%',
left: '10%', // left: '10%',
right: '3%' // right: '3%'
}, // },
tooltip: { // tooltip: {
trigger: 'axis', // trigger: 'axis',
axisPointer: { // axisPointer: {
type: 'shadow', // type: 'shadow',
label: { // label: {
show: true // show: true
} // }
} // }
}, // },
dataZoom: [{ // dataZoom: [{
type: 'slider' // type: 'slider'
}], // }],
legend: { // legend: {
right: 0 // right: 0
}, // },
xAxis: { // xAxis: {
data: data.map(e => e.recodeTime), // data: data.map(e => e.recodeTime),
axisLine: { // axisLine: {
show: true, //隐藏X轴轴线 // show: true, //隐藏X轴轴线
lineStyle: { // lineStyle: {
color: '#000000' // color: '#000000'
} // }
}, // },
axisTick: { // axisTick: {
show: true //隐藏X轴刻度 // show: true //隐藏X轴刻度
}, // },
axisLabel: { // axisLabel: {
show: true, // show: true,
textStyle: { // textStyle: {
color: '#000000' //X轴文字颜色 // color: '#000000' //X轴文字颜色
} // }
} // }
}, // },
yAxis: [ // yAxis: [
{ // {
type: 'value', // type: 'value',
name: '照度', // name: '照度',
nameTextStyle: { // nameTextStyle: {
color: '#000000' // color: '#000000'
}, // },
splitLine: { // splitLine: {
show: false // show: false
}, // },
axisTick: { // axisTick: {
show: true // show: true
}, // },
axisLine: { // axisLine: {
show: true, // show: true,
lineStyle: { // lineStyle: {
color: '#000000' // color: '#000000'
} // }
}, // },
axisLabel: { // axisLabel: {
show: true, // show: true,
textStyle: { // textStyle: {
color: '#000000' // color: '#000000'
} // }
} // }
} // }
], // ],
series: [ // series: [
{ // {
name: '照度', // name: '照度',
type: 'line', // type: 'line',
smooth: true, //平滑曲线显示 // smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 // showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆 // symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小 // symbolSize: 10, //标记的大小
// itemStyle: { // // itemStyle: {
// //折线拐点标志的样式 // // //折线拐点标志的样式
// color: "#058cff", // // color: "#058cff",
// }, // // },
// lineStyle: { // // lineStyle: {
// color: "#058cff", // // color: "#058cff",
// }, // // },
// areaStyle: { // // areaStyle: {
// color: "rgba(5,140,255, 0.2)", // // color: "rgba(5,140,255, 0.2)",
// }, // // },
data: data.map(e => e.illuminance) // data: data.map(e => e.illuminance)
}, // },
] // ]
} // }
let option4 = { let option4 = {
title: { title: {
text: this.selectMonitorName + ' 噪声曲线', text: this.selectMonitorName + ' 噪声曲线',
@ -643,6 +635,7 @@ export default {
series: [ series: [
{ {
name: '噪声', name: '噪声',
connectNulls: true, // 关键配置
type: 'line', type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
@ -661,176 +654,129 @@ export default {
}, },
] ]
} }
// let option5 = {
let option5 = { // title: {
title: { // text: this.selectMonitorName + ' 硫化氢浓度曲线',
text: this.selectMonitorName + ' 硫化氢浓度曲线', // x: 'center'
x: 'center' // },
}, // grid: {
grid: { // top: '15%',
top: '15%', // bottom: '10%',
bottom: '10%', // left: '10%',
left: '10%', // right: '3%'
right: '3%' // },
}, // tooltip: {
tooltip: { // trigger: 'axis',
trigger: 'axis', // axisPointer: {
axisPointer: { // type: 'shadow',
type: 'shadow', // label: {
label: { // show: true
show: true // }
} // }
} // },
}, // dataZoom: [{
dataZoom: [{ // type: 'slider'
type: 'slider' // }],
}], // legend: {
legend: { // right: 0
right: 0 // },
}, // xAxis: {
xAxis: { // data: data.map(e => e.recodeTime),
data: data.map(e => e.recodeTime), // axisLine: {
axisLine: { // show: true, //隐藏X轴轴线
show: true, //隐藏X轴轴线 // lineStyle: {
lineStyle: { // color: '#000000'
color: '#000000' // }
} // },
}, // axisTick: {
axisTick: { // show: true //隐藏X轴刻度
show: true //隐藏X轴刻度 // },
}, // axisLabel: {
axisLabel: { // show: true,
show: true, // textStyle: {
textStyle: { // color: '#000000' //X轴文字颜色
color: '#000000' //X轴文字颜色 // }
} // }
} // },
}, // yAxis: [
yAxis: [ // {
{ // type: 'value',
type: 'value', // name: '硫化氢浓度',
name: '硫化氢浓度', // nameTextStyle: {
nameTextStyle: { // color: '#000000'
color: '#000000' // },
}, // splitLine: {
splitLine: { // show: false
show: false // },
}, // axisTick: {
axisTick: { // show: true
show: true // },
}, // axisLine: {
axisLine: { // show: true,
show: true, // lineStyle: {
lineStyle: { // color: '#000000'
color: '#000000' // }
} // },
}, // axisLabel: {
axisLabel: { // show: true,
show: true, // textStyle: {
textStyle: { // color: '#000000'
color: '#000000' // }
} // }
} // }
} // ],
], // series: [
series: [ // {
{ // name: '硫化氢浓度',
name: '硫化氢浓度', // type: 'line',
type: 'line', // smooth: true, //平滑曲线显示
smooth: true, //平滑曲线显示 // showAllSymbol: true, //显示所有图形。
showAllSymbol: true, //显示所有图形。 // symbol: 'circle', //标记的图形为实心圆
symbol: 'circle', //标记的图形为实心圆 // symbolSize: 10, //标记的大小
symbolSize: 10, //标记的大小 // // itemStyle: {
// itemStyle: { // // color: "#058cff",
// color: "#058cff", // // },
// }, // // lineStyle: {
// lineStyle: { // // color: "#058cff",
// color: "#058cff", // // },
// }, // // areaStyle: {
// areaStyle: { // // color: "rgba(5,140,255, 0.2)",
// color: "rgba(5,140,255, 0.2)", // // },
// }, // data: data.map(e => e.concentration)
data: data.map(e => e.concentration) // },
}, // ]
] // }
}
this.$refs.Chart1.setData(option1) this.$refs.Chart1.setData(option1)
this.$refs.Chart2.setData(option2) this.$refs.Chart2.setData(option2)
this.$refs.Chart3.setData(option3) // this.$refs.Chart3.setData(option3)
this.$refs.Chart4.setData(option4) this.$refs.Chart4.setData(option4)
this.$refs.Chart5.setData(option5) // 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) echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart, this.$refs.Chart4.chart)
this.$refs.Chart1.chart.on('datazoom', (e) => { this.$refs.Chart1.chart.on('datazoom', (e) => {
option2.dataZoom[0].start = e.start option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2) 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].start = e.start
option4.dataZoom[0].end = e.end option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4) 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) => { this.$refs.Chart2.chart.on('datazoom', (e) => {
option1.dataZoom[0].start = e.start option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end option1.dataZoom[0].end = e.end
this.$refs.Chart1.setData(option1) 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].start = e.start
option4.dataZoom[0].end = e.end option4.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option4) 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) => { this.$refs.Chart4.chart.on('datazoom', (e) => {
option2.dataZoom[0].start = e.start option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2) 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].start = e.start
option1.dataZoom[0].end = e.end option1.dataZoom[0].end = e.end
this.$refs.Chart4.setData(option1) 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: { queryParams: {
objId: null, objId: null,
collectTime: null, collectTime: null,
sensorId: null, monitorId: null,
speed: null, speed: null,
displacement: null, displacement: null,
acceleration: null, acceleration: null,
@ -179,20 +179,20 @@ export default {
} }
}, },
// 递归获取树中所有节点的设备编号 // 递归获取树中所有节点的设备编号
getAllMonitorIds(nodes) { // getAllMonitorIds(nodes) {
let ids = []; // let ids = [];
if (!nodes || nodes.length === 0) return ids; // if (!nodes || nodes.length === 0) return ids;
//
nodes.forEach(node => { // nodes.forEach(node => {
if (node.code) { // if (node.code) {
ids.push(node.code); // ids.push(node.code);
} // }
if (node.children && node.children.length > 0) { // if (node.children && node.children.length > 0) {
ids = ids.concat(this.getAllMonitorIds(node.children)); // ids = ids.concat(this.getAllMonitorIds(node.children));
} // }
}); // });
return ids; // return ids;
}, // },
/** 查询电实时数据列表 */ /** 查询电实时数据列表 */
getList() { getList() {
this.loading = true this.loading = true
@ -201,15 +201,11 @@ export default {
this.queryParams.params['beginRecordTime'] = this.daterangeRecordTime[0] this.queryParams.params['beginRecordTime'] = this.daterangeRecordTime[0]
this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1] this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1]
} }
// 将monitorCode改为sensorId
if (this.queryParams.sensorId !== null) {
this.queryParams.params['sensorId'] = this.queryParams.sensorId;
}
// 如果没有选中节点，则获取所有设备ID // 如果没有选中节点，则获取所有设备ID
if (!this.queryParams.monitorId) { // if (!this.queryParams.monitorId) {
this.queryParams.monitorIds = this.getAllMonitorIds(this.monitorInfoOptions); // this.queryParams.monitorIds = this.getAllMonitorIds(this.monitorInfoOptions);
} // }
this.getChart() this.getChart()
}, },
@ -224,7 +220,7 @@ export default {
reset() { reset() {
this.form = { this.form = {
objId: null, objId: null,
sensorId: null, monitorId: null,
speed: null, speed: null,
displacement: null, displacement: null,
acceleration: null, acceleration: null,
@ -243,6 +239,7 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.queryParams.monitorCode = null this.queryParams.monitorCode = null
this.queryParams.monitorId = null
this.resetForm('queryForm') this.resetForm('queryForm')
this.handleQuery() this.handleQuery()
}, },
@ -273,8 +270,7 @@ export default {
this.queryParams.monitorIds = []; this.queryParams.monitorIds = [];
/* this.queryParams.monitorCode = data.code*/ /* this.queryParams.monitorCode = data.code*/
this.queryParams.sensorId = data.code this.queryParams.monitorId = data.code
console.log("this.queryParams.sensorId"+this.queryParams.sensorId)
this.selectMonitorName = data.label this.selectMonitorName = data.label
this.handleQuery() this.handleQuery()
@ -282,7 +278,7 @@ export default {
/** 振动曲线 */ /** 振动曲线 */
async getChart() { async getChart() {
if (this.queryParams.sensorId == null) { if (this.queryParams.monitorId == null) {
return return
} }
let query = JSON.parse(JSON.stringify(this.queryParams)) let query = JSON.parse(JSON.stringify(this.queryParams))
@ -362,6 +358,7 @@ export default {
series: [ series: [
{ {
name: '速度(mm/s)', name: '速度(mm/s)',
connectNulls: true, // 关键配置
type: 'line', type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
@ -456,6 +453,7 @@ export default {
series: [ series: [
{ {
name: '温度(℃)', name: '温度(℃)',
connectNulls: true, // 关键配置
type: 'line', type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
@ -549,6 +547,7 @@ export default {
series: [ series: [
{ {
name: '位移(um)', name: '位移(um)',
connectNulls: true, // 关键配置
type: 'line', type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
@ -642,6 +641,7 @@ export default {
series: [ series: [
{ {
name: '加速度(g)', name: '加速度(g)',
connectNulls: true, // 关键配置
type: 'line', type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。

Write Preview
Loading…
Cancel
Save