From 8b8c05d36567e18230604d48558df6daff9bccc8 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期二, 05 十二月 2023 19:14:44 +0800 Subject: [PATCH] 人员技能饼图优化 --- src/views/cockpitPage/components/WorkOrderProgress.vue | 220 ++++++++++-------------------------------------------- 1 files changed, 43 insertions(+), 177 deletions(-) diff --git a/src/views/cockpitPage/components/WorkOrderProgress.vue b/src/views/cockpitPage/components/WorkOrderProgress.vue index 0763725..b10bdab 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,35 +16,35 @@ 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" 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" @@ -55,7 +55,7 @@ <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 @@ -73,9 +73,17 @@ </el-table-column> <el-table-column label="寤舵湡棰勮" align="center"> <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 + "澶�" }} + </div> + </div> + <div v-show="scope.row.DelayDays < 0" class="round-view"> + <div class="round green-bg"></div> + <div class="title green-color"> + {{ scope.row.DelayDays + "澶�" }} + </div> </div> </template> </el-table-column> @@ -88,172 +96,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 +198,26 @@ .round-view { display: flex; justify-content: center; - color: #ff0000; + .round { width: 22px; height: 22px; border-radius: 11px; - background: #ff0000; + margin-right: 5px; } + .red-bg { + background: #ff0000; + } + .green-bg { + background: #00cc00; + } + .red-color { + color: #ff0000; + } + .green-color { + color: #00cc00; + } } } } -- Gitblit v1.8.0