src/views/old_mini/agri_record/subPages/statusDetail.vue

@@ -11,23 +11,27 @@
                     </div>
                     <div class="status-sub-text">执行时间已过去 7 天</div>
                 </div> -->
-                <div class="status-left" v-if="status === 1">
-                    <div class="status-text">
-                        <span>已激活</span>
-                    </div>
-                    <div class="status-sub-text">距离执行时间还差 一 天</div>
-                </div>
-                <div class="status-left" v-else-if="status === 5">
+                <div class="status-left" v-if="status === 5">
                     <div class="status-text">
                         <span>已完成</span>
                     </div>
-                    <div class="status-sub-text">执行时间：{{ detailData?.detail?.executeTime }}</div>
+                    <div class="status-sub-text">执行时间：{{ detailData?.detail?.executeDate }}</div>
                 </div>
-                <div class="status-left" v-else-if="status === 0 || !status">
+                 <div class="status-left" v-else-if="status === 0 || !status">
+                     <div class="status-text">
+                         <span>未激活</span>
+                     </div>
+                     <div class="status-sub-text">
+                         预计激活时间 {{ detailData?.activateTime ? formatDate(detailData.activateTime) : "" }}
+                     </div>
+                 </div>
+                <div class="status-left" v-else>
                     <div class="status-text">
-                        <span>未激活</span>
+                        <span>已激活</span>
                     </div>
-                    <div class="status-sub-text">预计激活时间 {{ detailData?.detail?.activateTime }}</div>
+                    <div class="status-sub-text" v-if="daysDiff > 0">距离执行时间还差 {{ daysDiff }} 天</div>
+                    <div class="status-sub-text" v-else-if="daysDiff === 0">触发时间为今天</div>
+                    <div class="status-sub-text" v-else>触发时间已过</div>
                 </div>
             </div>
 
@@ -49,7 +53,7 @@
                         </div>
                         <div class="info-item">
                             <span class="info-label">执行时间</span>
-                            <span class="info-value">{{ detailData?.detail?.executeTime }}</span>
+                            <span class="info-value">{{ detailData?.detail?.executeDate }}</span>
                         </div>
                         <div class="info-item">
                             <span class="info-label">农事建议</span>
@@ -259,7 +263,7 @@
 import { useRouter, useRoute } from "vue-router";
 import { showSuccessToast } from 'vant';
 import { ElMessage } from "element-plus";
-import { ref, onActivated, onDeactivated } from "vue";
+import { ref, onActivated, onDeactivated, computed } from "vue";
 import customHeader from "@/components/customHeader.vue";
 import { Warning } from "@element-plus/icons-vue";
 import upload from "@/components/upload";
@@ -291,6 +295,27 @@ const showCalendar = ref(false);
 const minDate = ref(new Date(2025, 0, 1));
 const maxDate = ref(new Date());
 
+
+// 计算距离执行时间的天数差
+const daysDiff = computed(() => {
+    if (!detailData.value?.detail?.executeDate) {
+        return 0;
+    }
+
+    const executeDate = new Date(detailData.value?.detail?.executeDate);
+    const today = new Date();
+
+    // 将时间设置为 00:00:00，只比较日期
+    executeDate.setHours(0, 0, 0, 0);
+    today.setHours(0, 0, 0, 0);
+
+    // 计算天数差（毫秒转天数）
+    const diffTime = executeDate.getTime() - today.getTime();
+    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+    return diffDays;
+});
+
 const onConfirmExecuteTime = (date) => {
     showCalendar.value = false;
     console.log(formatDate(date) );
@@ -441,7 +466,7 @@ const getDetail = async (farmWorkLibId) => {
         }
     }
 
-    &.status-1 {
+    &.status-1, &.status-2, &.status-3, &.status-4 {
         &::after {
             background: #ff953d;
         }
@@ -453,7 +478,7 @@ const getDetail = async (farmWorkLibId) => {
         }
     }
 
-    &.status-3 {
+    &.status-6 {
         &::after {
             background: #ff6666;
         }