设备温湿度，增加多通道，多曲线功能

src/main.js

@@ -16,6 +16,7 @@ import 'echarts/lib/chart/line'
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/component/title'
 import 'echarts/lib/component/toolbox'
+import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/markPoint' // 最值
 import 'echarts/lib/component/markLine' // 平均值
 import 'echarts/lib/component/legendScroll'

src/sdk/config.js

@@ -1,6 +1,6 @@
 export default {
-  serverAddress: 'http://115.238.57.190:8010',
-  // serverAddress: 'http://121.36.134.218:8010',
+  // serverAddress: 'http://115.238.57.190:8010',
+  serverAddress: 'http://121.36.134.218:8010',
   timeout:50000,
   method:'POST',
   clientid:1,//客户端编号

src/views/deviceManagement/deviceHumiture/charts/chart_a.vue

@@ -7,16 +7,39 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            series: [],
+            optionKeys: [],
+            time: []
+        };
     },
     props: {
-         data:{type:Array},
-         time:{type:Array}
-     },
-    created() {
+        option: { type: Object }
     },
+    created() {},
     watch: {
-        data(nVal,oVal) {
+        option(nVal, oVal) {
+            
+            this.optionKeys = Object.keys(this.option);
+            this.series = [];
+            Object.keys(this.option).forEach(key => {
+                this.series.push({
+                    name: "通道" + key,
+                    type: "line",
+                    data: this.option[key].data.reverse(),
+                    markPoint: {
+                        data: [
+                            { type: "max", name: "最大值" },
+                            { type: "min", name: "最小值" }
+                        ]
+                    },
+                    markLine: {
+                        data: [{ type: "average", name: "平均值" }]
+                    }
+                });
+            });
+            this.time = this.option[this.optionKeys[0]].time.reverse();
+
             this.drawChart();
         }
     },
@@ -27,7 +50,7 @@ export default {
         drawChart() {
             // 基于准备好的dom，初始化echarts实例
             let myChart = this.$echarts.init(
-                document.getElementById('chart_a')
+                document.getElementById("chart_a")
             );
             // 指定图表的配置项和数据
             let option = {
@@ -37,7 +60,14 @@ export default {
                     left: 100
                 },
                 tooltip: {
-                    trigger: "axis"
+                    trigger: "axis",
+                    formatter: function(params) {
+                        let str = `${params[0].axisValue}`;
+                        params.forEach(item => {
+                            str += `<br /><span style='width:10px;height:10px;background-color:#f00;border-radius:50%;display: inline-block;margin-right:3px;'></span>${item.seriesName}：${item.value} ℃`;
+                        });
+                        return str;
+                    }
                 },
                 toolbox: {
                     show: true,
@@ -80,22 +110,7 @@ export default {
                     },
                     scale: true
                 },
-                series: [
-                    {
-                        name: "耳温",
-                        type: "line",
-                        data: this.data,
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
+                series: this.series
             };
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
@@ -105,5 +120,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 </style>

src/views/deviceManagement/deviceHumiture/charts/chart_b.vue

@@ -7,15 +7,41 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            series: [],
+            optionKeys: [],
+            time: []
+        };
     },
-    created() {},
     props: {
-        data:{type:Array},
-        time:{type:Array}
+         option:{type:Object}
+     },
+    created() {
     },
     watch: {
-        data(nVal,oVal) {
+        option(nVal,oVal) {
+            this.optionKeys =  Object.keys(this.option)
+            this.series = [];
+            Object.keys(this.option).forEach(key => {
+                this.series.push(
+                    {
+                        name: "通道"+key,
+                        type: "line",
+                        data: this.option[key].data.reverse(),
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                )
+            })
+            this.time = this.option[this.optionKeys[0]].time.reverse()
+
             this.drawChart();
         }
     },
@@ -25,7 +51,9 @@ export default {
     methods: {
         drawChart() {
             // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(document.getElementById("chart_b"));
+            let myChart = this.$echarts.init(
+                document.getElementById('chart_b')
+            );
             // 指定图表的配置项和数据
             let option = {
                 title: {
@@ -34,7 +62,14 @@ export default {
                     left: 100
                 },
                 tooltip: {
-                    trigger: "axis"
+                    trigger: "axis",
+                    formatter: function(params) {
+                        let str = `${params[0].axisValue}`
+                        params.forEach((item) => {
+                            str += `<br /><span style='width:10px;height:10px;background-color:#f00;border-radius:50%;display: inline-block;margin-right:3px;'></span>${item.seriesName}：${item.value} %`
+                        });
+                        return str
+                    }
                 },
                 toolbox: {
                     show: true,
@@ -68,32 +103,16 @@ export default {
                 xAxis: {
                     type: "category",
                     boundaryGap: false,
-                    data: this.time 
+                    data: this.time
                 },
                 yAxis: {
                     type: "value",
                     axisLabel: {
-                        formatter: "{value}%"
+                        formatter: "{value} %"
                     },
                     scale: true
                 },
-                series: [
-                    {
-                        name: "耳温",
-                        type: "line",
-                        // data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
-                        data: this.data,
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
+                series: this.series
             };
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
@@ -103,4 +122,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>

src/views/deviceManagement/deviceHumiture/deviceHumiture.vue

@@ -27,22 +27,17 @@
                 align="right"
                 class="date-picker"
             ></el-date-picker>
-            <article v-if="temperatureData || humidityData">
+            <article v-if="temperature || humidity">
                 <chart-a
-                    v-if="temperatureData"
-                    :data="temperatureData"
-                    :time="temperatureTime"
+                    :option="temperature"
                     class="charts"
                 ></chart-a>
-                <p v-else class="hint">当前时间段无温度数据...</p>
                 <chart-b
-                    v-if="humidityData"
-                    :data="humidityData"
-                    :time="humidityTime"
+                    :option="humidity"
                     class="charts"
                 ></chart-b>
-                <p v-else class="hint">当前时间段无温度数据...</p>
             </article>
+            <p v-else class="hint">当前时间段无温度数据...</p>
         </section>
     </div>
 </template>
@@ -113,11 +108,8 @@ export default {
     data() {
         return {
             mainInfo: {},
-            temperatureData: [],
-            temperatureTime: [],
-            humidityData: [],
-            humidityTime: [],
-
+            temperature: {},
+            humidity: {},
             pickerOptions,
             value2: null,
             SDate: Math.floor((new Date().getTime() - 3600 * 1000 * 6) / 1000), // 默认最近六小时
@@ -159,20 +151,28 @@ export default {
                 },
                 // data: { deviceId: 666, type },
                 success: res => {
-                    console.log(res);
+                    let temperature = {};
+                    let humidity = {}
                     console.log(type);
                     if (type == 1) {
                         res.content.forEach(item => {
-                            this.temperatureData.push(item.value);
-                            this.temperatureTime.push(item.created);
+                            // 会有不止一组温度数据， 通过 channelNo 来判断 有几个不同的 channelNo 就渲染几条折线
+                            if(!temperature[item.channelNo]) {
+                                temperature[item.channelNo] = {data: [], time: []}
+                            }
+                            temperature[item.channelNo].data.push(item.value)
+                            temperature[item.channelNo].time.push(item.created)
                         });
-                        console.log(this.temperature);
+                        this.temperature = temperature
                     } else if (type == 2) {
                         res.content.forEach(item => {
-                            this.humidityData.push(item.value);
-                            this.humidityTime.push(item.created);
+                            if(!humidity[item.channelNo]) {
+                                humidity[item.channelNo] = {data: [], time: []}
+                            }
+                            humidity[item.channelNo].data.push(item.value)
+                            humidity[item.channelNo].time.push(item.created)
                         });
-                        console.log(this.temperature);
+                        this.humidity = humidity
                     }
                 },
                 fail: err => {