数据大屏手动翻转及部分优化

src/component/bar.vue

@@ -33,7 +33,7 @@
         'px;'
       "
     >
-      <div :id="this.list.bt" style="width: 100%; height: 100%" />
+      <div :ref="this.list.bt" style="width: 100%; height: 100%" />
     </div>
   </div>
 </template>
@@ -46,6 +46,7 @@ export default {
   props: ["height", "list"],
   data() {
     return {
+      myChart: null,
       fontweight: "",
       fontsize: "",
       fontfamily: "",
@@ -243,8 +244,11 @@ export default {
       });
     },
     initEcharts() {
-      const myChart = echarts.init(document.getElementById(this.list.bt));
-      myChart.setOption(this.option);
+      if (this.myChart) {
+      } else {
+        this.myChart = echarts.init(this.$refs[this.list.bt]);
+      }
+      this.myChart.setOption(this.option);
     },
   },
 };

src/component/column.vue

@@ -13,7 +13,7 @@
       {{ this.list.bt }}
     </div>
     <div class="content" :style="'width:100%;height:' + (this.height - titleHeight) + 'px'">
-      <div :id="this.list.bt" :style="'width:100%;height:' + (this.height - titleHeight) + 'px'" />
+      <div :ref="this.list.bt" :style="'width:100%;height:' + (this.height - titleHeight) + 'px'" />
     </div>
   </div>
 </template>
@@ -26,6 +26,7 @@ export default {
   props: ["height", "list"],
   data() {
     return {
+      myChart: null,
       option: {},
       titleHeight: "",
       textalign: "",
@@ -190,8 +191,11 @@ export default {
       })
     },
     initEcharts() {
-      const myChart = echarts.init(document.getElementById(this.list.bt));
-      myChart.setOption(this.option);
+      if (this.myChart) {
+      } else {
+        this.myChart = echarts.init(this.$refs[this.list.bt]);
+      }
+      this.myChart.setOption(this.option);
     },
   },
 };

src/component/custom9.vue

@@ -33,7 +33,7 @@
         'px;'
       "
     >
-      <div :id="this.list.bt" style="width: 100%; height: 100%" />
+      <div :ref="this.list.bt" style="width: 100%; height: 100%" />
     </div>
   </div>
 </template>
@@ -43,20 +43,21 @@ import * as echarts from "echarts";
 import { Interface } from "@/api/index";
 import { Message } from "element-ui";
 const colors = [
-    "#1fab89",
-    "#f5c7f7",
-    "#ff2e63",
-    "#08d9d6",
-    "#aa96da",
-    "#e84545",
-    "#ff9999",
-    "#a1eafb",
-    "#f57170",
-]
+  "#1fab89",
+  "#f5c7f7",
+  "#ff2e63",
+  "#08d9d6",
+  "#aa96da",
+  "#e84545",
+  "#ff9999",
+  "#a1eafb",
+  "#f57170",
+];
 export default {
   props: ["height", "list"],
   data() {
     return {
+      myChart: null,
       fontweight: "",
       fontsize: "",
       fontfamily: "",
@@ -163,9 +164,9 @@ export default {
               data: res.xData,
               axisLine: {
                 lineStyle: {
-                    color: "#ffffff"
-                }
-              }
+                  color: "#ffffff",
+                },
+              },
             };
             option.yAxis = yAxis;
             option.series = series;
@@ -180,8 +181,11 @@ export default {
       });
     },
     initEcharts() {
-      const myChart = echarts.init(document.getElementById(this.list.bt));
-      myChart.setOption(this.option);
+      if (this.myChart) {
+      } else {
+        this.myChart = echarts.init(this.$refs[this.list.bt]);
+      }
+      this.myChart.setOption(this.option);
     },
   },
 };

src/component/foldline.vue

@@ -6,7 +6,7 @@
         </div>
         <div
             :style="'margin-top: ' + margintop + 'px;width:100%;height:' + (this.height - titleHeight - margintop) + 'px;'">
-            <div :id="this.list.bt" style="width: 100%;height:100%;" />
+            <div :ref="this.list.bt" style="width: 100%;height:100%;" />
         </div>
     </div>
 </template>
@@ -19,6 +19,7 @@ export default {
     props: ['height', "list"],
     data() {
         return {
+      myChart: null,
             fontweight: '',
             fontsize: '',
             fontfamily: '',
@@ -292,9 +293,12 @@ export default {
             })
         },
         initEcharts() {
-            const myChart = echarts.init(document.getElementById(this.list.bt));
-            myChart.setOption(this.option);
-            this.lunboEcharts(myChart, this.option, this.list.bt)
+            if (this.myChart) {
+            } else {
+              this.myChart = echarts.init(this.$refs[this.list.bt]);
+            }
+            this.myChart.setOption(this.option);
+            this.lunboEcharts(this.myChart, this.option, this.list.bt)
         },
         //轮播tootip
         lunboEcharts(echartsId, dataOption,) {

src/component/gxmap.vue

@@ -178,7 +178,7 @@
             <div class="box">
               <div class="icon" style="background-color: #6dd400"></div>
               <div class="tit">管户数量</div>
-              <div class="name">{{ wzlist[count].value+"户" }}</div>
+              <div class="name">{{ wzlist[count].value + "户" }}</div>
             </div>
             <div class="box">
               <div class="icon" style="background-color: #5c64ff"></div>
@@ -200,6 +200,7 @@ export default {
   props: ["height", "list"],
   data() {
     return {
+      xgTimer: null,
       map: require("@/assets/gxmap.png"),
       stateData: {},
       now: require("@/assets/center-center.png"),
@@ -333,8 +334,8 @@ export default {
           left: "16%",
           width: "13px",
         },
-   
-       
+
+
         {
           swjgdm: "16101985000",
           dz: "丈八北路7号",
@@ -344,7 +345,7 @@ export default {
           left: "83%",
           width: "10px",
         },
-      
+
         {
           swjgdm: "16101985300",
           dz: "西安城市技术学院北侧90米",
@@ -363,8 +364,8 @@ export default {
           left: "20%",
           width: "20px",
         },
-     
-      
+
+
 
         // {
         //   // swjgdm:
@@ -548,9 +549,9 @@ export default {
       //       }, 5 * 60 * 1000);
       //     }
       //   });
-      setTimeout(()=>{
+      clearTimeout(this.xgTimer)
+      this.xgTimer = setTimeout(()=>{
         this.xiaoguo();
-
       },5*1000)
 
 
@@ -568,18 +569,18 @@ export default {
       let n1 = b.replace("%", "");
       let s1 = 70 - JSON.parse(n1);
       document.querySelector("#xx").style.cssText =
-        "width:" +
-        s1 +
-        "%; height:" +
-        s +
-        "%; border-bottom: 2px solid #0df2fe;border-left: 2px solid #0df2fe;top:" +
-        a +
-        ";left:" +
-        b +
-        ";";
-
+      "width:" +
+      s1 +
+      "%; height:" +
+      s +
+      "%; border-bottom: 2px solid #0df2fe;border-left: 2px solid #0df2fe;top:" +
+      a +
+      ";left:" +
+      b +
+      ";";
 
-      setTimeout(() => {
+      clearTimeout(this.xgTimer)
+      this.xgTimer = setTimeout(() => {
         if (this.count < this.wzlist.length - 1) {
           this.count++;
         } else {
@@ -642,6 +643,8 @@ export default {
   beforeDestroy() {
     clearTimeout(this.changeTimer);
     this.changeTimer = null;
+    clearTimeout(this.xgTimer)
+    this.xgTimer = null
   },
 };
 </script>

src/component/moreBar.vue

@@ -33,7 +33,7 @@
         'px;'
       "
     >
-      <div :id="this.list.bt" style="width: 100%; height: 100%" />
+      <div :ref="this.list.bt" style="width: 100%; height: 100%" />
     </div>
   </div>
 </template>
@@ -46,6 +46,7 @@ export default {
   props: ["height", "list"],
   data() {
     return {
+      myChart: null,
       fontweight: "",
       fontsize: "",
       fontfamily: "",
@@ -173,8 +174,11 @@ export default {
       });
     },
     initEcharts() {
-      const myChart = echarts.init(document.getElementById(this.list.bt));
-      myChart.setOption(this.option);
+      if (this.myChart) {
+      } else {
+        this.myChart = echarts.init(this.$refs[this.list.bt]);
+      }
+      this.myChart.setOption(this.option);
     },
   },
 };

src/component/pie3.vue

@@ -81,7 +81,7 @@
       </div>
       <!-- 饼图部分 -->
       <div
-        :id="this.list.bt"
+        :ref="this.list.bt"
         :style="
           'width:100%;height:' +
           (this.height - titleHeight - margintop) +
@@ -101,6 +101,7 @@ export default {
   props: ["height", "list"],
   data() {
     return {
+      myChart: null,
       pie3time: null,
       option: {},
       fontweight: "",
@@ -393,8 +394,11 @@ export default {
     },
     // 初始化echarts
     initEcharts() {
-      const myChart = echarts.init(document.getElementById(this.list.bt));
-      myChart.setOption(this.option);
+      if (this.myChart) {
+      } else {
+        this.myChart = echarts.init(this.$refs[this.list.bt]);
+      }
+      this.myChart.setOption(this.option);
     },
   },
   beforeDestroy() {

src/views/login/handmode.vue

@@ -53,13 +53,25 @@
       :key="index"
     >
       <div
+        v-if="item.fourTableVoList.length > 1"
+        class="control-left"
+        @click="chageL(index, item.showIndex)"
+      >
+        <i class="el-icon-arrow-left"></i>
+      </div>
+      <div
+        v-if="item.fourTableVoList.length > 1"
+        class="control-right"
+        @click="chageR(index, item.showIndex)"
+      >
+        <i class="el-icon-arrow-right"></i>
+      </div>
+      <div
+        v-if="item.showIndex == elIndex"
         class="type-item"
         :id="'zj' + index"
-        v-for="(ele, index) in item.fourTableVoList"
-        :key="index"
-        :style="
-          item.fourTableVoList.length == 1 ? ' opacity: 1;' : ' opacity: 0;'
-        "
+        v-for="(ele, elIndex) in item.fourTableVoList"
+        :key="elIndex"
       >
         <component
           :is="ele.enName"
@@ -187,10 +199,10 @@ export default {
 
           this.top = JSON.parse(a)[0] + "px";
           this.left = JSON.parse(a)[1] + "px";
-          this.modelList = res.list;
-          setTimeout(() => {
-            this.setCSS(res.list);
-          }, 1000);
+          this.modelList = res.list.map((e) => {
+            e.showIndex = 0;
+            return e;
+          });
           if (this.$route.query.nwbg) {
             this.background = require("@/assets/background/" +
               this.$route.query.nwbg);
@@ -200,67 +212,32 @@ export default {
         Message.error("请配置相关参数!");
       }
     },
-    // 反转
-    setCSS(e) {
-      for (let i = 0; i < e.length; i++) {
-        if (document.querySelector("#aaa" + i).children.length > 1) {
-          let aaa = e[i];
-
-          // 定时方法
-          let count = 0;
-          // 第一次进入
-          if (count + 1 == document.querySelector("#aaa" + i).children.length) {
-            count = 0;
-          } else {
-            count++;
-          }
 
-          for (
-            let n = 0;
-            n < document.querySelector("#aaa" + i).children.length;
-            n++
-          ) {
-            document.querySelector("#aaa" + i).children[n].style.cssText =
-              "opacity: 0;";
-          }
-          document.querySelector("#aaa" + i).children[count].style.cssText =
-            "opacity: 1;transition: all 2s;";
-          time();
-          function time() {
-            let times = 15;
-            if (
-              JSON.parse(aaa.fourTableVoList[count].config).showtime &&
-              JSON.parse(aaa.fourTableVoList[count].config).showtime != ""
-            ) {
-              times = JSON.parse(aaa.fourTableVoList[count].config).showtime;
-            }
-
-            setTimeout(() => {
-              if (
-                count + 1 ==
-                document.querySelector("#aaa" + i).children.length
-              ) {
-                count = 0;
-              } else {
-                count++;
-              }
-
-              for (
-                let n = 0;
-                n < document.querySelector("#aaa" + i).children.length;
-                n++
-              ) {
-                document.querySelector("#aaa" + i).children[n].style.cssText =
-                  "opacity: 0;transform:rotateY(-180deg);transition: all 1s;";
-              }
-              document.querySelector("#aaa" + i).children[count].style.cssText =
-                "opacity: 1; transform:rotateY(0);transition: all 1s;";
+    chageL(index, showIndex) {
+      let now = showIndex;
+      let length = this.modelList[index].fourTableVoList.length;
+      if (showIndex > 0) {
+        now--;
+      } else {
+        now = length - 1;
+      }
+      console.log(this.modelList[index].fourTableVoList[now])
+      // this.$nextTick(() => {
+        this.modelList[index].showIndex = now;
+      // });
+    },
 
-              time();
-            }, times * 1000);
-          }
-        }
+    chageR(index, showIndex) {
+      let now = showIndex;
+      let length = this.modelList[index].fourTableVoList.length;
+      if (showIndex < length - 1) {
+        now++;
+      } else {
+        now = 0;
       }
+      // this.$nextTick(() => {
+        this.modelList[index].showIndex = now;
+      // });
     },
 
     backDown(e) {
@@ -300,6 +277,7 @@ export default {
 body {
   width: 100%;
   height: 100%;
+  user-select: none;
 }
 #home {
   // width: 100vw;
@@ -314,7 +292,54 @@ body {
 
     width: 100%;
     height: 100%;
+    opacity: 0;
+    transform: rotateY(90deg);
+    animation: setChange 2s forwards;
   }
+
+  @keyframes setChange {
+    0% {
+      opacity: 0;
+      transform: rotateY(90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: rotateY(0);
+    }
+  }
+}
+
+.control-left,
+.control-right {
+  position: absolute;
+  top: calc(50% - 15px);
+  z-index: 99999999999;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: all 0.35s;
+  user-select: none;
+}
+
+.control-left {
+  left: 10px;
+}
+
+.control-right {
+  right: 10px;
+}
+
+.control-left:hover,
+.control-right:hover {
+  color: #417dff;
+  background: #ffffff;
 }
 
 .back {