From 711f1644225a5ff10afa24dec8cafb1eb5343e6a Mon Sep 17 00:00:00 2001 From: 王震 <10952869+daywangzhen@user.noreply.gitee.com> Date: 星期三, 22 十一月 2023 10:13:14 +0800 Subject: [PATCH] Merge branch 'master' of http://114.132.189.42:9002/r/mes-ocea-before --- src/views/product/workbench/operation-task-pane.vue | 231 +++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 141 insertions(+), 90 deletions(-) diff --git a/src/views/product/workbench/operation-task-pane.vue b/src/views/product/workbench/operation-task-pane.vue index 50c7b63..ad56dea 100644 --- a/src/views/product/workbench/operation-task-pane.vue +++ b/src/views/product/workbench/operation-task-pane.vue @@ -1,6 +1,6 @@ <template> <div> - <el-alert + <el-alert v-if="!operationTasks || operationTasks.length == 0" title="杩樻病鏈夊伐鍗曚笅鍙戝埌姝ゆ満鍙帮紒" type="warning" @@ -9,75 +9,87 @@ </el-alert> <el-card v-for="(item, index) in operationTasks" - @click.native="setCheckFlag(item)" + @click.native="setCheckFlag(item)" shadow="hover" :key="index" :class="['task-item', item.checkFlag ? 'card-checked' : 'card-unchecked']" -> - <!-- <img class="selectedImg" /> --> - <div class="header" > - <div>宸ュ崟鍙凤細{{ item.taskNo }}</div> - <!-- <div>璁″垝鍙凤細{{ item.mpsNo }}</div> --> - <div - :class="[ - 'status-change-div', - item.checkFlag ? 'card-checked-status' : 'card-status' - ]" - > - <el-select - v-if="permissions.product_operationTask_state" - v-model="item.statusAction" - placeholder="鍔熻兘鑿滃崟" - @change=" - changeTaskState(item.statusAction, item.status, item.id, item) - " - > - <el-option - v-for="ele in statusActions" - :key="ele.value" - :label="ele.label" - :value="ele.value" - :disabled="ele.disabled" - > - </el-option> - </el-select> - </div> - </div> - <div class="body"> - <div class="row"> - <div class="l">闆朵欢鍚嶇О锛�</div> - <div class="r">{{ item.partName }}</div> - </div> - <div class="row"> - <div class="l">闆朵欢鍙凤細</div> - <div class="r">{{ item.partNo }}</div> - </div> - <!-- <div class="row"> - <div class="l">鎴愬搧锛�</div> - <div class="r">{{ item.productName }}</div> - </div> --> - <div class="row"> - <div class="l">璁″垝瀹屾垚鏃堕棿锛�</div> - <div class="r">{{ item.planFinishDay }}</div> - </div> - </div> - <el-progress - class="task-progress" - :text-inside="true" - :stroke-width="20" - :percentage=" - Number((item.completedQuantity / item.plannedQuantity).toFixed(2)) * - 100 > - 100 - ? 100 - : Number( - (item.completedQuantity / item.plannedQuantity).toFixed(2) - ) * 100 - " - :format="formatPercentage(item.completedQuantity, item.plannedQuantity)" - ></el-progress> -</el-card> +> + <img class="selectedImg" src="/img/workbench/icon_selected.png" /> + <div class="header"> + <div>宸ュ崟鍙凤細{{ item.taskNo }}</div> + <!-- <div class="tag" :style="{ backgroundColor: getTagColor(item.planFinishDay) }"> + {{ getTagText(item.planFinishDay) }} + </div> --> + <el-alert + center + style="width: 80px;height:30px;line-height: 30px;" + :title="getTagText(item.planFinishDay)" + :type="getTagColor(item.planFinishDay)" + effect="dark" + :closable="false"> + </el-alert> + <!-- <div>璁″垝鍙凤細{{ item.mpsNo }}</div> --> + <div + :class="[ + 'status-change-div', + item.checkFlag ? 'card-checked-status' : 'card-status' + ]" + > + <el-select + v-if="permissions.product_operationTask_state" + v-model="item.statusAction" + placeholder="鍔熻兘鑿滃崟" + @change=" + changeTaskState(item.statusAction, item.status, item.id, item) + " + > + <el-option + v-for="ele in statusActions" + :key="ele.value" + :label="ele.label" + :value="ele.value" + :disabled="ele.disabled" + > + </el-option> + </el-select> + </div> + </div> + <div class="body"> + <div class="row"> + <div class="l">闆朵欢鍚嶇О锛�</div> + <div class="r">{{ item.partName }}</div> + </div> + <div class="row"> + <div class="l">闆朵欢鍙凤細</div> + <div class="r">{{ item.partNo }}</div> + </div> + <!-- <div class="row"> + <div class="l">鎴愬搧锛�</div> + <div class="r">{{ item.productName }}</div> + </div> --> + <div class="row"> + <div class="l">璁″垝瀹屾垚鏃堕棿锛�</div> + <div class="r">{{ item.planFinishDay }}</div> + </div> + </div> + + <el-progress + class="task-progress" + :text-inside="true" + :stroke-width="20" + :percentage=" + Number((item.completedQuantity / item.plannedQuantity).toFixed(2)) * + 100 > + 100 + ? 100 + : Number( + (item.completedQuantity / item.plannedQuantity).toFixed(2) + ) * 100 + " + :format="formatPercentage(item.completedQuantity, item.plannedQuantity)" + ></el-progress> + </el-card> </div> </template> <style lang="scss" scoped> @@ -91,18 +103,28 @@ flex-direction: column; align-items: center; } + +.tag{ +width: 80px; +height: 30px; +line-height: 30px; +border-radius:15% ; +text-align: center; +font-size:8px; +color:white; +align-content: 30px; +} + + .task-item { width: 100%; border-radius: 12px; cursor: pointer; position: relative; -background:none; box-shadow: 1px 2px 24px 1px rgba(4, 0, 0, 0.14); - & + .task-item { margin-top: 10px; } - &.card-checked { // color: white; background-image: -webkit-linear-gradient( @@ -327,7 +349,7 @@ } }, computed: { - ...mapGetters(['permissions']) + ...mapGetters(['permissions']), }, created() { if (!this.defaultOperationId) { @@ -348,27 +370,56 @@ }, methods: { - // setCheckFlag(item) { - // this.$nextTick(() => { - // this.changeBackgroundColor(item.planFinishDay); - // }); - // }, - // changeBackgroundColor(dateString) { - // const date = new Date(dateString); - // const threeDaysAgo = new Date(); - // threeDaysAgo.setDate(threeDaysAgo.getDate() - 3); - // const oneDayAgo = new Date(); - // oneDayAgo.setDate(oneDayAgo.getDate() - 1); +// getBackgroundColor(planFinishDay) { +// const today = new Date(); +// const planDate = new Date(planFinishDay); +// if (planDate < today) { +// return 'rgba( 255,0,0,1)'; // 瓒呮湡涓虹孩鑹� +// } else { +// const timeDiff = planDate.getTime() - today.getTime(); +// const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)); +// if (daysDiff <= 3) { +// return 'rgba(255,204,62, 1)'; // 涓存湡涓洪粍鑹� +// } else { +// return 'rgba(86,219, 25,1)'; // 姝e父涓虹豢鑹� +// } +// } +// }, - // if (date <= threeDaysAgo) { - // document.body.style.backgroundColor = "blue"; - // } else if (date <= oneDayAgo) { - // document.body.style.backgroundColor = "yellow"; - // } else { - // document.body.style.backgroundColor = "red"; - // } - // }, +getTagColor(planFinishDay) { + const today = new Date(); + const planDate = new Date(planFinishDay); + if (planDate < today) { + //return 'rgba( 255,0,0,1)'; // 瓒呮湡涓虹孩鑹� + return 'error'; // 瓒呮湡涓虹孩鑹� + } else { + const timeDiff = planDate.getTime() - today.getTime(); + const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)); + if (daysDiff <= 3) { + //return 'rgba(255,204,62, 1)'; // 涓存湡涓洪粍鑹� + return 'warning'; // 涓存湡涓洪粍鑹� + } else { + //return 'rgba(86,219, 25,1)'; // 姝e父涓虹豢鑹� + return 'success'; // 姝e父涓虹豢鑹� + } + } +}, +getTagText(planFinishDay) { + const today = new Date(); + const planDate = new Date(planFinishDay); + if (planDate < today) { + return '瓒呮湡'; + } else { + const timeDiff = planDate.getTime() - today.getTime(); + const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)); + if (daysDiff <= 3) { + return '涓存湡'; + } else { + return '姝e父'; + } + } +}, // 鐐瑰嚮宸ュ崟锛岄�変腑宸ュ崟 setCheckFlag(item) { if (item.checkFlag) { @@ -677,7 +728,7 @@ break } } - console.log(this.operationTasks) + // console.log(this.operationTasks) // 鑻ュ綋鍓嶅伐鍗曞湪宸ュ崟鍒楄〃鏈鎵惧埌涓斿綋鍓嶅伐鍗曠姸鎬佷负宸插畬鎴愭垨宸插彇娑堟椂锛屽垯灏嗗綋鍓嶅伐鍗曢噸缃负绌哄苟鎶涘嚭浜嬩欢锛屽惁鍒欎笉绠� if (isResetCurrOpertionTaskFlag) { getOperationTaskById(taskId).then((res) => { -- Gitblit v1.9.3