Merge branch 'agriculture' of http://www.sysuimars.cn:3000/feiniao/feiniao-farm-h5 into agriculture

src/App.vue

@@ -61,8 +61,8 @@
                     />
                 </template>
             </tabbar-item>
-            <tabbar-item replace to="/youwei_trace">
-                <span>{{ t("tabbar.trace") }}</span>
+            <tabbar-item replace to="/work_execute">
+                <span>{{ t("tabbar.execute") }}</span>
                 <template #icon="props">
                     <img
                         :src="

src/components/pageComponents/AgriculturalInteractionCard.vue

@@ -0,0 +1,231 @@
+<template>
+    <!-- 只封装时间轴区域 -->
+    <div class="timeline">
+        <div class="timeline-item" v-for="timelineItem in item.timelineList" :key="timelineItem.id">
+            <div class="timeline-left">
+                <div class="dot"></div>
+                <div class="line"></div>
+            </div>
+            <div class="timeline-right">
+                <div class="date">
+                    <span class="work-name">{{ timelineItem.farmWorkName }}</span>
+                    <!-- <span v-show="timelineItem.expectedRisk">({{ timelineItem.expectedRisk }})</span> -->
+                    <span class="ignore-btn" v-if="hasPlanPermission" @click="handleIgnore(item,timelineItem)"> 忽略 </span>
+                </div>
+                <div class="text">
+                    预计报价<span class="price">{{ timelineItem.estimatedCost }}元</span>
+                    <span class="action-detail" @click="toDetail(timelineItem, item)"
+                        >查看详情</span
+                    >
+                    <!-- <span class="action-detail" @click="showPriceSheetPopup(timelineItem.farmWorkId, item)">查看报价单</span> -->
+                </div>
+            </div>
+            <div class="timeline-action" @click="handleTimelineAction(timelineItem, item.farmId)">转入农事任务</div>
+        </div>
+    </div>
+    <popup v-model:show="showTaskPopup" z-index="10000" round class="task-tips-popup">
+        <img class="create-farm-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
+        <div class="create-farm-text">
+            <div>
+                您确认忽略 <span class="main-text">{{ currentTask?.farmName }}</span> 的
+                <span class="main-text">{{ currentTask?.farmWorkName }}</span> 农事吗
+            </div>
+        </div>
+        <div class="create-farm-btn" @click="handlePopupBtn">确认忽略</div>
+    </popup>
+</template>
+
+<script setup>
+import { Popup } from "vant";
+import { computed, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const props = defineProps({
+    item: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+    },
+});
+
+// 检查是否有"转入农事"权限
+const hasPlanPermission = computed(() => {
+    try {
+        const userInfoStr = localStorage.getItem("localUserInfo");
+        if (!userInfoStr) return false;
+        const userInfo = JSON.parse(userInfoStr);
+        const permissions = userInfo.agriculturalPermissions || [];
+        return permissions.includes("转入农事");
+    } catch (error) {
+        console.error("解析用户信息失败:", error);
+        return false;
+    }
+});
+
+
+const handleTimelineAction = (timelineItem, farmId) => {
+    if (!hasPlanPermission.value) {
+        ElMessage.warning("您暂无权限操作");
+        return;
+    }
+    router.push({
+        path: "/work_detail",
+        query: {
+            miniJson: JSON.stringify({
+                id: timelineItem.farmWorkId,
+                arrangeId: timelineItem.arrangeId,
+                farmId,
+            }),
+        },
+    });
+};
+
+const emits = defineEmits(["updateList"]);
+
+const handleUploadSuccess = async () => {
+    emits("updateList");
+};
+
+const toDetail = (timelineItem, item) => {
+    router.push({
+        path: "/work_detail",
+        query: {
+            miniJson: JSON.stringify({
+                id: timelineItem.farmWorkId,
+                arrangeId: timelineItem.arrangeId,
+                farmId: item.farmId,
+            }),
+        },
+    });
+};
+
+// 忽略农事库
+const currentTask = ref(null);
+const showTaskPopup = ref(false);
+const handleIgnore = (item, timelineItem) => {
+    currentTask.value = { ...item, ...timelineItem };
+    showTaskPopup.value = true;
+};
+
+const handlePopupBtn = () => {
+    VE_API.home.ignoreFarmWorkLib({ farmWorkLibId: currentTask.value.farmWorkId }).then(({ code }) => {
+        if (code === 0) {
+            showTaskPopup.value = false;
+            ElMessage.success("忽略成功");
+            handleUploadSuccess();
+        }
+    });
+};
+
+</script>
+
+<style scoped lang="scss">
+.timeline {
+    margin-left: -5px;
+    margin-top: 8px;
+    .timeline-item {
+        display: flex;
+        align-items: flex-start;
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 22px;
+        & + .timeline-item {
+            margin-top: 10px;
+        }
+        .timeline-left {
+            width: 22px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .dot {
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                background: #a2d5fd;
+                margin-top: 6px;
+            }
+            .line {
+                border-left: 1px dashed #a2d5fd;
+                margin-top: 4px;
+                height: 28px;
+            }
+        }
+        .timeline-right {
+            padding-left: 5px;
+            flex: 1;
+            .date {
+                color: #1d2129;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 22px;
+            }
+            .text {
+                font-size: 12px;
+                color: #d7d7d7;
+                .price {
+                    padding-left: 4px;
+                }
+                .action-detail {
+                    margin-left: 6px;
+                    color: #2199f8;
+                    border-bottom: 1px solid;
+                }
+            }
+            .work-name {
+                padding-left: 4px;
+            }
+            .ignore-btn {
+                margin-left: 6px;
+                color: rgba(29, 33, 41, 0.4);
+                font-size: 13px;
+            }
+        }
+        .timeline-action {
+            align-self: center;
+            height: 28px;
+            line-height: 28px;
+            flex: none;
+            background: rgba(33, 153, 248, 0.1);
+            color: #2199f8;
+            font-size: 12px;
+            padding: 0px 11px;
+            border-radius: 20px;
+        }
+    }
+}
+.task-tips-popup {
+    width: 90%;
+    padding: 28px 28px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .create-farm-icon {
+        width: 52px;
+        height: 52px;
+        margin-bottom: 12px;
+    }
+    .create-farm-text {
+        font-size: 19px;
+        font-weight: 500;
+        margin-bottom: 32px;
+        text-align: center;
+    }
+    .main-text {
+        color: #2199f8;
+    }
+    .create-farm-btn {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 8px;
+        border-radius: 25px;
+        font-size: 16px;
+        background: #2199f8;
+        color: #fff;
+        text-align: center;
+    }
+}
+</style>

src/i18n/messages.js

@@ -7,6 +7,7 @@ export default {
             agriFile: "农情档案",
             agriRecord: "农事规划",
             trace: "有味溯源",
+            execute: "农事执行",
         },
         common: {
             current: "当前",
@@ -208,6 +209,7 @@ export default {
             agriFile: "Crop Archives",
             agriRecord: "Farm Planning",
             trace: "Traceability",
+            execute: "Execution",
         },
         common: {
             current: "Current",

src/router/globalRoutes.js

@@ -142,4 +142,11 @@ export default [
         meta: { keepAlive: true },
         component: () => import("@/views/old_mini/agri_record_detail/index.vue"),
     },
+    // 农事执行
+    {
+        path: "/work_execute",
+        name: "WorkExecute",
+        meta: { showTabbar: true, keepAlive: true },
+        component: () => import("@/views/old_mini/work_execute/index.vue"),
+    },
 ];

src/views/old_mini/work_execute/components/calendar.vue

@@ -0,0 +1,434 @@
+<template>
+    <div class="calendar">
+        <div class="header-wrap">
+            <!-- <div class="header-l">
+                <div class="top-l">
+                    <el-icon class="icon icon-l" color="#999999" size="11" @click="prevPeriod"><ArrowLeftBold /></el-icon>
+                </div>
+                <div class="top-c">
+                    <span class="header-text">
+                        {{ dateRange.start }} <span class="center-line">-</span> {{ dateRange.end }}
+                    </span>
+                </div>
+                <div class="top-r">
+                    <el-icon class="icon icon-r" color="#999999" size="11" @click="nextPeriod"><ArrowRightBold /></el-icon>
+                </div>
+            </div> -->
+            <!-- <div class="header-r">
+                <span class="line"></span>
+                高温预警
+            </div> -->
+        </div>
+        <div class="days">
+            <div
+                class="days-item"
+                v-for="(day, index) in calendarDays"
+                :key="index"
+                :class="[{ activeDay: activeDay === day.date, today: day.isToday && !day.solarTerm }]"
+                @click="selectDate(day.date, day)"
+            >
+                <div class="day-box">
+                    <span class="days-week">{{ day.isToday ? "今天" : `周${day.dayOfWeek}` }}</span>
+                    <span class="days-one">{{ day.day }}</span>
+                </div>
+                <div v-if="day.solarTerm" class="solar-term">{{ day.solarTerm }}</div>
+                <div v-if="day.typeName" class="type-num">{{ day.typeName.lengthVal }}</div>
+                <!-- <div v-if="day.isHeatWarning" class="heat-warning"></div>
+                <div v-if="day.typeName" class="type-name">
+                    <div class="type-text">{{ day.typeName.farmWorkName }}</div>
+                </div> -->
+            </div>
+
+            <div class="days-fixed">
+                <div>
+                    <el-icon><Calendar /></el-icon>
+                </div>
+                <div>日历</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onDeactivated, onMounted } from "vue";
+import solarLunar from "solarlunar";
+// const props = defineProps({
+//     calendarWorkList: {
+//         type: Array,
+//         required: true,
+//     },
+// });
+
+const today = new Date();
+// const startDate = ref(getAlignedStartDate(today));
+const startDate = ref(new Date(today));
+// 定义星期几的名称
+const weekdays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+const weekdaysShort = ["一", "二", "三", "四", "五", "六", "日"];
+// 存储任务列表数据
+const taskListData = ref([]);
+
+const days = computed(() => {
+    return Array.from({ length: 7 }, (_, i) => {
+        const date = new Date(startDate.value);
+        date.setDate(startDate.value.getDate() + i);
+        return date;
+    });
+});
+
+const calendarDays = computed(() => {
+    const daysList = [];
+    for (let i = 0; i < days.value.length; i++) {
+        const date = days.value[i];
+        const dayOfWeek = date.getDay(); // 0是周日，1是周一，...，6是周六
+        // 调整显示：周一显示为"一"，周二显示为"二"，...，周日显示为"日"
+        const displayDayOfWeek = dayOfWeek === 0 ? "日" : weekdaysShort[dayOfWeek - 1];
+
+        // 获取该日期的节气
+        const solarTerm = getSolarTerm(date);
+        // 获取该日期的农事数据
+        const typeName = getTaskByDate(formatDate(date));
+
+        daysList.push({
+            day: date.getDate(),
+            date: formatDate(date),
+            isToday: formatDate(date) === formatDate(today),
+            dayOfWeek: displayDayOfWeek,
+            solarTerm: solarTerm, // 使用真实计算的节气数据
+            isHeatWarning: i === 5,
+            typeName: typeName, // 使用传入的任务数据
+        });
+    }
+    return daysList;
+});
+
+// 根据日期获取农事数据
+function getTaskByDate(dateStr) {
+    if (!taskListData.value || taskListData.value.length === 0) {
+        return null;
+    }
+    // 查找匹配日期的农事
+    const matchedTasks = taskListData.value.filter(task => {
+        if (!task.expectedExecuteDate && !task.executeDeadlineDate) return false;
+        // 格式化日期字符串进行比较（确保格式一致）
+        const taskDate = formatDate(new Date(task.expectedExecuteDate || task.executeDeadlineDate));
+        return taskDate === dateStr;
+    });
+
+    if (matchedTasks.length === 0) {
+        return null;
+    }
+
+    // const farmWorkNames = matchedTasks.map(task => task.farmWorkName || '').filter(Boolean);
+    return {
+        lengthVal: matchedTasks.length,
+        // farmWorkName: farmWorkNames.length > 1 ? farmWorkNames.join('、') : farmWorkNames[0] || ''
+    };
+}
+
+function setSolarTerm(taskList) {
+    // 存储任务列表数据
+    taskListData.value = taskList || [];
+    // 为每个任务计算节气
+    for (let task of taskListData.value) {
+        if (task.expectedExecuteDate || task.executeDeadlineDate) {
+            task.solarTerm = getSolarTerm(new Date(task.expectedExecuteDate || task.executeDeadlineDate));
+        }
+    }
+}
+
+const expiredCounts = ref(0);
+const completedCounts = ref(0);
+function setCounts(index, counts) {
+    if (index === 2) {
+        completedCounts.value = counts;
+    } else if (index === 3) {
+        expiredCounts.value = counts;
+    }
+}
+
+// 清除选中状态
+const clearSelection = () => {
+    activeDay.value = null;
+    selectedDate.value = null;
+};
+
+defineExpose({
+    setSolarTerm,
+    setCounts,
+    clearSelection
+});
+
+const dateRange = computed(() => {
+    let start = calendarDays.value[0].date;
+    start = start.replace(/-/g, ".");
+    let end = calendarDays.value[6].date;
+    end = end.replace(/^\d{4}-(\d{2})-(\d{2})$/, "$1.$2");
+    return { start, end };
+});
+
+function getAlignedStartDate(referenceDate) {
+    const start = new Date(referenceDate);
+    const dayOfWeek = start.getDay();
+    start.setDate(start.getDate() - dayOfWeek + (dayOfWeek === 0 ? -13 : 1)); // 对齐至周一，确保21天周期合理
+    return start;
+}
+
+function formatDate(date) {
+    // String(currentMonth.value).padStart(2, "0")
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(
+        2,
+        "0"
+    )}`;
+}
+
+// 获取指定日期的节气
+function getSolarTerm(date) {
+    try {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1; // getMonth() 返回 0-11，需要加1
+        const day = date.getDate();
+        const lunar = solarLunar.solar2lunar(year, month, day);
+        // lunar.term 返回节气名称，如果没有节气则返回空字符串
+        return lunar.term || null;
+    } catch (error) {
+        console.error("获取节气失败:", error);
+        return null;
+    }
+}
+
+function prevPeriod() {
+    startDate.value.setDate(startDate.value.getDate() - 7);
+    startDate.value = new Date(startDate.value);
+}
+
+function nextPeriod() {
+    startDate.value.setDate(startDate.value.getDate() + 7);
+    startDate.value = new Date(startDate.value);
+}
+
+const activeDay = ref(null);
+const emit = defineEmits(['dateSelect']);
+
+const selectDate = (date, day) => {
+    // 如果点击的是已选中的日期，取消选中
+    if (activeDay.value === date) {
+        activeDay.value = null;
+        selectedDate.value = null;
+        emit('dateSelect', null); // 传递 null 表示取消筛选
+    } else {
+        activeDay.value = date;
+        selectedDate.value = `${date} (${day.dayOfWeek})`;
+        emit('dateSelect', date); // 传递选中的日期
+    }
+};
+
+// 初始化时不选择任何日期（默认不选中）
+// onMounted(() => {
+//     selectDate(formatDate(today), {
+//         day: today.getDate(),
+//         dayOfWeek: weekdaysShort[today.getDay() === 0 ? 6 : today.getDay() - 1],
+//     });
+// });
+
+function closeDialog() {
+    activeDay.value = null;
+}
+const selectedDate = ref(null);
+</script>
+
+<style lang="scss" scoped>
+.calendar {
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
+    .header-wrap {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+        .header-l {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            .top-c {
+                flex: 1;
+                text-align: center;
+            }
+            .header-text {
+                color: #000;
+                font-size: 16px;
+                font-weight: bold;
+                .center-line {
+                    position: relative;
+                    top: -3px;
+                }
+            }
+            .icon {
+                width: 20px;
+                height: 20px;
+                background: #F2F3F5;
+                border-radius: 50%;
+                text-align: center;
+                line-height: 20px;
+                &.icon-l {
+                    margin-right: 2px;
+                }
+                &.icon-r {
+                    margin-left: 2px;
+                }
+            }
+            .top-tag {
+                font-size: 12px;
+                padding: 0 8px;
+                height: 20px;
+                line-height: 20px;
+                border-radius: 20px;
+                &.red {
+                    color: #FF0000;
+                    background: rgba(255, 0, 0, 0.1);
+                }
+                &.orange {
+                    color: #FF790B;
+                    background: rgba(255, 149, 61, 0.2);
+                }
+            }
+        }
+        .header-r {
+            background: rgba(252, 138, 44, 0.12);
+            padding: 6px 10px;
+            border-radius: 28px;
+            color: #fc8a2c;
+            display: inline-flex;
+            align-items: center;
+            font-size: 10px;
+            .line {
+                width: 12px;
+                height: 1px;
+                margin-right: 5px;
+                background: #fc8a2c;
+            }
+        }
+    }
+}
+
+.weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    font-size: 12px;
+}
+.days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    // gap: 5px;
+    font-size: 12px;
+    position: relative;
+    .days-fixed {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        box-shadow: -4px 0px 4px 0px #00000000;
+        width: 48px;
+        height: 50px;
+        background: #fff;
+        color: #969696;
+    }
+    .days-item + .days-item {
+        margin-left: 6px;
+    }
+    .days-item {
+        cursor: pointer;
+        position: relative;
+        &.today {
+            // min-height: 70px;
+            .day-box {
+                color: #2199f8;
+            }
+        }
+
+        &.activeDay {
+            .day-box {
+                color: #fff;
+                background: linear-gradient(136deg, #9fd5ff, #2199f8);
+            }
+        }
+        .day-box {
+            background: #F7F7F7;
+            color: #000;
+            border-radius: 8px;
+            padding: 7px 0;
+            position: relative;
+            .days-week {
+                font-size: 12px;
+            }
+        }
+        .solar-term {
+            padding-top: 3px;
+            color: #8D8D8D;
+            font-size: 12px;
+        }
+        .type-num {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            color: #fff;
+            font-size: 10px;
+            background: #2199F8;
+            width: 14px;
+            height: 14px;
+            line-height: 16px;
+            border-radius: 50%;
+        }
+        .days-one {
+            text-align: center;
+            display: block;
+            margin: 0 auto;
+            font-size: 14px;
+            line-height: 16px;
+            font-weight: bold;
+            padding-top: 2px;
+            // width: 32px;
+            // height: 32px;
+            // line-height: 32px;
+            // border-radius: 50%;
+        }
+        .type-name {
+            font-size: 10px;
+            position: relative;
+            top: -4px;
+            border-radius: 12px;
+            position: relative;
+            background: #fff;
+            padding-top: 2px;
+            .type-text {
+                border-radius: 12px;
+                padding: 2px;
+            }
+        }
+    }
+}
+.today {
+    position: relative;
+    // &::after {
+    //     content: "";
+    //     position: absolute;
+    //     left: 0;
+    //     right: 0;
+    //     bottom: 0;
+    //     margin: 0 auto;
+    //     width: 10px;
+    //     height: 10px;
+    //     background: url("@/assets/img/home/today.png") no-repeat center center / 100% 100%;
+    // }
+    &.no-type {
+        &::after {
+            bottom: 14px;
+        }
+    }
+}
+</style>

src/views/old_mini/work_execute/index.js

@@ -0,0 +1,162 @@
+import * as KMap from "@/utils/ol-map/KMap";
+import * as util from "@/common/ol_common.js";
+import config from "@/api/config.js";
+import Style from "ol/style/Style";
+import Photo from "ol-ext/style/Photo";
+import { Icon, Stroke } from "ol/style.js";
+import { newPoint } from "@/utils/map";
+
+const LABEL_FONT = "bold 12px sans-serif";
+const LABEL_PADDING = [4, 10, 4, 10];
+const LABEL_RADIUS = 8;
+const LABEL_DPR = window.devicePixelRatio || 2;
+const PHOTO_RESIZE = "?imageView2/1/w/300/interlace/1";
+const DEFAULT_PHOTO =
+  "https://birdseye-img-ali-cdn.sysuimars.com/sikong/fh_sync/71892baf-42b7-4d35-a763-2a420014d901/82d4e04b-df4e-4eef-b220-bd388f5f8299/media/71de4f44-235a-4274-ad5d-e5a0ce6f2abe/DJI_20260530085247_0222_V_code-ws0fsme6cx56.jpeg" + PHOTO_RESIZE;
+
+function getFeaturePhotoSrc(feature) {
+  // const image = feature.get("beforeImage") || feature.get("afterImage") || feature.get("coverImage");
+  // if (image?.cloud_filename) {
+  //   return config.base_img_url3 + image.cloud_filename + PHOTO_RESIZE;
+  // }
+  // const src = feature.get("mapPhotoUrl") || feature.get("coverImg") || feature.get("imgUrl");
+  // if (src) {
+  //   return src.startsWith("http") ? src : config.base_img_url3 + src + PHOTO_RESIZE;
+  // }
+  return DEFAULT_PHOTO;
+}
+
+function createPillLabel(text) {
+  const [paddingTop, paddingRight, paddingBottom, paddingLeft] = LABEL_PADDING;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const labelText = text || "";
+  ctx.font = LABEL_FONT;
+  const metrics = ctx.measureText(labelText);
+  const textWidth = metrics.width;
+  const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent || 12;
+  const width = Math.ceil(textWidth + paddingLeft + paddingRight);
+  const height = Math.ceil(textHeight + paddingTop + paddingBottom);
+
+  canvas.width = Math.ceil(width * LABEL_DPR);
+  canvas.height = Math.ceil(height * LABEL_DPR);
+  ctx.scale(LABEL_DPR, LABEL_DPR);
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+
+  ctx.font = LABEL_FONT;
+  ctx.beginPath();
+  ctx.roundRect(0, 0, width, height, Math.min(LABEL_RADIUS, height / 2));
+  ctx.fillStyle = "#2199F8";
+  ctx.fill();
+
+  ctx.fillStyle = "#fff";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(labelText, Math.round(width / 2), Math.round(height / 2));
+
+  return canvas.toDataURL();
+}
+
+/**
+ * @description 地图层对象
+ */
+class IndexMap {
+  constructor() {
+    let that = this;
+    let vectorStyle = new KMap.VectorStyle();
+    this.vectorStyle = vectorStyle;
+    this.photoStyleCache = {};
+    this.labelStyleCache = {};
+
+    this.borderStyle = new Style({
+      image: new Photo({
+        src: require("@/assets/img/map/garden-border.png"),
+        radius: 24,
+        shadow: 0,
+        crop: false,
+        onload: function () {
+          that.gardenPointLayer.layer.changed();
+        },
+        displacement: [0, -6],
+        stroke: new Stroke({
+          width: 0,
+          color: "#fdfcfc00",
+        }),
+      }),
+    });
+
+    this.gardenPointLayer = new KMap.VectorLayer("gardenPointLayer", 99, {
+      minZoom: 6,
+      maxZoom: 22,
+      style: (feature) => {
+        const photoSrc = getFeaturePhotoSrc(feature);
+        if (!this.photoStyleCache[photoSrc]) {
+          this.photoStyleCache[photoSrc] = new Style({
+            image: new Photo({
+              src: photoSrc,
+              crossOrigin: "anonymous",
+              radius: 19,
+              shadow: 0,
+              crop: true,
+              onload: function () {
+                that.gardenPointLayer.layer.changed();
+              },
+              displacement: [-1, -1],
+              stroke: new Stroke({
+                width: 2,
+                color: "#fdfcfc00",
+              }),
+            }),
+          });
+        }
+
+        const labelText = feature.get("farmName") || feature.get("mapInfo") || "";
+        if (!this.labelStyleCache[labelText]) {
+          this.labelStyleCache[labelText] = new Style({
+            image: new Icon({
+              src: createPillLabel(labelText),
+              scale: 1 / LABEL_DPR,
+              anchor: [0.5, 1],
+              displacement: [0, 32],
+            }),
+          });
+        }
+
+        return [this.photoStyleCache[photoSrc], this.borderStyle, this.labelStyleCache[labelText]];
+      },
+    });
+  }
+
+  initMap(location, target, isCapital) {
+    let level = 16;
+    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
+    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22, isCapital ? "img" : "vec");
+    let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
+    this.kmap.addXYZLayer(xyz2, { minZoom: 6, maxZoom: 22 }, 2);
+    this.kmap.addLayer(this.gardenPointLayer.layer);
+  }
+
+  initData(taskList, label, pointType = "point") {
+    this.gardenPointLayer.source.clear();
+    this.photoStyleCache = {};
+    this.labelStyleCache = {};
+    if (taskList.length > 0) {
+      for (let item of taskList) {
+        item.mapInfo = label
+          ? item[label]
+          : (item.executeDeadlineDate || item.executeDate)?.replace(/^\d{4}-(\d{2})-(\d{2})$/, "$1.$2") +
+            "  " +
+            item.farmWorkName;
+        this.gardenPointLayer.source.addFeature(newPoint(item, pointType));
+      }
+      this.kmap.getView().fit(this.gardenPointLayer.source.getExtent(), { padding: [42, 20, 30, 20] });
+      const finalZoom = this.kmap.getView().getZoom();
+      if (finalZoom > 18) {
+        this.kmap.getView().setZoom(18);
+      }
+    }
+  }
+}
+
+export default IndexMap;

src/views/old_mini/work_execute/index.vue

@@ -0,0 +1,944 @@
+<template>
+    <div class="task-page" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
+        <div class="task-top">
+            <div class="map-container" ref="mapContainer"></div>
+        </div>
+        <div class="calendar-container">
+            <customCalendar ref="calendarRef" @dateSelect="handleDateSelect"></customCalendar>
+        </div>
+        <div class="task-list">
+            <div class="list-filter">
+                <div class="filter-item" :class="{ active: activeIndex === 0 }" @click="handleActiveFilter(0)">
+                    待接受({{ taskCounts[0] || 0 }})
+                </div>
+                <div class="filter-item" :class="{ active: activeIndex === 2 }" @click="handleActiveFilter(2)">
+                    已接受({{ taskCounts[2] || 0 }})
+                </div>
+                <div class="filter-item" :class="{ active: activeIndex === 3 }" @click="handleActiveFilter(3)">
+                    执行中({{ taskCounts[3] || 0 }})
+                </div>
+                <div class="filter-item" :class="{ active: activeIndex === 4 }" @click="handleActiveFilter(3)">
+                    已完成({{ taskCounts[4] || 0 }})
+                </div>
+            </div>
+            <div class="list-box">
+                <div class="list-header">
+                    <div class="select-group">
+                        <el-select class="select-item" v-model="selectParma.farmWorkTypeId" placeholder="农事类型"
+                            @change="getSimpleList">
+                            <el-option v-for="item in farmWorkTypeList" :key="item.id" :label="item.name"
+                                :value="item.id" />
+                        </el-select>
+                        <el-select class="select-item" v-model="selectParma.districtCode" placeholder="农场筛选"
+                            @change="getSimpleList">
+                            <el-option v-for="item in districtList" :key="item.code" :label="item.name"
+                                :value="item.code" />
+                        </el-select>
+                    </div>
+                    <div class="action-btn">批量接受</div>
+                </div>
+                <!-- 任务列表 -->
+                <div class="work-task-list" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
+                    <div class="task-item" v-for="(item, index) in taskList" :key="index"
+                        :class="isTimeoutItem(index) ? 'timeout-item' : ''" @click="handleItem(item, index)">
+                        <div class="item-title">
+                            <img class="task-icon" src="@/assets/img/home/task.png" alt="">
+                            <span class="title-text">{{ item.operation?.name }}</span>
+                            <span class="task-status" :class="`task-status--${item.operation?.type}`">{{
+                                item.operation?.typeName }}</span>
+                        </div>
+                        <span class="task-tag timeout" v-if="isTimeoutItem(index)">
+                            <el-icon>
+                                <WarningFilled />
+                            </el-icon>
+                            {{ getTimeoutText() }}
+                        </span>
+                        <span class="task-tag" v-else>
+                            {{ activeStatus }}
+                        </span>
+                        <div class="item-content">
+                            <div class="item-info">
+                                <div class="info-item">
+                                    <div class="info-name">负责人：</div><span class="val-text">
+                                        某某某、某某某</span>
+                                </div>
+                                <div class="info-item" v-if="mode !== 'review'">
+                                    <div class="info-name">农事详情：</div><span class="val-text">
+                                        {{ item.operation?.drug }}</span>
+                                </div>
+                                <div class="info-item">
+                                    <div class="info-name">农情研判：</div><span class="val-text">
+                                        {{ item.operation?.work_reason }}</span>
+                                </div>
+                            </div>
+                            <div class="excutor-info">
+                                <div class="executor-stats">
+                                    <div class="stat-cell">
+                                        <div class="stat-value">
+                                            {{ item.time ? formatGMTToYMD(item.time) : "--" }}
+                                        </div>
+                                        <div class="stat-label">执行时间</div>
+                                    </div>
+                                    <div class="cell-line"></div>
+                                    <div class="stat-cell">
+                                        <div class="stat-value">{{ item.geohash_sample || "--" }}</div>
+                                        <div class="stat-label">执行区域</div>
+                                    </div>
+                                    <div class="cell-line"></div>
+                                    <div class="stat-cell">
+                                        <div class="stat-value">{{ item.operation?.machine_code || "--" }}</div>
+                                        <div class="stat-label">执行农机</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="unqualified-reason" v-if="activeStatus === '未达标'">
+                            未达标原因：{{ item.operation?.reason || "未在合适时间执行，药液未充分喷撒吸收" }}
+                        </div>
+
+                        <div class="compare-imgs" v-if="activeStatus === '未达标' && (item.beforeImage || item.afterImage)"
+                            @click.stop>
+                            <div class="img-tag">前</div>
+                            <div class="img-tag right-tag">后</div>
+                            <div class="img-item" v-if="item.beforeImage">
+                                <img :src="getWorkImageUrl(item.beforeImage)" alt="" />
+                            </div>
+                            <div class="img-item" v-if="item.afterImage">
+                                <img :src="getWorkImageUrl(item.afterImage)" alt="" />
+                            </div>
+                        </div>
+
+                        <div class="task-footer">
+                            <div class="farm-info">来自某某农场农场</div>
+                            <div class="btn-group" v-if="getItemStatusButtons(index).length">
+                                <div v-for="btn in getItemStatusButtons(index)" :key="btn.label" class="edit-btn"
+                                    :class="btn.type" @click.stop="handleStatusBtn(btn, item, index)">
+                                    {{ btn.label }}
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="empty-tip" v-if="!loading && taskList.length === 0">暂无数据</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- <upload-execute ref="uploadExecuteRef" :onlyShare="onlyShare" @uploadSuccess="handleUploadSuccess" /> -->
+    <!-- 服务报价单 -->
+    <!-- <price-sheet-popup :key="activeIndex" ref="priceSheetPopupRef"></price-sheet-popup> -->
+    <!-- 新增：激活上传弹窗 -->
+    <!-- <active-upload-popup ref="activeUploadPopupRef" @handleUploadSuccess="handleUploadSuccess"></active-upload-popup> -->
+</template>
+
+<script setup>
+import { computed, nextTick, onActivated, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useStore } from "vuex";
+import IndexMap from "./index";
+import { useRouter } from "vue-router";
+import { WarningFilled } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import config from "@/api/config.js";
+import customCalendar from "./components/calendar.vue";
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const indexMap = new IndexMap();
+const mapContainer = ref(null);
+const tabBarHeight = computed(() => store.state.home.tabBarHeight);
+const selectParma = ref({
+    farmWorkTypeId: null,
+    districtCode: null,
+});
+
+// 任务列表数据（用于显示，可能被筛选）
+const taskList = ref([
+    {
+        time: "Fri, 22 May 2026 00:00:00 GMT",
+        geohash_sample: "ws0gs49ns213",
+        farmName: "冬季清园",
+        typeName: "荔枝",
+        userType: 1,
+        address: "广东省广州市从化区太平镇凤凰路88号",
+        farmPoint: "POINT(113.61652616170711 23.58399613872042)",
+        sourceData: {
+            currentPhenologyName: "花芽分化",
+            currentPhenologyStartDate: "2026-01-15",
+            daysUntilNext: 3,
+        },
+        operation: {
+            name: "冬季清园",
+            type: "1",
+            typeName: "标准类",
+            work_reason: "近期气温回升，需及时清理园内枯枝落叶，减少病虫越冬基数",
+            drug: "石硫合剂 500倍液",
+            machine_code: "DJI-T40-001",
+            work_id: 5001,
+        },
+    },
+    {
+        time: "Mon, 26 May 2026 00:00:00 GMT",
+        geohash_sample: "ws0gefxm68u5",
+        farmName: "施肥促花",
+        typeName: "柑橘",
+        userType: 2,
+        address: "广东省肇庆市德庆县官圩镇果园示范区",
+        farmPoint: "POINT(113.62757101477101 23.590796948574365)",
+        sourceData: {
+            currentPhenologyName: "开花期",
+            currentPhenologyStartDate: "2026-02-20",
+            daysUntilNext: 12,
+        },
+        operation: {
+            name: "施肥促花",
+            type: "2",
+            typeName: "感知类",
+            work_reason: "花芽分化期养分需求增加，需补充磷钾肥",
+            drug: "磷酸二氢钾 0.3%",
+            machine_code: "DJI-T50-003",
+            work_id: 5002,
+        },
+    },
+    {
+        time: "Wed, 28 May 2026 00:00:00 GMT",
+        geohash_sample: "ws0gefzjqqqw",
+        farmId: 1003,
+        farmName: "病虫害防治",
+        typeName: "水稻",
+        userType: 1,
+        address: "广东省清远市清城区龙塘镇农业科技园",
+        farmPoint: "POINT(113.62240816252164 23.59499176519138)",
+        sourceData: {
+            currentPhenologyName: "分蘖期",
+            currentPhenologyStartDate: "2026-03-01",
+            daysUntilNext: 8,
+        },
+        operation: {
+            name: "病虫害防治",
+            type: "1",
+            typeName: "复核类",
+            work_reason: "监测到蚜虫活动增多，建议及时喷药防治",
+            drug: "吡虫啉 1500倍液",
+            machine_code: "DJI-T40-002",
+            work_id: 5003,
+        },
+    },
+]);
+const mode = "execute";
+const activeStatus = ref("待接受");
+
+const STATUS_BTN_MAP = {
+    待接受: [
+        { label: "重新派发", type: "normal", action: "redispatch" },
+        { label: "提醒接受", type: "primary", action: "remindAccept" },
+    ],
+    已接受: [{ label: "提醒执行", type: "primary", action: "remindExecute" }],
+    执行中: [{ label: "提醒完成", type: "primary", action: "remindComplete" }],
+    已超时: [
+        { label: "重新派发", type: "normal", action: "redispatch" },
+        { label: "提醒接受", type: "primary", action: "remindAccept" },
+    ],
+    未达标: [{ label: "重新下发", type: "primary", action: "redispatch" }],
+};
+
+const isTimeoutItem = (index) => index === 0;
+
+const getTimeoutRemindBtn = () => {
+    const map = {
+        待接受: { label: "提醒接受", type: "primary", action: "remindAccept" },
+        已接受: { label: "提醒执行", type: "primary", action: "remindExecute" },
+        执行中: { label: "提醒完成", type: "primary", action: "remindComplete" },
+    };
+    return map[activeStatus.value];
+};
+
+const getItemStatusButtons = (index) => {
+    const baseButtons = STATUS_BTN_MAP[activeStatus.value] || [];
+    if (!isTimeoutItem(index)) {
+        return baseButtons;
+    }
+    if (activeStatus.value === "待接受") {
+        return baseButtons;
+    }
+    const remindBtn = getTimeoutRemindBtn();
+    if (remindBtn) {
+        return [
+            { label: "重新派发", type: "normal", action: "redispatch" },
+            remindBtn,
+        ];
+    }
+    return [{ label: "重新派发", type: "normal", action: "redispatch" }, ...baseButtons];
+};
+
+const getTimeoutText = () => {
+    switch (activeStatus.value) {
+        case "待接受":
+            return "接受超时";
+        case "已接受":
+            return "执行超时";
+        case "执行中":
+            return "完成超时";
+        default:
+            return "已超时";
+    }
+};
+
+const formatGMTToYMD = (gmtString) => {
+    const date = new Date(gmtString);
+    return date.toISOString().split("T")[0];
+};
+
+const getWorkImageUrl = (image) => {
+    if (!image?.cloud_filename) return "";
+    return config.base_img_url3 + image.cloud_filename;
+};
+
+const handleItem = (item, index) => {
+    router.push({
+        path: "/work_detail",
+        query: {
+            miniJson: JSON.stringify({
+                id: item.operation?.work_id,
+                status: activeStatus.value,
+                time: item.time,
+                geohash_sample: item.geohash_sample,
+                machine_code: item.operation?.machine_code,
+            }),
+        },
+    });
+};
+
+const handleStatusBtn = (btn, item, index) => {
+    if (btn.action === "redispatch") {
+        ElMessage.info(`重新派发：${item.operation?.name}`);
+    } else {
+        ElMessage.success("提醒成功！");
+    }
+};
+
+const calendarRef = ref(null);
+const filterDate = ref(null);
+const fullTaskList = ref([]);
+
+const getCalendarTaskList = (list) => {
+    return list.map((item) => ({
+        expectedExecuteDate: item.time,
+        executeDeadlineDate: item.time,
+    }));
+};
+
+const syncCalendarData = () => {
+    nextTick(() => {
+        calendarRef.value?.setSolarTerm(getCalendarTaskList(fullTaskList.value));
+    });
+};
+
+const handleDateSelect = (date) => {
+    filterDate.value = date;
+    // if (!date) {
+    //     taskList.value = [...fullTaskList.value];
+    // } else {
+    //     taskList.value = fullTaskList.value.filter((item) => {
+    //         if (!item.time) return false;
+    //         return formatGMTToYMD(item.time) === date;
+    //     });
+    // }
+    syncCalendarData();
+};
+// 各状态任务数量
+const taskCounts = ref([0, 0, 0]);
+// 当前选中的筛选索引
+const activeIndex = ref(2);
+const noData = ref(false);
+const loading = ref(false);
+// 分页相关
+const page = ref(0);
+const limit = ref(10);
+const loadingMore = ref(false);
+const finished = ref(false);
+
+// 查询未来农事预警
+const getFutureFarmWorkWarning = async (item) => {
+    const res = await VE_API.home.listFutureFarmWorkWarning({ farmId: item.farmId });
+    item.timelineList = res.data || [];
+};
+
+const cityCode = ref("");
+//根据城市的坐标返回区县列表
+const districtList = ref([]);
+
+//农事类型列表
+const farmWorkTypeList = ref([]);
+function getFarmWorkTypeList() {
+    VE_API.z_farm_work_record.getFarmWorkTypeList().then(({ data }) => {
+        farmWorkTypeList.value = data;
+        farmWorkTypeList.value.unshift({ id: 0, name: "全部" });
+    });
+}
+
+const mapPoint = ref(null);
+
+onMounted(() => {
+    mapPoint.value = store.state.home.miniUserLocationPoint;
+    fullTaskList.value = [...taskList.value];
+    // getDistrictListByCity();
+    resetAndLoad();
+    getFarmWorkTypeList();
+    syncCalendarData();
+    nextTick(() => {
+        indexMap.initMap(mapPoint.value, mapContainer.value, true);
+        
+        // 更新地图数据
+        indexMap.initData(taskList.value, '', 'farmPoint');
+    });
+});
+
+onActivated(() => {
+    if (route.query.noReload) {
+        return;
+    }
+    // 确保地图已初始化，使用 nextTick 等待 DOM 更新
+    nextTick(() => {
+        // 检查地图实例是否已初始化
+        if (!indexMap.kmap) {
+            // 如果地图未初始化，重新初始化
+            if (mapContainer.value) {
+                mapPoint.value = store.state.home.miniUserLocationPoint;
+                indexMap.initMap(mapPoint.value, mapContainer.value, true);
+                // 等待地图初始化完成后再加载数据
+                setTimeout(() => {
+                    resetAndLoad();
+                }, 300);
+                return;
+            }
+        } else {
+            // 如果地图已初始化，需要等待 tab 切换完成，容器完全可见后再更新尺寸
+            // Tab 切换时容器可能被隐藏，需要更长的延迟确保容器可见
+            if (mapContainer.value && indexMap.kmap.map) {
+                // 检查容器是否可见
+                const checkAndUpdateSize = () => {
+                    const container = mapContainer.value;
+                    if (container) {
+                        const rect = container.getBoundingClientRect();
+                        // 如果容器可见（有宽度和高度），更新地图尺寸
+                        if (rect.width > 0 && rect.height > 0) {
+                            indexMap.kmap.map.updateSize();
+                        } else {
+                            // 如果容器不可见，继续等待
+                            setTimeout(checkAndUpdateSize, 100);
+                        }
+                    }
+                };
+                // 延迟检查，确保 tab 切换完成
+                setTimeout(checkAndUpdateSize, 200);
+            }
+        }
+        resetAndLoad();
+    });
+});
+
+// 监听 activeIndex 变化，重新加载数据
+watch(activeIndex, () => {
+    resetAndLoad();
+});
+
+// 加载列表数据（支持分页）
+async function getSimpleList(isLoadMore = false) {
+    if (!isLoadMore) {
+        // 重置分页
+        page.value = 0;
+        finished.value = false;
+        // taskList.value = [];
+        loading.value = true;
+    } else {
+        loadingMore.value = true;
+    }
+
+    const params = {
+        ...selectParma.value,
+        page: page.value,
+        limit: limit.value,
+        flowStatus: 5,
+    };
+
+    try {
+        const { data } = await VE_API.home.listUnansweredFarms(params);
+
+        if (data && data.length > 0) {
+            // 为每个item初始化timelineList
+            const newItems = data.map((item) => {
+                let sourceData = item?.latestPhenologyProgressBroadcast?.sourceData;
+                if (sourceData) {
+                    try {
+                        sourceData = JSON.parse(sourceData);
+                    } catch (e) {
+                        console.error("解析sourceData失败:", e);
+                        sourceData = null;
+                    }
+                }
+                return {
+                    ...item,
+                    sourceData,
+                    timelineList: [],
+                };
+            });
+
+            // 串行请求，为每个农场获取时间轴数据
+            for (let i = 0; i < newItems.length; i++) {
+                await getFutureFarmWorkWarning(newItems[i]);
+            }
+
+            // 追加数据
+            // const newTaskList = [...taskList.value, ...newItems];
+            // taskList.value = newTaskList.filter(item => item.timelineList.length > 0);
+
+            // 更新分页
+            page.value += 1;
+
+            // 判断是否还有更多数据
+            if (data.length < limit.value) {
+                finished.value = true;
+            }
+
+            // 更新地图数据
+            indexMap.initData(taskList.value, '', 'farmPoint');
+        } else {
+            finished.value = true;
+            if (taskList.value.length === 0) {
+                noData.value = true;
+            }
+        }
+
+        // 数据处理完成后再设置loading为false
+        if (!isLoadMore) {
+            loading.value = false;
+        } else {
+            loadingMore.value = false;
+        }
+    } catch (error) {
+        console.error("获取任务列表失败:", error);
+        if (!isLoadMore) {
+            loading.value = false;
+        } else {
+            loadingMore.value = false;
+        }
+        finished.value = true;
+        if (taskList.value.length === 0) {
+            noData.value = true;
+        }
+    }
+}
+
+// 滚动加载更多
+const onLoad = () => {
+    if (!finished.value && !loadingMore.value) {
+        getSimpleList(true);
+    }
+};
+
+// 重置并重新加载
+const resetAndLoad = () => {
+    getSimpleList(false);
+};
+
+function handleActiveFilter(i) {
+    activeIndex.value = i;
+    selectParma.value.districtCode = cityCode.value;
+    selectParma.value.farmWorkTypeId = null;
+    const statusMap = { 0: "待接受", 2: "已接受", 3: "执行中" };
+    activeStatus.value = statusMap[i] || "待接受";
+    filterDate.value = null;
+    taskList.value = [...fullTaskList.value];
+    calendarRef.value?.clearSelection();
+    syncCalendarData();
+}
+
+function handleRemindCustomer(item) {
+    // 接受
+}
+</script>
+
+<style lang="scss" scoped>
+.task-page {
+    width: 100%;
+    height: calc(100vh - 50px);
+    overflow: auto;
+    box-sizing: border-box;
+    background: #FFFFFF;
+
+    .map-container {
+        width: 100%;
+        height: 162px;
+        clip-path: inset(0px round 8px);
+    }
+
+    .list-box {
+        background: #F1F3F4;
+        padding: 12px 12px 8px 12px;
+
+        .list-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .action-btn {
+                box-sizing: border-box;
+                height: 32px;
+                line-height: 30px;
+                color: #2199F8;
+                font-size: 14px;
+                border-radius: 5px;
+                padding: 0 10px;
+                background: #FFFFFF;
+                border: 1px solid #2199F8;
+                color: #2199F8;
+            }
+        }
+    }
+
+    .select-group {
+        display: flex;
+        padding: 0px 12px 0 12px;
+
+        .select-item {
+            width: 100%;
+
+            ::v-deep {
+                .el-select__wrapper {
+                    text-align: center;
+                    gap: 2px;
+                    box-shadow: none;
+                    justify-content: center;
+                    background: none;
+                }
+
+                .el-select__selection {
+                    flex: none;
+                    width: fit-content;
+                }
+
+                .el-select__placeholder {
+                    position: static;
+                    transform: none;
+                    width: fit-content;
+                    color: rgba(0, 0, 0, 0.2);
+                }
+
+                .el-select__caret {
+                    color: rgba(0, 0, 0, 0.2);
+                }
+            }
+        }
+    }
+
+    .calendar-container {
+        padding: 4px 12px 8px 12px;
+    }
+
+    .task-top {
+        padding: 10px 12px 0 12px;
+    }
+
+    .task-content-loading {
+        height: 80px;
+        border-radius: 8px;
+        position: absolute;
+        top: 60px;
+        left: 0;
+        width: 100%;
+    }
+
+    .task-content {
+        min-height: 80px;
+    }
+
+    .empty-data {
+        text-align: center;
+        font-size: 14px;
+        color: #6f7274;
+        padding: 20px 0;
+    }
+
+    .task-list {
+        position: relative;
+        background: #fff;
+    }
+
+    .list-filter {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        margin-top: 10px;
+
+        .filter-item {
+            padding: 0 12px;
+            height: 32px;
+            color: #1D2129;
+            font-size: 14px;
+            border-radius: 20px;
+            position: relative;
+
+            &.active {
+                color: #2199f8;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 2px;
+                    background: #2199f8;
+                }
+            }
+        }
+    }
+
+    .work-task-list {
+        margin-top: 10px;
+
+        .task-item {
+            margin-top: 10px;
+            background: #fff;
+            border-radius: 8px;
+            padding: 12px 16px;
+            border: 1px solid rgba(0, 0, 0, 0.08);
+            position: relative;
+
+            &.timeout-item {
+                border: 1px solid #f74e4e;
+            }
+
+            .item-title {
+                display: flex;
+                align-items: center;
+                padding-bottom: 10px;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+                color: #1d2129;
+                font-size: 16px;
+
+                .task-icon {
+                    width: 16px;
+                }
+
+                .title-text {
+                    padding-left: 8px;
+                }
+
+                .task-status {
+                    margin-left: 8px;
+                    border-radius: 2px;
+                    height: 20px;
+                    line-height: 20px;
+                    padding: 1px 6px;
+                    box-sizing: border-box;
+                    font-size: 12px;
+                    color: #ffb32f;
+                    background: rgba(255, 179, 47, 0.1);
+
+                    &.task-status--1 {
+                        background: rgba(33, 153, 248, 0.1);
+                        color: #2199f8;
+                    }
+
+                    &.task-status--2 {
+                        background: rgba(255, 179, 47, 0.1);
+                        color: #FFB32F;
+                    }
+
+                    &.task-status--3 {
+                        background: rgba(58, 173, 148, 0.1);
+                        color: #3AAD94;
+                    }
+                }
+            }
+
+            .task-tag {
+                position: absolute;
+                right: 0;
+                top: 0;
+                background: rgba(255, 149, 61, 0.1);
+                color: #F46E00;
+                font-size: 12px;
+                padding: 0 10px;
+                height: 25px;
+                line-height: 25px;
+                border-radius: 0 8px 0 8px;
+
+                &.timeout {
+                    background: rgba(255, 106, 106, 0.1);
+                    color: #FF6A6A;
+                    display: flex;
+                    align-items: center;
+                    gap: 2px;
+                }
+            }
+
+            .item-content {
+                padding: 12px 0;
+
+                .excutor-info {
+                    margin-top: 12px;
+                    background: rgba(189, 189, 189, 0.1);
+                    border-radius: 6px;
+                    padding-bottom: 12px;
+
+                    .excutor-info-top {
+                        padding: 12px 12px 0 12px;
+                    }
+                }
+
+                .executor-stats {
+                    display: flex;
+                    align-items: center;
+                    padding-top: 10px;
+                    justify-content: space-around;
+                }
+
+                .cell-line {
+                    height: 20px;
+                    width: 1px;
+                    background: #e5e6eb;
+                }
+
+                .stat-value {
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #0B0B0B;
+                    margin-bottom: 4px;
+                    word-break: break-all;
+                }
+
+                .stat-label {
+                    font-size: 12px;
+                    line-height: 20px;
+                    color: rgba(107, 107, 107, 0.5);
+                    text-align: center;
+                }
+            }
+
+            .item-info {
+                color: rgba(111, 114, 116, 0.6);
+                font-size: 14px;
+                line-height: 21px;
+
+                .info-item {
+                    display: flex;
+
+                    .info-name {
+                        flex: none;
+                    }
+                }
+
+                .val-text {
+                    // color: #1d2129;
+                }
+
+                .info-item+.info-item {
+                    padding-top: 6px;
+                }
+            }
+
+            .task-footer {
+                padding-top: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .farm-info {
+                    font-size: 14px;
+                    color: rgba(32, 32, 32, 0.4);
+                }
+            }
+
+            .btn-group {
+                display: flex;
+                align-items: center;
+                justify-content: end;
+                gap: 10px;
+            }
+
+            .edit-btn {
+                height: 30px;
+                padding: 0 16px;
+                border-radius: 24px;
+                text-align: center;
+                line-height: 30px;
+                font-size: 14px;
+
+                &.normal {
+                    background: #F6F6F6;
+                    color: #000000;
+                }
+
+                &.primary {
+                    background: #FF953D;
+                    color: #fff;
+                }
+            }
+
+            .compare-imgs {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                position: relative;
+                margin: 10px 0;
+
+                .img-tag {
+                    position: absolute;
+                    z-index: 10;
+                    top: 0;
+                    left: 0;
+                    font-size: 12px;
+                    color: #fff;
+                    background: rgba(0, 0, 0, 0.7);
+                    border-radius: 5px 0 5px 0;
+                    padding: 0 8px;
+                    height: 15px;
+                    line-height: 15px;
+
+                    &.right-tag {
+                        right: 0;
+                        left: auto;
+                        border-radius: 0 5px 0 5px;
+                    }
+                }
+
+                .img-item {
+                    flex: 1;
+                    height: 120px;
+                    overflow: hidden;
+                    border: 0.5px solid rgba(0, 0, 0, 0.1);
+                    border-radius: 5px;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 5px;
+                        object-fit: cover;
+                    }
+                }
+            }
+        }
+
+        .unqualified-reason {
+            color: #f74e4e;
+            font-size: 12px;
+            padding: 4px 10px;
+            background: rgba(247, 78, 78, 0.08);
+            border-radius: 4px;
+            line-height: 18px;
+        }
+
+        .empty-tip {
+            text-align: center;
+            color: #86909c;
+            font-size: 14px;
+            padding: 20px 0;
+        }
+    }
+}
+</style>