This commit is contained in:
2023-06-16 13:59:03 +08:00
parent 8baff8cda7
commit d2c63e7f5f
7 changed files with 778 additions and 140 deletions

View File

@@ -44,8 +44,8 @@
border-color #03fcfd border-color #03fcfd
color #fff color #fff
.current_page .current_page
background-color #049293 background-color #02d0d0
border-color #049293 border-color #02d0d0
color #fff color #fff
// //

View File

@@ -2946,6 +2946,13 @@ export const moldingTableDate = () => {
return res return res
} }
// 分拣包装左
// export const sortingAndPackagingPopover = () => post('api/cockpit/sortingAndPackagingPopover', {})
export const sortingAndPackagingPopover = () => {
let res = {'code': 200, 'desc': '操作成功', 'result': {'SplitOrPalletizingList': [{'bom': '3012C1', 'is_full': '是', 'device_name': '压机1', 'qty': '270', 'mix_num': '20230606000', 'point_name': '分拣拆垛1对接位1', 'vehicle_code': '5070', 'point_code': 'FJCD01DJ01', 'point_status': '1', 'material_code': 'GBMAC3012C1'}, {'bom': '-', 'is_full': '-', 'device_name': '-', 'qty': '-', 'mix_num': '-', 'point_name': '分拣拆垛1对接位2', 'vehicle_code': '', 'point_code': 'FJCD01DJ02', 'point_status': '0', 'material_code': '-'}, {'bom': '-', 'is_full': '-', 'device_name': '-', 'qty': '-', 'mix_num': '-', 'point_name': '分拣码垛1对接位1', 'vehicle_code': '0000', 'point_code': 'FJMD01DJ01', 'point_status': '1', 'material_code': '-'}, {'bom': '-', 'is_full': '-', 'device_name': '-', 'qty': '-', 'mix_num': '-', 'point_name': '分拣码垛1对接位2', 'vehicle_code': '0000', 'point_code': 'FJMD01DJ02', 'point_status': '1', 'material_code': '-'}], 'HalfSupportCacheList': [{'bom': '-', 'device_name': '-', 'instorage_time': '-', 'qty': '-', 'mix_num': '-', 'point_name': '半托缓存位1', 'point_status_name': '无货', 'vehicle_code': '-', 'point_code': 'BTHC01', 'point_status': '0', 'material_code': '-'}], 'DevicesInfoList': {'DT01': {'device_status': 2, 'device_name': '叠托位', 'device_status_name': '运行中', 'error_time': '0', 'stand_time': '2', 'device_code': 'DT01', 'open_time': '2023-06-02 11:12:02', 'work_time': '7'}, 'FJCDJXS01': {'device_status': 2, 'device_name': '分拣拆垛机械手', 'device_status_name': '运行中', 'error_time': '0', 'stand_time': '2', 'device_code': 'FJCDJXS01', 'open_time': '2023-06-02 11:12:02', 'work_time': '7'}, 'RGV01': {'device_status': 2, 'device_name': 'RGV搬运车', 'device_status_name': '运行中', 'error_time': '0', 'stand_time': '2', 'device_code': 'RGV01', 'open_time': '2023-06-02 11:12:02', 'work_time': '7'}, 'FJMDJXS01': {'device_status': 2, 'device_name': '分拣码垛机械手', 'device_status_name': '运行中', 'error_time': '0', 'stand_time': '2', 'device_code': 'FJMDJXS01', 'open_time': '2023-06-02 11:12:02', 'work_time': '7'}, 'CPJ01': {'device_status': 2, 'device_name': '拆盘机', 'device_status_name': '运行中', 'error_time': '0', 'stand_time': '2', 'device_code': 'CPJ01', 'open_time': '2023-06-02 11:12:02', 'work_time': '7'}, 'BZJ01': {'device_status': 2, 'device_name': '包装机', 'device_status_name': '运行中', 'error_time': '0', 'stand_time': '2', 'device_code': 'BZJ01', 'open_time': '2023-06-02 11:12:02', 'work_time': '7'}, 'FJRGCD01': {'device_status': 2, 'device_name': '分拣人工拆垛', 'device_status_name': '运行中', 'error_time': '0', 'stand_time': '2', 'device_code': 'FJRGCD01', 'open_time': '2023-06-02 11:12:02', 'work_time': '7'}}}}
return res
}
// 分拣包装右 // 分拣包装右
// export const sortingAndPackaging = () => post('api/cockpit/sortingAndPackaging', {}) // export const sortingAndPackaging = () => post('api/cockpit/sortingAndPackaging', {})
export const sortingAndPackaging = () => { export const sortingAndPackaging = () => {
@@ -2955,19 +2962,19 @@ export const sortingAndPackaging = () => {
'result': { 'result': {
'SortingDayList': [ 'SortingDayList': [
{ {
'total_palletizing_qty': '0', 'total_palletizing_qty': '100',
'total_stripping_qty': '288', 'total_stripping_qty': '288',
'material_id': '1658742670023069696', 'material_id': '1658742670023069696',
'material_code': 'GBMCZ3004M1' 'material_code': 'GBMCZ3004M1'
}, },
{ {
'total_palletizing_qty': '0', 'total_palletizing_qty': '100',
'total_stripping_qty': '270', 'total_stripping_qty': '270',
'material_id': '1655138063413809152', 'material_id': '1655138063413809152',
'material_code': 'ZLMCZ1001C1' 'material_code': 'ZLMCZ1001C1'
}, },
{ {
'total_palletizing_qty': '0', 'total_palletizing_qty': '100',
'total_stripping_qty': '576', 'total_stripping_qty': '576',
'material_id': '1659114773914193920', 'material_id': '1659114773914193920',
'material_code': 'GBMCZ3004M1' 'material_code': 'GBMCZ3004M1'

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

View File

@@ -161,9 +161,6 @@
</div> </div>
</div> </div>
<div class="machine_wrap liu_wrap"> <div class="machine_wrap liu_wrap">
<!-- <div class="sh_machine liu">
<img src="../../../images/workshop/liu.png" alt="">
</div> -->
<div class="sh_machine cmdssj_1"> <div class="sh_machine cmdssj_1">
<img src="../../../images/workshop/cmdssj_gray.png" alt=""> <img src="../../../images/workshop/cmdssj_gray.png" alt="">
</div> </div>
@@ -1124,8 +1121,5 @@ export default {
100% { 100% {
transform: rotateZ(-90deg) transform: rotateZ(-90deg)
} }
}.style_block }
position absolute
_wh(calc(100% / 3), calc(100% / 3))
background red
</style> </style>

View File

@@ -10,8 +10,10 @@
// import two from './two.vue' // import two from './two.vue'
// import one from '../homepage/one.vue' // import one from '../homepage/one.vue'
// import two from '../homepage/two.vue' // import two from '../homepage/two.vue'
import one from '../takeshape/one.vue' // import one from '../takeshape/one.vue'
import two from '../takeshape/two.vue' // import two from '../takeshape/two.vue'
import one from '../sortpack/one.vue'
import two from '../sortpack/two.vue'
// import one from '../hunniankunliao/one.vue' // import one from '../hunniankunliao/one.vue'
// import two from '../hunniankunliao/two.vue' // import two from '../hunniankunliao/two.vue'
// import one from '../firedry/one.vue' // import one from '../firedry/one.vue'

View File

@@ -39,94 +39,283 @@
</div> </div>
</div> </div>
</div> </div>
<div class="machine_wrap cmd_block"> <div class="cmd_block">
<div class="machine_wrap ktp_wrap_1"> <div class="machine_wrap ktp_wrap_1">
<div class="sh_machine ktp"> <div class="ktp">
<img src="../../../images/workshop/ktp_gray.png" alt=""> <img src="../../../images/workshop/ktp_gray.png" alt="">
</div>
</div> </div>
<div class="machine_wrap cmd_wrap_1"> </div>
<div class="sh_machine weilan1"> <div class="machine_wrap cmd_wrap_1">
<img src="../../../images/workshop/weilan_5.png" alt=""> <div class="sh_machine weilan1">
<img src="../../../images/workshop/weilan_5.png" alt="">
</div>
<div class="sh_machine fjfztb">
<img src="../../../images/workshop/fjfztb.png" alt="">
</div>
<div v-if="SortAndPalletizingList.length > 0" class="sh_machine kongtuopan_1">
<img v-show="SortAndPalletizingList[0].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
<img v-show="SortAndPalletizingList[0].color_status === 1" src="../../../images/workshop/ktp_green.png" alt="">
<img v-show="SortAndPalletizingList[0].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
<img v-show="SortAndPalletizingList[0].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
</div>
<div v-if="SortAndPalletizingList.length > 0" class="sh_machine kongtuopan_2">
<img v-show="SortAndPalletizingList[1].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
<img v-show="SortAndPalletizingList[1].color_status === 1" src="../../../images/workshop/ktp_green.png" alt="">
<img v-show="SortAndPalletizingList[1].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
<img v-show="SortAndPalletizingList[1].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
</div>
<div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot_1" :class="{'rotate_1': String(ManipulatorInfoList[4].color_status) === '1'}">
<img v-show="String(ManipulatorInfoList[4].color_status) === '0'" src="../../../images/workshop/robot_cmd_gray.png" alt="">
<img v-show="String(ManipulatorInfoList[4].color_status) === '1'" src="../../../images/workshop/robot_cmd_green.png" alt="">
<img v-show="String(ManipulatorInfoList[4].color_status) === '2'" src="../../../images/workshop/robot_cmd_red.png" alt="">
<img v-show="String(ManipulatorInfoList[4].color_status) === '3'" src="../../../images/workshop/robot_cmd_yellow.png" alt="">
</div>
<div class="sh_machine weilan2">
<img src="../../../images/workshop/weilan_5.png" alt="">
</div>
<div v-if="SortAndPalletizingList.length > 0" class="sh_machine cmdssj_1">
<img v-show="SortAndPalletizingList[2].color_status === 0" src="../../../images/workshop/cmdssj_gray.png" alt="">
<img v-show="SortAndPalletizingList[2].color_status === 1" src="../../../images/workshop/cmdssj_green.png" alt="">
<img v-show="SortAndPalletizingList[2].color_status === 2" src="../../../images/workshop/cmdssj_red.png" alt="">
<img v-show="SortAndPalletizingList[2].color_status === 3" src="../../../images/workshop/cmdssj_yellow.png" alt="">
</div>
<div v-if="SortAndPalletizingList.length > 0" class="sh_machine cmdssj_1 cmdssj_2">
<img v-show="SortAndPalletizingList[3].color_status === 0" src="../../../images/workshop/cmdssj_gray.png" alt="">
<img v-show="SortAndPalletizingList[3].color_status === 1" src="../../../images/workshop/cmdssj_green.png" alt="">
<img v-show="SortAndPalletizingList[3].color_status === 2" src="../../../images/workshop/cmdssj_red.png" alt="">
<img v-show="SortAndPalletizingList[3].color_status === 3" src="../../../images/workshop/cmdssj_yellow.png" alt="">
</div>
<div class="sh_machine robot_2 rotate_2">
<img src="../../../images/workshop/robot_cmd_green.png" alt="">
</div>
</div>
<div class="machine_wrap cmd_wrap_1 cmd_wrap_2">
<div class="sh_machine weilan1">
<img src="../../../images/workshop/weilan_5.png" alt="">
</div>
<div class="sh_machine fjfztb">
<img src="../../../images/workshop/fjfztb.png" alt="">
</div>
<div class="sh_machine kongtuopan_1">
<img src="../../../images/workshop/mtp.png" alt="">
</div>
<div class="sh_machine kongtuopan_2">
<img src="../../../images/workshop/mtp.png" alt="">
</div>
<div class="sh_machine robot_1">
<img src="../../../images/workshop/robot_cmd_gray.png" alt="">
</div>
<div class="sh_machine weilan2">
<img src="../../../images/workshop/weilan_5.png" alt="">
</div>
<div class="sh_machine cmdssj_1">
<img src="../../../images/workshop/cmdssj_gray.png" alt="">
</div>
<div class="sh_machine cmdssj_1 cmdssj_2">
<img src="../../../images/workshop/cmdssj_gray.png" alt="">
</div>
<div class="sh_machine robot_2">
<img src="../../../images/workshop/robot_cmd_gray.png" alt="">
</div>
</div>
<div class="machine_wrap liu_wrap">
<div class="sh_machine cmdssj_1">
<img src="../../../images/workshop/cmdssj_gray.png" alt="">
</div>
<div class="sh_machine cmdssj_1 cmdssj_2">
<img src="../../../images/workshop/cmdssj_gray.png" alt="">
</div>
<div class="rgv_line_wrap">
<div class="rgv_line_1">
<div class="rgv_line_begine"></div>
<div class="rgv_line_begine rgv_line_end"></div>
<div class="rgv_line_node" v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" :key="i"></div>
</div> </div>
<div class="sh_machine kongtuopan_1"> <div class="rgv_line_1 rgv_line_2">
<img src="../../../images/workshop/mtp.png" alt=""> <div class="rgv_line_begine"></div>
<div class="rgv_line_begine rgv_line_end"></div>
<div class="rgv_line_node" v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" :key="i"></div>
</div> </div>
<div class="sh_machine kongtuopan_2"> <div class="rgv_line_3"></div>
<img src="../../../images/workshop/mtp.png" alt=""> </div>
<div class="sh_machine rgvct">
<img src="../../../images/workshop/rgv_ct.png" alt="">
</div>
<div class="machine_wrap ggtj_wrap_1">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj_y.png" alt="" v-for="(e,i) in [1,2,3]" :key="i">
</div> </div>
<div class="sh_machine robot_1"> <div class="sh_machine fmj">
<img src="../../../images/workshop/robot_cmd_red.png" alt=""> <img src="../../../images/workshop/fmj.png" alt="">
</div>
<div class="sh_machine weilan2">
<img src="../../../images/workshop/weilan_5.png" alt="">
</div>
<div class="sh_machine fjfztb">
<img src="../../../images/workshop/fjfztb.png" alt="">
</div>
<div class="sh_machine guntssj_1">
<img src="../../../images/workshop/ggtssj.png" alt="">
</div>
<div class="sh_machine guntssj_2">
<img src="../../../images/workshop/ggtssj.png" alt="">
</div>
<div class="sh_machine robot_2">
<img src="../../../images/workshop/robot_cmd_red.png" alt="">
</div> </div>
</div> </div>
<div class="machine_wrap cmd_wrap_1 cmd_wrap_2"> <div class="machine_wrap ggtj_wrap_1 ggtj_wrap_2">
<div class="sh_machine weilan1"> <div class="machine_wrap ggtj">
<img src="../../../images/workshop/weilan_5.png" alt=""> <img src="../../../images/workshop/ggtssj_y.png" alt="">
</div>
<div class="sh_machine kongtuopan_1">
<img src="../../../images/workshop/mtp.png" alt="">
</div>
<div class="sh_machine kongtuopan_2">
<img src="../../../images/workshop/mtp.png" alt="">
</div>
<div class="sh_machine robot_1">
<img src="../../../images/workshop/robot_cmd_gray.png" alt="">
</div>
<div class="sh_machine weilan2">
<img src="../../../images/workshop/weilan_5.png" alt="">
</div>
<div class="sh_machine fjfztb">
<img src="../../../images/workshop/fjfztb.png" alt="">
</div>
<div class="sh_machine guntssj_1">
<img src="../../../images/workshop/ggtssj.png" alt="">
</div>
<div class="sh_machine guntssj_2">
<img src="../../../images/workshop/ggtssj.png" alt="">
</div>
<div class="sh_machine robot_2">
<img src="../../../images/workshop/robot_cmd_gray.png" alt="">
</div> </div>
</div> </div>
<div class="machine_wrap rgv_line_wrap"> <div class="machine_wrap ggtj_wrap_1 ggtj_wrap_3">
<div class="sh_machine rgv_line"> <div class="machine_wrap ggtj">
<img src="../../../images/workshop/liu.png" alt=""> <img src="../../../images/workshop/ggtssj_y.png" alt="">
</div> </div>
<!-- <div class="rgv_line_1">
<div class="rgv_line_begine"></div>
<div class="rgv_line_begine rgv_line_end"></div>
</div>
<div class="rgv_line_1 rgv_line_2">
<div class="rgv_line_begine"></div>
<div class="rgv_line_begine rgv_line_end"></div>
</div>
<div class="rgv_line_3"></div> -->
</div> </div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_4">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj_y.png" alt="" v-for="(e,i) in [1,2,3]" :key="i">
</div>
<div class="sh_machine fmj">
<img src="../../../images/workshop/fmj.png" alt="">
</div>
</div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_5">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj_y.png" alt="">
</div>
</div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_6">
<div class="sh_machine rgpt">
<img src="../../../images/workshop/rgpt.png" alt="">
</div>
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj.png" alt="" v-for="(e,i) in [1,2,3,4,5,6,7,8,9]" :key="i">
</div>
<div class="sh_machine ltssj">
<img src="../../../images/workshop/ltssj_g.png" alt="">
</div>
<div class="sh_machine fmj_bzd">
<img src="../../../images/workshop/fmj_bzd.png" alt="">
</div>
<div class="sh_machine crj">
<img src="../../../images/workshop/crj.png" alt="">
</div>
</div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_7">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj_y.png" alt="">
</div>
</div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_8">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj_y.png" alt="">
</div>
</div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_9">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj_y.png" alt="">
</div>
</div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_10">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj_y.png" alt="">
</div>
</div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_11">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj_y.png" alt="">
</div>
</div>
<div class="machine_wrap ggtj_wrap_1 ggtj_wrap_12">
<div class="machine_wrap ggtj">
<img src="../../../images/workshop/ggtssj.png" alt="" v-for="(e,i) in [1,2,3,4,5,6,7,8,9]" :key="i">
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="tooltip_wrap left_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
<div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '&gt;&gt;' : '&lt;&lt;'"></div>
<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 pointer" @click="toJumpPage(3)">3</div>
<div class="tooltip_page pointer" @click="toJumpPage(4)">4</div>
<div class="tooltip_page current_page pointer" @click="toJumpPage(5)">5</div>
<div class="tooltip_page pointer" @click="toJumpPage(6)">6</div>
</div>
</div>
</div> </div>
</template> </template>
<script>
import { workshopCondition, sortingAndPackagingPopover } from '@js/getData2'
export default {
data () {
return {
interTime: this.$store.getters.setTime,
timer: null,
expand: false,
SplitOrPalletizingList: [],
HalfSupportCacheList: [],
DevicesInfoList: [],
SortAndPalletizingList: [], // 分拣拆码垛对接位
ManipulatorInfoList: [] // 机械手数据
}
},
mounted () {
this._sortingAndPackagingPopover()
this._workshopCondition()
// this.refresh()
},
beforeDestroy () {
clearInterval(this.timer)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this._sortingAndPackagingPopover()
this._workshopCondition()
}, this.interTime)
},
async _workshopCondition () {
let res = await workshopCondition()
if (res.code === 200) {
this.SortAndPalletizingList = [...res.result.SortAndPalletizingList]
this.ManipulatorInfoList = [...res.result.ManipulatorInfoList]
}
},
async _sortingAndPackagingPopover () {
let res = await sortingAndPackagingPopover()
if (res.code === 200) {
this.SplitOrPalletizingList = [...res.result.SplitOrPalletizingList]
this.HalfSupportCacheList = [...res.result.HalfSupportCacheList]
this.DevicesInfoList = [...res.result.DevicesInfoList]
}
},
expandTooltip () {
this.expand = !this.expand
},
toJumpPage (type) {
switch (type) {
case 1:
this.$router.push('/homepageone')
break
case 2:
this.$router.push('/hnlkone')
break
case 3:
this.$router.push('/takeshapeone')
break
case 4:
this.$router.push('/firedryone')
break
case 5:
break
case 6:
this.$router.push('/pdone')
break
}
}
}
}
</script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~@css/mixin' @import '~@css/mixin'
.n_container .n_container
position relative
_wh(100%, 100%) _wh(100%, 100%)
overflow hidden overflow hidden
.n_header .n_header
@@ -196,8 +385,8 @@
_wh(100%, auto) _wh(100%, auto)
.diepanji_wrap .diepanji_wrap
_wh(30%,50%) _wh(30%,50%)
left 1% left 5%
top 5% top 2%
.mtp_wrap_1 .mtp_wrap_1
width 7% width 7%
img img
@@ -214,69 +403,116 @@
.cpj .cpj
width 100% width 100%
.cmd_block .cmd_block
_wh(60%, 80%) width 41%
top 5% height 77%
left 20% position absolute
top: 2%;
left: 44%;
.ktp_wrap_1 .ktp_wrap_1
width 3.5% width: 6.3%;
top: 0;
left: -12.5%;
.ktp
width 100%
img
_wh(100%, auto)
.cmd_wrap_1 .cmd_wrap_1
_wh(14%, 30%) width: 24%;
left 6% height: 36%;
.weilan1 top: 0
width 100% left: 0
img .robot_1
transform: rotate(180deg); left: 48%;
.kongtuopan_1 top: 12%;
width 25% width 1%
top 10% height 1%
left 10% transform: rotate(-90deg)
.kongtuopan_2 img
width 25% width: 2000%;
top 10% top: -2000%;
left auto left: -1000%;
right 10% .kongtuopan_1
.robot_1 width 26%
width: 20%; top 3%
top: -4%; left 3%
left: 38%; .kongtuopan_2
.weilan2 width 26%
width: 100%; top 3%
top: 64%; left auto
left: 0; right 3%
.fjfztb .fjfztb
width: 38%; width: 59%;
top: 27%; top: 9%;
left: 29%; left: 17%;
.guntssj_1 .weilan1
width: 25%; width: 100%;
top: 93%; height: 53%;
left: 8%; left: 0;
.guntssj_2 transform rotate(180deg)
width: 25%; img
top: 93%; _wh(100%, 100%)
left: auto .weilan2
right 8% width: 100%;
.robot_2 height: 53%;
width: 20%; top: auto;
top: 81%; bottom: -19%;
left: 38%; left: 0;
img
_wh(100%, 100%)
.cmdssj_1
width: 26%
top: 95%;
left: 4%;
img
transform rotateY(180deg)
.cmdssj_2
left auto
right 4%
img
transform rotate(0deg)
.robot_2
top: auto;
bottom: -8%
left: 48%;
width 1%
height 1%
transform: rotate(-90deg)
img
width: 2000%;
top: -2000%;
left: -1000%;
.cmd_wrap_2 .cmd_wrap_2
left 30% left 30%
.liu_wrap
_wh(130%, 78%)
top 43%
left -15%
.cmdssj_1
width: 4.8%;
top: -11%;
left: 74%;
img
transform rotateY(180deg)
.cmdssj_2
left: 84%;
img
transform rotate(0deg)
.rgv_line_wrap .rgv_line_wrap
width 100% position absolute
height 8% top 0
top 36%
left 0 left 0
_wh(100%, 9%)
.rgv_line_1 .rgv_line_1
position absolute position absolute
top 0 top 0
left 2% left 2%
z-index 4 z-index 4
width 96% width 96%
height 7% height 10%
background-color #b2b2b2 background-color #b2b2b2
margin 0 auto margin 0 auto
box-shadow 0px 3px 10px #333333 box-shadow 0px 3px 10px #333333
_fj(row)
.rgv_line_begine .rgv_line_begine
position absolute position absolute
top -100% top -100%
@@ -290,12 +526,17 @@
.rgv_line_end .rgv_line_end
left auto left auto
right 0 right 0
.rgv_line_node
_wh(0.2%, 150%)
background-color #b2b2b2
border-radius 50%
box-shadow 0px 1px 4px #333333
.rgv_line_2 .rgv_line_2
top auto top auto
bottom 0 bottom 0
.rgv_line_3 .rgv_line_3
position absolute position absolute
top 45% top 47.5%
left 0 left 0
z-index 4 z-index 4
width 100% width 100%
@@ -303,4 +544,93 @@
background-color #b2b2b2 background-color #b2b2b2
margin 0 auto margin 0 auto
box-shadow 0px 3px 10px #333333 box-shadow 0px 3px 10px #333333
.rgvct
width: 10%;
top: 0.6%;
left: 75%;
.ggtj_wrap_1
_wh(5%, 90%)
top: 9%;
left: 7%;
.ggtj
width 100%
img
_wh(100%, auto)
.fmj
width: 120%;
left: -10%;
top 5%
.ggtj_wrap_2
left 14%
.ggtj_wrap_3
left 24%
.ggtj_wrap_4
left 31%
.ggtj_wrap_5
left 40%
.ggtj_wrap_6
left 48%
.rgpt
top 57%
width: 200%;
left: -50%;
z-index 1
.ltssj
top 55%
width: 120%;
left: -10%;
.fmj_bzd
top 80%
width: 120%;
left: -10%;
.crj
top: 98%;
width: 180%;
left: -74%;
.ggtj_wrap_7
left 56%
.ggtj_wrap_8
left 62%
.ggtj_wrap_9
left 68%
.ggtj_wrap_10
left 74%
.ggtj_wrap_11
left 80%
.ggtj_wrap_12
left: 76%;
top: 58%;
transform: rotate(-90deg);
.rotate_1
animation rotate_1 1.5s linear 1.5s infinite alternate-reverse
@keyframes rotate_1 {
0% {
transform: rotateZ(-90deg)
}
10% {
transform: rotateZ(-90deg)
}
90% {
transform: rotateZ(-180deg)
}
100% {
transform: rotateZ(-180deg)
}
}
.rotate_2
animation rotate_2 1.5s linear 1.5s infinite alternate-reverse
@keyframes rotate_2 {
0% {
transform: rotateZ(0deg)
}
10% {
transform: rotateZ(0deg)
}
90% {
transform: rotateZ(-90deg)
}
100% {
transform: rotateZ(-90deg)
}
}
</style> </style>

View File

@@ -8,7 +8,7 @@
<div class="n_body_container"> <div class="n_body_container">
<div class="n_body_container_wraper"> <div class="n_body_container_wraper">
<div class="n_content"> <div class="n_content">
<div class="item_wrap"> <div class="item_wrap item_wrap_bg">
<div class="item_tip"> <div class="item_tip">
<div class="item_tip_left">当日拆码垛</div> <div class="item_tip_left">当日拆码垛</div>
</div> </div>
@@ -16,7 +16,7 @@
<div id="sortpack_echart_1" style="width: 100%; height: 100%;"></div> <div id="sortpack_echart_1" style="width: 100%; height: 100%;"></div>
</div> </div>
</div> </div>
<div class="item_wrap"> <div class="item_wrap item_wrap_bg">
<div class="item_tip"> <div class="item_tip">
<div class="item_tip_left">当日成品</div> <div class="item_tip_left">当日成品</div>
</div> </div>
@@ -95,9 +95,9 @@
<div class="tooltip_pages" :style="expand ? 'width: 240px' : 'width: 0'"> <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(1)">1</div>
<div class="tooltip_page pointer" @click="toJumpPage(2)">2</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(3)">3</div>
<div class="tooltip_page pointer" @click="toJumpPage(4)">4</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 current_page pointer" @click="toJumpPage(5)">5</div>
<div class="tooltip_page pointer" @click="toJumpPage(6)">6</div> <div class="tooltip_page pointer" @click="toJumpPage(6)">6</div>
</div> </div>
<div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '&lt;&lt;' : '&gt;&gt;'"></div> <div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '&lt;&lt;' : '&gt;&gt;'"></div>
@@ -122,6 +122,8 @@ export default {
interTime: this.$store.getters.setTime, interTime: this.$store.getters.setTime,
timer: null, timer: null,
expand: false, expand: false,
myCharts1: '',
myCharts2: '',
SortingDayList: [], SortingDayList: [],
PackingAreaTaskList: [], PackingAreaTaskList: [],
HalfSupportCacheList: [], HalfSupportCacheList: [],
@@ -186,6 +188,307 @@ export default {
this.PackingAreaTaskList = [...res.result.PackingAreaTaskList] this.PackingAreaTaskList = [...res.result.PackingAreaTaskList]
this.HalfSupportCacheList = [...res.result.HalfSupportCacheList] this.HalfSupportCacheList = [...res.result.HalfSupportCacheList]
this.CPDayList = [...res.result.CPDayList] this.CPDayList = [...res.result.CPDayList]
this.setEchart1()
this.setEchart2()
}
},
setEchart1 () {
let barName = []
let barData1 = []
let barData2 = []
this.SortingDayList.map(el => {
barName.push(el.material_code)
barData1.push(el.total_stripping_qty)
barData2.push(el.total_palletizing_qty)
})
let option = {
grid: {
top: 50,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {
icon: 'rect',
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '拆垛数', itemStyle: {color: '#0E90FD'}}, {name: '码垛数', itemStyle: {color: '#33CCCC'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
}
// rotate: 50
},
data: barName
},
yAxis: {
type: 'value',
name: '单位:块',
axisLine: {
show: false
},
splitNumber: 2,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: {
show: true,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
}
}
},
series: [
{
name: '拆垛数',
type: 'bar',
barWidth: '8',
barGap: '200%',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: 'rgba(96,112,128,0.10)',
opacity: 1
},
{
offset: 0,
color: '#0E90FD',
opacity: 0.1
}
])
}
},
data: barData1
},
{
name: '码垛数',
type: 'bar',
barWidth: '8',
barGap: '200%',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#33CCCC',
opacity: 1
},
{
offset: 1,
color: 'rgba(31,89,89,0.25)',
opacity: 0.25
}
])
}
},
data: barData2
}
]
}
let echart = document.getElementById('sortpack_echart_1')
if (this.myCharts1 !== '') {
this.myCharts1.dispose()
}
if (echart !== null) {
this.myCharts1 = this.$echarts.init(echart)
this.myCharts1.setOption(option)
window.addEventListener('resize', () => {
this.myCharts1.resize()
})
}
},
setEchart2 () {
let barName = []
let barData1 = []
let barData2 = []
let barData3 = []
this.CPDayList.map(el => {
barName.push(el.material_code)
barData1.push(el.inventory_qty)
barData2.push(el.qualified_in_qty)
barData3.push(el.unqualified_in_qty)
})
let option = {
grid: {
top: 50,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {
icon: 'rect',
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '库存数', itemStyle: {color: '#0E90FD'}}, {name: '合格入库', itemStyle: {color: '#33CCCC'}}, {name: '不合格入库', itemStyle: {color: '#EAAD24'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
}
// rotate: 50
},
data: barName
},
yAxis: {
type: 'value',
name: '单位:块',
axisLine: {
show: false
},
splitNumber: 2,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: {
show: true,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
}
}
},
series: [
{
name: '库存数',
type: 'bar',
barWidth: '8',
barGap: '200%',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: 'rgba(96,112,128,0.10)',
opacity: 1
},
{
offset: 0,
color: '#0E90FD',
opacity: 0.1
}
])
}
},
data: barData1
},
{
name: '合格入库',
type: 'bar',
barWidth: '8',
barGap: '200%',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#33CCCC',
opacity: 1
},
{
offset: 1,
color: 'rgba(31,89,89,0.25)',
opacity: 0.25
}
])
}
},
data: barData2
},
{
name: '不合格入库',
type: 'bar',
barWidth: '8',
barGap: '200%',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#B68845',
opacity: 1
},
{
offset: 1,
color: 'rgba(134,98,45,0.25)',
opacity: 0.25
}
])
}
},
data: barData3
}
]
}
let echart = document.getElementById('sortpack_echart_2')
if (this.myCharts2 !== '') {
this.myCharts2.dispose()
}
if (echart !== null) {
this.myCharts2 = this.$echarts.init(echart)
this.myCharts2.setOption(option)
window.addEventListener('resize', () => {
this.myCharts2.resize()
})
} }
}, },
expandTooltip () { expandTooltip () {
@@ -200,12 +503,12 @@ export default {
this.$router.push('/hnlktwo') this.$router.push('/hnlktwo')
break break
case 3: case 3:
this.$router.push('/takeshapetwo')
break break
case 4: case 4:
this.$router.push('/firedrytwo') this.$router.push('/firedrytwo')
break break
case 5: case 5:
this.$router.push('/sortpacktwo')
break break
case 6: case 6:
this.$router.push('/pdtwo') this.$router.push('/pdtwo')
@@ -254,6 +557,8 @@ export default {
_wh(calc(50% - 8px), 100%) _wh(calc(50% - 8px), 100%)
&:nth-child(2) &:nth-child(2)
margin-left 16px margin-left 16px
.item_wrap_bg
background-image linear-gradient(to bottom, #070b1c, transparent)
.item_tip .item_tip
_wh(100%, 32px) _wh(100%, 32px)
line-height 32px line-height 32px