feat:对接作物档案接口

src/api/modules/monitor.js

@@ -95,7 +95,7 @@ module.exports = {
     },
     // 获取作物档案列表
     getArchivesList: {
-        url: config.base_dev_url + "container_crop_archive/cropArchive",
+        url: config.base_dev_url + "container_crop_archive/cropArchiveV2",
         type: "get",
     },
     // 获取农事记录

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -11,18 +11,16 @@
                 </div> -->
                 <div v-for="(p, idx) in phenologyList" :key="`phenology-${uniqueTimestamp}-${idx}`"
                     class="phenology-bar">
-                    <div class="phenology-title"
-                        :class="{
-                            'phenology-title--wide': showPhenologyName && !phenologyNeedsTwoLabelColumns(p),
-                            'phenology-red': !shouldShowBlue(p),
-                            'phenology-blue': shouldShowBlue(p),
-                        }"
-                        v-if="shouldShowPhenologyBarTitle(idx)">
+                    <div class="phenology-title" :class="{
+                        'phenology-title--wide': showPhenologyName && !phenologyNeedsTwoLabelColumns(p),
+                        'phenology-red': !shouldShowBlue(p),
+                        'phenology-blue': shouldShowBlue(p),
+                    }" v-if="shouldShowPhenologyBarTitle(idx)">
                         {{ p.phenologyName }}
                     </div>
                     <div v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
                         :key="`reproductive-${uniqueTimestamp}-${idx}-${rIdx}`" class="reproductive-item">
-                        <div class="arranges" :class="{'arranges-min':!showPhenologyName}">
+                        <div class="arranges" :class="{ 'arranges-min': !showPhenologyName }">
                             <div v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList) ? r.farmWorkArrangeList : []"
                                 :key="`arrange-${uniqueTimestamp}-${idx}-${rIdx}-${aIdx}`" class="arrange-card" :class="[
                                     getArrangeStatusClass(fw),
@@ -36,22 +34,21 @@
                                 ]" @click="handleRowClick(fw)">
                                 <div class="card-content">
                                     <div class="card-left"
+                                        @click.stop="handleStatusDetail(fw)"
                                         :style="{ width: fw.sourceDataJson && fw.sourceDataJson.resFilename ? 'calc(100% - 45px)' : '100%' }"
                                         v-if="pageType === 'agri_plan'">
                                         <div class="left-info">
                                             <div class="left-date">{{ formatDate(fw.createTime) }}</div>
-                                            <div class="text" @click.stop="handleStatusDetail(fw)">
+                                            <div class="status-tag">{{ archiveTypeObj[fw.archiveType] }}</div>
+                                            <div class="text">
                                                 <span class="van-ellipsis">{{ fw.title }}</span>
-                                                <!-- <el-icon v-if="shouldShowBlue(p)">
-                                                    <ArrowRight />
-                                                </el-icon> -->
                                             </div>
-                                            <!-- <div class="text green van-ellipsis" v-if="fw?.sourceType === 7">
-                                                执行者：{{ fw.sourceDataJson.executorName }}
-                                            </div> -->
                                         </div>
-                                        <div class="title-text van-ellipsis"
-                                            v-if="!shouldGrayFarmWorkCard(fw, p) && fw.sourceType != 4">{{ fw.content }}</div>
+                                        <div class="title-text van-ellipsis">{{ fw.description }}</div>
+                                        <!-- <div class="title-text van-ellipsis"
+                                            v-if="!shouldGrayFarmWorkCard(fw, p) && fw.sourceType != 4">{{ fw.content }}
+                                        </div>
+                                        <div v-else class="title-text van-ellipsis">点击查看区域</div> -->
                                     </div>
                                     <div class="card-left agri-record-card" v-else>
                                         <div class="left-info">
@@ -63,9 +60,10 @@
                                                 </el-icon>
                                             </div>
                                         </div>
-                                        <div class="title-wrap van-ellipsis" v-if="fw.flowStatus != null && fw.flowStatus != 0 && fw.flowStatus != -2">
-                                            <div class="title-text">{{ handleTagType(fw.flowStatus, fw.executeEvidenceAuditStatus) }}</div>
-                                            <!-- <div class="title-text blue-tag" v-if="fw?.executionLimitDays >= 0">限时溯源</div> -->
+                                        <div class="title-wrap van-ellipsis"
+                                            v-if="fw.flowStatus != null && fw.flowStatus != 0 && fw.flowStatus != -2">
+                                            <div class="title-text">{{ handleTagType(fw.flowStatus,
+                                                fw.executeEvidenceAuditStatus) }}</div>
                                         </div>
                                     </div>
                                     <div class="card-right"
@@ -80,18 +78,18 @@
                                                 fw?.sourceDataJson?.executeImageUrls?.length || 0 }}
                                         </div>
                                     </div>
+                                    <div class="status-right" v-if="fw.archiveType === 2">待校准</div>
                                 </div>
                             </div>
                         </div>
                         <template v-if="showPhenologyName">
                             <template v-if="r.name === p.phenologyName">
                                 <template v-if="!shouldShowPhenologyBarTitle(idx)">
-                                    <div class="phenology-name"
-                                        :class="{
-                                            single: showPhenologyName && !phenologyNeedsTwoLabelColumns(p),
-                                            'phenology-red': !shouldShowBlueLeft(p, r),
-                                            'text-blue': shouldShowBlueLeft(p, r),
-                                        }"
+                                    <div class="phenology-name" :class="{
+                                        single: showPhenologyName && !phenologyNeedsTwoLabelColumns(p),
+                                        'phenology-red': !shouldShowBlueLeft(p, r),
+                                        'text-blue': shouldShowBlueLeft(p, r),
+                                    }"
                                         :style="p.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''">
                                         {{ p.phenologyName }}
                                     </div>
@@ -183,13 +181,6 @@ const props = defineProps({
     },
 });
 
-const farmWorkType = {
-    0: "预警农事",
-    1: "标准农事",
-    2: "建议农事",
-    3: "自建农事",
-};
-
 const emits = defineEmits(["row-click", "card-click"]);
 
 const solarTerms = ref([]);
@@ -266,11 +257,28 @@ let resizeObserver = null;
 const isEmpty = ref(false);
 // 标记是否正在请求数据，防止重复请求
 const isRequesting = ref(false);
-// 记录上一次请求的 regionId + problemZoneId，避免相同参数重复请求
+// 记录上一次请求作用域，避免相同参数重复请求
 const lastRequestedFarmId = ref(null);
 
 const farmWorkPlanScopeKey = () =>
-    JSON.stringify([props.regionId ?? null, props.problemZoneId ?? null]);
+    JSON.stringify([
+        props.pageType ?? null,
+        props.farmId ?? null,
+        props.regionId ?? null,
+        props.problemZoneId ?? null,
+        props.year ?? null,
+        props.containerId ?? null,
+    ]);
+
+const resetTimelineData = () => {
+    solarTerms.value = [];
+    phenologyList.value = [];
+};
+
+const setEmptyTimelineData = () => {
+    resetTimelineData();
+    isEmpty.value = true;
+};
 
 // 获取当前季节
 const getCurrentSeason = () => {
@@ -588,9 +596,30 @@ const handleSeasonClick = (seasonValue) => {
     wrap.scrollTo({ top: scrollTop, behavior: "smooth" });
 };
 
+
+const archiveTypeObj = {
+    1: "管理信息",
+    2: "物候进程",
+    3: "物候进程",
+    4: "异常发现",
+    5: "气象风险",
+    6: "农事进度",
+};
+
+/**
+    MANAGEMENT_INFO(1, "管理信息"),
+    EXPECTED_PHENOLOGY_PROGRESS(2, "预计物候进程"),
+    PHENOLOGY_PROGRESS(3, "物候进程"),
+    ABNORMAL_DISCOVERY(4, "异常发现"),
+    WEATHER_RISK(5, "气象风险"),
+    FARM_WORK_PROGRESS(6, "农事进度");
+ * 农事状态样式映射
+ * @param fw 农事
+ * @returns 农事状态样式
+ */
 // 农事状态样式映射
 const getArrangeStatusClass = (fw) => {
-    const t = props.pageType === 'agri_record' ? fw?.flowStatus : fw?.sourceType;
+    const t = props.pageType === 'agri_record' ? fw?.flowStatus : fw?.archiveType;
     if (props.pageType === 'agri_record') {
         if (t == null || t == 0 || t == -2) return "status-default";
         const status = getAuditStatusPriority(fw.executeEvidenceAuditStatus);
@@ -600,8 +629,11 @@ const getArrangeStatusClass = (fw) => {
         if (t == 5) return "status-normal";
         return "status-act";
     } else {
-        if (t == 10) return "status-complete";
-        if (t == 11) return "status-warning";
+        if (t == 1) return "status-green-info";
+        if (t == 4 && fw.sourceDataJson?.abnormalType === '病虫') return "status-warning";
+        if (t == 4 && fw.sourceDataJson?.abnormalType !== '病虫') return "status-complete";
+        if (t == 5) return "status-orange";
+        if (t == 6) return "status-green-farm";
         return "status-normal";
     }
 };
@@ -614,7 +646,7 @@ const handleRowClick = (item) => {
 
 // 获取农事规划数据
 const getFarmWorkPlan = () => {
-    phenologyList.value = [];
+    resetTimelineData();
     if (!props.farmId) return;
     const scopeKey = farmWorkPlanScopeKey();
     if (isRequesting.value || lastRequestedFarmId.value === scopeKey) return;
@@ -631,15 +663,15 @@ const getFarmWorkPlan = () => {
         savedScrollTop = timelineContainerRef.value.scrollTop || 0;
     }
 
-    const apiFunc = props.pageType === 'agri_record' ? VE_API.monitor.getFarmWorkPlan : VE_API.monitor.getArchivesList;
+    const apiFunc = props.pageType === "agri_record" ? VE_API.monitor.getFarmWorkPlan : VE_API.monitor.getArchivesList;
 
     const params = {
         farmId: props.farmId,
         regionId: props.regionId,
         problemZoneId: props.problemZoneId,
         year: props.year,
-    }
-    if (props.pageType === 'agri_record') {
+    };
+    if (props.pageType === "agri_record") {
         params.containerId = props.containerId;
     }
 
@@ -667,10 +699,10 @@ const getFarmWorkPlan = () => {
                             const reproductiveList = Array.isArray(it.reproductiveList)
                                 ? await Promise.all(
                                     it.reproductiveList.map(async (r) => {
-                                        const farmWorkArrangeList = Array.isArray(r.broadcastList || r.interactionFarmWorkList)
+                                        const farmWorkArrangeList = Array.isArray(r.archiveList || r.interactionFarmWorkList)
                                             ? await Promise.all(
-                                                (r.broadcastList || r.interactionFarmWorkList).map(async (fw) => {
-                                                    const sourceDataJson = parseSourceDataSafe(fw.sourceData);
+                                                (r.archiveList || r.interactionFarmWorkList).map(async (fw) => {
+                                                    const sourceDataJson = parseSourceDataSafe(fw.data);
                                                     // 如果有 imageIds，获取图片 URL
                                                     if (
                                                         sourceDataJson &&
@@ -686,24 +718,6 @@ const getFarmWorkPlan = () => {
                                                             }
                                                         );
                                                         sourceDataJson.resFilename = resFilenameList;
-                                                        // 调用 findSuitabilityByPoint 接口获取天气适宜性信息
-                                                        if (fw.farmId && fw.createTime) {
-                                                            try {
-                                                                const dateStr = formatDateForAPI(fw.createTime);
-                                                                if (dateStr) {
-                                                                    const suitabilityRes = await VE_API.ali.findSuitabilityByPoint({
-                                                                        farmId: fw.farmId,
-                                                                        date: dateStr,
-                                                                    });
-                                                                    if (suitabilityRes && suitabilityRes.code === 0 && suitabilityRes.data) {
-                                                                        // 将返回的数据合并到 sourceDataJson
-                                                                        sourceDataJson.suitability = suitabilityRes.data;
-                                                                    }
-                                                                }
-                                                            } catch (error) {
-                                                                console.error("获取天气适宜性信息失败:", error);
-                                                            }
-                                                        }
                                                     }
                                                     return {
                                                         ...fw,
@@ -782,27 +796,19 @@ const getFarmWorkPlan = () => {
                     });
                 });
 
-                // 收集所有farmWorkId
-                const farmWorkIds = [];
-                const farmWorks = [];
-                phenologyList.value.forEach((phenology) => {
-                    if (Array.isArray(phenology.reproductiveList)) {
-                        phenology.reproductiveList.forEach((reproductive) => {
-                            if (Array.isArray(reproductive.farmWorkArrangeList)) {
-                                reproductive.farmWorkArrangeList.forEach((farmWork) => {
-                                    if (farmWork.farmWorkId && farmWork.isFollow !== 0) {
-                                        farmWorkIds.push(farmWork.farmWorkId);
-                                        farmWorks.push(farmWork);
-                                    }
-                                });
-                            }
-                        });
-                    }
-                });
+                const farmWorks = phenologyList.value.flatMap((phenology) =>
+                    (Array.isArray(phenology?.reproductiveList) ? phenology.reproductiveList : []).flatMap((reproductive) =>
+                        Array.isArray(reproductive?.farmWorkArrangeList) ? reproductive.farmWorkArrangeList : []
+                    )
+                );
+                const quoteValidationFarmWorks = farmWorks.filter(
+                    (farmWork) => farmWork?.farmWorkId && farmWork?.isFollow !== 0
+                );
+                const farmWorkIds = quoteValidationFarmWorks.map((farmWork) => farmWork.farmWorkId);
 
                 // 调用验证方法，传入所有ids
                 if (farmWorkIds.length > 0) {
-                    batchValidatePesticideFertilizerQuotes(farmWorkIds, farmWorks);
+                    batchValidatePesticideFertilizerQuotes(farmWorkIds, quoteValidationFarmWorks);
                 }
 
                 // 判断是否为空数据：没有节气或没有物候期数据
@@ -813,18 +819,14 @@ const getFarmWorkPlan = () => {
                 }
             } else {
                 // 接口返回错误码，显示暂无数据
-                isEmpty.value = true;
-                solarTerms.value = [];
-                phenologyList.value = [];
+                setEmptyTimelineData();
             }
         })
         .catch((error) => {
             console.error("获取农事规划数据失败:", error);
             ElMessage.error("获取农事规划数据失败");
             // 接口报错，显示暂无数据
-            isEmpty.value = true;
-            solarTerms.value = [];
-            phenologyList.value = [];
+            setEmptyTimelineData();
         })
         .finally(() => {
             // 请求完成，重置请求标志
@@ -833,69 +835,61 @@ const getFarmWorkPlan = () => {
 };
 
 const updateFarmWorkPlan = () => {
-    solarTerms.value = [];
-    phenologyList.value = [];
+    resetTimelineData();
     isEmpty.value = false;
     getFarmWorkPlan();
 };
 
-watch(
-    () => props.regionId,
-    (val, oldVal) => {
-        // 如果 farmId 没有值，则不触发
-        if (!val) return;
-        // 如果 farmId 变化了，重置上次请求的 farmId，允许请求新数据
-        if (val !== oldVal) {
-            lastRequestedFarmId.value = null;
-        }
-        // getFarmWorkPlan 内部已经有防重复请求的检查，这里直接调用即可
-        isInitialLoad.value = true;
-        updateFarmWorkPlan();
-    },
-    { immediate: true }
-);
-
-watch(
-    () => props.year,
-    (val, oldVal) => {
-        if (!props.farmId) return;
-        if (val !== oldVal) {
-            lastRequestedFarmId.value = null;
-        }
-        isInitialLoad.value = true;
-        updateFarmWorkPlan();
-    },
-);
-
 const showPhenologyName = computed(() => {
     return !props.problemZoneId;
 });
 
 watch(
-    () => props.problemZoneId,
+    () => [props.farmId, props.regionId, props.year, props.problemZoneId, props.pageType, props.containerId],
     (val, oldVal) => {
         if (!props.farmId) return;
-        if (val !== oldVal) {
+        const changed =
+            !oldVal ||
+            val.some((item, index) => item !== oldVal[index]);
+        if (changed) {
             lastRequestedFarmId.value = null;
         }
         isInitialLoad.value = true;
         updateFarmWorkPlan();
     },
+    { immediate: true }
 );
 
 const handleStatusDetail = (fw) => {
     // 跳转前记录当前滚动位置
     saveTimelineScrollTop();
     emits('card-click');
+    console.log(fw);
     if (props.pageType === 'agri_plan') {
-        console.log(fw);
-        if (fw?.sourceData && fw?.id) {
+        if (fw?.archiveType === 2) {
+            // router.push(`/interaction_list?farmId=${farmIdData.value}&regionId=${popupData.value.regionId}&interactionTypeId=${popupData.value.interactionTypeId}`);
+        }else if(fw?.archiveType === 6){
+            router.push({
+                path: "/work_detail",
+                query: {
+                    miniJson: JSON.stringify({
+                        paramsPage: JSON.stringify({
+                            farmId: 98570,
+                            farmWorkLibId: '832268348690534411',
+                            recordId: "832268363366404096",
+                            reproductiveId: 149,
+                            typeId: props.typeId
+                        }),
+                    }),
+                },
+            });
+        }else{
             router.push({
                 path: "/agricultural_detail",
                 query: {
                     id: fw?.id,
-                    title: fw?.title,
-                    content: fw?.content,
+                    title: archiveTypeObj[fw?.archiveType],
+                    content: fw?.description,
                 },
             });
         }
@@ -991,13 +985,6 @@ const getPhenologyTermProgress = (phenologyProgress) => {
     return matchedTermProgress;
 };
 
-const flowStatusStr = {
-    '3': '待认证',
-    '-1': '已过期',
-    '-2': '已过期',
-    '5': '已认证',
-}
-
 const handleTagType = (tagType, executeEvidenceAuditStatus) => {
     if (tagType == 0) return "待触发";
     if (tagType == -1) return "已过期";
@@ -1288,6 +1275,42 @@ watch(
 </script>
 
 <style scoped lang="scss">
+@mixin arrange-card-status($color, $title-color: null, $title-bg: null, $text-color: null) {
+    border-color: $color;
+
+    .card-content {
+        @if $text-color !=null {
+            color: $text-color;
+        }
+    }
+
+    .card-left {
+        .left-info {
+            .left-date {
+                color: $color;
+                border-color: $color;
+            }
+            .status-tag {
+                background: $color;
+            }
+        }
+
+        .title-text {
+            @if $title-color !=null {
+                color: $title-color;
+            }
+
+            @if $title-bg !=null {
+                background: $title-bg;
+            }
+        }
+    }
+
+    &::before {
+        border-right-color: $color;
+    }
+}
+
 .timeline-container {
     height: 100%;
     overflow: auto;
@@ -1417,7 +1440,8 @@ watch(
                 min-width: calc(100vw - 83px);
                 gap: 5px;
                 letter-spacing: 0px;
-                &.arranges-min{
+
+                &.arranges-min {
                     max-width: calc(100vw - 58px);
                 }
 
@@ -1454,18 +1478,26 @@ watch(
                                 .left-date {
                                     color: #2199f8;
                                     border: 1px solid #2199f8;
-                                    padding: 1px 0;
                                     border-radius: 2px;
                                     font-size: 12px;
-                                    width: 45px;
-                                    box-sizing: border-box;
+                                    width: 36px;
+                                    height: 20px;
+                                    line-height: 20px;
+                                }
+
+                                .status-tag {
+                                    font-size: 12px;
+                                    background: #47B881;
+                                    color: #fff;
+                                    width: 63px;
+                                    border-radius: 2px;
                                 }
 
                                 .text {
                                     display: flex;
                                     align-items: center;
                                     gap: 2px;
-                                    width: calc(100% - 50px);
+                                    width: calc(100% - 115px);
                                 }
                             }
 
@@ -1483,6 +1515,9 @@ watch(
                             }
 
                             &.agri-record-card {
+                                .text{
+                                    width: 100%;
+                                }
                                 .title-wrap {
                                     display: flex;
                                     align-items: flex-end;
@@ -1496,7 +1531,7 @@ watch(
                                         color: #B7B7B7;
                                     }
 
-                                    .blue-tag{
+                                    .blue-tag {
                                         color: #2199F8;
                                         background: rgba(33, 153, 248, 0.1);
                                     }
@@ -1532,6 +1567,17 @@ watch(
                                 justify-content: center;
                             }
                         }
+
+                        .status-right {
+                            position: absolute;
+                            right: 0;
+                            top: 0;
+                            font-size: 12px;
+                            color: #fff;
+                            background: #2199F8;
+                            border-radius: 2px;
+                            padding: 0 5px;
+                        }
                     }
 
                     &::before {
@@ -1552,34 +1598,20 @@ watch(
                     opacity: 0.3;
                 }
 
-                .arrange-card.status-normal {
-                    border-color: #2199f8;
+                // .arrange-card.status-normal {
+                //     border-color: #2199f8;
 
-                    &::before {
-                        border-right-color: #2199f8;
-                    }
+                //     &::before {
+                //         border-right-color: #2199f8;
+                //     }
+                // }
+
+                .arrange-card.status-normal {
+                    @include arrange-card-status(#2199f8, #2199f8, rgba(33, 153, 248, 0.1));
                 }
 
                 .arrange-card.status-warning {
-                    border-color: #FF4E4E;
-
-                    .card-left {
-                        .left-info {
-                            .left-date {
-                                color: #FF4E4E;
-                                border-color: #FF4E4E;
-                            }
-                        }
-
-                        .title-text {
-                            color: #FF4E4E;
-                            background: rgba(255, 78, 78, 0.1);
-                        }
-                    }
-
-                    &::before {
-                        border-right-color: #FF4E4E;
-                    }
+                    @include arrange-card-status(#FF4E4E, #FF4E4E, rgba(255, 78, 78, 0.1));
                 }
 
                 .arrange-card.status-warning.status-warning-agri-record {
@@ -1592,7 +1624,9 @@ watch(
                                 border-color: #bbbbbb;
                             }
                         }
-                        .text-name,.text-icon {
+
+                        .text-name,
+                        .text-icon {
                             color: #bbbbbb;
                         }
                     }
@@ -1603,133 +1637,65 @@ watch(
                 }
 
                 .arrange-card.status-complete {
-                    border-color: #FF943D;
+                    @include arrange-card-status(#FF943D, #FF943D, rgba(255, 149, 61, 0.1));
+                }
 
-                    .card-left {
-                        .left-info {
-                            .left-date {
-                                color: #FF943D;
-                                border-color: #FF943D;
-                            }
-                        }
+                .arrange-card.status-green-info {
+                    @include arrange-card-status(#47B881, #fff, rgba(71, 184, 129, 0.1));
+                }
 
-                        .title-text {
-                            color: #FF943D;
-                            background: rgba(255, 149, 61, 0.1);
-                        }
-                    }
+                .arrange-card.status-orange {
+                    @include arrange-card-status(#FFB129, #FFB129, rgba(253, 181, 55, 0.1));
+                }
 
-                    &::before {
-                        border-right-color: #FF943D;
-                    }
+                .arrange-card.status-green-farm {
+                    @include arrange-card-status(#5BB349, #5BB349, rgba(91, 179, 73, 0.1));
                 }
 
                 .arrange-card.status-act {
-                    border-color: #FF953D;
-
-                    .card-left {
-                        .left-info {
-                            .left-date {
-                                color: #FF953D;
-                                border-color: #FF953D;
-                            }
-                        }
-
-                        .title-text {
-                            color: #fff;
-                            background: #FF953D;
-                        }
-                    }
-
-                    &::before {
-                        border-right-color: #FF953D;
-                    }
+                    @include arrange-card-status(#FF953D, #fff, #FF953D);
                 }
 
                 .arrange-card.status-default {
-                    border-color: #BBBBBB;
+                    @include arrange-card-status(#BBBBBB, #fff, #BBBBBB);
 
                     .card-left {
                         .left-info {
-                            .left-date {
-                                color: #BBBBBB;
-                                border-color: #BBBBBB;
-                            }
 
                             .text-name,
                             .text-icon {
                                 color: #BBBBBB;
                             }
                         }
-
-                        .title-text {
-                            color: #fff;
-                            background: #BBBBBB;
-                        }
-                    }
-
-                    &::before {
-                        border-right-color: #BBBBBB;
                     }
                 }
 
                 // 未来节气对应的农事卡片：跟随左侧物候期的“未开始”灰色样式
                 .arrange-card.future-card {
-                    border-color: #e4e4e4;
-
-                    .card-content {
-                        color: rgba(36, 36, 36, 0.5);
-                    }
+                    @include arrange-card-status(#e4e4e4, null, null, rgba(36, 36, 36, 0.5));
 
                     .card-left {
                         .left-info {
                             .left-date {
                                 color: #CACACA;
-                                border-color: #e4e4e4;
                             }
                         }
                     }
-
-                    &::before {
-                        border-right-color: #e4e4e4;
-                    }
                 }
 
                 .arrange-card.status-warning-bg {
-                    border-color: #FF943D;
-
-                    .card-content {
-                        color: #000;
-                    }
-
-                    .card-left {
-                        .left-info {
-                            .left-date {
-                                color: #FF943D;
-                                border-color: #FF943D;
-                            }
-                        }
-
-                        .title-text {
-                            color: #fff;
-                            background: #FF943D;;
-                        }
-                    }
-
-                    &::before {
-                        border-right-color: #FF943D;
-                    }
+                    @include arrange-card-status(#FF943D, #fff, #FF943D, #000);
                 }
             }
         }
     }
 
-    .reproductive-item + .reproductive-item {
+    .reproductive-item+.reproductive-item {
         margin-top: 4px;
         padding-top: 0;
     }
 
-    .phenology-bar + .phenology-bar {
+    .phenology-bar+.phenology-bar {
         margin-top: 4px;
         padding-top: 0;
     }

src/views/old_mini/monitor/index.vue

@@ -31,15 +31,15 @@
                 </div>
             </div>
             <!-- 品种选择 -->
-            <div class="variety-tabs" v-if="farmsCategoryList.length > 0">
-                <div v-for="(v, index) in farmsCategoryList" :key="index" class="variety-tab"
-                    :class="{ 'variety-tab--active': activeFarmsCategory === v.speciesId }" @click="handleFarmsCategoryClick(v, index)">
+            <div class="category-tabs tabs-list" v-if="farmsCategoryList.length > 0">
+                <div v-for="(v, index) in farmsCategoryList" :key="index" class="item-tab"
+                    :class="{ 'item-tab--active': activeFarmsCategory === v.speciesId }" @click="handleFarmsCategoryClick(v, index)">
                     {{ v.speciesName }}
                 </div>
             </div>
-            <div class="variety-tabs" v-if="varietyTabs.length > 0">
-                <div v-for="(v, index) in varietyTabs" :key="index" class="variety-tab"
-                    :class="{ 'variety-tab--active': activeVariety === index }" @click="handleVarietyClick(v, index)">
+            <div class="variety-tabs tabs-list" v-if="varietyTabs.length > 0">
+                <div v-for="(v, index) in varietyTabs" :key="index" class="item-tab"
+                    :class="{ 'item-tab--active': activeVariety === index }" @click="handleVarietyClick(v, index)">
                     {{ v.regionName }}
                 </div>
             </div>
@@ -394,14 +394,17 @@ const handleCardClick = () => {
             }
         }
 
-        .variety-tabs {
+        .category-tabs{
+            margin: 10px 0 6px 0;
+        }
+
+        .tabs-list {
             flex-shrink: 0;
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 8px;
-            margin: 10px 0;
 
-            .variety-tab {
+            .item-tab {
                 box-sizing: border-box;
                 padding: 4px;
                 border-radius: 2px;
@@ -415,13 +418,26 @@ const handleCardClick = () => {
                 overflow-wrap: anywhere;
             }
 
-            .variety-tab--active {
+            .item-tab--active {
                 background: #2199F8;
                 color: #ffffff;
             }
+
+            &.variety-tabs{
+                padding: 5px 6px;
+                background: #ffffff;
+                .item-tab{
+                    background: #F6F6F6;
+                }
+                .item-tab--active {
+                    background: rgba(33, 153, 248, 0.1);
+                    color: #2199F8;
+                }
+            }        
         }
 
         .archives-time-line-content {
+            margin-top: 10px;
             flex: 1;
             min-height: 0;
             background: #fff;

src/views/old_mini/monitor/subPages/agriculturalDetail.vue

@@ -2,16 +2,15 @@
     <div class="agricultural-detail">
         <custom-header name="农事详情"></custom-header>
         <div class="detail-content">
-            <div class="card-wrap">
+            <div class="card-wrap" v-if="route.query.title !== '气象风险'">
                 <div class="card-box photo-card">
                     <div class="card-title">
                         <span>农情照片</span>
                         <span class="date">{{ imgInfo.samplingTime }}</span>
                     </div>
-                    <div class="ratio-tip">
+                    <div class="ratio-tip" :class="archiveColorObj[route.query.title]">
                         <div class="title">{{ route.query.title }}</div>
-                        <span>{{ imgInfo.regions }}{{ route.query.content }}</span>
-                        <!-- <span class="ratio">{{ imgInfo.totalCount }}%</span> -->
+                        <span class="content van-ellipsis">{{ route.query.content }}</span>
                     </div>
                     <!-- <div class="location-tip">
                         由于系统审核，某些照片拍摄位置与农场相差超 3 公里，请在农场现场使用水印相机重新拍摄上传，谢谢配合
@@ -28,7 +27,7 @@
                     <div class="map-container" ref="mapContainer"></div>
                 </div>
             </div>
-            <!-- <div class="card-wrap">
+            <div class="card-wrap" v-else>
                 <div class="card-box risk-card">
                     <div class="card-title">
                         <span>农情详情</span>
@@ -45,7 +44,7 @@
                         <div class="warning-tip">预警等级：黄色预警（中等风险），建议在未来48小时内启动预防措施。</div>
                     </div>
                 </div>
-            </div> -->
+            </div>
         </div>
     </div>
 </template>
@@ -65,6 +64,13 @@ const previewImages = computed(() => {
     return list.map((item) => item?.url).filter(Boolean);
 });
 
+const archiveColorObj = {
+    '管理信息': "green",
+    '异常发现': "red",
+    '气象风险': "orange",
+    // '气象风险': "yellow",
+};
+
 const handlePhotoClick = (index) => {
     const images = previewImages.value;
     const safeIndex = Math.min(Math.max(Number(index) || 0, 0), Math.max(images.length - 1, 0));
@@ -77,7 +83,7 @@ const handlePhotoClick = (index) => {
 };
 
 onActivated(() => {
-    getFarmImagePage();
+    // getFarmImagePage();
     indexMap.initMap(imgInfo.value.pointWkt || 'POINT(113.6142086995688 23.585836479509055)', mapContainer.value);
 });
 
@@ -147,7 +153,7 @@ const getFarmImagePage = () => {
                     border-radius: 5px;
                     display: flex;
                     align-items: center;
-
+                    
                     .title {
                         font-size: 12px;
                         color: #fff;
@@ -157,9 +163,27 @@ const getFarmImagePage = () => {
                         border-radius: 2px;
                     }
 
-                    .ratio {
-                        color: #2199f8;
-                        margin-left: 3px;
+                    .content {
+                        max-width: 210px;
+                    }
+
+                    &.green {
+                        background: rgba(71, 184, 129, 0.1);
+                        .title {
+                            background: #47B881;
+                        }
+                    }
+                    &.red {
+                        background: rgba(255, 78, 78, 0.1);
+                        .title {
+                            background: #FF4E4E;
+                        }
+                    }
+                    &.orange {
+                        background: rgba(255, 148, 61, 0.1);
+                        .title {
+                            background: #FF943D;
+                        }
                     }
                 }