From 14101bd42ce17dfb9d951d0738abe9d303fb3fe5 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期一, 11 十二月 2023 10:41:39 +0800 Subject: [PATCH] 机器开机率、人员技能比饼图优化 --- src/views/cockpitPage/components/WorkOrderProgress.vue | 231 ++++++++++++--------------------------------------------- 1 files changed, 49 insertions(+), 182 deletions(-) diff --git a/src/views/cockpitPage/components/WorkOrderProgress.vue b/src/views/cockpitPage/components/WorkOrderProgress.vue index 0763725..9553515 100644 --- a/src/views/cockpitPage/components/WorkOrderProgress.vue +++ b/src/views/cockpitPage/components/WorkOrderProgress.vue @@ -5,7 +5,7 @@ <img src="/cockpitPage/work-order-top.png" alt="" /> <div class="top-title"> <span>宸ュ崟杩涘害缁熻</span> - <span class="top-rate">{{ "60%" }}</span> + <span class="top-rate">{{ workOrderFinishRate + "%" }}</span> </div> </div> <div class="table-box"> @@ -16,46 +16,47 @@ height="100%" > <el-table-column - prop="workOrderId" + prop="Number" label="宸ュ崟缂栧彿" align="center" show-overflow-tooltip > </el-table-column> <el-table-column - prop="product" + prop="Product" label="浜у搧" align="center" + min-width="100" show-overflow-tooltip > </el-table-column> <el-table-column - prop="productSpecs" + prop="Scale" label="浜у搧瑙勬牸" align="center" show-overflow-tooltip > </el-table-column> <el-table-column - prop="amount" + prop="Amount" label="鐢熶骇鏁伴噺" align="center" show-overflow-tooltip > </el-table-column> <el-table-column - prop="planTime" + prop="PlanTime" label="璁″垝鏃堕棿" align="center" min-width="100" show-overflow-tooltip > </el-table-column> - <el-table-column label="瀹屾垚杩涘害" align="center" min-width="160"> + <el-table-column label="瀹屾垚杩涘害" align="center" min-width="130"> <template slot-scope="scope"> <div class="progerss-bg"> <div - v-for="item in scope.row.completeProgerss" + v-for="(item, index) in scope.row.completeProgerss" class="progerss" :class=" item.status == 1 @@ -71,11 +72,20 @@ </div> </template> </el-table-column> - <el-table-column label="寤舵湡棰勮" align="center"> + <el-table-column label="寤舵湡棰勮" align="center" width="90"> <template slot-scope="scope"> - <div v-show="scope.row.delayWarning > 0" class="round-view"> - <div class="round"></div> - <div class="title">{{ scope.row.delayWarning + "澶�" }}</div> + <div v-show="scope.row.DelayDays > 0" class="round-view"> + <div class="round red-bg"></div> + <div class="title red-color"> + {{ scope.row.DelayDays > 10 ? ">10" : scope.row.DelayDays + }}{{ "澶�" }} + </div> + </div> + <div v-show="scope.row.DelayDays < 0" class="round-view"> + <div class="round green-bg"></div> + <div class="title green-color"> + {{ Math.abs(scope.row.DelayDays) + "澶�" }} + </div> </div> </template> </el-table-column> @@ -88,172 +98,18 @@ <script> export default { components: {}, - props: {}, + props: { + tableData: { + type: Array, + default: () => [], + }, + workOrderFinishRate: { + type: String, + default: "", + }, + }, data() { - return { - tableData: [ - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 3, - }, - { - 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: 1 }, - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 2, - }, - { - 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: "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, - }, - ], - }; + return {}; }, mounted() { this.setAutoScroll(); @@ -344,14 +200,25 @@ .round-view { display: flex; justify-content: center; - color: #ff0000; + align-items: center; .round { - width: 22px; - height: 22px; - border-radius: 11px; - background: #ff0000; + width: 16px; + height: 16px; + border-radius: 8px; margin-right: 5px; } + .red-bg { + background: #ff0000; + } + .green-bg { + background: #00cc00; + } + .red-color { + color: #ff0000; + } + .green-color { + color: #00cc00; + } } } } -- Gitblit v1.8.0