feat:添加病虫害弹窗

src/components/popup/UploadProgressPopup.vue

@@ -12,8 +12,9 @@
             </div>
             <upload ref="uploadRef" :maxCount="10" :initImgArr="initImgArr" @handleUpload="onHandleUpload">
             </upload>
-            <div class="upload-result">AI识别结果：该病为该病为该病为该病为病为该病为病为该病为</div>
+            <!-- <div class="upload-result">AI识别结果：该病为该病为该病为该病为病为该病为病为该病为</div> -->
         </div>
+        <slot name="footer"></slot>
         <div class="upload-action-btns">
             <div class="cancel-btn" @click="emit('cancel')">取消</div>
             <div class="confirm-btn" @click="emit('confirm')">{{ confirmText }}</div>

src/views/old_mini/recordDetails/index.vue

@@ -21,7 +21,7 @@
                         <text-ellipsis class="item-value" expand-text="展开" collapse-text="收起" rows="3"
                             content="当前水稻处于分蘖盛期至拔节初期，分蘖初期如果稻株出现缺锌症状，会导致分蘖停滞、小叶丛生，需综合诊断并评估。缺锌原因与土壤类型密切相关——高pH土壤锌有效性低，长期渍水还原条件使锌沉淀，低温抑制根系对锌的吸收，高磷施肥加重缺锌症状。需结合土壤类型综合诊断，及时补锌促蘖。" />
                     </div>
-                   <div class="tabs-list" v-if="!showMap">
+                    <div class="tabs-list" v-if="!showMap">
                         <div class="item-tab" :class="{ 'item-tab--active': activeTab1 === index }"
                             v-for="(item, index) in tabsList1" :key="index" @click="activeTab1 = index">{{ item.label }}
                         </div>
@@ -120,14 +120,11 @@
                         <div class="question-info">
                             <span class="title">关键防治需肥期评估：</span>
                             <span class="content">是否有60%的水稻进入分蘖盛期？</span>
-                            <div class="current-status">当前现状：当前{{curStage.label}}进入到{{ curStage.periodTitle }}</div>
+                            <div class="current-status">当前现状：当前{{ curStage.label }}进入到{{ curStage.periodTitle }}</div>
                         </div>
                         <div class="time-line">
-                            <GrowthStageTimeline
-                                v-model="growthStageIndex"
-                                :stages="growthStages"
-                                @scroll-settled="onStageScrollSettled"
-                                />
+                            <GrowthStageTimeline v-model="growthStageIndex" :stages="growthStages"
+                                @scroll-settled="onStageScrollSettled" />
                             <!-- <GrowthStageTimeline v-model="growthStageIndex" :stages="growthStages" /> -->
                         </div>
                         <div class="confirm-btn-wrap">
@@ -168,7 +165,27 @@
             </div>
         </div> -->
 
-        <UploadProgressPopup ref="uploadProgressPopupRef" v-model:show="showUploadProgressPopup"
+        <div class="phenology-tip-banner" v-if="route.query.type == '病虫害态势监控'">
+            <div class="banner__left">
+                <div class="banner__title">
+                    <el-icon size="17">
+                        <WarningFilled />
+                    </el-icon>
+                    <span>发现异常，拍照记录</span>
+                </div>
+                <span class="banner__desc">
+                    系统为您智能匹配农事方案
+                </span>
+            </div>
+            <!-- <div class="banner__btn" @click="goPartitionManage">
+                分区管理
+            </div> -->
+            <div class="banner__btn" @click="handleAbnormalRecord">
+                异常记录
+            </div>
+        </div>
+
+        <!-- <UploadProgressPopup ref="uploadProgressPopupRef" v-model:show="showUploadProgressPopup"
             :popup-image-upload-loading="popupImageUploadLoading" :init-img-arr="initImgArr"
             @cancel="handleCancelUploadPopup" @confirm="handleConfirmUpload" @handleUpload="handleUploadSuccess">
             <template #header>
@@ -177,6 +194,34 @@
                     <span class="value">60% 进入红黄叶进程</span>
                 </div>
             </template>
+        </UploadProgressPopup> -->
+
+        <UploadProgressPopup ref="uploadProgressPopupRef" v-model:show="showUploadProgressPopup"
+            :popup-image-upload-loading="popupImageUploadLoading" :init-img-arr="initImgArr"
+            @cancel="handleCancelUploadPopup" @confirm="handleConfirmUpload" @handleUpload="handleUploadSuccess">
+            <template #header>
+                <div class="upload-form">
+                    <div class="form-item aaa">
+                        <div class="item-label" style="font-size: 14px;color: #5A5A5A;">有多少植株出现了异常？</div>
+                        <el-input v-model="formData.regionName" size="large" placeholder="请输入">
+                            <template #suffix>
+                                %
+                            </template>
+                        </el-input>
+                    </div>
+                </div>
+            </template>
+            <template #footer>
+                <div class="upload-form">
+                    <div class="form-item">
+                        <div class="item-label">巡园描述</div>
+                        <el-input v-model="formData.regionName" size="large" placeholder="请输入描述" />
+                    </div>
+                    <div class="map-container" ref="mapContainer">
+                        <div class="tip">点击勾画新发生区域</div>
+                    </div>
+                </div>
+            </template>
         </UploadProgressPopup>
     </div>
 </template>
@@ -186,7 +231,7 @@ import customHeader from "@/components/customHeader.vue";
 import PhenologyTrackTimelineItem from "@/components/pageComponents/PhenologyTrackTimelineItem.vue";
 import GrowthStageTimeline from "@/components/pageComponents/GrowthStageTimeline.vue";
 import UploadProgressPopup from "@/components/popup/UploadProgressPopup.vue";
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { Uploader, TextEllipsis } from "vant";
 import { ElMessage } from "element-plus";
@@ -286,6 +331,17 @@ const tabsList1 = ref([
     { label: '叶片萎蔫', value: 3 },
 ]);
 
+const formData = ref({
+    regionName: '',
+});
+const handleAbnormalRecord = () => {
+    showUploadProgressPopup.value = true;
+    nextTick(() => {
+        location.value = "POINT(113.6142086995688 23.585836479509055)";
+        indexMap.initMap(location.value, mapContainer.value);
+    })
+}
+
 const showUploadProgressPopup = ref(false);
 const initImgArr = ref([]);
 const uploadProgressPopupRef = ref(null);
@@ -316,18 +372,18 @@ function labelPercentToProgress(label) {
     return Number(m[1]) / 100;
 }
 
-const hanldeSubmit = () =>{
+const hanldeSubmit = () => {
     const farmData = JSON.parse(localStorage.getItem('selectedFarmData'))
     const time = new Date().toISOString()
     const params = {
-        farm_id:farmData.farm_id,
-        farm_variety:farmData.farm_variety,
-        current_code:curCode.value,
-        new_start_date: time.slice(0,10),
+        farm_id: farmData.farm_id,
+        farm_variety: farmData.farm_variety,
+        current_code: curCode.value,
+        new_start_date: time.slice(0, 10),
         progress: labelPercentToProgress(curStage.value.label),
     }
-    VE_API.monitor.farmPhenologyAdjust(params).then(res =>{
-        if(res.code === 200){
+    VE_API.monitor.farmPhenologyAdjust(params).then(res => {
+        if (res.code === 200) {
             ElMessage.success('确认成功')
         }
     })
@@ -447,13 +503,23 @@ const getWorkDetail = async () => {
 const getFarmRecord = async () => {
     const res = await VE_API.monitor.getFarmRecord();
     if (res.code === 200 && res.data?.abnormal.length) {
-        phenologyTrackList.value = res.data.abnormal.map(item =>{
-            return {
-                date:item.time,
-                content:item.record + item.ratio + '%',
-                images:[]
-            }
-        })
+        if(route.query.type == '病虫害态势监控'){
+            phenologyTrackList.value = res.data.abnormal.map(item => {
+                return {
+                    date: item.time,
+                    content: item.record + item.ratio + '%',
+                    images: []
+                }
+            })
+        }else{
+            phenologyTrackList.value = res.data.phenology.map(item => {
+                return {
+                    date: item.time,
+                    content: item.record + item.ratio + '%',
+                    images: []
+                }
+            })
+        }
     }
 }
 
@@ -648,28 +714,7 @@ const getFindPhenologyInfo = async () => {
                         }
                     }
 
-                    .my-map {
-                        width: 100%;
 
-                        .map-container {
-                            width: 100%;
-                            height: 170px;
-                            margin: 10px 0;
-                            clip-path: inset(0px round 5px);
-                            position: relative;
-
-                            .tip {
-                                position: absolute;
-                                top: 0;
-                                left: 0;
-                                color: #fff;
-                                padding: 5px 10px;
-                                border-radius: 5px;
-                                background: rgba(0, 0, 0, 0.6);
-                                z-index: 2;
-                            }
-                        }
-                    }
 
                     .confirm-btn-wrap {
                         display: flex;
@@ -773,16 +818,21 @@ const getFindPhenologyInfo = async () => {
         gap: 8px;
         padding: 10px 14px;
         border-radius: 12px;
-        background: linear-gradient(180deg, #CCE8FF 0%, #ffffff 60%);
+        // background: linear-gradient(180deg, #CCE8FF 0%, #ffffff 60%);
+        background: linear-gradient(180deg, #FFDFC5 -12.59%, #FFFFFF 38.15%);
         box-shadow: 0 2px 8px rgba(33, 153, 248, 0.12);
 
         .banner__left {
             flex: 1;
 
             .banner__title {
+                display: flex;
+                align-items: center;
+                gap: 4px;
                 font-size: 16px;
                 font-weight: 600;
-                color: #1890ff;
+                // color: #1890ff;
+                color: #FF953D;
             }
 
             .banner__desc {
@@ -795,11 +845,54 @@ const getFindPhenologyInfo = async () => {
             padding: 7px 16px;
             border-radius: 25px;
             color: #ffffff;
-            background: linear-gradient(180deg, #5cb8ff 0%, #2e90ff 100%);
+            background: linear-gradient(180deg, #FFB273 0%, #FF953D 100%);
+            // background: linear-gradient(180deg, #5cb8ff 0%, #2e90ff 100%);
         }
     }
 }
 
+// .my-map {
+//     width: 100%;
+
+//     .map-container {
+//         width: 100%;
+//         height: 170px;
+//         margin: 10px 0;
+//         clip-path: inset(0px round 5px);
+//         position: relative;
+
+//         .tip {
+//             position: absolute;
+//             top: 0;
+//             left: 0;
+//             color: #fff;
+//             padding: 5px 10px;
+//             border-radius: 5px;
+//             background: rgba(0, 0, 0, 0.6);
+//             z-index: 2;
+//         }
+//     }
+// }
+
+.map-container {
+    width: 100%;
+    height: 170px;
+    margin: 10px 0;
+    clip-path: inset(0px round 5px);
+    position: relative;
+
+    .tip {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: #fff;
+        padding: 5px 10px;
+        border-radius: 5px;
+        background: rgba(0, 0, 0, 0.6);
+        z-index: 2;
+    }
+}
+
 .upload-progress-title {
     color: rgba(60, 60, 60, 0.5);
     font-weight: 500;
@@ -812,4 +905,26 @@ const getFindPhenologyInfo = async () => {
         color: #2199F8;
     }
 }
+
+.upload-form {
+    .form-item {
+        margin-bottom: 10px;
+
+        .item-label {
+            font-size: 16px;
+            margin-bottom: 8px;
+
+            .optional {
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.2);
+            }
+        }
+    }
+    .aaa{
+        padding: 8px;
+        background: rgba(33, 153, 248, 0.1);
+        border-radius: 5px;
+        border: 1px solid #2199F8;
+    }
+}
 </style>