Kaynağa Gözat

fix: 用户管理,编辑方案

lxf 1 hafta önce
ebeveyn
işleme
d890349458

+ 3 - 2
src/components/pageComponents/FarmInfoCard.vue

@@ -8,7 +8,7 @@
                         <div class="farm-name van-ellipsis" :style="{ maxWidth: data.maxWidth || 'calc(100% - 90px)' }">{{ data.farmName }}</div>
                         <div class="tags">
                             <span class="tag" :class="data.className || 'tag-variety'" v-show="data.variety || data.roleName">{{ data.variety || data.roleName }}</span>
-                            <span class="tag" :class="data.className || 'tag-gray'" v-show="data.area">{{ data.area }}</span>
+                            <span class="tag" :class="data.className || 'tag-role'" v-show="data.area || data.userType">{{ data.area || data.userType }}</span>
                         </div>
                     </div>
                     <div class="farm-address van-ellipsis">{{ data.address }}</div>
@@ -19,6 +19,7 @@
                 <slot name="right"></slot>
             </div>
         </div>
+        <slot name="footerData"></slot>
         <!-- 底部内容:服务次数或自定义内容 -->
         <div v-if="showFooter" :class="{'item-footer': data.serviceCount != 0}">
             <slot name="footer">
@@ -97,7 +98,7 @@ const handleRemind = () => {
     }
 
     &:not(.has-footer) {
-        padding: 16px 12px;
+        padding: 12px 12px;
         display: flex;
         flex-direction: column;
         align-items: stretch;

+ 39 - 14
src/components/popup/activeUploadPopup.vue

@@ -3,9 +3,22 @@
         class="active-upload-popup"
         v-model:show="show"
         closeable
+        teleport="body"
+        :overlay-style="{'z-index': 9999}"
         :close-on-click-overlay="false"
         @closed="handleClosed"
     >
+        <div class="header" v-if="selectCurrentPhenology">
+            <div class="title">
+                <span class="required">*</span>
+                当前物候期
+            </div>
+            <div class="date-input">
+                <el-select v-model="currentPhenologyId" placeholder="请选择当前物候期">
+                    <el-option v-for="item in phenologyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+            </div>
+        </div>
         <div class="header">
             <div class="title">
                 <span class="required">*</span>
@@ -33,7 +46,8 @@
                 </el-select>
             </div>
         </div>
-        <div class="tips-text">上传照片,诊断更准确哦~</div>
+        <div class="tips-text img-desc" v-if="imgDesc"><span class="required">*</span>{{ imgDesc }}</div>
+        <div class="tips-text" v-else>上传照片,诊断更准确哦~</div>
         <upload :textShow="true" class="upload-wrap" exampleImg>
             <img class="example" src="@/assets/img/home/example-4.png" alt="" />
             <img class="example" src="@/assets/img/home/plus.png" alt="" />
@@ -58,12 +72,6 @@ import { onMounted, onUnmounted, ref } from "vue";
 import upload from "@/components/upload";
 import eventBus from "@/api/eventBus";
 import { ElMessage } from "element-plus";
-const props = defineProps({
-    needExecutor: {
-        type: Boolean,
-        default: false,
-    },
-});
 
 const show = ref(false);
 const gardenId = ref(null);
@@ -92,9 +100,18 @@ function formatDate(date) {
 
 const type = ref(null);
 const arrangeId = ref(null);
-const executorId = ref(null);
+// 选择执行人
+const needExecutor = ref(false);
 const executorList = ref([]);
-function handleShow({ gardenIdVal, problemTitleVal, typeVal ,arrangeIdVal, executorListVal}) {
+const executorId = ref(null);
+// 选择当前物候期
+const currentPhenologyId = ref(null);
+const phenologyList = ref([]);
+const selectCurrentPhenology = ref(false);
+
+// 图片上传标题描述
+const imgDesc = ref(null);
+function handleShow({ gardenIdVal, problemTitleVal, typeVal, arrangeIdVal, executorListVal, imgDescVal, needExecutorVal, selectCurrentPhenologyVal, phenologyListVal}) {
     images.value = [];
     gardenId.value = gardenIdVal;
     problemTitle.value = problemTitleVal || "请选择问题";
@@ -103,6 +120,10 @@ function handleShow({ gardenIdVal, problemTitleVal, typeVal ,arrangeIdVal, execu
     type.value = typeVal;
     arrangeId.value = arrangeIdVal;
     executorList.value = executorListVal;
+    imgDesc.value = imgDescVal;
+    needExecutor.value = needExecutorVal;
+    selectCurrentPhenology.value = selectCurrentPhenologyVal ? true : false;
+    phenologyList.value = phenologyListVal;
     // 重置上传状态
     isUploading.value = false;
 }
@@ -173,6 +194,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .active-upload-popup {
+    z-index: 9999 !important;
     width: 90%;
     box-sizing: border-box;
     padding: 24px 18px 20px;
@@ -188,12 +210,8 @@ onUnmounted(() => {
             font-size: 16px;
             font-weight: 500;
             display: flex;
-            align-items: center;
-            .required {
-                color: #ff4d4f;
-                margin-right: 4px;
-            }
         }
+        align-items: center;
         .date-input {
             margin: 12px 0;
             ::v-deep {
@@ -203,8 +221,15 @@ onUnmounted(() => {
             }
         }
     }
+    .required {
+        color: #ff4d4f;
+        margin-right: 4px;
+    }
     .tips-text {
         font-weight: 500;
+        &.img-desc {
+            font-size: 16px;
+        }
     }
     .upload-wrap {
         margin: 12px 0 24px;

+ 134 - 98
src/components/popup/offerPopup.vue

@@ -1,5 +1,5 @@
 <template>
-    <popup class="offer-popup" v-model:show="show" :closeable="stepIndex===2">
+    <popup class="offer-popup" teleport="body" :overlay-style="{'z-index': 9999}" v-model:show="show" :close-on-click-overlay="false" :closeable="stepIndex === 2">
         <div class="step-1" v-if="stepIndex === 1">
             <div class="title">
                 <div class="text">
@@ -14,10 +14,10 @@
                     <div class="input-row">
                         <el-form-item prop="agriculturalInput" class="input-item">
                             <div class="input-header">农资投入</div>
-                            <el-input 
-                                class="input-field" 
-                                type="number" 
-                                v-model="formData.agriculturalInput" 
+                            <el-input
+                                class="input-field"
+                                type="number"
+                                v-model="formData.agriculturalInput"
                                 placeholder="请输入数字"
                             >
                                 <template #suffix>
@@ -27,10 +27,10 @@
                         </el-form-item>
                         <el-form-item prop="serviceInput" class="input-item">
                             <div class="input-header">农服投入</div>
-                            <el-input 
-                                class="input-field" 
-                                type="number" 
-                                v-model="formData.serviceInput" 
+                            <el-input
+                                class="input-field"
+                                type="number"
+                                v-model="formData.serviceInput"
                                 placeholder="请输入数字"
                             >
                                 <template #suffix>
@@ -42,10 +42,10 @@
                     <div class="input-row total-row">
                         <div class="total-label">总金额</div>
                         <el-form-item prop="totalAmount" class="total-form-item">
-                            <el-input 
-                                class="input-field total-input" 
-                                type="number" 
-                                v-model="formData.totalAmount" 
+                            <el-input
+                                class="input-field total-input"
+                                type="number"
+                                v-model="formData.totalAmount"
                                 placeholder="请输入数字"
                             >
                                 <template #suffix>
@@ -58,18 +58,31 @@
             </el-form>
         </div>
         <div class="step-2" v-else>
-            <div class="upload-wrap" :class="{'upload-cont':fileList.length}">
-                <div class="name"><span class="required">*</span>请上传执行照片</div>
-                <uploader class="uploader" v-model="fileList" multiple :max-count="3" :after-read="afterRead" @click="handleClick('rg')">
-                    <img class="img" v-show="!fileList.length" src="@/assets/img/home/example-4.png" alt="">
-                    <img class="plus" src="@/assets/img/home/plus.png" alt="">
+            <div class="upload-wrap" :class="{ 'upload-cont': fileList.length }">
+                <div class="name"><span class="required">*</span>请上传执行照片(至少两张)</div>
+                <uploader
+                    class="uploader"
+                    v-model="fileList"
+                    multiple
+                    :max-count="3"
+                    :after-read="afterRead"
+                    @click="handleClick('rg')"
+                >
+                    <img class="img" v-show="!fileList.length" src="@/assets/img/home/example-4.png" alt="" />
+                    <img class="plus" src="@/assets/img/home/plus.png" alt="" />
                 </uploader>
             </div>
         </div>
         <div class="tips-text">注:交易信息保密不公开</div>
         <div class="button-wrap" v-if="stepIndex === 1">
             <div class="button second" @click="handleCancel">取消</div>
-            <div @click="handleNextStep" class="button primary" :class="{ 'btn-color': formData.totalAmount && formData.totalAmount.length > 0 }">下一步</div>
+            <div
+                @click="handleNextStep"
+                class="button primary"
+                :class="{ 'btn-color': formData.totalAmount && formData.totalAmount.length > 0 }"
+            >
+                下一步
+            </div>
         </div>
         <div class="button-wrap" v-if="stepIndex === 2">
             <div class="button second" @click="toggleStep(1)">上一步</div>
@@ -87,19 +100,12 @@ import UploadFile from "@/utils/upliadFile";
 import { base_img_url2 } from "@/api/config";
 import { ElMessage, ElMessageBox } from "element-plus";
 import wx from "weixin-js-sdk";
-import { useRouter} from "vue-router";
+import { useRouter } from "vue-router";
 const router = useRouter();
-const props = defineProps({
-    showPopup: {
-        type: Boolean,
-        require: true,
-    },
-    executionData: {},
-});
+
 const store = useStore();
 const miniUserId = store.state.home.miniUserId;
 const show = ref(false);
-const input = ref("");
 const formRef = ref(null);
 
 const formData = reactive({
@@ -110,38 +116,34 @@ const formData = reactive({
 
 const rules = {
     agriculturalInput: [
-        { required: true, message: "请输入农资投入", trigger: "blur" },
-        { 
+        { required: false, message: "请输入农资投入", trigger: "blur" },
+        {
             validator: (rule, value, callback) => {
-                if (!value || value.trim() === "") {
-                    callback(new Error("请输入农资投入"));
-                } else if (isNaN(value) || Number(value) < 0) {
+                if (isNaN(value) || Number(value) < 0) {
                     callback(new Error("请输入有效的数字"));
                 } else {
                     callback();
                 }
-            }, 
-            trigger: "blur" 
-        }
+            },
+            trigger: "blur",
+        },
     ],
     serviceInput: [
-        { required: true, message: "请输入农服投入", trigger: "blur" },
-        { 
+        { required: false, message: "请输入农服投入", trigger: "blur" },
+        {
             validator: (rule, value, callback) => {
-                if (!value || value.trim() === "") {
-                    callback(new Error("请输入农服投入"));
-                } else if (isNaN(value) || Number(value) < 0) {
+                if (isNaN(value) || Number(value) < 0) {
                     callback(new Error("请输入有效的数字"));
                 } else {
                     callback();
                 }
-            }, 
-            trigger: "blur" 
-        }
+            },
+            trigger: "blur",
+        },
     ],
     totalAmount: [
         { required: true, message: "请输入总金额", trigger: "blur" },
-        { 
+        {
             validator: (rule, value, callback) => {
                 if (!value || value.trim() === "") {
                     callback(new Error("请输入总金额"));
@@ -150,9 +152,9 @@ const rules = {
                 } else {
                     callback();
                 }
-            }, 
-            trigger: "blur" 
-        }
+            },
+            trigger: "blur",
+        },
     ],
 };
 
@@ -160,14 +162,15 @@ const stepIndex = ref(1);
 const fileList = ref([]);
 const fileArr = ref([]);
 
-const imgType = ref('')
-const handleClick = (type) =>{
-    imgType.value = type
-}
+const imgType = ref("");
+const handleClick = (type) => {
+    imgType.value = type;
+};
 
-const handleCancel = () =>{
-    show.value = false
-}
+const handleCancel = () => {
+    show.value = false;
+    resetForm();
+};
 
 const uploadFileObj = new UploadFile();
 const afterRead = (file) => {
@@ -183,7 +186,7 @@ const afterRead = (file) => {
         // let index = fileList.value.findIndex((item) => item.name == fileVal.name);
         // fileList.value[index].url = base_img_url2 + resFilename;
         // fileArr.value.push(base_img_url2 + resFilename)
-        fileArr.value.push(resFilename)
+        fileArr.value.push(resFilename);
     });
 };
 
@@ -191,20 +194,28 @@ function toggleStep(val) {
     stepIndex.value = val;
 }
 
+function resetForm() {
+    // 重置表单验证状态
+    if (formRef.value) {
+        formRef.value.clearValidate();
+        formRef.value.resetFields();
+    }
+}
+
 function handleNextStep() {
     if (!formRef.value) return;
-    
+
     formRef.value.validate((valid) => {
         if (valid) {
             toggleStep(2);
         } else {
-            ElMessage.warning("请填写完整的交易金额信息");
+            ElMessage.warning("请完善信息");
         }
     });
 }
 function closeTask() {
     // stepIndex.value = 2
-    show.value = false
+    show.value = false;
     router.push("/review_work");
 
     // if(!input.value.length) return ElMessage.warning('请上传图片')
@@ -228,39 +239,61 @@ function closeTask() {
     // })
 }
 
+// 计算总金额
+function calculateTotalAmount() {
+    const agricultural = parseFloat(formData.agriculturalInput) || 0;
+    const service = parseFloat(formData.serviceInput) || 0;
+    
+    if (agricultural > 0 || service > 0) {
+        const total = agricultural + service;
+        formData.totalAmount = total > 0 ? total.toString() : "";
+        formRef.value.validateField("totalAmount");
+    } else {
+        formData.totalAmount = "";
+    }
+}
+
+// 监听农资投入和农服投入的变化,自动计算总金额
 watch(
-    () => props.showPopup,
-    (newVal, oldVal) => {
-        if (newVal) {
-            fileArr.value = []
-            fileList.value = []
-            // imgType.value = ''
-            show.value = true;
-            // 重置表单验证状态
-            if (formRef.value) {
-                formRef.value.clearValidate();
-            }
-        } else {
-            show.value = false;
-        }
+    () => [formData.agriculturalInput, formData.serviceInput],
+    () => {
+        calculateTotalAmount();
     }
 );
+
+const executionData = ref(null);
+function openPopup(item) {
+    show.value = true;
+    executionData.value = item;
+    stepIndex.value = 1;
+    fileArr.value = [];
+    fileList.value = [];
+    // 重置表单数据
+    formData.agriculturalInput = "";
+    formData.serviceInput = "";
+    formData.totalAmount = "";
+}
+
+defineExpose({
+    openPopup,
+});
 </script>
 
 <style lang="scss" scoped>
 .offer-popup {
+    z-index: 9999 !important;
     width: 90%;
     padding: 10px 12px;
     border-radius: 8px;
-    background: linear-gradient(360deg, #FFFFFF 74.2%, #D1EBFF 100%);
-    ::v-deep{
-        .van-popup__close-icon{
+    background: linear-gradient(360deg, #ffffff 74.2%, #d1ebff 100%);
+    ::v-deep {
+        .van-popup__close-icon {
             color: #000;
         }
     }
-    .step-1{
-        .tips{
-            color: #2199F8;
+    .step-1 {
+        .tips {
+            color: #2199f8;
             padding: 4px;
             font-family: "PangMenZhengDao";
             background: rgba(33, 153, 248, 0.1);
@@ -382,9 +415,9 @@ watch(
     }
     .tips-text {
         font-size: 14px;
-        color: #B0B0B0;
+        color: #b0b0b0;
         text-align: center;
-        margin-top: 4px;
+        margin-top: 16px;
     }
     .button-wrap {
         display: flex;
@@ -400,7 +433,7 @@ watch(
         &.primary {
             margin-left: 12px;
             flex: 1;
-            background: #2199F8;
+            background: #2199f8;
             color: #fff;
             &.btn-color {
                 background: #2199f8;
@@ -426,7 +459,9 @@ watch(
             overflow: hidden;
         }
 
-        .van-uploader,.van-uploader__wrapper,.van-uploader__input-wrapper{
+        .van-uploader,
+        .van-uploader__wrapper,
+        .van-uploader__input-wrapper {
             width: 100%;
         }
 
@@ -448,54 +483,55 @@ watch(
         }
         text-align: center;
     }
-    .tips{
+    .tips {
         font-family: "PangMenZhengDao";
-        color: #9A9A9A;
+        color: #9a9a9a;
         font-size: 14px;
-        background: linear-gradient(0deg,#FFFFFF 55% ,rgba(33, 153, 248, 0.25) 100%);
+        background: linear-gradient(0deg, #ffffff 55%, rgba(33, 153, 248, 0.25) 100%);
         border: 1px solid rgba(33, 153, 248, 0.4);
         border-radius: 25px;
         width: 80%;
         margin: 5px auto 20px auto;
         text-align: center;
-        span{
-            color: #269FFF;
+        span {
+            color: #269fff;
         }
     }
-    .upload-wrap{
+    .upload-wrap {
         // position: relative;
         // border: 1px dashed #2199F8;
         // background: rgba(33, 153, 248, 0.1);
         border-radius: 10px;
         padding: 14px 0 10px 0;
-        &.upload-cont{
-            ::v-deep{
-                .van-uploader__wrapper{
+        &.upload-cont {
+            ::v-deep {
+                .van-uploader__wrapper {
                     flex-wrap: nowrap;
                 }
             }
         }
-        .name{
+        .name {
             color: #000000;
             font-size: 16px;
+            font-weight: 500;
             padding-bottom: 12px;
-            .required{
-                color: #FF4D4F;
+            .required {
+                color: #ff4d4f;
                 margin-right: 2px;
             }
         }
-        .img{
+        .img {
             width: 80px;
             height: 80px;
             margin-right: 12px;
         }
-        .plus{
+        .plus {
             margin-right: 12px;
             width: 80px;
             height: 80px;
         }
     }
-    .upload-wrap + .upload-wrap{
+    .upload-wrap + .upload-wrap {
         margin-top: 12px;
     }
 }

+ 7 - 0
src/router/globalRoutes.js

@@ -328,6 +328,13 @@ export default [
         name: "ModifyPlan",
         component: () => import("@/views/old_mini/plan/components/modifyPlan.vue"),
     },
+    // 编辑农事方案
+    {
+        path: "/modify",
+        name: "Modify",
+        meta: { keepAlive: true },
+        component: () => import("@/views/old_mini/modify_work/modify.vue"),
+    },
     // 农场列表
     {
         path: "/farm_list",

+ 3 - 0
src/styles/common.scss

@@ -159,6 +159,9 @@ div {
         }
     }
 }
+.PhotoSlider__FooterWrap {
+    display: none;
+  }
 .PhotoSlider__Wrapper {
     z-index: 9999;
 }

+ 3 - 0
src/styles/index.scss

@@ -19,6 +19,9 @@ $screenWidth:375;
       }
   }
 }
+.PhotoSlider__FooterWrap {
+  display: none;
+}
 .PhotoSlider__Wrapper {
   z-index: 9999 !important;
 }

+ 3 - 3
src/views/old_mini/farm_manage/map/index.js

@@ -212,14 +212,14 @@ class IndexMap {
     }
   }
 
-  initData(taskList) {
+  initData(taskList, label) {
     this.gardenPointLayer.source.clear();
     if (taskList.length > 0) {  // 如果任务列表不为空,则添加任务点
       for (let item of taskList) {
-        item.mapInfo = item.executeDate?.replace(/^\d{4}-(\d{2})-(\d{2})$/, '$1.$2') + '  ' + item.farmWorkName
+        item.mapInfo = label ? item[label] : item.executeDate?.replace(/^\d{4}-(\d{2})-(\d{2})$/, '$1.$2') + '  ' + item.farmWorkName
         this.gardenPointLayer.source.addFeature(newPoint(item, "point", "myGarden"))
       }
-      this.kmap.getView().fit(this.gardenPointLayer.source.getExtent(), { padding: [20, 2, 20, 2] });
+      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);

+ 1819 - 0
src/views/old_mini/modify_work/modify.vue

@@ -0,0 +1,1819 @@
+<template>
+    <div class="new-farming-page">
+        <custom-header :name="isAdd ? '新增农事' : isEdit ? '编辑方案' : '农事详情'"></custom-header>
+        <div class="new-farming-content">
+            <el-form
+                ref="formRef"
+                style="max-width: 600px"
+                label-position="left"
+                :rules="rules"
+                :model="dynamicValidateForm"
+                class="demo-dynamic"
+            >
+                <div class="farm-card" v-if="!isAdd">
+                    <div class="card-title between">
+                        <div>{{ detailData?.farmWorkName }}<span class="type-tag">标准农事</span></div>
+                        <div class="add-tag title-tag">
+                            <el-tooltip
+                                effect="dark"
+                                placement="left"
+                            >
+                                <template #content>
+                                    <div class="tag-item">托管用户</div>
+                                </template>
+                                <div class="add-tag">托管用户</div>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                    <div class="info-content">
+                        <el-form-item label-width="70px" class="form-item text-item" label="农事编号">
+                            <div class="info-text">
+                                {{ detailData?.code }}
+                            </div>
+                        </el-form-item>
+                        <el-form-item label-width="70px" class="form-item text-item" label="服务亩数">
+                            <div class="info-text">
+                                {{ detailData?.area ? formatArea(detailData?.area) + "亩" : "--" }}
+                            </div>
+                        </el-form-item>
+                        <el-form-item label-width="70px" class="form-item text-item" label="服务区域">
+                            <div class="info-text">
+                                {{ detailData?.serviceRegion }}
+                            </div>
+                        </el-form-item>
+                        <el-form-item label-width="70px" class="form-item" prop="executeDate" label="执行时间">
+                            <el-date-picker
+                                class="item-input"
+                                style="width: 100%"
+                                value-format="YYYY-MM-DD"
+                                v-model="dynamicValidateForm.executeDate"
+                                type="date"
+                                :clearable="false"
+                                placeholder="选择日期"
+                                :editable="false"
+                            />
+                        </el-form-item>
+                    </div>
+                </div>
+                <template v-else>
+                    <div class="farm-card progress">
+                        <span class="progress-title">农事进度</span>
+                        <el-radio-group v-model="farmProgress">
+                            <el-radio :value="0">已做</el-radio>
+                            <el-radio :value="1">未做</el-radio>
+                        </el-radio-group>
+                    </div>
+                    <div class="farm-card" v-if="farmProgress === 0">
+                        <div class="card-title">基本信息</div>
+                        <div class="info-content">
+                            <el-form-item label-width="82px" class="form-item" prop="farmWorkName" label="农事名称">
+                                <el-select
+                                    v-model="dynamicValidateForm.farmWorkName"
+                                    placeholder="请选择农事名称"
+                                    style="width: 100%"
+                                >
+                                    <el-option
+                                        v-for="(item, index) in farmWorkNameList"
+                                        :key="index"
+                                        :value="item"
+                                        :label="item"
+                                    />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label-width="82px" class="form-item" prop="name" label="农事目的">
+                                <el-input
+                                    v-model="dynamicValidateForm.purpose"
+                                    style="width: 100%"
+                                    :rows="2"
+                                    type="textarea"
+                                    placeholder="请输入农事目的"
+                                />
+                            </el-form-item>
+                            <el-form-item label-width="82px" class="form-item" prop="conditionRate" label="执行时间">
+                                <el-date-picker
+                                    v-model="dynamicValidateForm.checkDay"
+                                    value-format="YYYY-MM-DD"
+                                    type="date"
+                                    placeholder="请选择执行时间"
+                                    style="width: 100%"
+                                    :editable="false"
+                                />
+                            </el-form-item>
+                            <!-- <el-form-item label-width="82px" class="form-item" prop="conditionRate" label="触发条件">
+                                    <div class="condition-wrap">
+                                        <el-select v-model="dynamicValidateForm.condition" placeholder="请选择触发条件" style="width: 58%">
+                                            <el-option v-for="(item, index) in farmWorkIndexNameList" :key="index" :value="item" :label="item" />
+                                        </el-select>
+                                        <span class="symbol"></span>
+                                        <el-select v-model="dynamicValidateForm.conditionRate" placeholder="请选择" style="width: 38%">
+                                            <el-option :value="0" label="0%" />
+                                            <el-option :value="5" label="5%" />
+                                            <el-option :value="10" label="10%" />
+                                            <el-option :value="20" label="20%" />
+                                            <el-option :value="40" label="40%" />
+                                            <el-option :value="60" label="60%" />
+                                            <el-option :value="80" label="80%" />
+                                        </el-select>
+                                    </div>
+                                </el-form-item> -->
+                        </div>
+                    </div>
+                </template>
+
+                <div class="farm-card">
+                    <!-- 农情互动 -->
+                    <div class="card-title border-bottom between">
+                        <div>农情互动</div>
+                        <span class="del-tag">删除互动</span>
+                    </div>
+                    <div class="info-content">温馨提示:在某某物候期之后,请密切关注荔枝,关注蒂蛀虫的出现!编辑</div>
+                </div>
+
+                <div class="farm-card prescription-content" v-if="farmProgress === 0">
+                    <div class="card-title pb-12">药物处方</div>
+                    <el-form-item label-width="82px" class="form-item" prop="usageMode" label="施用方式">
+                        <el-select
+                            v-model="dynamicValidateForm.usageMode"
+                            placeholder="请选择施用方式"
+                            style="width: 100%"
+                        >
+                            <el-option
+                                v-for="(usage, uId) in allUsageModeList"
+                                :key="uId"
+                                :label="usage"
+                                :value="usage"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <div v-if="dynamicValidateForm.usageMode !== '人工农事'">
+                        <el-form-item
+                            v-for="(prescriptionItem, prescriptionI) in dynamicValidateForm.prescriptionList"
+                            :key="prescriptionI"
+                            :prop="'prescriptions.' + prescriptionI + '.value'"
+                            class="prescription-item"
+                        >
+                            <div class="recipe-item">
+                                <div class="sub-title">
+                                    <div>{{ prescriptionItem.name }}处方</div>
+                                    <div class="add-tag" @click="addDomain(prescriptionI)">
+                                        <el-icon color="#2199F8"><Plus /></el-icon>新增药物
+                                    </div>
+                                </div>
+                                <div class="recipe-form">
+                                    <el-form-item
+                                        v-for="(domain, index) in prescriptionItem.pesticideFertilizerList"
+                                        :key="domain.key"
+                                        :prop="'pesticideFertilizerList.' + index + '.value'"
+                                    >
+                                        <div class="form-box">
+                                            <div class="form-index">药肥{{ index + 1 }}</div>
+                                            <div class="box-item" v-if="domain.typeName">
+                                                <div class="form-l">药肥类型</div>
+                                                <div class="form-r r-text">
+                                                    {{ domain.typeName }}
+                                                    <!-- <el-select
+                                                    v-model="domain.typeName"
+                                                    placeholder="请选择"
+                                                    style="width: 100%"
+                                                    >
+                                                        <el-option :label="domain.typeName" :value="domain.typeName" />
+                                                </el-select> -->
+                                                </div>
+                                            </div>
+                                            <div class="box-item">
+                                                <div class="form-l">药肥名称</div>
+                                                <div class="form-r">
+                                                    <el-select
+                                                        filterable
+                                                        @change="handlePesticideFertilizerChange(prescriptionI, index)"
+                                                        v-model="domain.pesticideFertilizerId"
+                                                        placeholder="请选择"
+                                                        style="width: 100%"
+                                                    >
+                                                        <el-option
+                                                            v-for="item in pesticideFertilizersOptions"
+                                                            :key="item.id"
+                                                            :label="item.defaultName || item.name"
+                                                            :value="item.id"
+                                                        />
+                                                    </el-select>
+                                                </div>
+                                            </div>
+                                            <div class="box-item">
+                                                <div class="form-l">执行方式</div>
+                                                <div
+                                                    class="form-r item-val"
+                                                    v-if="dynamicValidateForm.usageMode === '叶面施'"
+                                                >
+                                                    <el-select
+                                                        class="select-item"
+                                                        v-model="dynamicValidateForm.executionMethod"
+                                                        placeholder="执行方式"
+                                                        style="width: 100%"
+                                                        @change="handleExecutionMethodChange"
+                                                    >
+                                                        <el-option
+                                                            v-for="(item, index) in modeList"
+                                                            :key="index"
+                                                            :label="item.name"
+                                                            :value="item.value"
+                                                        />
+                                                    </el-select>
+                                                </div>
+                                                <div class="form-r r-text" v-else>人工</div>
+                                            </div>
+
+                                            <div class="mt-8" v-if="dynamicValidateForm.executionMethod === 1">
+                                                <div class="box-item sub-item">
+                                                    <div class="form-l has-sub">
+                                                        <div class="main-name">亩兑水量</div>
+                                                        <div class="sub-name">(药剂:兑水量)</div>
+                                                    </div>
+                                                    <div class="form-r input-box text-center">
+                                                        <!-- <el-input
+                                                            v-model="domain.ratio2"
+                                                            style="width: 100%"
+                                                            placeholder="请输入"
+                                                        /> -->
+                                                        <el-input
+                                                            v-model="domain.ratio2"
+                                                            type="number"
+                                                            step="0.01"
+                                                            placeholder="请输入"
+                                                        >
+                                                            <template #append>{{ domain.unit }}</template>
+                                                        </el-input>
+                                                    </div>
+                                                </div>
+                                                <div class="box-item sub-item">
+                                                    <div class="form-l has-sub">
+                                                        <div class="main-name">单亩用量</div>
+                                                        <div class="sub-name">(亩数:药剂)</div>
+                                                    </div>
+                                                    <div class="form-r input-box text-center">
+                                                        <el-input
+                                                            v-model="domain.muUsage2"
+                                                            type="number"
+                                                            step="0.01"
+                                                            placeholder="请输入"
+                                                        >
+                                                            <template #append>{{ domain.unit }}</template>
+                                                        </el-input>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div class="mt-8" v-else>
+                                                <div class="box-item sub-item">
+                                                    <div class="form-l has-sub">
+                                                        <div class="main-name">亩兑水量</div>
+                                                        <div class="sub-name">(药剂:兑水量)</div>
+                                                    </div>
+                                                    <div class="form-r input-box text-center input-unit">
+                                                        <!-- <el-input
+                                                        v-model="domain.ratio"
+                                                        style="width: 100%"
+                                                        placeholder="请输入"
+                                                    /> -->
+
+                                                        <el-input
+                                                            v-model="domain.ratio"
+                                                            type="number"
+                                                            step="0.01"
+                                                            placeholder="请输入"
+                                                        >
+                                                            <template #append>{{ domain.unit }}</template>
+                                                        </el-input>
+                                                    </div>
+                                                </div>
+                                                <div class="box-item sub-item">
+                                                    <div class="form-l has-sub">
+                                                        <div class="main-name">单亩用量</div>
+                                                        <div class="sub-name">(亩数:药剂)</div>
+                                                    </div>
+                                                    <div class="form-r input-box text-center">
+                                                        <!-- <el-input
+                                                        v-model="domain.muUsage"
+                                                        style="width: 100%"
+                                                        placeholder="请输入"
+                                                    /> -->
+                                                        <el-input
+                                                            v-model="domain.muUsage"
+                                                            type="number"
+                                                            step="0.01"
+                                                            placeholder="请输入"
+                                                        >
+                                                            <template #append>{{ domain.unit }}</template>
+                                                        </el-input>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="input-box mark-box">
+                                                <el-input
+                                                    v-model="domain.remark"
+                                                    style="width: 100%"
+                                                    placeholder="备注:用药注意事项"
+                                                />
+                                            </div>
+                                            <div class="action-btn">
+                                                <el-button
+                                                    class="btn delete-btn"
+                                                    @click.prevent="removeDomain(prescriptionI, domain)"
+                                                >
+                                                    删除
+                                                </el-button>
+                                                <el-button
+                                                    type="default"
+                                                    class="btn"
+                                                    @click.prevent="resetItemForm(prescriptionI, index)"
+                                                >
+                                                    重置
+                                                </el-button>
+                                            </div>
+                                        </div>
+                                    </el-form-item>
+                                </div>
+                            </div>
+                        </el-form-item>
+                    </div>
+                </div>
+                <div class="farm-card progress" v-else>
+                    <div class="situation-description">
+                        <div class="description-title">状况描述</div>
+                        <div class="description-content">
+                            <el-input
+                                v-model="situationDescription"
+                                type="textarea"
+                                :rows="3"
+                                placeholder="请输入目前农场状况"
+                                class="description-textarea"
+                            />
+                            <div class="upload-section">
+                                <el-button class="upload-btn" @click="handleUploadImage">
+                                    <el-icon><Upload /></el-icon>
+                                    上传图片
+                                </el-button>
+                                <div class="upload-tip">上传图片,专家诊断更清晰</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="farm-card prescription-content">
+                    <div class="card-title">处方报价</div>
+                    <div class="medicine-wrap">
+                        <template v-for="(prescription, pIndex) in dynamicValidateForm.prescriptionList" :key="pIndex">
+                            <div
+                                class="medicine-box"
+                                v-for="(pesticide, mIndex) in prescription.pesticideFertilizerList"
+                                :key="mIndex"
+                            >
+                                <div class="form-index">药肥{{ mIndex + 1 }}</div>
+                                <div class="box-wrap">
+                                    <div class="medicine-item">
+                                        <div class="item-name">药肥名称</div>
+                                        <div class="item-val">{{ pesticide.pesticideFertilizerName }}</div>
+                                    </div>
+                                    <div class="medicine-item">
+                                        <div class="item-name">药肥品牌</div>
+                                        <div class="item-val">
+                                            <el-input
+                                                v-model="pesticide.brand"
+                                                placeholder="药肥品牌"
+                                                style="width: 132px"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div class="medicine-item mt-8">
+                                        <div class="item-name">药肥单价</div>
+                                        <div class="item-val">
+                                            <el-input
+                                                style="width: 132px"
+                                                v-model="pesticide.price"
+                                                type="number"
+                                                step="0.01"
+                                                placeholder="单价"
+                                            >
+                                                <template #append>元/{{ pesticide.unit }}</template>
+                                            </el-input>
+                                        </div>
+                                    </div>
+                                    <div class="medicine-item">
+                                        <div class="item-name">单亩用量</div>
+                                        <div class="item-val">{{ getMuUsage(pesticide) }}{{ pesticide.unit }}</div>
+                                    </div>
+                                    <div class="medicine-item">
+                                        <div class="item-name">服务亩数</div>
+                                        <div class="item-val">{{ formatArea(detailData?.area) }}亩</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                        <div class="medicine-box">
+                            <div class="form-index">服务报价</div>
+                            <div class="box-wrap">
+                                <div class="medicine-item mt-8">
+                                    <div class="item-name">亩单价</div>
+                                    <div class="item-val">
+                                        <el-input
+                                            style="width: 132px"
+                                            v-model="servicePricePerMu"
+                                            type="number"
+                                            step="0.01"
+                                            placeholder="服务单价"
+                                        >
+                                            <template #append>元/亩</template>
+                                        </el-input>
+                                    </div>
+                                </div>
+                                <div class="medicine-item">
+                                    <div class="item-name">亩数</div>
+                                    <div class="item-val">{{ formatArea(detailData?.area) }}亩</div>
+                                </div>
+                                <div class="medicine-item">
+                                    <div class="item-total">总计:</div>
+                                    <div class="item-price">
+                                        {{ getServiceTotal() }}<span class="item-unit">元</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="submit-btn" v-if="isEdit">
+                    <div class="btn second" @click.prevent="cancelEdit">取消编辑</div>
+                    <div class="btn" @click.prevent="submitForm(formRef)">保存方案</div>
+                </div>
+                <div class="submit-btn" v-if="!isAdd && !isEdit">
+                    <div class="btn second" @click="handleIgnore">取消编辑</div>
+                    <div class="btn" @click.prevent="submitForm(formRef)">保存方案</div>
+                </div>
+                <div class="submit-btn" v-if="isAdd && farmProgress === 0">
+                    <div class="btn second">取消</div>
+                    <div class="btn" @click.prevent="submitForm(formRef)">确定新增</div>
+                </div>
+                <div v-if="isAdd && farmProgress === 1">
+                    <div class="expert-diagnosis-btn" @click="handleExpertDiagnosis">邀请专家诊断</div>
+                </div>
+            </el-form>
+        </div>
+    </div>
+
+    <popup v-model:show="showTaskPopup" round class="task-tips-popup">
+        <template v-if="taskPopupType === 'warning'">
+            <img class="create-farm-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
+            <div class="create-farm-text">
+                <div>
+                    您确认忽略 <span class="main-text">{{ detailData?.farmName }}</span> 的
+                    <span class="main-text">{{ detailData?.farmWorkName }}</span> 农事吗
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <img class="farm-check-icon" src="@/assets/img/home/right.png" alt="" />
+            <div class="create-farm-text success-text">农事已下发成功</div>
+        </template>
+        <div class="create-farm-btn" @click="handlePopupBtn">
+            {{ taskPopupType === "warning" ? "确认忽略" : "我知道了" }}
+        </div>
+    </popup>
+
+    <!-- 服务报价单 -->
+    <price-sheet-popup ref="priceSheetPopupRef"></price-sheet-popup>
+</template>
+
+<script setup>
+import { onActivated, ref, reactive, onDeactivated, onBeforeUnmount, computed, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import customHeader from "@/components/customHeader.vue";
+import NewFarmMap from "./newFarmMap";
+import { useStore } from "vuex";
+import { Popup } from "vant";
+import farmSteps from "@/components/farmSteps.vue";
+import { base_img_url2 } from "@/api/config";
+import { formatArea } from "@/common/commonFun";
+import priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
+import dayjs from "dayjs";
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+
+// 角色
+// const curRole = store.state.app.curRole
+const curRole = 0;
+
+const gardenId = ref(null);
+const actionType = ref([]);
+const isAdd = ref(false);
+
+const showTaskPopup = ref(false);
+const taskPopupType = ref("warning");
+
+const isEdit = ref(false);
+isAdd.value = route.query.isAdd ? true : false;
+isEdit.value = route.query.isEdit ? true : false;
+onActivated(() => {
+    const id = route.query.id;
+    if (id) {
+        getDetail(id);
+        getTriggerImg(id);
+    }
+    window.scrollTo(0, 0);
+    getFarmWorkNameList();
+    getFarmWorkIndexNameList();
+    if (route.query.data) {
+        actionType.value = JSON.parse(route.query.data);
+    } else {
+        actionType.value = ["生长异常"];
+    }
+    dynamicValidateForm.prescriptionList = actionType.value.map((name) => ({
+        name,
+        pesticideFertilizerList: [
+            {
+                key: 1,
+                typeName: "",
+                muUsage: "",
+                muUsage2: "",
+                ratio: "",
+                ratio2: "",
+                remark: "",
+            },
+        ],
+    }));
+    if (!(curRole == 1 && isAdd.value)) {
+        const point = store.state.home.miniUserLocationPoint;
+        // newFarmMap.initMap(point, areaRef.value);
+        // eventBus.on("editNsMap:areaVal", getArea);
+        gardenId.value = route.query.gardenId;
+        // getAreaList(() => {
+        //     newFarmMap.initArea(areaList.value);
+        // });
+    }
+
+    getWarningMsg();
+});
+
+const triggerImg = ref([]);
+const getTriggerImg = async (id) => {
+    const { data } = await VE_API.z_farm_work_record.getTriggerImg({ farmWorkRecordId: id });
+    triggerImg.value = data || [];
+};
+
+const priceSheetPopupRef = ref(null);
+const showPriceSheetPopup = () => {
+    priceSheetPopupRef.value.handleShowPopup(detailData.value);
+};
+
+const detailData = ref({});
+const getDetail = async (id) => {
+    const { data } = await VE_API.z_farm_work_record.getDetail({ id });
+    const res = data[0];
+    detailData.value = res;
+    dynamicValidateForm.executeDate = res.executeDate;
+    dynamicValidateForm.usageMode = res.usageMode;
+
+    res.prescriptionList.forEach((item) => {
+        item.pesticideFertilizerList.forEach((pesticide) => {
+            pesticide.typeName = item.name;
+        });
+    });
+
+    dynamicValidateForm.prescriptionList = res.prescriptionList;
+
+    getFarmWorkArrangeDetail(res.farmWorkArrangeId);
+};
+
+// 获取农场现状
+const farmStatusText = ref("");
+const getFarmWorkArrangeDetail = (id) => {
+    VE_API.farm.getFarmWorkArrangeDetail({ id }).then(({ data }) => {
+        farmStatusText.value = data.farmStatus;
+    });
+};
+
+function handleIgnore() {
+    taskPopupType.value = "warning";
+    showTaskPopup.value = true;
+}
+
+// 根据执行方式获取单亩用量:1=无人机用muUsage2,2=人工用muUsage
+const getMuUsage = (pesticide) => {
+    if (!pesticide) return 0;
+    // 如果是叶面施且有执行方式选择,根据执行方式判断
+    if (
+        detailData.value?.usageMode === "叶面施" &&
+        dynamicValidateForm.executionMethod !== null &&
+        dynamicValidateForm.executionMethod !== undefined
+    ) {
+        // 1 = 无人机,使用 muUsage2
+        if (dynamicValidateForm.executionMethod == 1) {
+            return pesticide.muUsage2 || pesticide.muUsage || 0;
+        }
+        // 2 = 人工,使用 muUsage
+        if (dynamicValidateForm.executionMethod == 2) {
+            return pesticide.muUsage || 0;
+        }
+    }
+    // 默认使用 muUsage(非叶面施的情况)
+    return pesticide.muUsage || 0;
+};
+
+// 计算单个药肥的总计:单价 * 单亩用量 * 亩数
+const getPesticideTotal = (pesticide) => {
+    const muUsage = getMuUsage(pesticide);
+    if (!pesticide.price || !muUsage || !detailData.value.area) return "0.00";
+    const total = (pesticide.price * muUsage * detailData.value.area).toFixed(2);
+    return total;
+};
+
+function handlePopupBtn() {
+    showTaskPopup.value = false;
+    if (taskPopupType.value === "warning") {
+        // 确认忽略
+        VE_API.z_farm_work_record.ignoreFarmWorkRecord({ farmWorkRecordId: route.query.id }).then((res) => {
+            if (res.code === 0) {
+                ElMessage.success("操作成功");
+                router.back();
+            }
+        });
+    } else {
+        router.replace({
+            path: "/completed_work",
+            query: {
+                miniJson: JSON.stringify({ id: route.query.id }),
+            },
+        });
+    }
+}
+
+const resetForm = (formEl) => {
+    if (!formEl) return;
+    formEl.resetFields();
+    serveArea.value = null;
+    regionId.value = null;
+};
+
+// 清空所有数据
+const clearData = () => {
+    // 清空表单
+    resetForm(formRef.value);
+
+    // 清空详情数据
+    detailData.value = {};
+
+    // 清空表单数据
+    dynamicValidateForm.farmWorkName = "";
+    dynamicValidateForm.conditionRate = "";
+    dynamicValidateForm.purpose = "";
+    dynamicValidateForm.executeDate = dayjs().format("YYYY-MM-DD");
+    dynamicValidateForm.checkDay = "";
+    dynamicValidateForm.usageMode = "";
+    dynamicValidateForm.prescriptionList = [
+        {
+            name: "",
+            pesticideFertilizerList: [
+                {
+                    key: 1,
+                    typeName: "",
+                    muUsage: "",
+                    muUsage2: "",
+                    ratio: "",
+                    ratio2: "",
+                    remark: "",
+                },
+            ],
+        },
+    ];
+
+    // 清空其他数据
+    serveArea.value = null;
+    regionId.value = null;
+    areaList.value = [];
+    farmProgress.value = 0;
+    situationDescription.value = "";
+    checkedArea.value = false;
+    actionType.value = [];
+    gardenId.value = null;
+    showTaskPopup.value = false;
+    taskPopupType.value = "warning";
+};
+
+onDeactivated(() => {
+    // areaRef.value && newFarmMap.destroyMap();
+    clearData();
+});
+
+onBeforeUnmount(() => {
+    clearData();
+});
+
+const cancelEdit = () => {
+    ElMessageBox.confirm("确认要取消编辑吗?", "提示", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+        .then(() => {
+            router.back();
+        })
+        .catch(() => {
+            console.log("取消编辑");
+        });
+};
+
+const modeList = ref([
+    { name: "无人机", value: 1 },
+    { name: "人工", value: 2 },
+]);
+
+const handleExecutionMethodChange = (val) => {
+    if (val == 1) {
+        dynamicValidateForm.muUsage = dynamicValidateForm.muUsage2;
+    }
+};
+
+// 表单
+const formRef = ref();
+const dynamicValidateForm = reactive({
+    farmWorkName: "",
+    conditionRate: "",
+    purpose: "",
+    executeDate: dayjs().format("YYYY-MM-DD"),
+    checkDay: "",
+    usageMode: "",
+    executionMethod: "",
+    prescriptionList: [
+        {
+            name: "",
+            pesticideFertilizerList: [
+                {
+                    key: 1,
+                    typeName: "",
+                    muUsage: "",
+                    muUsage2: "",
+                    ratio: "",
+                    ratio2: "",
+                    remark: "",
+                },
+            ],
+        },
+    ],
+});
+
+const rules = {
+    farmWorkName: [
+        {
+            required: true,
+            message: "请输入农事名称",
+            trigger: "blur",
+        },
+    ],
+    conditionRate: [
+        {
+            required: false,
+            message: "请输入触发条件",
+            trigger: "blur",
+        },
+    ],
+    executeDate: [
+        {
+            required: false,
+            message: "请选择执行时间",
+            trigger: "blur",
+        },
+    ],
+    checkDay: [
+        {
+            required: true,
+            message: "请选择复核时间",
+            trigger: "blur",
+        },
+    ],
+};
+
+const formatIndex = (index) => {
+    return String(index + 1).padStart(2, "0");
+};
+
+const addDomain = (parentIndex) => {
+    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.unshift({
+        key: Date.now(),
+        muUsage: "",
+        muUsage2: "",
+        ratio: "",
+        ratio2: "",
+        remark: "",
+    });
+};
+
+let pesticideFertilizersOptions = ref([
+    // {
+    //     id: 'null',
+    //     name: "芸苔素内酯 15000倍",
+    //     typeName: "30",
+    //     defaultRatio: null,
+    //     defaultDroneRatio: null,
+    //     unit: 0,
+    //     defaultName: "调节",
+    // },
+    {
+        brand: "天润美满",
+        capacity: 1000,
+        count: null,
+        defaultDroneRatio: null,
+        defaultName: "生物活性酶",
+        defaultRatio: null,
+        ftl: "",
+        id: "185",
+        name: "生物活性酶",
+        pesticideFertilizerCode: "1185",
+        price: 220.0,
+        processUnit: "",
+        typeId: 1,
+        typeName: "调节",
+        unit: "ml",
+        unitUsage: null,
+        unitWaterAmount: null,
+        usageModeList: ["叶面施"],
+    },
+    {
+        brand: "",
+        capacity: null,
+        count: null,
+        defaultDroneRatio: null,
+        defaultName: "矮壮素",
+        defaultRatio: null,
+        ftl: "",
+        id: "145",
+        name: "矮壮素",
+        pesticideFertilizerCode: "1145",
+        price: null,
+        processUnit: "",
+        typeId: 1,
+        typeName: "调节",
+        unit: "ml",
+        unitUsage: null,
+        unitWaterAmount: null,
+        usageModeList: ["叶面施"],
+    },
+]);
+VE_API.z_farm_work_order.pesticideFertilizersList().then(({ data }) => {
+    pesticideFertilizersOptions.value = data;
+});
+
+const allUsageMode = ref(null);
+const allUsageModeList = ["叶面施", "根部施", "人工农事"];
+
+// 农事名称列表
+const farmWorkIndexNameList = ref([
+    "片区拔节率",
+    "园区花蕾率",
+    "单树花蕾率",
+    "片区雄穗抽出率",
+    "园区花量大率",
+    "单树花量大率",
+    "片区分蘖率",
+]);
+function getFarmWorkIndexNameList() {
+    farmWorkIndexNameList.value = [
+        "片区拔节率",
+        "园区花蕾率",
+        "单树花蕾率",
+        "片区雄穗抽出率",
+        "园区花量大率",
+        "单树花量大率",
+        "片区分蘖率",
+    ];
+    // VE_API.farm.fetchFarmWorkIndexNameList().then(({data}) => {
+    //     farmWorkIndexNameList.value = data
+    // })
+}
+// 触发指标列表
+const farmWorkNameList = ref([]);
+function getFarmWorkNameList() {
+    // VE_API.farm.fetchFarmWorkNameList().then(({data}) => {
+    //     farmWorkNameList.value = data
+    // })
+}
+
+// 预警文字信息
+const warningMsg = ref("");
+
+const getWarningMsg = () => {
+    // VE_API.farm.getFarmWorkWarningMsg({farmId: gardenId.value}).then(({data}) => {
+    //     warningMsg.value = data
+    // })
+};
+
+/**
+ * 选择药肥的时候修改订单中药肥pesticideFertilizerId 以外其他数据
+ * @param index
+ */
+const handlePesticideFertilizerChange = (parentIndex, index) => {
+    let obj = pesticideFertilizersOptions.value.filter(
+        (item) =>
+            dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index].pesticideFertilizerId ===
+            item.id
+    )[0];
+    console.log("obj", obj);
+    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index] = {
+        ...dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index],
+        typeName: obj.typeName,
+        unit: obj.unit,
+        defaultRatio: obj.defaultRatio,
+        usageModeList: obj.usageModeList,
+        ratio: obj.defaultRatio,
+        defaultName: obj.defaultName,
+        pesticideFertilizerName: obj.name,
+        pesticideFertilizerCode: obj.pesticideFertilizerCode,
+    };
+};
+
+const removeDomain = (parentIndex, item) => {
+    const index = dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.indexOf(item);
+    if (index !== -1) {
+        dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList.splice(index, 1);
+    }
+};
+
+const resetItemForm = (parentIndex, index) => {
+    dynamicValidateForm.prescriptionList[parentIndex].pesticideFertilizerList[index] = {
+        typeName: "",
+        muUsage: "",
+        muUsage2: "",
+        ratio: "",
+        ratio2: "",
+        remark: "",
+    };
+};
+
+const servicePricePerMu = ref(null);
+
+// 计算服务费用总计:亩单价 * 亩数
+const getServiceTotal = () => {
+    if (!servicePricePerMu.value || !detailData.value.area) return "0.00";
+    const total = (servicePricePerMu.value * detailData.value.area).toFixed(2);
+    return total;
+};
+
+const submitForm = (formEl) => {
+    if (!formEl) return;
+    formEl.validate((valid) => {
+        if (valid) {
+            // router.push({
+            //     path: "/completed_work",
+            //     query: {
+            //         id: 1,
+            //         status: 1,
+            //     },
+            // });
+            submit();
+        } else {
+            console.log("error submit!");
+        }
+    });
+};
+
+const submit = () => {
+    // let executeBlueZones = null
+    // if (!(curRole==1 && isAdd.value)) {
+    //     executeBlueZones = newFarmMap.getSelectedBlueRegion();
+    // }
+    // if (!executeBlueZones || !executeBlueZones.length) {
+    //     ElMessage({
+    //         message: "请选择执行区域",
+    //         type: "warning",
+    //     });
+    //     return false
+    // }
+
+    // 检查药物所有项是否都包含特定的字段
+    // const hasRequiredFields = dynamicValidateForm.prescriptionList.every(item => {
+    //     return item.pesticideFertilizerList.every(domain  => {
+    //         const hasPesticideFertilizerCode  = 'pesticideFertilizerCode' in domain
+    //         const hasMuUsage = 'muUsage' in domain;
+    //         const hasRatio = 'ratio' in domain;
+
+    //         const isMuUsageValid = domain.muUsage !== '';
+    //         const isRatioValid = domain.ratio ? true : false;
+
+    //         return hasPesticideFertilizerCode && hasMuUsage && hasRatio && isMuUsageValid && isRatioValid
+    //     });
+    // })
+    // if (!hasRequiredFields) {
+    //     ElMessage({
+    //         message: "请完善药物信息",
+    //         type: "warning",
+    //     });
+    //     return false
+    // }
+
+    // const flattenedDomains = flattenDomains(dynamicValidateForm.prescription)
+    const data = {
+        id: route.query.id,
+        ...dynamicValidateForm,
+    };
+    VE_API.z_farm_work_record.issueFarmWorkRecord(data).then(async (res) => {
+        if (res.code === 0) {
+            // taskPopupType.value = 'success';
+            // showTaskPopup.value = true;
+            await getDetail(route.query.id);
+            showPriceSheetPopup();
+        }
+    });
+    // 新增农事
+    // VE_API.farm.saveFarmWork(data).then(({ code }) => {
+    //     if (code === 0) {
+    //         ElMessage({
+    //             message: "保存成功",
+    //             type: "success",
+    //         });
+    //         setTimeout(() => {
+    //             // router.go(-1);
+    //             router.replace("/expert_album?reload=true");
+    //         }, 500);
+    //     }
+    // });
+    // const data = {
+    //     orderId: props.prescriptioData.orderId,
+    //     orderStatus: 1,
+    //     pesticideFertilizers: dynamicValidateForm.domains,
+    // };
+    // VE_API.order.confirm(data).then(({ code }) => {
+    //     if (code == 0) {
+    //         console.log('专家下发处方成功');
+    //         eventBus.emit('discover:submitForm')
+    //         window.location.reload()
+    //     }
+    // });
+};
+
+const farmWorkTypeVal = computed(() => {
+    const valueMap = {
+        生长异常: 1,
+        病虫异常: 3,
+        营养农事: 2,
+    };
+
+    if (actionType.value.length === 1) {
+        return valueMap[actionType.value[0]] || null; // 如果只有一个元素,返回对应的值,否则返回 null
+    } else {
+        return 1;
+    }
+});
+
+function flattenDomains(data) {
+    return data.reduce((acc, item) => {
+        return acc.concat(item.pesticideFertilizerList);
+    }, []);
+}
+
+// 地图
+const areaRef = ref(null);
+let newFarmMap = new NewFarmMap();
+
+const serveArea = ref(null);
+// 农场分区列表
+const areaList = ref([]);
+const regionId = ref(null);
+
+const farmProgress = ref(0);
+
+// 状况描述相关数据
+const situationDescription = ref("");
+
+// 切换分区
+const changeRegion = (e) => {
+    checkedArea.value = false;
+    newFarmMap.getBlueRegion({ gardenId: gardenId.value, regionId: e }, () => {
+        // newFarmMap.setBlueRegion([{id: "ws0y1me7h94u"}, {id: "ws0y1me545tg"}])
+        // serveArea.value = "3.72亩"
+    });
+};
+
+// 所选蓝色分区的面积
+const getArea = (val) => {
+    serveArea.value = val.toFixed(2) + "亩";
+};
+
+const checkedArea = ref(false);
+const handleArea = (e) => {
+    newFarmMap.toggleAllArea(e);
+};
+
+// 处理上传图片
+const handleUploadImage = () => {
+    // 这里可以添加上传图片的逻辑
+    console.log("上传图片");
+};
+
+// 处理邀请专家诊断
+const handleExpertDiagnosis = () => {
+    // 这里可以添加邀请专家诊断的逻辑
+    console.log("邀请专家诊断");
+};
+</script>
+
+<style lang="scss" scoped>
+.new-farming-page {
+    height: 100vh;
+    position: relative;
+    overflow: auto;
+    font-size: 14px;
+    background: #f2f3f5;
+    ::v-deep {
+        .custom-header {
+            position: fixed;
+            top: 0;
+            padding-bottom: 1px;
+        }
+    }
+    .step-wrap {
+        padding: 12px 0;
+    }
+    .box-wrap {
+        background: #fff;
+        padding: 20px 10px 10px;
+        border-radius: 8px;
+    }
+    .new-farming-content {
+        margin: 41px 0 62px 0;
+        padding: 4px 12px 8px 12px;
+        width: 100%;
+        box-sizing: border-box;
+
+        // ::v-deep {
+        //     .el-select__input {
+        //         color: #2199F8;
+        //     }
+        //     .el-select__wrapper {
+        //         color: #2199F8;
+        //         min-height: 30px;
+        //         line-height: 28px;
+        //         box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
+        //     }
+        //     .el-select__caret {
+        //         color: #2199F8;
+        //     }
+        //     .el-select__placeholder {
+        //         color: #2199F8;
+        //     }
+        //     .el-radio {
+        //         margin-right: 16px;
+        //     }
+        //     .el-input__wrapper {
+        //         box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
+        //     }
+        //     .el-input__prefix {
+        //         color: #2199F8;
+        //     }
+        //     .el-input__inner {
+        //         color: #2199F8;
+        //         --el-input-placeholder-color: rgba(33, 153, 248, 0.43);
+        //     }
+        //     .el-tag.el-tag--info {
+        //         --el-tag-text-color: #2199F8;
+        //         --el-tag-bg-color: rgba(33, 153, 248, 0.1);
+        //     }
+        // }
+        .farm-info {
+            color: rgba(0, 0, 0, 0.6);
+            font-size: 14px;
+            margin-top: 14px;
+            .info-title {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                color: rgba(41, 41, 41, 0.3);
+                .info-more {
+                    display: flex;
+                    align-items: center;
+                }
+            }
+        }
+        .farm-photo {
+            margin-top: 10px;
+            .photo-list {
+                display: flex;
+                align-items: center;
+                width: 100%;
+                overflow: auto;
+                padding-bottom: 10px;
+                .photo-item {
+                    width: 92px;
+                    height: 92px;
+                    border-radius: 8px;
+                    object-fit: cover;
+                }
+                .img-item {
+                    img {
+                        width: 92px;
+                        height: 92px;
+                        border-radius: 8px;
+                        object-fit: cover;
+                        margin-right: 12px;
+                    }
+                }
+            }
+            .list-text {
+                text-align: center;
+                color: rgba(0, 0, 0, 0.5);
+                padding-top: 2px;
+            }
+        }
+        .submit-btn {
+            z-index: 10;
+            position: fixed;
+            bottom: 0px;
+            left: 0;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px;
+            background: #fff;
+            box-sizing: border-box;
+            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
+            border-top: 1px solid rgba(0, 0, 0, 0.1);
+            .btn {
+                height: 40px;
+                border-radius: 25px;
+                line-height: 40px;
+                width: 110px;
+                text-align: center;
+                background: linear-gradient(180deg, #70bffe, #2199f8);
+                color: #ffffff;
+                font-size: 14px;
+                &.second {
+                    background: #ffffff;
+                    border: 1px solid rgba(153, 153, 153, 0.5);
+                    color: #666666;
+                }
+            }
+            .btn + .btn {
+                margin-left: 12px;
+            }
+        }
+    }
+    .card-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #000;
+        display: flex;
+        align-items: center;
+        &.between {
+            justify-content: space-between;
+            .del-tag {
+                color: #e04c4c;
+                border: 1px solid #e04c4c;
+                border-radius: 5px;
+                padding: 4px 14px;
+                font-size: 12px;
+                font-weight: normal;
+            }
+            .title-tag {
+                padding: 2px 10px;
+                height: 26px;
+                line-height: 26px;
+            }
+        }
+        // justify-content: space-between;
+        .add-tag {
+            font-size: 12px;
+            color: #2199f8;
+            padding: 4px 8px;
+            background: rgba(33, 153, 248, 0.16);
+            border-radius: 20px;
+            font-weight: normal;
+            height: 25px;
+            line-height: 25px;
+        }
+        .type-tag {
+            margin-left: 5px;
+            font-size: 12px;
+            color: #000000;
+            padding: 0 10px;
+            background: rgba(119, 119, 119, 0.1);
+            border-radius: 20px;
+            font-weight: normal;
+            height: 26px;
+            line-height: 26px;
+            display: inline-block;
+        }
+    }
+    .pb-12 {
+        padding-bottom: 12px;
+    }
+    .farm-card {
+        background: #ffffff;
+        border-radius: 8px;
+        padding: 12px 12px 0 12px;
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 10px;
+        color: rgba(0, 0, 0, 0.4);
+        &.progress {
+            display: flex;
+            align-items: center;
+            padding: 12px;
+            .progress-title {
+                margin-right: 12px;
+            }
+            ::v-deep {
+                .el-radio {
+                    margin-right: 10px;
+                }
+            }
+        }
+        &.map-content {
+            margin-top: 12px;
+        }
+        &.prescription-content {
+            padding: 12px;
+        }
+        .border-bottom {
+            padding-bottom: 7px;
+            border-bottom: 1px solid rgba(245, 245, 245, 0.99);
+        }
+    }
+
+    .medicine-box {
+        margin-top: 12px;
+        // padding-top: 10px;
+        border: 0.5px solid rgba(33, 153, 248, 0.8);
+        position: relative;
+        border-radius: 4px;
+        .item-title {
+            padding-left: 5px;
+            font-size: 16px;
+            color: #000000;
+            font-weight: 500;
+            padding-bottom: 10px;
+        }
+        .medicine-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 32px;
+            .item-name {
+                color: rgba(0, 0, 0, 0.4);
+            }
+            .item-val {
+                min-width: 142px;
+                text-align: center;
+                color: #474747;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 4px;
+                .price-unit {
+                    font-size: 12px;
+                    color: rgba(0, 0, 0, 0.4);
+                    white-space: nowrap;
+                }
+                ::v-deep {
+                    .el-input__wrapper {
+                        box-shadow: none;
+                    }
+                    .el-input-group__append {
+                        padding: 0 10px;
+                        background: none;
+                        box-shadow: none;
+                    }
+                    .el-input-group__append {
+                        color: rgba(33, 153, 248, 0.5);
+                    }
+                    .el-input {
+                        border: 1px solid rgba(33, 153, 248, 0.3);
+                        border-radius: 5px;
+                        height: 30px;
+                        box-sizing: border-box;
+                    }
+                    .el-input__wrapper {
+                        padding: 0 2px 0 10px;
+                        height: 28px;
+                        line-height: 28px;
+                        min-height: 28px;
+                    }
+                    .el-input__inner {
+                        --el-input-inner-height: 28px;
+                        height: 28px;
+                        line-height: 28px;
+                        min-height: 28px;
+                        color: #2199f8;
+                        --el-input-placeholder-color: rgba(33, 153, 248, 0.43);
+                    }
+                }
+            }
+            .item-total {
+                font-size: 16px;
+                color: #000;
+            }
+            .item-price {
+                color: #2199f8;
+                font-size: 20px;
+                font-weight: bold;
+                .item-unit {
+                    font-size: 14px;
+                    font-weight: normal;
+                    padding-left: 2px;
+                    color: #474747;
+                }
+            }
+        }
+        .medicine-item + .medicine-item {
+            padding-top: 2px;
+        }
+        .mt-8 {
+            margin-top: 8px;
+        }
+    }
+
+    .usage-mode-wrap {
+        padding: 0 12px;
+        margin-top: 12px;
+        .info-content {
+            padding-top: 14px;
+            padding-bottom: 1px;
+        }
+
+        .el-form-item--default {
+            margin-bottom: 0;
+        }
+    }
+
+    ::v-deep {
+        .el-form-item__label {
+            height: 30px;
+            line-height: 30px;
+            color: rgba(0, 0, 0, 0.4);
+        }
+        .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before {
+            display: none;
+        }
+    }
+    .info-content {
+        padding: 10px 0;
+        position: relative;
+
+        .condition-wrap {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            .symbol {
+                width: 10px;
+                // text-align: center;
+                // padding: 0 4px;
+            }
+        }
+        .item-input {
+            // width: 60%;
+            min-width: 140px;
+            max-width: 240px;
+        }
+        .recheck-text {
+            padding-left: 6px;
+        }
+        .info-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+        }
+        .info-item + .info-item {
+            margin-top: 12px;
+        }
+
+        .bottom-map {
+            width: 100%;
+            height: 250px;
+            clip-path: inset(0px round 8px);
+        }
+        .check-btn {
+            position: absolute;
+            bottom: 16px;
+            right: 6px;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 0 8px;
+            border-radius: 8px;
+
+            ::v-deep {
+                .el-checkbox {
+                    color: #fff;
+                }
+            }
+        }
+        .area-select {
+            padding-bottom: 12px;
+            .block {
+                width: 12px;
+                display: inline-block;
+            }
+        }
+    }
+
+    ::v-deep {
+        .el-form-item--default {
+            margin-bottom: 8px;
+            &.text-item {
+                margin-bottom: 2px;
+                .el-form-item__content {
+                    line-height: 24px;
+                }
+                .el-form-item__label {
+                    height: 24px;
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+    .sub-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: rgba(0, 0, 0, 0.6);
+        font-size: 14px;
+        .add-tag {
+            font-size: 12px;
+            color: #2199f8;
+            padding: 0 8px;
+            border: 1px solid #2199f8;
+            border-radius: 5px;
+            font-weight: normal;
+            height: 28px;
+            line-height: 28px;
+        }
+    }
+
+    .form-index {
+        position: absolute;
+        left: 0;
+        top: 0;
+        padding: 0 6px;
+        background: #2199f8;
+        border-radius: 4px 0 4px 0;
+        height: 18px;
+        line-height: 18px;
+        font-size: 12px;
+        color: #fff;
+    }
+    .recipe-item {
+        width: 100%;
+        .recipe-form {
+            padding-top: 8px;
+            ::v-deep {
+                .el-form-item {
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        .mt-8 {
+            margin-top: 8px;
+        }
+
+        .box-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: rgba(0, 0, 0, 0.4);
+            .r-text {
+                width: 140px;
+                text-align: center;
+            }
+            .form-r {
+                width: 60%;
+                min-width: 140px;
+                max-width: 240px;
+            }
+        }
+        .form-box {
+            border: 1px solid rgba(33, 153, 248, 0.8);
+            border-radius: 8px;
+            padding: 20px 10px;
+            width: 100%;
+            position: relative;
+            // background: rgb(209, 235, 255, 0.3);
+            // margin-bottom: 12px;
+            .input-box {
+                &.mark-box {
+                    padding: 8px 0 12px 0;
+                }
+            }
+
+            // .input-unit {
+            //     ::v-deep {
+            //         .el-input {
+            //             border: 1px solid #dcdfe6;
+            //             border-radius: 5px;
+            //             height: 32px;
+            //             box-sizing: border-box;
+            //         }
+            //         .el-input__wrapper {
+            //             padding: 0 2px 0 10px;
+            //             height: 30px;
+            //             line-height: 30px;
+            //             min-height: 30px;
+            //             box-shadow: none;
+            //         }
+            //         .el-input__inner {
+            //             --el-input-inner-height: 30px;
+            //             height: 30px;
+            //             line-height: 30px;
+            //             min-height: 30px;
+            //             color: #606266;
+            //             --el-input-placeholder-color: #a8abb2;
+            //         }
+            //         .el-input-group__append {
+            //             box-shadow: none;
+            //             border: none;
+            //             background: none;
+            //         }
+            //     }
+            // }
+            .text-center {
+                ::v-deep {
+                    .el-input__inner {
+                        text-align: center;
+                    }
+                }
+            }
+            .action-btn {
+                display: flex;
+                justify-content: flex-end;
+                .btn {
+                    color: #8f8f8f;
+                    border-radius: 25px;
+                    padding: 5px 30px;
+                }
+                .delete-btn {
+                    color: rgba(255, 89, 89, 0.9);
+                    background: #fff;
+                    border: 1px solid rgba(255, 89, 89, 0.9);
+                }
+            }
+            .btn-group {
+                padding-top: 12px;
+            }
+            .sub-item {
+                // padding-left: 10px;
+                .has-sub {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    .main-name {
+                        line-height: 20px;
+                    }
+                    .sub-name {
+                        font-size: 10px;
+                        color: rgba(129, 129, 129, 0.5);
+                        line-height: 14px;
+                    }
+                }
+                .colunm-sub {
+                    display: flex;
+                    align-items: center;
+                    .sub-name {
+                        font-size: 10px;
+                        color: rgba(129, 129, 129, 0.5);
+                    }
+                }
+                .r-text {
+                    width: 132px;
+                    text-align: center;
+                    font-size: 14px;
+                    color: #474747;
+                }
+                .price {
+                    ::v-deep {
+                        .el-input__wrapper {
+                            box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
+                        }
+                        .el-input__inner {
+                            color: #2199f8;
+                        }
+                    }
+                }
+            }
+            .form-title {
+                font-size: 14px;
+                padding-top: 6px;
+                color: #000;
+                font-weight: 600;
+            }
+            .box-item + .box-item {
+                margin-top: 8px;
+            }
+        }
+        .form-box + .form-box {
+            margin-top: 8px;
+        }
+        .usageMode-wrap {
+            padding-top: 8px;
+        }
+    }
+
+    // 状况描述样式
+    .situation-description {
+        width: 100%;
+        .description-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: #000;
+            margin-bottom: 12px;
+        }
+
+        .description-content {
+            .description-textarea {
+                margin-bottom: 10px;
+                width: 100%;
+            }
+
+            .upload-section {
+                .upload-btn {
+                    width: 112px;
+                    height: 32px;
+                    border-radius: 3px;
+                    border: 1px solid #e0e0e0;
+                    background: #fff;
+                    color: #000;
+                    font-size: 14px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-bottom: 8px;
+
+                    .el-icon {
+                        margin-right: 6px;
+                    }
+                }
+
+                .upload-tip {
+                    font-size: 12px;
+                    color: #999;
+                    line-height: 1.4;
+                }
+            }
+        }
+    }
+
+    // 专家诊断按钮样式
+    .expert-diagnosis-btn {
+        width: 180px;
+        height: 40px;
+        border-radius: 24px;
+        background: linear-gradient(180deg, #70bffe 0%, #2199f8 100%);
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 30px auto 0;
+    }
+}
+.task-tips-popup {
+    width: 75%;
+    padding: 28px 28px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .create-farm-icon {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 12px;
+    }
+    .farm-check-icon {
+        width: 68px;
+        height: 68px;
+        margin-bottom: 12px;
+    }
+    .create-farm-text {
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 40px;
+        margin-bottom: 32px;
+        text-align: center;
+        &.success-text {
+            font-size: 24px;
+            font-weight: 500;
+        }
+    }
+    .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>

+ 28 - 12
src/views/old_mini/task_condition/components/interact.vue

@@ -67,7 +67,7 @@
                                     <div class="card-main-text">花芽分化</div>
                                     <div class="card-sub-text">
                                         当前物候期
-                                        <span class="card-icon">
+                                        <span class="card-icon" @click="handleSelectCurrentPhenology(item)">
                                             <el-icon><Edit /></el-icon>
                                         </span>
                                     </div>
@@ -132,10 +132,7 @@
     <!-- 服务报价单 -->
     <price-sheet-popup :key="activeIndex" ref="priceSheetPopupRef"></price-sheet-popup>
     <!-- 新增:激活上传弹窗 -->
-    <active-upload-popup ref="activeUploadPopupRef" :needExecutor="true" @handleUploadSuccess="handleUploadSuccess"></active-upload-popup>
-    
-    <!-- 报价弹窗 -->
-    <offer-popup :showPopup="showPopup" :executionData="executionData"></offer-popup>
+    <active-upload-popup ref="activeUploadPopupRef" @handleUploadSuccess="handleUploadSuccess"></active-upload-popup>
 </template>
 
 <script setup>
@@ -144,13 +141,11 @@ import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import { Popup } from "vant";
 import IndexMap from "../../farm_manage/map/index";
-import taskItem from "@/components/taskItem.vue";
 import { useRouter } from "vue-router";
 import uploadExecute from "./uploadExecute.vue";
 import priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
 import { ElMessage } from "element-plus";
 import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";
-import offerPopup from "@/components/popup/offerPopup.vue";
 
 const store = useStore();
 const router = useRouter();
@@ -159,9 +154,6 @@ const mapContainer = ref(null);
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 const uploadExecuteRef = ref(null);
 
-const showPopup = ref(false);
-const executionData = ref(null);
-
 const selectParma = ref({
     farmWorkTypeId: null,
     districtCode: null,
@@ -524,11 +516,34 @@ function handleTimelineAction(item) {
 
     eventBus.emit("activeUpload:show", {
         gardenIdVal: item.farmId,
-        problemTitleVal: '请选择 ' + item.workName + ' 执行截至时间',
+        needExecutorVal: true,
+        problemTitleVal: '请选择 ' + item.workName + ' 执行截止时间',
+        imgDescVal: '请上传凭证(转入农事任务凭证)',
         arrangeIdVal: item.farmWorkArrangeId,
         executorListVal: executorList.value,
     });
 }
+
+const phenologyList = ref([{
+    id: 1,
+    name: "花芽分化",
+}, {
+    id: 2,
+    name: "开花",
+}, {
+    id: 3,
+    name: "成熟",
+}]);
+function handleSelectCurrentPhenology(item) {
+    eventBus.emit("activeUpload:show", {
+        gardenIdVal: item.farmId,
+        problemTitleVal: '进入 物候期 的时间',
+        imgDescVal: '请上传凭证(转入农事任务凭证)',
+        arrangeIdVal: item.farmWorkArrangeId,
+        selectCurrentPhenologyVal: true,
+        phenologyListVal: phenologyList.value,
+    });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -807,8 +822,9 @@ function handleTimelineAction(item) {
                                 padding-left: 4px;
                             }
                             .action-detail {
-                                padding-left: 6px;
+                                margin-left: 6px;
                                 color: #2199F8;
+                                border-bottom: 1px solid;
                             }
                         }
                         .work-name {

+ 12 - 8
src/views/old_mini/task_condition/components/task.vue

@@ -77,7 +77,7 @@
 
     <!-- 服务报价单 -->
     <price-sheet-popup :key="activeIndex" ref="priceSheetPopupRef"></price-sheet-popup>
-    <offer-popup :showPopup="showPopup" :executionData="executionData"></offer-popup>
+    <offer-popup ref="offerPopupRef"></offer-popup>
 </template>
 
 <script setup>
@@ -124,8 +124,8 @@ const loading = ref(false);
 // 根据 activeIndex 计算 startFlowStatus
 const getStartFlowStatus = (index) => {
     const statusMap = {
-        1: "1,2,3", // 待完成
-        2: 4, // 待完成
+        1: "0,1,2,3", // 待完成
+        2: '0,1,4', // 待完成
         3: 5, // 已完成
     };
     return statusMap[index] ?? 4;
@@ -377,9 +377,9 @@ function toPage(item) {
     // }
 }
 
+const offerPopupRef = ref(null);
 const showUploadExecutePopup = (item) => {
-    showPopup.value = !showPopup.value;
-    executionData.value = item;
+    offerPopupRef.value.openPopup(item);
     // if (item?.executeEvidence.length) {
     //     onlyShare.value = true;
     // } else {
@@ -393,9 +393,13 @@ const showUploadExecutePopup = (item) => {
 
 function toDetail(item) {
     router.push({
-        path: "/completed_work",
-        query: { miniJson: JSON.stringify({ id: item.id }) },
-    });
+            path: "/modify",
+            query: { id: item.id },
+        });
+    // router.push({
+    //     path: "/completed_work",
+    //     query: { miniJson: JSON.stringify({ id: item.id }) },
+    // });
 }
 
 const priceSheetPopupRef = ref(null);

+ 297 - 63
src/views/old_mini/user/farmDetails.vue

@@ -6,42 +6,58 @@
                 v-if="farmDetail.name"
                 :data="{
                     farmName: farmDetail.name || '',
-                    area: (farmDetail.mianji || 0) + '亩',
+                    userType: farmDetail.userType || '托管客户',
                     variety: farmDetail.typeName || '',
                     address: farmDetail.address || '',
-                    maxWidth:'90px',
                 }"
+                @click="handleFarmInfo"
             >
-                <template #right>
+                <!-- <template #right>
                     <div @click="handleFarmInfo">基本信息</div>
+                </template> -->
+                <template #footerData>
+                    <div class="footer-data">
+                        <div class="footer-l">
+                            <div class="farm-info-footer-item">
+                                <div class="farm-info-footer-item-label">农事服务</div>
+                                <div class="farm-info-footer-item-value">10<span class="unit">次</span></div>
+                            </div>
+                            <div class="farm-info-footer-item">
+                                <div class="farm-info-footer-item-label">总收益</div>
+                                <div class="farm-info-footer-item-value">1450<span class="unit">元</span></div>
+                            </div>
+                        </div>
+                        <div class="footer-action" @click="handleDetail('farm_list')">农事规划</div>
+                    </div>
                 </template>
             </farm-info-card>
-            <tabs v-model:active="activeTab" class="custom-tabs" scrollspy sticky offset-top="40" background="#f5f7fb">
-                <tab title="农情互动" class="tab-item">
-                    <common-box title="农情互动">
+            <tabs v-model:active="activeTab" class="custom-tabs" scrollspy sticky offset-top="40" background="#F2F3F5">
+                <tab title="作物档案" class="tab-item">
+                    <common-box title="作物档案">
                         <template #right>
                             <span @click="handleDetail('farm_list')">查看详情</span>
                         </template>
-                        <template v-if="farmWorkData.quest">
-                            <div class="question-header">
-                                <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="" />
-                                <div class="question-title">{{ farmWorkData.quest }}</div>
-                            </div>
-                            <template v-if="farmWorkData.images.length">
-                                <div class="answer-content">
-                                    答:{{ farmWorkData.agriDate }} {{ farmWorkData.answerLabel }}出现{{
-                                        farmWorkData.indicatorName
-                                    }}
-                                </div>
-                                <div class="answer-img">
-                                    <img v-for="image in farmWorkData.images" :key="image" :src="config.base_img_url2 + image.cloudFilename" alt="" />
-                                </div>
-                            </template>
-                            <div v-else class="answer-btn">
-                                <div class="answer-btn-item">转发给客户</div>
-                                <div class="answer-btn-item-group">
-                                    <div class="answer-btn-item">否</div>
-                                    <div class="answer-btn-item primary">是</div>
+                        <template v-if="farmWorkData.length">
+                            <div class="farm-work-timeline">
+                                <div
+                                    class="farm-work-item"
+                                    v-for="(item, index) in farmWorkData"
+                                    :key="item.time"
+                                    :class="{ 'is-estimated': index === farmWorkData.length - 1 }"
+                                >
+                                    <div class="timeline-left">
+                                        <div class="timeline-dot"></div>
+                                        <div class="timeline-line"></div>
+                                    </div>
+                                    <div class="timeline-right">
+                                        <div class="farm-work-card">
+                                            <div class="farm-work-date">{{ item.time }}</div>
+                                            <div class="farm-work-desc">
+                                                <span class="farm-work-action">{{ item.action }}</span>
+                                                <span class="farm-work-content">{{ item.content }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </template>
@@ -87,29 +103,25 @@
                         />
                     </common-box>
                 </tab>
-                <tab title="农场报告" class="tab-item">
-                    <common-box title="农场报告">
+                <tab title="作物相册" class="tab-item">
+                    <common-box title="作物相册">
                         <template #right>
-                            <span @click="handleShareReport()">查看详情</span>
+                            <span @click="handleShareReport()">查看更多</span>
                         </template>
-                        <span class="report-content"
-                            >果园面积共XX亩,共有XX棵生产树。果园面积共XX亩,共有XX棵生产树。果园面积共XX亩,共有XX棵生产树。果园面积共XX亩,共有XX棵生产树。果园面积共XX亩,共有XX棵生产树。果园面积共XX亩,共有XX棵生产树。</span
-                        >
-                    </common-box>
-                </tab>
-                <tab title="农事方案" class="tab-item plan-tab-item">
-                    <common-box title="农事方案">
-                        <template #right>
-                            <span @click="handleDetail('agricultural_plan')">查看更多</span>
-                        </template>
-                        <record-item v-if="detailList.length > 0" :record-item-data="detailList[0]" title-mode="default" class="recipe-item" />
-                        <empty
-                            v-else
-                            image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
-                            image-size="80"
-                            description="暂无数据"
-                            class="empty-state"
-                        />
+                        <div class="photo-img-wrap">
+                            <photo-provider :photo-closable="true">
+                                <photo-consumer
+                                    v-for="(src, index) in cropAlbum"
+                                    intro="执行照片"
+                                    :key="index"
+                                    :src="base_img_url2 + src.filename"
+                                >
+                                    <div class="photo-img">
+                                        <img :src="base_img_url2 + src.filename + resize_300" />
+                                    </div>
+                                </photo-consumer>
+                            </photo-provider>
+                        </div>
                     </common-box>
                 </tab>
             </tabs>
@@ -121,13 +133,19 @@
     </div>
     <fn-share-sheet v-model:show="showShare" @select="onSelect" :options="[{ name: '微信', icon: 'wechat' }]" />
     <!-- 农场信息 -->
-    <farm-info-popup ref="farmInfoRef" :farmId="farmIdVal" :showEditBtn="!farmDetail.farmersMiniUserId" :showBtn="true"></farm-info-popup>
+    <farm-info-popup
+        ref="farmInfoRef"
+        :farmId="farmIdVal"
+        :showEditBtn="!farmDetail.farmersMiniUserId"
+        :showBtn="true"
+    ></farm-info-popup>
 </template>
 
 <script setup>
-import { ref, onMounted} from "vue";
+import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { Tab, Tabs, Empty } from "vant";
+import { base_img_url2, resize_300 } from "@/api/config";
 import wx from "weixin-js-sdk";
 import customHeader from "@/components/customHeader.vue";
 import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
@@ -171,7 +189,7 @@ onMounted(() => {
         farmId: farmIdVal.value,
         limit: 1,
         page: 1,
-    }
+    };
     getFarmDetail();
     getFarmWorkList();
     getDetailList();
@@ -184,23 +202,97 @@ const paramsPage = ref({});
 const getFarmDetail = () => {
     VE_API.user.getFarmDetail({ farmId: farmIdVal.value }).then(({ data }) => {
         farmDetail.value = data || {};
+        console.log(farmDetail.value);
     });
 };
 
-const farmWorkData = ref({});
+const farmWorkData = ref([]);
 const getFarmWorkList = () => {
-    VE_API.user.getFarmWorkList(paramsPage.value).then(({ data }) => {
-        if (data && data.length > 0) {
-            farmWorkData.value = data[0] || {};
-        }
-    });
+    // VE_API.user.getFarmWorkList(paramsPage.value).then(({ data }) => {
+    //     if (data && data.length > 0) {
+    //         farmWorkData.value = data[0] || {};
+    //     }
+    // });
+    farmWorkData.value = [
+        {
+            time: "8/8",
+            action: "进入",
+            content: "花芽分化期",
+        },
+        {
+            time: "8/1",
+            action: "做了",
+            content: "杀虫 农事",
+        },
+        {
+            time: "7/25",
+            action: "预计进入",
+            content: "果实膨大期",
+        },
+    ];
 };
 
+const cropAlbum = ref([
+    {
+        district: "",
+        filename: "birdseye-look-mini/91429/1765361542408.png",
+        fosterCode: "",
+        gardenId: null,
+        gardenName: "",
+        growText: "",
+        id: "786656608116543488",
+        localPath: "",
+        localResPath: "",
+        location: "POINT(113.407189 23.032344)",
+        treeCode: "",
+        treeGeoHash: "ws0eh8utt204",
+    },
+    {
+        address: "",
+        angle: "",
+        baseMap: "",
+        blueZoneId: null,
+        district: "",
+        filename: "birdseye-look-mini/91429/1763371316207.jpg",
+        fosterCode: "",
+        gardenId: null,
+        gardenName: "",
+        growText: "",
+        id: "778308963891417088",
+        localPath: "",
+        localResPath: "",
+        location: "POINT(113.407189 23.032344)",
+        miniUserId: null,
+        miniUserName: "",
+        modelId: null,
+        phenologyId: "39",
+        treeCode: "",
+        treeGeoHash: "ws0eh8utt204",
+        treeId: 223920,
+        uploadDate: "2025-11-17",
+    },
+    {
+        filename: "birdseye-look-mini/91754/1763367875786.jpg",
+        fosterCode: "",
+        gardenId: null,
+        gardenName: "",
+        growText: "",
+        id: "778294553688936448",
+        localPath: "",
+        localResPath: "",
+        location: "POINT(113.407189 23.032344)",
+        treeCode: "",
+        treeGeoHash: "ws0eh8utt204",
+        treeId: 223920,
+        uploadDate: "2025-11-17",
+    },
+]);
+
 const detailList = ref([]);
 const getDetailList = () => {
     const params = {
         ...paramsPage.value,
-        flowStatus: '4,5',
+        flowStatus: "4,5",
     };
     VE_API.user.getDetailList(params).then(({ data }) => {
         detailList.value = data || [];
@@ -234,17 +326,16 @@ const handleShareReport = () => {
     });
 };
 
-
 const showShare = ref(false);
 const handleShareFarm = () => {
     showShare.value = true;
 };
 
 const handleChatFarm = () => {
-    if(route.query.receiveUserId != 'null'){
+    if (route.query.receiveUserId != "null") {
         router.push(`/chat_frame?userId=${route.query.receiveUserId}&farmId=${farmIdVal.value}`);
-    }else{
-        ElMessage.warning('尚未绑定用户,暂时无法沟通');
+    } else {
+        ElMessage.warning("尚未绑定用户,暂时无法沟通");
     }
 };
 
@@ -266,7 +357,7 @@ const onSelect = () => {
 .farm-details-page {
     width: 100%;
     height: 100vh;
-    background: #f2f3f5;
+    background: #F2F3F5;
     .farm-details-content {
         box-sizing: border-box;
         padding: 10px 12px 70px 12px;
@@ -281,10 +372,14 @@ const onSelect = () => {
                 .van-tabs__nav {
                     .van-tab {
                         color: #8b8b8b;
-                        background: #f7f8fa;
+                        background: #F7F8FA;
                         height: 34px;
                         font-weight: 400;
                         border-radius: 25px;
+                        width: fit-content;
+                        flex: none;
+                        padding: 0 12px;
+                        margin-right: 8px;
                     }
                     .van-tab--active {
                         color: #fff;
@@ -303,6 +398,33 @@ const onSelect = () => {
             .tab-item + .tab-item {
                 margin-top: 12px;
             }
+
+            .photo-img-wrap {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                ::v-deep {
+                    .PhotoConsumer {
+                        width: 31%;
+                        height: 92px;
+                    }
+                }
+                .photo-img {
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                    box-sizing: border-box;
+                    border: 2px solid transparent;
+                    border-radius: 8px;
+                    overflow: hidden;
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 8px;
+                        object-fit: cover;
+                    }
+                }
+            }
         }
         .question-header {
             display: flex;
@@ -377,6 +499,118 @@ const onSelect = () => {
                 padding: 40px 0;
             }
         }
+        .footer-data {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-top: 12px;
+            .footer-l {
+                display: flex;
+                gap: 8px;
+                flex: 1;
+                .farm-info-footer-item {
+                    display: flex;
+                    border: 0.4px solid rgba(215, 215, 215, 0.5);
+                    padding: 8px 5px 5px;
+                    box-sizing: border-box;
+                    .farm-info-footer-item-label {
+                        font-size: 12px;
+                        color: rgba(32, 32, 32, 0.4);
+                        margin-bottom: 4px;
+                    }
+                    .farm-info-footer-item-value {
+                        font-size: 16px;
+                        color: #202020;
+                        padding-left: 2px;
+                        .unit {
+                            font-size: 12px;
+                            padding-left: 2px;
+                            color: rgba(32, 32, 32, 0.4);
+                        }
+                    }
+                }
+            }
+            .footer-action {
+                border: 0.5px solid #888B8D;
+                border-radius: 20px;
+                padding: 5px 12px;
+                font-size: 12px;
+                color: #888B8D;
+                white-space: nowrap;
+                cursor: pointer;
+                flex-shrink: 0;
+            }
+        }
+        .farm-work-timeline {
+            padding: 10px 0;
+            .farm-work-item {
+                display: flex;
+                align-items: flex-start;
+                position: relative;
+                &:not(:last-child) {
+                    margin-bottom: 20px;
+                }
+                .timeline-left {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    margin-right: 12px;
+                    position: relative;
+                    .timeline-dot {
+                        width: 6px;
+                        height: 6px;
+                        border-radius: 50%;
+                        border: 1px solid #2199f8;
+                        flex-shrink: 0;
+                        z-index: 1;
+                    }
+                    .timeline-line {
+                        width: 1px;
+                        height: 48px;
+                        background: #e5e6eb;
+                        position: absolute;
+                        top: 8px;
+                    }
+                }
+                .timeline-right {
+                    flex: 1;
+                    .farm-work-card {
+                        border: 1px solid #8bccff;
+                        border-radius: 4px;
+                        background: #f8fcff;
+                        padding: 12px;
+                        display: flex;
+                        align-items: center;
+                        color: #1d2129;
+                        font-size: 14px;
+                        line-height: 22px;
+                        display: flex;
+                        align-items: center;
+                        .farm-work-date {
+                            padding-right: 4px;
+                        }
+                        .farm-work-desc {
+                            .farm-work-action {
+                                padding-right: 4px;
+                            }
+                        }
+                    }
+                }
+                &.is-estimated {
+                    .timeline-right {
+                        .farm-work-card {
+                            background: rgba(246, 250, 255, 0.5);
+                            border: 1px solid rgba(190, 218, 255, 0.5);
+                            .farm-work-date,
+                            .farm-work-desc {
+                                color: rgba(29, 33, 41, 0.5);
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 </style>

+ 89 - 6
src/views/old_mini/user/index.vue

@@ -12,6 +12,8 @@
             </div>
         </div>
         <div class="list">
+            <div class="map-container" ref="mapContainer"></div>
+
             <collapse v-model="activeNames" class="collapse-list">
                 <collapse-item :name="index" v-for="(item, index) in dataList" :key="index" :is-link="false">
                     <template #title>
@@ -36,8 +38,23 @@
                         }"
                         @click="handleItemClick(ele)"
                     >
-                        <template #right>
+                        <!-- <template #right>
                             <div @click.stop="handleChat(ele)">{{ ele.receiveUserId ? '在线沟通' : '分享认领' }}</div>
+                        </template> -->
+                        <template #footerData>
+                            <div class="footer-data">
+                                <div class="footer-l">
+                                    <div class="farm-info-footer-item">
+                                        <div class="farm-info-footer-item-label">农事服务</div>
+                                        <div class="farm-info-footer-item-value">10<span class="unit">次</span></div>
+                                    </div>
+                                    <div class="farm-info-footer-item">
+                                        <div class="farm-info-footer-item-label">总收益</div>
+                                        <div class="farm-info-footer-item-value">1450<span class="unit">元</span></div>
+                                    </div>
+                                </div>
+                                <div class="footer-action" @click="handleDetail('farm_list')">农事规划</div>
+                            </div>
                         </template>
                     </farm-info-card>
                 </collapse-item>
@@ -54,19 +71,28 @@
 
 <script setup>
 import { Collapse, CollapseItem } from "vant";
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, nextTick } from "vue";
 import wx from "weixin-js-sdk";
 import { useRouter } from "vue-router";
 import addPopup from "./components/addPopup.vue";
 import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
 import { useStore } from "vuex";
 import FnShareSheet from "@/components/pageComponents/FnShareSheet.vue";
+import IndexMap from "../farm_manage/map/index";
+
 const router = useRouter();
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 
+const indexMap = new IndexMap();
+const mapContainer = ref(null);
+
 onMounted(() => {
+    const point = store.state.home.miniUserLocationPoint;
     getUserList();
+    nextTick(() => {
+        indexMap.initMap(point, mapContainer.value, true);
+    });
 });
 
 const activeNames = ref([1]);
@@ -85,6 +111,12 @@ const dataList = ref([
 const getUserList = async () => {
     const { data } = await VE_API.farm.userFarmSelectOption({ agriculturalQuery: true });
     if (data.length) {
+        // 地图使用筛选后的数据
+        const wktArr = ["POINT (113.10930176274309 22.574540836684672)", "POINT (113.407189 23.032344)"]
+        data.map((item, index) => {
+            item.point = wktArr[index]
+        });
+        indexMap.initData(data, 'name');
         // 清空现有的子项
         dataList.value[0].children = [];
         dataList.value[1].children = data || [];
@@ -206,9 +238,16 @@ const handleItemClick = (data) => {
         width: 100%;
         margin-top: 12px;
         height: calc(100% - 90px);
+        overflow: auto;
+        
+        .map-container {
+            width: 100%;
+            height: 162px;
+            clip-path: inset(0px round 8px);
+            margin-bottom: 10px;
+        }
         .collapse-list {
-            height: 100%;
-            overflow: auto;
+            // height: 100%;
         }
         .text {
             color: #7c7c7c;
@@ -216,6 +255,7 @@ const handleItemClick = (data) => {
         ::v-deep {
             .van-collapse-item__content {
                 padding: 0;
+                background: #F5F7FB;
             }
             .van-cell {
                 border-radius: 5px 5px 0 0;
@@ -249,8 +289,51 @@ const handleItemClick = (data) => {
             }
         }
         .list-item {
-            & + .list-item {
-                margin: 0;
+            margin-top: 10px;
+        }
+        
+        .footer-data {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-top: 12px;
+            .footer-l {
+                display: flex;
+                gap: 8px;
+                flex: 1;
+                .farm-info-footer-item {
+                    display: flex;
+                    align-items: baseline;
+                    border: 0.4px solid rgba(215, 215, 215, 0.5);
+                    padding: 8px 5px 5px;
+                    box-sizing: border-box;
+                    .farm-info-footer-item-label {
+                        font-size: 12px;
+                        color: rgba(32, 32, 32, 0.4);
+                        margin-bottom: 4px;
+                    }
+                    .farm-info-footer-item-value {
+                        font-size: 16px;
+                        color: #202020;
+                        padding-left: 2px;
+                        .unit {
+                            font-size: 12px;
+                            padding-left: 2px;
+                            color: rgba(32, 32, 32, 0.4);
+                        }
+                    }
+                }
+            }
+            .footer-action {
+                border: 0.5px solid #888B8D;
+                border-radius: 20px;
+                padding: 5px 12px;
+                font-size: 12px;
+                color: #888B8D;
+                white-space: nowrap;
+                cursor: pointer;
+                flex-shrink: 0;
             }
         }
     }