feat(led工位级大屏)：时间，轮播功能。功能联调（10%）

src/main.js

@@ -22,7 +22,8 @@ import formValidator from '@/utils/formValidator/index';
 // if (process.env.NODE_ENV === 'development') { require('./mock') }  // mock
 
 import Authority from '../src/utils/authority';
-
+import vueSwiper from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'  //引入样式
 Vue.prototype._ = lodash;
 Vue.prototype.formValidator = formValidator;
 Vue.config.productionTip = false
@@ -40,6 +41,7 @@ new Vue({
     router,
     store,
     i18n,
+    vueSwiper,
     render: h => h(App)
 })
 

src/views/CenterControl/index.vue

 <template>
     <div class="page-pack">
-        <div class="container">
+        <div class="container" :style="{transform: zoom}" style="transform-origin: 0 0">
             <!-- 设备利用率 -->
             <MachineUtilizationRate></MachineUtilizationRate>
             <!-- 设备故障率 -->
@@ -39,7 +39,18 @@
             MachineWarning
         },
         data () {
-            return {}
+            return {
+                zoom: 'scale(0)',
+                width: 0,
+                height: 0
+            }
+        },
+        mounted () {
+            this.width = document.body.offsetWidth
+            this.height = document.body.offsetHeight
+            this.zoom = `scale(${this.width / 2550},${this.height / 1140})`
+            console.log(this.zoom)
+            console.log(this.width)
         }
     }
 </script>
@@ -58,4 +69,4 @@
             position: relative;
         }
     }
-</style>
\ No newline at end of file
+</style>

src/views/Led/Station/applyArtificial.vue

 <template>
-  <div class="page-pack">
+  <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
       <div class="title-pack">中涂人工</div>
       <div class="table-pack">
           <div class="tr">
@@ -16,18 +16,37 @@
           </div>
           <div class="info">
               设备报警信息：
+              <div>&nbsp;</div>
+              <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
+                   <swiper-slide>I'mSlide14455555555555 58866666666666666555589</swiper-slide>
+                   <swiper-slide>I'55589</swiper-slide>
+                   <swiper-slide>I'mSlide144556666666666666555589</swiper-slide>
+              </swiper>
           </div>
-          <div class="time">时间：2019-08-29 09:00:00</div>
+          <div class="time">时间：{{ timeNow }}</div>
       </div>
   </div>
 </template>
 
 <script>
+    import { swiper, swiperSlide } from 'vue-awesome-swiper'
     export default {
+        components: {
+            swiper,
+            swiperSlide
+        },
         data () {
             return {
                 width: 0,
-                height: 0
+                height: 0,
+                zoom: 'scale(0)',
+                timeNow: '',
+                timer: '',
+                swiperOption: {
+                    autoplay: {
+                        delay: 5000
+                    }
+                }
             }
         },
         methods: {},
@@ -35,6 +54,7 @@
             setTimeout(() => {
                 this.width = document.body.offsetWidth
                 this.height = document.body.offsetHeight
+                this.zoom = `scale(${this.width / 1710})`
             }, 3000)
         }
     }

src/views/Led/Station/electrophoresis.vue

@@ -12,37 +12,77 @@
           </div>
           <div class="info">
               设备报警信息：
-              
+              <div>&nbsp;</div>
+              <swiper :options="swiperOption" ref="mySwiper">
+                   <swiper-slide>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'mSlide14455555555555 58866666666666666555589</swiper-slide>
+                   <swiper-slide>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'55589</swiper-slide>
+                   <swiper-slide>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'mSlide144556666666666666555589</swiper-slide>
+              </swiper>
           </div>
-          <div class="time">时间：2019-08-29 09:00:00</div>
+          <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
       </div>
   </div>
 </template>
 
 <script>
     import { swiper, swiperSlide } from 'vue-awesome-swiper'
+    import Moment from 'moment'
     export default {
-        // components: {
-        //     Empty,
-        //     ProjectList,
-        //     swiper,
-        //     swiperSlide
-        // },
+        components: {
+            swiper,
+            swiperSlide
+        },
         data () {
             return {
                 width: 0,
                 height: 0,
-                zoom: 'scale(0)'
+                zoom: 'scale(0)',
+                timeNow: '',
+                timer: '',
+                // minLength: null,
+                // minutes: null,
+                // secondsLength: null,
+                // seconds: null,
+                swiperOption: {
+                    autoplay: {
+                        delay: 5000
+                    }
+                }
+            }
+        },
+        methods: {
+            // 时间日期格式化
+            formatTime (time, format) {
+                if (time !== null && time !== '') {
+                    return Moment(time).format(format)
+                } else {
+                    return '暂无'
+                }
+            },
+            getData () {
+                this.$fetch('led-controller/ledInfo-get', {ledNo: '1'}).then(res => {
+                    console.log(res)
+                })
             }
         },
-        methods: {},
         mounted () {
+            this.getData()
+            let vm = this
+            this.timer = setInterval(() => {
+                vm.timeNow = this.formatTime()
+                // console.log(this.timeNow)
+            }, 1000)
             setTimeout(() => {
                 this.width = document.body.offsetWidth
                 this.height = document.body.offsetHeight
                 this.zoom = `scale(${this.width / 1710})`
                 console.log(this.zoom)
             }, 0)
+        },
+        beforeDestroy () {
+            if (this.timer) {
+                clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
+            }
         }
     }
 </script>

src/views/Led/Station/floatingCoatRobot.vue

 <template>
-  <div class="page-pack">
+  <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
       <div class="title-pack">中涂机器人</div>
       <div class="table-pack">
           <div class="tr">
@@ -27,7 +27,8 @@
         data () {
             return {
                 width: 0,
-                height: 0
+                height: 0,
+                zoom: 'scale(0)'
             }
         },
         methods: {},
@@ -35,6 +36,7 @@
             setTimeout(() => {
                 this.width = document.body.offsetWidth
                 this.height = document.body.offsetHeight
+                this.zoom = `scale(${this.width / 1710})`
             }, 3000)
         }
     }

src/views/Led/Station/insulatingAnticorrosive.vue

 <template>
-  <div class="page-pack">
+  <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
       <div class="title-pack">隔热防腐</div>
       <div class="table-pack">
           <div class="tr">
@@ -23,7 +23,8 @@
         data () {
             return {
                 width: 0,
-                height: 0
+                height: 0,
+                zoom: 'scale(0)'
             }
         },
         methods: {},
@@ -31,6 +32,8 @@
             setTimeout(() => {
                 this.width = document.body.offsetWidth
                 this.height = document.body.offsetHeight
+                this.zoom = `scale(${this.width / 1710})`
+                console.log(`scale(${this.width / 1710})`)
             }, 3000)
         }
     }

src/views/Led/Station/putty.vue

 <template>
-  <div class="page-pack">
+  <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
       <div class="title-pack">腻子</div>
       <div class="table-pack">
           <div class="tr">
@@ -23,7 +23,8 @@
         data () {
             return {
                 width: 0,
-                height: 0
+                height: 0,
+                zoom: 'scale(0)'
             }
         },
         methods: {},
@@ -31,6 +32,7 @@
             setTimeout(() => {
                 this.width = document.body.offsetWidth
                 this.height = document.body.offsetHeight
+                this.zoom = `scale(${this.width / 1710})`
             }, 3000)
         }
     }

src/views/Led/Station/sprayDryingRoom.vue

 <template>
-  <div class="page-pack">
+  <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
       <div class="title-pack">喷漆室、烘干室</div>
       <div class="table-pack">
           <div class="tr clear-float">
@@ -87,7 +87,8 @@
         data () {
             return {
                 width: 0,
-                height: 0
+                height: 0,
+                zoom: 'scale(0)'
             }
         },
         methods: {},
@@ -95,6 +96,7 @@
             setTimeout(() => {
                 this.width = document.body.offsetWidth
                 this.height = document.body.offsetHeight
+                this.zoom = `scale(${this.width / 1710})`
             }, 3000)
         }
     }

src/views/Led/Station/surfaceVarnish.vue

 <template>
-  <div class="page-pack">
+  <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
       <div class="title-pack">面/清漆</div>
       <div class="table-pack">
           <div class="tr">
@@ -23,7 +23,8 @@
         data () {
             return {
                 width: 0,
-                height: 0
+                height: 0,
+                zoom: 'scale(0)'
             }
         },
         methods: {},
@@ -31,6 +32,7 @@
             setTimeout(() => {
                 this.width = document.body.offsetWidth
                 this.height = document.body.offsetHeight
+                this.zoom = `scale(${this.width / 1710})`
             }, 3000)
         }
     }