修改温湿度监控

src/components/Charts/Chart.vue

@@ -10,8 +10,9 @@ export default {
   watch:{
     chartOption: {
       handler(newVal, oldVal) {
-        console.log(newVal)
+        if(newVal){
           this.initChart(newVal)
+        }
       },
       deep: true, // 是否深度监听
     }
@@ -24,7 +25,9 @@ export default {
     }
   },
   mounted() {
+    if(this.chartOption){
       this.initChart(this.chartOption)
+    }
   },
   beforeDestroy() {
     if (!this.chart) {

src/views/ems/report/TemperatureHumidityMonitoring/index.vue

@@ -57,6 +57,7 @@
         </el-form>
         <div v-for="item in list" class="chart">
           <Chart ref="Chart1" style="width: 100%;height: 100%" :chartOption="getChart(item)"/>
+          <div class="title">{{item.monitorName}}</div>
         </div>
       </el-col>
     </el-row>
@@ -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 {

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,10 +359,10 @@ 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:{
+            tooltip: {
               show: data.monitorTypeArr.includes('湿度') ? true : false
             },
             name: '湿度',
@@ -381,10 +381,10 @@ 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:{
+            tooltip: {
               show: data.monitorTypeArr.includes('噪声') ? true : false
             },
             name: '噪声',
@@ -403,10 +403,10 @@ 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:{
+            tooltip: {
               show: data.monitorTypeArr.includes('照度') ? true : false
             },
             name: '照度',
@@ -425,10 +425,10 @@ 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:{
+            tooltip: {
               show: data.monitorTypeArr.includes('气体浓度') ? true : false
             },
             name: '气体浓度',
@@ -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) => {