添加报警列表滚动

src/components/ezuikit/EZUIKitJs.vue

@@ -39,16 +39,18 @@
           <div class="aiAnalysisViews_1">报警车辆排行榜</div>
           <div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
           <div class="aiAnalysisViews_1">报警车辆信息</div>
-          <el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
-            <el-table-column prop="vehiIdno" label="车牌号" align="center"></el-table-column>
-            <el-table-column prop="alarmTypeText" label="报警类型" align="center"></el-table-column>
-            <el-table-column prop="fileTimeStr" label="报警时间" align="center"></el-table-column>
-            <el-table-column label="查看" align="center">
-              <template slot-scope="scope">
-								<el-image style="width: 70px; height: 50px" :src="scope.row.downloadUrl" :preview-src-list="[scope.row.downloadUrl]"></el-image>
-							</template>
-            </el-table-column>
-          </el-table>
+          <div @mouseout='mouseoutTable' @mouseover='mouseoverTable'>
+            <el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
+              <el-table-column prop="vehiIdno" label="车牌号" align="center"></el-table-column>
+              <el-table-column prop="alarmTypeText" label="报警类型" align="center"></el-table-column>
+              <el-table-column prop="fileTimeStr" label="报警时间" align="center"></el-table-column>
+              <el-table-column label="查看" align="center">
+                <template slot-scope="scope">
+                  <el-image style="width: 70px; height: 50px" :src="scope.row.downloadUrl" :preview-src-list="[scope.row.downloadUrl]"></el-image>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </div>
 
       </el-container>
@@ -93,6 +95,7 @@ export default {
       searchCarText:'',
       //会话号
       jsession:'',
+      tableTimer:null,
     };
   },
   mounted() {
@@ -119,7 +122,7 @@ export default {
         that.aiTabPositionFn();
       })
     })
-
+    this.mouseoutTable();
   },
   methods: {
     getCode() {
@@ -830,12 +833,39 @@ export default {
     },
     changeTime1(row){
       return this.currentTime1(row.stm);
-    }
+    },
+    //表格自滚动
+    mouseoverTable() {
+      clearInterval(this.tableTimer)
+    },
+    mouseoutTable() {
+      this.autoScrollTable(false)
+    },
+    autoScrollTable(init) {
+      this.$nextTick(() => {
+        const t = 50
+        const box = this.$el.querySelector('.el-table__body-wrapper')
+        const content = this.$el.querySelector('.el-table__body')
+        if (init) box.scrollTop = 0
+        this.tableTimer = setInterval(() => {
+          this.rollStartTable(box, content)
+        }, t)
+      })
+    },
+    rollStartTable(box, content) {
+      if (box.scrollTop >= (content.scrollHeight - box.offsetHeight)) {
+        box.scrollTop = 0
+      } else {
+        box.scrollTop++
+      }
+    },
   },
   //销毁
   beforeDestroy() {
     this.iframeSrc = '';
     this.noPtz = false;
+    clearInterval(this.tableTimer);
+    this.tableTimer = null;
   }
   
 };

src/components/ezuikit/carsEZUIKitJs.vue

@@ -40,16 +40,18 @@
           <div class="aiAnalysisViews_1">报警车辆排行榜</div>
           <div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
           <div class="aiAnalysisViews_1">报警车辆信息</div>
-          <el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
-            <el-table-column prop="vehiIdno" label="车牌号" align="center"></el-table-column>
-            <el-table-column prop="alarmTypeText" label="报警类型" align="center"></el-table-column>
-            <el-table-column prop="fileTimeStr" label="报警时间" align="center"></el-table-column>
-            <el-table-column label="查看" align="center">
-              <template slot-scope="scope">
-								<el-image style="width: 70px; height: 50px" :src="scope.row.downloadUrl" :preview-src-list="[scope.row.downloadUrl]"></el-image>
-							</template>
-            </el-table-column>
-          </el-table>
+          <div @mouseout='mouseoutTable' @mouseover='mouseoverTable'>
+            <el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
+              <el-table-column prop="vehiIdno" label="车牌号" align="center"></el-table-column>
+              <el-table-column prop="alarmTypeText" label="报警类型" align="center"></el-table-column>
+              <el-table-column prop="fileTimeStr" label="报警时间" align="center"></el-table-column>
+              <el-table-column label="查看" align="center">
+                <template slot-scope="scope">
+                  <el-image style="width: 70px; height: 50px" :src="scope.row.downloadUrl" :preview-src-list="[scope.row.downloadUrl]"></el-image>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </div>
 
       </el-container>
@@ -94,6 +96,7 @@ export default {
       searchCarText:'',
       //会话号
       jsession:'',
+      tableTimer:null,
     };
   },
   mounted() {
@@ -120,7 +123,7 @@ export default {
         that.aiTabPositionFn();
       })
     })
-
+    this.mouseoutTable();
   },
   methods: {
     getCode() {
@@ -845,12 +848,39 @@ export default {
           this.iframeSrc = this.defaultIframeSrc + res.content[0].carnumber;
         }
       })
+    },
+    //表格自滚动
+    mouseoverTable() {
+      clearInterval(this.tableTimer)
+    },
+    mouseoutTable() {
+      this.autoScrollTable(false)
+    },
+    autoScrollTable(init) {
+      this.$nextTick(() => {
+        const t = 50
+        const box = this.$el.querySelector('.el-table__body-wrapper')
+        const content = this.$el.querySelector('.el-table__body')
+        if (init) box.scrollTop = 0
+        this.tableTimer = setInterval(() => {
+          this.rollStartTable(box, content)
+        }, t)
+      })
+    },
+    rollStartTable(box, content) {
+      if (box.scrollTop >= (content.scrollHeight - box.offsetHeight)) {
+        box.scrollTop = 0
+      } else {
+        box.scrollTop++
+      }
     }
   },
   //销毁
   beforeDestroy() {
     this.iframeSrc = '';
     this.noPtz = false;
+    clearInterval(this.tableTimer);
+    this.tableTimer = null;
   }
   
 };