From 0142e8a0f37486ade073bcc508458e800293ddeb Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Mon, 29 Apr 2024 16:03:47 +0800
Subject: [PATCH] instore

---
 src/pages/modules/InStore.vue | 102 +++++++++++++++++++++++++---------
 1 file changed, 76 insertions(+), 26 deletions(-)

diff --git a/src/pages/modules/InStore.vue b/src/pages/modules/InStore.vue
index 7a26055..0adfbe4 100644
--- a/src/pages/modules/InStore.vue
+++ b/src/pages/modules/InStore.vue
@@ -10,7 +10,21 @@
               </div>
               <div class="item_content con01">
                 <div class="lbox">
-                  <div id="echart_d01" style="width: 100%; height: 100%"></div>
+                  <!-- <div id="echart_d01" style="width: 100%; height: 100%"></div> -->
+                  <div class="three_w_item">
+                    <vue-seamless-scroll :data="kc.list" :class-option="defaultOption1">
+                      <ul class="scroll-ul_1">
+                        <li v-for="(e, i) in kc.list" :key="i">
+                          <span class="scroll_th">名称:</span>
+                          <span>{{ e.name }}，</span>
+                          <span class="scroll_th">数量:</span>
+                          <span>{{ e.number }} </span>
+                          <!-- <span class="scroll_th">占比:</span>
+                          <span>{{ Number(e.number) / total }}</span> -->
+                        </li>
+                      </ul>
+                    </vue-seamless-scroll>
+                  </div>
                 </div>
                 <div class="rbox">
                   <div class="rbox-con">
@@ -73,24 +87,24 @@
               <div class="item_content">
                 <div class="scroll_wrap">
                   <ul class="scroll_tab_2">
-                    <li>序号</li>
-                    <li>托盘号</li>
-                    <li>物料编码</li>
+                    <li style="width: 7%;">序号</li>
+                    <li style="width: 17%;">托盘号</li>
+                    <li style="width: 17%;">物料编码</li>
                     <li>名称</li>
-                    <li>数量(条)</li>
-                    <li>重量(kg)</li>
+                    <!-- <li>数量(条)</li> -->
+                    <li style="width: 13%;">重量(kg)</li>
                     <li>供应商</li>
                   </ul>
                   <div class="scroll_container_2">
                     <vue-seamless-scroll :data="kn" :class-option="defaultOption2">
                       <ul class="scroll-ul_2">
                         <li v-for="(e, i) in kn" :key="i">
-                          <div class="scroll-ul_2_div">{{i + 1}}</div>
-                          <div class="scroll-ul_2_div">{{e.palletSN}}</div>
-                          <div class="scroll-ul_2_div">{{e.productName}}</div>
+                          <div class="scroll-ul_2_div" style="width: 7%;">{{i + 1}}</div>
+                          <div class="scroll-ul_2_div" style="width: 17%;">{{e.palletSN}}</div>
+                          <div class="scroll-ul_2_div" style="width: 17%;">{{e.productName}}</div>
                           <div class="scroll-ul_2_div">{{e.productDescription}}</div>
-                          <div class="scroll-ul_2_div">{{e.qty}}</div>
-                          <div class="scroll-ul_2_div">{{e.incomingWeight}}</div>
+                          <!-- <div class="scroll-ul_2_div">{{e.qty}}</div> -->
+                          <div class="scroll-ul_2_div" style="width: 13%;">{{e.incomingWeight}}</div>
                           <div class="scroll-ul_2_div">{{e.supplierName}}</div>
                         </li>
                       </ul>
@@ -106,24 +120,24 @@
               <div class="item_content">
                 <div class="scroll_wrap">
                   <ul class="scroll_tab_2">
-                    <li>序号</li>
-                    <li>托盘号</li>
-                    <li>物料编码</li>
+                    <li style="width: 7%;">序号</li>
+                    <li style="width: 17%;">托盘号</li>
+                    <li style="width: 17%;">物料编码</li>
                     <li>名称</li>
-                    <li>数量(条)</li>
-                    <li>重量(kg)</li>
+                    <!-- <li>数量(条)</li> -->
+                    <li style="width: 13%;">重量(kg)</li>
                     <li>供应商</li>
                   </ul>
                   <div class="scroll_container_2">
                     <vue-seamless-scroll :data="wrk" :class-option="defaultOption2">
                       <ul class="scroll-ul_2">
                         <li v-for="(e, i) in wrk" :key="i">
-                          <div class="scroll-ul_2_div">{{i + 1}}</div>
-                          <div class="scroll-ul_2_div">{{e.palletSN}}</div>
-                          <div class="scroll-ul_2_div">{{e.productName}}</div>
+                          <div class="scroll-ul_2_div" style="width: 7%;">{{i + 1}}</div>
+                          <div class="scroll-ul_2_div" style="width: 17%;">{{e.palletSN}}</div>
+                          <div class="scroll-ul_2_div" style="width: 17%;">{{e.productName}}</div>
                           <div class="scroll-ul_2_div">{{e.productDescription}}</div>
-                          <div class="scroll-ul_2_div">{{e.qty}}</div>
-                          <div class="scroll-ul_2_div">{{e.incomingWeight}}</div>
+                          <!-- <div class="scroll-ul_2_div">{{e.qty}}</div> -->
+                          <div class="scroll-ul_2_div" style="width: 13%;">{{e.incomingWeight}}</div>
                           <div class="scroll-ul_2_div">{{e.supplierName}}</div>
                         </li>
                       </ul>
@@ -156,11 +170,26 @@ export default {
       wrk: [],
       kc: {},
       hw: {},
+      total: 0,
       resData: {},
       myCharts01: ''
     }
   },
   computed: {
+    defaultOption1 () {
+      return {
+        timer1: null,
+        timer2: null,
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 8, // 开始无缝滚动的数据量 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)
+      }
+    },
     defaultOption2 () {
       return {
         timer1: null,
@@ -198,7 +227,12 @@ export default {
       this.wrk = res.wrk
       this.kc = res.kc
       this.hw = res.hw
-      this.setEchart01()
+      this.kc.list.map(el => {
+        this.total += Number(el.number)
+        if (this.total > 0) {
+          el.zhanbi = Number(el.number) / this.total
+        }
+      })
     },
     setEchart01 () {
       // let data = [
@@ -317,6 +351,8 @@ export default {
 .sec2
   display flex
 .bottom
+  position: fixed;
+  bottom: 0;
   _wh(100%, 38px)
   // background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
   background center bottom / 100% 100% url(../../images/screen1/bottom.png) no-repeat
@@ -404,7 +440,7 @@ export default {
     border-bottom 1px solid rgba(8,205,248,0.3)
     li
       float left
-      width 14%
+      width 23%
       _font(12px,30px,#78B1DE,,center)
       word-wrap break-word
       word-break break-all
@@ -426,15 +462,15 @@ export default {
           box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
     .scroll-ul_2_div
         float left
-        _wh(14%, 30px)
+        _wh(23%, 30px)
         _fj(center)
         _font(12px, 44px, #fff,,center)
         word-wrap break-word
         word-break break-all
         white-space nowrap
         padding 0 2px
-        overflow hidden
-        scale 0.8
+        // overflow hidden
+        scale 0.61
 .lbox
   .list-con
     .li
@@ -453,4 +489,18 @@ export default {
         margin 0 20px
       .li-right
         margin-left 20px
+.three_w_item
+  // _wh(calc(50% - 15px), 100%)
+  width 100%
+  // height 200px
+  background-image linear-gradient(to bottom, #040b1a, #050919)
+  overflow hidden
+  &:first-child
+    margin-right 30px
+.three_w_item
+  .scroll-ul_1
+    li
+      line-height 26px
+    span
+      font-size 12px
 </style>