From 33665401136b286ac260c7a8c7082de5e0522a05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Fri, 30 Aug 2024 08:58:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B8=A9=E6=B9=BF=E5=BA=A6?= =?UTF-8?q?=E7=9B=91=E6=8E=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Charts/Chart.vue | 9 ++- .../TemperatureHumidityMonitoring/index.vue | 10 +++ .../ems/report/currentIOTCurve/index.vue | 75 +++++++++---------- 3 files changed, 53 insertions(+), 41 deletions(-) diff --git a/src/components/Charts/Chart.vue b/src/components/Charts/Chart.vue index 65345a2..abd2931 100644 --- a/src/components/Charts/Chart.vue +++ b/src/components/Charts/Chart.vue @@ -10,8 +10,9 @@ export default { watch:{ chartOption: { handler(newVal, oldVal) { - console.log(newVal) - this.initChart(newVal) + if(newVal){ + this.initChart(newVal) + } }, deep: true, // 是否深度监听 } @@ -24,7 +25,9 @@ export default { } }, mounted() { - this.initChart(this.chartOption) + if(this.chartOption){ + this.initChart(this.chartOption) + } }, beforeDestroy() { if (!this.chart) { diff --git a/src/views/ems/report/TemperatureHumidityMonitoring/index.vue b/src/views/ems/report/TemperatureHumidityMonitoring/index.vue index e2f7364..df362fe 100644 --- a/src/views/ems/report/TemperatureHumidityMonitoring/index.vue +++ b/src/views/ems/report/TemperatureHumidityMonitoring/index.vue @@ -57,6 +57,7 @@
+
{{item.monitorName}}
@@ -327,6 +328,15 @@ export default { display: inline-block; width: 50%; height: 40vh; + position: relative; +} +.chart .title{ + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + font-size: 1vw; + font-weight: 700; } .chart2 { diff --git a/src/views/ems/report/currentIOTCurve/index.vue b/src/views/ems/report/currentIOTCurve/index.vue index 51417e3..9354a88 100644 --- a/src/views/ems/report/currentIOTCurve/index.vue +++ b/src/views/ems/report/currentIOTCurve/index.vue @@ -69,10 +69,10 @@ import { listRecordIOTInstant, getRecordIOTInstant, iotInstantList } from '@/api/ems/record/recordIOTInstant' -import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo' +import {getMonitorInfoTree} from '@/api/ems/base/baseMonitorInfo' import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' -import { parseTime } from '@/utils/ruoyi' +import {parseTime} from '@/utils/ruoyi' import Chart from '@/components/Charts/Chart' import * as echarts from 'echarts' @@ -139,25 +139,25 @@ export default { // 表单校验 rules: { objId: [ - { required: true, message: '编号不能为空', trigger: 'blur' } + {required: true, message: '编号不能为空', trigger: 'blur'} ] }, columns: [ - { key: 0, label: `主键标识`, visible: false }, - { key: 1, label: `计量设备编号`, visible: true }, - { key: 2, label: `采集时间`, visible: true }, - { key: 3, label: `温度`, visible: true }, - { key: 4, label: `湿度`, visible: true }, - { key: 5, label: `照度`, visible: true }, - { key: 6, label: `噪声`, visible: true }, - { key: 7, label: `硫化氢浓度`, visible: true }, - { key: 8, label: `记录时间`, visible: true }, - { key: 9, label: `报警类型`, visible: true }, - { key: 10, label: ``, visible: true }, - { key: 11, label: ``, visible: false }, - { key: 12, label: ``, visible: false }, - { key: 13, label: ``, visible: true }, - { key: 14, label: ``, visible: true } + {key: 0, label: `主键标识`, visible: false}, + {key: 1, label: `计量设备编号`, visible: true}, + {key: 2, label: `采集时间`, visible: true}, + {key: 3, label: `温度`, visible: true}, + {key: 4, label: `湿度`, visible: true}, + {key: 5, label: `照度`, visible: true}, + {key: 6, label: `噪声`, visible: true}, + {key: 7, label: `硫化氢浓度`, visible: true}, + {key: 8, label: `记录时间`, visible: true}, + {key: 9, label: `报警类型`, visible: true}, + {key: 10, label: ``, visible: true}, + {key: 11, label: ``, visible: false}, + {key: 12, label: ``, visible: false}, + {key: 13, label: ``, visible: true}, + {key: 14, label: ``, visible: true} ] } }, @@ -237,7 +237,7 @@ export default { /** 查询计量设备信息下拉树结构 */ getTreeselect() { - getMonitorInfoTree({ monitorTypeList: [5,6,7,8,9]}).then(response => { + getMonitorInfoTree({monitorTypeList: [5, 6, 7, 8, 9]}).then(response => { this.monitorInfoOptions = response.data }) }, @@ -249,7 +249,7 @@ export default { }, /** 节点单击事件 */ - handleNodeClick(data,type,a) { + handleNodeClick(data, type, a) { console.log(type.parent.data) console.log(a) // this.queryParams.monitorTypeList = type @@ -264,7 +264,7 @@ export default { return } let query = JSON.parse(JSON.stringify(this.queryParams)) - const { data } = await iotInstantList(query) + const {data} = await iotInstantList(query) let option1 = { title: { text: '物联网设备曲线', @@ -340,7 +340,7 @@ export default { ], series: [ { - tooltip:{ + tooltip: { show: data.monitorTypeArr.includes('温度') ? true : false }, name: '温度', @@ -359,11 +359,11 @@ export default { // areaStyle: { // color: "rgba(5,140,255, 0.2)", // }, - data: data.monitorTypeArr.includes('温度')?data.dataList.map(e => e.tempreture):[] + data: data.monitorTypeArr.includes('温度') ? data.dataList.map(e => e.tempreture) : [] }, { - tooltip:{ - show: data.monitorTypeArr.includes('湿度') ? true : false + tooltip: { + show: data.monitorTypeArr.includes('湿度') ? true : false }, name: '湿度', type: data.type, @@ -381,11 +381,11 @@ export default { // areaStyle: { // color: "rgba(5,140,255, 0.2)", // }, - data: data.monitorTypeArr.includes('湿度') ?data.dataList.map(e => e.humidity):[] + data: data.monitorTypeArr.includes('湿度') ? data.dataList.map(e => e.humidity) : [] }, { - tooltip:{ - show: data.monitorTypeArr.includes('噪声') ? true : false + tooltip: { + show: data.monitorTypeArr.includes('噪声') ? true : false }, name: '噪声', type: data.type, @@ -403,11 +403,11 @@ export default { // areaStyle: { // color: "rgba(5,140,255, 0.2)", // }, - data: data.monitorTypeArr.includes('噪声') ? data.dataList.map(e => e.noise):[] + data: data.monitorTypeArr.includes('噪声') ? data.dataList.map(e => e.noise) : [] }, { - tooltip:{ - show: data.monitorTypeArr.includes('照度') ? true : false + tooltip: { + show: data.monitorTypeArr.includes('照度') ? true : false }, name: '照度', type: data.type, @@ -425,11 +425,11 @@ export default { // areaStyle: { // color: "rgba(5,140,255, 0.2)", // }, - data: data.monitorTypeArr.includes('照度') ? data.dataList.map(e =>e.illuminance):[] + data: data.monitorTypeArr.includes('照度') ? data.dataList.map(e => e.illuminance) : [] }, { - tooltip:{ - show: data.monitorTypeArr.includes('气体浓度') ? true : false + tooltip: { + show: data.monitorTypeArr.includes('气体浓度') ? true : false }, name: '气体浓度', type: data.type, @@ -447,14 +447,13 @@ export default { // areaStyle: { // color: "rgba(5,140,255, 0.2)", // }, - data: data.monitorTypeArr.includes('气体浓度') ? data.dataList.map(e =>e.concentration):[] + data: data.monitorTypeArr.includes('气体浓度') ? data.dataList.map(e => e.concentration) : [] } ] } - + console.log(option1) this.$refs.Chart1.setData(option1) - // option1 && Chart1.setOption(option1); - // this.$refs.Chart2.setData(option2) + echarts.connect(this.$refs.Chart1.chart) // , this.$refs.Chart2.chart this.$refs.Chart1.chart.on('datazoom', (e) => {