swiper 功能添加

ui/package.json

@@ -66,6 +66,7 @@
     "umy-ui": "^1.1.6",
     "vue": "2.6.10",
     "vue-awesome": "^4.0.2",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
     "vue-draggable-resizable": "^2.3.0",
@@ -104,6 +105,7 @@
     "script-loader": "0.7.2",
     "serve-static": "1.13.2",
     "svg-sprite-loader": "4.1.3",
+    "swiper": "^4.5.1",
     "vue-template-compiler": "2.6.10"
   },
   "engines": {

ui/src/utils/drawMixin.js

@@ -21,12 +21,24 @@ export default {
     }
   },
   mounted () {
+    this.$nextTick(() => {
+        //进入触发
+        this.calcRate();
+        window.addEventListener('resize', this.resize);
+    });
+  },
+  created() {
 
   },
   updated(){
-      //进入触发
-      this.calcRate();
-      window.addEventListener('resize', this.resize);
+   
+  },
+  beforeCreate() {
+
+
+  },
+  beforeUpdate() {
+
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.resize);
@@ -35,13 +47,11 @@ export default {
     calcRate () {
       //拿到整个页面元素
       const appRef = this.$refs["appRef"];
-      console.log("appRef",appRef);
+        console.log("this",this.$refs);
       //如果没有值就结束
       if (!appRef) return;
       // 当前宽高比
       const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
-      console.log("window.innerWidth:",window.innerWidth,window.innerHeight);
-      console.log("baseProportion:",baseProportion);
       //判断：如果有值代表页面变化了
       if (appRef) {
         //判断当前宽高比例是否大于默认比例
@@ -68,7 +78,7 @@ export default {
       clearTimeout(this.drawTiming);
       this.drawTiming = setTimeout(() => {
         this.calcRate();
-      }, 2000000000000);
+      }, 2000);
     }
   },
 }

ui/src/views/monitor/elecNew/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="front" style="width: 100%; height: 100%; font-size: 12px" >
-    <dv-loading v-if="loading">Loading...</dv-loading>
-    <div v-else class="host-body bg bgNew">
+    <div  class="host-body bg bgNew">
       <div class="d-flex jc-center">
         <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
         <div class="d-flex jc-center">
@@ -44,8 +43,9 @@
         </div>
         <!-- 右侧 时间 -->
         <div style="width: 40%" class="d-flex">
-          <div class="react-left bg-color-blue mr-3">
-            <span class="text fw-b">{{ $t('北京时间') }}：</span>
+          <div class="react-left bg-color-blue mr-3" @click="toStop()">
+            <!-- <span class="text fw-b">{{ $t('北京时间') }}：</span> -->
+            <span class="text fw-b">{{swiperAutoText}}</span>
           </div>
           <div
             class="react-left mr-4"
@@ -57,68 +57,78 @@
         </div>
       </div>
 
-      <div class="body-box" v-if="dashboard === 1"  ref="appRef" >
-          <!-- 运行总览 -->
-          <el-row class="yunxing suofang" v-if="tabIndex === 1">
-            <!-- 左侧 -->
-            <el-col :span="8" class="yunxing-left">
-              <div id="app-container-Right">
-                <div class="up">
-                  <annual-output :dashboarddata = 'dashboarddata'/>
-                </div>
-                <div class="middle">
-                  <dv-border-box-13>
-                    <energy-consumption :monthData = 'monthData'/>
-                  </dv-border-box-13>
-                </div>
-                <div class="down">
-                  <dv-border-box-13>
-                    <product-proportion :dashboarddata = 'dashboarddata'/>
-                  </dv-border-box-13>
-                </div>
-
-                <dv-border-box-12 style="height: 260px;overflow: hidden;">
-                  <bottom-right :dashboarddata = 'dashboarddata'/>
-                </dv-border-box-12>
-              </div>
-            </el-col>
-            <!-- 中间 -->
-            <el-col :span="8" class="yunxing-middle">
-              <dv-border-box-12 style="width: 100%;height: 323px;">
-                <nap-tank :dashboarddata = 'dashboarddata'/>
-              </dv-border-box-12>
-              <dv-border-box-12 style="width: 100%;height: 323px;">
-                <product-tank :dashboarddata = 'dashboarddata'/>
-              </dv-border-box-12>
-              <dv-border-box-12 style="width: 100%;height: 323px;">
-                <bottom-left :monthData = 'monthData'/>
-              </dv-border-box-12>
-            </el-col>
-            <!-- 右侧 -->
-            <el-col :span="8" class="yunxing-right">
-              <dv-border-box-12 style="width: 100%;height: 323px;">
-                <ethylene-tank :dashboarddata = 'dashboarddata' />
-              </dv-border-box-12>
-              <dv-border-box-12 style="width: 100%;height: 323px;">
-                <acrylic-tank :dashboarddata = 'dashboarddata'/>
-              </dv-border-box-12>
-              <dv-border-box-12 style="width: 100%;height: 323px;">
-                <bottom-energy :monthData = 'monthData'/>
-              </dv-border-box-12>
-            </el-col>
-
-          </el-row>
-
-          <!-- 物料平衡 -->
-          <el-row class="wuliao suofang" v-if="tabIndex === 2">
-            <material-balance :dashboarddata = 'dashboarddata'/>
-          </el-row>
-
-          <!-- 蒸汽平衡 -->
-          <el-row class="zhengqi suofang" v-if="tabIndex === 3">
-            <steam-balance :dashboarddata = 'dashboarddata'/>
-          </el-row>
+      <div class="swiper-container swi_swiper body-box" ref="appRef" v-if="dashboard === 1">
+        <div class="swiper-wrapper">
+            <div class="swiper-slide">
+                <dv-loading v-if="loading">Loading...</dv-loading>
+                <!-- 运行总览 -->
+                <el-row class="yunxing suofang" v-else>
+                  <!-- 左侧 -->
+                  <el-col :span="8" class="yunxing-left">
+                    <div id="app-container-Right">
+                      <div class="up">
+                        <annual-output :dashboarddata = 'dashboarddata'/>
+                      </div>
+                      <div class="middle">
+                        <dv-border-box-13>
+                          <energy-consumption :monthData = 'monthData'/>
+                        </dv-border-box-13>
+                      </div>
+                      <div class="down">
+                        <dv-border-box-13>
+                          <product-proportion :dashboarddata = 'dashboarddata'/>
+                        </dv-border-box-13>
+                      </div>
+
+                      <dv-border-box-12 style="height: 260px;overflow: hidden;">
+                        <bottom-right :dashboarddata = 'dashboarddata'/>
+                      </dv-border-box-12>
+                    </div>
+                  </el-col>
+                  <!-- 中间 -->
+                  <el-col :span="8" class="yunxing-middle">
+                    <dv-border-box-12 style="width: 100%;height: 323px;">
+                      <nap-tank :dashboarddata = 'dashboarddata'/>
+                    </dv-border-box-12>
+                    <dv-border-box-12 style="width: 100%;height: 323px;">
+                      <product-tank :dashboarddata = 'dashboarddata'/>
+                    </dv-border-box-12>
+                    <dv-border-box-12 style="width: 100%;height: 323px;">
+                      <bottom-left :monthData = 'monthData'/>
+                    </dv-border-box-12>
+                  </el-col>
+                  <!-- 右侧 -->
+                  <el-col :span="8" class="yunxing-right">
+                    <dv-border-box-12 style="width: 100%;height: 323px;">
+                      <ethylene-tank :dashboarddata = 'dashboarddata' />
+                    </dv-border-box-12>
+                    <dv-border-box-12 style="width: 100%;height: 323px;">
+                      <acrylic-tank :dashboarddata = 'dashboarddata'/>
+                    </dv-border-box-12>
+                    <dv-border-box-12 style="width: 100%;height: 323px;">
+                      <bottom-energy :monthData = 'monthData'/>
+                    </dv-border-box-12>
+                  </el-col>
+
+                </el-row>
+            </div>
+            <div class="swiper-slide">
+                <!-- 物料平衡 -->
+                <el-row class="wuliao suofang">
+                  <material-balance :dashboarddata = 'dashboarddata'/>
+                </el-row>
+            </div>
+            <div class="swiper-slide">
+                <!-- 蒸汽平衡 -->
+                <el-row class="zhengqi suofang">
+                  <steam-balance :dashboarddata = 'dashboarddata'/>
+                </el-row>
+            </div>
+        </div>
       </div>
+
+
+
     </div>
 
     <div class="body-box" v-if="dashboard === 2">
@@ -192,6 +202,11 @@
 
   import drawMixin from "../../../utils/drawMixin"; //自适应缩放
 
+  import Swiper from 'swiper'
+  import 'swiper/dist/css/swiper.min.css'
+  import 'swiper/dist/js/swiper.min.js'
+
+
   export default {
     mixins: [drawMixin],
     data() {
@@ -325,6 +340,8 @@
 
         // 重构页面
         tabIndex:1,
+        goodSwiper:null,
+        swiperAutoText:"暂停轮播"
       };
     },
     components: {
@@ -346,16 +363,27 @@
       productTank,
       annualOutput,
       energyConsumption,
-      productProportion
+      productProportion,
+    },
+    computed: {
+    },
+    updated() {
+
     },
     mounted() {
-      this.cancelLoading();
+
+
+      
       this.timer = setInterval(()=>{
         const date= dayjs(new Date());
         this.dateDay = date.format('HH:mm:ss');
         this.dateYear = date.format('YYYY年MM月DD日');
         this.dateWeek = date.format(this.weekday[date.day()]);
       },1000);
+
+      this.$nextTick(() => {
+        this.instantSwiper();
+      });
     },
     created() {
       this.getList();
@@ -372,7 +400,8 @@
           ///调取接口获取数据
           this.getMonthList();
         }, 0)
-      }, 1000 * 10 * 6 * 60 * 6)
+      }, 1000 * 10 * 6 * 60 * 6);
+
     },
     beforeDestroy(){
       if(this.timer){
@@ -385,6 +414,7 @@
       {
         selectLast(this.queryParams).then(response => {
           this.dashboarddata = response.data;
+          this.cancelLoading();
         });
       },
       /** 查询dashboard抓取数据列表 */
@@ -418,6 +448,38 @@
       // 重构tab切换
       handleTab(id){
         this.tabIndex = id;
+        
+        this.goodSwiper.slideTo(id - 1, 1000, false);
+        this.goodSwiper.autoplay.start();
+        this.swiperAutoText = "暂停轮播";
+      },
+      instantSwiper() {
+        let that = this;
+          this.goodSwiper = new Swiper('.swi_swiper', {
+            slidesPerView: 1,
+            observer: true,
+            observeParents: true,
+            autoplay: true,
+            loop: false,
+            on: {
+              //滑动swiper使用的方法
+              transitionStart: function() {
+                that.tabIndex = this.activeIndex + 1;
+                },
+          }
+        });
+        
+
+      },
+      toStop(){
+        
+        if(this.swiperAutoText === "暂停轮播"){
+          this.goodSwiper.autoplay.stop();
+          this.swiperAutoText = "启动轮播";
+        }else if(this.swiperAutoText === "启动轮播"){
+          this.goodSwiper.autoplay.start();
+          this.swiperAutoText = "暂停轮播";
+        }
       }
     }
   };
@@ -494,6 +556,8 @@ width: 100%;
     transform: scale(1.55,1.2) translate(17%,8%) !important;
 
 }
+
+
 </style>