From ddc598194b06cea3d7a335d6e93a50baf81b7f90 Mon Sep 17 00:00:00 2001
From: 86134 <aa>
Date: 星期六, 18 十一月 2023 14:17:23 +0800
Subject: [PATCH] 11
---
src/views/product/workbench/operation-task-pane.vue | 107 ++++++++++++++++++++++++-----------------------------
1 files changed, 49 insertions(+), 58 deletions(-)
diff --git a/src/views/product/workbench/operation-task-pane.vue b/src/views/product/workbench/operation-task-pane.vue
index 50c7b63..badea28 100644
--- a/src/views/product/workbench/operation-task-pane.vue
+++ b/src/views/product/workbench/operation-task-pane.vue
@@ -8,11 +8,13 @@
>
</el-alert>
<el-card
+
v-for="(item, index) in operationTasks"
@click.native="setCheckFlag(item)"
shadow="hover"
:key="index"
:class="['task-item', item.checkFlag ? 'card-checked' : 'card-unchecked']"
+ :style="{ backgroundColor: getBackgroundColor(item.planFinishDay) }"
>
<!-- <img class="selectedImg" /> -->
<div class="header" >
@@ -58,25 +60,10 @@
</div> -->
<div class="row">
<div class="l">璁″垝瀹屾垚鏃堕棿锛�</div>
- <div class="r">{{ item.planFinishDay }}</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>
@@ -105,28 +92,28 @@
&.card-checked {
// color: white;
- background-image: -webkit-linear-gradient(
- 90deg,
- rgba(12, 149, 255, 0.7) 0%,
- rgba(38, 176, 254, 0.8) 34%,
- rgba(12, 149, 255, 0.8) 100%
- ),
- -webkit-linear-gradient(#5a97fa, #5a97fa);
- background-image: -moz-linear-gradient(
- 90deg,
- rgba(12, 149, 255, 0.7) 0%,
- rgba(38, 176, 254, 0.8) 34%,
- rgba(12, 149, 255, 0.8) 100%
- ),
- -moz-linear-gradient(#5a97fa, #5a97fa);
- background-image: linear-gradient(
- 90deg,
- rgba(12, 149, 255, 0.7) 0%,
- rgba(38, 176, 254, 0.8) 34%,
- rgba(12, 149, 255, 0.8) 100%
- ),
- linear-gradient(#5a97fa, #5a97fa);
- background-blend-mode: normal, normal;
+ // background-image: -webkit-linear-gradient(
+ // 90deg,
+ // rgba(12, 149, 255, 0.7) 0%,
+ // rgba(38, 176, 254, 0.8) 34%,
+ // rgba(12, 149, 255, 0.8) 100%
+ // ),
+ // -webkit-linear-gradient(#5a97fa, #5a97fa);
+ // background-image: -moz-linear-gradient(
+ // 90deg,
+ // rgba(12, 149, 255, 0.7) 0%,
+ // rgba(38, 176, 254, 0.8) 34%,
+ // rgba(12, 149, 255, 0.8) 100%
+ // ),
+ // -moz-linear-gradient(#5a97fa, #5a97fa);
+ // background-image: linear-gradient(
+ // 90deg,
+ // rgba(12, 149, 255, 0.7) 0%,
+ // rgba(38, 176, 254, 0.8) 34%,
+ // rgba(12, 149, 255, 0.8) 100%
+ // ),
+ // linear-gradient(#5a97fa, #5a97fa);
+ // background-blend-mode: normal, normal;
}
.selectedImg {
position: absolute;
@@ -347,28 +334,32 @@
}
},
methods: {
+ getBackgroundColor(planFinishDay) {
+ const currentDate = new Date();
+ currentDate.setHours(0, 0, 0, 0); // 璁剧疆鏃堕棿涓哄綋澶╃殑寮�濮嬶紝蹇界暐鏃跺垎绉掓绉�
+ const planFinishDayObj = new Date(planFinishDay);
+ planFinishDayObj.setHours(0, 0, 0, 0); // 鍚屾牱璁剧疆鏃堕棿涓鸿鍒掑畬鎴愭棩鐨勫紑濮�
- // 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);
+ if (planFinishDayObj < currentDate) {
+ // 濡傛灉璁″垝瀹屾垚鏃ュ湪褰撳墠鏃ヤ箣鍓嶏紝杩斿洖'blue'琛ㄧず杩囨湡
+ return 'red';
+ } else {
+ const timeDifference = currentDate - planFinishDayObj;
+ const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
- // if (date <= threeDaysAgo) {
- // document.body.style.backgroundColor = "blue";
- // } else if (date <= oneDayAgo) {
- // document.body.style.backgroundColor = "yellow";
- // } else {
- // document.body.style.backgroundColor = "red";
- // }
- // },
-
+ if (daysDifference < 0) {
+ // 濡傛灉璁″垝瀹屾垚鏃ュ湪鏈潵锛岃绠楀畠鏄惁鍦�10澶╁唴
+ const daysUntilDue = Math.abs(daysDifference);
+ if (daysUntilDue <= 10) {
+ // 濡傛灉鍦�10澶╁唴锛岃繑鍥�'yellow'琛ㄧず鍗冲皢鍒版湡
+ return 'yellow';
+ }
+ }
+ }
+ // 濡傛灉涓嶆槸鍗冲皢鍒版湡鎴栧凡杩囨湡锛岃繑鍥�'red'琛ㄧず宸插埌鏈�
+ return 'blue';
+},
+
// 鐐瑰嚮宸ュ崟锛岄�変腑宸ュ崟
setCheckFlag(item) {
if (item.checkFlag) {
--
Gitblit v1.9.3