任务管理

src/api/all/assignment-management.ts

@@ -0,0 +1,6 @@
+import Http from '@/api';
+
+// 获取用户自定义列
+export const getTaskSchedules = (params = {}) => {
+  return Http.get('/v1/media-accounts/task-schedules', params);
+};

src/router/routes/modules/propertyMarketing.ts

@@ -71,7 +71,18 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requireLogin: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/media-account/account-dashboard/index.vue'),  
+        component: () => import('@/views/property-marketing/media-account/account-dashboard/index.vue'),
+      },
+      {
+        path: 'management',
+        name: 'assignmentManagement',
+        meta: {
+          locale: '任务管理',
+          // requiresAuth: true,
+          // requireLogin: true,
+          // roles: ['*'],
+        },
+        component: () => import('@/views/property-marketing/assignment-management/index.vue'),
       },
       {
         path: 'detail/:id',
@@ -121,7 +132,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requireLogin: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/put-account/account-data/index.vue'), 
+        component: () => import('@/views/property-marketing/put-account/account-data/index.vue'),
       },
       {
         path: 'account-dashboard',

src/utils/DateUtils.ts

@@ -0,0 +1,430 @@
+/**
+ * 日期工具类
+ * 提供月维度和周维度的开始结束日期获取功能
+ * 周以星期日开始，星期六结束
+ * 只返回日期部分，不包含时间
+ */
+class DateUtils {
+  /**
+   * 获取当前时间的月开始日期和结束日期
+   * @returns 包含开始和结束日期的对象
+   */
+  static getMonthRange(): {
+    start: Date;
+    end: Date;
+    startFormatted: string;
+    endFormatted: string;
+  } {
+    const now = new Date();
+
+    // 月开始日期（当月第一天）
+    const start = new Date(now.getFullYear(), now.getMonth(), 1);
+    start.setHours(0, 0, 0, 0);
+
+    // 月结束日期（当月最后一天）
+    const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+    end.setHours(0, 0, 0, 0);
+
+    return {
+      start,
+      end,
+      startFormatted: this.formatDate(start),
+      endFormatted: this.formatDate(end),
+    };
+  }
+
+  /**
+   * 获取指定年份和月的范围
+   * @param year 年份
+   * @param month 月份（1-12）
+   */
+  static getMonthRangeByYearMonth(
+    year: number,
+    month: number,
+  ): {
+    start: Date;
+    end: Date;
+    startFormatted: string;
+    endFormatted: string;
+  } {
+    // 月开始日期
+    const start = new Date(year, month - 1, 1);
+    start.setHours(0, 0, 0, 0);
+
+    // 月结束日期
+    const end = new Date(year, month, 0);
+    end.setHours(0, 0, 0, 0);
+
+    return {
+      start,
+      end,
+      startFormatted: this.formatDate(start),
+      endFormatted: this.formatDate(end),
+    };
+  }
+
+  /**
+   * 获取当前时间的周范围（以星期日开始）
+   * @returns 包含开始和结束日期的对象
+   */
+  static getWeekRange(): {
+    start: Date;
+    end: Date;
+    startFormatted: string;
+    endFormatted: string;
+  } {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const dayOfWeek = today.getDay(); // 0是周日，1是周一，...，6是周六
+
+    // 周开始日期（周日）
+    const start = new Date(today);
+    start.setDate(today.getDate() - dayOfWeek);
+    start.setHours(0, 0, 0, 0);
+
+    // 周结束日期（周六）
+    const end = new Date(start);
+    end.setDate(start.getDate() + 6);
+    end.setHours(0, 0, 0, 0);
+
+    return {
+      start,
+      end,
+      startFormatted: this.formatDate(start),
+      endFormatted: this.formatDate(end),
+    };
+  }
+
+  /**
+   * 获取指定日期的周范围
+   * @param date 指定日期
+   */
+  static getWeekRangeByDate(date: Date): {
+    start: Date;
+    end: Date;
+    startFormatted: string;
+    endFormatted: string;
+  } {
+    const inputDate = new Date(date);
+    inputDate.setHours(0, 0, 0, 0);
+    const dayOfWeek = inputDate.getDay();
+
+    // 周开始日期（周日）
+    const start = new Date(inputDate);
+    start.setDate(inputDate.getDate() - dayOfWeek);
+    start.setHours(0, 0, 0, 0);
+
+    // 周结束日期（周六）
+    const end = new Date(start);
+    end.setDate(start.getDate() + 6);
+    end.setHours(0, 0, 0, 0);
+
+    return {
+      start,
+      end,
+      startFormatted: this.formatDate(start),
+      endFormatted: this.formatDate(end),
+    };
+  }
+
+  /**
+   * 格式化日期（只返回日期部分）
+   * @param date 日期对象
+   * @returns 格式化后的日期字符串 (YYYY-MM-DD)
+   */
+  static formatDate(date: Date): string {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+
+    return `${year}-${month}-${day}`;
+  }
+
+  /**
+   * 获取当前日期信息
+   * @returns 包含各种格式的当前日期信息
+   */
+  static getCurrentDateInfo() {
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+
+    const monthRange = this.getMonthRange();
+    const weekRange = this.getWeekRange();
+
+    return {
+      current: {
+        date: now,
+        formatted: this.formatDate(now),
+        dayOfWeek: this.getChineseDayOfWeek(now),
+      },
+      month: {
+        start: monthRange.start,
+        end: monthRange.end,
+        startFormatted: monthRange.startFormatted,
+        endFormatted: monthRange.endFormatted,
+        totalDays: this.getDaysInMonth(now.getFullYear(), now.getMonth() + 1),
+      },
+      week: {
+        start: weekRange.start,
+        end: weekRange.end,
+        startFormatted: weekRange.startFormatted,
+        endFormatted: weekRange.endFormatted,
+      },
+    };
+  }
+
+  /**
+   * 获取指定月份的天数
+   * @param year 年份
+   * @param month 月份（1-12）
+   * @returns 该月的天数
+   */
+  static getDaysInMonth(year: number, month: number): number {
+    return new Date(year, month, 0).getDate();
+  }
+
+  /**
+   * 获取中文星期几
+   * @param date 日期对象
+   * @returns 中文星期几
+   */
+  static getChineseDayOfWeek(date: Date): string {
+    const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+    return days[date.getDay()];
+  }
+
+  /**
+   * 获取中文月份名称
+   * @param month 月份（1-12）
+   * @returns 中文月份名称
+   */
+  static getChineseMonthName(month: number): string {
+    const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+    return months[month - 1] || '';
+  }
+
+  /**
+   * 判断是否为同一天
+   * @param date1 日期1
+   * @param date2 日期2
+   * @returns 是否为同一天
+   */
+  static isSameDay(date1: Date, date2: Date): boolean {
+    return this.formatDate(date1) === this.formatDate(date2);
+  }
+
+  /**
+   * 获取日期差（天数）
+   * @param date1 日期1
+   * @param date2 日期2
+   * @returns 相差的天数
+   */
+  static getDaysDifference(date1: Date, date2: Date): number {
+    const d1 = new Date(date1);
+    const d2 = new Date(date2);
+    d1.setHours(0, 0, 0, 0);
+    d2.setHours(0, 0, 0, 0);
+
+    const diffTime = Math.abs(d2.getTime() - d1.getTime());
+    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  }
+  /**
+   * 获取当前周的所有日期及星期几
+   * @param startDay 周起始日（0-6，0表示周日，默认1表示周一）
+   * @returns 当前周的日期数组
+   */
+  static getWeekDaysByDate(targetDate: Date, startDay: number = 1) {
+    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+    const currentDay = targetDate.getDay();
+    const firstDayOffset = (currentDay - startDay + 7) % 7;
+    const firstDayOfWeek = new Date(targetDate);
+    firstDayOfWeek.setDate(targetDate.getDate() - firstDayOffset);
+    return Array.from({ length: 7 }).map((_, i) => {
+      const date = new Date(firstDayOfWeek);
+      date.setDate(firstDayOfWeek.getDate() + i);
+      return {
+        date,
+        day: date.getDate(),
+        weekday: weekdays[date.getDay()] + ' ' + date.getDate(),
+        month: date.getMonth() + 1, // 添加月份信息（1-12）
+        year: date.getFullYear(),
+      };
+    });
+  }
+
+  // 获取某个月每一天的星期几
+  static getDaysAndWeekdays(year: number, month: number): Array<{ day: number; weekday: string }> {
+    const daysInMonth = new Date(year, month + 1, 0).getDate(); // 获取当月总天数
+    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; // 中文星期数组
+    const days: Array<{ day: number; weekday: string }> = []; // 结果数组
+
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(year, month, day);
+      const weekdayIndex = date.getDay(); // 获取星期几的索引(0-6)
+      days.push({
+        day,
+        weekday: weekdays[weekdayIndex] + ' ' + day,
+      });
+    }
+
+    return days;
+  }
+  /**
+   * 获取当前的年份
+   * @returns 当前年份
+   */
+  static getCurrentYear(): number {
+    return new Date().getFullYear();
+  }
+
+  /**
+   * 获取当前的月份
+   * @returns 当前月份 (1-12)
+   */
+  static getCurrentMonth(): number {
+    return new Date().getMonth() + 1;
+  }
+
+  /**
+   * 获取当前的年份和月份
+   * @returns 包含当前年份和月份的对象
+   */
+  static getCurrentYearMonth(): { year: number; month: number } {
+    const now = new Date();
+    return {
+      year: now.getFullYear(),
+      month: now.getMonth() + 1,
+    };
+  }
+
+  /**
+   * 获取格式化的当前年月字符串
+   * @param separator 分隔符，默认为 '-'
+   * @returns 格式化的年月字符串 (YYYY-MM)
+   */
+  static getFormattedYearMonth(separator: string = '-'): string {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = (now.getMonth() + 1).toString().padStart(2, '0');
+    return `${year}${separator}${month}`;
+  }
+
+  /**
+   * 获取中文格式的当前年月
+   * @returns 中文年月字符串 (YYYY年MM月)
+   */
+  static getChineseYearMonth(): string {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = (now.getMonth() + 1).toString().padStart(2, '0');
+    return `${year}年${month}月`;
+  }
+
+  /**
+   * 获取当前季度
+   * @returns 当前季度 (1-4)
+   */
+  static getCurrentQuarter(): number {
+    const month = new Date().getMonth() + 1;
+    return Math.ceil(month / 3);
+  }
+
+  /**
+   * 获取当前季度的开始和结束月份
+   * @returns 包含季度开始和结束月份的对象
+   */
+  static getCurrentQuarterRange(): { startMonth: number; endMonth: number } {
+    const quarter = this.getCurrentQuarter();
+    return {
+      startMonth: (quarter - 1) * 3 + 1,
+      endMonth: quarter * 3,
+    };
+  }
+
+  /**
+   * 获取当前日期信息（增强版，包含年月信息）
+   * @returns 包含各种格式的当前日期信息
+   */
+  static getCurrentDateInfo() {
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+
+    const monthRange = this.getMonthRange();
+    const weekRange = this.getWeekRange();
+    const yearMonth = this.getCurrentYearMonth();
+
+    return {
+      current: {
+        date: now,
+        formatted: this.formatDate(now),
+        dayOfWeek: this.getChineseDayOfWeek(now),
+        day: now.getDate(),
+        month: yearMonth.month,
+        year: yearMonth.year,
+      },
+      month: {
+        start: monthRange.start,
+        end: monthRange.end,
+        startFormatted: monthRange.startFormatted,
+        endFormatted: monthRange.endFormatted,
+        totalDays: this.getDaysInMonth(now.getFullYear(), now.getMonth() + 1),
+        month: yearMonth.month,
+        year: yearMonth.year,
+        formatted: this.getFormattedYearMonth(),
+        chinese: this.getChineseYearMonth(),
+      },
+      week: {
+        start: weekRange.start,
+        end: weekRange.end,
+        startFormatted: weekRange.startFormatted,
+        endFormatted: weekRange.endFormatted,
+        weekNumber: this.getWeekNumber(now),
+      },
+      year: yearMonth.year,
+      quarter: {
+        number: this.getCurrentQuarter(),
+        range: this.getCurrentQuarterRange(),
+      },
+    };
+  }
+
+  /**
+   * 获取指定日期所在的周数
+   * @param date 日期对象
+   * @returns 周数 (1-53)
+   */
+  static getWeekNumber(date: Date): number {
+    const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+    const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000;
+    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
+  }
+
+  /**
+   * 获取指定年份的所有月份信息
+   * @param year 年份
+   * @returns 包含所有月份信息的数组
+   */
+  static getYearMonths(year: number): Array<{
+    month: number;
+    name: string;
+    days: number;
+    formatted: string;
+  }> {
+    return Array.from({ length: 12 }, (_, i) => {
+      const month = i + 1;
+      return {
+        month,
+        name: this.getChineseMonthName(month),
+        days: this.getDaysInMonth(year, month),
+        formatted: `${year}-${month.toString().padStart(2, '0')}`,
+      };
+    });
+  }
+  static formatDateToWeekdayDay(date: Date): string {
+    const day = date.getDate();
+    const weekday = this.getChineseDayOfWeek(date).replace('星期', '周');
+    return `${weekday} ${day}`;
+  }
+}
+
+export default DateUtils;

src/views/property-marketing/assignment-management/index.vue

@@ -0,0 +1,628 @@
+<template>
+  <div class="flex-column justify-between">
+    <div class="flex justify-between items-start" style="width: 100%">
+      <div class="flex justify-between items-center" style="width: 100%">
+        <div class="flex items-center">
+          <a-date-picker
+            class="w-188px size-14px"
+            v-if="choseType === '日'"
+            @change="onChangeDate"
+            v-model="dayModel"
+            format="YYYY年MM月DD日周dd"
+          />
+          <a-week-picker
+            class="w-188px size-14px"
+            v-else-if="choseType === '周'"
+            @change="onChangeWeek"
+            v-model="weekModel"
+          />
+          <a-month-picker
+            class="w-188px size-14px"
+            v-else
+            @change="onChangeMonth"
+            v-model="monthModel"
+            format="YYYY年MM月"
+          />
+          <div class="flex items-center ml-12px">
+            <a-button class="mr-4px" @click="handlePrev">
+              <template #icon>
+                <icon-left />
+              </template>
+            </a-button>
+
+            <a-button @click="handleToday">今天</a-button>
+            <a-button class="ml-4px" @click="handleNext">
+              <template #icon>
+                <icon-right />
+              </template>
+            </a-button>
+          </div>
+          <div class="flex items-center ml-12px">
+            <a-space class="flex justify-between">
+              <a-dropdown position="bottom" @select="handleSelect">
+                <a-button class="w-80px flex justify-between">{{ choseType }}<icon-down /></a-button>
+                <template #content>
+                  <a-doption value="日" class="w-80px">日</a-doption>
+                  <a-doption value="周" class="w-80px">周</a-doption>
+                  <a-doption value="月" class="w-80px">月</a-doption>
+                </template>
+              </a-dropdown>
+            </a-space>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-start">
+        <a-trigger
+          trigger="click"
+          style="
+            background-color: #ffffff;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            box-shadow: #00000010 0px 2px 8px;
+            width: 120px;
+            height: 64px;
+            padding: 8px;
+            margin-top: 8px;
+          "
+        >
+          <a-button size="small" class="mr-12px">
+            <template #icon>
+              <icon-info-circle-fill size="16" class="color-#55585F" />
+            </template>
+            <template #default>颜色示意</template>
+          </a-button>
+          <template #content>
+            <div class="flex items-center mb-8px">
+              <div
+                style="background-color: #6d4cfe; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"
+              ></div>
+              <div>选题</div>
+            </div>
+            <div class="flex items-center">
+              <div
+                style="background-color: #ffae00; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"
+              ></div>
+              <div>内容稿件</div>
+            </div>
+          </template>
+        </a-trigger>
+
+        <a-trigger
+          trigger="click"
+          style="
+            background-color: #ffffff;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            box-shadow: #00000010 0px 2px 8px;
+            width: 308px;
+            height: 180px;
+            padding: 24px;
+            margin-top: 8px;
+          "
+        >
+          <a-button size="small">
+            <template #icon>
+              <icon-filter size="16" class="color-#55585F" />
+            </template>
+            <template #default>筛选</template>
+          </a-button>
+          <template #content>
+            <div>
+              <div class="flex items-center mb-24px">
+                <div class="w-70px">运营人员</div>
+                <a-space class="w-200px">
+                  <CommonSelect
+                    :multiple="false"
+                    :options="operators"
+                    v-model="query.operator_id"
+                    @change="handleSearch"
+                  />
+                </a-space>
+              </div>
+              <div class="flex items-center mb-24px">
+                <div class="w-70px">发布平台</div>
+                <a-space class="w-200px">
+                  <CommonSelect
+                    :multiple="false"
+                    :options="platformOptions"
+                    v-model="query.platform"
+                    @change="handleSearch"
+                  />
+                </a-space>
+              </div>
+              <div class="flex items-center">
+                <div class="w-70px">账号名称</div>
+                <a-input
+                  v-model="query.name"
+                  :style="{ width: '200px' }"
+                  placeholder="输入账号名称"
+                  @change="handleSearch"
+                />
+              </div>
+            </div>
+          </template>
+        </a-trigger>
+      </div>
+    </div>
+    <div class="flex justify-between items-start mt-16px" style="width: 100%">
+      <a-table :columns="columns" :data="data" :bordered="{ cell: true }" style="width: 100%" :pagination="false">
+        <template #name="{ record }">
+          <div class="flex items-center">
+            <img
+              :src="getPlatformIcon(record.platform)"
+              style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px"
+            />
+            {{ record.name || '-' }}
+          </div>
+        </template>
+
+        <!-- 动态日期列渲染 -->
+        <template #dateCell="{ record, column }">
+          <div v-if="record[column.dataIndex] && record[column.dataIndex].length > 0" class="task-container">
+            <div v-if="record[column.dataIndex].length >= 3" class="task-more" @click="handleMore(record, column)">
+              <div
+                :key="record[column.dataIndex][0].id"
+                class="task-item size-12px"
+                :title="record[column.dataIndex][0].name || '-'"
+              >
+                <div class="size-12px color-#211F24 mr-4px">
+                  {{ timestampToTime(record[column.dataIndex][0].execution_time) }}
+                </div>
+                <div :style="{ color: getTaskColor(record[column.dataIndex][0].type) }">
+                  {{ formatTaskName(record[column.dataIndex][0].name) }}{{ record[column.dataIndex][0].type }}
+                </div>
+              </div>
+              <div class="size-12px color-#8f959f" style="padding: 0px 8px">
+                还有{{ record[column.dataIndex].length - 1 }}项
+              </div>
+            </div>
+            <div
+              v-else
+              v-for="task in record[column.dataIndex]"
+              :key="task.id"
+              class="task-item"
+              :title="task.name || '-'"
+            >
+              <div class="size-12px color-#211F24 mr-4px">
+                {{ timestampToTime(record[column.dataIndex][0].execution_time) }}
+              </div>
+              <div :style="{ color: getTaskColor(task.type) }">
+                {{ formatTaskName(record[column.dataIndex][0].name) }}{{ record[column.dataIndex][0].type }}
+              </div>
+            </div>
+          </div>
+          <div v-else class="no-task"></div>
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { getTaskSchedules } from '@/api/all/assignment-management';
+import { fetchAccountOperators } from '@/api/all/propertyMarketing';
+
+import icon1 from '@/assets/img/platform/icon-dy.png';
+import icon2 from '@/assets/img/platform/icon-xhs.png';
+import icon3 from '@/assets/img/media-account/icon-warn.png';
+import icon4 from '@/assets/img/platform/icon-sph.png';
+import icon5 from '@/assets/img/platform/icon-wb.png';
+import icon6 from '@/assets/img/platform/icon-gzh.png';
+import icon7 from '@/assets/img/platform/icon-ks.png';
+import icon8 from '@/assets/img/platform/icon-bilibili.png';
+import DateUtils from '@/utils/DateUtils';
+
+const choseType = ref('周');
+const currentDateRange = reactive({
+  start: '',
+  end: '',
+});
+const weekModel = ref(DateUtils.formatDate(new Date()));
+const dayModel = ref(DateUtils.formatDate(new Date()));
+const monthModel = ref(DateUtils.formatDate(new Date()));
+
+const columns = ref([]);
+const data = ref([]);
+const operators = ref([]);
+const platformOptions = ref([
+  { value: 0, label: '抖音' },
+  { value: 1, label: '小红书' },
+  { value: 2, label: 'B站' },
+  { value: 3, label: '快手' },
+  { value: 4, label: '视频号' },
+  { value: 5, label: '微博' },
+  { value: 6, label: '公众号' },
+]);
+
+const pageInfo = reactive({
+  page: 1,
+  page_size: 10,
+  total: 0,
+});
+
+const query = reactive({
+  page: 1,
+  page_size: 20,
+  platform: '',
+  operator_id: undefined,
+  name: '',
+  execution_time: [] as string[],
+});
+
+const handleMore = (record: any[], column: number) => {
+  console.log('record', record);
+  console.log('column', column);
+  console.log('data', record[column.dataIndex]);
+};
+
+// 计算当前日期范围内的所有日期，统一返回 number 数组
+const currentDateHeaders = computed(() => {
+  if (choseType.value === '周') {
+    const specificWeek = DateUtils.getWeekDaysByDate(new Date(currentDateRange.start || new Date().toString()), 0);
+    return specificWeek.map((item) => parseInt(item.day, 10)); // 转换为数字数组
+  } else if (choseType.value === '月') {
+    const currentYearMonth = DateUtils.getCurrentYearMonth();
+    const tabTitle = DateUtils.getDaysAndWeekdays(currentYearMonth.year, currentYearMonth.month);
+    return tabTitle.map((item) => parseInt(item.day, 10)); // 转换为数字数组
+  } else {
+    // 日维度，返回当天的日期数字
+    const day = new Date(dayModel.value).getDate();
+    return [day];
+  }
+});
+
+// 获取平台图标
+const getPlatformIcon = (platform: number) => {
+  const platformIcons: Record<number, any> = {
+    0: icon1, // 抖音
+    1: icon2, // 小红书
+    2: icon8, // B站
+    3: icon7, // 快手
+    4: icon4, // 视频号
+    5: icon5, // 微博
+    6: icon6, // 公众号
+  };
+
+  return platformIcons[platform] || icon3; // 默认图标
+};
+
+// 获取任务颜色
+const getTaskColor = (taskType: number) => {
+  console.log('taskType', taskType);
+  // 根据API文档，type: 0=选题，1=内容稿件
+  return taskType === 0 ? '#6d4cfe' : '#ffae00';
+};
+
+// 格式化任务名称
+const formatTaskName = (name: string) => {
+  if (!name) return '未命名';
+  return name.length > 8 ? name.substring(0, 8) + '...' : name;
+};
+
+// 时间戳转日期格式，并提取日期数字
+const timestampToDayNumber = (timestamp: number) => {
+  const date = new Date(timestamp * 1000); // 假设时间戳是秒级
+  return parseInt(date.getDate().toString().padStart(2, '0')); // 返回 '01', '02', ..., '31'
+};
+
+// 时间戳转时间格式 (HH:MM)
+const timestampToTime = (timestamp: number): string => {
+  const date = new Date(timestamp * 1000); // 假设时间戳是秒级
+
+  // 获取小时和分钟
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+
+  return `${hours}:${minutes}`;
+};
+
+// 处理表格数据，使其与动态表头匹配
+const processTableData = (apiData: any[]) => {
+  const processedData: any[] = [];
+
+  // 处理每条账号数据
+  apiData.forEach((account) => {
+    const rowData: any = {
+      id: account.id,
+      name: account.name,
+      platform: account.platform,
+    };
+
+    // 初始化所有日期列为空数组
+    currentDateHeaders.value.forEach((day) => {
+      rowData[day] = [];
+    });
+
+    // 将任务按日期分组
+    if (account.task_schedules && account.task_schedules.length > 0) {
+      account.task_schedules.forEach((task: any) => {
+        const taskDay = timestampToDayNumber(task.execution_time);
+        console.log('taskDay', taskDay, typeof taskDay);
+        console.log('currentDateHeaders', currentDateHeaders.value);
+        console.log('rowData', currentDateHeaders.value.includes(taskDay));
+        // 如果这个日期在当前表头中，则添加到对应列
+        if (currentDateHeaders.value.includes(taskDay)) {
+          console.log('taskDay', task);
+          rowData[taskDay].push({
+            id: task.id,
+            name: task.name,
+            type: task.type,
+            execution_time: task.execution_time,
+          });
+          console.log('taskDay', rowData[taskDay]);
+        }
+      });
+    }
+
+    processedData.push(rowData);
+  });
+
+  return processedData;
+};
+
+// 设置日期范围
+const setDateRange = () => {
+  if (choseType.value === '周') {
+    const weekRange = DateUtils.getWeekRangeByDate(new Date(weekModel.value));
+    currentDateRange.start = weekRange.startFormatted;
+    currentDateRange.end = weekRange.endFormatted;
+    query.execution_time = [currentDateRange.start, currentDateRange.end];
+  } else if (choseType.value === '月') {
+    const monthRange = DateUtils.getMonthRangeByYearMonth(
+      new Date(monthModel.value).getFullYear(),
+      new Date(monthModel.value).getMonth() + 1
+    );
+    currentDateRange.start = monthRange.startFormatted;
+    currentDateRange.end = monthRange.endFormatted;
+    query.execution_time = [currentDateRange.start, currentDateRange.end];
+  } else {
+    // 日维度
+    currentDateRange.start = dayModel.value;
+    currentDateRange.end = dayModel.value;
+    query.execution_time = [currentDateRange.start, currentDateRange.end];
+  }
+};
+
+// 设置table的头部
+const setTableSpecific = () => {
+  columns.value = [
+    {
+      title: '账号与发布平台',
+      slotName: 'name',
+      width: 150,
+      minWidth: 100,
+      fixed: 'left',
+    },
+  ];
+
+  let dateHeaders: any[] = [];
+
+  if (choseType.value === '周') {
+    const specificWeek = DateUtils.getWeekDaysByDate(new Date(currentDateRange.start || new Date().toString()), 0);
+    dateHeaders = specificWeek;
+  } else if (choseType.value === '月') {
+    const currentYearMonth = DateUtils.getCurrentYearMonth();
+    const tabTitle = DateUtils.getDaysAndWeekdays(currentYearMonth.year, currentYearMonth.month);
+    dateHeaders = tabTitle;
+  } else {
+    // 日维度
+    const date = new Date(dayModel.value);
+    const day = date.getDate().toString().padStart(2, '0');
+    const weekday = DateUtils.formatDateToWeekdayDay(date);
+    dateHeaders = [{ day, weekday }];
+  }
+
+  // 添加日期列
+  dateHeaders.forEach((item) => {
+    columns.value.push({
+      title: `${item.weekday}`,
+      dataIndex: item.day, // 使用日期数字作为dataIndex
+      key: item.day,
+      slotName: 'dateCell',
+      width: 135,
+      minWidth: 100,
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    });
+  });
+};
+
+// 日期变化处理
+const onChangeDate = (val: any) => {
+  if (val) {
+    dayModel.value = DateUtils.formatDate(new Date(val));
+    setDateRange();
+    setTableSpecific();
+    handleSearch();
+  }
+};
+
+const onChangeWeek = (val: any) => {
+  console.log('onChangeWeek val', val);
+  if (val) {
+    const weekRange = DateUtils.getWeekRange(new Date(val));
+    console.log('weekRange', weekRange);
+    currentDateRange.start = weekRange.startFormatted;
+    currentDateRange.end = weekRange.endFormatted;
+    query.execution_time = [currentDateRange.start, currentDateRange.end];
+    weekModel.value = val;
+    setTableSpecific();
+    handleSearch();
+  }
+};
+
+const onChangeMonth = (val: any) => {
+  console.log('val', val);
+  if (val) {
+    const monthRange = DateUtils.getMonthRange(new Date(val));
+    currentDateRange.start = monthRange.startFormatted;
+    currentDateRange.end = monthRange.endFormatted;
+    query.execution_time = [currentDateRange.start, currentDateRange.end];
+    const date = new Date(val);
+    monthModel.value = val;
+    setTableSpecific();
+    handleSearch();
+  }
+};
+
+// 设置维度
+const handleSelect = (val: string) => {
+  choseType.value = val;
+  setDateRange();
+  setTableSpecific();
+  handleSearch();
+};
+
+// 日期导航
+const handlePrev = () => {
+  // 根据当前维度向前导航
+  if (choseType.value === '周') {
+    const prevWeek = new Date(weekModel.value);
+    prevWeek.setDate(prevWeek.getDate() - 7);
+    onChangeWeek(DateUtils.formatDate(prevWeek, false));
+  } else if (choseType.value === '月') {
+    const prevMonth = new Date(monthModel.value);
+    prevMonth.setMonth(prevMonth.getMonth() - 1);
+    onChangeMonth(DateUtils.formatDate(prevMonth, false));
+  } else {
+    const prevDay = new Date(dayModel.value);
+    prevDay.setDate(prevDay.getDate() - 1);
+    onChangeDate(DateUtils.formatDate(prevDay, false));
+  }
+};
+
+const handleNext = () => {
+  // 根据当前维度向后导航
+  if (choseType.value === '周') {
+    const nextWeek = new Date(weekModel.value);
+    nextWeek.setDate(nextWeek.getDate() + 7);
+    onChangeWeek(DateUtils.formatDate(nextWeek, false));
+  } else if (choseType.value === '月') {
+    const nextMonth = new Date(monthModel.value);
+    nextMonth.setMonth(nextMonth.getMonth() + 1);
+    onChangeMonth(DateUtils.formatDate(nextMonth, false));
+  } else {
+    const nextDay = new Date(dayModel.value);
+    nextDay.setDate(nextDay.getDate() + 1);
+    onChangeDate(DateUtils.formatDate(nextDay, false));
+  }
+};
+
+const handleToday = () => {
+  // 回到今天
+  const today = new Date();
+  if (choseType.value === '周') {
+    onChangeWeek(DateUtils.formatDate(today, false));
+  } else if (choseType.value === '月') {
+    onChangeMonth(DateUtils.formatDate(today, false));
+  } else {
+    onChangeDate(DateUtils.formatDate(today, false));
+  }
+};
+
+// 获取数据
+const handleSearch = () => {
+  query.page = pageInfo.page;
+  query.page_size = pageInfo.page_size;
+  console.log('query', query);
+  getTaskSchedules(query)
+    .then((response) => {
+      if (response.data) {
+        // 根据API响应结构调整
+        const apiData = response.data.data || response.data;
+        data.value = processTableData(apiData);
+        pageInfo.total = response.data.total || apiData.length;
+      }
+    })
+    .catch((error) => {
+      console.error('获取任务排期数据失败:', error);
+      data.value = [];
+    });
+};
+
+// 获取运营人员
+const getOperators = async () => {
+  try {
+    const { code, data: operatorsData } = await fetchAccountOperators();
+    if (code === 200) {
+      operators.value = operatorsData.map((op: any) => ({
+        value: op.id,
+        label: op.name,
+      }));
+    }
+  } catch (error) {
+    console.error('获取运营人员数据失败:', error);
+  }
+};
+
+// 监听日期维度变化
+watch(choseType, (newVal) => {
+  setDateRange();
+  setTableSpecific();
+  handleSearch();
+});
+
+onMounted(() => {
+  setDateRange();
+  setTableSpecific();
+  handleSearch();
+  getOperators();
+});
+</script>
+
+<style scoped>
+.content {
+  background: white;
+  width: 100%;
+  height: 600px;
+  padding: 12px;
+}
+
+.arco-dropdown-open .arco-icon-down {
+  transform: rotate(180deg);
+}
+
+.task-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.task-item {
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: white;
+  line-height: 1.4;
+  word-break: break-word;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  display: flex;
+}
+
+.task-item:hover {
+  opacity: 0.8;
+}
+
+.no-task {
+  color: #999;
+  font-style: italic;
+  text-align: center;
+  padding: 8px 0;
+}
+.tip-trigger {
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  width: 100px;
+  height: 80px;
+}
+.tip-trigger:hover {
+  background-color: #f0f0f0;
+}
+</style>

vite.config.ts

@@ -40,7 +40,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           // 目标地址
-          target: 'https://lingjiapi.lvfunai.com/api',
+          // target: 'https://lingjiapi.lvfunai.com/api',
+          target: 'http://192.168.40.7/api',
         },
       },
     },