From e74953801611e1e454578e714f38347cd95599ec Mon Sep 17 00:00:00 2001 From: zch Date: Thu, 5 Jun 2025 09:42:32 +0800 Subject: [PATCH] =?UTF-8?q?refactor(ems):=20=E4=BC=98=E5=8C=96=E6=9B=B2?= =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E8=A1=A8=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?= =?UTF-8?q?=EF=BC=8C=E6=97=B6=E9=97=B4=E4=BB=8E=E6=97=A9=E5=88=B0=E6=99=9A?= =?UTF-8?q?ASC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除sensorId - 时间从早到晚ASC - 调整查询参数和图表数据处理方式 - 添加 connectNulls 配置以优化曲线显示(不断点) - 删除未使用的图表选项代码 - 修改图表数据同步逻辑 --- .../ems/report/currentIOTCurve/index.vue | 480 ++++++++---------- .../report/currentVibrationCurve/index.vue | 52 +- 2 files changed, 239 insertions(+), 293 deletions(-) diff --git a/src/views/ems/report/currentIOTCurve/index.vue b/src/views/ems/report/currentIOTCurve/index.vue index 0853d10..b0dc2d8 100644 --- a/src/views/ems/report/currentIOTCurve/index.vue +++ b/src/views/ems/report/currentIOTCurve/index.vue @@ -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", - // }, - // lineStyle: { - // color: "#058cff", - // }, - // areaStyle: { - // color: "rgba(5,140,255, 0.2)", - // }, - data: data.map(e => e.illuminance) - }, - ] - } + // 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 = { 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", - // }, - // lineStyle: { - // color: "#058cff", - // }, - // areaStyle: { - // color: "rgba(5,140,255, 0.2)", - // }, - data: data.map(e => e.concentration) - }, - ] - } + // 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.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) }) } } diff --git a/src/views/ems/report/currentVibrationCurve/index.vue b/src/views/ems/report/currentVibrationCurve/index.vue index ec860c1..801e9ad 100644 --- a/src/views/ems/report/currentVibrationCurve/index.vue +++ b/src/views/ems/report/currentVibrationCurve/index.vue @@ -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, //显示所有图形。