Browse Source

no message

linwenxin 1 year ago
parent
commit
8fa0803d6a

+ 20 - 7
src/views/bigViews/dataView1/components/trendChart.vue

@@ -2,19 +2,19 @@
   <moduleEnclosure title="趋势图">
     <template v-slot:rightce>
       <div class="classbtns">
-        <div @click="cindex = 0" :class="{
+        <div @click="cindex = 0;" :class="{
           select: cindex === 0,
         }">
           浏览量(PV)
         </div>
-        <div @click="cindex = 1" :class="{
+        <div @click="cindex = 1;" :class="{
           select: cindex === 1,
         }">
           访客量(UV)
         </div>
       </div>
     </template>
-    <div style="width: 100%; height: 100%">
+    <div style="width: 100%; height: 100%" @mouseenter="mouseenter" @mouseleave="dingshishuaxin">
       <div :id="`chartmain_fkell`" style="width: 100%; height: 100%"></div>
     </div>
   </moduleEnclosure>
@@ -35,18 +35,31 @@ export default {
     };
   },
   mounted() {
-    this.getbigGetLarge3()
+    this.dingshishuaxin()
   },
   beforeUnmount() {
-
+    this.mouseenter(); 
   },
   watch: {
-    cindex(){
-      this.getbigGetLarge3()
+    cindex() {
+      this.mouseenter(); 
+      this.dingshishuaxin()
     }
   },
   methods: {
+    mouseenter() {
+      if (this.TimeId) {
+        clearTimeout(this.TimeId)
+      }
+    },
+    dingshishuaxin() {
+      this.getbigGetLarge3()
+      this.TimeId = setTimeout(() => {
+        this.cindex = this.cindex == 0 ? 1 : 0
+      }, 10000)
+    },
     getbigGetLarge3() {
+      console.log(11111)
       bigGetLarge3().then(res => {
         this.eac(res.data)
       })

+ 46 - 22
src/views/bigViews/dataView1/components/workOrderTrend.vue

@@ -1,22 +1,17 @@
 <template>
   <moduleEnclosure title="近30天工单趋势">
-	  <template v-slot:rightce>
+    <template v-slot:rightce>
       <v-scroll-view :x="true" :y="false" slidingBgClassName="slidingBgClassName"
         slidingBlockClassName="slidingBlockClassName">
         <div class="tabbar">
-          <div
-            class="tab"
-            :class="tabCurrent == item ? 'active' : ''"
-            v-for="(item, index) in tabList"
-            :key="index"
+          <div class="tab" :class="tabCurrent == item ? 'active' : ''" v-for="(item, index) in tabList" :key="index"
             @click="changeTab(item)">
-            {{item}}
+            {{ item }}
           </div>
         </div>
       </v-scroll-view>
-	    
-	  </template>
-		<div class="all-container">
+    </template>
+    <div class="all-container" @mouseenter="mouseenter" @mouseleave="dingshishuaxin">
       <div id="workorderEcharts1" style="width: 100%; height: 100%"></div>
     </div>
   </moduleEnclosure>
@@ -42,36 +37,62 @@ export default {
   },
 
   mounted() {
-    this.initData();
+    this.dingshishuaxin()
   },
 
   beforeUnmount() {
-    
+    this.mouseenter();
+  },
+
+  watch: {
+    tabCurrent() {
+      this.mouseenter();
+      this.dingshishuaxin()
+    }
   },
 
   methods: {
+    mouseenter() {
+      if (this.TimeId) {
+        clearTimeout(this.TimeId)
+      }
+    },
+    dingshishuaxin() {
+      this.initData();
+      this.TimeId = setTimeout(() => {
+        this.setbiuaoji()
+      }, 10000)
+    },
     getDate() {
       const today = new Date();
       const dates = [];
-      
       for (let i = 0; i < 30; i++) {
         const d = new Date();
         d.setDate(today.getDate() - i);
         dates.unshift(d.toISOString().split('T')[0].slice(5, 11));
       }
-      
       return dates;
     },
 
+    setbiuaoji() {
+      var index = this.tabList.indexOf(this.tabCurrent)
+      if (index >= (this.tabList.length - 1)) {
+        this.tabCurrent = this.tabList[0]
+      } else {
+        this.tabCurrent = this.tabList[index + 1]
+      }
+    },
+
     changeTab(item) {
       this.tabCurrent = item;
-      this.initEcharts();
     },
 
     initData() {
       getWorkorderTrend().then(res => {
         this.tabList = res.data.map(o => o.lx);
-        this.tabCurrent = this.tabList[0];
+        if (this.tabCurrent == "") {
+          this.setbiuaoji()
+        }
         this.tableData = res.data;
         this.initEcharts();
       })
@@ -193,13 +214,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
 ::v-deep .slidingBgClassName {
-  background: rgba(0,0,0,0) !important;
+  background: rgba(0, 0, 0, 0) !important;
 }
 
 ::v-deep .slidingBlockClassName {
-  background: rgba(0,0,0,0) !important;
+  background: rgba(0, 0, 0, 0) !important;
 }
 
 .all-container {
@@ -208,10 +228,12 @@ export default {
   box-sizing: border-box;
   padding-top: 16px;
 }
-.tabbar{
+
+.tabbar {
   width: fit-content;
   display: flex;
-  .tab{
+
+  .tab {
     flex-shrink: 0;
     width: 50px;
     color: #ffffff;
@@ -222,11 +244,13 @@ export default {
     margin-right: 10px;
     text-align: center;
     cursor: pointer;
+
     &:last-child {
       margin-right: 0;
     }
   }
-  .active{
+
+  .active {
     border: 1px solid #153781;
     color: #1a8dc8;
   }