You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
608 lines
17 KiB
Vue
608 lines
17 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">京源生产监控平台</div>
|
|
<div v-for="(i,k) in title"
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
|
|
class="title"
|
|
>
|
|
{{ i }}
|
|
</div>
|
|
<div class="table1">
|
|
<div style="background-color: #1077bc19;height: 50px;line-height: 50px;">
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 10%">
|
|
编号
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 20%">
|
|
生产任务
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 22%">
|
|
成品名称
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
|
|
计划数量
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
|
|
实际数量
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
|
|
差异值
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
|
|
完成率
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="scrollTableOption"
|
|
:data="scrollTableData"
|
|
class="case-item"
|
|
style="height: calc(100% - 50px);overflow: hidden;"
|
|
>
|
|
<div
|
|
v-for="(item, index) in scrollTableData"
|
|
:key="index"
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
|
|
<div
|
|
class="scrollTableItem" style="width: 10%"
|
|
>
|
|
{{ item.no }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 20%"
|
|
>
|
|
{{ item.orderCode }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 22%"
|
|
>
|
|
{{ item.materialName }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 12%"
|
|
>
|
|
{{ item.planAmount }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 12%"
|
|
>
|
|
{{ item.completeAmount }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 12%"
|
|
>
|
|
{{ item.quantityAmount }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 12%"
|
|
>
|
|
{{ item.finishingRate }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="background-color: #1077bc19;height: 50px;line-height: 50px;">
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
|
|
编号
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 25%">
|
|
订单号
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 15%">
|
|
工序名称
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 18%">
|
|
开始时间
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 18%">
|
|
结束时间
|
|
</div>
|
|
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
|
|
生产用时
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="scrollTableOption"
|
|
:data="scrollTableData1"
|
|
class="case-item"
|
|
style="height: calc(100% - 50px);overflow: hidden;"
|
|
>
|
|
<div
|
|
v-for="(item, index) in scrollTableData1"
|
|
:key="index"
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
|
|
<div
|
|
class="scrollTableItem" style="width: 12%"
|
|
>
|
|
{{ item.processId }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 25%"
|
|
>
|
|
{{ item.planCode }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 15%"
|
|
>
|
|
{{ item.processName }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 18%"
|
|
>
|
|
{{
|
|
parseTime(item.realBeginTime,'{m}-{d} {h}:{i}:{s}')
|
|
}}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 18%"
|
|
>
|
|
{{
|
|
parseTime(item.realEndTime,'{m}-{d} {h}:{i}:{s}')
|
|
}}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 12%"
|
|
>
|
|
{{ (Math.abs(new Date(item.realEndTime) - new Date(item.realBeginTime))/(1000*60*60)).toFixed(2) }}时
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
<div class="chart1">
|
|
<Chart key="chart1" ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<Chart key="chart2" ref="chart2"></Chart>
|
|
</div>
|
|
<div class="num1 num1_1" style="top: 11.9%;left: 11.1%;color:#5fc2f2">{{ topData.planAmount[0] }}</div>
|
|
<div class="num1 num1_2" style="top: 11.9%;left:14.6%;color:#5fc2f2">{{ topData.planAmount[1] }}</div>
|
|
<div class="num1 num1_3" style="top: 11.9%;left:18.1%;color:#5fc2f2">{{ topData.planAmount[2] }}</div>
|
|
<div class="num1 num1_4" style="top: 11.9%;left:21.8%;color:#5fc2f2">{{ topData.planAmount[3] }}</div>
|
|
<div class="num1 num1_5" style="top: 11.9%;left:35.6%;color:#59ee7b">{{ topData.completeAmount[0] }}</div>
|
|
<div class="num1 num1_6" style="top: 11.9%;left:39.2%;color:#59ee7b">{{ topData.completeAmount[1] }}</div>
|
|
<div class="num1 num1_7" style="top: 11.9%;left:42.8%;color:#59ee7b">{{ topData.completeAmount[2] }}</div>
|
|
<div class="num1 num1_8" style="top: 11.9%;left:46.4%;color:#59ee7b">{{ topData.completeAmount[3] }}</div>
|
|
<div class="num1 num1_9" style="top: 11.9%;left:60.3%;color:#f60008">{{ topData.diff[0] }}</div>
|
|
<div class="num1 num1_10" style="top: 11.9%;left:63.9%;color:#f60008">{{ topData.diff[1] }}</div>
|
|
<div class="num1 num1_11" style="top: 11.9%;left:67.4%;color:#f60008">{{ topData.diff[2] }}</div>
|
|
<div class="num1 num1_12" style="top: 11.9%;left:71%;color:#f60008">{{ topData.diff[3] }}</div>
|
|
<div class="num1 num1_13" style="top: 11.9%;left:84.8%;color:#f60008">{{ topData.rate[0] }}</div>
|
|
<div class="num1 num1_14" style="top: 11.9%;left:88.4%;color:#f60008">{{ topData.rate[1] }}</div>
|
|
<div class="num1 num1_15" style="top: 11.9%;left:92%;color:#f60008">{{ topData.rate[2] }}</div>
|
|
<div class="num1 num1_16" style="top: 11.9%;left:95.6%;color:#f60008">%</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import Chart from '@/components/board/Chart'
|
|
import * as echarts from 'echarts'
|
|
import {
|
|
orderEfficiency,
|
|
orderTime,
|
|
productionQualified,
|
|
productProgress,
|
|
workOrderProgress
|
|
} from '@/api/board/fifthFloorProduction'
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
export default {
|
|
name: 'Board1',
|
|
components: {
|
|
vueSeamlessScroll,
|
|
Chart
|
|
},
|
|
data() {
|
|
return {
|
|
topData: {
|
|
planAmount: [0, 0, 0, 0],
|
|
completeAmount: [0, 0, 0, 0],
|
|
diff: [0, 0, 0, 0],
|
|
rate: [0, 0, 0]
|
|
},
|
|
title: [
|
|
'生产任务信息',
|
|
'工位生产效率TOP',
|
|
' ',
|
|
'计划数量:',
|
|
'完成数量:',
|
|
'差异值:',
|
|
'完成进度:'
|
|
],
|
|
titlePosition: [
|
|
{
|
|
top: 41.6,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 41.6,
|
|
left: 69
|
|
},
|
|
{
|
|
top: 70.5,
|
|
left: 69
|
|
},
|
|
{
|
|
top: 11.9,
|
|
left: 4
|
|
},
|
|
{
|
|
top: 11.9,
|
|
left: 29
|
|
},
|
|
{
|
|
top: 11.9,
|
|
left: 54
|
|
},
|
|
{
|
|
top: 11.9,
|
|
left: 78
|
|
}
|
|
],
|
|
scrollTableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 22, // 开始无缝滚动的数据量 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: 0
|
|
},
|
|
scrollTableData: [],
|
|
scrollTableData1: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
|
|
window.onresize = () => {
|
|
this.$refs.chart1.chart.resize()
|
|
this.$refs.chart2.chart.resize()
|
|
}
|
|
},
|
|
methods: {
|
|
getData() {
|
|
workOrderProgress().then(e => {
|
|
this.scrollTableData = e.data.map((v, k) => {
|
|
return {
|
|
no: k + 1,
|
|
orderCode: v.orderCode,
|
|
planAmount: v.planAmount,
|
|
completeAmount: v.completeAmount,
|
|
materialName:v.materialName,
|
|
quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
|
|
finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
|
|
}
|
|
})
|
|
})
|
|
productProgress().then(e => {
|
|
this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4)
|
|
this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4)
|
|
this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4)
|
|
this.topData.rate = parseFloat(e.data.planAmount) === 0 ? [0, 0, 0] : [...[0, 0, 0], ...(((parseFloat(e.data.completeAmount) / parseFloat(e.data.planAmount)) || 0)*100).toFixed(0).split('')].slice(-3)
|
|
})
|
|
productionQualified().then(e => {
|
|
// console.log(e)
|
|
this.$refs.chart1.setData({
|
|
color: ['#3398DB'],
|
|
title: {
|
|
text: '组员生产合格率',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: '{b} <br> 合格率: {c}%'
|
|
},
|
|
/*legend: {
|
|
data: [date]
|
|
},*/
|
|
grid: {
|
|
top: '30',
|
|
left: '4%',
|
|
right: '4%',
|
|
bottom: '2%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01],
|
|
min: 0,
|
|
max: 100,
|
|
interval: 20,
|
|
axisLabel: {
|
|
formatter: '{value}%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: '80'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: e.data.map(v => v.name),
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 0,
|
|
margin: 10,
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: '50'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
// formatter: '{c}',
|
|
formatter: function(v) {
|
|
var val = v.data
|
|
if (val === 0) {
|
|
return ''
|
|
}
|
|
return val
|
|
},
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: e.data.map(v => parseFloat(v.passRate))
|
|
}
|
|
]
|
|
})
|
|
})
|
|
orderTime().then(e => {
|
|
|
|
// this.$refs.chart2.setData({
|
|
// tooltip: {
|
|
// trigger: 'axis',
|
|
// axisPointer: {
|
|
// type: 'shadow'
|
|
// }
|
|
// },
|
|
// grid: {
|
|
// top: '5%',
|
|
// left: '3%',
|
|
// right: '4%',
|
|
// bottom: '3%',
|
|
// containLabel: true
|
|
// },
|
|
// yAxis: [
|
|
// {
|
|
// type: 'value',
|
|
// name: '次数',
|
|
// position: 'left'
|
|
// },
|
|
// {
|
|
// show: false
|
|
// }
|
|
// ],
|
|
// xAxis: {
|
|
// type: 'category',
|
|
// data: [
|
|
// '员工1',
|
|
// '员工2',
|
|
// '员工3',
|
|
// '员工4',
|
|
// '员工5',
|
|
// '员工6',
|
|
// '员工7',
|
|
// '员工8',
|
|
// '员工9',
|
|
// '员工10',
|
|
// '员工11',
|
|
// '员工12'
|
|
// ]
|
|
// },
|
|
// series: [
|
|
// {
|
|
// name: '流程1',
|
|
// type: 'bar',
|
|
// stack: '次数',
|
|
// label: {
|
|
// normal: {
|
|
// show: true
|
|
// }
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: 'rgb(249,18,243)'
|
|
// }
|
|
// },
|
|
// data: [197, 134, 138, 167, 160, 174, 164, 0, 0, 0, 0, 0]
|
|
// },
|
|
// {
|
|
// name: '流程2',
|
|
// type: 'bar',
|
|
// stack: '次数',
|
|
// label: {
|
|
// normal: {
|
|
// show: true
|
|
// }
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: 'rgb(249,205,30)'
|
|
// }
|
|
// },
|
|
// data: [325, 191, 315, 400, 407, 448, 417, 0, 0, 0, 0, 0]
|
|
// },
|
|
// {
|
|
// name: '流程3',
|
|
// type: 'bar',
|
|
// stack: '次数',
|
|
// label: {
|
|
// normal: {
|
|
// show: true
|
|
// }
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: 'rgb(0, 137, 239)'
|
|
// }
|
|
// },
|
|
// data: [138, 111, 156, 139, 116, 151, 154, 0, 0, 0, 0, 0]
|
|
// }
|
|
// ]
|
|
// })
|
|
this.$refs.chart2.setData({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '时长(分钟）',
|
|
position: 'left'
|
|
},
|
|
{
|
|
show: false
|
|
}
|
|
],
|
|
xAxis: {
|
|
type: 'category',
|
|
data: e.data.map(v => v.processName)
|
|
},
|
|
series: [
|
|
{
|
|
name: '时长(分钟）',
|
|
type: 'bar',
|
|
barMaxWidth: '100px',
|
|
stack: '次数',
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(249,18,243)'
|
|
}
|
|
},
|
|
data: e.data.map(v => (parseFloat(v.produceTime) / 60).toFixed(2))
|
|
}
|
|
]
|
|
})
|
|
})
|
|
orderEfficiency().then(e => {
|
|
console.log(e)
|
|
this.scrollTableData1 = e.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
.app-container {
|
|
background-image: url("../../../assets/board/productionBg3.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.headTitle {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
font-size: 1.5vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
color: #dddddd;
|
|
font-size: 1vw;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.num1 {
|
|
position: absolute;
|
|
font-size: 1.5vw;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.table1 {
|
|
position: absolute;
|
|
top: 44.5%;
|
|
left: 3.3%;
|
|
width: 62.5%;
|
|
height: 48.5%;
|
|
color: #fff;
|
|
}
|
|
|
|
.table2 {
|
|
position: absolute;
|
|
top: 44.5%;
|
|
left: 67.3%;
|
|
width: 29.5%;
|
|
height: 50.5%;
|
|
font-size: 0.7vw;
|
|
color: #fff;
|
|
}
|
|
|
|
.table3 {
|
|
position: absolute;
|
|
top: 73.5%;
|
|
left: 67.3%;
|
|
width: 29.5%;
|
|
height: 19.5%;
|
|
color: #fff;
|
|
}
|
|
|
|
.scrollTableItem {
|
|
display: inline-block;
|
|
width: calc(100% / 6);
|
|
text-align: center;
|
|
padding: 14px 0;
|
|
color: #4e99c5
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 16%;
|
|
left: 3.4%;
|
|
width: 46%;
|
|
height: 21.5%;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 16.2%;
|
|
left: 50.7%;
|
|
width: 45.9%;
|
|
height: 21%;
|
|
}
|
|
|
|
|
|
</style>
|