scroll功能

2023-04-14 15:34:51 +08:00
parent 5c7850c924
commit 0e64d83bd3
2 changed files with 256 additions and 7 deletions
--- a/src/pages/management/Chengpin.vue
+++ b/src/pages/management/Chengpin.vue
@@ -115,7 +115,46 @@
          <div class="item_tip item_tip_l">
            <div class="item_tip_left">库存列表</div>
          </div>
-          <div class="item_content"></div>
+          <div class="item_content item_content_3">
+            <div class="scroll_wrap">
+              <ul class="scroll_tab">
+                <li>序号</li>
+                <li>货位</li>
+                <li>物料</li>
+                <li>规格</li>
+                <li>数量</li>
+                <li>单位</li>
+                <li>托盘号</li>
+                <li>订单</li>
+                <li>客户</li>
+                <li>交货日期</li>
+                <li>入库时间</li>
+                <li>存放时间(h)</li>
+                <li>超期时间(h)</li>
+              </ul>
+              <div class="scroll_container">
+                <vue-seamless-scroll :data="scollList2" :class-option="defaultOption1">
+                  <ul class="scroll-ul_2">
+                    <li v-for="(e, i) in scollList2" :key="i">
+                      <div class="scroll-ul_2_div">{{i + 1}}</div>
+                      <div class="scroll-ul_2_div">{{e.data1}}</div>
+                      <div class="scroll-ul_2_div">盘管双斜</div>
+                      <div class="scroll-ul_2_div">规格1</div>
+                      <div class="scroll-ul_2_div">15000</div>
+                      <div class="scroll-ul_2_div">个</div>
+                      <div class="scroll-ul_2_div">TP0001</div>
+                      <div class="scroll-ul_2_div">DD00001</div>
+                      <div class="scroll-ul_2_div">客户1</div>
+                      <div class="scroll-ul_2_div scroll_status_wrap"><span :style="{'background-color': ['#33CCCC', '#EAAD24', '#0E90FD', '#c9c9c9'][Number(e.device_status)]}"></span>03-13</div>
+                      <div class="scroll-ul_2_div">03-10 08:00:00</div>
+                      <div class="scroll-ul_2_div">72</div>
+                      <div class="scroll-ul_2_div">12</div>
+                    </li>
+                  </ul>
+              </vue-seamless-scroll>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </div>
@@ -138,8 +177,7 @@ export default {
      myCharts3: '',
      myCharts4: '',
      myCharts5: '',
-      scollList1: [{time: '2020-1-1', p: '故障故障故障故障故障1'}, {time: '2020-1-1', p: '故障故障故障故障故障2'}, {time: '2020-1-1', p: '故障故障故障故障故障3'}, {time: '2020-1-1', p: '故障故障故障故障故障4'}, {time: '2020-1-1', p: '故障故障故障故障故障5'}, {time: '2020-1-1', p: '故障故障故障故障故障6'}],
-      arrL2: [{date: '2020-1-1', elbow_qty: '1', comprehensive_qty: '2'}]
+      scollList2: [{data1: 'GD00001', device_status: '0'}, {data1: 'GD00001', device_status: '1'}, {data1: 'GD00001', device_status: '2'}, {data1: 'GD00001', device_status: '3'}, {data1: 'GD00001', device_status: '2'}, {data1: 'GD00001', device_status: '3'}]
    }
  },
  computed: {
@@ -882,4 +920,54 @@ export default {
        color #f1c76d
        margin-right .2rem
        font-size .16rem
+.item_content_3
+  height: calc(100% - 0.38rem)
+  padding 0
+  margin-top .06rem
+  border 0.01rem solid rgba(8,205,248,0.3)
+.scroll_tab
+  _wh(100%, .4rem)
+  border-bottom .01rem solid rgba(8,205,248,0.3)
+  li
+    float left
+    width 8%
+    _font(.14rem,.4rem,#78B1DE,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 4%
+.scroll_container
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.scroll-ul_2
+  li
+    _wh(100%, .44rem)
+    border-bottom .01rem solid rgba(8,205,248,0.3)
+    &:nth-child(even)
+      background rgba(1,24,52,0.60)
+      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    .scroll-ul_2_div
+      float left
+      _wh(8%, .44rem)
+      _fj(center)
+      _font(.14rem, .18rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding .04rem .02rem
+      overflow hidden
+      &:nth-child(1)
+        width 4%
+    .scroll_status_wrap
+      position relative
+      span
+        position absolute
+        left 25%
+        _wh(7px, 7px)
+        border-radius 50%
 </style>
--- a/src/pages/management/Clean.vue
+++ b/src/pages/management/Clean.vue
@@ -64,13 +64,69 @@
            <div class="item_tip">
              <div class="item_tip_left">储料槽信息</div>
            </div>
-            <div class="item_content"></div>
+            <div class="item_content item_content_3">
+              <div class="scroll_wrap">
+                <ul class="scroll_tab01">
+                  <li>序号</li>
+                  <li>设备号</li>
+                  <li>物料</li>
+                  <li>规格</li>
+                  <li>库存重量（kg）</li>
+                  <li>设备状态</li>
+                  <li>当前任务</li>
+                </ul>
+                <div class="scroll_container">
+                  <vue-seamless-scroll :data="scollList1" :class-option="defaultOption1">
+                    <ul class="scroll-ul_01">
+                      <li v-for="(e, i) in scollList1" :key="i">
+                        <div class="scroll-ul_2_div">{{i + 1}}</div>
+                        <div class="scroll-ul_2_div">{{e.data1}}</div>
+                        <div class="scroll-ul_2_div">盘管双斜</div>
+                        <div class="scroll-ul_2_div">规格1</div>
+                        <div class="scroll-ul_2_div">1500</div>
+                        <div class="scroll-ul_2_div scroll_status_wrap"><span :style="{'background-color': ['#33CCCC', '#EAAD24', '#0E90FD', '#c9c9c9'][Number(e.device_status)]}"></span>已完成</div>
+                        <div class="scroll-ul_2_div">SB0001</div>
+                      </li>
+                    </ul>
+                </vue-seamless-scroll>
+                </div>
+              </div>
+            </div>
          </div>
          <div class="item_wrap_l">
            <div class="item_tip">
              <div class="item_tip_left">当天任务列表</div>
            </div>
-            <div class="item_content"></div>
+            <div class="item_content item_content_3">
+              <div class="scroll_wrap">
+                <ul class="scroll_tab">
+                  <li>序号</li>
+                  <li>任务号</li>
+                  <li>物料</li>
+                  <li>规格</li>
+                  <li>重量（kg）</li>
+                  <li>状态</li>
+                  <li>设备号</li>
+                  <li>完成时间</li>
+                </ul>
+                <div class="scroll_container">
+                  <vue-seamless-scroll :data="scollList2" :class-option="defaultOption2">
+                    <ul class="scroll-ul_2">
+                      <li v-for="(e, i) in scollList2" :key="i">
+                        <div class="scroll-ul_2_div">{{i + 1}}</div>
+                        <div class="scroll-ul_2_div">{{e.data1}}</div>
+                        <div class="scroll-ul_2_div">盘管双斜</div>
+                        <div class="scroll-ul_2_div">规格1</div>
+                        <div class="scroll-ul_2_div">1500</div>
+                        <div class="scroll-ul_2_div scroll_status_wrap"><span :style="{'background-color': ['#33CCCC', '#EAAD24', '#0E90FD', '#c9c9c9'][Number(e.device_status)]}"></span>已完成</div>
+                        <div class="scroll-ul_2_div">SB0001</div>
+                        <div class="scroll-ul_2_div">03-23 09:15</div>
+                      </li>
+                    </ul>
+                </vue-seamless-scroll>
+                </div>
+              </div>
+            </div>
          </div>
        </div>
      </div>
@@ -90,14 +146,28 @@ export default {
    return {
      myCharts01: '',
      myCharts10: '',
-      myCharts2: ''
+      myCharts2: '',
+      scollList1: [{data1: 'SB00001', device_status: '0'}, {data1: 'SB00001', device_status: '1'}, {data1: 'SB00001', device_status: '2'}, {data1: 'SB00001', device_status: '3'}, {data1: 'SB00002', device_status: '2'}, {data1: 'SB00001', device_status: '1'}, {data1: 'SB00002', device_status: '2'}, {data1: 'SB00002', device_status: '2'}],
+      scollList2: [{data1: 'GD00001', device_status: '0'}, {data1: 'GD00001', device_status: '1'}, {data1: 'GD00001', device_status: '2'}, {data1: 'GD00001', device_status: '3'}, {data1: 'GD00001', device_status: '0'}, {data1: 'GD00001', device_status: '1'}, {data1: 'GD00001', device_status: '2'}, {data1: 'GD00001', device_status: '3'}]
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
-        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
+        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)
+      }
+    },
+    defaultOption2 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
@@ -564,4 +634,95 @@ export default {
        color #f1c76d
        margin-right .2rem
        font-size .16rem
+.item_content_3
+  height: calc(100% - 0.38rem)
+  padding 0
+  margin-top .06rem
+  border 0.01rem solid rgba(8,205,248,0.3)
+.scroll_tab
+  _wh(100%, .4rem)
+  border-bottom .01rem solid rgba(8,205,248,0.3)
+  li
+    float left
+    width 13%
+    _font(.14rem,.4rem,#78B1DE,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 9%
+.scroll_container
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.scroll-ul_2
+  li
+    _wh(100%, .44rem)
+    border-bottom .01rem solid rgba(8,205,248,0.3)
+    &:nth-child(even)
+      background rgba(1,24,52,0.60)
+      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    .scroll-ul_2_div
+      float left
+      _wh(13%, .44rem)
+      _fj(center)
+      _font(.14rem, .18rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding .04rem .02rem
+      overflow hidden
+      &:nth-child(1)
+        width 9%
+    .scroll_status_wrap
+      position relative
+      span
+        position absolute
+        left 25%
+        _wh(7px, 7px)
+        border-radius 50%
+.scroll_tab01
+  _wh(100%, .4rem)
+  border-bottom .01rem solid rgba(8,205,248,0.3)
+  li
+    float left
+    width 15%
+    _font(.14rem,.4rem,#78B1DE,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 10%
+.scroll-ul_01
+  li
+    _wh(100%, .44rem)
+    border-bottom .01rem solid rgba(8,205,248,0.3)
+    &:nth-child(even)
+      background rgba(1,24,52,0.60)
+      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    .scroll-ul_2_div
+      float left
+      _wh(15%, .44rem)
+      _fj(center)
+      _font(.14rem, .18rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding .04rem .02rem
+      overflow hidden
+      &:nth-child(1)
+        width 10%
+    .scroll_status_wrap
+      position relative
+      span
+        position absolute
+        left 25%
+        _wh(7px, 7px)
+        border-radius 50%
 </style>