feat: 果树介绍，柏桥村区域

package.json

@@ -53,6 +53,7 @@
     "vuedraggable": "^2.24.3",
     "vueshowpdf": "^1.1.2",
     "vuex": "^4.0.2",
+    "wellknown": "^0.5.0",
     "xe-utils": "^3.5.4",
     "yarn": "^1.22.22",
     "zdog": "^1.1.3"

src/components/chartBox.vue

@@ -54,7 +54,7 @@ const handleShrink = () =>{
 
   .chart-title {
     width: 100%;
-    height: 38px;
+    height: 44px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -77,7 +77,7 @@ const handleShrink = () =>{
   .chart-content{
     position: relative;
     width: 100%;
-    height: calc(100% - 38px);
+    height: calc(100% - 44px);
     overflow: auto;
     padding: 4px 8px;
     box-sizing: border-box;

src/components/fnHeader.vue

@@ -58,6 +58,8 @@ const props = defineProps({
 const farmVal = ref(sessionStorage.getItem("farmId")*1 || "");
 const toggleFarm = (val) => {
     sessionStorage.setItem("farmId", farmVal.value);
+    console.log('options.value', options.value)
+    console.log('valvalvaloptions.value', val)
     const curGarden = options.value.filter(item =>item.organId === val)
     sessionStorage.setItem("point", curGarden[0].wkt);
     eventBus.emit('garden:organId',val)
@@ -119,6 +121,9 @@ const getGardenList = () => {
             {name: "从化井岗基地",organId:90263, wkt: "POINT(113.5081595 23.5320866)"},
             {name: "创业果园",organId:26196, wkt: "POINT(110.4909544 21.4152538)"},
         );
+        // 柏桥村
+        farmVal.value = 80865
+        toggleFarm(80865)
       });
     }
 };

src/components/navigation.vue

@@ -66,7 +66,7 @@ const changeSelect = (e) =>{
 }
 
 onMounted(()=>{
-    gardenOrganId(sessionStorage.getItem('farmId')*1)
+    // gardenOrganId(sessionStorage.getItem('farmId')*1)
     eventBus.on('handleActive',handleActive)
 })
 const mainMenuArr = computed(() => store.state.home.mainMenu);

src/views/Login.vue

@@ -138,7 +138,7 @@ const onSubmit = () => {
         res.data["pwd"] = undefined
         store.commit(`app/${SET_USER_INFO}`, JSON.stringify(res.data));
         success.value = true;
-        router.push({ name: "warningHome" });
+        router.push({ name: "Home" });
       }
     } else {
       return;

src/views/home/components/adoptList.vue

@@ -43,22 +43,23 @@
                     <div class="tree-tag" v-show="item.status === 0">未定价</div>
                     <div class="tree-tag wait" v-show="item.status === 1">待认养</div>
                     <div class="tree-tag done" v-show="item.status === 2">已认养</div>
-                    <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" />
+                    <!-- <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" /> -->
+                    <img class="tree-img" :src="require(`@/assets/images/foster-home/list/${index < 7 ? index : 0}.png`)" alt="" />
                     <div class="tree-type-name-tag">白糖罂</div>
                 </div>
                 <div class="item-center">
                     <div class="center-t">
-                        BTY-A25
-                        <span class="type-tag">综合:94分</span>
-                        <span class="type-tag">生态:92分</span>
-                        <span class="type-tag">树龄:5年</span>
+                        {{item.bm ? item.bm : "BTY-A3"+index}}
+                        <span class="type-tag">综合:{{item.zh||94}}分</span>
+                        <span class="type-tag">生态:{{item.st||92}}分</span>
+                        <span class="type-tag">树龄:{{item.sl||3}}年</span>
                     </div>
-                    <div class="center-item p-t-2" v-show="!isManySetting">单价：<span>--元/斤</span></div>
+                    <div class="center-item p-t-2" v-show="!isManySetting">单价：<span>{{item.status === 0 ? "--" : item.price||12}}元/斤</span></div>
                     <div class="center-item p-t-2 has-input" v-show="isManySetting || item.settingPrice">
                         单价： <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.price" :min="0" />
                         <span class="unit">元/斤</span>
                     </div>
-                    <div class="center-item">总认养斤数：<span>215斤</span></div>
+                    <div class="center-item">总认养斤数：<span>{{item.total||212}}斤</span></div>
                 </div>
                 <div v-show="!isManySetting && !item.settingPrice" @click="toSettingSinglePrice(index)">
                     <img src="@/assets/images/common/edit-icon.png" alt="" />
@@ -121,14 +122,11 @@ const statusOptions = ref([
 ]);
 
 const adoptList = ref([
-    { status: 0, price: 16 },
-    { status: 0, price: 16 },
-    { status: 0, price: 16 },
-    { status: 0, price: 16 },
-    { status: 0, price: 16 },
-    { status: 0, price: 16 },
-    { status: 0, price: 16 },
-    { status: 0, price: 16 },
+    { status: 0, price: 10, bm: "BTY-A21", pz: "白糖罂", zh: 94, st: 92, sl: 5, total: 215 },
+    { status: 0, price: 12, bm: "BTY-A22", pz: "白糖罂", zh: 92, st: 94, sl: 6, total: 201 },
+    { status: 0, price: 8, bm: "BTY-A25", pz: "白糖罂", zh: 92, st: 94, sl: 4, total: 220 },
+    { status: 1, price: 13, bm: "BTY-A31", pz: "白糖罂", zh: 90, st: 92, sl: 6, total: 202 },
+    { status: 1, price: 10, bm: "BTY-A33", pz: "白糖罂", zh: 90, st: 96, sl: 7, total: 190 },
     { status: 1, price: 16 },
     { status: 1, price: 16 },
     { status: 2, price: 16 },

src/views/home/components/homePage.vue

@@ -28,9 +28,9 @@ const lineYdata = ref([]);
 
 const getBaseData = () => {
     const point = sessionStorage.getItem("point");
-    VE_API.mini_farm.weather_warning_land_check({ point }).then((res) => {
-        baseData.value = res.data || {};
-    });
+    // VE_API.mini_farm.weather_warning_land_check({ point }).then((res) => {
+    //     baseData.value = res.data || {};
+    // });
 
     // 获取气象图表数据
     //   VE_API.mini_farm.gardenItemChart({point}).then(res =>{
@@ -110,8 +110,8 @@ function handleData(name, isChange = true) {
 
 function areaId({ areaId, farmId }) {
     menuList.value = []
-    getReoprt(areaId, farmId);
-    getBaseData();
+    // getReoprt(areaId, farmId);
+    // getBaseData();
 }
 
 const getReoprt = (areaId, farmId) => {

src/views/home/components/treeDetail.vue

@@ -1,30 +1,33 @@
 <template>
     <div class="detail-page">
         <chart-box name="果树介绍" arrow="">
+            <template v-slot:title-right>
+                <div class="back" @click="backToHome">返回</div>
+            </template>
             <div class="detail-content">
                 <div class="detail-main">
                     <div class="bubble-box">
                         <div class="bubble old">
-                            <span>16年</span>
+                            <span>10年</span>
                             <div>树龄</div>
                         </div>
                         <div class="bubble pz">
-                            <span>桂味</span>
+                            <span>白糖罂</span>
                             <div>品种</div>
                         </div>
                         <div class="bubble code">
                             <span>A1158</span>
                             <div>唯一编码</div>
                         </div>
-                        <div class="bubble cl">
-                            <span>100斤</span>
+                        <div class="bubble cl big">
+                            <span>150斤</span>
                             <div>高质产量</div>
                         </div>
-                        <div class="bubble date">
+                        <div class="bubble date big">
                             <span>2025.06.08</span>
                             <div>上市时间</div>
                         </div>
-                        <div class="bubble zb">
+                        <div class="bubble zb big">
                             <span>92分</span>
                             <div>生态指标</div>
                         </div>
@@ -37,7 +40,14 @@
                         </div>
                         <div class="photo-list">
                             <div class="photo-item" v-for="(item, index) in photoList" :key="index">
-                                <img class="img" :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)" alt="" />
+                                <!-- photo-img-2.JPG -->
+                                <!-- <img class="img" :src="require(`@/assets/images/foster-home/tree/photo-img-${1}.JPG`)" alt="" /> -->
+                                <photo-provider>
+                                    <photo-consumer :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)">
+                                        <img class="img" :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)" alt="" />
+                                    </photo-consumer>
+                                    </photo-provider>
+                                
                                 <div class="date">{{ item.date }}</div>
                             </div>
                         </div>
@@ -102,21 +112,26 @@ const handleActive = (index) => {
     handleItem(index);
 };
 
+const emit = defineEmits(['backHome'])
+function backToHome() {
+    emit('backHome')
+}
+
 const photoList = ref([
     {
-        date: "2025.06.07",
+        date: "2025.04.10",
     },
     {
-        date: "2025.05.28",
+        date: "2025.04.03",
     },
     {
-        date: "2025.05.25",
+        date: "2025.03.26",
     },
     {
-        date: "2025.05.22",
+        date: "2025.03.15",
     },
     {
-        date: "2025.05.20",
+        date: "2025.03.08",
     },
 ]);
 
@@ -161,40 +176,70 @@ const sourceList1 = ref([
 
 const sourceList = ref([
     {
-        name: "梢期根肥",
+        name: "保果营养",
         reason: "梢期需需要营养时机",
-        effect: "增强树体营养，促进新梢健壮，增强病虫抗性",
-        date: "2024.07.14",
+        effect: "提高果实质量，减少落果",
+        date: "2025.04.04",
     },
     {
-        name: "壮果根肥",
+        name: "摇花吹花",
         reason: "果期要营养时机",
-        effect: "促进果实快速膨大，提升单果重；减少生理落果与裂果，改善果实均匀度；增强抗高温/暴雨能力",
-        date: "2024.05.07",
+        effect: "防止沤花，促进授粉",
+        date: "2025.03.28",
     },
     {
-        name: "壮花追肥",
+        name: "杀除小叶",
         reason: "花期需要营养时机",
-        effect: "促进花穗健壮，提高雌花比例；增强花期抗低温/阴雨能力",
-        date: "2024.03.07",
+        effect: "促进花穗生长",
+        date: "2025.02.09",
     },
     {
-        name: "梢期高温干旱",
+        name: "壮花营养",
         reason: "梢期需需要营养时机",
-        effect: "每日早晚树冠喷水降温（避开正午高温），以缓解高温抑制新梢生长，促进新梢抽发整齐、根系吸水效率提升",
-        date: "2024.10.26",
+        effect: "培养健壮花穗",
+        date: "2025.02.03",
     },
     {
-        name: "果期阴雨寡照",
+        name: "催醒营养",
         reason: "果期要营养时机",
-        effect: "补充叶面肥，增强光合作用，促进养分转运，避免光照不足影响，确保果实饱满、甜度高、风味佳",
-        date: "2024.05.24",
+        effect: "促进花芽生长",
+        date: "2025.01.03",
     },
     {
-        name: "花期连续阴雨",
+        name: "杀梢",
         reason: "花期需要营养时机",
-        effect: "雨停间隙人工施粉或放蜂授粉，轻摇树枝排出花穗积水，防止雨水冲刷花粉和霜疫霉病蔓延，确保坐果率恢复",
-        date: "2024.04.01",
+        effect: "促进花芽分化",
+        date: "2024.12.27",
+    },
+    {
+        name: "清园",
+        reason: "花期需要营养时机",
+        effect: "减少病虫害基数",
+        date: "2024.12.15",
+    },
+    {
+        name: "基肥",
+        reason: "花期需要营养时机",
+        effect: "提供全年营养",
+        date: "2024.12.15",
+    },
+    {
+        name: "控梢",
+        reason: "花期需要营养时机",
+        effect: "减少病虫害基数",
+        date: "2024.12.03",
+    },
+    {
+        name: "梢期防虫",
+        reason: "花期需要营养时机",
+        effect: "减少虫害风险",
+        date: "2024.08.15",
+    },
+    {
+        name: "梢期营养",
+        reason: "花期需要营养时机",
+        effect: "减少虫害风险",
+        date: "2024.08.01",
     },
 ]);
 
@@ -220,6 +265,13 @@ const handleMore = () => {
     position: relative;
     width: 100%;
     height: 100%;
+    .back {
+        background: #4F4F4F;
+        border-radius: 4px;
+        padding: 6px 22px;
+        font-size: 12px;
+        cursor: pointer;
+    }
     .detail-content {
         height: 100%;
         overflow: auto;
@@ -234,49 +286,57 @@ const handleMore = () => {
                 position: relative;
                 width: 100%;
                 .bubble {
-                    color: #fff;
-                    padding: 20px 24px;
-                    font-size: 12px;
+                    font-size: 10px;
                     text-align: center;
+                    width: 60px;
+                    height: 60px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    color: rgba(255, 255, 255, 0.55);
                     background: url("@/assets/images/foster-home/tree/bubble-bg.png") no-repeat center center / 100% 100%;
                     span {
-                        font-size: 13px;
+                        font-size: 14px;
                         font-weight: 500;
+                        color: #fff;
+                    }
+                    &.big {
+                        width: 76px;
+                        height: 76px;
                     }
                     &.pz {
                         position: absolute;
-                        bottom: -76px;
+                        bottom: -96px;
                         left: 0;
-                        padding: 22px 28px;
                     }
                     &.old {
                         position: absolute;
-                        left: 270px;
-                        bottom: -78px;
+                        right: 8px;
+                        bottom: -100px;
                     }
                     &.code {
                         position: absolute;
-                        left: 110px;
-                        bottom: 0;
-                        padding: 38px 16px;
+                        right: 84px;
+                        bottom: -12px;
                     }
                     &.cl {
                         position: absolute;
-                        left: 25px;
-                        bottom: 30px;
-                        padding: 24px 18px;
+                        right: 4px;
+                        bottom: -38px;
                     }
                     &.date {
                         position: absolute;
-                        right: 60px;
-                        bottom: -15px;
-                        padding: 32px 16px;
+                        left: 40px;
+                        bottom: -26px;
+                        span {
+                            font-size: 12px;
+                        }
                     }
                     &.zb {
                         position: absolute;
-                        right: 40px;
-                        bottom: -90px;
-                        padding: 24px 16px;
+                        left: 128px;
+                        bottom: -4px;
                     }
                 }
             }
@@ -367,6 +427,7 @@ const handleMore = () => {
                     color: #FFFFFF;
                     flex: 1;
                     text-align: center;
+                    cursor: pointer;
                     background: rgba(255, 255, 255, 0.08);
                     &.active {
                         background: linear-gradient(180deg, #FFD887, #ED9E1E);
@@ -423,8 +484,10 @@ const handleMore = () => {
             line-height: 1.6;
             flex: 1;
             .name {
-                display: flex;
-                align-items: center;
+                // display: flex;
+                // align-items: center;
+                color: #6C6C6C;
+                font-size: 12px;
                 .main-name {
                     font-size: 16px;
                     color: #000;
@@ -445,6 +508,10 @@ const handleMore = () => {
                         color: #f0a400;
                     }
                 }
+                .val {
+                    flex: 1;
+                    color: rgba(255, 255, 255, 0.8);
+                }
             }
             .van-ellipsis {
                 width: 200px;

src/views/home/homeMap.vue

@@ -8,6 +8,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
 import eventBus from "@/api/eventBus";
 import { convertPointToArray } from "@/utils/index";
 import { deepClone } from "@/common/commonFun";
+import wellknown from 'wellknown';
 import {base_img_url,base_img_url3} from "@/api/config";
 
 const map = ref(null);
@@ -51,7 +52,7 @@ const initMap = async () => {
             // 创建地图实例
             map.value = new AMap.Map("map-container", {
                 zoom: 18, // 初始缩放级别
-                center: [113.6149629 ,23.58594117],
+                center: [111.01055729572, 21.7743543],
                 layers: [
                     // 天地图卫星
                     new AMap.TileLayer({
@@ -142,12 +143,14 @@ const initData = (data) =>{
         item.icon.on('click', () => {
             mapEventType.value = 'click'
             if(item.type === 'defalutIcon'){
-                item.icon.setContent(createMarkerImg()); 
-                item.icon.setOffset(new window.AMap.Pixel(-18, -18))
-                item.type = 'activeIcon'
-                const arr = pointList.value.filter(ele => ele.id === item.id)
-                if(arr.length===0){
-                    pointList.value.push(item)
+                if (startDraw.value) {
+                    item.icon.setContent(createMarkerImg()); 
+                    item.icon.setOffset(new window.AMap.Pixel(-18, -18))
+                    item.type = 'activeIcon'
+                    const arr = pointList.value.filter(ele => ele.id === item.id)
+                    if(arr.length===0){
+                        pointList.value.push(item)
+                    }
                 }
             }else{
                 item.icon.setContent(createMarkerContent(item.color)); 
@@ -173,11 +176,30 @@ const initData = (data) =>{
     setTimeout(()=>{
         map.value.setFitView(null, false, [0, 0, 0, 0]);
     },100)
+    // 范围
+    // const p1 = [
+    //     [111.00745562137854, 21.77564355219471],
+    //     [111.00982318507914, 21.77557930674749],
+    //     [111.01133652227907, 21.776531091149934],
+    //     [111.0125762214629, 21.775945743742568],
+    //     [111.01290458708189, 21.775241423284797],
+    //     [111.01341617119812, 21.773759019078113],
+    //     [111.01320915809049, 21.77329502418189],
+    //     [111.01209794980082, 21.772538355582128],
+    //     [111.01117233946951, 21.772414623609905],
+    //     [111.00909744947245, 21.772878618505956],
+    //     [111.00744610353439, 21.774094523079953],
+    //     [111.00745562137854, 21.77564355219471]
+    //     ]
+    // addPolygon(p1)
+    
 }
 
+const startDraw = ref(false)
 // 开始框选
 const startRectangleSelection = () => {
     if (mouseTool.value) {
+        startDraw.value = true
         mouseTool.value.rectangle({
             strokeColor: "#ffffff", // 框选区域边框颜色
             strokeOpacity: 1, // 边框透明度
@@ -234,7 +256,30 @@ function getSelectPoint(){
     return arr
 }
 
-defineExpose({getSelectPoint,initData,startRectangleSelection,stopDrawRectangle,clearSelection})
+function getRegionList(farmId) {
+    VE_API.region.list({farmId}).then(({data}) =>{
+        data.map(item => {
+            addPolygon(wktToAmapPolygon(item.wkt))
+        })
+    })
+}
+
+function addPolygon(data) {
+    console.log('dddddd', data);
+    let polygon = new window.AMap.Polygon({
+      path: data,
+      fillColor: '#FFE17E',
+      strokeOpacity: 1,
+      fillOpacity: 0.1,
+      strokeColor: 'rgba(255, 255, 255, 0.3)',
+      strokeWeight: 1,
+      strokeStyle: 'solid',
+    //   strokeDasharray: [5, 5],
+    });
+    map.value.add(polygon)
+}
+
+defineExpose({getSelectPoint,initData,startRectangleSelection,stopDrawRectangle,clearSelection, getRegionList})
 
 // 组件挂载时初始化地图
 onMounted(() => {
@@ -244,6 +289,17 @@ onMounted(() => {
 onUnmounted(()=>{
     map.value.destroy()// 销毁地图实例以释放资源
 })
+
+function wktToAmapPolygon(wkt) {
+    const geoJSON = wellknown.parse(wkt);
+    if (!geoJSON || geoJSON.type !== 'MultiPolygon') {
+        console.error('Invalid WKT or not a MULTIPOLYGON');
+        return [];
+    }
+
+    // MULTIPOLYGON 的坐标结构：[[[ [环1], [环2], ... ]]]，取第一个环
+    return geoJSON.coordinates[0][0].map(coord => [coord[0], coord[1]]);
+}
 </script>
 
 <style scoped>

src/views/home/index.vue

@@ -4,7 +4,7 @@
         <div class="content">
             <navigation @handleTab="handleTab"></navigation>
             <div class="left yes-events">
-                <component :is="components[currentComponent]" />
+                <component :is="components[currentComponent]" @backHome="backHome"/>
             </div>
             
             <div class="right yes-events">
@@ -72,7 +72,7 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import config from "@/api/config.js";
 import timeLine from "@/components/timeLine.vue";
 import PicturePreview from "@/components/PicturePreview.vue";
@@ -101,7 +101,7 @@ const components = {
 const router = useRouter();
 const mapRef = ref(null);
 
-const activeName = ref('客户列表')
+const activeName = ref('认养列表')
 onMounted(() => {
     //区域切换监听事件
     eventBus.on("area:id", areaId);
@@ -115,15 +115,20 @@ onUnmounted(() => {
 
 const pointList = ref([])
 const getPointList = () =>{
-    VE_API.variety.pointList({ farmId:766, selectAll:1 }).then(({ data }) => {
+    VE_API.variety.pointList({ farmId:80865, selectAll:1 }).then(({ data }) => {
         const arr = data.map(item =>{
             return{
                 ...item,
+                color: item.fosterStatus === 0 ? "transprent" : (item.fosterStatus === 1 ? "#EEEEEE" : "#F0AC37"),
                 lnglat:convertPointToArray(item.point)
             }
         })
         if(mapRef.value){
-            mapRef.value.initData(arr)
+            setTimeout(() => {
+                mapRef.value.initData(arr)
+                
+                mapRef.value.getRegionList(organId.value)
+            }, 2000)
         }
     })
 }
@@ -146,6 +151,7 @@ const getBlueRegionList = (callback) => {
     if (regionId.value === 0) {
         selectAll = 1;
     }
+    if (!organId.value) return
     const areaId = selectAll ? undefined : regionId.value;
     VE_API.farm.blueRegionList({ farmId: organId.value, regionId: areaId, selectAll }).then(({ data }) => {
         blueList.value = data.map((item) => {
@@ -193,7 +199,7 @@ const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
     tabName.value = name;
     tabId.value = id;
     if (id === 0) {
-        getBlueRegionList();
+        // getBlueRegionList();
     }
 };
 
@@ -202,7 +208,7 @@ function areaId({ areaId, farmId }) {
     organId.value = farmId;
     regionId.value = areaId;
     if (tabId.value === 0) {
-        getBlueRegionList();
+        // getBlueRegionList();
     }
 }
 
@@ -215,6 +221,11 @@ eventBus.on("clickMapPoint", toggleLeftComponet)
 function toggleLeftComponet() {
     currentComponent.value = "treeDetail"
 }
+
+function backHome() {
+    console.log('home');
+    currentComponent.value = "homePage"
+}
 </script>
 
 <style lang="scss" scoped>