人员定位区域人员统计增加自动滚动

src/views/BI/components/personnel.vue

@@ -40,10 +40,23 @@
             <div class="td">区域</div>
             <div class="td">人员</div>
           </div>
-          <div v-for="(item, index) in data.block3List" :key="index" class="tr">
+          <seamless-scroll
-            <div class="td">{{ item.group }}</div>
+            :list="data.block3List"
-            <div class="td">{{ item.count }}</div>
+            hover
-          </div>
+            class="scroll"
+            :step="0.5"
+            :single-wait-time="1000"
+            :single-height="25.8"
+          >
+            <div
+              v-for="(item, index) in data.block3List"
+              :key="index"
+              class="tr"
+            >
+              <div class="td line-1">{{ item.group }}</div>
+              <div class="td">{{ item.count }}</div>
+            </div>
+          </seamless-scroll>
         </div>
       </div>
     </div>
@@ -76,6 +89,8 @@ import {
   handleGetPerList,
   handleTrajectory,
 } from "@/views/BI/js/trajectory.js";
+import { Vue3SeamlessScroll as SeamlessScroll } from "vue3-seamless-scroll";
+
 const typeList = {
   1: "滞留报警",
   2: "串岗报警",
@@ -257,9 +272,6 @@ onBeforeUnmount(async () => {
     width: 430px;
     margin-top: 10px;
 
-    .tab_list {
-    }
-
     .option {
       width: 100%;
       min-height: 100px;
@@ -301,6 +313,11 @@ onBeforeUnmount(async () => {
         }
       }
 
+      .scroll {
+        height: 210px;
+        overflow: hidden;
+      }
+
       .table {
         margin-top: 5px;
 
@@ -312,22 +329,18 @@ onBeforeUnmount(async () => {
           }
 
           .td {
-            flex: 1;
             text-align: left;
             font-size: 12px;
             color: #fff;
             padding: 6px 10px;
 
             &:nth-child(1) {
-              flex-basis: 30%;
+              flex: 1;
             }
 
             &:nth-child(2) {
-              flex-basis: 50%;
-            }
-
-            &:nth-child(3) {
               flex-basis: 20%;
+              text-align: center;
             }
           }