652 lines
18 KiB
Vue
652 lines
18 KiB
Vue
<template>
|
|
<div class="n_container">
|
|
<div class="n_header">
|
|
<div class="n_header_h1">
|
|
<h1>无锡帝科发货大数据平台</h1>
|
|
</div>
|
|
<div class="exit_btn iconfont" @click="back"></div>
|
|
</div>
|
|
<div class="n_body_container">
|
|
<div class="n-center_wraper">
|
|
<div class="w_wraper">
|
|
<div class="item_wraper0">
|
|
<div class="title_wraper title_wraper_1">
|
|
<p>订单数据</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper3" style="padding: 0">
|
|
<div class="scroll_wrap">
|
|
<ul class="scroll_tab_1">
|
|
<li>客户名称</li>
|
|
<li>实发型号</li>
|
|
<li>大型号</li>
|
|
<li>小批次</li>
|
|
<li>标签批次号</li>
|
|
<li>重量</li>
|
|
<li>订单状态</li>
|
|
</ul>
|
|
<div class="scroll_container_1">
|
|
<vue-seamless-scroll :data="dataList1" :class-option="defaultOption1">
|
|
<ul class="scroll-ul_1">
|
|
<li v-for="(e, i) in dataList1" :key="i">
|
|
<div class="scroll-ul_1_div">{{e.customer}}</div>
|
|
<div class="scroll-ul_1_div">{{e.production_materials}}</div>
|
|
<!-- <div class="scroll-ul_1_div">
|
|
<span class="state" :class="'state_' + e.status"></span>
|
|
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
|
|
</div> -->
|
|
<div class="scroll-ul_1_div">{{e.large_model}}</div>
|
|
<div class="scroll-ul_1_div">{{e.small_model}}</div>
|
|
<div class="scroll-ul_1_div">{{e.batch_number}}</div>
|
|
<div class="scroll-ul_1_div">{{e.weight}}</div>
|
|
<div class="scroll-ul_1_div">{{e.dd_status}}</div>
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="n_left_wraper">
|
|
<div class="w_wraper">
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>成品包装发货情况</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper_2">
|
|
<div class="pie_wraper pie_wraper1">
|
|
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
<!-- <div class="pie_wraper pie_wraper2">
|
|
<div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>当日包装完成情况</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper_2">
|
|
<div class="w_wraper">
|
|
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>包装发货进度</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper3" style="padding: 0">
|
|
<div class="scroll_wrap">
|
|
<ul class="scroll_tab_2">
|
|
<li>客户名称</li>
|
|
<li>批次</li>
|
|
<li>订单状态</li>
|
|
</ul>
|
|
<div class="scroll_container_2">
|
|
<vue-seamless-scroll :data="dataList2" :class-option="defaultOption2">
|
|
<ul class="scroll-ul_2">
|
|
<li v-for="(e, i) in dataList2" :key="i">
|
|
<div class="scroll-ul_2_div">{{e.customer}}</div>
|
|
<div class="scroll-ul_2_div">{{e.batch_number}}</div>
|
|
<div class="scroll-ul_2_div">{{e.dd_status}}</div>
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAllBigScreen } from '@js/mork02.js'
|
|
// import { getAllBigScreen } from '@js/getData2.js'
|
|
export default {
|
|
data () {
|
|
return {
|
|
interTime: this.$store.getters.setTime,
|
|
timer: null,
|
|
// chart2Timer: null,
|
|
curList: [], // 当日出入
|
|
bzfhArr: [], // 包装发货
|
|
historyList: [], // 历史分析
|
|
statisList: [], // 当日生产统计
|
|
loadList: [], // 当日车间上下料
|
|
dataList1: [], // 订单数据-滚动列表1
|
|
dataList2: [], // 订单数据-滚动列表2
|
|
myChart1: null,
|
|
myChart2: null,
|
|
myChart3: null
|
|
}
|
|
},
|
|
computed: {
|
|
defaultOption1 () {
|
|
return {
|
|
step: 0.3, // 数值越大速度滚动越快
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 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: 5000 // 单步运动停止的时间(默认值1000ms)
|
|
}
|
|
},
|
|
defaultOption2 () {
|
|
return {
|
|
step: 0.3, // 数值越大速度滚动越快
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 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: 5000 // 单步运动停止的时间(默认值1000ms)
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.refresh()
|
|
},
|
|
mounted () {
|
|
this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
|
|
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
|
|
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
|
|
},
|
|
destroyed () {
|
|
if (this.myChart1 !== null) {
|
|
this.myChart1.dispose()
|
|
this.myChart1 = null
|
|
}
|
|
if (this.myChart2 !== null) {
|
|
this.myChart2.dispose()
|
|
this.myChart2 = null
|
|
}
|
|
if (this.myChart3 !== null) {
|
|
this.myChart3.dispose()
|
|
this.myChart3 = null
|
|
}
|
|
if (this.timer !== null) {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
// if (this.chart2Timer !== null) {
|
|
// clearInterval(this.chart2Timer)
|
|
// this.chart2Timer = null
|
|
// }
|
|
},
|
|
methods: {
|
|
back () {
|
|
let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
|
|
if (flag) {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen()
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen()
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen()
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen()
|
|
}
|
|
}
|
|
this.$router.push('/setup')
|
|
},
|
|
refresh () {
|
|
this._getAllBigScreen()
|
|
this.timer = setInterval(() => {
|
|
this._getAllBigScreen()
|
|
}, this.interTime)
|
|
},
|
|
async _getAllBigScreen () {
|
|
let res = await getAllBigScreen()
|
|
// if (this.chart2Timer !== null) {
|
|
// clearInterval(this.chart2Timer)
|
|
// this.chart2Timer = null
|
|
// }
|
|
this.fhobj = res.fhsituation // 成品包装发货情况
|
|
this.bzfhArr = res.bzsituation // 成品-包装发货情况
|
|
this.curList = res.drbzsituation // 当日包装完成情况
|
|
this.dataList1 = [...res.dddatebase] // 滚动1-订单数据
|
|
this.dataList2 = [...res.dddatebase] // 滚动2-（样品）包装发货进度
|
|
this.setEchart1()
|
|
this.setEchart2()
|
|
this.setEchart3()
|
|
},
|
|
setEchart1 () {
|
|
let data = [
|
|
{
|
|
value: this.fhobj.enter_proportion,
|
|
name: '入库'
|
|
},
|
|
{
|
|
value: this.fhobj.out_proportion,
|
|
name: '未入库'
|
|
}
|
|
]
|
|
var option = {
|
|
legend: {
|
|
// orient: 'vertical',
|
|
orient: 'horizontal',
|
|
top: '4%',
|
|
// right: 0,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 12
|
|
},
|
|
itemGap: 10.86,
|
|
itemWidth: 14.16,
|
|
itemHeight: 7.38,
|
|
// data: dataName
|
|
data: ['入库', '未入库']
|
|
},
|
|
color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['38%', '70%'],
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
// position: 'inner',
|
|
formatter: '{d}%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
data: data
|
|
}
|
|
]
|
|
}
|
|
this.myChart1.setOption(option, true)
|
|
},
|
|
setEchart2 () {
|
|
let data = [
|
|
{
|
|
value: this.curList.plan_weight,
|
|
name: '计划重量'
|
|
},
|
|
{
|
|
value: this.curList.finish_weight,
|
|
name: '已完成重量'
|
|
}
|
|
]
|
|
var option = {
|
|
legend: {
|
|
orient: 'horizontal',
|
|
top: '4%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 12
|
|
},
|
|
itemGap: 10.86,
|
|
itemWidth: 14.16,
|
|
itemHeight: 7.38,
|
|
data: ['计划重量', '已完成重量']
|
|
},
|
|
color: ['#0966E8', '#ffee0e'],
|
|
series: [
|
|
{
|
|
name: '当日包装完成情况',
|
|
type: 'pie',
|
|
radius: '70%',
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
// position: 'inner',
|
|
formatter: '{d}%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
data: data,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
this.myChart2.setOption(option, true)
|
|
},
|
|
setEchart3 () {
|
|
let data = [
|
|
{
|
|
value: this.bzfhArr[0].bz_proportion,
|
|
name: '未开始'
|
|
},
|
|
{
|
|
value: this.bzfhArr[1].bz_proportion,
|
|
name: '进行中'
|
|
},
|
|
{
|
|
value: this.bzfhArr[2].bz_proportion,
|
|
name: '已完成'
|
|
}
|
|
]
|
|
var option = {
|
|
legend: {
|
|
// orient: 'vertical',
|
|
orient: 'horizontal',
|
|
top: '4%',
|
|
// right: 0,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 12
|
|
},
|
|
itemGap: 10.86,
|
|
itemWidth: 14.16,
|
|
itemHeight: 7.38,
|
|
// data: dataName
|
|
data: ['未开始', '进行中', '已完成']
|
|
},
|
|
color: ['#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['38%', '70%'],
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
// position: 'inner',
|
|
formatter: '{d}%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
data: data
|
|
}
|
|
]
|
|
}
|
|
this.myChart3.setOption(option, true)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.n_container
|
|
position relative
|
|
width 100%
|
|
height 100%
|
|
overflow hidden
|
|
.n_header
|
|
position absolute
|
|
left 0
|
|
top 0
|
|
width 100%
|
|
height 88px
|
|
background center / 100% url('../../../images/header_bg_s.png') no-repeat
|
|
.n_header_h1
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top 12px
|
|
h1
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
line-height: 1;
|
|
text-align center;
|
|
letter-spacing 4px
|
|
.exit_btn
|
|
position absolute
|
|
left 3%
|
|
top 11%
|
|
z-index 100
|
|
height 16px
|
|
width 16px
|
|
line-height 16px
|
|
font-size 16px
|
|
color #AECAF5
|
|
text-align: center;
|
|
.n_body_container
|
|
width 100%
|
|
height 100%
|
|
padding 60px 10px 10px 10px
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
flex-direction: column;
|
|
.n_left_wraper
|
|
width 100%
|
|
height 45%
|
|
.n-center_wraper
|
|
width 100%
|
|
height 55%
|
|
.w_wraper
|
|
width 100%
|
|
height 100%
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow hidden
|
|
.item_wraper0
|
|
width 100%
|
|
// height calc((100% - 20px) / 3)
|
|
height 100%
|
|
margin-bottom 10px
|
|
box-sizing: border-box;
|
|
padding: 8px 8px;
|
|
&:last-child
|
|
// margin-bottom 0
|
|
.item_wraper
|
|
width 100%
|
|
// height calc((100% - 20px) / 3)
|
|
height 100%
|
|
margin-bottom 10px
|
|
box-sizing: border-box;
|
|
padding: 8px 8px;
|
|
&:last-child
|
|
// margin-bottom 0
|
|
&:nth-child(1), &:nth-child(6)
|
|
width 20%
|
|
&:nth-child(2)
|
|
width 35%
|
|
&:nth-child(3)
|
|
width 45%
|
|
.item_wraper_1
|
|
// height calc((200% - 20px) / 3)
|
|
.title_wraper
|
|
width 100%
|
|
height 24px
|
|
background center / 100% 100% url('../../../images/bg-title_2_s.png') no-repeat
|
|
padding 2px 22px
|
|
p
|
|
font-size 14px
|
|
font-weight: 400;
|
|
color: #fff;
|
|
line-height 12px
|
|
.title_wraper_1
|
|
background-image url('../../../images/bg-title_1_s.png')
|
|
.content_wraper
|
|
width 100%
|
|
height calc(100% - 24px)
|
|
padding 8px
|
|
background-color rgba(30, 65, 126, 70%)
|
|
.content_wraper3
|
|
height 100%
|
|
overflow hidden
|
|
.content_wraper_2
|
|
padding 0
|
|
display flex
|
|
justify-content: center;
|
|
.pie_wraper
|
|
width 50%
|
|
height 100%
|
|
// padding 1px 0 0 1px
|
|
// background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
|
|
.pie_wraper1
|
|
width 50%
|
|
// background #fff
|
|
.pie_wraper2
|
|
width 50%
|
|
// background #ff0
|
|
.scroll_wrap
|
|
width 100%
|
|
height 100%
|
|
padding 5px 10px 2px 10px
|
|
.scroll_tab_1
|
|
width 100%
|
|
height 20px
|
|
background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
|
|
li
|
|
float left
|
|
width 14%
|
|
font-size 13px;
|
|
line-height 20px
|
|
// color #AFBED8
|
|
color #E2BB0E
|
|
text-align center
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
word-wrap break-word
|
|
word-break break-all
|
|
white-space nowrap
|
|
padding 0 2px
|
|
overflow hidden
|
|
box-sizing border-box
|
|
&:nth-child(1), &:nth-child(6)
|
|
width 15%
|
|
.state
|
|
display block
|
|
width 20px
|
|
height 14px
|
|
.state_name
|
|
width calc(100% - 20px)
|
|
.scroll_container_1
|
|
width 100%
|
|
height calc(100% - 20px)
|
|
overflow hidden
|
|
.scroll-ul_1
|
|
li
|
|
width 100%
|
|
height 20px
|
|
border-bottom 1px solid rgba(122,159,224,0.17)
|
|
&:nth-child(even)
|
|
background rgba(31,46,73,0.7)
|
|
&:nth-child(odd)
|
|
background rgba(31,46,73,0.55)
|
|
.scroll-ul_1_div
|
|
float left
|
|
width 14%
|
|
height 20px
|
|
display flex
|
|
flex-direction row
|
|
justify-content center
|
|
align-items center
|
|
flex-wrap nowrap
|
|
font-size 8px
|
|
line-height 8px
|
|
color #B2BBD7
|
|
text-align center
|
|
// word-wrap break-word
|
|
// word-break break-all
|
|
white-space nowrap
|
|
padding 0 1px
|
|
overflow hidden
|
|
&:nth-child(1), &:nth-child(6)
|
|
width 15%
|
|
.state
|
|
display block
|
|
width 20px
|
|
height 14px
|
|
.state_name
|
|
width 100%
|
|
height 20px
|
|
.scroll_tab_2
|
|
width 100%
|
|
height 20px
|
|
background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
|
|
li
|
|
float left
|
|
width 33%
|
|
font-size 13px;
|
|
line-height 20px
|
|
// color #AFBED8
|
|
color #E2BB0E
|
|
text-align center
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
word-wrap break-word
|
|
word-break break-all
|
|
white-space nowrap
|
|
padding 0 2px
|
|
overflow hidden
|
|
box-sizing border-box
|
|
&:nth-child(1)
|
|
width 34%
|
|
.state
|
|
display block
|
|
width 20px
|
|
height 14px
|
|
.state_name
|
|
width calc(100% - 20px)
|
|
.scroll_container_2
|
|
width 100%
|
|
height calc(100% - 20px)
|
|
overflow hidden
|
|
.scroll-ul_2
|
|
li
|
|
width 100%
|
|
height 20px
|
|
border-bottom 1px solid rgba(122,159,224,0.17)
|
|
&:nth-child(even)
|
|
background rgba(31,46,73,0.7)
|
|
&:nth-child(odd)
|
|
background rgba(31,46,73,0.55)
|
|
.scroll-ul_2_div
|
|
float left
|
|
width 33%
|
|
height 20px
|
|
display flex
|
|
flex-direction row
|
|
justify-content center
|
|
align-items center
|
|
flex-wrap nowrap
|
|
font-size 8px
|
|
line-height 8px
|
|
color #B2BBD7
|
|
text-align center
|
|
// word-wrap break-word
|
|
// word-break break-all
|
|
white-space nowrap
|
|
padding 0 1px
|
|
overflow hidden
|
|
&:nth-child(1)
|
|
width 34%
|
|
.state
|
|
display block
|
|
width 20px
|
|
height 14px
|
|
.state_name
|
|
width 100%
|
|
height 20px
|
|
</style>
|