root/screenkb-gaoce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

instore

Browse Source
This commit is contained in:
xiangxy
2024-04-29 16:03:47 +08:00
parent 0cf099d202
commit 0142e8a0f3
1 changed files with 76 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/pages/modules/InStore.vue
View File

@@ -10,7 +10,21 @@
</div> </div>
<div class="item_content con01"> <div class="item_content con01">
<div class="lbox"> <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>
<div class="rbox"> <div class="rbox">
<div class="rbox-con"> <div class="rbox-con">
@@ -73,24 +87,24 @@
<div class="item_content"> <div class="item_content">
<div class="scroll_wrap"> <div class="scroll_wrap">
<ul class="scroll_tab_2"> <ul class="scroll_tab_2">
<li>序号</li> <li style="width: 7%;">序号</li>
<li>托盘号</li> <li style="width: 17%;">托盘号</li>
<li>物料编码</li> <li style="width: 17%;">物料编码</li>
<li>名称</li> <li>名称</li>
<li>数量(条)</li> <!-- <li>数量(条)</li> -->
<li>重量(kg)</li> <li style="width: 13%;">重量(kg)</li>
<li>供应商</li> <li>供应商</li>
</ul> </ul>
<div class="scroll_container_2"> <div class="scroll_container_2">
<vue-seamless-scroll :data="kn" :class-option="defaultOption2"> <vue-seamless-scroll :data="kn" :class-option="defaultOption2">
<ul class="scroll-ul_2"> <ul class="scroll-ul_2">
<li v-for="(e, i) in kn" :key="i"> <li v-for="(e, i) in kn" :key="i">
<div class="scroll-ul_2_div">{{i + 1}}</div> <div class="scroll-ul_2_div" style="width: 7%;">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.palletSN}}</div> <div class="scroll-ul_2_div" style="width: 17%;">{{e.palletSN}}</div>
<div class="scroll-ul_2_div">{{e.productName}}</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.productDescription}}</div>
<div class="scroll-ul_2_div">{{e.qty}}</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" style="width: 13%;">{{e.incomingWeight}}</div>
<div class="scroll-ul_2_div">{{e.supplierName}}</div> <div class="scroll-ul_2_div">{{e.supplierName}}</div>
</li> </li>
</ul> </ul>
@@ -106,24 +120,24 @@
<div class="item_content"> <div class="item_content">
<div class="scroll_wrap"> <div class="scroll_wrap">
<ul class="scroll_tab_2"> <ul class="scroll_tab_2">
<li>序号</li> <li style="width: 7%;">序号</li>
<li>托盘号</li> <li style="width: 17%;">托盘号</li>
<li>物料编码</li> <li style="width: 17%;">物料编码</li>
<li>名称</li> <li>名称</li>
<li>数量(条)</li> <!-- <li>数量(条)</li> -->
<li>重量(kg)</li> <li style="width: 13%;">重量(kg)</li>
<li>供应商</li> <li>供应商</li>
</ul> </ul>
<div class="scroll_container_2"> <div class="scroll_container_2">
<vue-seamless-scroll :data="wrk" :class-option="defaultOption2"> <vue-seamless-scroll :data="wrk" :class-option="defaultOption2">
<ul class="scroll-ul_2"> <ul class="scroll-ul_2">
<li v-for="(e, i) in wrk" :key="i"> <li v-for="(e, i) in wrk" :key="i">
<div class="scroll-ul_2_div">{{i + 1}}</div> <div class="scroll-ul_2_div" style="width: 7%;">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.palletSN}}</div> <div class="scroll-ul_2_div" style="width: 17%;">{{e.palletSN}}</div>
<div class="scroll-ul_2_div">{{e.productName}}</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.productDescription}}</div>
<div class="scroll-ul_2_div">{{e.qty}}</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" style="width: 13%;">{{e.incomingWeight}}</div>
<div class="scroll-ul_2_div">{{e.supplierName}}</div> <div class="scroll-ul_2_div">{{e.supplierName}}</div>
</li> </li>
</ul> </ul>
@@ -156,11 +170,26 @@ export default {
wrk: [], wrk: [],
kc: {}, kc: {},
hw: {}, hw: {},
total: 0,
resData: {}, resData: {},
myCharts01: '' myCharts01: ''
} }
}, },
computed: { 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 () { defaultOption2 () {
return { return {
timer1: null, timer1: null,
@@ -198,7 +227,12 @@ export default {
this.wrk = res.wrk this.wrk = res.wrk
this.kc = res.kc this.kc = res.kc
this.hw = res.hw 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 () { setEchart01 () {
// let data = [ // let data = [
@@ -317,6 +351,8 @@ export default {
.sec2 .sec2
display flex display flex
.bottom .bottom
position: fixed;
bottom: 0;
_wh(100%, 38px) _wh(100%, 38px)
// background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat // background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
background center bottom / 100% 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) border-bottom 1px solid rgba(8,205,248,0.3)
li li
float left float left
width 14% width 23%
_font(12px,30px,#78B1DE,,center) _font(12px,30px,#78B1DE,,center)
word-wrap break-word word-wrap break-word
word-break break-all word-break break-all
@@ -426,15 +462,15 @@ export default {
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3) box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_2_div .scroll-ul_2_div
float left float left
_wh(14%, 30px) _wh(23%, 30px)
_fj(center) _fj(center)
_font(12px, 44px, #fff,,center) _font(12px, 44px, #fff,,center)
word-wrap break-word word-wrap break-word
word-break break-all word-break break-all
white-space nowrap white-space nowrap
padding 0 2px padding 0 2px
overflow hidden // overflow hidden
scale 0.8 scale 0.61
.lbox .lbox
.list-con .list-con
.li .li
@@ -453,4 +489,18 @@ export default {
margin 0 20px margin 0 20px
.li-right .li-right
margin-left 20px 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> </style>