fix: 果园档案，对比，样式

src/components/fnHeader.vue

@@ -60,7 +60,7 @@ const toggleFarm = (val) => {
     sessionStorage.setItem("farmId", farmVal.value);
     const curGarden = options.value.filter(item =>item.organId === val)
     sessionStorage.setItem("point", curGarden[0].wkt);
-    // eventBus.emit('garden:organId',val)
+    eventBus.emit('garden:organId',val)
     router.push({ name: "Home" });
 };
 

src/components/navigation.vue

@@ -120,19 +120,19 @@ const handleTab = ({ id, name,children }) => {
 const list = ref([
     [
         {
-            name: "异常总览",
+            name: "果园总览",
             id: 0,
         },
-        {
-            name: "基本指标",
-            id: 1,
-            children: ["树高", "冠幅"],
-        },
-        {
-            name: "物候指标",
-            id: 2,
-            children: ["花穗长度", "单树花穗率"],
-        },
+        // {
+        //     name: "基本指标",
+        //     id: 1,
+        //     children: ["树高", "冠幅"],
+        // },
+        // {
+        //     name: "物候指标",
+        //     id: 2,
+        //     children: ["花穗长度", "单树花穗率"],
+        // },
         {
             name: "生态指标",
             id: 3,
@@ -148,13 +148,17 @@ const list = ref([
             id: 5,
             children: ["病害比例", "虫害比例"],
         },
-    ],
-    [
         {
-            name: "处方图",
-            id: 6,
+            name: "农事处方",
+            id: 1,
         },
     ],
+    // [
+    //     {
+    //         name: "指标对比",
+    //         id: 11,
+    //     },
+    // ],
 ]);
 
 const toPage = () => {
@@ -164,6 +168,7 @@ const toPage = () => {
 // 对比
 const checkedCompareChildren = ref([]);
 function handleCompareChange(v) {
+    console.log('cc', v);
     eventBus.emit("compareTree", checkedCompareChildren.value.length > 0 ? true : false)
 }
 </script>
@@ -172,8 +177,8 @@ function handleCompareChange(v) {
 .navigation {
     position: fixed;
     top: 34px;
-    // left: calc(50% - 470px);
-    left: 50%;
+    left: calc(50% - 70px);
+    // left: 50%;
     transform: translateX(-50%);
     width: calc(100% - 430px * 2);
     display: flex;
@@ -242,6 +247,7 @@ function handleCompareChange(v) {
         flex-direction: column;
         &.compare-btn {
             right: 26px;
+            top: 0px;
         }
         ::v-deep {
             .el-checkbox {

src/views/home/album/album_compoents/albumCarousel7d.vue

@@ -52,7 +52,6 @@ onUnmounted(()=>{
 })
 
 const getImageList = (params) =>{
-  console.log('get img');
   VE_API.image.list(params).then(res => {
     if(res.code === 0){
       let result = splitByWeek(res.data, params.startDate, params.endDate);

src/views/home/album/index.vue

@@ -112,17 +112,21 @@
                                             <!-- 已完成 -->
                                             <div class="card-desc">
                                                 <span class="desc-title">服务主体：</span>
-                                                {{ card.serviceMain || "大荔农业" }}
+                                                <span class="desc-val">{{ card.serviceMain || "大荔农业" }}</span>
                                             </div>
                                             <div class="card-desc">
                                                 <span class="desc-title">执行主体：</span>
-                                                {{ card.executeMain || "大荔农业" }}
+                                                <span class="desc-val short">{{ card.executeMain || "大荔农业" }}</span>
+                                            </div>
+                                            <div class="card-desc">
+                                                <span class="desc-title">执行时间：</span>
+                                                {{ card.executeDate }}
                                             </div>
                                             <div class="card-desc">
                                                 <span class="desc-title">指导专家：</span>
                                                 <span class="expert-link" @click="toExpert(card.expertName)">
                                                     {{ card.expertName }}
-                                                    <el-icon color="#F0AC37" class="icon" size="12"><Link /></el-icon>
+                                                    <!-- <el-icon color="#F0AC37" class="icon" size="12"><Link /></el-icon> -->
                                                 </span>
                                             </div>
                                         </div>
@@ -324,7 +328,7 @@ onMounted(() => {
     // farmId.value = 88388;
 
     farmId.value = sessionStorage.getItem("farmId")
-    getFarmDetail(farmId.value);
+    // getFarmDetail(farmId.value);
     // getFarmWorkList(farmId.value);
     // window.addEventListener("scroll", debouncedHandleScroll);
 
@@ -340,14 +344,14 @@ function toggleAreaId({ areaId, farmId }) {
     farmWorkList.value = []
     getFarmWorkList(farmId)
     console.log('farmId', farmId);
-    getFarmLog()
+    // getFarmLog()
     // farmId.value = farmId
 }
 
 function getListData(farmIdVal) {
     console.log('farmIdVal', farmIdVal);
     farmId.value = farmIdVal
-    getFarmDetail(farmId.value);
+    // getFarmDetail(farmId.value);
     // getFarmWorkList(farmId.value);
 }
 
@@ -971,15 +975,27 @@ function addNsRecord(){
                                 color: #9F9F9F;
                                 font-size: 12px;
                                 line-height: 18.2px;
+                                display: flex;
+                                align-items: center;
                                 .desc-title {
                                     color: #494949;
                                 }
+                                .desc-val {
+                                    max-width: 100px;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                    &.short {
+                                        max-width: 80px;
+                                    }
+                                }
                                 .rescription-wrap {
                                     display: flex;
                                     align-items: center;
                                     .detail-text {
                                         color: #FFD489;
                                         padding-left: 6px;
+                                        cursor: pointer;
                                     }
                                 }
                                 .rescription {
@@ -991,7 +1007,7 @@ function addNsRecord(){
                                 .expert-link {
                                     display: inline-flex;
                                     align-items: center;
-                                    color: #F0AC37;
+                                    // color: #F0AC37;
                                     .icon {
                                         padding-left: 4px;
                                     }
@@ -1000,7 +1016,7 @@ function addNsRecord(){
                             .step-box {
                                 position: absolute;
                                 right: 0px;
-                                top: 32px;
+                                top: 56px;
                             }
                             .card-link {
                                 display: flex;

src/views/home/album_compoents/compareDialog.vue

@@ -6,7 +6,6 @@
         class="picture-preview-wrap v-dialog"
         :show-close="false"
         append-to-body
-        @close="closeCompare"
     >
         <div class="picture-file">
             <div class="compare-l">
@@ -14,7 +13,7 @@
                     <album-carousel-item
                         lbum-carousel-item
                         v-if="images"
-                        :key="nameRef"
+                        :key="nameRef+farmId+sampleId"
                         :name="nameRef"
                         :farmId="farmId"
                         :images="images"
@@ -87,7 +86,7 @@
                 <album-carousel-item
                     lbum-carousel-item
                     v-if="images2"
-                    :key="nameRef + '2'"
+                    :key="nameRef + '2' + farmId2 + sampleId2"
                     :name="nameRef"
                     :farmId="farmId2"
                     :images="images2"
@@ -167,6 +166,8 @@ import eventBus from "@/api/eventBus";
 const lock = ref(false);
 const farmId = ref(766);
 const farmId2 = ref(766);
+const sampleId = ref(null);
+const sampleId2 = ref(null);
 const nameRef = ref("");
 
 const isLoadingImg = ref(true);
@@ -213,10 +214,13 @@ const qualityBox2 = ref([
 ]);
 eventBus.on("showCompareDialog", function (compareArr) {
     console.log("compareArr", compareArr);
+    images.value = []
+    images2.value = []
     compareArr.map((item, index) => {
         dialogVisible.value = true;
         if (index === 0) {
             farmId.value = item.farmId
+            sampleId.value = item.sampleId
             VE_API.miniimage.list({ farmId: item.farmId, sampleId: item.sampleId }).then((res) => {
                 if (res.code === 0) {
                     images.value = res.data;
@@ -236,6 +240,7 @@ eventBus.on("showCompareDialog", function (compareArr) {
             qualityBox.value[2].value = data.dxtj ? data.dxtj + "%" : "--";
         } else {
             farmId2.value = item.farmId
+            sampleId2.value = item.sampleId
             VE_API.miniimage.list({ farmId: item.farmId, sampleId: item.sampleId }).then((res) => {
                 if (res.code === 0) {
                     images2.value = res.data;
@@ -350,7 +355,6 @@ function toggleNamePic(name) {
     } else {
         eventBus.emit("change:watermark", "");
     }
-
 }
 
 // 质量详情
@@ -362,9 +366,6 @@ function toggleAcitve2 (name){
     toggleNamePic(name)
 }
 
-function closeCompare() {
-    eventBus.emit("closeCompare")
-}
 </script>
 
 <style lang="scss" scoped>
@@ -380,7 +381,6 @@ function closeCompare() {
     .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;
         .file-title {
             font-size: 20px;

src/views/home/components/homeFile.vue

@@ -114,7 +114,7 @@ const photoList = ref([
     {key: "物候", statement: "营养老熟 延迟，12月10日 末次老熟"},
     {key: "病虫", statement: "病虫 2025年02月19日，发现毛毡病异常1级"},
     {key: "异常", statement: "2025年03月17日，发现花量大异常3级"},
-    {key: "营养", statement: "无营养异常"},
+    {key: "农事", statement: "无营养异常"},
 ]);
 
 const activeOuput = ref(1);
@@ -133,6 +133,8 @@ const getSpeciesItemList = (farmId,regionId) =>{
     })
 }
 
+function changeSelect() {}
+
 
 // 产量详情
 function toggleAcitve(name) {

src/views/home/components/homePage.vue

@@ -274,7 +274,8 @@ const gybg = () => {
 
     .chart-item {
         width: 100%;
-        height: calc(100% / 4.15);
+        // height: calc(100% / 4.15);
+        height: 228px;
         box-sizing: border-box;
         margin-bottom: 10px;
         .box-flex {
@@ -318,7 +319,7 @@ const gybg = () => {
         }
         .base-wrap {
             width: 100%;
-            height: 70px;
+            height: 64px;
             margin-top: 4px;
             display: flex;
             justify-content: space-evenly;

src/views/home/index.vue

@@ -7,14 +7,14 @@
                 <tool-list direction="left" :list="leftToolList" @handleActive="handleActiveLeft"></tool-list>
                 <component :is="components[currentComponent]" />
                 <!-- 箭头 -->
-                <div class="arrow" @click="handleShrink">
+                <div class="arrow" @click="handleShrink('left')">
                     <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                 </div>
             </div>
             <div class="home-bottom">
-            <!-- <time-line class="time-wrap yes-events"></time-line>
+                <!-- <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">
+                <!-- <div class="log-box yes-events">
           <chart-box class="overflow">
             <template #title-name>
               <div class="box-name" @click="handleSelectArea">果园日志</div>
@@ -38,15 +38,16 @@
                         <file-bar></file-bar>
                     </chart-box>
                 </div> -->
-                <div class="garden-file yes-events">
-                    <home-file></home-file><!-- 箭头 -->
-                    <div class="arrow" @click="handleShrink">
+                <div class="garden-file yes-events" :class="{ isShrink: isShrink }">
+                    <home-file></home-file
+                    ><!-- 箭头 -->
+                    <div class="arrow" @click="handleShrink('bottom')">
                         <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                     </div>
                 </div>
             </div>
             <div class="right yes-events">
-                <div class="list">
+                <div class="list album-r">
                     <chart-box name="农事列表" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
                         <template v-if="rightIndex === 0">
                             <album></album>
@@ -87,21 +88,20 @@
             </div>
 
             <!-- 图例 -->
-            <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">
+            <!-- <img class="legend yes-events" src="@/assets/images/home/legend-img.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 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 class="item">
+                    <img src="@/assets/images/map/status/defalut-icon.png" alt="" />
+                    无照片
+                </div>
+            <!-- <div class="item">
                     <img src="@/assets/images/map/status/status-bh.png" alt="" />
                     病害异常
                 </div>
@@ -114,7 +114,7 @@
                     万年树
                 </div>
                  -->
-            <!-- </div> -->
+            </div>
         </div>
     </div>
     <div ref="mapRef" class="bottom-map"></div>
@@ -127,9 +127,8 @@
     <!-- 对比 -->
     <compareDialog></compareDialog>
 
-    
     <div class="compare-start-btn yes-events" v-show="showCompareBtn" @click="showCompare">
-        <img src="@/assets/images/home/compare-btn.png" alt="">
+        <img src="@/assets/images/home/compare-btn.png" alt="" />
     </div>
 </template>
 
@@ -195,34 +194,50 @@ onMounted(() => {
     eventBus.on("area:id", areaId);
     //选项卡子项事件监听
     eventBus.on("handleTabItem", handleTabItem);
+    // 是否开启指标对比
+    eventBus.on("compareTree", handleCompare)
+    eventBus.on("clickToCompare:point", toggleCompare);
 });
 
 onUnmounted(() => {
     eventBus.off("area:id", areaId);
     eventBus.off("handleTabItem", handleTabItem);
+    eventBus.off("compareTree", handleCompare)
+    eventBus.off("clickToCompare:point", toggleCompare);
 });
 
+
+function handleCompare(v) {
+    isShrink.value = v
+    if (v === false) {
+        showCompareBtn.value = v
+    }
+}
+
 const blueList = ref([]);
 const getBlueRegionList = (callback) => {
-    let selectAll = undefined
-    if(regionId.value===0){
-        selectAll = 1
+    let selectAll = undefined;
+    if (regionId.value === 0) {
+        selectAll = 1;
     }
-    const areaId = selectAll?undefined:regionId.value
+    const areaId = selectAll ? undefined : regionId.value;
     VE_API.farm.blueRegionList({ farmId: organId.value, regionId: areaId, selectAll }).then(({ data }) => {
         blueList.value = data.map((item) => {
             let color = "rgba(255, 255, 255, 0.5)"; //失效区域
             if (item.status === 2) {
                 //物候期风险
-                color = "rgba(63, 255, 53, 0.5)";
+                // color = "rgba(63, 255, 53, 0.5)";
+                color = "#2BFE00";
             }
             if (item.status === 3) {
                 //生长异常
-                color = "rgba(255, 252, 61, 0.5)";
+                // color = "rgba(255, 252, 61, 0.5)";
+                color = "#FF7410";
             }
             if (item.status === 4) {
                 //病虫害
-                color = "rgba(255, 73, 73, 0.5)";
+                // color = "rgba(255, 73, 73, 0.5)";
+                color = "#F82121";
             }
             return {
                 ...item,
@@ -534,39 +549,44 @@ const toFilePage = () => {
     router.push("/garden-file");
 };
 
-
 // 地图图例
 const showMapLegend = ref(true);
 const handleLegend = (e) => {
-  blueRegionLayer.toggleLayer(e);
+    blueRegionLayer.toggleLayer(e);
 };
 
-eventBus.off("clickToCompare:point", toggleCompare)
-eventBus.on("clickToCompare:point", toggleCompare)
 // 对比
-const compareData = ref([])
-const showCompareBtn = ref(false)
+const compareData = ref([]);
+const showCompareBtn = ref(false);
 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);
-    showCompareBtn.value = compareData.value.length>1 ? true : false
+    compareData.value = [];
+    arr.map((fs) => {
+        compareData.value.push({ farmId: fs.get("farmId"), sampleId: fs.get("id"), data: fs.getProperties() });
+    });
+    console.log("compareData", compareData.value);
+    showCompareBtn.value = compareData.value.length > 1 ? true : false;
 }
 function showCompare() {
-    eventBus.emit("showCompareDialog", compareData.value)
-}
-
-eventBus.off("closeCompare", clsoeCompareFun)
-eventBus.on("closeCompare", clsoeCompareFun)
-function clsoeCompareFun() {
-    showCompareBtn.value = false
-    compareData.value = []
-    console.log('resetett');
+    eventBus.emit("showCompareDialog", compareData.value);
 }
 
+const isShrink = ref(false);
+const isLeftShrink = ref(false);
+const isRightShrink = ref(false);
+const handleShrink = (position) => {
+    switch (position) {
+        case "bottom":
+            isShrink.value = !isShrink.value;
+            break;
+        case "left":
+            isLeftShrink.value = !isLeftShrink.value;
+            break;
+        case "rigth":
+            isRightShrink.value = !isRightShrink.value;
+            break;
+    }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -611,6 +631,12 @@ function clsoeCompareFun() {
             }
         }
         .right {
+            width: calc(376px + 54px + 10px);
+            .album-r {
+                .list-wrap {
+                    width: 375px;
+                }
+            }
             .list {
                 width: 100%;
                 height: 100%;
@@ -729,6 +755,15 @@ function clsoeCompareFun() {
                 // height: 30%;
                 // min-height: 210px;
                 // width: 640px;
+                transition: all 0.3s;
+                width: 800px;
+                height: 320px;
+                overflow: hidden;
+                &.isShrink {
+                    height: 66px;
+                    width: 450px;
+                    overflow: hidden;
+                }
                 .arrow {
                     position: absolute;
                     right: 56px;
@@ -782,18 +817,13 @@ function clsoeCompareFun() {
             // width: 525px;
             height: 20px;
         }
-        .fly-btn {
-            position: fixed;
-            bottom: 34px;
-            right: 444px;
-        }
         .map-bg {
             position: fixed;
             z-index: 2;
             background: rgba(35, 35, 35, 0.8);
             border-radius: 18px;
             padding: 7px 16px;
-            right: 440px;
+            right: 460px;
         }
         .map-btn {
             top: 19px;
@@ -829,11 +859,11 @@ function clsoeCompareFun() {
 .compare-start-btn {
     position: absolute;
     z-index: 2;
-    bottom: 56px;
-    // right: 568px;
-    left: 50%;
-    transform: translateX(-50%);
+    // left: 50%;
+    // transform: translateX(-50%);
     cursor: pointer;
+    bottom: 40px;
+    right: 445px;
     img {
         height: 55px;
     }

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("transparent", strokeColor, 1));
+                feature.setStyle(this.vectorStyle.getPolygonStyle("transparent", item.color, 2));
                 // feature.setStyle(this.vectorStyle.getPolygonStyle(item.color+opacity, strokeColor, 1));
                 this.blueRegionLayer.addFeature(feature);
             }

src/views/home/map/samplePointLayer.js

@@ -76,12 +76,6 @@ class SamplePointLayer {
         });
       }
     })
-    eventBus.off("closeCompare")
-    eventBus.on("closeCompare", () => {
-      that.comparePointArr.map(fs => {
-        fs.set("activeCompare", false)
-      });
-    })
 
     // 果园档案
     eventBus.off("change:mapPoint")
@@ -190,7 +184,6 @@ toggleFilePoint(arr) {
           if(that.isUpdatePoint){
             fs.set("iconName", "active");
           }
-          console.log('that.isCompare', that.isCompare);
           if (!that.isCompare) {
             eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
           } else {

src/views/home/map/warningPolygon.js

@@ -0,0 +1,57 @@
+import config from "@/api/config.js";
+import * as KMap from "@/utils/ol-map/KMap";
+import { newAreaFeature} from "@/utils/map.js";
+
+/**
+ * @description 地图层对象
+ */
+class WarningPolygon {
+    constructor(map, farm) {
+        let that = this;
+        this.vectorStyle = new KMap.VectorStyle();
+
+        // 位置图标
+        this.blueRegionLayer = new KMap.VectorLayer("blueRegionLayer", 99999, {
+            minZoom: 1,
+            maxZoom: 22,
+        });
+        map.addLayer(that.blueRegionLayer.layer);
+
+    }
+
+    initData(arr) {
+        console.log('aaaa', arr);
+        // 清除旧的 blueRegionLayer 图层
+        let that = this
+       if (that.blueRegionLayer) {
+        that.blueRegionLayer.source.clear();
+       }
+       const list = []
+       if(arr&&arr.length>0){
+         for(let item of arr){
+           let feature = newAreaFeature(item);
+           let fillColor = "rgba(52,199,89,0.50)"; //绿色
+           let strokeColor = "#34C759"
+           if(item.status === 1){
+             fillColor = "rgba(199,199,199,0.50)"  //白色
+             strokeColor = "#C7C7C7"
+           }
+           if(item.status === 3){
+             fillColor = "rgba(255,255,0,0.50)"  //黄色
+             strokeColor = "#ffff00"
+           }
+           if(item.status === 4){
+             fillColor = "rgba(243,51,73,0.50)"  //红色
+             strokeColor = "#f33349"
+           }
+           if(item.status !== 0){
+             feature.setStyle(that.vectorStyle.getPolygonStyle('rgba(255,255,255,0)', strokeColor, 1.5));
+             that.blueRegionLayer.addFeature(feature)
+             list.push(feature)
+           }
+         }
+       }
+     }
+}
+
+export default WarningPolygon;