Browse Source

修改工作日历的逻辑

695593266@qq.com 23 hours ago
parent
commit
34d970f0eb

+ 9 - 7
src/views/factoryCalendar/components/MultiCalendarView.vue

@@ -102,13 +102,15 @@
             >
               <div class="day-head">
                 <span>{{ day.dayText }}</span>
-                <el-tag v-if="day.isHoliday" size="mini" class="holiday-tag">
-                  节假日
-                </el-tag>
-                <i
-                  v-else-if="day.isTempAdjust"
-                  class="el-icon-refresh temp-icon"
-                />
+                <div class="day-markers">
+                  <el-tag v-if="day.isHoliday" size="mini" class="holiday-tag">
+                    节假日
+                  </el-tag>
+                  <span v-if="day.isTempAdjust" class="temp-badge">
+                    <i class="el-icon-refresh" />
+                    临调
+                  </span>
+                </div>
               </div>
               <div class="day-body">
                 <span

+ 33 - 3
src/views/factoryCalendar/components/factoryCalendar.scss

@@ -591,7 +591,9 @@
       }
 
       &.temp {
-        background: #f5efff;
+        background:
+          linear-gradient(135deg, rgba(146, 84, 222, 0.1), transparent 45%),
+          #faf7ff;
 
         &::before {
           background: #9254de;
@@ -614,6 +616,7 @@
       align-items: center;
       justify-content: space-between;
       min-height: 20px;
+      gap: 6px;
     }
 
     .day-head span {
@@ -621,8 +624,30 @@
       color: #303133;
     }
 
-    .temp-icon {
-      color: #9254de;
+    .day-markers {
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .temp-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      border: 1px solid rgba(146, 84, 222, 0.28);
+      background: linear-gradient(180deg, #fbf7ff, #f0e7ff);
+      color: #6f3cc3;
+      font-weight: 600;
+      white-space: nowrap;
+      height: 20px;
+      padding: 0 6px;
+      border-radius: 10px;
+      font-size: 12px;
+      line-height: 18px;
+      box-shadow: 0 4px 10px rgba(146, 84, 222, 0.12);
     }
 
     .holiday-tag {
@@ -657,8 +682,13 @@
     }
 
     .conflict-text {
+      display: inline-flex;
+      align-items: center;
+      height: 20px;
+      padding: 0 2px;
       color: #f56c6c;
       font-weight: 600;
+      line-height: 18px;
     }
 
     .legend-panel {

+ 97 - 83
src/views/factoryCalendar/index.vue

@@ -441,9 +441,9 @@
                 </div>
                 <el-tag
                   size="mini"
-                  :type="detail.scheduleStatus ? 'success' : 'info'"
+                  :type="getDetailScheduleStatus(detail) ? 'success' : 'info'"
                 >
-                  {{ detail.scheduleStatus ? '已排班' : '未排班' }}
+                  {{ getDetailScheduleStatus(detail) ? '已排班' : '未排班' }}
                 </el-tag>
                 <div
                   v-if="
@@ -1359,41 +1359,7 @@
         return `${this.viewQuery.year}年${this.viewQuery.month}月 月视图`;
       },
       calendarDateRange() {
-        const current = dayjs(this.viewQuery.date);
-        if (this.viewQuery.viewType === 'day') {
-          return [current];
-        }
-        if (this.viewQuery.viewType === 'week') {
-          const start = current.startOf('week').add(1, 'day');
-          return Array.from({ length: 7 }).map((_, index) =>
-            start.add(index, 'day')
-          );
-        }
-        if (this.viewQuery.viewType === 'quarter') {
-          const startMonth = Math.floor((this.viewQuery.month - 1) / 3) * 3 + 1;
-          const start = dayjs(
-            `${this.viewQuery.year}-${String(startMonth).padStart(2, '0')}-01`
-          );
-          const dates = [];
-          for (let i = 0; i < 3; i += 1) {
-            const month = start.add(i, 'month');
-            for (let day = 1; day <= month.daysInMonth(); day += 1) {
-              dates.push(month.date(day));
-            }
-          }
-          return dates;
-        }
-        const firstDay = dayjs(
-          `${this.viewQuery.year}-${String(this.viewQuery.month).padStart(
-            2,
-            '0'
-          )}-01`
-        );
-        const dates = [];
-        for (let day = 1; day <= firstDay.daysInMonth(); day += 1) {
-          dates.push(firstDay.date(day));
-        }
-        return dates;
+        return this.getCalendarDateRangeByQuery(this.viewQuery);
       },
       calendarCells() {
         return this.buildCalendarCells(true);
@@ -1712,6 +1678,40 @@
       this.loadRemoteCalendarData();
     },
     methods: {
+      getCalendarDateRangeByQuery(query = this.viewQuery) {
+        const current = dayjs(query.date);
+        if (query.viewType === 'day') {
+          return [current];
+        }
+        if (query.viewType === 'week') {
+          const start = current.startOf('week').add(1, 'day');
+          return Array.from({ length: 7 }).map((_, index) =>
+            start.add(index, 'day')
+          );
+        }
+        if (query.viewType === 'quarter') {
+          const startMonth = Math.floor((query.month - 1) / 3) * 3 + 1;
+          const start = dayjs(
+            `${query.year}-${String(startMonth).padStart(2, '0')}-01`
+          );
+          const dates = [];
+          for (let i = 0; i < 3; i += 1) {
+            const month = start.add(i, 'month');
+            for (let day = 1; day <= month.daysInMonth(); day += 1) {
+              dates.push(month.date(day));
+            }
+          }
+          return dates;
+        }
+        const firstDay = dayjs(
+          `${query.year}-${String(query.month).padStart(2, '0')}-01`
+        );
+        const dates = [];
+        for (let day = 1; day <= firstDay.daysInMonth(); day += 1) {
+          dates.push(firstDay.date(day));
+        }
+        return dates;
+      },
       getDefaultCalendarForm() {
         return {
           id: '',
@@ -1794,10 +1794,7 @@
                 : dateItem.format('D'),
             details,
             planCount: disabled ? 0 : planCount,
-            scheduleStatus:
-              !disabled &&
-              (details.some((item) => item.scheduleStatus === 1) ||
-                planCount > 0),
+            scheduleStatus: !disabled && this.getDayScheduleStatus(details),
             isConflict:
               !disabled && details.some((item) => item.isConflict === 1),
             isTempAdjust:
@@ -1904,11 +1901,23 @@
           query.viewType || ''
         ].join('|');
       },
+      getRemoteViewQuery(query = this.viewQuery) {
+        const nextQuery = { ...query };
+        if (nextQuery.viewType === 'quarter') {
+          const quarterStartMonth =
+            Math.floor((Number(nextQuery.month) - 1) / 3) * 3 + 1;
+          nextQuery.month = quarterStartMonth;
+          nextQuery.date = `${nextQuery.year}-${String(
+            quarterStartMonth
+          ).padStart(2, '0')}-01`;
+        }
+        return nextQuery;
+      },
       async loadRemoteViewData(force = false, queryOverride = null) {
-        const query = {
+        const query = this.getRemoteViewQuery({
           ...this.viewQuery,
           ...(queryOverride || {})
-        };
+        });
         const dataKey = this.getViewDataKey(query);
         if (!force && this.viewDataKey === dataKey) {
           return;
@@ -1934,12 +1943,9 @@
             ...this.normalizeRemoteDetail(item),
             isViewDetail: true
           }));
-          const visibleDates =
-            queryOverride && query.viewType === 'month'
-              ? this.getMonthDateRange(query.year, query.month).map((item) =>
-                  item.format('YYYY-MM-DD')
-                )
-              : this.calendarDateRange.map((item) => item.format('YYYY-MM-DD'));
+          const visibleDates = this.getCalendarDateRangeByQuery(query).map(
+            (item) => item.format('YYYY-MM-DD')
+          );
           const viewCalendarIds = this.calendars
             .filter((item) => item.calendarType === query.calendarType)
             .map((item) => item.id);
@@ -3317,24 +3323,21 @@
         this.viewQuery.date = `${year}-${month}-01`;
         await this.refreshRemoteView();
       },
-      async changeViewType(type) {
-        if (type === 'quarter') {
-          const quarterStartMonth =
-            Math.floor((this.viewQuery.month - 1) / 3) * 3 + 1;
-          this.viewQuery.month = quarterStartMonth;
-          this.viewQuery.date = `${this.viewQuery.year}-${String(
-            quarterStartMonth
-          ).padStart(2, '0')}-01`;
-          this.viewMonth = `${this.viewQuery.year}-${String(
-            quarterStartMonth
-          ).padStart(2, '0')}`;
-          await this.refreshRemoteView();
-          return;
-        }
-        if (type === 'month') {
-          this.viewQuery.date = `${this.viewQuery.year}-${String(
-            this.viewQuery.month
-          ).padStart(2, '0')}-01`;
+      async changeViewType() {
+        const currentDate = dayjs(this.viewQuery.date);
+        const normalizedDate = currentDate.isValid()
+          ? currentDate
+          : dayjs(
+              `${this.viewQuery.year}-${String(this.viewQuery.month).padStart(
+                2,
+                '0'
+              )}-01`
+            );
+        if (normalizedDate.isValid()) {
+          this.viewQuery.year = Number(normalizedDate.format('YYYY'));
+          this.viewQuery.month = Number(normalizedDate.format('M'));
+          this.viewQuery.date = normalizedDate.format('YYYY-MM-DD');
+          this.viewMonth = normalizedDate.format('YYYY-MM');
         }
         await this.refreshRemoteView();
       },
@@ -3404,6 +3407,16 @@
           this.getDetailRelatedPlans([item]).length > 0
         );
       },
+      getDayScheduleStatus(details = []) {
+        return details.some((item) => this.isDetailScheduled(item));
+      },
+      getDetailScheduleStatus(detail = {}) {
+        return (
+          this.isDetailScheduled(detail) ||
+          !!this.currentDay.scheduleStatus ||
+          Number(this.currentDay.planCount || 0) > 0
+        );
+      },
       isWeekend(date) {
         const week = dayjs(date).day();
         return week === 0 || week === 6;
@@ -3445,25 +3458,25 @@
         if (day.hiddenByFilter) {
           return ['muted'];
         }
+        const classes = [];
         if (day.isConflict) {
-          return ['conflict'];
+          classes.push('conflict');
         }
         if (day.isTempAdjust) {
-          return ['temp'];
+          classes.push('temp');
         }
         if (day.isMaintenance) {
-          return ['maintenance'];
-        }
-        if (day.isHoliday) {
-          return ['holiday'];
-        }
-        if (day.isRest) {
-          return ['rest'];
-        }
-        if (day.scheduleStatus) {
-          return ['scheduled'];
+          classes.push('maintenance');
+        } else if (day.isHoliday) {
+          classes.push('holiday');
+        } else if (day.isRest) {
+          classes.push('rest');
+        } else if (day.scheduleStatus) {
+          classes.push('scheduled');
+        } else {
+          classes.push('idle');
         }
-        return ['idle'];
+        return classes;
       },
       getDateTypeText(day) {
         if (!day.date) {
@@ -3601,7 +3614,8 @@
           ...day,
           details,
           relatedPlans,
-          planCount: this.getDetailPlanCount(details)
+          planCount: this.getDetailPlanCount(details),
+          scheduleStatus: this.getDayScheduleStatus(details)
         };
         this.dayDrawerVisible = true;
       },
@@ -3823,7 +3837,7 @@
             details,
             relatedPlans,
             planCount: this.getDetailPlanCount(details),
-            scheduleStatus: !!status
+            scheduleStatus: this.getDayScheduleStatus(details)
           };
           this.reloadPlanTable(1);
           this.invalidateConflictCache();
@@ -4159,7 +4173,7 @@
             details,
             relatedPlans,
             planCount: this.getDetailPlanCount(details),
-            scheduleStatus: details.some((item) => item.scheduleStatus === 1),
+            scheduleStatus: this.getDayScheduleStatus(details),
             isConflict: details.some((item) => item.isConflict === 1),
             isTempAdjust: details.some((item) => item.isTempAdjust === 1),
             isMaintenance: details.some((item) => item.dateType === 4),

+ 2 - 2
vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
         // target: 'http://192.168.1.3:18086',
         // target: 'http://192.168.1.158:18086',
         // target: 'http://192.168.1.176:18086',
-        target: 'http://192.168.1.125:18086',
+        // target: 'http://192.168.1.125:18086',
         // target: 'http://192.168.1.251:51005',
         // target: 'http://192.168.1.251:18186',
         // target: 'http://192.168.1.251:18086',
@@ -47,7 +47,7 @@ module.exports = {
         // target: 'http://192.168.1.125:18086',
         // target: 'http://192.168.1.11:18086', // 开发
         // target: 'http://192.168.1.116:18086', // 赵沙金
-        // target: 'http://aiot.zoomwin.com.cn:51001/api',
+        target: 'http://aiot.zoomwin.com.cn:51001/api',
         // target: 'http://f222326r53.imwork.net',
         // target: 'http://aiot.zoomwin.com.cn:51005/api',