From 1f4903411dd41223554e62bc3b134b7ec4d42975 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期一, 04 十二月 2023 16:13:42 +0800
Subject: [PATCH] 设置订单完成比率和工单进度统计动态显示
---
src/views/cockpitPage/components/WorkOrderProgress.vue | 137 ++++++++++++++++++++++++++
src/views/cockpitPage/components/OrderCompleteRadio.vue | 58 +++++++++--
public/cockpitPage/order-bg.png | 0
src/views/cockpitPage/index.vue | 56 ++++++++++
4 files changed, 235 insertions(+), 16 deletions(-)
diff --git a/public/cockpitPage/order-bg.png b/public/cockpitPage/order-bg.png
index 207ac9a..6e9326f 100644
--- a/public/cockpitPage/order-bg.png
+++ b/public/cockpitPage/order-bg.png
Binary files differ
diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
index 11066c7..af4ccc2 100644
--- a/src/views/cockpitPage/components/OrderCompleteRadio.vue
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -29,19 +29,52 @@
components: {
ChartTitle,
},
- props: {},
+ props: {
+ orderCompleteObject: {
+ type: Object,
+ default: () => {
+ return {
+ startIndex: 0,
+ orderCompleteList: [],
+ };
+ },
+ },
+ },
data() {
return {
- tableList: [
- { title: "DD19070047", radio: 50.6 },
- { title: "DD19070048", radio: 89 },
- { title: "DD19070049", radio: 100 },
- { title: "DD19070050", radio: 30 },
- ],
+ startIndex: 0,
+ time: 0,
};
},
- mounted() {},
- watch: {},
+ mounted() {
+ setInterval(() => {
+ this.startIndex += 4;
+ }, 5000);
+ },
+ computed: {
+ tableList: {
+ get() {
+ if (
+ this.startIndex > this.orderCompleteObject.orderCompleteList.length
+ ) {
+ this.startIndex = 0;
+ }
+ return this.orderCompleteObject.orderCompleteList.slice(
+ this.startIndex,
+ this.startIndex + 4
+ );
+ },
+ set(val) {
+ console.log(val);
+ },
+ },
+ },
+ watch: {
+ "orderCompleteObject.orderCompleteList"(val) {
+ console.log(val, "ssssssssss");
+ this.startIndex = this.orderCompleteObject.startIndex;
+ },
+ },
methods: {},
};
</script>
@@ -66,13 +99,16 @@
border-radius: 50px;
transition: all 1s ease-in-out 0s;
.left {
- width: 20%;
+ width: 23%;
margin: 0 10px;
color: #02f1fc;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.middle {
flex: 1;
- margin: 0 10px;
+ margin-right: 5px;
}
}
}
diff --git a/src/views/cockpitPage/components/WorkOrderProgress.vue b/src/views/cockpitPage/components/WorkOrderProgress.vue
index a2b870d..0763725 100644
--- a/src/views/cockpitPage/components/WorkOrderProgress.vue
+++ b/src/views/cockpitPage/components/WorkOrderProgress.vue
@@ -9,7 +9,12 @@
</div>
</div>
<div class="table-box">
- <el-table :data="tableData" style="width: 100%">
+ <el-table
+ ref="table"
+ :data="tableData"
+ style="width: 100%"
+ height="100%"
+ >
<el-table-column
prop="workOrderId"
label="宸ュ崟缂栧彿"
@@ -149,12 +154,130 @@
],
delayWarning: 0,
},
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "BA5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "BA5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
],
};
},
- mounted() {},
+ mounted() {
+ this.setAutoScroll();
+ },
watch: {},
- methods: {},
+ methods: {
+ // 瀹炵幇鑷姩婊氬姩鐨勬柟娉�
+ setAutoScroll() {
+ // 鎷垮埌琛ㄦ牸鎸傝浇鍚庣殑鐪熷疄DOM
+ const table = this.$refs.table;
+ // 鎷垮埌琛ㄦ牸涓壙杞芥暟鎹殑div鍏冪礌
+ const divData = table.bodyWrapper;
+ // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
+ setInterval(() => {
+ // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+ divData.scrollTop += 1;
+ // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
+ if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+ // 閲嶇疆table璺濈椤堕儴璺濈
+ divData.scrollTop = 0;
+ }
+ }, 200); // 婊氬姩閫熷害
+ },
+ },
};
</script>
@@ -192,6 +315,8 @@
}
.table-box {
padding: 20px 15px;
+ height: calc(100% - 75px);
+ overflow: hidden;
.progerss-bg {
width: 100%;
height: 22px;
@@ -251,6 +376,7 @@
// 淇敼琛ㄦ牸瀛椾綋棰滆壊
.el-table__body td {
color: #00ffff;
+ padding: 8px 0;
}
// 璁剧疆琛ㄦ牸鑳屾櫙閫忔槑
.el-table th {
@@ -285,5 +411,10 @@
.el-table::before {
display: none;
}
+ // 淇濈暀鍨傜洿婊氬姩涓旈殣钘忔粴鍔ㄦ潯
+ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 0px;
+ height: 0px;
+ }
}
</style>
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index 3c1db8c..715ee71 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -10,7 +10,9 @@
<CountView :total-object="totalObject"></CountView>
</template>
<template #leftBlock4>
- <OrderCompleteRadio></OrderCompleteRadio>
+ <OrderCompleteRadio
+ :order-complete-object="orderCompleteObject"
+ ></OrderCompleteRadio>
</template>
<template #leftBlock5>
<WorkOrderProgress></WorkOrderProgress>
@@ -69,13 +71,19 @@
],
// 宸︿腑鏁版嵁缁熻瀵硅薄
totalObject: {},
+ // 璁㈠崟瀹屾垚姣旂巼
+ orderCompleteObject: {
+ startIndex: 0,
+ orderCompleteList: [],
+ },
+ dataindex: 0,
};
},
mounted() {
this.getDashboard();
setInterval(() => {
this.getDashboard();
- }, 300000);
+ }, 10000);
},
watch: {},
methods: {
@@ -86,6 +94,8 @@
this.setLeftBlock1(res.data);
// 宸︿腑鏁版嵁缁熻鍊�
this.setLeftBlock3(res.data);
+ // 璁㈠崟瀹屾垚姣旂巼
+ this.setLeftBlock4(res.data);
});
},
// 澶勭悊宸︿笂鏁版嵁
@@ -124,6 +134,48 @@
RealProductionAmount: data?.RealProductionAmount ?? 0,
};
},
+ // 璁㈠崟瀹屾垚姣旂巼
+ setLeftBlock4(data) {
+ this.orderCompleteObject.startIndex = 0;
+ // 姝ゅ鍚庨潰浼氭浛鎹㈡垚鐪熷疄鍚庣杩斿洖鏁版嵁
+ if (this.dataindex == 1) {
+ this.orderCompleteObject.orderCompleteList = [
+ { title: "SSSSDD19070047", radio: 20.6 },
+ { title: "SDD19070048", radio: 79 },
+ { title: "SDD19070049", radio: 100 },
+ { title: "SDD19070050", radio: 30 },
+ { title: "DD19070047", radio: 20.6 },
+ { title: "DD19070048", radio: 49 },
+ { title: "DD19070049", radio: 60 },
+ { title: "SSDD19070050", radio: 10 },
+ { title: "SDD19070047", radio: 33.6 },
+ { title: "DD19070048", radio: 69 },
+ { title: "SDD19070049", radio: 70 },
+ { title: "DD19070050", radio: 20 },
+ { title: "SDD19070047", radio: 66.6 },
+ { title: "DD19070048", radio: 46 },
+ ];
+ this.dataindex = 0;
+ } else {
+ this.orderCompleteObject.orderCompleteList = [
+ { title: "fffffDD19070047", radio: 50.6 },
+ { title: "DD19070043", radio: 89 },
+ { title: "DD15566649", radio: 100 },
+ { title: "ASD5555550", radio: 30 },
+ { title: "DD19070047", radio: 30.6 },
+ { title: "DD19070048", radio: 49 },
+ { title: "DD19070049", radio: 60 },
+ { title: "DD19070050", radio: 10 },
+ { title: "DD19070047", radio: 33.6 },
+ { title: "DD19070048", radio: 69 },
+ { title: "DD19070049", radio: 70 },
+ { title: "DD19070050", radio: 20 },
+ { title: "DD19070047", radio: 66.6 },
+ { title: "DD19070048", radio: 96 },
+ ];
+ this.dataindex = 1;
+ }
+ },
},
};
</script>
--
Gitblit v1.8.0