376 lines
11 KiB
Vue
376 lines
11 KiB
Vue
<template>
|
||
<div class="bottom-charts">
|
||
<div style="width: 100%;" v-if="dataType == '整机'">
|
||
<div class="bc-chart-item">
|
||
<div class="bcci-header">整机派工单执行进度</div>
|
||
<dv-scroll-board :config="config3" style="height:90%;margin-left: 2%;width:96%" />
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;" v-if="dataType == '3'">
|
||
<div class="bc-chart-item">
|
||
<div class="bcci-header">派工单执行进度</div>
|
||
<dv-scroll-board :config="config4" style="height:90%;margin-left: 2%;width:96%" />
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;" v-if="dataType!='3' && dataType !='整机'">
|
||
<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;" /> -->
|
||
|
||
<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>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import LabelTag from './LabelTag'
|
||
import testRes from './test'
|
||
let timer = null;
|
||
export default {
|
||
name: 'BottomCharts',
|
||
components: {
|
||
LabelTag
|
||
},
|
||
props: {
|
||
dataType: {
|
||
}
|
||
},
|
||
data() {
|
||
let _this = this;
|
||
function generateRandomData(N, title) {
|
||
const data = [];
|
||
let date = new Date(); // 从今天的日期开始
|
||
for (let i = 1; i <= N; i++) {
|
||
// 格式化日期为'YYYY-MM-DD'
|
||
const formattedDate = `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||
const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;
|
||
|
||
// 订单量随机在20到200之间，步长为10
|
||
const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;
|
||
|
||
// 完成数量随机但不超过订单量
|
||
const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;
|
||
|
||
// 计算完成百分比
|
||
const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(1) + '%';
|
||
// eslint-disable-next-line no-inner-declarations
|
||
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 = '#08e5ff';
|
||
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 = [];
|
||
if(_this.dataType == '整机') {
|
||
// eslint-disable-next-line no-const-assign
|
||
newDataItem = [
|
||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||
//`
|
||
// <div style="font-weight:bold;font-size:35px;">
|
||
// ${title}
|
||
// </div>
|
||
//`,
|
||
title,
|
||
|
||
// 固定值
|
||
formattedDate, // 日期
|
||
orderQuantity, // 订单量
|
||
completionRate, // 完成率
|
||
createProgressCircle(100),
|
||
createProgressCircle(100),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(completionRate2),
|
||
completedQuantity // 完成数量
|
||
];
|
||
// eslint-disable-next-line brace-style
|
||
}
|
||
// 创建新的数据项
|
||
else if (title === 'U1机芯') {
|
||
// eslint-disable-next-line no-const-assign
|
||
newDataItem = [
|
||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||
`
|
||
<div style="font-weight:bold;font-size:35px;">
|
||
${title}
|
||
</div>
|
||
`, // 固定值
|
||
formattedDate, // 日期
|
||
orderQuantity, // 订单量
|
||
completionRate, // 完成率
|
||
createProgressCircle(100),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(0),
|
||
completedQuantity // 完成数量
|
||
];
|
||
}else if(title === 'U1机芯2'){
|
||
// eslint-disable-next-line no-const-assign
|
||
newDataItem = [
|
||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||
`
|
||
<div style="font-weight:bold;font-size:35px;">
|
||
${title}
|
||
</div>
|
||
`, // 固定值
|
||
formattedDate, // 日期
|
||
orderQuantity, // 订单量
|
||
completionRate, // 完成率
|
||
createProgressCircle(100),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(0),
|
||
completedQuantity, // 完成数量
|
||
]
|
||
}else {
|
||
// eslint-disable-next-line no-const-assign
|
||
newDataItem = [
|
||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||
`
|
||
<div style="font-weight:bold;font-size:35px;">
|
||
${title}
|
||
</div>
|
||
`, // 固定值
|
||
formattedDate, // 日期
|
||
orderQuantity, // 订单量
|
||
completionRate, // 完成率
|
||
createProgressCircle(100),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(completionRate2),
|
||
createProgressCircle(0),
|
||
completedQuantity // 完成数量
|
||
];
|
||
}
|
||
|
||
|
||
data.push(newDataItem);
|
||
|
||
// 更新日期至下一天
|
||
date.setDate(date.getDate() + 1);
|
||
}
|
||
return data;
|
||
}
|
||
|
||
return {
|
||
isChange: true,
|
||
config1: {
|
||
header:['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', 'QC', '老化', '剩下数量'],
|
||
data: generateRandomData(60, 'U1机芯'),
|
||
index: true,
|
||
headerHeight: 50,
|
||
columnWidth: [80, 300,400],
|
||
align: ['center'],
|
||
//waitTime: 300000,
|
||
},
|
||
|
||
config2: {
|
||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', '安规', '综合测试', '老化', '剩下数量'],
|
||
data: generateRandomData(30, 'U1盖板'),
|
||
headerHeight: 50,
|
||
index: true,
|
||
columnWidth: [80, 280,400],
|
||
align: ['center']
|
||
},
|
||
|
||
config3: {
|
||
|
||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '上陶瓷', '气密性QC', '整机组装', '功能QC', '全外观QC', '包装','剩余数量'] ,
|
||
data: generateRandomData(30, 'U1C智能坐便器[220V]'),
|
||
headerHeight: 50,
|
||
index: true,
|
||
columnWidth: [80, 280,400],
|
||
align: ['center']
|
||
},
|
||
config4: {
|
||
header: ['工单号', '产品名称','派工日期', '派工数量', '工序进度', '进水调节', '按钮调节', '桶身调节', '桶身装底座', '包装','剩余数量'] ,
|
||
data: generateRandomData(30, 'U1机芯2'),
|
||
headerHeight: 50,
|
||
index: true,
|
||
columnWidth: [80, 280,400],
|
||
align: ['center']
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
let that = this;
|
||
this.checkData();
|
||
timer = setInterval(() => {
|
||
that.isChange = !that.isChange
|
||
}, 60000)
|
||
},
|
||
methods:{
|
||
checkData(){
|
||
console.log(testRes)
|
||
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 = '#08e5ff';
|
||
content = `${percentage}%`;
|
||
return `
|
||
<div class="circle-progress" style="border-color: ${color}; ">
|
||
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
let data = testRes.data.yx_v_pgjd.map(item=>{
|
||
return [
|
||
item["工单号"],
|
||
item["产品名称"],
|
||
item["派工日期"],
|
||
item["派工数量"],
|
||
createProgressCircle(item["工序进度"]*100),
|
||
createProgressCircle(item["进水调节"]*100),
|
||
createProgressCircle(item["按钮调解"]*100),
|
||
createProgressCircle(item["桶身调节"]*100),
|
||
createProgressCircle(item["桶身装底座"]*100),
|
||
createProgressCircle(item["包装"]*100),
|
||
item["剩余数量"],
|
||
]
|
||
})
|
||
this.config4.data = data
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(timer)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.bottom-charts {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.bc-chart-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bcci-header {
|
||
height: 50px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dv-active-ring-chart {
|
||
height: calc(~"100% - 80px");
|
||
}
|
||
|
||
.label-tag {
|
||
height: 30px;
|
||
}
|
||
|
||
.active-ring-name {
|
||
font-size: 18px !important;
|
||
}
|
||
|
||
.decoration-1,
|
||
.decoration-2,
|
||
.decoration-3 {
|
||
display: absolute;
|
||
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.2rem;
|
||
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,
|
||
.header-item {
|
||
font-size: 0.3rem;
|
||
}
|
||
</style>
|