# add humiture

src/lang/en.js

@@ -177,6 +177,7 @@ export default {
     screen: 'Screen chart',
     trendChart: 'Trend chart',
     region: 'Region',
-    deviceName: 'Device Name'
+    deviceName: 'Device Name',
+    humitureChart: 'Humiture chart'
   }
 }

src/lang/zh.js

@@ -177,6 +177,7 @@ export default {
     screen: '显示屏',
     trendChart: '趋势图',
     region: '地区',
-    deviceName: '设备名称'
+    deviceName: '设备名称',
+    humitureChart: '温湿度'
   }
 }

src/views/counter/components/humiture.vue

@@ -0,0 +1,174 @@
+<template>
+  <div id="chart" :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object
+    },
+    showHumiture: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      rotate: 0,
+      screenWidth: document.body.clientWidth
+    }
+  },
+  mounted() {
+    window.screenWidth = document.body.clientWidth
+    if (window.screenWidth <= 400) {
+      this.rotate = 30
+    }
+    this.initChart()
+    if (this.autoResize) {
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHanlder)
+    }
+
+    // 监听侧边栏的变化
+    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
+
+    // 监听窗体大小
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        window.screenWidth = document.body.clientWidth
+        that.screenWidth = window.screenWidth
+        console.log(window.screenWidth)
+        if (window.screenWidth <= 400) {
+          this.rotate = 30
+        }
+      })()
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.autoResize) {
+      window.removeEventListener('resize', this.__resizeHanlder)
+    }
+
+    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+    sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
+
+    this.chart.dispose()
+    this.chart = null
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    },
+    showHumiture(val) {
+      if (val) {
+        console.log(val)
+        this.chart.resize()
+      }
+    },
+    screenWidth(val) {
+      this.screenWidth = val
+      if (val <= 400) {
+        this.rotate = 30
+        this.setOptions(this.chartData)
+      } else {
+        this.rotate = 0
+        this.setOptions(this.chartData)
+      }
+    }
+  },
+  methods: {
+    setOptions({ historyData, xAxis, title } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: xAxis,
+          boundaryGap: false,
+          axisLabel: {
+            interval: 0,
+            rotate: this.rotate
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: [title]
+        },
+        series: [{
+          name: title, itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: historyData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        }]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      console.log(this.chartData)
+      // this.setOptions(this.chartData)
+    }
+  }
+}
+</script>

src/views/counter/detail.vue

@@ -20,6 +20,15 @@
           </chart>
         </el-row>
       </el-tab-pane>
+      <el-tab-pane :label="$t('counter.humitureChart')" name="humiture">
+        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+          <humiture
+            :chart-data="lineChartData.total"
+            :showHumiture="showHumiture"
+          >
+          </humiture>
+        </el-row>
+      </el-tab-pane>
     </el-tabs>
     
     <el-table
@@ -61,6 +70,7 @@
 import { fetchDeviceList, fetchDeviceLogsHistory } from '@/api/counter'
 import Screen from './components/screen'
 import Chart from './components/chart'
+import Humiture from './components/humiture'
 
 // const defaultLastItem = {
 //   count: '0',
@@ -72,7 +82,8 @@ export default {
   name: 'deviceDetail',
   components: {
     Screen,
-    Chart
+    Chart,
+    Humiture
   },
   data() {
     return {
@@ -89,6 +100,7 @@ export default {
       total: 0,
       lastItem: {},
       showChart: false,
+      showHumiture: false,
       flag: false
     }
   },
@@ -97,6 +109,9 @@ export default {
       if (val === 'chart') {
         this.showChart = true
       }
+      if (val === 'humiture') {
+        this.showHumiture = true
+      }
     }
   },
   methods: {
@@ -147,6 +162,13 @@ export default {
     },
     handleTabClick(tab, event) {
       // console.log(tab, event)
+      // 解决siderbar变化，disactiveTab没有resize
+      if (tab.name === 'chart') {
+        this.showHumiture = false
+      }
+      if (tab.name === 'humiture') {
+        this.showChart = false
+      }
     }
   },
   created() {