看板滚动

package.json

@@ -48,6 +48,7 @@
     "vue-notification": "^1.3.20",
     "vue-print-nb": "^1.7.5",
     "vue-router": "3.0.1",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "^2.24.3",
     "vuex": "3.0.1"
   },

src/views/common/home1.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home-main" id="my-home-main" :style="`transform: scale(${toScale}) !important;`">
     <div class="top">
-      <div class="top-name">XXXX数字看板</div>
+      <div class="top-name">江西昌柘伟业航空装备技术有限公司</div>
     </div>
     <div v-if="show" class="full-screen" @click="fullScreen">
       <svg t="1732355752742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4253" width="200" height="200"><path d="M368.896 192H224a32 32 0 0 0-32 32v137.888a32 32 0 0 0 64 0V256h112.896a32 32 0 0 0 0-64zM784.864 192H640a32 32 0 1 0 0 64h112.864v105.888a32 32 0 1 0 64 0V224a32 32 0 0 0-32-32zM368.896 777.92H256V672a32 32 0 1 0-64 0v137.92a32 32 0 0 0 32 32h144.896a32 32 0 1 0 0-64zM784.864 640a32 32 0 0 0-32 32v105.92H640a32 32 0 1 0 0 64h144.864a32 32 0 0 0 32-32V672a32 32 0 0 0-32-32z" fill="#273CFF" p-id="4254"></path><path d="M912 48h-800c-35.296 0-64 28.704-64 64v800c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-800c0-35.296-28.704-64-64-64z m-800 864v-800h800l0.064 800H112z" fill="#273CFF" p-id="4255"></path></svg>
@@ -17,15 +17,19 @@
             <div class="head2">设备刷新时间</div>
             <div class="head3">运行状态</div>
           </div>
-          <div v-for="item in equipmentRepairList" class="msg-item">
-            <div class="item-1">{{item.equipmentName}}</div>
-            <div class="item-2">{{item.createTime}}</div>
-            <div class="item-3">
-              <span :class="{'t-r': item.state == 1, 't-g':item.state == 2}">{{equipmentState[item.state]}}</span>
-              <!-- <span v-if="i==1" class="t-r">故障中</span>
-              <span v-if="i==2" class="t-g">已处理</span>
-              <span v-if="i!=1&& i!=2" class="t-b">正常</span> -->
-            </div>
+          <div class="list">
+            <seamless-scroll :data="equipmentRepairList" class="seamless-scroll" :class-option="{ step: 0.5 }">
+              <div v-for="item in equipmentRepairList" class="msg-item">
+                <div class="item-1">{{item.equipmentName}}</div>
+                <div class="item-2">{{item.createTime}}</div>
+                <div class="item-3">
+                  <span :class="{'t-r': item.state == 1, 't-g':item.state == 2}">{{equipmentState[item.state]}}</span>
+                  <!-- <span v-if="i==1" class="t-r">故障中</span>
+                  <span v-if="i==2" class="t-g">已处理</span>
+                  <span v-if="i!=1&& i!=2" class="t-b">正常</span> -->
+                </div>
+              </div>
+            </seamless-scroll>
           </div>
         </div>
       </div>
@@ -131,12 +135,16 @@
             <div class="table-h-1">报工工时</div>
             <div class="table-h-1">部门</div>
           </div>
-          <div v-for="(item, i) in taskCountList" :class="{'table-c-item': true, 'active': i ==3}">
-            <div class="c-item">{{ i }}</div>
-            <div class="c-item">{{item.userName}}</div>
-            <div class="c-item">{{item.taskNum}}</div>
-            <div class="c-item">{{item.taskTime}}h</div>
-            <div class="c-item">{{item.orgName}}</div>
+          <div class="list">
+            <seamless-scroll :data="taskCountList" class="seamless-scroll" :class-option="{ step: 0.5 }">
+              <div v-for="(item, i) in taskCountList" :class="{'table-c-item': true, 'active': i ==3}">
+                <div class="c-item">{{ i }}</div>
+                <div class="c-item">{{item.userName}}</div>
+                <div class="c-item">{{item.taskNum}}</div>
+                <div class="c-item">{{item.taskTime}}h</div>
+                <div class="c-item">{{item.orgName}}</div>
+              </div>
+            </seamless-scroll>
           </div>
         </div>
       </div>
@@ -151,17 +159,19 @@
               <div class="tops-title">设备稼动率统计(OEE)<span>{{utilizationRateCount}}</span></div>
             </div>
             <div class="list">
-              <div v-for="(item, i) in utilizationRateList" class="list-1">
-                <div class="list-msg">
-                  <div class="msg-name">{{item.name}}</div>
-                  <div class="msg-value"><span>{{item.utilizationRate}}%</span> / 100%</div>
-                </div>
-                <div class="list-line">
-                  <div :class="{'line-color': true, 'c-b': item.utilizationRate >= 65, 'c-g': item.utilizationRate < 65}" :style="`width:${item.utilizationRate}%`">
-                    <div class="line-icon"/>
+              <seamless-scroll :data="utilizationRateList" class="seamless-scroll" :class-option="{ step: 0.5 }">
+                <div v-for="(item, i) in utilizationRateList" class="list-1">
+                  <div class="list-msg">
+                    <div class="msg-name">{{item.name}}</div>
+                    <div class="msg-value"><span>{{item.utilizationRate}}%</span> / 100%</div>
+                  </div>
+                  <div class="list-line">
+                    <div :class="{'line-color': true, 'c-b': item.utilizationRate >= 65, 'c-g': item.utilizationRate < 65}" :style="`width:${item.utilizationRate}%`">
+                      <div class="line-icon"/>
+                    </div>
                   </div>
                 </div>
-              </div>
+              </seamless-scroll>
             </div>
           </div>
           <div class="item-list">
@@ -170,18 +180,20 @@
               <div class="tops-title">设备报警记录<span>{{equipmentAlarmCount}}</span></div>
             </div>
             <div class="list">
-              <div v-for="(item, i) in equipmentAlarmList" class="list-1">
-                <div class="list-msg">
-                  <div class="msg-name">{{item.equipmentName}}</div>
-                  <!-- <div class="msg-value"><span :class="{'t-o': item.percent < 70, 't-r': item.percent >= 70}">{{item.percent}}%</span> / 100%</div> -->
-                </div>
-                <div class="list-line-2">
-                  <div :class="{'line-color': true, 'c-o': item.percent < 70, 'c-r': item.percent >= 70}">
-                    <!-- <div class="line-icon"/> -->
-                    <div class="msg">{{item.alarmMsg}}</div>
+              <seamless-scroll :data="equipmentAlarmList" class="seamless-scroll" :class-option="{ step: 0.5 }">
+                <div v-for="(item, i) in equipmentAlarmList" class="list-1">
+                  <div class="list-msg">
+                    <div class="msg-name">{{item.equipmentName}}</div>
+                    <!-- <div class="msg-value"><span :class="{'t-o': item.percent < 70, 't-r': item.percent >= 70}">{{item.percent}}%</span> / 100%</div> -->
+                  </div>
+                  <div class="list-line-2">
+                    <div :class="{'line-color': true, 'c-o': item.percent < 70, 'c-r': item.percent >= 70}">
+                      <!-- <div class="line-icon"/> -->
+                      <div class="msg">{{item.alarmMsg}}</div>
+                    </div>
                   </div>
                 </div>
-              </div>
+              </seamless-scroll>
             </div>
           </div>
         </div>
@@ -198,12 +210,16 @@
             <div class="h-1">完成时间</div>
             <div class="h-1">操作人</div>
           </div>
-          <div v-for="(item,i) in submittedRecordList" :class="{'table-line': true, 'acitve': i == 300}">
-            <div class="h-1">NO.{{ (i + 1).toString().padStart(2,'0') }}</div>
-            <div class="h-1">{{item.nodeName}}</div>
-            <div class="h-1">{{item.taskName}}</div>
-            <div class="h-1">{{item.endTime}}</div>
-            <div class="h-1">{{item.operatorName}}</div>
+          <div class="list">
+            <seamless-scroll :data="submittedRecordList" class="seamless-scroll" :class-option="{ step: 0.5 }">
+              <div v-for="(item,i) in submittedRecordList" :class="{'table-line': true, 'acitve': i == 300}">
+                <div class="h-1">NO.{{ (i + 1).toString().padStart(2,'0') }}</div>
+                <div class="h-1">{{item.nodeName}}</div>
+                <div class="h-1">{{item.taskName}}</div>
+                <div class="h-1">{{item.endTime}}</div>
+                <div class="h-1">{{item.operatorName}}</div>
+              </div>
+            </seamless-scroll>
           </div>
         </div>
       </div>
@@ -215,7 +231,9 @@
 import {getOrgName} from '@/api/org'
 import {getEquipmentRepair, getTaskCount, getEquipmentUtilizationRate, getSubmittedRecord, getEquipmentAlarm} from '@/api/home1'
 import {getEquipmentList} from '@/api/production'
+import SeamlessScroll from 'vue-seamless-scroll' // 引入组件
 export default {
+  components: { SeamlessScroll }, // 注册组件
   data () {
     return {
       orgName: '',
@@ -254,6 +272,8 @@ export default {
         this.setScale()
       }, 500)
     })
+
+    this.startScroll()
   },
   methods: {
     async init () {
@@ -300,7 +320,7 @@ export default {
     },
     // 设备报维修记录
     getEquipmentRepair () {
-      let param = {current: 1, size: 8}
+      let param = {current: 1, size: 50}
       getEquipmentRepair(param).then(({data}) => {
         if (data && data.code === '200') {
           if (data.data != null && data.data.records != null) {
@@ -335,7 +355,7 @@ export default {
     },
     // 设备运行效率统计
     getEquipmentUtilizationRate () {
-      let param = {current: 1, size: 5}
+      let param = {current: 1, size: 50}
       getEquipmentUtilizationRate(param).then(({data}) => {
         if (data && data.code === '200') {
           if (data.data != null && data.data.records != null) {
@@ -397,6 +417,14 @@ export default {
           }
         }
       })
+    },
+    startScroll () {
+      const scrollContainer = this.$el.querySelector('.seamless-scroll')
+      let top = 0 // 初始位置
+      const interval = setInterval(() => {
+        top -= 1 // 每次减少1px，可以根据需要调整速度和方向
+        scrollContainer.scrollTop = top
+      }, 200) // 调整这个值来改变速度，数值越小速度越快
     }
   }
 }
@@ -505,6 +533,10 @@ export default {
         padding-left: 21px;
         padding-right: 17px;
         margin-bottom: 12px;
+        .list{
+          height: 400px;
+          overflow: hidden;
+        }
         .table-head{
           display: flex;
           font-family: PingFangSC, PingFang SC;
@@ -586,6 +618,10 @@ export default {
         padding-left: 21px;
         padding-right: 18px;
         margin-left: 5px;
+        .list{
+          height: 400px;
+          overflow: hidden;
+        }
         .table-h{
           width: 459px;
           height: 38px;
@@ -664,7 +700,7 @@ export default {
           margin-bottom: 5px;
           margin-top: 20px;
           .items{
-            width: 224px;
+            width: 274px;
             height: 60px;
             display: flex;
             align-items: center;
@@ -843,6 +879,8 @@ export default {
             width: 439px;
             background: url(../../assets/home/table_1_bg.png) no-repeat;
             background-size: 100% 100%;
+            overflow: auto;
+            
             .list-1{
               padding: 12px 14px;
               padding-bottom: 2px;
@@ -988,6 +1026,10 @@ export default {
           background: url(../../assets/home/table_2_active.png) no-repeat;
           background-size: 100% 100%;
         }
+        .list{
+           height: 345px;
+           overflow: auto;
+        }
       }
     }
   }
@@ -1001,5 +1043,44 @@ export default {
       height: 20px;
     }
   }
+
+  /* 定义滚动条整体宽度和背景 */
+  .home-main .main-center .msg-4 .item-list .list::-webkit-scrollbar {
+    width: 0px;  /* 垂直滚动条宽度 */
+    height: 10px; /* 水平滚动条高度 */
+    background: rgba(255, 255, 255, 0.3); /* 轨道半透明背景 */
+  }
+
+  /* 滚动条滑块（可拖动部分） */
+  .home-main .main-center .msg-4 .item-list .list::-webkit-scrollbar-thumb {
+    background: rgba(128, 128, 128, 0.5); /* 半透明灰色滑块 */
+    border-radius: 6px; /* 圆角 */
+    border: 2px solid rgba(255, 255, 255, 0.2); /* 透明边框增强立体感 */
+  }
+
+  /* 鼠标悬停时滑块颜色加深 */
+  .home-main .main-center .msg-4 .item-list .list::-webkit-scrollbar-thumb:hover {
+    background: rgba(96, 96, 96, 0.7); 
+  }
+
+    /* 定义滚动条整体宽度和背景 */
+  .home-main .main-center .msg-5 .list::-webkit-scrollbar {
+    width: 0px;  /* 垂直滚动条宽度 */
+    height: 10px; /* 水平滚动条高度 */
+    background: rgba(255, 255, 255, 0.3); /* 轨道半透明背景 */
+  }
+
+  /* 滚动条滑块（可拖动部分） */
+  .home-main .main-center .msg-5 .list::-webkit-scrollbar-thumb {
+    background: rgba(128, 128, 128, 0.5); /* 半透明灰色滑块 */
+    border-radius: 6px; /* 圆角 */
+    border: 2px solid rgba(255, 255, 255, 0.2); /* 透明边框增强立体感 */
+  }
+
+  /* 鼠标悬停时滑块颜色加深 */
+  .home-main .main-center .msg-5 .list::-webkit-scrollbar-thumb:hover {
+    background: rgba(96, 96, 96, 0.7); 
+  }
+
 </style>