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

分拣包装

Browse Source
This commit is contained in:
caill
2023-06-16 10:40:06 +08:00
parent f27869ea60
commit 61b2fb2d79
6 changed files with 1364 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/modules/homepage/two.vue
View File

@@ -757,7 +757,7 @@ export default {
border 1px solid rgba(8,205,248,0.3)
.scroll_tab_1
_wh(100%, 40px)
border-bottom 1 solid rgba(8,205,248,0.3)
border-bottom 1px solid rgba(8,205,248,0.3)
li
float left
width 20%
@@ -775,7 +775,7 @@ export default {
.scroll-ul_1
li
_wh(100%, 44px)
border-bottom 1 solid rgba(8,205,248,0.3)
border-bottom 1px 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)

271
src/pages/modules/sortpack/two.vue
View File

@@ -9,74 +9,47 @@
<div class="n_body_container_wraper">
<div class="n_content">
<div class="item_wrap">
<div class="item_tip item_tip_bg_s">
<div class="item_tip_left">当日压制任务</div>
<div class="item_tip">
<div class="item_tip_left">当日拆码垛</div>
</div>
<div class="item_content">
<div id="sortpack_echart_1" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">当日成品</div>
</div>
<div class="item_content">
<div id="sortpack_echart_2" style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
<div class="n_content">
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">半托缓存</div>
</div>
<div class="item_content">
<div class="scroll_wrap">
<ul class="scroll_tab_1">
<li>任务号</li>
<li>设备</li>
<li>BOM号</li>
<li>生产物料</li>
<li>厂家</li>
<li>计划量(块)</li>
<li>已生产(块)</li>
<li>碾次</li>
<li>生产状态</li>
<li>开始时间</li>
<li>结束时间</li>
</ul>
<div class="scroll_container_1">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.time}}</div>
<div class="scroll-ul_1_div">{{e.code}}</div>
<div class="scroll-ul_1_div">{{e.name}}</div>
<div class="scroll-ul_1_div">{{e.info}}</div>
<div class="scroll-ul_1_div">{{e.status}}</div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</div>
<div class="n_content n_bottom_content">
<div class="item_wrap">
<div class="item_tip item_tip_bg_s">
<div class="item_tip_left">成型库存</div>
</div>
<div class="item_content">
<div class="scroll_wrap">
<ul class="scroll_tab_1 scroll_tab_2">
<li>货位</li>
<li>物料编码</li>
<li>物料名称</li>
<li>数量</li>
<li>载具号</li>
<li>压机号</li>
<li>碾次</li>
<li>入库时间</li>
</ul>
<div class="scroll_container_1 scroll_container_2">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1 scroll-ul_2">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.time}}</div>
<div class="scroll-ul_1_div">{{e.code}}</div>
<div class="scroll-ul_1_div">{{e.name}}</div>
<div class="scroll-ul_1_div">{{e.info}}</div>
<div class="scroll-ul_1_div">{{e.status}}</div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<vue-seamless-scroll :data="HalfSupportCacheList" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in HalfSupportCacheList" :key="i">
<div class="scroll-ul_1_div">{{e.point_name}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.qty}}</div>
<div class="scroll-ul_1_div">{{e.device_code}}</div>
<div class="scroll-ul_1_div">{{ e.mix_num }}</div>
<div class="scroll-ul_1_div">{{ e.instorage_time }}</div>
</li>
</ul>
</vue-seamless-scroll>
@@ -85,33 +58,29 @@
</div>
</div>
<div class="item_wrap">
<div class="item_tip item_tip_bg_s">
<div class="item_tip_left">成型出入库</div>
<div class="item_tip">
<div class="item_tip_left">包装区物料</div>
</div>
<div class="item_content">
<div class="scroll_wrap">
<ul class="scroll_tab_1 scroll_tab_3">
<li>类别</li>
<li>点位</li>
<li>物料编码</li>
<li>物料名称</li>
<li>数量</li>
<li>载具号</li>
<li>压机号</li>
<li>碾次</li>
<li>货位</li>
<li>出入时间</li>
</ul>
<div class="scroll_container_1 scroll_container_3">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1 scroll-ul_3">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.time}}</div>
<div class="scroll-ul_1_div">{{e.code}}</div>
<div class="scroll-ul_1_div">{{e.name}}</div>
<div class="scroll-ul_1_div">{{e.info}}</div>
<div class="scroll-ul_1_div">{{e.status}}</div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll_container_1">
<vue-seamless-scroll :data="PackingAreaTaskList" :class-option="defaultOption2">
<ul class="scroll-ul_1">
<li v-for="(e, i) in PackingAreaTaskList" :key="i">
<div class="scroll-ul_1_div">{{e.point_name}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.qty}}</div>
<div class="scroll-ul_1_div">{{e.device_code}}</div>
<div class="scroll-ul_1_div">{{ e.mix_num }}</div>
<div class="scroll-ul_1_div">{{ e.instorage_time }}</div>
</li>
</ul>
</vue-seamless-scroll>
@@ -122,21 +91,72 @@
</div>
</div>
</div>
<div class="tooltip_wrap right_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
<div class="tooltip_pages" :style="expand ? 'width: 240px' : 'width: 0'">
<div class="tooltip_page pointer" @click="toJumpPage(1)">1</div>
<div class="tooltip_page pointer" @click="toJumpPage(2)">2</div>
<div class="tooltip_page current_page pointer" @click="toJumpPage(3)">3</div>
<div class="tooltip_page pointer" @click="toJumpPage(4)">4</div>
<div class="tooltip_page pointer" @click="toJumpPage(5)">5</div>
<div class="tooltip_page pointer" @click="toJumpPage(6)">6</div>
</div>
<div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '&lt;&lt;' : '&gt;&gt;'"></div>
</div>
<div class="style_block" style="left: calc(100% / 3);top:0;"></div>
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
<div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
<div class="style_block" style="background: green;left: 0;top:0;"></div>
<div class="style_block" style="left: 0;top:calc(100% / 3);"></div>
<div class="style_block" style="background: green;left: 0;bottom: 0"></div>
</div>
</template>
<script>
import { sortingAndPackaging } from '@js/getData2'
export default {
data () {
return {
array1: [{time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}]
interTime: this.$store.getters.setTime,
timer: null,
expand: false,
SortingDayList: [],
PackingAreaTaskList: [],
HalfSupportCacheList: [],
CPDayList: []
}
},
computed: {
defaultOption1 () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 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: 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)
}
},
defaultOption3 () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
@@ -146,8 +166,52 @@ export default {
}
}
},
mounted () {
this._sortingAndPackaging()
// this.refresh()
},
beforeDestroy () {
clearInterval(this.timer)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this._sortingAndPackaging()
}, this.interTime)
},
async _sortingAndPackaging () {
let res = await sortingAndPackaging()
if (res.code === 200) {
this.SortingDayList = [...res.result.SortingDayList]
this.PackingAreaTaskList = [...res.result.PackingAreaTaskList]
this.HalfSupportCacheList = [...res.result.HalfSupportCacheList]
this.CPDayList = [...res.result.CPDayList]
}
},
expandTooltip () {
this.expand = !this.expand
},
toJumpPage (type) {
switch (type) {
case 1:
this.$router.push('/homepagetwo')
break
case 2:
this.$router.push('/hnlktwo')
break
case 3:
break
case 4:
this.$router.push('/firedrytwo')
break
case 5:
this.$router.push('/sortpacktwo')
break
case 6:
this.$router.push('/pdtwo')
break
}
}
}
}
</script>
@@ -155,9 +219,12 @@ export default {
<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
position relative
_wh(100%, 100%)
overflow hidden
.n_header
position relative
z-index 0
_wh(100%, 8%)
_bis('../../../images/bg_header.jpg')
.n_header_h1
@@ -171,31 +238,27 @@ export default {
font-family "阿里妈妈数黑体" !important
padding-left 3px
.n_body_container
position relative
z-index 8
_wh(100%, 92%)
padding 40px 50px 20px 0
padding 10px 50px 20px 40px
_bis('../../../images/bg_content_r.jpg')
.n_body_container_wraper
_wh(100%, 100%)
.n_content
_wh(100%, 49.75%)
_fj(row)
&:nth-child(2)
margin-top .5%
.n_bottom_content
_fj(row)
.item_wrap
width calc(50% - 8px)
&:nth-child(2)
margin-left 16px
.item_tip_bg_s
_bis('../../../images/bg_title_s.png')
.item_wrap
_wh(100%, 100%)
_wh(calc(50% - 8px), 100%)
&:nth-child(2)
margin-left 16px
.item_tip
_wh(100%, 32px)
line-height 32px
padding 0 10px
.item_tip_bg_s
_bis('../../../images/bg_title_j.png')
_bis('../../../images/bg_title_s.png')
.item_tip_left
_wh(60%, 100%)
font-family "SourceHanSansCN"
@@ -213,10 +276,10 @@ export default {
border 1px solid rgba(8,205,248,0.3)
.scroll_tab_1
_wh(100%, 40px)
border-bottom 1 solid rgba(8,205,248,0.3)
border-bottom 1px solid rgba(8,205,248,0.3)
li
float left
width 9%
width 16%
_font(14px,40px,#78B1DE,,center)
word-wrap break-word
word-break break-all
@@ -224,14 +287,8 @@ export default {
padding 0 5px
overflow hidden
box-sizing border-box
&:nth-child(8)
width 10%
.scroll_tab_2 li
width 14%
&:nth-child(7)
width 16%
.scroll_tab_3 li
width 12.5%
&:nth-child(6)
width 20%
.scroll_container_1
width 100%
height calc(100% - 40px)
@@ -239,13 +296,13 @@ export default {
.scroll-ul_1
li
_wh(100%, 44px)
border-bottom 1 solid rgba(8,205,248,0.3)
border-bottom 1px 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_1_div
float left
_wh(9%, 44px)
_wh(16%, 44px)
_fj(row, center)
_font(14px, 16px, #fff,,center)
word-wrap break-word
@@ -253,12 +310,6 @@ export default {
// white-space nowrap
padding 0 5px
overflow hidden
&:nth-child(8)
width 10%
.scroll-ul_2 li .scroll-ul_1_div
width 14%
&:nth-child(7)
width 16%
.scroll-ul_3 li .scroll-ul_1_div
width 12.5%
&:nth-child(6)
width 20%
</style>

84
src/pages/modules/takeshape/one.vue
View File

@@ -645,7 +645,7 @@
<div class="tooltip_page pointer" @click.stop="toJumpPage(6)">6</div>
</div>
</div>
<!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
<div class="style_block" style="left: calc(100% / 3);top:0;"></div>
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
@@ -653,7 +653,7 @@
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
<div class="style_block" style="background: green;left: 0;top:0;"></div>
<div class="style_block" style="left: 0;top:calc(100% / 3);"></div>
<div class="style_block" style="background: green;left: 0;bottom: 0"></div> -->
<div class="style_block" style="background: green;left: 0;bottom: 0"></div>
</div>
</template>
@@ -856,70 +856,118 @@ export default {
this.foldlineStyle = 'foldline_right'
break
case 2:
this.pkObj = this.PressPopoverList[1]
this.pkObj = this.TrayStationPopoverList[1]
this.top = this.$refs.mpgw02.getBoundingClientRect().top - 21
this.left = this.$refs.mpgw02.getBoundingClientRect().left - 657
this.foldlineStyle = 'foldline_right'
break
case 3:
this.pkObj = this.PressPopoverList[2]
this.pkObj = this.TrayStationPopoverList[2]
this.top = this.$refs.mpgw03.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw03.getBoundingClientRect().left - 635
this.foldlineStyle = 'foldline_right'
break
case 4:
this.pkObj = this.PressPopoverList[3]
this.pkObj = this.TrayStationPopoverList[3]
this.top = this.$refs.mpgw04.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw04.getBoundingClientRect().left - 635
this.foldlineStyle = 'foldline_right'
break
case 5:
this.pkObj = this.PressPopoverList[4]
this.pkObj = this.TrayStationPopoverList[4]
this.top = this.$refs.mpgw05.getBoundingClientRect().top - 21
this.left = this.$refs.mpgw05.getBoundingClientRect().left - 657
this.foldlineStyle = 'foldline_right'
break
case 6:
this.pkObj = this.PressPopoverList[5]
this.pkObj = this.TrayStationPopoverList[5]
this.top = this.$refs.mpgw06.getBoundingClientRect().top - 21
this.left = this.$refs.mpgw06.getBoundingClientRect().left - 657
this.foldlineStyle = 'foldline_right'
break
case 7:
this.pkObj = this.PressPopoverList[6]
this.pkObj = this.TrayStationPopoverList[6]
this.top = this.$refs.mpgw07.getBoundingClientRect().top - 21
this.left = this.$refs.mpgw07.getBoundingClientRect().left - 657
this.foldlineStyle = 'foldline_right'
break
case 8:
this.pkObj = this.PressPopoverList[7]
this.pkObj = this.TrayStationPopoverList[7]
this.top = this.$refs.mpgw08.getBoundingClientRect().top - 21
this.left = this.$refs.mpgw08.getBoundingClientRect().left - 657
this.foldlineStyle = 'foldline_right'
break
case 9:
this.pkObj = this.PressPopoverList[8]
this.pkObj = this.TrayStationPopoverList[8]
this.top = this.$refs.mpgw09.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw09.getBoundingClientRect().left - 635
this.foldlineStyle = 'foldline_right'
break
case 10:
this.pkObj = this.PressPopoverList[9]
this.pkObj = this.TrayStationPopoverList[9]
this.top = this.$refs.mpgw10.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw10.getBoundingClientRect().left - 635
this.foldlineStyle = 'foldline_right'
break
case 11:
this.pkObj = this.PressPopoverList[10]
this.pkObj = this.TrayStationPopoverList[10]
this.top = this.$refs.mpgw11.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw11.getBoundingClientRect().left - 635
this.foldlineStyle = 'foldline_right'
this.left = this.$refs.mpgw11.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 12:
this.pkObj = this.PressPopoverList[11]
this.pkObj = this.TrayStationPopoverList[11]
this.top = this.$refs.mpgw12.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw12.getBoundingClientRect().left - 635
this.foldlineStyle = 'foldline_right'
this.left = this.$refs.mpgw12.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 13:
this.pkObj = this.TrayStationPopoverList[12]
this.top = this.$refs.mpgw13.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw13.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 14:
this.pkObj = this.TrayStationPopoverList[13]
this.top = this.$refs.mpgw14.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw14.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 15:
this.pkObj = this.TrayStationPopoverList[14]
this.top = this.$refs.mpgw15.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw15.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 16:
this.pkObj = this.TrayStationPopoverList[15]
this.top = this.$refs.mpgw16.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw16.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 17:
this.pkObj = this.TrayStationPopoverList[16]
this.top = this.$refs.mpgw17.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw17.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 18:
this.pkObj = this.TrayStationPopoverList[17]
this.top = this.$refs.mpgw18.getBoundingClientRect().top - 40
this.left = this.$refs.mpgw18.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 19:
this.pkObj = this.TrayStationPopoverList[18]
this.top = this.$refs.mpgw19.getBoundingClientRect().top - 24
this.left = this.$refs.mpgw19.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
case 20:
this.pkObj = this.TrayStationPopoverList[19]
this.top = this.$refs.mpgw20.getBoundingClientRect().top - 24
this.left = this.$refs.mpgw20.getBoundingClientRect().left + 112
this.foldlineStyle = 'foldline_left'
break
}
}
@@ -936,6 +984,8 @@ export default {
_wh(100%, 100%)
overflow hidden
.n_header
position relative
z-index 0
_wh(100%, 8%)
_bis('../../../images/bg_header.jpg')
.n_header_h1

214
src/pages/modules/takeshape/two.vue
View File

@@ -19,7 +19,6 @@
<li>设备</li>
<li>BOM号</li>
<li>生产物料</li>
<li>厂家</li>
<li>计划量(块)</li>
<li>已生产(块)</li>
<li>碾次</li>
@@ -28,20 +27,19 @@
<li>结束时间</li>
</ul>
<div class="scroll_container_1">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<vue-seamless-scroll :data="MoldingDayList" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.time}}</div>
<div class="scroll-ul_1_div">{{e.code}}</div>
<div class="scroll-ul_1_div">{{e.name}}</div>
<div class="scroll-ul_1_div">{{e.info}}</div>
<div class="scroll-ul_1_div">{{e.status}}</div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<li v-for="(e, i) in MoldingDayList" :key="i">
<div class="scroll-ul_1_div">{{e.workorder_code}}</div>
<div class="scroll-ul_1_div">{{e.device_name}}</div>
<div class="scroll-ul_1_div">{{e.bom}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{ e.plan_qty }}</div>
<div class="scroll-ul_1_div">{{ e.real_qty }}</div>
<div class="scroll-ul_1_div">{{ e.total_mix_frequency }}</div>
<div class="scroll-ul_1_div">{{ e.order_status_name }}</div>
<div class="scroll-ul_1_div">{{ e.realproducestart_date }}</div>
<div class="scroll-ul_1_div">{{ e.realproduceend_date }}</div>
</li>
</ul>
</vue-seamless-scroll>
@@ -60,23 +58,21 @@
<ul class="scroll_tab_1 scroll_tab_2">
<li>货位</li>
<li>物料编码</li>
<li>物料名称</li>
<li>数量</li>
<li>载具号</li>
<li>碾次</li>
<li>入库时间</li>
</ul>
<div class="scroll_container_1 scroll_container_2">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<vue-seamless-scroll :data="SemiFinishedProductShelList" :class-option="defaultOption2">
<ul class="scroll-ul_1 scroll-ul_2">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.time}}</div>
<div class="scroll-ul_1_div">{{e.code}}</div>
<div class="scroll-ul_1_div">{{e.name}}</div>
<div class="scroll-ul_1_div">{{e.info}}</div>
<div class="scroll-ul_1_div">{{e.status}}</div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<li v-for="(e, i) in SemiFinishedProductShelList" :key="i">
<div class="scroll-ul_1_div">{{e.point_name}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.qty}}</div>
<div class="scroll-ul_1_div">{{e.vehicle_code}}</div>
<div class="scroll-ul_1_div">{{ e.mix_num }}</div>
<div class="scroll-ul_1_div">{{ e.create_time }}</div>
</li>
</ul>
</vue-seamless-scroll>
@@ -93,7 +89,6 @@
<ul class="scroll_tab_1 scroll_tab_3">
<li>类别</li>
<li>物料编码</li>
<li>物料名称</li>
<li>数量</li>
<li>载具号</li>
<li>碾次</li>
@@ -101,17 +96,16 @@
<li>出入时间</li>
</ul>
<div class="scroll_container_1 scroll_container_3">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<vue-seamless-scroll :data="MoldingIOStoringList" :class-option="defaultOption3">
<ul class="scroll-ul_1 scroll-ul_3">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.time}}</div>
<div class="scroll-ul_1_div">{{e.code}}</div>
<div class="scroll-ul_1_div">{{e.name}}</div>
<div class="scroll-ul_1_div">{{e.info}}</div>
<div class="scroll-ul_1_div">{{e.status}}</div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<div class="scroll-ul_1_div"></div>
<li v-for="(e, i) in MoldingIOStoringList" :key="i">
<div class="scroll-ul_1_div">{{e.io_type}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.qty}}</div>
<div class="scroll-ul_1_div">{{e.vehicle_code}}</div>
<div class="scroll-ul_1_div">{{ e.mix_num }}</div>
<div class="scroll-ul_1_div">{{ e.point_code }}</div>
<div class="scroll-ul_1_div">{{ e.create_time }}</div>
</li>
</ul>
</vue-seamless-scroll>
@@ -122,21 +116,71 @@
</div>
</div>
</div>
<div class="tooltip_wrap right_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
<div class="tooltip_pages" :style="expand ? 'width: 240px' : 'width: 0'">
<div class="tooltip_page pointer" @click="toJumpPage(1)">1</div>
<div class="tooltip_page pointer" @click="toJumpPage(2)">2</div>
<div class="tooltip_page current_page pointer" @click="toJumpPage(3)">3</div>
<div class="tooltip_page pointer" @click="toJumpPage(4)">4</div>
<div class="tooltip_page pointer" @click="toJumpPage(5)">5</div>
<div class="tooltip_page pointer" @click="toJumpPage(6)">6</div>
</div>
<div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '&lt;&lt;' : '&gt;&gt;'"></div>
</div>
<div class="style_block" style="left: calc(100% / 3);top:0;"></div>
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
<div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
<div class="style_block" style="background: green;left: 0;top:0;"></div>
<div class="style_block" style="left: 0;top:calc(100% / 3);"></div>
<div class="style_block" style="background: green;left: 0;bottom: 0"></div>
</div>
</template>
<script>
import { moldingTableDate } from '@js/getData2'
export default {
data () {
return {
array1: [{time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}]
interTime: this.$store.getters.setTime,
timer: null,
expand: false,
MoldingIOStoringList: [],
SemiFinishedProductShelList: [],
MoldingDayList: []
}
},
computed: {
defaultOption1 () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 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: 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)
}
},
defaultOption3 () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
@@ -146,8 +190,51 @@ export default {
}
}
},
mounted () {
this._moldingTableDate()
// this.refresh()
},
beforeDestroy () {
clearInterval(this.timer)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this._moldingTableDate()
}, this.interTime)
},
async _moldingTableDate () {
let res = await moldingTableDate()
if (res.code === 200) {
this.MoldingIOStoringList = [...res.result.MoldingIOStoringList]
this.SemiFinishedProductShelList = [...res.result.SemiFinishedProductShelList]
this.MoldingDayList = [...res.result.MoldingDayList]
}
},
expandTooltip () {
this.expand = !this.expand
},
toJumpPage (type) {
switch (type) {
case 1:
this.$router.push('/homepagetwo')
break
case 2:
this.$router.push('/hnlktwo')
break
case 3:
break
case 4:
this.$router.push('/firedrytwo')
break
case 5:
this.$router.push('/sortpacktwo')
break
case 6:
this.$router.push('/pdtwo')
break
}
}
}
}
</script>
@@ -155,9 +242,12 @@ export default {
<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
position relative
_wh(100%, 100%)
overflow hidden
.n_header
position relative
z-index 0
_wh(100%, 8%)
_bis('../../../images/bg_header.jpg')
.n_header_h1
@@ -171,8 +261,10 @@ export default {
font-family "阿里妈妈数黑体" !important
padding-left 3px
.n_body_container
position relative
z-index 8
_wh(100%, 92%)
padding 15px 50px 20px 0
padding 10px 50px 20px 40px
_bis('../../../images/bg_content_r.jpg')
.n_body_container_wraper
_wh(100%, 100%)
@@ -213,10 +305,10 @@ export default {
border 1px solid rgba(8,205,248,0.3)
.scroll_tab_1
_wh(100%, 40px)
border-bottom 1 solid rgba(8,205,248,0.3)
border-bottom 1px solid rgba(8,205,248,0.3)
li
float left
width 9%
width 10%
_font(14px,40px,#78B1DE,,center)
word-wrap break-word
word-break break-all
@@ -224,14 +316,20 @@ export default {
padding 0 5px
overflow hidden
box-sizing border-box
&:nth-child(8)
width 10%
.scroll_tab_2 li
width 14%
&:nth-child(7)
width 16%
width 6%
&:nth-child(9),&:nth-child(10)
width 12%
.scroll_tab_2 li
width 16%
&:nth-child(6)
width 20%
.scroll_tab_3 li
width 12.5%
width 14%
&:nth-child(3)
width 11%
&:nth-child(7)
width 19%
.scroll_container_1
width 100%
height calc(100% - 40px)
@@ -239,13 +337,13 @@ export default {
.scroll-ul_1
li
_wh(100%, 44px)
border-bottom 1 solid rgba(8,205,248,0.3)
border-bottom 1px 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_1_div
float left
_wh(9%, 44px)
_wh(10%, 44px)
_fj(row, center)
_font(14px, 16px, #fff,,center)
word-wrap break-word
@@ -253,12 +351,18 @@ export default {
// white-space nowrap
padding 0 5px
overflow hidden
&:nth-child(8)
width 10%
&:nth-child(7)
width 6%
&:nth-child(9),&:nth-child(10)
width 12%
.scroll-ul_2 li .scroll-ul_1_div
width 14%
&:nth-child(7)
width 16%
width 16%
&:nth-child(6)
width 20%
.scroll-ul_3 li .scroll-ul_1_div
width 12.5%
width 14%
&:nth-child(3)
width 11%
&:nth-child(7)
width 19%
</style>