fix: 果园档案，对比

src/api/modules/farm.js

@@ -85,4 +85,12 @@ module.exports = {
         url: config.base_dev_url + "z_farm_work_order/delete?key="+config.mini_key,
         type: "get",
     },
+    deleteFarmWork: {
+        url: config.base_dev_url + "z_farm_work_order/delete?key="+config.mini_key,
+        type: "get",
+    },
+    getSpeciesItemList: {
+        url: config.base_dev_url + "lz_sample/speciesItemList?key="+config.mini_key,
+        type: "get",
+    },
 }

src/views/home/album/index.vue

@@ -43,7 +43,7 @@
                     </el-affix>
                     <div class="album-r" @scroll="debouncedHandleScroll2">
                         
-                        <div class="log-wrap">
+                        <!-- <div class="log-wrap">
                             <div class="log-box">
                                 <div class="log-title PangMenZhengDao-FONT">
                                     <span>果园日志</span>
@@ -57,7 +57,7 @@
                                     ></indicatorChart>
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
                         <div
                             class="done-card section"
                             v-for="(card, cardI) in farmWorkList"

src/views/home/components/homeFile.vue

@@ -0,0 +1,303 @@
+<template>
+    <div class="file-wrap">
+        <div class="file-title">
+            <img src="@/assets/images/common/chart-yellow.png" alt="" />
+            果园档案
+        </div>
+
+        <div class="box-wrap">
+            <div class="overview-file">
+                <div class="box-title">总体档案</div>
+                <div class="base-data">
+                    <div class="base-item" v-for="(item, index) in photoBaseData" :key="item.label">
+                        <span class="label">{{ item.label }}</span>
+                        <div v-if="index === 0" class="value">
+                            <el-select
+                                v-model="item.speciesItemId"
+                                size="small"
+                                @change="changeSelect"
+                                class="type-select"
+                                >
+                                <el-option
+                                    v-for="item in selectOptions"
+                                    :key="item.speciesItemId"
+                                    :label="item.speciesItemName"
+                                    :value="item.speciesItemId"
+                                />
+                            </el-select>
+                        </div>
+                        <div v-else class="value">{{ item.value }}</div>
+                    </div>
+                </div>
+                <div class="list">
+                    <div class="list-item" v-for="item in photoList" :key="item.key">
+                        <div class="list-name">
+                            <img src="@/assets/images/common/title-icon.png" alt="" />
+                            {{ item.key }}
+                        </div>
+                        {{ item.statement }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="box-r">
+                <div class="overview-file">
+                    <div class="box-title">产量详情</div>
+                    <div class="box-wrap">
+                        <div
+                            class="box-item"
+                            v-for="(item, index) in outputBox"
+                            :key="index"
+                            @click="toggleAcitve(item.name)"
+                            :class="{ active: activeOuput === item.name }"
+                        >
+                            <div class="item-name">{{ item.name }}</div>
+                            <div class="item-val">{{ item.value }}<span>{{ item.unit }}</span></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="overview-file">
+                    <div class="box-title">生态评估</div>
+                    <div class="box-wrap">
+                        <div
+                            class="box-item"
+                            v-for="(item, index) in qualityBox"
+                            :key="index"
+                            @click="toggleQualityAcitve(item.name)"
+                            :class="{ active: activeOuput === item.name }"
+                        >
+                            <div class="item-name">{{ item.name }}</div>
+                            <div class="item-val">{{ item.value }}<span>{{ item.unit }}</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import eventBus from "@/api/eventBus";
+import { onMounted, ref, } from "vue";
+const outputBox = ref([
+    { id: 1, name: "产量估计", value: "1100", unit: "斤/亩" },
+    { id: 2, name: "高质果率", value: "66", unit: "%" },
+]);
+
+const qualityBox = ref([
+    { id: 5, name: "通风率", value: "78", unit: "%" },
+    { id: 6, name: "透光率", value: "56", unit: "%" },
+    { id: 7, name: "病虫指标", value: "80", unit: "%" },
+]);
+
+const photoBaseData = ref([
+    {
+        label: "品种",
+        value: "桂味",
+    },
+    {
+        label: "冠幅平均表面积",
+        value: "8.7平方米",
+    },
+    {
+        label: "平均总枝条",
+        value: "2000",
+    },
+    {
+        label: "平均树龄",
+        value: "10年",
+    },
+]);
+
+const photoList = ref([
+    {key: "物候", statement: "营养老熟 延迟，12月10日 末次老熟"},
+    {key: "病虫", statement: "病虫 2025年02月19日，发现毛毡病异常1级"},
+    {key: "异常", statement: "2025年03月17日，发现花量大异常3级"},
+    {key: "营养", statement: "无营养异常"},
+]);
+
+const activeOuput = ref(1);
+
+// 品种
+onMounted(() => {
+    
+    getSpeciesItemList(766, 2)
+})
+const selectOptions = ref([])
+const getSpeciesItemList = (farmId,regionId) =>{
+    VE_API.farm.getSpeciesItemList({farmId,regionId}).then(res =>{
+        selectOptions.value = res.data
+        selectOptions.value.unshift({speciesItemId:"0",speciesItemName:"全部"})
+        photoBaseData.value[0].speciesItemId = res.data[0].speciesItemId
+    })
+}
+
+
+// 产量详情
+function toggleAcitve(name) {
+    activeOuput.value = name;
+    eventBus.emit("change:mapPoint", name)
+}
+</script>
+
+<style lang="scss" scoped>
+.file-wrap {
+    margin-top: 16px;
+    background: url("@/assets/images/home/file-bg-w.png") no-repeat top center / 100% 100%;
+    margin-left: 12px;
+    padding: 12px 18px 20px 16px;
+    .file-title {
+        font-size: 20px;
+        color: #ffd489;
+    }
+    .box-wrap {
+        display: flex;
+        .box-r {
+            padding-left: 24px;
+        }
+    }
+    .overview-file {
+        padding-top: 20px;
+        .box-title {
+            font-size: 16px;
+            padding-left: 13px;
+            margin-bottom: 16px;
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            color: #fff;
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 3px;
+                width: 3px;
+                height: 16px;
+                background: #fff;
+                border-radius: 11px;
+            }
+        }
+        .title {
+            color: #f3c11d;
+            font-size: 16px;
+            font-family: "PangMenZhengDao";
+            margin-bottom: 20px;
+            .big {
+                width: 13px;
+                height: 13px;
+                margin: -10px 0 0 4px;
+            }
+            .small {
+                width: 7px;
+                height: 7px;
+                margin-left: -3px;
+            }
+        }
+        .base-data {
+            background: rgba(207, 207, 207, 0.1);
+            border-radius: 4px;
+            padding: 6px 0;
+            display: flex;
+            .base-item {
+                // flex: 1;
+                text-align: center;
+                padding: 0 14px;
+                .label {
+                    font-size: 12px;
+                    color: #666666;
+                    width: max-content;
+                    display: block;
+                    margin: 0 auto;
+                    padding-bottom: 2px;
+                }
+                .value {
+                    padding-top: 2px;
+                    font-size: 16px;
+                    color: #ffffff;
+                    width: max-content;
+                    margin: 0 auto;
+                }
+                .type-select {
+                    width: 72px;
+                    ::v-deep {
+                        .el-select__wrapper {
+                            background: rgba(247, 190, 90, 0.1);
+                            box-shadow: 0 0 0 1px #F7BE5A inset;
+                            color: #FFD489;
+                        }
+                        .el-select__placeholder {
+                            color: #FFD489;
+                        }
+                    }
+                }
+            }
+            .base-item + .base-item {
+                border-left: 1px solid rgba(102, 102, 102, 0.42);
+            }
+        }
+        .list {
+            margin-top: 15px;
+            width: max-content;
+            font-size: 14px;
+            .list-item {
+                color: #bbbbbb;
+                display: flex;
+                margin-bottom: 8px;
+                .list-name {
+                    color: #f3c11d;
+                    margin-right: 6px;
+                    img {
+                        width: 17px;
+                        height: 13px;
+                    }
+                }
+            }
+        }
+    }
+    .overview-file + .overview-file {
+        margin-top: 8px;
+    }
+    .box-wrap {
+        display: flex;
+        .box-item {
+            box-sizing: border-box;
+            min-width: 110px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 6px 16px;
+            background: rgba(207, 207, 207, 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(207, 207, 207, 0.1);
+            cursor: pointer;
+            .item-name {
+                font-size: 12px;
+                color: #666666;
+                width: max-content;
+            }
+            .item-val {
+                font-size: 18px;
+                color: #fff;
+                width: max-content;
+                padding-top: 3px;
+                span {
+                    font-size: 12px;
+                    padding-left: 2px;
+                }
+            }
+            &.active {
+                background: rgba(255, 212, 137, 0.16);
+                border: 1px solid #ffd489;
+                .item-name {
+                    color: #bbbbbb;
+                }
+            }
+        }
+        .box-item + .box-item {
+            margin-left: 8px;
+        }
+    }
+}
+</style>

src/views/home/index.vue

@@ -11,7 +11,7 @@
                     <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                 </div>
             </div>
-            <!-- <div class="home-bottom"> -->
+            <div class="home-bottom">
             <!-- <time-line class="time-wrap yes-events"></time-line>
         <img class="fly-icon" src="@/assets/images/home/fly-icon.png" alt=""> -->
             <!-- <div class="log-box yes-events">
@@ -27,18 +27,24 @@
             </div>
           </chart-box>
         </div> -->
-            <!-- <div class="file-box yes-events">
-          <chart-box name="果园档案">
-            <template #title-right>
-              <el-icon class="arrow-icon cursor-pointer" color="#141414"
-                ><DArrowLeft
-              /></el-icon>
-              <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
-            </template>
-            <file-bar></file-bar>
-          </chart-box>
-        </div> -->
-            <!-- </div> -->
+                <!-- <div class="file-box yes-events">
+                    <chart-box name="果园档案">
+                        <template #title-right>
+                        <el-icon class="arrow-icon cursor-pointer" color="#141414"
+                            ><DArrowLeft
+                        /></el-icon>
+                        <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
+                        </template>
+                        <file-bar></file-bar>
+                    </chart-box>
+                </div> -->
+                <div class="garden-file yes-events">
+                    <home-file></home-file><!-- 箭头 -->
+                    <div class="arrow" @click="handleShrink">
+                        <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
+                    </div>
+                </div>
+            </div>
             <div class="right yes-events">
                 <div class="list">
                     <chart-box name="农事列表" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
@@ -81,19 +87,20 @@
             </div>
 
             <!-- 图例 -->
-            <!-- <img class="legend yes-events" src="@/assets/images/home/legend.png" alt=""> -->
-            <div class="map-bg map-legend yes-events">
-                <div class="legend-item legend-title">
+            <img class="legend yes-events" src="@/assets/images/home/legend-img.png" alt="">
+            <img class="fly-btn yes-events" src="@/assets/images/home/fly-btn.png" alt="">
+            <!-- <div class="map-bg map-legend yes-events"> -->
+                <!-- <div class="legend-item legend-title">
                     <el-checkbox v-model="showMapLegend" @change="handleLegend" label="分区状态" size="large" />
-                </div>
-                <div class="item">
+                </div> -->
+                <!-- <div class="item">
                     <img src="@/assets/images/map/status/status-zc.png" alt="" />
                     小农户
                 </div>
                 <div class="item">
                     <img src="@/assets/images/map/status/status-szyc.png" alt="" />
                     托管区域
-                </div>
+                </div> -->
                 <!-- <div class="item">
                     <img src="@/assets/images/map/status/status-bh.png" alt="" />
                     病害异常
@@ -107,7 +114,7 @@
                     万年树
                 </div>
                  -->
-            </div>
+            <!-- </div> -->
         </div>
     </div>
     <div ref="mapRef" class="bottom-map"></div>
@@ -141,6 +148,7 @@ import homePage from "./components/homePage.vue";
 import weatherPage from "./components/weatherPage.vue";
 import phenologyPage from "./components/phenologyPage.vue";
 import indicatorChart from "./components/indicatorChart.vue";
+import homeFile from "./components/homeFile.vue";
 import { useRouter } from "vue-router";
 import SamplePointLayer from "./map/samplePointLayer";
 import { useStore } from "vuex";
@@ -538,12 +546,14 @@ eventBus.on("clickToCompare:point", toggleCompare)
 // 对比
 const compareData = ref([])
 const showCompareBtn = ref(false)
-function toggleCompare({farmId,sampleId, data}) {
-    compareData.value.push({farmId,sampleId, data})
+function toggleCompare(arr) {
+    // eventBus.emit("clickToCompare:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
+    compareData.value = []
+    arr.map(fs => {
+        compareData.value.push({farmId: fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
+    })
     console.log('compareData', compareData.value);
-    if (compareData.value.length > 1) {
-        showCompareBtn.value = true
-    }
+    showCompareBtn.value = compareData.value.length>1 ? true : false
 }
 function showCompare() {
     eventBus.emit("showCompareDialog", compareData.value)
@@ -552,9 +562,9 @@ function showCompare() {
 eventBus.off("closeCompare", clsoeCompareFun)
 eventBus.on("closeCompare", clsoeCompareFun)
 function clsoeCompareFun() {
-    eventBus.emit("resetCompare", compareData.value)
     showCompareBtn.value = false
     compareData.value = []
+    console.log('resetett');
 }
 
 </script>
@@ -713,6 +723,29 @@ function clsoeCompareFun() {
                 }
             }
 
+            .garden-file {
+                position: relative;
+                top: 10px;
+                // height: 30%;
+                // min-height: 210px;
+                // width: 640px;
+                .arrow {
+                    position: absolute;
+                    right: 56px;
+                    top: 36px;
+                    background: #fff;
+                    height: 16px;
+                    width: 80px;
+                    line-height: 16px;
+                    border-radius: 0 0 5px 5px;
+                    text-align: center;
+                    cursor: pointer;
+                    .icon {
+                        transform: rotate(270deg);
+                    }
+                }
+            }
+
             .file-box {
                 height: 25%;
                 min-height: 210px;
@@ -746,8 +779,13 @@ function clsoeCompareFun() {
             position: fixed;
             bottom: 8px;
             right: 64px;
-            width: 525px;
-            height: 16px;
+            // width: 525px;
+            height: 20px;
+        }
+        .fly-btn {
+            position: fixed;
+            bottom: 34px;
+            right: 444px;
         }
         .map-bg {
             position: fixed;

src/views/home/map/blueRegionLayer.js

@@ -26,7 +26,7 @@ class BlueRegionLayer {
             for (let item of arr) {
                 let feature = newAreaFeature(item);
                 let strokeColor = "#FFFFFF";
-                feature.setStyle(this.vectorStyle.getPolygonStyle(item.nonghu == 1 ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 252, 61, 0.5)", strokeColor, 1));
+                feature.setStyle(this.vectorStyle.getPolygonStyle("transparent", strokeColor, 1));
                 // feature.setStyle(this.vectorStyle.getPolygonStyle(item.color+opacity, strokeColor, 1));
                 this.blueRegionLayer.addFeature(feature);
             }

src/views/home/map/samplePointLayer.js

@@ -64,28 +64,39 @@ class SamplePointLayer {
 
     this.addMapSingerClick(map.map);
 
+    // 对比
     this.isCompare = false
+    this.comparePointArr = []
     eventBus.off("compareTree")
     eventBus.on("compareTree", (val) => {
       that.isCompare = val
+      if (val === false) {
+        that.comparePointArr.map(fs => {
+          fs.set("activeCompare", false)
+        });
+      }
+    })
+    eventBus.off("closeCompare")
+    eventBus.on("closeCompare", () => {
+      that.comparePointArr.map(fs => {
+        fs.set("activeCompare", false)
+      });
     })
 
-
-  eventBus.off("resetCompare", () => {})
-  eventBus.on("resetCompare", (data) => {
-    console.log('dddd reset', data);
-    // data[0].set("activeCompare", true);
-  })
-  // eventBus.on("closeCompare", () => {
-
-  // })
+    // 果园档案
+    eventBus.off("change:mapPoint")
+    eventBus.on("change:mapPoint", (name) => {
+      console.log('name', name);
+    })
+    that.blueRegionLayer = null
   }
   getIconStyle(feature){
+    const activeCompare = feature.get('activeCompare')
     let style = new Style({
       image: new Icon({
-        src: feature.get('activeCompare') ? require('@/assets/images/map/active-icon-small.png') : feature.get('icon'),
+        src: activeCompare ? require('@/assets/images/map/active-icon-small.png') : feature.get('icon'),
         // src: require(`@/assets/images/map/${feature.get('iconName')}-icon.png`),
-        scale:feature.get('scale'),
+        scale: activeCompare ? 0.5 : feature.get('scale'),
       })
     });
     return style
@@ -133,6 +144,33 @@ class SamplePointLayer {
     })
   }
 
+  
+toggleFilePoint(arr) {
+  let that = this
+  // 清除旧的 blueRegionLayer 图层
+  that.clearCluster()
+  if (that.blueRegionLayer) {
+    that.blueRegionLayer.source.clear();
+  }
+  if(arr&&arr.length>0){
+    let features = []
+    for(let item of arr){
+      item.iconName='defalut'
+      that.getIcon(item)
+      let point = newPoint(item);
+      features.push(point)
+      // console.log('item.dyImg',item.dyImg);
+    }
+    const source = new VectorSource({
+      features: features,
+    });
+    that.clusterSource.setSource(source)
+    setTimeout(()=>{
+      that.mapRef.fit(that.clusterSource.source.getExtent(), {padding:[100,100,100,100]})
+    },100)
+  }
+};
+
   addMapSingerClick(kmap){
     let that = this
     kmap.on("singleclick", (evt) => {
@@ -144,7 +182,10 @@ class SamplePointLayer {
             that.curPoint.set("iconName", "defalut");
           }
           const featureArr = feature.get("features")
-          const fs = featureArr[0]
+          let fs = featureArr[0]
+          for(let item of featureArr){
+            fs = fs.get('status') > item.get('status') ? fs : item
+          }
           that.curPoint = fs
           if(that.isUpdatePoint){
             fs.set("iconName", "active");
@@ -153,9 +194,21 @@ class SamplePointLayer {
           if (!that.isCompare) {
             eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
           } else {
-            fs.set("activeCompare", true);
-            fs.set("icon", require('@/assets/images/map/active-icon-small.png'));
-            eventBus.emit("clickToCompare:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
+            // fs.set("iconName", "active")
+            fs.set("activeCompare", fs.get("activeCompare") ? false : true);
+            if (fs.get("activeCompare")) {
+              that.comparePointArr.push(fs) 
+            } else {
+              that.comparePointArr = that.comparePointArr.filter(item => item.get("id") !== fs.get("id"))
+            }
+            
+            if (that.comparePointArr.length > 2) {
+              that.comparePointArr[0].set("activeCompare", false);
+              that.comparePointArr.shift();
+            }
+            console.log('that.comparePointArr', that.comparePointArr);
+            // fs.set("icon", require('@/assets/images/map/active-icon-small.png'));
+            eventBus.emit("clickToCompare:point",that.comparePointArr)
           }
         }
         if (layer instanceof VectorLayer && layer.get("name") === "yellow-block") {
@@ -185,8 +238,10 @@ class SamplePointLayer {
 
   resetPoint(){
     this.isUpdatePoint = null
+    console.log('this.curPoint', this.curPoint);
     if(this.curPoint){
-      this.curPoint.set("iconName", "defalut");
+      // this.curPoint.set("iconName", "defalut");
+      this.curPoint.set("activeCompare", false);
     }
   }
 
@@ -237,12 +292,6 @@ class SamplePointLayer {
       this.treeClusterLayer.layer.getSource().getSource().clear()
     }
   }
-
-  // 对比树
-  toggleCompareTree() {
-    let that = this
-    that.isCompare = true
-  }
 }
 
 export default SamplePointLayer;