537 lines
14 KiB
Vue
537 lines
14 KiB
Vue
<template>
|
||
<section>
|
||
<t-header index='1'></t-header>
|
||
<section>
|
||
<div class="con1">
|
||
<div class="c-title c-left">
|
||
<span class="icon1"></span>
|
||
<span>今日在制品量：</span>
|
||
<div class="num">
|
||
<div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
|
||
</div>
|
||
<span>吨</span>
|
||
</div>
|
||
<div class="c-title c-right">
|
||
<span>今日成品量：</span>
|
||
<div class="num">
|
||
<div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
|
||
</div>
|
||
<span>吨</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex">
|
||
<div class="con2">
|
||
<div id="echart_d1" style="width: 100%; height:100%;"></div>
|
||
</div>
|
||
<div class="con3" style="position: relative">
|
||
<div id="echarts2" style="width: 100%; height: 100%;"></div>
|
||
<div class="title">在制品设备生产量</div>
|
||
<div class="desc1">
|
||
<span>当日产量：</span>
|
||
<span class="num">{{showNum3}}</span>
|
||
<span class="span3">块</span>
|
||
<span>当班产量：</span>
|
||
<span class="num">{{showNum4}}</span>
|
||
<span>吨</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="con4">
|
||
<div class="block_h2">
|
||
<h2>生产任务</h2>
|
||
</div>
|
||
<div class="list_scroll_title">
|
||
<span>工序</span><span>设备</span><span>物料号</span><span>生产物料</span><span>厂家</span><span>配方代码</span><span>计划量</span><span>生产量</span><span>班次类型</span><span>生产状态</span>
|
||
<!-- <span>工序</span>
|
||
<span>设备</span>
|
||
<span>物料号</span>
|
||
<span>生产物料</span>
|
||
<span>厂家</span>
|
||
<span>配方代码</span>
|
||
<span>计划量</span>
|
||
<span>生产量</span>
|
||
<span>班次类型</span>
|
||
<span>生产状态</span> -->
|
||
</div>
|
||
<vue-seamless-scroll :data="taskData" :class-option="classOption" class="content-block-scroll">
|
||
<ul class="content-block-scroll-ul">
|
||
<li v-for="(e, i) in taskData" :key="i">
|
||
<span>{{e.workprocedure_name}}</span><span>{{e.device_name}}</span><span>{{e.material_code}}</span><span>{{e.material_name}}</span><span>{{e.factory_name}}</span><span>{{e.formula_code}}</span><span>{{e.plan_qty}}</span><span>{{e.produce_qty}}</span><span>{{e.shift_type_scode_name}}</span><span>{{e.status_name}}</span>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import THeader from '@components/header.vue'
|
||
import * as echarts from 'echarts'
|
||
export default {
|
||
name: 'ProdCount',
|
||
components: {
|
||
THeader
|
||
},
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer: null,
|
||
showNum1: '',
|
||
showNum2: '',
|
||
showNum3: '',
|
||
showNum4: '',
|
||
materData: [],
|
||
deviceData: [],
|
||
taskData: []
|
||
}
|
||
},
|
||
computed: {
|
||
classOption () {
|
||
// return {
|
||
// step: 0.4,
|
||
// limitMoveNum: 6
|
||
// }
|
||
return {
|
||
step: 0.2, // 数值越大速度滚动越快
|
||
limitMoveNum: 3, // 开始无缝滚动的数据量 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)
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.initData()
|
||
this.refresh()
|
||
},
|
||
beforeDestroy () {
|
||
clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
refresh () {
|
||
this.timer = setInterval(() => {
|
||
this.initData()
|
||
}, this.interTime)
|
||
},
|
||
initData () {
|
||
let data = {
|
||
'_SRVNAME': 'server.jxht.screen',
|
||
'_SRVMETHOD': 'queryProduceInfo',
|
||
'_DATA': JSON.stringify({
|
||
accountId: '-1'
|
||
})
|
||
}
|
||
this
|
||
.$post(data)
|
||
.then(res => {
|
||
if (res.code === '1') {
|
||
this.showNum1 = (res.result.form.produce_total_qty + '').split('')
|
||
this.showNum2 = (res.result.form.finished_total_qty + '').split('')
|
||
this.showNum3 = res.result.form.day_qty
|
||
this.showNum4 = res.result.form.shift_qty
|
||
this.materData = res.result.material_rows
|
||
this.deviceData = res.result.device_rows
|
||
this.taskData = res.result.task_rows
|
||
this.getEchart1()
|
||
this.getEchart2()
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
})
|
||
},
|
||
getEchart1 () {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echart_d1'))
|
||
var finishArr = []
|
||
var unFinishArr = []
|
||
var materArr = []
|
||
this.materData.map(el => {
|
||
finishArr.push(el.finished_qty)
|
||
unFinishArr.push(el.unfinished_qty)
|
||
materArr.push(el.material_code)
|
||
})
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
legend: {
|
||
top: 20,
|
||
right: 10,
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: 12,
|
||
lineHeight: 20
|
||
},
|
||
itemGap: 20,
|
||
itemHeight: 8,
|
||
data: ['完成', '未完成']
|
||
},
|
||
title: {
|
||
text: '半成品计划完成率', // 标题
|
||
top: '12px',
|
||
left: '20px',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '16'
|
||
}
|
||
},
|
||
// tooltip: {
|
||
// trigger: 'axis'
|
||
// },
|
||
xAxis: {
|
||
// data: ['1号砖', '2号砖', '3号砖', '4号砖'],
|
||
data: materArr,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// color: '#fff'
|
||
// }
|
||
// }
|
||
// },
|
||
yAxis: {
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
series: [{
|
||
name: '未完成',
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
stack: '完成情况',
|
||
// data: [15, 20, 36, 10],
|
||
data: unFinishArr,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#32C5FF'
|
||
// label: {
|
||
// show: true,
|
||
// position: 'inside',
|
||
// formatter: function (params) {
|
||
// if (params.value !== 0) {
|
||
// return params.value
|
||
// } else {
|
||
// return ''
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}, {
|
||
name: '完成',
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
stack: '完成情况',
|
||
// data: [40, 57, 18, 20],
|
||
data: finishArr,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#F7B502'
|
||
// label: {
|
||
// show: true,
|
||
// position: 'inside',
|
||
// formatter: function (params) {
|
||
// if (params.value !== 0) {
|
||
// return params.value
|
||
// } else {
|
||
// return ''
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}]
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
window.addEventListener('resize', function () {
|
||
myChart.resize()
|
||
})
|
||
},
|
||
getEchart2 () {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
// var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
|
||
// var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
|
||
// var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
|
||
var lineData = []
|
||
var barData = []
|
||
var xData = []
|
||
this.deviceData.map(el => {
|
||
console.log(el.produce_qty)
|
||
lineData.push(el.produce_qty)
|
||
barData.push(el.produce_num)
|
||
xData.push(el.device_name)
|
||
})
|
||
var myChart = echarts.init(document.getElementById('echarts2'))
|
||
var option = {
|
||
legend: {
|
||
top: 20,
|
||
right: 10,
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: 12,
|
||
lineHeight: 20
|
||
},
|
||
itemGap: 20,
|
||
itemHeight: 8,
|
||
data: ['数量', '重量']
|
||
},
|
||
// tooltip: {
|
||
// trigger: 'axis'
|
||
// },
|
||
xAxis: {
|
||
// name: '设备',
|
||
type: 'category',
|
||
data: xData,
|
||
nameGap: 60, // 坐标轴名称与轴线之间的距离。
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
// name: '交易额（亿元）',
|
||
type: 'value',
|
||
min: 0,
|
||
// max: 100000,
|
||
max: Math.max.apply(null, barData),
|
||
splitNumber: 10,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#315070'],
|
||
width: 1,
|
||
type: 'dotted'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
// name: '增长率',
|
||
type: 'value',
|
||
min: 0,
|
||
// max: 10,
|
||
max: Math.max.apply(null, lineData),
|
||
splitNumber: 10,
|
||
// position: 'right',
|
||
// formatter: '{value}',
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: '#F7B502'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '数量',
|
||
type: 'bar',
|
||
data: barData,
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: '#32C5FF'
|
||
}
|
||
},
|
||
{
|
||
name: '重量',
|
||
type: 'line',
|
||
symbolSize: 12, // 拐点圆的大小
|
||
symbol: 'circle',
|
||
data: lineData,
|
||
lineStyle: {
|
||
color: '#F7B502'
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#F7B502'
|
||
}
|
||
},
|
||
yAxisIndex: 1
|
||
}
|
||
]
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
window.addEventListener('resize', function () {
|
||
myChart.resize()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.con1
|
||
width 18.14rem
|
||
// height 1.23rem
|
||
height 123px
|
||
overflow hidden
|
||
position relative
|
||
background center center / 100% 100% url(../assets/images/sctj_top.png) no-repeat
|
||
margin 0 auto
|
||
// margin-top 0.32rem
|
||
// margin-bottom 0.15rem
|
||
margin-top 32px
|
||
margin-bottom 15px
|
||
text-align center
|
||
.c-title
|
||
float left
|
||
// line-height 1.23rem
|
||
line-height 123px
|
||
.c-left
|
||
margin 0 2.92rem 0 2.51rem
|
||
display flex
|
||
align-items center
|
||
.c-right
|
||
// margin 0 2.9rem 0 2.5rem
|
||
display flex
|
||
align-items center
|
||
span
|
||
font-size .24rem
|
||
color #32C5FF
|
||
.icon1
|
||
display inline-block
|
||
width .19rem
|
||
height .19rem
|
||
overflow hidden
|
||
position relative
|
||
background center center / 100% 100% url(../assets/images/sctj_icon.png) no-repeat
|
||
margin-right .2rem
|
||
.num
|
||
display flex
|
||
align-items center
|
||
.bg
|
||
width .44rem
|
||
height .6rem
|
||
background rgba(50,197,255,0.10)
|
||
display flex
|
||
align-items center
|
||
justify-content center
|
||
margin-right .1rem
|
||
font-size .5rem
|
||
color #F7B502
|
||
.dot
|
||
background none
|
||
width .14rem
|
||
.con2
|
||
float left
|
||
margin-left .49rem
|
||
// width 4.45rem
|
||
width 40%
|
||
// height 4.05rem
|
||
height 405px
|
||
overflow hidden
|
||
position relative
|
||
background center center / 100% 100% url(../assets/images/sctj_bg1.png) no-repeat
|
||
margin-right .15rem
|
||
.con3
|
||
float left
|
||
// width 13.57rem
|
||
width 54%
|
||
// height 4.05rem
|
||
height 405px
|
||
overflow hidden
|
||
position relative
|
||
background center center / 100% 100% url(../assets/images/sctj_bg2.png) no-repeat
|
||
.title
|
||
position absolute
|
||
top .15rem
|
||
left .15rem
|
||
.desc1
|
||
position absolute
|
||
top .24rem
|
||
left 4.28rem
|
||
span
|
||
color #32C5FF
|
||
font-size .16rem
|
||
.span3
|
||
margin-right .5rem
|
||
.num
|
||
font-size .22rem
|
||
color #F7B502
|
||
.con4
|
||
float left
|
||
margin-left .49rem
|
||
// margin-top .16rem
|
||
margin-top 16px
|
||
width 18.17rem
|
||
// height 3.35rem
|
||
height 335px
|
||
overflow hidden
|
||
position relative
|
||
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
||
padding 0 .27rem 0 .27rem
|
||
.block_h2
|
||
h2
|
||
font-size .16rem
|
||
line-height .22rem
|
||
margin .15rem 0 .15rem 0
|
||
.list_scroll_title
|
||
width 100%
|
||
background #262F52
|
||
span
|
||
display inline-block
|
||
width 10%
|
||
text-align center
|
||
line-height .32rem
|
||
// float left
|
||
font-size 14px
|
||
&:nth-child(1)
|
||
width 6%
|
||
&:nth-child(4)
|
||
width 14%
|
||
.content-block-scroll
|
||
width 100%
|
||
height calc(100% - 0.6rem)
|
||
overflow hidden
|
||
.content-block-scroll-ul
|
||
li
|
||
width 100%
|
||
&:nth-child(2n)
|
||
background rgba(38,47,82,0.50)
|
||
span
|
||
display inline-block
|
||
width 10%
|
||
font-size 12px
|
||
padding 0 .1rem
|
||
text-align center
|
||
line-height .38rem
|
||
box-sizing border-box
|
||
// float left
|
||
&:nth-child(1)
|
||
width 6%
|
||
&:nth-child(4)
|
||
width 14%
|
||
</style>
|