柱状
This commit is contained in:
@@ -1,6 +1,28 @@
|
||||
/* eslint-disable */
|
||||
export const getAllBigScreen = () => {
|
||||
let res = {
|
||||
"todaycpsituation": [
|
||||
{
|
||||
"customer": "海宁晶科（浙江）",
|
||||
"plan_weight": "381.0",
|
||||
"finish_weight": "0.0"
|
||||
},
|
||||
{
|
||||
"customer": "海宁晶科（尖山）二期",
|
||||
"plan_weight": "316.0",
|
||||
"finish_weight": "0.185"
|
||||
},
|
||||
{
|
||||
"customer": "山西晶科",
|
||||
"plan_weight": "44.0",
|
||||
"finish_weight": "40.0"
|
||||
},
|
||||
{
|
||||
"customer": "眉山通威",
|
||||
"plan_weight": "980.0",
|
||||
"finish_weight": "308.0"
|
||||
}
|
||||
],
|
||||
"dddatebase": [
|
||||
{
|
||||
"customer": "海宁晶科（浙江）",
|
||||
@@ -201,10 +223,6 @@ export const getAllBigScreen = () => {
|
||||
"dd_status": "未开始"
|
||||
}
|
||||
],
|
||||
"fhsituation": {
|
||||
"enter_proportion": "0.38",
|
||||
"out_proportion": "0.62"
|
||||
},
|
||||
"bzsituation": [
|
||||
{
|
||||
"bz_situation": "未开始",
|
||||
@@ -300,11 +318,7 @@ export const getAllBigScreen = () => {
|
||||
"batch": "00250623129",
|
||||
"dd_status": "未开始"
|
||||
}
|
||||
],
|
||||
"drbzsituation": {
|
||||
"plan_weight": "1721.0",
|
||||
"finish_weight": "934.0"
|
||||
}
|
||||
]
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
@@ -46,7 +46,7 @@ export default {
|
||||
setTime: this.setTime * 1000
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
this.$router.push('/index')
|
||||
this.$router.push('/wxdk')
|
||||
let element = document.documentElement
|
||||
if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
|
||||
if (element.requestFullscreen) {
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<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>
|
||||
<div class="scroll-ul_1_div" :class="{cyellow:e.dd_status ==='进行中',cgreen:e.dd_status ==='未开始',cpink:e.dd_status ==='已完成'}">{{e.dd_status}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
@@ -52,12 +52,12 @@
|
||||
<div class="w_wraper">
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>成品包装发货情况</p>
|
||||
<p>包装进度</p>
|
||||
</div>
|
||||
<div class="content_wraper content_wraper_2">
|
||||
<div class="pie_wraper pie_wraper1">
|
||||
<!-- <div class="pie_wraper pie_wraper1">
|
||||
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="pie_wraper pie_wraper2">
|
||||
<div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
@@ -65,7 +65,7 @@
|
||||
</div>
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>当日包装完成情况</p>
|
||||
<p>成品包装情况</p>
|
||||
</div>
|
||||
<div class="content_wraper content_wraper_2">
|
||||
<div class="w_wraper">
|
||||
@@ -90,7 +90,7 @@
|
||||
<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>
|
||||
<div class="scroll-ul_2_div" :class="{cyellow:e.dd_status ==='进行中',cgreen:e.dd_status ==='未开始',cpink:e.dd_status ==='已完成'}">{{e.dd_status}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
@@ -105,14 +105,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAllBigScreen } from '@js/mork02.js'
|
||||
// import { getAllBigScreen } from '@js/getData2.js'
|
||||
// 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,
|
||||
chart2Timer: null,
|
||||
curList: [], // 当日出入
|
||||
bzfhArr: [], // 包装发货
|
||||
historyList: [], // 历史分析
|
||||
@@ -155,7 +155,7 @@ export default {
|
||||
this.refresh()
|
||||
},
|
||||
mounted () {
|
||||
this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
|
||||
// this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
|
||||
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
|
||||
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
|
||||
},
|
||||
@@ -176,10 +176,10 @@ export default {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
// if (this.chart2Timer !== null) {
|
||||
// clearInterval(this.chart2Timer)
|
||||
// this.chart2Timer = null
|
||||
// }
|
||||
if (this.chart2Timer !== null) {
|
||||
clearInterval(this.chart2Timer)
|
||||
this.chart2Timer = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back () {
|
||||
@@ -205,31 +205,93 @@ export default {
|
||||
},
|
||||
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 // 当日包装完成情况
|
||||
if (this.chart2Timer !== null) {
|
||||
clearInterval(this.chart2Timer)
|
||||
this.chart2Timer = null
|
||||
}
|
||||
// this.fhobj = res.fhsituation // 成品包装发货情况
|
||||
this.bzsituation = res.bzsituation // 包装进度（一张饼图）
|
||||
this.curList = [...res.todaycpsituation] // 成品包装情况（柱状图）
|
||||
this.dataList1 = [...res.dddatebase] // 滚动1-订单数据
|
||||
this.dataList2 = [...res.dddatebase] // 滚动2-（样品）包装发货进度
|
||||
this.setEchart1()
|
||||
this.setEchart2()
|
||||
// this.setEchart1()
|
||||
this.setEchart3()
|
||||
console.log(1)
|
||||
this.setEchart2()
|
||||
console.log(3)
|
||||
},
|
||||
setEchart1 () {
|
||||
let data = [
|
||||
{
|
||||
value: this.fhobj.enter_proportion,
|
||||
name: '入库'
|
||||
// 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 barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
console.log(this.curList, 666)
|
||||
this.curList.map(el => {
|
||||
barName.push(el.customer)
|
||||
barData1.push(el.plan_weight)
|
||||
barData2.push(el.finish_weight)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 20,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
{
|
||||
value: this.fhobj.out_proportion,
|
||||
name: '未入库'
|
||||
}
|
||||
]
|
||||
var option = {
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
orient: 'horizontal',
|
||||
@@ -243,106 +305,131 @@ export default {
|
||||
itemGap: 10.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
// data: dataName
|
||||
data: ['入库', '未入库']
|
||||
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#3C5787'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
lineHeight: 10,
|
||||
margin: 15
|
||||
},
|
||||
data: barName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '单位：块',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [2, 1],
|
||||
color: '#455C86'
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
name: '入库',
|
||||
type: 'bar',
|
||||
barWidth: '18',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(103,212,112,0.2)'
|
||||
},
|
||||
{
|
||||
offset: 0.08,
|
||||
color: 'rgba(103,212,112,0.9)'
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
}
|
||||
])
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '出库',
|
||||
type: 'bar',
|
||||
barWidth: '18',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(25,128,234,0.2)'
|
||||
},
|
||||
{
|
||||
offset: 0.08,
|
||||
color: 'rgba(25,128,234,0.9)'
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: data
|
||||
data: barData2
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||||
show: false, // 是否显示滑动条，不影响使用
|
||||
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 2 // 展示到第几个。
|
||||
}
|
||||
]
|
||||
}
|
||||
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)
|
||||
this.chart2Timer = setInterval(() => {
|
||||
if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||||
option.dataZoom[0].endValue = 2
|
||||
option.dataZoom[0].startValue = 0
|
||||
} else {
|
||||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||||
}
|
||||
this.myChart2.setOption(option, true)
|
||||
}, 2000)
|
||||
},
|
||||
setEchart3 () {
|
||||
let data = [
|
||||
{
|
||||
value: this.bzfhArr[0].bz_proportion,
|
||||
value: this.bzsituation[0].bz_proportion,
|
||||
name: '未开始'
|
||||
},
|
||||
{
|
||||
value: this.bzfhArr[1].bz_proportion,
|
||||
value: this.bzsituation[1].bz_proportion,
|
||||
name: '进行中'
|
||||
},
|
||||
{
|
||||
value: this.bzfhArr[2].bz_proportion,
|
||||
value: this.bzsituation[2].bz_proportion,
|
||||
name: '已完成'
|
||||
}
|
||||
]
|
||||
@@ -367,7 +454,7 @@ export default {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['38%', '70%'],
|
||||
radius: ['50%', '90%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
@@ -394,6 +481,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.cyellow
|
||||
color #ff0 !important
|
||||
.cgreen
|
||||
color #30EBC9 !important
|
||||
.cpink
|
||||
color #f975aa !important
|
||||
.n_container
|
||||
position relative
|
||||
width 100%
|
||||
@@ -466,11 +559,11 @@ export default {
|
||||
&:last-child
|
||||
// margin-bottom 0
|
||||
&:nth-child(1), &:nth-child(6)
|
||||
width 34%
|
||||
width 20%
|
||||
&:nth-child(2)
|
||||
width 17%
|
||||
width 35%
|
||||
&:nth-child(3)
|
||||
width 49%
|
||||
width 45%
|
||||
.item_wraper_1
|
||||
// height calc((200% - 20px) / 3)
|
||||
.title_wraper
|
||||
@@ -479,7 +572,7 @@ export default {
|
||||
background center / 100% 100% url('../../../images/bg-title_2_s.png') no-repeat
|
||||
padding 2px 22px
|
||||
p
|
||||
font-size 10px
|
||||
font-size 14px
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height 12px
|
||||
@@ -519,9 +612,10 @@ export default {
|
||||
li
|
||||
float left
|
||||
width 14%
|
||||
font-size 8px;
|
||||
font-size 13px;
|
||||
line-height 20px
|
||||
color #AFBED8
|
||||
// color #AFBED8
|
||||
color #E2BB0E
|
||||
text-align center
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
@@ -586,9 +680,10 @@ export default {
|
||||
li
|
||||
float left
|
||||
width 33%
|
||||
font-size 8px;
|
||||
font-size 13px;
|
||||
line-height 20px
|
||||
color #AFBED8
|
||||
// color #AFBED8
|
||||
color #E2BB0E
|
||||
text-align center
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
|
||||
651
src/pages_960/modules/home/indexbf.vue
Normal file
651
src/pages_960/modules/home/indexbf.vue
Normal file
@@ -0,0 +1,651 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user