fix:洁净车间页面调整
This commit is contained in:
parent
30059973de
commit
cb7fcb1556
|
|
@ -14,10 +14,27 @@
|
|||
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
<div style="height: 40vh;">
|
||||
<div style="height: 40vh;" class="mat-panel-wrap">
|
||||
<dv-border-box-1>
|
||||
<div class="chartBlockTitle">产品占比</div>
|
||||
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
|
||||
<div class="mat-inner">
|
||||
<div class="mat-header">
|
||||
<div class="mat-title">
|
||||
<span class="mat-title-bar"></span>
|
||||
<span class="mat-title-icon">📦</span>
|
||||
产品统计
|
||||
</div>
|
||||
</div>
|
||||
<div class="mat-body">
|
||||
<div v-for="group in materialsList" :key="group.type" class="mat-group">
|
||||
<div class="mat-group-label" :style="{ borderLeftColor: group.color }">
|
||||
<span>{{ group.type }}</span>
|
||||
</div>
|
||||
<div class="mat-row" v-for="item in group.list" :key="item">
|
||||
<span class="mat-name">{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,22 +124,21 @@
|
|||
<div class="perf-title">
|
||||
<span class="perf-title-bar"></span>
|
||||
<span class="perf-title-icon">👥</span>
|
||||
人员日产量 TOP5
|
||||
人员月产量
|
||||
</div>
|
||||
<div class="perf-unit">单位: 件</div>
|
||||
</div>
|
||||
<div class="perf-list" ref="perfList">
|
||||
<div class="perf-row" v-for="(item, idx) in scrollPerfItems" :key="idx">
|
||||
<div class="perf-avatar">{{ item.操作人 ? item.操作人.charAt(0) : '?' }}</div>
|
||||
<div class="perf-name">{{ item.操作人 }}</div>
|
||||
<div class="perf-avatar">{{ item.name ? item.name.charAt(0) : '?' }}</div>
|
||||
<div class="perf-name">{{ item.name }}</div>
|
||||
<div class="perf-count">
|
||||
<span class="perf-num">{{ item.生产数 }}</span>
|
||||
<span class="perf-num">{{ item.count }}</span>
|
||||
<span class="perf-unit-sm">件</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="perf-footer">
|
||||
平均效率 {{ avgEfficiency }}%
|
||||
<span class="perf-lightning">⚡</span>
|
||||
标兵: {{ topPerson }}
|
||||
</div>
|
||||
|
|
@ -396,9 +412,9 @@ export default {
|
|||
{name:'洗棒',value:0},
|
||||
{name:'捆棒',value:0},
|
||||
{name:'拉单丝',value:0},
|
||||
{name:'捆一次棒',value:0},
|
||||
{name:'排一次棒',value:0},
|
||||
{name:'一次复丝',value:0},
|
||||
{name:'捆二次棒',value:0},
|
||||
{name:'排二次棒',value:0},
|
||||
{name:'二次复丝',value:0},
|
||||
],
|
||||
showValue: true
|
||||
|
|
@ -423,6 +439,11 @@ export default {
|
|||
lastUpdateInterval: null,
|
||||
scrollTimer: null,
|
||||
performanceList: [],
|
||||
materialsList: [
|
||||
{type: '倒像器', color: '#53c6f3', list: [],img:'public/img/bx/dxq2.png'},
|
||||
{type: '直板', color: '#c8ff50', list: [],img:'public/img/bx/zb2.png'},
|
||||
{type: '光锥', color: '#ff9d3e', list: [],img:'public/img/bx/gz2.png'}
|
||||
],
|
||||
perfScrollTimer: null,
|
||||
currentTime: "",
|
||||
currentDay: "",
|
||||
|
|
@ -430,7 +451,7 @@ export default {
|
|||
end_time:'',
|
||||
start_time:'',
|
||||
deptName:"拉丝排板班组",
|
||||
mgroups:['洗棒','捆棒','拉单丝','捆一次棒','一次复丝','捆二次棒','二次复丝'],
|
||||
mgroups:['洗棒','捆棒','拉单丝','排一次棒','一次复丝','排二次棒','二次复丝'],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -445,34 +466,32 @@ export default {
|
|||
if (this.equipmentList.length === 0) return [];
|
||||
return [...this.equipmentList, ...this.equipmentList];
|
||||
},
|
||||
// 全员按生产数降序排列
|
||||
// 全员按 count 降序排列
|
||||
sortedPerfList() {
|
||||
return [...this.performanceList]
|
||||
.sort((a, b) => Number(b.生产数) - Number(a.生产数));
|
||||
.sort((a, b) => b.count - a.count);
|
||||
},
|
||||
// 渲染两份，用于无缝滚动
|
||||
scrollPerfItems() {
|
||||
if (!this.sortedPerfList.length) return [];
|
||||
return [...this.sortedPerfList, ...this.sortedPerfList];
|
||||
},
|
||||
// 平均效率 = 合格数之和 / 生产数之和
|
||||
avgEfficiency() {
|
||||
if (!this.performanceList.length) return 0;
|
||||
const totalProd = this.performanceList.reduce((s, i) => s + Number(i.生产数 || 0), 0);
|
||||
const totalOk = this.performanceList.reduce((s, i) => s + Number(i.合格数 || 0), 0);
|
||||
if (!totalProd) return 0;
|
||||
return Math.round(totalOk / totalProd * 100);
|
||||
},
|
||||
// 标兵 = 生产数最多的人
|
||||
// 标兵 = 产量最多的人
|
||||
topPerson() {
|
||||
if (!this.performanceList.length) return '-';
|
||||
return [...this.performanceList]
|
||||
.sort((a, b) => Number(b.生产数) - Number(a.生产数))[0]?.操作人 || '-';
|
||||
.sort((a, b) => b.count - a.count)[0]?.name || '-';
|
||||
},
|
||||
materialsGroups() {
|
||||
if (this.equipmentList.length === 0) return [];
|
||||
console.log(this.equipmentList);
|
||||
return [...this.equipmentList];
|
||||
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
//洗棒、捆棒、拉丝 ：洗棒、捆棒、拉单丝、捆一次棒、一次复丝、捆二次棒、二次复丝
|
||||
//洗棒、捆棒、拉丝 ：洗棒、捆棒、拉单丝、排一次棒、一次复丝、排二次棒、二次复丝
|
||||
this.showTime();
|
||||
this.dayInterval = setInterval(() => {
|
||||
this.showTime();
|
||||
|
|
@ -481,10 +500,12 @@ export default {
|
|||
that.getEquipment();
|
||||
that.getMgroups();
|
||||
//每个人日生产量：个人绩效
|
||||
that.getEveryoneCount();
|
||||
// that.getEveryoneCount(that.deptName2);
|
||||
// that.getEveryoneCount(that.deptName3);
|
||||
// that.getEveryoneCount();
|
||||
that.materialAll();
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
console.log(new Date(year, month, 0).getDate())
|
||||
},
|
||||
methods: {
|
||||
getMondayOfCurrentWeek() {
|
||||
|
|
@ -526,10 +547,17 @@ export default {
|
|||
let that = this;
|
||||
let params = {page: 0,query:" { id, name }"};
|
||||
that.$API.mtm.mgroup.list.req(params).then((res) => {
|
||||
that.performanceList = [];
|
||||
that.materialsList[0].list = [];
|
||||
that.materialsList[1].list = [];
|
||||
that.materialsList[2].list = [];
|
||||
res.forEach((item)=>{
|
||||
let index = that.mgroups.indexOf(item.name);
|
||||
if(index>-1){
|
||||
//车间库存
|
||||
that.getmgroupMaterial(item.id,item.name,index);
|
||||
//员工生产统计
|
||||
that.getEveryoneCount(item.id,item.name)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -637,16 +665,43 @@ export default {
|
|||
});
|
||||
},
|
||||
//每个人日产量
|
||||
getEveryoneCount(){
|
||||
getEveryoneCount(id,name){
|
||||
let that = this;
|
||||
that.performanceList = [];
|
||||
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let days = new Date(year, month,0).getDate();
|
||||
let start_date = year + "-" + month + "-01";
|
||||
let end_date = year + "-" + month + "-" + days;
|
||||
let params = {
|
||||
query: {start_date:date,end_date:date,dept_name:that.deptName},
|
||||
query: {start_date:start_date,end_date:end_date,mgroup_name:name},
|
||||
};
|
||||
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
|
||||
let exceStr = "";
|
||||
if(name=='拉单丝'){
|
||||
exceStr = "product_defect_lds";
|
||||
}else if(name=='排一次棒'||name=='一次复丝'||name=='排二次棒'||name=='二次复丝'){
|
||||
exceStr = "product_defect_jjcj";
|
||||
}
|
||||
this.$API.bi.dataset.exec.req(exceStr, params).then((res) => {
|
||||
if(res.data2.ds0.length > 0){
|
||||
that.performanceList = res.data2.ds0;
|
||||
res.data2.ds0.forEach(item => {
|
||||
const itemName = item.员工;
|
||||
const count = Number(item.总切片数) || 0;
|
||||
const existing = that.performanceList.find(p => p.name === itemName);
|
||||
if (existing) {
|
||||
existing.count += count;
|
||||
} else {
|
||||
that.performanceList.push({ name: itemName, count });
|
||||
}
|
||||
const matName = item.物料名;
|
||||
let index = matName.indexOf('倒像器') > -1 ? 0: matName.indexOf('直板') > -1 ?1 : 2;
|
||||
const matExisting = that.materialsList[index].list.find(m => m === matName);
|
||||
if (matExisting) {
|
||||
} else {
|
||||
that.materialsList[index].list.push(matName);
|
||||
}
|
||||
});
|
||||
console.log('that.materialsList',that.materialsList);
|
||||
}
|
||||
that.$nextTick(() => { that.startPerfScroll(); });
|
||||
});
|
||||
|
|
@ -760,9 +815,112 @@ export default {
|
|||
left: 5%;
|
||||
border-radius: 3vh;
|
||||
}
|
||||
.leftChartBlock2{
|
||||
/* ===== 产品统计面板 ===== */
|
||||
.mat-panel-wrap { position: relative; }
|
||||
|
||||
.mat-inner {
|
||||
position: absolute;
|
||||
inset: 2.5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 4vh;
|
||||
padding: 0 1.2vh;
|
||||
border-bottom: 1px solid rgba(83, 198, 243, 0.25);
|
||||
}
|
||||
.mat-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4vh;
|
||||
font-size: 1.5vh;
|
||||
font-weight: 600;
|
||||
color: #e0f4ff;
|
||||
}
|
||||
.mat-title-bar {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 1.6vh;
|
||||
background: #00b4ff;
|
||||
border-radius: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.mat-title-icon { font-style: normal; font-size: 1.4vh; }
|
||||
|
||||
.mat-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5vh 0.8vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1vh;
|
||||
}
|
||||
.mat-body::-webkit-scrollbar { width: 2px; }
|
||||
.mat-body::-webkit-scrollbar-thumb { background: rgba(83, 198, 243, 0.3); border-radius: 2px; }
|
||||
|
||||
.mat-group { display: flex; flex-direction: column; gap: 0.35vh; }
|
||||
|
||||
.mat-group-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.25vh 0.6vh;
|
||||
margin-bottom: 0.15vh;
|
||||
border-left: 2.5px solid;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 0 0.4vh 0.4vh 0;
|
||||
font-size: 1.25vh;
|
||||
font-weight: 600;
|
||||
color: rgba(220, 240, 255, 0.9);
|
||||
}
|
||||
.mat-group-total {
|
||||
font-size: 1.3vh;
|
||||
font-weight: 700;
|
||||
font-family: "myfont", "Microsoft Yahei";
|
||||
}
|
||||
|
||||
.mat-row {
|
||||
width: 100%;
|
||||
height: 35vh;
|
||||
text-align: left;
|
||||
font-size: 1.1vh;
|
||||
color: rgba(180, 215, 240, 0.75);
|
||||
padding: 0.1vh 1vw;
|
||||
|
||||
}
|
||||
.mat-name {
|
||||
width: 9vh;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mat-bar-wrap {
|
||||
flex: 1;
|
||||
height: 0.7vh;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 1vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mat-bar {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 1vh;
|
||||
opacity: 0.75;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
.mat-count {
|
||||
flex-shrink: 0;
|
||||
width: 4vh;
|
||||
text-align: right;
|
||||
font-weight: 700;
|
||||
font-family: "myfont", "Microsoft Yahei";
|
||||
font-size: 1.3vh;
|
||||
color: #c8ff50;
|
||||
}
|
||||
.middleTableBlock1{
|
||||
width:94%;
|
||||
|
|
@ -1048,4 +1206,7 @@ export default {
|
|||
color: #ff9d3e;
|
||||
font-size: 1.4vh;
|
||||
}
|
||||
.yuanjianIcon{
|
||||
background-image: url("/public/img/bx/dxq2.png");
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue