|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="dashboard-editor-container">
|
|
|
|
|
|
|
|
|
|
<panel-group @handleSetLineChartData="handleSetLineChartData"/>
|
|
|
|
|
<panel-group :topData="topData"/>
|
|
|
|
|
|
|
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
|
|
|
<el-table
|
|
|
|
@ -10,46 +10,42 @@
|
|
|
|
|
cell-style="text-align:center"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="no"
|
|
|
|
|
prop="ROWSEQ"
|
|
|
|
|
label="序号"
|
|
|
|
|
width="50">
|
|
|
|
|
width="80">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="plant"
|
|
|
|
|
prop="FACTORY_CODE"
|
|
|
|
|
label="工厂"
|
|
|
|
|
width="80">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="productionLine"
|
|
|
|
|
label="产线">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="workOrderNumber"
|
|
|
|
|
label="SAP计划编号">
|
|
|
|
|
prop="ORDER_CODE"
|
|
|
|
|
label="订单编号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="SalesOrderNumber"
|
|
|
|
|
label="销售单号">
|
|
|
|
|
prop="MATERIAL_NAME"
|
|
|
|
|
label="物料名称">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="productCode"
|
|
|
|
|
label="产品编码">
|
|
|
|
|
prop="MATERIAL_CODE"
|
|
|
|
|
label="物料编号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="productName"
|
|
|
|
|
label="产品名称">
|
|
|
|
|
prop="ORDER_AMOUNT"
|
|
|
|
|
label="计划数">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="scheduledProduction"
|
|
|
|
|
label="计划产量">
|
|
|
|
|
prop="COMPLETE_AMOUNT"
|
|
|
|
|
label="完成数">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="FinishedOutput"
|
|
|
|
|
label="完成产量">
|
|
|
|
|
prop="RATE"
|
|
|
|
|
label="完成率">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="percentageComplete"
|
|
|
|
|
label="完成率">
|
|
|
|
|
prop="PLAN_DATE"
|
|
|
|
|
label="计划日期">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-row>
|
|
|
|
@ -61,12 +57,12 @@
|
|
|
|
|
<el-row :gutter="32">
|
|
|
|
|
<el-col :xs="24" :sm="24" :lg="16">
|
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
|
<LineChart1 :chart-data="lineChartData"/>
|
|
|
|
|
<LineChart1 :chart-data="lineChartData1"/>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
|
<pie-chart/>
|
|
|
|
|
<pie-chart :chart-data="pieChartData"/>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
@ -82,28 +78,21 @@ import LineChart1 from './dashboard/LineChart1'
|
|
|
|
|
import RaddarChart from './dashboard/RaddarChart'
|
|
|
|
|
import PieChart from './dashboard/PieChart'
|
|
|
|
|
import BarChart from './dashboard/BarChart'
|
|
|
|
|
import {getData} from '@/api/index'
|
|
|
|
|
|
|
|
|
|
const lineChartData = {
|
|
|
|
|
newVisitis: {
|
|
|
|
|
expectedData: [99, 98, 95, 93, 96, 93, 97],
|
|
|
|
|
actualData: [99, 98, 95, 93, 96, 93, 97],
|
|
|
|
|
expedData: [200, 192, 120, 144, 160, 130, 140]
|
|
|
|
|
},
|
|
|
|
|
messages: {
|
|
|
|
|
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
|
|
|
|
actualData: [180, 160, 151, 106, 145, 150, 130],
|
|
|
|
|
expedData: [200, 192, 120, 144, 160, 130, 140]
|
|
|
|
|
},
|
|
|
|
|
purchases: {
|
|
|
|
|
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
|
|
|
|
actualData: [120, 90, 100, 138, 142, 130, 130],
|
|
|
|
|
expedData: [200, 192, 120, 144, 160, 130, 140]
|
|
|
|
|
},
|
|
|
|
|
shoppings: {
|
|
|
|
|
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
|
|
|
|
actualData: [120, 82, 91, 154, 162, 140, 130],
|
|
|
|
|
expedData: [200, 192, 120, 144, 160, 130, 140]
|
|
|
|
|
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
|
const week = () => {
|
|
|
|
|
let today = new Date();
|
|
|
|
|
let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
|
|
|
|
|
let dayOfWeek = firstDayOfYear.getDay();
|
|
|
|
|
let spendDay = 1;
|
|
|
|
|
if (dayOfWeek != 0) {
|
|
|
|
|
spendDay = 7 - dayOfWeek + 1;
|
|
|
|
|
}
|
|
|
|
|
firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
|
|
|
|
|
let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
|
|
|
|
|
return Math.ceil((d / 7) + 1)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
@ -118,52 +107,242 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
lineChartData: lineChartData.newVisitis,
|
|
|
|
|
tableData: [
|
|
|
|
|
{
|
|
|
|
|
no: '1',
|
|
|
|
|
plant: '1301',
|
|
|
|
|
productionLine: '新产线',
|
|
|
|
|
workOrderNumber: '11236564',
|
|
|
|
|
productName: 'SC-187,C,特需',
|
|
|
|
|
productCode: '9002005735',
|
|
|
|
|
SalesOrderNumber: '0000055258',
|
|
|
|
|
scheduledProduction: '100',
|
|
|
|
|
FinishedOutput: '0',
|
|
|
|
|
percentageComplete: '0%'
|
|
|
|
|
topData: {},
|
|
|
|
|
lineChartData: {},
|
|
|
|
|
lineChartData1: {},
|
|
|
|
|
pieChartData: {},
|
|
|
|
|
tableData: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
getData({}).then(e => {
|
|
|
|
|
let data = e.data
|
|
|
|
|
this.topData = {
|
|
|
|
|
value1: data.planOrderSum,
|
|
|
|
|
value2: data.prodOrderSum,
|
|
|
|
|
value3: data.planProductSum,
|
|
|
|
|
value4: data.compProductSum,
|
|
|
|
|
}
|
|
|
|
|
this.tableData = data.todayOrderList
|
|
|
|
|
this.lineChartData = {
|
|
|
|
|
legend: {},
|
|
|
|
|
title: {
|
|
|
|
|
text: `第${week()}周产量`,
|
|
|
|
|
textStyle: {
|
|
|
|
|
align: 'center',
|
|
|
|
|
color: '#000',
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
},
|
|
|
|
|
top: '0%',
|
|
|
|
|
left: '0%',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
no: '2',
|
|
|
|
|
plant: '1301',
|
|
|
|
|
productionLine: '新产线',
|
|
|
|
|
workOrderNumber: '11236570',
|
|
|
|
|
productName: 'SC-281C,C,特需',
|
|
|
|
|
productCode: '9002007012',
|
|
|
|
|
SalesOrderNumber: '0000055621',
|
|
|
|
|
scheduledProduction: '150',
|
|
|
|
|
FinishedOutput: '149',
|
|
|
|
|
percentageComplete: '99.33%'
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: data.columnarList.map(val => val.BEGIN_DATE),
|
|
|
|
|
// boundaryGap: false,
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
no: '3',
|
|
|
|
|
plant: '1301',
|
|
|
|
|
productionLine: '新产线',
|
|
|
|
|
workOrderNumber: '11234730',
|
|
|
|
|
productName: 'SC-500Y,YZ怡宝24YP,C',
|
|
|
|
|
productCode: '9002006928',
|
|
|
|
|
SalesOrderNumber: '0000055537',
|
|
|
|
|
scheduledProduction: '400',
|
|
|
|
|
FinishedOutput: '399',
|
|
|
|
|
percentageComplete: '99.75%'
|
|
|
|
|
grid: {
|
|
|
|
|
left: 10,
|
|
|
|
|
right: 10,
|
|
|
|
|
bottom: 20,
|
|
|
|
|
top: 50,
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross'
|
|
|
|
|
},
|
|
|
|
|
padding: [5, 10]
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value}%'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '订单履约率',
|
|
|
|
|
type: 'line',
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: '#3888fa',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#3888fa',
|
|
|
|
|
width: 2
|
|
|
|
|
},
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: '#f3f8ff'
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: data.columnarList.map(val => val.RATE),
|
|
|
|
|
animationDuration: 1000,
|
|
|
|
|
animationEasing: 'quadraticOut'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '产量',
|
|
|
|
|
smooth: false,
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barMaxWidth: 60,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: '#9fe080',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#9fe080',
|
|
|
|
|
width: 2
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: '#f3f8ff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: data.columnarList.map(val => val.COMPLETE_AMOUNT),
|
|
|
|
|
animationDuration: 1000,
|
|
|
|
|
animationEasing: 'quadraticOut'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
this.lineChartData1 = {
|
|
|
|
|
title: {
|
|
|
|
|
text: `第${week()}周清单率`,
|
|
|
|
|
textStyle: {
|
|
|
|
|
align: 'center',
|
|
|
|
|
color: '#000',
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
},
|
|
|
|
|
top: '0%',
|
|
|
|
|
left: '0%',
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: data.lineList.map(val => val.BEGIN_DATE),
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: 10,
|
|
|
|
|
right: 10,
|
|
|
|
|
bottom: 20,
|
|
|
|
|
top: 50,
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross'
|
|
|
|
|
},
|
|
|
|
|
padding: [5, 10]
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value}%'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {},
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
name: '清单率',
|
|
|
|
|
smooth: false,
|
|
|
|
|
type: 'line',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: '#3888fa',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#3888fa',
|
|
|
|
|
width: 2
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: '#f3f8ff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: data.lineList.map(val => val.COMPLETE_AMOUNT),
|
|
|
|
|
animationDuration: 2800,
|
|
|
|
|
animationEasing: 'quadraticOut'
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
this.pieChartData = {
|
|
|
|
|
title: {
|
|
|
|
|
text: `第${week()}周质量缺陷分布`,
|
|
|
|
|
textStyle: {
|
|
|
|
|
align: 'center',
|
|
|
|
|
color: '#000',
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
},
|
|
|
|
|
top: '0%',
|
|
|
|
|
left: '0%',
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
left: 'center',
|
|
|
|
|
bottom: '10',
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
roseType: 'radius',
|
|
|
|
|
radius: [15, 95],
|
|
|
|
|
center: ['50%', '46%'],
|
|
|
|
|
data: data.pieList.map(val => {
|
|
|
|
|
return {
|
|
|
|
|
value: val.SUM,
|
|
|
|
|
name: val.QUALITY_DEFECT_NAME
|
|
|
|
|
}
|
|
|
|
|
}),
|
|
|
|
|
animationEasing: 'cubicInOut',
|
|
|
|
|
animationDuration: 2600
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleSetLineChartData(type) {
|
|
|
|
|
this.lineChartData = lineChartData[type]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
methods: {}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|