src/components/detailDialog.vue

@@ -0,0 +1,551 @@
+<template>
+    <el-dialog v-model="winDialogVisible" lock-scroll modal-class="album-detail-modal" :showClose="false" width="86%" align-center @close="closeDialog">
+        <div class="detail-log">
+            <div class="congratulation-wrap">
+                <div class="congratulation-box">
+                    <div class="win-des">
+                        <!-- <img src="@/assets/img/weather_index/box-top.png" class="win-icon" /> -->
+                    </div>
+                    <div class="album-detail-box">
+                        <div class="detail-title">{{ dialogData.farmWorkName }}</div>
+                        <div class="detail-desc-box">
+                            <div class="desc-item" v-if="dialogData?.conditionList && dialogData.conditionList.length">
+                                <span class="item-name">触发条件</span>
+                                {{ dialogData.condition || dialogData.conditionList[0].name + dialogData.conditionList[0].value }}
+                            </div>
+                            <div class="desc-item">
+                                <span class="item-name">农事编号</span>
+                                {{ dialogData.code }}
+                            </div>
+                            <div class="desc-item">
+                                <span class="item-name">推荐时间</span>
+                                {{ dialogData.executeDate }}
+                            </div>
+                            <!-- <div class="desc-item">
+                                <span class="item-name">农事宗旨</span>
+                                {{ dialogData.purpose || dialogData.condition }}
+                            </div> -->
+                            <div class="desc-item">
+                                <div class="item-name">药物处方</div>
+                                <div class="item-table">
+                                    <div class="table">
+                                        <div class="th">
+                                            <div class="td">功效</div>
+                                            <div class="td width">名称</div>
+                                            <div class="td">配比</div>
+                                            <div class="td">方式</div>
+                                        </div>
+                                        <div v-for="(prescriptionItem, prescriptionI) in dialogData.prescriptionList" :key="prescriptionI">
+                                            <div class="tr" v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList" :key="subI">
+                                                <div class="td">{{ subP.typeName }}</div>
+                                                <div class="td width">{{ subP.defaultName }}</div>
+                                                <div class="td">{{ subP.ratio }}</div>
+                                                <div class="td">人工</div>
+                                            </div>
+                                        </div>
+                                        <!-- <div class="tr">
+                                            <div class="td width">80%代森锰锌</div>
+                                            <div class="td">山德生</div>
+                                            <div class="td">1:2000</div>
+                                            <div class="td">人工</div>
+                                        </div> -->
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="card-link">
+                                <img :src="dialogData.expertIcon || dialogData.expertUserIcon" />
+                                <div class="expert-name">
+                                    {{ dialogData.expertUserName || dialogData.expertName }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bottom-btn">
+                <div class="btn-item secondary-btn">咨询专家</div>
+                <div class="btn-item primary-btn">触发农事</div>
+            </div>
+            <div class="close-btn" v-show="dialogData.isBtn" @click.stop="winDialogVisible=false">
+                    <!-- <el-icon size="32" color="#fff"><CircleCloseFilled /></el-icon> -->
+                    <el-button v-show="dialogData.typeStr === 'export'" type="primary" class="one-btn" @click.stop="toPage"> 邀请专家诊断 </el-button>
+                    <el-button v-show="dialogData.typeStr === 'activate'" type="primary" class="one-btn" @click.stop="handleAct"> 立即激活专家农事 </el-button>
+                    <!-- <el-button type="primary" class="one-btn" @click.stop="toShare"> 立即分享 </el-button> -->
+            </div>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <div class="close-btn">
+                    <!-- <el-icon size="32" color="#fff"><CircleCloseFilled /></el-icon> -->
+                    <!-- <el-button type="primary" class="one-btn" @click="toShare"> 立即分享 </el-button> -->
+                </div>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script setup>
+import { onActivated, onDeactivated, onMounted, ref } from "vue";
+import eventBus from "@/api/eventBus";
+import wx from "weixin-js-sdk";
+import { useRoute, useRouter } from "vue-router";
+
+const props = defineProps({
+    initReload: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const winDialogVisible = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const sampleId = route.query.sampleId
+const farmId = route.query.farmId;
+
+const dialogData = ref({
+        targetId: "part2",
+        title: "梢期防虫",
+        parentTitle: "秋梢期",
+        consequenceText: "如果不做本次农事，会导致您的产量、质量下降30%，管理得分降低10分",
+        id: "274654",
+        reCheckText: "本次农事复核成效优异，作物产量潜力实现大幅增长，树体营养较充足，土壤肥力增加",
+        farmName: "荔枝博览园",
+        farmPoint: "POINT(113.61702297075017 23.584863449735067)",
+        orderId: "745923632567422976",
+        area: 2.719998598098755,
+        expert: 91356,
+        orderStatus: 4,
+        activeStatus: 0,
+        farmId: 766,
+        regionId: 2,
+        speciesId: "1",
+        speciesName: "荔枝",
+        agriculturalId: 24,
+        farmWorkId: "699343457444958208",
+        farmWorkLibId: "699343457444958208",
+        farmWorkLibName: "梢期营养",
+        farmWorkName: "梢期营养",
+        expertIcon:
+            "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
+        expertName: "韦帮稳",
+        expertUserIcon: "",
+        expertUserName: "韦帮稳",
+        icon: 4,
+        indexChart: [],
+        indexName: "",
+        beforeExecuteDate: "2025-05-26",
+        checkDate: null,
+        executeDate: "2025-08-01",
+        indexJson: "",
+        code: "BZ-YY-04-SQYY-20",
+        expertPrescription: "",
+        condition: "园区叶芽率大于20.0%",
+        solarName: "",
+        reCheck: null,
+        executeBlueZones: [
+            {
+                id: "ws0y1m6x7cjz",
+                level: null,
+            },
+            {
+                id: "ws0y1md9v3ht",
+                level: null,
+            },
+            {
+                id: "ws0y1mdspbk7",
+                level: null,
+            },
+            {
+                id: "ws0y1mdvvdsz",
+                level: null,
+            },
+            {
+                id: "ws0y1me545tg",
+                level: null,
+            },
+        ],
+        menu: 1,
+        isEdit: 0,
+        isMaster: null,
+        num: null,
+        purpose: "",
+        selfExec: null,
+        defaultFarmWork: 0,
+        farmWorkType: 2,
+        farmWorkTypeName: "营养",
+        type: 1,
+        execute: 4,
+        updateDate0: "2025-08-20",
+        updateDate1: null,
+        updateDate2: null,
+        updateDate3: null,
+        updateDate4: null,
+        updateDate5: null,
+        usageMode: "根部施",
+        serviceMain: "广州泽秾丰农资有限公司",
+        updateDate6: null,
+        confirmPicture: [],
+        executeMain: "广州泽秾丰农资有限公司",
+        storeShortName: "泽秾丰",
+        weatherWarningMsg: "",
+        executeEvidence: [],
+        userEvaluation: null,
+        reviewDate: null,
+        reviewDate2: null,
+        reviewImage: [],
+        reviewImage2: [],
+        serviceRegion: "广州市从化区荔枝博览园",
+        users: [
+            {
+                id: null,
+                orderId: null,
+                serviceType: null,
+                userType: null,
+                userId: 81881,
+                joinStatus: null,
+                icon: "https://birdseye-img.sysuimars.com/birdseye-look-mini/Group%201321316260.png",
+                userName: "飞鸟种植助手",
+                area: "",
+                point: "",
+                farmName: "",
+                selected: null,
+            },
+        ],
+        cost: null,
+        prescriptionList: [
+            {
+                name: "营养",
+                pesticideFertilizerList: [
+                    {
+                        defaultDroneRatio: null,
+                        defaultName: "尿素",
+                        defaultRatio: 0,
+                        id: null,
+                        muPrice: null,
+                        muUsage: 15000.0,
+                        muUsage2: 15000.0,
+                        ratio: 0,
+                        ratio2: 0,
+                        remark: "",
+                        usageMode: "",
+                        usageModeList: ["叶面施、根部施"],
+                        orderId: null,
+                        pesticideFertilizerCode: "1001",
+                        pesticideFertilizerId: "1",
+                        pesticideFertilizerName: "尿素",
+                        brand: "山东联盟",
+                        typeName: "营养",
+                        price: 132,
+                        unit: "g",
+                        executeStyle: null,
+                    },
+                    {
+                        defaultDroneRatio: null,
+                        defaultName: "15-15-15复合肥",
+                        defaultRatio: 0,
+                        id: null,
+                        muPrice: null,
+                        muUsage: 45000.0,
+                        muUsage2: 45000.0,
+                        ratio: 0,
+                        ratio2: 0,
+                        remark: "",
+                        usageMode: "",
+                        usageModeList: ["根部施"],
+                        orderId: null,
+                        pesticideFertilizerCode: "1002",
+                        pesticideFertilizerId: "2",
+                        pesticideFertilizerName: "15-15-15复合肥",
+                        brand: "金正大",
+                        typeName: "营养",
+                        price: 220,
+                        unit: "g",
+                        executeStyle: null,
+                    },
+                ],
+            },
+        ],
+        conditionList: [
+            {
+                index: "1-2-001-02-02-02-01-0008",
+                name: "园区叶芽率",
+                type: 1,
+                value: "0.2",
+            },
+        ],
+    });
+const currentCard = ref({});
+const showDialog = (pageParams) => {
+    // dialogData.value = pageParams.card;
+    currentCard.value = {
+        activeIndex: pageParams.activeIndex,
+        farmWorkName: dialogData.value.farmWorkName,
+        farmId: farmId,
+        sampleId: sampleId,
+    };
+    settingData()
+    winDialogVisible.value = true;
+};
+
+onMounted(() => {
+    if (props.initReload) {
+        eventBus.on("detailDialog:showDialog", showDialog); 
+    }
+})
+
+onActivated(()=>{
+    eventBus.on("detailDialog:showDialog", showDialog); 
+})
+
+onDeactivated(()=>{
+    eventBus.off("detailDialog:showDialog", showDialog);
+})
+
+//邀请专家诊断
+const toPage = () =>{
+    router.push('/prescription')
+}
+
+//立即激活
+const handleAct = () =>{
+    winDialogVisible.value = false
+    eventBus.emit("uploadUopup:show",{gardenIdVal:dialogData.value.farmId,orderIdVal:dialogData.value.orderId,textVal:dialogData.value.consequenceText});
+}
+
+// 弹窗关闭
+eventBus.on("detailDialog:toCloseDialog", closeDialog);
+
+
+const pesticideFertilizers = ref([])
+const settingData = () => {
+    pesticideFertilizers.value = flattenDomains(dialogData.value.prescriptionList)
+};
+function flattenDomains(data) {
+  return data.reduce((acc, item) => {
+    return acc.concat(item.pesticideFertilizerList);
+  }, []);
+}
+
+function closeDialog() {
+    winDialogVisible.value = false
+    eventBus.emit("detailDialog:closeDialog")
+}
+
+const toShare = () => {
+    wx.miniProgram.navigateTo({
+        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(currentCard.value)}&type=album`,
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.congratulation-wrap {
+    border-radius: 12px;
+    background: #f4f5f4;
+    width: 100%;
+}
+.detail-log {
+    width: 100%;
+}
+.close-btn {
+    text-align: center;
+    margin-top: 20px;
+}
+.bottom-btn {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    margin-top: 20px;
+    display: flex;
+    .btn-item {
+        flex: 1;
+        text-align: center;
+        height: 38px;
+        line-height: 38px;
+        border-radius: 30px;
+        font-size: 14px;
+        &.secondary-btn {
+            background: #FFFFFF;
+            color: #000000;
+        }
+        &.primary-btn {
+            background: linear-gradient(180deg, #76C3FF, #2199F8);
+            color: #FFFFFF;
+        }
+    }
+    .btn-item + .btn-item {
+        margin-left: 12px;
+    }
+}
+.congratulation-box {
+    border-radius: 12px;
+    background: url("@/assets/img/home/box-top.png") no-repeat top center /contain;
+    .el-message-box__message {
+        padding: 12px 0 24px 0;
+    }
+    .win-title {
+        color: #1d1e1f;
+        font-family: "PangMenZhengDao", sans-serif; /* 使用自定义字体 */
+        text-align: center;
+        font-size: 24px;
+        line-height: 32px;
+    }
+    .win-detail {
+        text-align: center;
+        color: #252525;
+        padding-top: 6px;
+        font-size: 16px;
+        span {
+            font-size: 22px;
+            color: #2199f8;
+            padding: 0 6px;
+            font-weight: bold;
+        }
+    }
+    .win-des {
+        height: 180px;
+        text-align: center;
+    }
+    .win-icon {
+        width: 100%;
+        border-radius: 12px 12px 0 0;
+    }
+}
+.album-detail-box {
+    padding: 0 10px 16px 10px;
+    color: #000;
+    position: relative;
+    // top: -58px;
+    .detail-title {
+        font-size: 24px;
+        font-weight: bold;
+        padding-bottom: 8px;
+        letter-spacing: 1.6px;
+    }
+    .detail-desc-box {
+        position: relative;
+        .desc-item {
+            font-size: 14px;
+            .item-name {
+                color: #999999;
+                margin-right: 12px;
+            }
+            .item-table {
+                margin-top: 8px;
+                .table {
+                    border: 1px solid rgba(196, 196, 196, 0.8);
+                    border-radius: 4px;
+                    font-size: 13px;
+                    .th {
+                        background: #F5F5F5;
+                        color: #999999;
+                        display: flex;
+                        justify-content: space-between;
+                        border-radius: 4px 4px 0 0;
+                        padding: 4px 0;
+                    }
+                    .tr {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        color: #333333;
+                        padding: 6px 0;
+                    }
+
+                    .tr + .tr {
+                        border-top: 1px solid rgba(0, 0, 0, 0.08);
+                    }
+                    .td {
+                        width: 25%;
+                        padding: 0 2px;
+                        text-align: center;
+                    }
+                    .width {
+                        width: 55%;
+                    }
+                }
+            }
+        }
+        .desc-item + .desc-item {
+            padding-top: 4px;
+        }
+        .card-link {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: #2199f8;
+            font-size: 12px;
+            position: absolute;
+            right: 6px;
+            top: 0px;
+            .expert-name {
+                background: #d3e8ff;
+                border-radius: 4px;
+                padding: 1px 12px;
+                margin-top: 4px;
+                display: flex;
+                align-items: center;
+            }
+            img {
+                width: 62px;
+                height: 62px;
+                border-radius: 50%;
+                object-fit: cover;
+            }
+            .icon {
+                padding-right: 2px;
+            }
+        }
+    }
+}
+.dialog-footer {
+    position: relative;
+    .close-btn {
+        position: absolute;
+        bottom: -58px;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        text-align: center;
+    }
+}
+</style>
+
+<style lang="scss">
+.album-detail-modal {
+    .el-overlay-dialog {
+        .el-dialog {
+            padding: 0;
+            border-radius: 12px;
+            background: none;
+            box-shadow: none;
+            margin-bottom: 70px;
+            margin-top: 10px;
+            overflow: auto;
+            scrollbar-width: none;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+            .el-dialog__header {
+                padding: 0;
+            }
+            .el-dialog__body {
+                pointer-events: all;
+                width: 100%;
+            }
+        }
+
+        .one-btn {
+            width: 210px;
+            height: 40px;
+            line-height: 40px;
+        }
+    }
+}
+</style>

src/router/globalRoutes.js

@@ -35,12 +35,14 @@ export default [
     {
         path: "/create_farm",
         name: "CreateFarm",
+        meta: { keepAlive: true },
         component: () => import("@/views/old_mini/create_farm/index.vue"),
     },
     // 编辑地图
     {
         path: "/edit_map",
         name: "EditMap",
+        meta: { keepAlive: true },
         component: () => import("@/views/old_mini/create_farm/editMap.vue"),
     },
     // 农场照片

src/store/modules/home/index.js

@@ -18,7 +18,8 @@ export default {
             fruitsData: [],
             updateGardenList: false,
             gardenId: '',
-            temporarilyForm: {} //添加、编辑农场存放form临时数据
+            temporarilyForm: {}, //添加、编辑农场存放form临时数据
+            polygonData: null
         }
     },
     getters: {
@@ -75,6 +76,10 @@ export default {
         SET_TAB_BAR_HEIGHT(state, height) {
             state.tabBarHeight = height
         },
+        // 创建农场勾选范围
+        SET_FARM_POLYGON(state, polygonData) {
+            state.polygonData = polygonData
+        },
     },
     actions: {
         updateDropdownItem({ commit }, value) {

src/views/old_mini/create_farm/editMap.vue

@@ -10,8 +10,8 @@
                 </div>
                 <div class="footer-address-box">
                     <div class="footer-address">
-                        <div class="address-title">富丽华丽园-18栋-1单元</div>
-                        <div class="address-detail">广东省广州市从化区富江道</div>
+                        <div class="address-title">{{ pointName }}</div>
+                        <div class="address-detail">{{ pointAddress }}</div>
                     </div>
                     <div class="address-btn" @click="goBack">修改地址</div>
                 </div>
@@ -26,11 +26,15 @@
 
 <script setup>
 import customHeader from "@/components/customHeader.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onActivated } from "vue";
 import EditMap from "./map/editMap.js";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
+import { convertPointToArray } from "@/utils/index";
+import { useStore } from "vuex";
 
 const router = useRouter();
+const route = useRoute();
+const store = useStore();
 const mapContainer = ref(null);
 const editMap = new EditMap();
 const mapData = {
@@ -44,15 +48,32 @@ const mapData = {
     regionCode: "LBY-MR-2",
     wkt: "MULTIPOLYGON (((113.61348988377155 23.58617369800422, 113.61395837633405 23.58622555407246, 113.61414076654707 23.58622555407246, 113.61436964832843 23.5862774101407, 113.61478628474084 23.586468741036786, 113.61491681896747 23.58652417337007, 113.61512424307672 23.586449071517652, 113.61491503077356 23.585742756367924, 113.61479880177082 23.585596129050916, 113.61473800497858 23.585451289764112, 113.61438931780664 23.585286780835393, 113.61410858003889 23.585299297865365, 113.61385645239149 23.585249229909184, 113.61378135053907 23.585288569029306, 113.61357571446003 23.585283204611276, 113.61347200232355 23.585342213209604, 113.61338080721704 23.585506721974614, 113.61335934954492 23.585665866485304, 113.61342193444922 23.58616296916816, 113.61348988377155 23.58617369800422)))",
 };
+
+const pointAddress = ref(null)
+const pointName = ref(null)
 onMounted(() => {
-    editMap.initMap("POINT (113.6142086995688 23.585836479509055)", mapContainer.value);
+    pointAddress.value = route.query.pointAddress
+    pointName.value = route.query.pointName
+    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
+    editMap.initMap(point, mapContainer.value);
     // editMap.setAreaGeometry([{ featureWkt: mapData.wkt }]);
 });
+
+onActivated(() => {
+    pointAddress.value = route.query.pointAddress
+    pointName.value = route.query.pointName
+    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
+    editMap.setMapPosition(convertPointToArray(point))
+})
 const goBack = () => {
+    editMap.clearLayer()
     router.back();
 };
 const confirm = () => {
-    router.push("/home");
+    // getAreaGeometry
+    const polygonData = editMap.getAreaGeometry()
+    store.commit("home/SET_FARM_POLYGON", polygonData);
+    router.back();
 };
 </script>
 
@@ -121,6 +142,7 @@ const confirm = () => {
                     border: 1px solid #2199f8;
                     border-radius: 25px;
                     padding: 6px 10px;
+                    flex: none;
                 }
             }
             .edit-map-footer-btn {

src/views/old_mini/create_farm/index.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="create-farm">
-        <custom-header name="创建农场"></custom-header
-        ><!-- 地图 -->
+        <custom-header name="创建农场"></custom-header>
+        <!-- 地图 -->
         <div class="map-container" ref="mapContainer"></div>
         <div class="farm-content">
+            <div class="top-mask"></div>
             <div class="farm-filter">
                 <el-select
                     v-model="locationVal"
@@ -57,22 +58,26 @@
                                         </div>
                                     </el-form-item>
                                     <el-form-item label="农场面积" prop="area">
-                                        <el-input
-                                            placeholder="勾选地块获得农场面积"
-                                            v-model="ruleForm.area"
-                                            autocomplete="off"
-                                        />
+                                        <div class="area-box">
+                                            <el-input
+                                                placeholder="勾选地块获得农场面积"
+                                                v-model="ruleForm.area"
+                                                autocomplete="off"
+                                                style="width: fit-content;"
+                                            />
+                                            <div class="unit">亩</div>
+                                        </div>
                                     </el-form-item>
                                     <el-form-item label="种植作物" prop="period">
                                         <div class="select-wrap">
-                                            <el-select v-model="ruleForm.type" placeholder="作物类型">
+                                            <el-select class="select-item" v-model="ruleForm.type" placeholder="作物类型">
                                                 <el-option label="荔枝" value="lichi" />
                                                 <el-option label="龙眼" value="ly" />
                                             </el-select>
                                             <el-select
                                                 v-model="ruleForm.period"
                                                 placeholder="物候期"
-                                                class="period-select"
+                                                class="period-select select-item"
                                             >
                                                 <el-option label="秋梢期" value="秋梢期" />
                                                 <el-option label="开花期" value="开花期" />
@@ -106,16 +111,34 @@
 import customHeader from "@/components/customHeader.vue";
 import IndexMap from "./map/index.js";
 import { useRoute, useRouter } from "vue-router";
-import { onMounted, ref, reactive } from "vue";
+import { mapLocation } from "./map/index.js"
+import { onMounted, ref, reactive, watch, onActivated } from "vue";
+import { useStore } from "vuex";
+import { convertPointToArray } from "@/utils/index";
 const route = useRoute();
 const router = useRouter();
+const store = useStore();
 
 const indexMap = new IndexMap();
 const mapContainer = ref(null);
 onMounted(() => {
-    indexMap.initMap("POINT (113.61702297075017 23.584863449735067)", mapContainer.value);
+    centerPoint.value = store.state.home.miniUserLocationPoint
+    indexMap.initMap(centerPoint.value, mapContainer.value);
+    const arr = convertPointToArray(centerPoint.value)
+    getLocationName(`${arr[1]},${arr[0]}`)
 });
 
+const polygonArr = ref(null)
+onActivated(() => {
+    // 绘制勾画范围
+    const polygonData = store.state.home.polygonData
+    if (polygonData) {
+        indexMap.setAreaGeometry(polygonData?.geometryArr)
+        polygonArr.value = polygonData.geometryArr
+        ruleForm.area = polygonData.area
+    }
+})
+
 // 搜索
 const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
 
@@ -157,7 +180,9 @@ const handleSearchRes = (v) => {
     const parts = v.value.split(",");
     const coordinateArray = [parseFloat(parts[1]), parseFloat(parts[0])];
     indexMap.setMapPosition(coordinateArray);
+    centerPoint.value = `POINT (${coordinateArray[0]} ${coordinateArray[1]})`
     ruleForm.position = v.item?.title || v.item?.address;
+    pointAddress.value = v.item?.province + v.item?.city + v.item?.district
 };
 
 // 表单
@@ -181,7 +206,11 @@ const submitForm = (formEl) => {
     if (!formEl) return;
     formEl.validate((valid) => {
         if (valid) {
-            console.log("submit!");
+            const params = {
+                ...ruleForm,
+                gemo: polygonArr.value
+            }
+            console.log("submit!", params);
         } else {
             console.log("error submit!");
         }
@@ -191,12 +220,37 @@ const submitForm = (formEl) => {
 const resetForm = (formEl) => {
     if (!formEl) return;
     formEl.resetFields();
-    router.go(-1)
+    router.go(-1);
 };
 
+const centerPoint = ref(null)
+
 function toSubPage() {
-    router.push("/edit_map");
+    router.push(`/edit_map?mapCenter=${centerPoint.value}&pointName=${ruleForm.position}&pointAddress=${pointAddress.value}`);
 }
+
+const pointAddress = ref(null)
+function getLocationName(location) {
+    const params = {
+            key: MAP_KEY,
+            location,
+        };
+        VE_API.old_mini_map.location(params).then(({ result }) => {
+            // locationVal.value = result.formatted_addresses.recommend;
+            const add = result.formatted_addresses?.recommend
+                ? result.formatted_addresses.recommend
+                : result.address + "";
+            ruleForm.position = add
+            pointAddress.value = result.address
+        });
+}
+
+watch(() => mapLocation.data,(newValue, oldValue) => {
+    if (newValue) {
+        centerPoint.value = `POINT (${newValue[0]} ${newValue[1]})`
+        getLocationName(`${newValue[1]},${newValue[0]}`)
+    }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -217,11 +271,21 @@ function toSubPage() {
         height: calc(100% - 40px);
         pointer-events: none;
         z-index: 2;
+        .top-mask {
+            height: 100px;
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            width: 100%;
+            background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+        }
     }
     .farm-filter {
         pointer-events: all;
         margin: 12px;
         position: relative;
+        z-index: 10;
         background: rgba(0, 0, 0, 0.3);
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.4);
@@ -357,7 +421,10 @@ function toSubPage() {
                     //     width: fit-content;
                     // }
                     .period-select {
-                        margin-left: 16px;
+                        margin-left: 6px;
+                    }
+                    .select-item {
+                        min-width: 76px;
                     }
                 }
                 ::v-deep {
@@ -381,9 +448,19 @@ function toSubPage() {
                     }
                     .el-input__wrapper {
                         box-shadow: none;
+                        padding: 1px 6px;
                         // border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                     }
                 }
+                .area-box {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    justify-content: space-between;
+                    .unit {
+                        padding-right: 10px;
+                    }
+                }
                 .position-wrap {
                     display: flex;
                     justify-content: space-between;

src/views/old_mini/create_farm/map/index.js

@@ -5,6 +5,11 @@ import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import { Point } from 'ol/geom';
 import Feature from "ol/Feature";
+import { reactive } from "vue";
+
+export let mapLocation = reactive({
+  data: null,
+});
 
 /**
  * @description 地图层对象
@@ -37,6 +42,7 @@ class IndexMap {
     this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
     this.kmap.addLayer(this.clickPointLayer.layer);
     this.setMapPoint(coordinate)
+    this.addMapSingerClick()
   }
 
   setMapPosition(center) {
@@ -53,6 +59,33 @@ class IndexMap {
     let point = new Feature(new Point(coordinate))
     this.clickPointLayer.addFeature(point)
   }
+
+  // 地图点击事件
+  addMapSingerClick() {
+    let that = this;
+    that.kmap.on("singleclick", (evt) => {
+      // that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+      //   if ( layer instanceof VectorLayer && layer.get("name") === "reportPolygonLayer" ) {
+      //     areaId.data = feature.get("id")
+      //   }
+      // });
+      that.setMapPoint(evt.coordinate)
+      mapLocation.data = evt.coordinate
+    });
+  }
+
+  clearLayer() {
+    // this.kmap.removeLayer(this.clickPointLayer.layer)
+    this.kmap.polygonLayer.source.clear();
+  }
+
+  setAreaGeometry(geometryArr) {
+    this.clearLayer()
+    let that = this
+    geometryArr.map(item => {
+      that.kmap.setLayerWkt(item.featureWkt)
+    })
+  }
 }
 
 export default IndexMap;

src/views/old_mini/home/index.vue

@@ -34,6 +34,8 @@
             :style="{ zIndex: zIndex }"
             @heightChange="heightChange"
         ></home-floating-panel>
+        <!-- 农事信息弹窗 -->
+        <detail-dialog></detail-dialog>
         <!-- 问题提醒 -->
         <!-- <problem-reminder></problem-reminder> -->
     </div>
@@ -45,6 +47,7 @@ import { onMounted, computed, ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import weatherInfo from "@/components/weatherInfo.vue";
+import detailDialog from "@/components/detailDialog.vue"
 import homeFloatingPanel from "./components/homeFloatingPanel.vue";
 import problemReminder from "./components/problemReminder.vue";
 const router = useRouter();
@@ -55,7 +58,8 @@ const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 const indexMap = new IndexMap();
 const mapContainer = ref(null);
 onMounted(() => {
-    indexMap.initMap("POINT (113.61702297075017 23.584863449735067)", mapContainer.value);
+    const point = store.state.home.miniUserLocationPoint
+    indexMap.initMap(point, mapContainer.value);
 });
 
 const isExpanded = ref(false);

src/views/old_mini/home/map/index.js

@@ -1,6 +1,10 @@
 import * as KMap from "@/utils/ol-map/KMap";
 import * as util from "@/common/ol_common.js";
 import config from "@/api/config.js";
+import { Point } from 'ol/geom';
+import Feature from "ol/Feature";
+import Style from "ol/style/Style";
+import Icon from "ol/style/Icon";
 /**
  * @description 地图层对象
  */
@@ -9,6 +13,18 @@ class IndexMap {
     let that = this;
     let vectorStyle = new KMap.VectorStyle();
     this.vectorStyle = vectorStyle;
+    // 位置图标
+    this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
+      style: (f) => {
+        return new Style({
+          image: new Icon({
+            src: require("@/assets/img/home/garden-point.png"),
+            scale: 0.5,
+            anchor: [0.5, 1],
+          }),
+        });
+      },
+    });
   }
 
   initMap(location, target) {
@@ -17,6 +33,9 @@ class IndexMap {
     this.kmap = new KMap.Map( target, level, coordinate[0], coordinate[1], null, 8, 22 );
     let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
     this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
+    this.kmap.addLayer(this.clickPointLayer.layer);
+    let point = new Feature(new Point(coordinate))
+    this.clickPointLayer.addFeature(point)
   }
 }