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

pressprod

Browse Source
This commit is contained in:
xiangxy
2024-02-26 14:32:20 +08:00
parent ef0aa44935
commit b7f70f2c5b
41 changed files with 972 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

805
src/pages/modules/PressProd.vue Normal file
View File

@@ -0,0 +1,805 @@
<template>
<section class="bg">
<t-header title="压 制 生 产 看 板">
</t-header>
<div class="container">
<div class="con1">
<div class="cbox">
<div>当前班次：</div>
<div class="num" style="color: #f7b502; font-size: 0.46rem; letter-spacing: 15px;">
{{showText}}
</div>
</div>
<div class="cbox">
<div>计划生产：</div>
<div class="num">
<div class="bg" v-for="(item, i) in showNum1" :key="i" :class="{dot: item === '.'}">{{item}}</div>
</div>
<div>块</div>
</div>
<div class="cbox">
<div>已生产：</div>
<div class="num">
<div class="bg" v-for="(item, i) in showNum2" :key="i" :class="{dot: item === '.'}">{{item}}</div>
</div>
<div>块</div>
</div>
<div class="cbox">
<div>不合格数：</div>
<div class="num">
<div class="bg" v-for="(item, i) in showNum3" :key="i" :class="{dot: item === '.'}">{{item}}</div>
</div>
<div>块</div>
</div>
</div>
<div class="center_wrapper" style="display:flex">
<div class="con2">
<div class="title"><span class="dotIncon"></span><span class="tltxt">当班生产</span></div>
<div class="item_content_0">
<div id="echart_d1" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="con3">
<div class="title"><span class="dotIncon"></span><span class="tltxt">当月订单</span></div>
<div class="item_content_1">
<div id="echart_d2" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
<div class="con4">
<div class="block_h2">
<div class="title"><span class="dotIncon"></span><span class="tltxt">生产任务</span></div>
</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>
</div>
<vue-seamless-scroll :data="ProductionTask" :class-option="classOption" class="content-block-scroll">
<ul class="content-block-scroll-ul">
<li v-for="(e, i) in ProductionTask" :key="i">
<span>{{e.device}}</span><span>{{e.workorder_code}}</span><span>{{e.team}}</span><span>{{e.material_name}}</span><span>{{e.material_spec}}</span><span>{{e.planproducestart_date}}</span><span>{{e.plan_qty}}</span><span>{{e.real_qty}}</span><span>{{e.unqualified_qty}}</span><span>{{e.qualified_rate}}</span><span>{{e.workorder_status}}</span><span>{{e.operator}}</span><span>{{e.realproducestart_date}}</span><span>{{e.realproduceend_date}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
<section class="bottom"></section>
</section>
</template>
<script>
import THeader from '@components/header2.vue'
// import * as echarts from 'echarts'
import { cockpitpress } from '@js/getData1'
export default {
name: 'ProdCount',
components: {
THeader
},
data () {
return {
timeOut: null,
interTime: this.$store.getters.setTime,
timer: null,
showText: '',
showNum1: '0',
showNum2: '0',
showNum3: '0',
myCharts02: '',
myCharts01: '',
materData: [],
deviceData: [],
PersonnelMonthlyProduction: [],
MonthlyWorkOrder: [],
// MonthlyWorkOrder: [
// {guada_num: 1200, name: 'XC-0', order_num: 1655, residue_num: 455},
// {guada_num: 1200, name: 'XC-1', order_num: 1655, residue_num: 455},
// {guada_num: 1200, name: 'XC-2', order_num: 1655, residue_num: 455},
// {guada_num: 1200, name: 'XC-3', order_num: 1655, residue_num: 455},
// {guada_num: 1200, name: 'XC-4', order_num: 1655, residue_num: 455},
// {guada_num: 1200, name: 'XC-5', order_num: 1655, residue_num: 455},
// {guada_num: 1200, name: 'XC-6', order_num: 1655, residue_num: 455}
// ],
// MonthlyWorkOrder: [
// {
// name: 'A1',
// order_num: '150',
// guada_num: '100',
// residue_num: '50'
// },
// {
// name: 'A2',
// order_num: '130',
// guada_num: '120',
// residue_num: '10'
// },
// {
// name: 'A3',
// order_num: '300',
// guada_num: '30',
// residue_num: '270',
// },
// {
// name: 'A4',
// order_num: '150',
// guada_num: '100',
// residue_num: '50'
// },
// {
// name: 'A5',
// order_num: '300',
// guada_num: '100',
// residue_num: '200'
// }
// ],
ProductionTask: [],
ShiftProductionList: [],
resData: {}
}
},
computed: {
classOption () {
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)
}
}
},
mounted () {
this.initData()
this.refresh()
},
beforeDestroy () {
clearInterval(this.timer)
clearInterval(this.timeOut)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this.initData()
}, this.interTime)
},
async initData () {
let res = await cockpitpress()
clearInterval(this.timeOut)
this.resData = res
// this.showNum1 = '3020'
// this.showNum2 = '3000'
// this.showNum3 = '220'
this.showText = res.DayShift
this.showNum1 = (res.DayShiftList[0].plan_qty + '').split('')
this.showNum2 = (res.DayShiftList[0].real_qty + '').split('')
this.showNum3 = (res.DayShiftList[0].unqualified_qty + '').split('')
// this.PersonnelMonthlyProduction = res.PersonnelMonthlyProduction
this.MonthlyWorkOrder = res.MonthlyWorkOrder
this.ProductionTask = res.ProductionTask
this.ShiftProductionList = res.ShiftProductionList
this.setEchart01()
this.setEchart02()
},
setEchart01 () {
let data1 = []
let data2 = []
let data3 = []
let device = []
this.ShiftProductionList.map(e => {
data1.push(e.qualified_qty)
data2.push(e.unqualified_qty)
data3.push(e.total_difference)
device.push(e.column_name)
})
let option = {
grid: {
top: 50,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {
icon: 'rect',
// right: 0,
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
itemGap: 40.86,
itemWidth: 20.16,
itemHeight: 7.38,
data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}, {name: '剩余数', itemStyle: {color: '#0E90FD'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
}
},
data: device
},
yAxis: {
type: 'value',
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: '12',
label: {
show: true,
position: 'top', // 位置
color: '#A7D6F4',
fontSize: 14,
distance: 15, // 距离
formatter: '{c}' // 这里是数据展示的时候显示的数据
},
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: data1
},
{
name: '不合格数',
type: 'bar',
barWidth: '12',
label: {
show: true,
position: 'top', // 位置
color: '#A7D6F4',
fontSize: 14,
distance: 15, // 距离
formatter: '{c}' // 这里是数据展示的时候显示的数据
},
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: data2
},
{
name: '剩余数',
type: 'bar',
barWidth: '12',
label: {
show: true,
position: 'top', // 位置
color: '#A7D6F4',
fontSize: 14,
distance: 15, // 距离
formatter: '{c}' // 这里是数据展示的时候显示的数据
},
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: data3
}
]
}
let echart = document.getElementById('echart_d1')
// if (this.myCharts01 !== '') {
// this.myCharts01.dispose()
// }
if (echart !== null) {
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
}
},
setEchart02 () {
let max = 1
this.MonthlyWorkOrder.map(el => {
if (Number(el.order_num) >= Number(max)) {
max = Number(el.order_num)
}
})
let option = {
grid: {
top: 0,
left: 0,
right: 58,
bottom: 0,
containLabel: true
},
dataZoom: [
{
show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
orient: 'vertical',
startValue: 0, // 从头开始。
endValue: 3 // end百分比显示范围，endValue具体显示几个数值
}
],
xAxis: {
type: 'value',
min: 0,
max: max,
boundaryGap: false,
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
// align: 'center'
}
},
formatter: '{value}'
},
yAxis: {
type: 'category',
inverse: true,
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
splitNumber: 2,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
data: this.MonthlyWorkOrder.map((it) => it.name)
},
series: [
{
name: '订单1',
type: 'bar',
stack: '总量',
barWidth: 30,
itemStyle: {
normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// // color: '#f6b643'
// color: '#ed7d39'
// // color: '#EAAD24'
// },
// {
// offset: 1,
// color: '#ed7d39'
// // color: '#EAAD24'
// }
// ], false),
label: {
color: '#fff',
show: true,
position: 'inside'
}
}
},
// data: [8, 10, 20, 20, 10, 10, 20],
data: this.MonthlyWorkOrder.map((it) => it.guada_num)
},
{
name: '订单2',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: '#94d153'
// // color: '#33CCCC'
// },
// {
// offset: 1,
// color: '#94d153'
// // color: '#33CCCC'
// }
// ], false),
label: {
color: '#333',
show: true,
position: 'inside'
// position: 'insideRight',
}
}
},
// data: [10, 20, 10, 10, 20, 20, 20],
data: this.MonthlyWorkOrder.map((it) => it.residue_num)
}
// {
// type: 'bar',
// barWidth: '16',
// zlevel: 1,
// label: {
// show: true,
// position: 'right', // 位置
// color: '#A7D6F4',
// fontSize: 14,
// distance: 15, // 距离
// formatter: '{c}' // 这里是数据展示的时候显示的数据
// },
// itemStyle: {
// normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: '#2DB796'
// },
// {
// offset: 1,
// color: '#6BBBA8'
// }
// ], false)
// }
// },
// data: this.MonthlyWorkOrder.map((it) => it.order_num)
// },
// {
// type: 'bar',
// barWidth: '16',
// zlevel: 1,
// label: {
// show: true,
// position: 'right', // 位置
// color: '#A7D6F4',
// fontSize: 14,
// distance: 15, // 距离
// formatter: '{c}' // 这里是数据展示的时候显示的数据
// },
// itemStyle: {
// normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: '#f6b643'
// },
// {
// offset: 1,
// color: '#ed7d39'
// }
// ], false)
// }
// },
// data: this.MonthlyWorkOrder.map((it) => it.guada_num)
// }
]
}
let echart = document.getElementById('echart_d2')
this.myCharts02 = this.$echarts.init(echart)
this.myCharts02.setOption(option)
this.autoMove(option)
window.addEventListener('resize', () => {
this.myCharts02.resize()
})
},
autoMove (option) {
this.timeOut = setInterval(() => {
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
option.dataZoom[0].endValue = 3
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.myCharts02.setOption(option)
}, 2000)
}
}
}
</script>
<style lang="stylus" scoped>
// @import '~@css/mixin'
@import '../../css/mixin'
// @import '~@style/mixin'
.pages
position absolute
left .2509rem
top 11%
_wh(20%, .4rem)
_fj(flex-start)
a
cursor pointer
font-family "SourceHanSansCN"
_font(.18rem, .30rem, #fff, 700,)
letter-spacing .01rem
padding .05rem .2rem
border-radius .05rem
background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, #004c92 90%)
+a
margin-left .2rem
.bg
_wh(100%, 100%)
overflow hidden
.container
_wh(100%, calc(100% - 1.38rem))
padding .1rem .2509rem 0
overflow hidden
clear both
.bottom
_wh(100%, .38rem)
background center bottom / 19.06rem 100% url(../../images/screen1/bottom.png) no-repeat
.blue
color #32C5FF !important
.green
color #30EBC9 !important
.gray
color #516282 !important
.yellow
color #E2BB0E !important
.orange
color #F96700 !important
.red
color #FF0000 !important
.con1
width 100%
height 123px
overflow hidden
position relative
background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
margin 5px 0
text-align center
display flex
justify-content space-between
align-items center
// .c-title
// float left
// // line-height 1.23rem
// line-height 123px
// .c-left
// margin 0 1.3rem 0 1.3rem
// display flex
// align-items center
// .c-right
// // margin 0 2.9rem 0 2.5rem
// display flex
// align-items center
.cbox
width 30%
display flex
align-items center
justify-content center
div
// font-size .24rem
font-size 24px
color #32C5FF
.icon1
display inline-block
width .19rem
height .19rem
overflow hidden
position relative
background center center / 100% 100% url(../../images/screen1/sctj_icon.png) no-repeat
margin-right .2rem
.num
display flex
align-items center
.bg
// width .44rem
// height .6rem
width 44px
height 60px
background rgba(50,197,255,0.10)
display flex
align-items center
justify-content center
margin-right .1rem
// font-size .5rem
font-size 50px
color #F7B502
.dot
background none
width .14rem
.center_wrapper
_wh(100%, calc(50% - 69px))
_fj(row)
.con2
width 70%
// height 100%
height calc(100% - 34px)
.title
// _wh(calc(100% - 34px), 32px)
_wh(100%, 32px)
margin 17px 0
padding-left 0.18rem
_font(16px, 32px, #fff,,left)
background center center / 100% 100% url(../../images/screen1/bg_title_l.png) no-repeat
.item_content_0
// _wh(calc(100% - 44px), calc(100% - 112px))
_wh(calc(100% - 44px), 100%)
height 100%
// margin 17px auto
float right
.tltxt
position relative
top -3px
.dotIncon
display inline-block
width 26px
height 26px
position relative
top 3px
left -6px
background center center / 100% 100% url(../../images/screen1/bg_title_tip.png) no-repeat
.con3
width 30%
// height 100%
height calc(100% - 34px)
// overflow hidden
position relative
.title
position absolute
_wh(calc(100% - 34px), 32px)
margin 17px 0
right 0
padding-left 0.18rem
_font(16px, 32px, #fff,,left)
background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
.item_content_1
_wh(calc(100% - 44px), 100%)
margin 60px auto
float right
.con4
_wh(100%, calc(50% - 85px))
margin-top 66px
overflow hidden
position relative
.block_h2
_wh(calc(100% - 0px), 32px)
margin 17px 0 10px 0
padding-left 0.18rem
background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
color #fff
h2
_font(16px, 32px, #fff,,left)
.list_scroll_title
_wh(calc(100% - 0px), 32px)
margin 0 auto
background #262F52
line-height 32px
color #fff
span
display inline-block
width 5%
text-align center
line-height 32px
font-size 14px
&:nth-child(4)
width 16%
&:nth-child(5)
width 6.5%
&:nth-child(6)
width 6.5%
&:nth-child(7)
width 8%
&:nth-child(14)
width 9%
&:nth-child(15)
width 9%
.content-block-scroll
_wh(calc(100% - 0px), calc(100% - 113px))
margin 0 auto 25px auto
overflow hidden
.content-block-scroll-ul
width 100%
li
width 100%
height 38px
_fj(row, center)
&:nth-child(2n)
background rgba(38,47,82,0.50)
span
display inline-block
width 5%
font-size 12px
// padding 0 .1rem
text-align center
line-height 38px
box-sizing border-box
&:nth-child(4)
width 16%
&:nth-child(5)
width 6.5%
&:nth-child(6)
width 6.5%
&:nth-child(7)
width 8%
&:nth-child(14)
width 9%
&:nth-child(15)
width 9%
</style>