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>
|
||||
<div class="bottom-charts">
|
||||
<div class="bc-chart-item">
|
||||
<div class="bc-chart-item" v-if="isChange">
|
||||
<div class="bcci-header">机芯派工单执行进度</div>
|
||||
<dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</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>
|
||||
<dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelTag from './LabelTag'
|
||||
|
||||
let timer = null;
|
||||
export default {
|
||||
name: 'BottomCharts',
|
||||
components: {
|
||||
|
|
@ -39,16 +38,71 @@ export default {
|
|||
|
||||
// 计算完成百分比
|
||||
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')}`, // 编号
|
||||
title, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(0),
|
||||
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);
|
||||
|
||||
|
|
@ -60,16 +114,18 @@ export default {
|
|||
|
||||
|
||||
return {
|
||||
isChange: true,
|
||||
config1: {
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','QC','老化','剩下数量'],
|
||||
data: generateRandomData(60, 'U1机芯'),
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center']
|
||||
align: ['center'],
|
||||
waitTime: 30000,
|
||||
},
|
||||
|
||||
config2: {
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','安规','综合测试','老化','剩下数量'],
|
||||
data: generateRandomData(30, 'U1盖板'),
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
|
|
@ -78,6 +134,15 @@ export default {
|
|||
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let that = this;
|
||||
timer = setInterval(()=>{
|
||||
that.isChange = !that.isChange
|
||||
},60000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -90,7 +155,7 @@ export default {
|
|||
position: relative;
|
||||
|
||||
.bc-chart-item {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -122,4 +187,37 @@ export default {
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -51,10 +51,20 @@ export default {
|
|||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
data: ['12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@ export default {
|
|||
title: {
|
||||
text: '月生产情况',
|
||||
subtext: '完成率',
|
||||
subtextStyle:{
|
||||
color:'#fff'
|
||||
},
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
|
|
@ -49,13 +52,23 @@ export default {
|
|||
xAxis:[
|
||||
{
|
||||
type: 'category',
|
||||
// prettier-ignore
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
// prettier-ignore
|
||||
data: ['6月', '7月', '8月', '9月', '10月', '11月'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
|
@ -63,7 +76,7 @@ export default {
|
|||
name: '机芯1线',
|
||||
type: 'bar',
|
||||
data: [
|
||||
80, 85, 98, 95, 87, 75, 65, 68, 69, 40, 82, 83
|
||||
75, 65, 68, 69, 40, 82
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in New Issue