From d2c606ce1b11a192996a2176b503e0ec3576a455 Mon Sep 17 00:00:00 2001
From: lankuixing <799745985@qq.com>
Date: Sun, 25 Feb 2024 19:12:49 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E5=A2=9E=E5=8A=A0=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CheckData.vue | 121 +++++++++++++++++++++++++--------------
 1 file changed, 77 insertions(+), 44 deletions(-)

diff --git a/components/CheckData.vue b/components/CheckData.vue
index 54d1678..246aead 100644
--- a/components/CheckData.vue
+++ b/components/CheckData.vue
@@ -17,60 +17,70 @@
           </div>
         </div>
         <div class="table-body">
-          <div class="table-item-body" v-for="item of dataSource">
-            <div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
-                item.pointName
-              }}
-            </div>
-            <div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
-              <div class="_value">
-                {{ `${item.COValue}${item.COUnit}` }}
-              </div>
-              <div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">
 
+          <vue-seamless-scroll
+            v-if="dataSource.length"
+            ref="vueSeamless"
+            :data="dataSource"
+            class="seamless-scroll"
+            :class-option="defaultOption"
+          >
+            <div class="table-item-body" v-for="item of dataSource">
+              <div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
+                  item.pointName
+                }}
               </div>
-            </div>
-            <div class="data-value" :style="`width:${tableItemWidthList[2]}%`">
-              <div class="_value">
-                {{ `${item.SO2Value}${item.SO2Unit}` }}
-              </div>
-              <div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
+              <div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
+                <div class="_value">
+                  {{ `${item.COValue}${item.COUnit}` }}
+                </div>
+                <div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">
 
+                </div>
               </div>
-            </div>
-            <div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
-              <div class="_value">
-                {{ `${item.NOValue}${item.NOUnit}` }}
-              </div>
-              <div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
+              <div class="data-value" :style="`width:${tableItemWidthList[2]}%`">
+                <div class="_value">
+                  {{ `${item.SO2Value}${item.SO2Unit}` }}
+                </div>
+                <div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
 
+                </div>
               </div>
-            </div>
-            <div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
-              <div class="_value">
-                {{ `${item.O3Value}${item.O3Unit}` }}
-              </div>
-              <div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
+              <div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
+                <div class="_value">
+                  {{ `${item.NOValue}${item.NOUnit}` }}
+                </div>
+                <div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
 
+                </div>
               </div>
-            </div>
-            <div class="data-value" :style="`width:${tableItemWidthList[5]}%`">
-              <div class="_value">
-                {{ `${item.PM10Value}${item.PM10Unit}` }}
-              </div>
-              <div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
+              <div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
+                <div class="_value">
+                  {{ `${item.O3Value}${item.O3Unit}` }}
+                </div>
+                <div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
 
+                </div>
               </div>
-            </div>
-            <div class="data-value" :style="`width:${tableItemWidthList[6]}%`">
-              <div class="_value">
-                {{ `${item.PM25Value}${item.PM25Unit}` }}
-              </div>
-              <div :class="getOddsRatioIcon(item.PM25Value,'PM25StandardValue')">
+              <div class="data-value" :style="`width:${tableItemWidthList[5]}%`">
+                <div class="_value">
+                  {{ `${item.PM10Value}${item.PM10Unit}` }}
+                </div>
+                <div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
 
+                </div>
+              </div>
+              <div class="data-value" :style="`width:${tableItemWidthList[6]}%`">
+                <div class="_value">
+                  {{ `${item.PM25Value}${item.PM25Unit}` }}
+                </div>
+                <div :class="getOddsRatioIcon(item.PM25Value,'PM25StandardValue')">
+
+                </div>
               </div>
             </div>
-          </div>
+          </vue-seamless-scroll>
+
         </div>
       </div>
     </div>
@@ -78,8 +88,11 @@
 </template>
 
 <script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+
 export default {
   name: "CheckData",
+  components: {vueSeamlessScroll},
   data() {
     return {
       title: '实时检查数据',
@@ -262,6 +275,20 @@ export default {
       ]
     }
   },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+  },
   methods: {
     //判断数值是上升还是下降
     getOddsRatioIcon(val, valType) {
@@ -305,6 +332,7 @@ export default {
     flex: 1;
     padding: 30px 20px 0 20px;
     height: 0;
+
     .table-info {
       width: 100%;
       height: 100%;
@@ -329,7 +357,11 @@ export default {
 
       .table-body {
         height: calc(100% - 77px);
-        overflow-y: auto;
+
+        .seamless-scroll {
+          height: 100%;
+          overflow: hidden;
+        }
 
         .table-item-body {
           height: 77px;
@@ -380,6 +412,7 @@ export default {
     }
   }
 }
+
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
@@ -387,12 +420,12 @@ export default {
 
 ::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   background-color: rgba(21, 77, 160, 0.20);;
 }
 
 ::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   background-color: #d3dce6;
 }