最新问题修改(自动滚动/时间用接口返回的)

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ysws-vue",
+  "name": "zhihuiyun",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/assets/css/main.css

@@ -1360,29 +1360,45 @@
   margin-left: 10px;
 }
 
-.realTime .page-content .flex-list {
+.realTime .page-content .realTime-list {
-  display: flex;
+  width: 100%;
-  align-items: center;
+  overflow: hidden;
-  justify-content: space-around;
 }
 
-.realTime .page-content .flex-list > div {
+.realTime .page-content .realTime-list .seamless-warp {
+  display: flex;
+  align-items: center;
+}
+
+.realTime .page-content .realTime-list .seamless-warp > div {
+  display: flex;
+  overflow: unset !important;
+}
+
+.realTime .page-content .realTime-list .seamless-warp > div > div {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.realTime .page-content .realTime-list .seamless-warp .list-view {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-right: 20px;
 }
 
-.realTime .page-content .flex-list > div img {
+.realTime .page-content .realTime-list .seamless-warp .list-view img {
   width: 80px;
   height: 80px;
 }
 
-.realTime .page-content .flex-list > div .text {
+.realTime .page-content .realTime-list .seamless-warp .list-view .text {
   margin: 5px 0;
 }
 
-.realTime .page-content .flex-list > div .number {
+.realTime .page-content .realTime-list .seamless-warp .list-view .number {
   width: 106px;
   height: 40px;
   background: url(../image/real-time-text.png) no-repeat center;
@@ -1396,6 +1412,12 @@
   justify-content: center;
 }
 
+.realTime .page-content .flex-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
 .realTime .page-content .realTime-bottom {
   height: 440px;
   margin-top: 30px;

src/assets/css/main.scss

@@ -1431,19 +1431,28 @@
                 margin-left: 10px;
             }
         }
-
+        .realTime-list{
-        .flex-list {
+            width: 100%;
+            overflow: hidden;
+                .seamless-warp{
                     display: flex;
                     align-items: center;
-            justify-content: space-around;
-            // flex-wrap: wrap;
-
                     >div{
+                        // width: 100%!important;
+                        display: flex;
+                        overflow: unset!important;
+                        >div{
+                            display: flex;
+                        align-items: center; 
+                        flex-shrink: 0;
+                        }
+                    }
+                    .list-view {
                         flex-shrink: 0;
                         display: flex;
                         flex-direction: column;
                         align-items: center;
-
+                        margin-right: 20px;
                         img {
                             width: 80px;
                             height: 80px;
@@ -1468,6 +1477,15 @@
                             justify-content: center;
                         }
                     }
+                }
+        
+        }
+        .flex-list {
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+
 
         }
 

src/router/index.js

@@ -65,5 +65,12 @@ const router = new VueRouter({
   base: process.env.BASE_URL,
   routes
 })
-
+router.beforeEach(async (to,from,next) => {
+  if (to.meta.title) { // 判断是否有标题
+    document.title = to.meta.title;
+  }else{
+    document.title ='温室智慧云'
+  }
+  next();
+});
 export default router

src/views/HomeView.vue

@@ -44,7 +44,7 @@ export default {
     },
   },
   mounted() {
-    this.getTime()
+    // this.getTime()
     this.gerRouter();
 
     if (localStorage.getItem('token')) {
@@ -53,6 +53,10 @@ export default {
       this.$router.push({ name: 'login' })
 
     }
+    this.$bus.$on('refreshTime',(res)=>{
+        console.log(res,'time');
+        this.time=res
+       })
   },
   methods: {
     refreshData(){

src/views/page/realTime.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="formula realTime">
         <div class="page-content">
-            <div class="timeNow" v-if="time">
+            <div class="timeNow" v-if="list.length">
-                {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
+                <!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
-                }}</span>
+                }}</span> -->
+                {{ list[0].updateTime?list[0].updateTime:'' }}
             </div>
             <div class="table-title">
                 <img src="../../assets/image/real-time.png" alt="" />
@@ -20,12 +21,15 @@
                     </div>
                 </div> -->
             </div>
-            <div class="flex-list scroll">
+            <div class="realTime-list" v-if="list.length">
-                <div class="" v-for="item, index in list " :key="index">
+                <vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption">
+                    <div class="list-view" v-for="item, index in list " :key="index">
                     <img :src="item.img" alt="">
                     <div class="text">{{ item.name }}</div>
                     <div class="number">{{ item.num }}</div>
                 </div>
+                </vue-seamless>
+           
             </div>
             <div class="flex-list realTime-bottom">
                 <div class="left">
@@ -43,8 +47,23 @@ import { getnowtime } from '../../assets/js/nowTime'
 import { realTimeLine } from '@/assets/js/charts'
 import videojs from 'video.js';
 import video_zhCN from 'video.js/dist/lang/zh-CN.json'
+import vueSeamless from 'vue-seamless-scroll'
 export default {
-
+    components: { vueSeamless },
+    computed: {
+        defaultOption() {
+            return {
+                step: 0.3, // 数值越大速度滚动越快
+                limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
+                hoverStop: true, // 是否开启鼠标悬停stop
+                direction: 2, // 0向下 1向上 2向左 3向右
+                openWatch: true, // 开启数据实时监控刷新dom
+                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+            }
+        }
+    },
     data() {
         return {
             time: null,//右上角时间
@@ -69,7 +88,7 @@ export default {
         const that = this;
         this.indexs = this.$route.query.index ? this.$route.query.index : 1;
 
-        this.getTime()
+        // this.getTime()
 
 
         setTimeout(() => {
@@ -79,6 +98,7 @@ export default {
             that.dataInit();
            }, 60000);
         }, 0);
+   
     },
     beforeDestroy() {
         const that = this;
@@ -87,6 +107,7 @@ export default {
             this.player.dispose();
         }
          that.timer&&clearInterval(that.timer)
+         this.$bus.$off('refreshTime')
     },
     methods: {
         createVideo() {
@@ -174,9 +195,11 @@ export default {
                            }
 
                             this.list.push({
+                                ...el,
                                 name:name,
                                  num: num,
                                   img: require(`../../assets/image/real-time-${el.formula}.png`) 
+                            
                                 })
                            
                         }

src/views/page/status.vue

@@ -282,18 +282,18 @@ export default {
     beforeDestroy() {
         const that = this;
         this.$bus.$off('refreshData')
-        //  that.pageTimer&&clearInterval(that.pageTimer)
+        that.pageTimer && clearInterval(that.pageTimer)
     },
     mounted() {
         const that = this;
         if (localStorage.getItem('token')) {
             that.getEqbyid();
-        // setTimeout(() => {
+            setTimeout(() => {
-        //     that.pageTimer&&clearInterval(that.pageTimer)
+                that.pageTimer && clearInterval(that.pageTimer)
-        //     that.pageTimer= setInterval(() => {
+                that.pageTimer = setInterval(() => {
-        //     that.getEqbyid();
+                    that.getEqbyid();
-        //    }, 5000);
+                }, 5000);
-        // }, 0);
+            }, 0);
         } else {
             //   this.$router.push({ name: 'login' })
         }
@@ -520,12 +520,22 @@ export default {
             // }
         },
         dataInit() {
+            const that = this
             var deviceDetail = this.deviceDetail
             var data = {
                 "equipmentId": deviceDetail.deviceId,
                 "pattern": 0,//需要根据文档填写 //6目标ph-数值
                 "regNum": 71
             }
+            var week = [
+                "星期日",
+                "星期一",
+                "星期二",
+                "星期三",
+                "星期四",
+                "星期五",
+                "星期六",
+            ]
             this.api.postState(data).then(res => {
                 if (res.data.code == 200) {
                     this.inputData = res.data.data;
@@ -536,12 +546,29 @@ export default {
                     this.getleft2List()//获取左下角数据
                     this.getrightList3()//获取又下角数据
                     this.getcenterBottom()//获取电磁阀
+                    var h = this.checkTime(this.inputData[3])
+                    var m = this.checkTime(this.inputData[4])
+                    var month_ = this.checkTime(this.inputData[1])
+                    var date_ = this.checkTime(this.inputData[2])
+                    var time = {
+                        year: { year: this.inputData[0], month: month_, date: date_ },
+                        week: week[this.inputData[5]],
+                        time: h + ":" + m,
+                    }
+                    this.$bus.$emit('refreshTime',time)
                 } else {
                     this.$message.error(res.data.msg);
                 }
             })
 
         },
+        checkTime(i) {
+            if (i < 10) {
+                i = "0" + i;
+            }
+
+            return i;
+        },
         getReg() {
             var deviceDetail = this.deviceDetail
             //获取传感器种类