BI改动:
1,月生产情况。12个月改成6个月。 2,下面机芯派工单执行进度和盖板派工单执行进度 改成 切换的形式。比如1分钟显示机芯派工单执行进度,1分钟显示盖板派工单执行进度。 3,机芯派工单执行进度增加列:组装、QC、老化(这3个列改成用进度圆圈) 4,盖板派工单增加列:组装、安规、综合测试、老化(这4个列改成用进度圆圈)
This commit is contained in:
parent
4673c93c4f
commit
0439473f59
|
|
@ -1,22 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="bottom-charts">
|
<div class="bottom-charts">
|
||||||
<div class="bc-chart-item">
|
<div class="bc-chart-item" v-if="isChange">
|
||||||
<div class="bcci-header">机芯派工单执行进度</div>
|
<div class="bcci-header">机芯派工单执行进度</div>
|
||||||
<dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
|
<dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
|
||||||
</div>
|
</div>
|
||||||
<dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
|
<!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->
|
||||||
|
|
||||||
<div class="bc-chart-item">
|
<div class="bc-chart-item" v-if="!isChange">
|
||||||
<div class="bcci-header">盖板派工单执行进度</div>
|
<div class="bcci-header">盖板派工单执行进度</div>
|
||||||
<dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
|
<dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LabelTag from './LabelTag'
|
import LabelTag from './LabelTag'
|
||||||
|
let timer = null;
|
||||||
export default {
|
export default {
|
||||||
name: 'BottomCharts',
|
name: 'BottomCharts',
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -39,16 +38,71 @@ export default {
|
||||||
|
|
||||||
// 计算完成百分比
|
// 计算完成百分比
|
||||||
const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%';
|
const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%';
|
||||||
|
function createProgressCircle(percentage) {
|
||||||
|
let color, content;
|
||||||
|
if (percentage === 0) {
|
||||||
|
color = 'gray';
|
||||||
|
content = '0%';
|
||||||
|
return `
|
||||||
|
<div class="circle-progress" style="border-color: ${color}; ">
|
||||||
|
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else if (percentage === 100) {
|
||||||
|
color = '#1afa29';
|
||||||
|
content = '√';
|
||||||
|
return `
|
||||||
|
<div class="circle-progress" style="border-color: ${color}; ">
|
||||||
|
<div class="circle-img"></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
color = '#1e80ff';
|
||||||
|
content = `${percentage}%`;
|
||||||
|
return `
|
||||||
|
<div class="circle-progress" style="border-color: ${color}; ">
|
||||||
|
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//随机三个百分比 从大到小
|
||||||
|
const completionRate1 = Math.floor(Math.random() * 100);
|
||||||
|
const completionRate2 = Math.floor(Math.random() * 100);
|
||||||
|
const completionRate3 = Math.floor(Math.random() * 100);
|
||||||
|
const newDataItem = [];
|
||||||
// 创建新的数据项
|
// 创建新的数据项
|
||||||
const newDataItem = [
|
if(title === 'U1机芯'){
|
||||||
|
newDataItem = [
|
||||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||||
title, // 固定值
|
title, // 固定值
|
||||||
formattedDate, // 日期
|
formattedDate, // 日期
|
||||||
orderQuantity, // 订单量
|
orderQuantity, // 订单量
|
||||||
completionRate, // 完成率
|
completionRate, // 完成率
|
||||||
|
createProgressCircle(100),
|
||||||
|
createProgressCircle(completionRate2),
|
||||||
|
createProgressCircle(0),
|
||||||
completedQuantity // 完成数量
|
completedQuantity // 完成数量
|
||||||
];
|
];
|
||||||
|
}else{
|
||||||
|
newDataItem = [
|
||||||
|
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||||
|
title, // 固定值
|
||||||
|
formattedDate, // 日期
|
||||||
|
orderQuantity, // 订单量
|
||||||
|
completionRate, // 完成率
|
||||||
|
createProgressCircle(100),
|
||||||
|
createProgressCircle(completionRate2),
|
||||||
|
createProgressCircle(completionRate2),
|
||||||
|
createProgressCircle(0),
|
||||||
|
completedQuantity // 完成数量
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
data.push(newDataItem);
|
data.push(newDataItem);
|
||||||
|
|
||||||
|
|
@ -60,16 +114,18 @@ export default {
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
isChange: true,
|
||||||
config1: {
|
config1: {
|
||||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
|
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','QC','老化','剩下数量'],
|
||||||
data: generateRandomData(60, 'U1机芯'),
|
data: generateRandomData(60, 'U1机芯'),
|
||||||
index: true,
|
index: true,
|
||||||
columnWidth: [50],
|
columnWidth: [50],
|
||||||
align: ['center']
|
align: ['center'],
|
||||||
|
waitTime: 30000,
|
||||||
},
|
},
|
||||||
|
|
||||||
config2: {
|
config2: {
|
||||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
|
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','安规','综合测试','老化','剩下数量'],
|
||||||
data: generateRandomData(30, 'U1盖板'),
|
data: generateRandomData(30, 'U1盖板'),
|
||||||
index: true,
|
index: true,
|
||||||
columnWidth: [50],
|
columnWidth: [50],
|
||||||
|
|
@ -78,6 +134,15 @@ export default {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
let that = this;
|
||||||
|
timer = setInterval(()=>{
|
||||||
|
that.isChange = !that.isChange
|
||||||
|
},60000)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(timer)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -90,7 +155,7 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.bc-chart-item {
|
.bc-chart-item {
|
||||||
width: 50%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -122,4 +187,37 @@ export default {
|
||||||
left: 0%;
|
left: 0%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.circle-progress {
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
// background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
border: 6px solid;
|
||||||
|
}
|
||||||
|
.circle-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 0.16rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.circle-img{
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
background-image: url('./img/icon_success.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size:contain;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.ceil{
|
||||||
|
font-size: 0.2rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -51,10 +51,20 @@ export default {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
|
axisLine:{
|
||||||
|
lineStyle:{
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
data: ['12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12']
|
data: ['12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12']
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value',
|
||||||
|
axisLine:{
|
||||||
|
lineStyle:{
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,9 @@ export default {
|
||||||
title: {
|
title: {
|
||||||
text: '月生产情况',
|
text: '月生产情况',
|
||||||
subtext: '完成率',
|
subtext: '完成率',
|
||||||
|
subtextStyle:{
|
||||||
|
color:'#fff'
|
||||||
|
},
|
||||||
textStyle:{
|
textStyle:{
|
||||||
color:'#fff'
|
color:'#fff'
|
||||||
}
|
}
|
||||||
|
|
@ -46,16 +49,26 @@ export default {
|
||||||
toolbox: {
|
toolbox: {
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
xAxis: [
|
xAxis:[
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
// prettier-ignore
|
axisLine:{
|
||||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
lineStyle:{
|
||||||
|
color:'#fff'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// prettier-ignore
|
||||||
|
data: ['6月', '7月', '8月', '9月', '10月', '11月'],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value'
|
type: 'value',
|
||||||
|
axisLine:{
|
||||||
|
lineStyle:{
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
|
|
@ -63,7 +76,7 @@ export default {
|
||||||
name: '机芯1线',
|
name: '机芯1线',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [
|
data: [
|
||||||
80, 85, 98, 95, 87, 75, 65, 68, 69, 40, 82, 83
|
75, 65, 68, 69, 40, 82
|
||||||
],
|
],
|
||||||
markPoint: {
|
markPoint: {
|
||||||
data: [
|
data: [
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in New Issue