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.
384 lines
9.1 KiB
Vue
384 lines
9.1 KiB
Vue
<template>
|
|
<div class="dashboard-editor-container">
|
|
|
|
<panel-group :topData="topData"/>
|
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
<el-table
|
|
:data="tableData"
|
|
header-cell-style="text-align:center;background-color:#57c9cd;color:#fff"
|
|
cell-style="text-align:center"
|
|
:row-style="tableRowStyle"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="ROWSEQ"
|
|
label="序号"
|
|
width="80">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="FACTORY_CODE"
|
|
label="工厂"
|
|
width="80">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="ORDER_CODE"
|
|
label="订单编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="MATERIAL_NAME"
|
|
label="物料名称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="MATERIAL_CODE"
|
|
label="物料编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="ORDER_AMOUNT"
|
|
label="计划数">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="COMPLETE_AMOUNT"
|
|
label="完成数">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="RATE"
|
|
label="完成率">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="PLAN_DATE"
|
|
label="计划日期">
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-row>
|
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
<line-chart :chart-data="lineChartData"/>
|
|
</el-row>
|
|
|
|
<el-row :gutter="32">
|
|
<el-col :xs="24" :sm="24" :lg="16">
|
|
<div class="chart-wrapper">
|
|
<LineChart1 :chart-data="lineChartData1"/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="chart-wrapper">
|
|
<pie-chart :chart-data="pieChartData"/>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PanelGroup from './dashboard/PanelGroup'
|
|
import LineChart from './dashboard/LineChart'
|
|
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 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 {
|
|
name: 'Index',
|
|
components: {
|
|
PanelGroup,
|
|
LineChart,
|
|
RaddarChart,
|
|
PieChart,
|
|
BarChart,
|
|
LineChart1
|
|
},
|
|
data() {
|
|
return {
|
|
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%',
|
|
},
|
|
xAxis: {
|
|
data: data.columnarList.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
|
|
}
|
|
},
|
|
{
|
|
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: {
|
|
tableRowStyle({row, rowIndex}) {
|
|
console.log(row)
|
|
if (row.STATUS === 1) {
|
|
console.log(123)
|
|
return {'background-color': 'red',color:'#fff'};
|
|
} else {
|
|
console.log(456)
|
|
return {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dashboard-editor-container {
|
|
padding: 32px;
|
|
background-color: rgb(240, 242, 245);
|
|
position: relative;
|
|
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
.el-table th.el-table__cell > .cell {
|
|
text-align: center;
|
|
}
|
|
</style>
|