fix:洁净车间页面调整

src/views/bigScreen/bxerp/jiejingdept.vue

@@ -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>
+								<div class="mat-inner">
-								<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
+									<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-avatar">{{ item.name ? item.name.charAt(0) : '?' }}</div>
-											<div class="perf-name">{{ item.操作人 }}</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.getEveryoneCount(that.deptName2);
-		// that.getEveryoneCount(that.deptName3);
 		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 = new Date();
-			let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
+			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{
+/* ===== 产品统计面板 ===== */
-	width:100%;
+.mat-panel-wrap { position: relative; }
-	height: 35vh;
+
+.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%;
+    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>