111

src/components/HeaderElement.vue

@@ -70,10 +70,10 @@
             <div style="width: 100%; text-align: center">
               <el-popover
                   placement="bottom"
-                  width="400"
+                  width="270"
                   trigger="hover">
                 <div class="color_flex">
-                  <slider-picker :value="color" @input="cut"></slider-picker>
+                  <chrome-picker :value="color" @input="cut"></chrome-picker>
 <!--                  <div v-for="item in colorList" :style="{backgroundColor: item.color}" :key="item.id" class="box" @click="cut(item.color)">-->
 <!--                    <span>点击换肤</span>-->
 <!--                  </div>-->
@@ -97,14 +97,17 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import { findUpdate, getFarmId } from '../utils/api';
-import { Slider } from 'vue-color'
+import { Chrome } from 'vue-color';
+import { Debounce } from "../utils";
+
 export default {
   name: "HeaderElement",
   computed: {
     ...mapState(['color', 'farmList', 'farmId'])
   },
   components: {
-    'slider-picker': Slider
+    // 'slider-picker': Slider,
+    'chrome-picker': Chrome
   },
   data() {
     return {
@@ -147,8 +150,7 @@ export default {
   },
   methods: {
     ...mapActions(['setModeAsync', 'setColorAsync', 'GetFarm', 'setFarmIdAsync']),
-    cut(data) {
-      console.log(data)
+    cut: Debounce(function(data) {
       this.setColorAsync(data.hex)
       let params = {
         id: localStorage.getItem('UserId'),
@@ -157,7 +159,7 @@ export default {
       findUpdate(params).then(res => {
         console.log(res)
       })
-    },
+    }),
     changeMode(val) {
       let params = {
         id: localStorage.getItem('UserId'),
@@ -275,13 +277,8 @@ li {
 }
 .color_flex {
   width: 100%;
-  height: 200px;
+  height: 260px;
   padding: 10px;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
 }
 .box {
   cursor: pointer;

src/utils/index.js

@@ -18,3 +18,45 @@ export function timeDate(timestamp) {
   var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate()
   return Y + M + D
 }
+
+/**
+ * 函数防抖 (只执行最后一次点击)
+ */
+export const Debounce = (fn, t) => {
+  let delay = t || 500;
+  let timer;
+  console.log(fn)
+  console.log(typeof fn)
+  return function () {
+    let args = arguments;
+    if(timer){
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, args);
+    }, delay);
+  }
+};
+/*
+ * 函数节流
+ */
+export const Throttle = (fn, t) => {
+  let last;
+  let timer;
+  let interval = t || 500;
+  return function () {
+    let args = arguments;
+    let now = + new Date();
+    if (last && now - last < interval) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        last = now;
+        fn.apply(this, args);
+      }, interval);
+    } else {
+      last = now;
+      fn.apply(this, args);
+    }
+  }
+};

src/views/Env/chart/ChartStarkBarOne.vue

@@ -26,6 +26,12 @@ export default {
         }
       },
       deep: true
+    },
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
     }
   },
   computed: {
@@ -44,10 +50,18 @@ export default {
         time.push(item.createTime);
         data1.push(item.value)
       })
+      let start = time.length - 8;
+      let end = time.length - 1;
       var option = {
         tooltip: {
           trigger: 'axis',
         },
+        dataZoom: [{
+          type: 'inside',
+          startValue: start,
+          endValue: end,
+          show: false
+        }],
         color: [this.color],
         xAxis: [
           {

src/views/dashboard/chart/ChartWsd.vue

@@ -37,10 +37,12 @@ export default {
       let time = [];
       let humList = [];
       let tempList = [];
-      temp.forEach((item, i) => {
+      temp.forEach((item) => {
         time.push(item.createTime.split(' ')[0]);
         tempList.push(item.value);
-        humList.push(hum[i].value)
+      })
+      hum.forEach((item) => {
+        humList.push(item.value)
       })
       let options = {
         title: {