添加 首页月历的每天的任务分布情况

src/api/user.js

@@ -66,3 +66,19 @@ export function IsExistMyMessage_NotRead(data) {
     data
   });
 }
+
+/**
+ * 得到我的任务每日分布（用于主页显示）
+ * @param {Object} month_stamp 月份
+ * @returns
+ */
+export function GetMyTaskDailyDistribution(data) {
+  let params = getRequestParams('cominfo_query-task_query-GetMyTaskDailyDistribution');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}

src/icons/svg/check-mark-small.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.62804 2.62204C8.79076 2.78476 8.79076 3.04858 8.62804 3.21129L4.46138 7.37796C4.29866 7.54068 4.03484 7.54068 3.87212 7.37796L1.78879 5.29463C1.62607 5.13191 1.62607 4.86809 1.78879 4.70537C1.95151 4.54265 2.21532 4.54265 2.37804 4.70537L4.16675 6.49408L8.03879 2.62204C8.20151 2.45932 8.46532 2.45932 8.62804 2.62204Z" fill="currentColor" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/views/main/components/MonthlyCalendar.vue

@@ -2,7 +2,7 @@
   <div class="monthly-calendar">
     <div class="monthly-calendar-top">
       <svg-icon icon-class="calendar" class-name="svg-normal" />
-      <span class="date">{{ curYear }}{{ time_unit === DAY ? `-${curMonth}` : '' }}</span>
+      <span class="date" v-text="`${curYear}${time_unit === DAY ? `-${curMonth}` : ''}`" />
       <i class="el-icon-arrow-left" @click="changeDate('pre')" />
       <span class="today-dot" @click="backToday" />
       <i class="el-icon-arrow-right" @click="changeDate('next')" />
@@ -19,16 +19,30 @@
           {{ name }}
         </div>
         <div
-          v-for="{ day, isCurMonth, key, isToday } in dateArr"
+          v-for="{ month, day, isCurMonth, key, isToday } in dateArr"
           :key="key"
           :style="{ color: isCurMonth ? '' : '#A5A5A5' }"
           class="date"
         >
           <div
-            :class="['date-wrapper', isToday ? 'today' : '', isCurMonth && focusDate === day ? 'active' : '']"
+            :class="[
+              'date-wrapper',
+              isToday ? 'today' : '',
+              isCurMonth ? 'cur-month' : '',
+              isCurMonth && focusDate === day ? 'active' : '',
+              `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}` in taskDailyDistribution
+                ? taskDailyClass.get(
+                  taskDailyDistribution[`${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`]
+                )
+                : ''
+            ]"
             @click="selectDate(day, isCurMonth)"
           >
-            {{ day }}
+            <span>{{ day }}</span>
+            <svg-icon
+              v-if="taskDailyDistribution[`${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`] === 2"
+              icon-class="check-mark-small"
+            />
           </div>
         </div>
       </template>
@@ -65,6 +79,7 @@
 <script>
 import dayjs from 'dayjs';
 import { weekList, modeList, monthList } from './calendarData';
+import { GetMyTaskDailyDistribution } from '@/api/user';
 
 export default {
   data() {
@@ -81,7 +96,14 @@ export default {
       DAY: modeList[0].type,
       MONTH: modeList[1].type,
       modeList,
-      calendarStyle: ''
+      calendarStyle: '',
+      // 任务每日分布
+      taskDailyDistribution: {},
+      taskDailyClass: new Map([
+        [0, ''],
+        [1, 'has-task'],
+        [2, 'task-completed']
+      ])
     };
   },
   watch: {
@@ -101,6 +123,13 @@ export default {
       this.curYear = arr[0];
       this.curMonth = arr[1];
       this.focusMonth = arr[1] - 1;
+      GetMyTaskDailyDistribution({ month_stamp: newVal }).then(({ status, ...data }) => {
+        let taskDailyArr = {};
+        for (const [key, value] of Object.entries(data)) {
+          taskDailyArr[key.slice(5)] = value;
+        }
+        if (status === 1) this.taskDailyDistribution = taskDailyArr;
+      });
     }
   },
   created() {
@@ -109,6 +138,7 @@ export default {
     this.focusDate = new Date().getDate();
   },
   methods: {
+    // 返回今天
     backToday() {
       this.date = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`;
       this.focusDate = new Date().getDate();
@@ -174,6 +204,7 @@ export default {
       for (let i = 0; i < dayOfWeek; i++) {
         arr[i] = {
           key: `last-${i}`,
+          month: (curMonth === 0 ? 11 : curMonth - 1) + 1,
           day: lastDays - dayOfWeek + i + 1,
           isCurMonth: false,
           isToday: false
@@ -183,6 +214,7 @@ export default {
       for (let j = 1; j <= daysInMonth; j++) {
         arr[j + dayOfWeek - 1] = {
           key: `cur-${j}`,
+          month: curMonth + 1,
           day: j,
           isCurMonth: true,
           isToday: j === curDate && isThisMonth
@@ -197,6 +229,7 @@ export default {
         for (let k = 1; k <= 35 - (dayOfWeek + daysInMonth); k++) {
           arr.push({
             key: `next-${k}`,
+            month: (curMonth === 11 ? 1 : curMonth + 1) + 1,
             day: k,
             isCurMonth: false,
             isToday: false
@@ -209,6 +242,7 @@ export default {
         for (let k = 1; k <= 42 - (dayOfWeek + daysInMonth); k++) {
           arr.push({
             key: `next-${k}`,
+            month: (curMonth === 11 ? 1 : curMonth + 1) + 1,
             day: k,
             isCurMonth: false
           });
@@ -268,6 +302,9 @@ export default {
       cursor: pointer;
 
       &-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         width: 40px;
         min-height: 40px;
         margin: 0 auto;
@@ -277,7 +314,6 @@ export default {
         &.today {
           color: $basic-color;
           background-color: var(--basic-color);
-          border: 1px solid $basic-color;
         }
 
         &:hover {
@@ -288,6 +324,42 @@ export default {
           color: #fff;
           background-color: $basic-color;
         }
+
+        &.has-task::after {
+          display: inline-block;
+          width: 4px;
+          height: 4px;
+          margin-top: -4px;
+          margin-bottom: 12px;
+          content: '';
+          background-color: #a5a5a5;
+          border-radius: 50%;
+        }
+
+        &.cur-month.has-task::after {
+          background-color: $basic-color;
+        }
+
+        &.has-task.active::after {
+          background-color: #fff;
+        }
+
+        &.task-completed {
+          .svg-icon {
+            width: 10px;
+            height: 10px;
+            margin-top: -6px;
+            margin-bottom: 8px;
+          }
+
+          &.cur-month .svg-icon {
+            color: #00cd8f;
+          }
+
+          &.active .svg-icon {
+            color: #fff;
+          }
+        }
       }
     }