公务用车及工程现场 大屏界面 自动滚动调整

src/views/screen/engineering/currentArea.vue

@@ -56,7 +56,7 @@
             <div class="snd" style="width: 31%">标题</div>
             <div class="thd" style="width: 29%">问题状况</div>
           </div>
-          <div class="table-roll" @click="choose">
+          <div class="table-roll" @click="choose" ref="scrollContainer" style="padding-bottom: 140px">
             <div class="table-bot">
               <div class="table-list"  v-for="(item, index) in getProList" :key="index">
                 <div class="said"></div>
@@ -183,9 +183,22 @@ export default {
     this.planDoneList()
   },
   destroyed() {},
-  beforeDestroy() {},
-  mounted() {},
+  beforeDestroy() {
+    clearTimeout(this.scrollTimeout);
+  },
+  mounted() {this.startAutoScroll()},
   methods: {
+    startAutoScroll() {
+      const scrollContainer = this.$refs.scrollContainer;
+      const scroll = () => {
+        scrollContainer.scrollTop += 1;
+        if (scrollContainer.scrollTop >= scrollContainer.scrollHeight - scrollContainer.clientHeight) {
+          scrollContainer.scrollTop = 0;
+        }
+        this.scrollTimeout = setTimeout(scroll, 30);
+      };
+      this.scrollTimeout = setTimeout(scroll, 30);
+    },
     co(){
       console.log(this.getProjecList)
     },

src/views/screen/official/carWarning.vue

@@ -102,7 +102,7 @@
           <div class="flex-column">车牌号码</div>
           <div class="flex-column">派车单数</div>
         </div>
-        <div class="dataBody">
+        <div class="dataBody" ref="scrollContainer" style="padding-bottom: 140px">
           <div class="flex-row" style="margin-bottom: 10px" v-for="(item,index) in manageLastHalf.list" :key="index" @click="choose()">
             <div class="flex-column" style="width: 50%">{{item.appName}}</div>
             <div class="flex-column">{{item.vechileNum}}</div>
@@ -403,9 +403,21 @@ export default {
   },
   created() {},
   destroyed() {},
-  beforeDestroy() {},
-  mounted() {},
-  methods: {},
+  beforeDestroy() {clearTimeout(this.scrollTimeout);},
+  mounted() {this.startAutoScroll()},
+  methods: {
+    startAutoScroll() {
+      const scrollContainer = this.$refs.scrollContainer;
+      const scroll = () => {
+        scrollContainer.scrollTop += 1;
+        if (scrollContainer.scrollTop >= scrollContainer.scrollHeight - scrollContainer.clientHeight) {
+          scrollContainer.scrollTop = 0;
+        }
+        this.scrollTimeout = setTimeout(scroll, 30);
+      };
+      this.scrollTimeout = setTimeout(scroll, 30);
+    },
+  },
 };
 </script>
 
@@ -470,8 +482,8 @@ export default {
 
 .dataBody{
   width:100%;
-  height:250px;
-  overflow: auto
+  height:150px;
+  overflow: auto;
 }
 
 .dataBody::-webkit-scrollbar {