fix: 天气预报，果树档案popup，点击空白区域退出或关闭

src/components/navigation.vue

@@ -77,10 +77,12 @@ const changeSelect = (e) =>{
 onMounted(()=>{
     gardenOrganId(sessionStorage.getItem('farmId')*1)
     eventBus.on('handleActive',handleActive)
+    eventBus.on('quitCompare', handleQuitCompare)
 })
 
 onUnmounted(()=>{
     eventBus.off('handleActive',handleActive)
+    eventBus.off('quitCompare', handleQuitCompare)
 })
 
 const emit = defineEmits(["handleTab","handleTabItem"])
@@ -168,9 +170,13 @@ const toPage = () => {
 // 对比
 const checkedCompareChildren = ref([]);
 function handleCompareChange(v) {
-    console.log('cc', v);
     eventBus.emit("compareTree", checkedCompareChildren.value.length > 0 ? true : false)
 }
+
+// 退出对比
+function handleQuitCompare() {
+    checkedCompareChildren.value = []
+}
 </script>
 
 <style lang="scss" scoped>
@@ -238,7 +244,7 @@ function handleCompareChange(v) {
     .checkbox-group {
         position: absolute;
         top: 74px;
-        right: 160px;
+        right: 26px;
         background: rgba(35, 35, 35, 0.8);
         border-radius: 8px;
         border: 1px solid #555555;

src/views/home/album_compoents/albumCarousel.vue

@@ -25,6 +25,7 @@
                 <div class="file-title">
                     <img src="@/assets/images/common/chart-yellow.png" alt="" />
                     果树档案
+                    <span class="tag" v-if="showTag">小农户</span>
                 </div>
                 <div class="overview-file">
                     <div class="box-title">总体档案</div>
@@ -110,17 +111,16 @@ eventBus.on("change:watermark",function(name){
 })
 
 const outputBox = ref([
-    { id: 1, name: "花穗率", value: "" },
-    { id: 2, name: "总枝条数", value: "" },
-    { id: 3, name: "开花率", value: "" },
-    { id: 4, name: "雄花比例", value: "" },
+    { id: 1, name: "产量估计", value: "" },
+    { id: 2, name: "高质果率", value: "" },
 ]);
 
 const qualityBox = ref([
     { id: 5, name: "通风率", value: "" },
     { id: 6, name: "透光率", value: "" },
-    { id: 7, name: "地形条件", value: "" },
+    { id: 7, name: "病虫指标", value: "" },
 ]);
+const showTag = ref(false)
 eventBus.on("click:point",function({farmId,sampleId, data}){
   sampleId = data.id;
     isLoadingImg.value = true
@@ -136,6 +136,7 @@ eventBus.on("click:point",function({farmId,sampleId, data}){
       isLoadingImg.value = false
     }
   })
+  showTag.value = data.nonghu == 1 ? true : false
   photoBaseData.value[0].value = data.pz;
   photoBaseData.value[1].value = data.sgbmj + "平方米";
   photoBaseData.value[2].value = data.cl ? data.cl + "斤" : "--";
@@ -229,7 +230,7 @@ function toggleQualityAcitve() {
 .picture-file {
     display: flex;
     .left-img {
-        min-width: 500px;
+        min-width: 780px;
         min-height: 300px;
     }
     .file-wrap {
@@ -239,6 +240,19 @@ function toggleQualityAcitve() {
         .file-title {
             font-size: 20px;
             color: #ffd489;
+            
+            .tag {
+                border: 1px solid #FFD489;
+                border-radius: 4px;
+                font-size: 12px;
+                display: inline-block;
+                width: 44px;
+                height: 20px;
+                text-align: center;
+                line-height: 18px;
+                margin-left: 8px;
+                padding: 1px 4px;
+            }
         }
         .overview-file {
             padding-top: 20px;

src/views/home/album_compoents/compareDialog.vue

@@ -24,6 +24,7 @@
                     <div class="file-title">
                         <img src="@/assets/images/common/chart-yellow.png" alt="" />
                         果树档案
+                        <span v-show="showTag" class="tag">小农户</span>
                     </div>
 
                     <div class="box-wrap">
@@ -212,6 +213,9 @@ const qualityBox2 = ref([
     { id: 6, name: "透光率", value: "" },
     { id: 7, name: "地形条件", value: "" },
 ]);
+
+const showTag = ref(false)
+const showTag2 = ref(false)
 eventBus.on("showCompareDialog", function (compareArr) {
     console.log("compareArr", compareArr);
     images.value = []
@@ -227,6 +231,7 @@ eventBus.on("showCompareDialog", function (compareArr) {
                 }
             });
             const data = item.data;
+            showTag.value = data.nonghu == 1 ? true : false;
             photoBaseData.value[0].value = data.pz;
             photoBaseData.value[1].value = data.sgbmj + "米";
             photoBaseData.value[2].value = data.cl + "斤";
@@ -247,6 +252,7 @@ eventBus.on("showCompareDialog", function (compareArr) {
                 }
             });
             const data = item.data;
+            showTag2.value = data.nonghu == 1 ? true : false;
             photoBaseData2.value[0].value = data.pz;
             photoBaseData2.value[1].value = data.sgbmj + "米";
             photoBaseData2.value[2].value = data.cl + "斤";

src/views/home/components/homePage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="chart-list">
-        <div class="chart-item">
+        <div class="chart-item weather-item">
             <chart-box name="气象预警">
                 <!-- <template #title-right>
                     <div class="button" @click="gybg">果园报告</div>
@@ -15,8 +15,8 @@
                         <div class="value">{{ baseData.valueMaxList[index].toFixed(0)}}<span>%</span></div>
                     </div>
                 </div>
-                <one-line-chart class="line-chart" :yData="lineYdata" :minData="minData"></one-line-chart>
-                <!-- <weatherChart class="line-chart"></weatherChart> -->
+                <!-- <one-line-chart class="line-chart" :yData="lineYdata" :minData="minData"></one-line-chart> -->
+                <weatherChart class="line-chart"></weatherChart>
             </chart-box>
         </div>
 <!--        <div class="chart-item phenology">-->
@@ -280,6 +280,9 @@ const gybg = () => {
         height: 228px;
         box-sizing: border-box;
         margin-bottom: 10px;
+        &.weather-item {
+            height: 260px;
+        }
         .box-flex {
             width: 100%;
             height: 100%;

src/views/home/components/weatherChart.vue

@@ -386,6 +386,32 @@ const options = {
                 show: false,
             },
         },
+        {
+            type: "category",
+            position: "bottom",
+            offset: -88,
+            boundaryGap: false,
+            zlevel: 100,
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+                formatter: ["{a|{value}°}"].join("\n"),
+                rich: {
+                    a: {
+                        color: "#fff",
+                    },
+                },
+            },
+            data: weatherZdwdlist,
+            axisPointer: {
+                show: false,
+            },
+        },
     ],
     yAxis: {
         show: false,

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">
@@ -38,13 +38,14 @@
                         <file-bar></file-bar>
                     </chart-box>
                 </div> -->
-                <!-- <div class="garden-file yes-events" :class="{ isShrink: isShrink }">
+                <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>
+            </div>
             <div class="right yes-events">
                 <div class="list album-r">
                     <chart-box name="农事列表" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
@@ -129,6 +130,49 @@
     <div class="compare-start-btn yes-events" v-show="showCompareBtn" @click="showCompare">
         <img src="@/assets/images/home/compare-btn.png" alt="" />
     </div>
+
+    <!-- 果树档案 -->
+    <div class="file-wrap map-file" id="popup-file">
+        <div class="file-title">
+            <img src="@/assets/images/common/chart-yellow.png" alt="" />
+            果树档案
+            <span id="tag-nh" class="tag">小农户</span>
+        </div>
+        <div class="overview-file">
+            <div class="box-title">总体档案</div>
+            <div class="base-data" id="file-overview">
+            </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="overview-file">
+            <div class="box-title">产量信息</div>
+            <div class="box-wrap" id="file-output">
+                <div class="box-item">
+                    <div class="item-name"></div>
+                    <div class="item-val"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="overview-file">
+            <div class="box-title">生态评估</div>
+            <div class="box-wrap" id="file-quality">
+                <div class="box-item">
+                    <div class="item-name"></div>
+                    <div class="item-val"></div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -586,6 +630,44 @@ const handleShrink = (position) => {
             break;
     }
 };
+
+// 地图点位--果树档案
+const photoBaseData = ref([
+    {
+        label: "品种",
+        value: "桂味",
+    },
+    {
+        label: "冠幅表面积",
+        value: "10米",
+    },
+    {
+        label: "预估产量",
+        value: "2000斤",
+    },
+    {
+        label: "高质果率",
+        value: "72棵",
+    },
+]);
+const photoList = ref([
+    {key: "病虫", statement: "病虫 2025年02月19日，发现毛毡病异常1级"},
+    {key: "异常", statement: "2025年03月17日，发现花量大异常3级"},
+    {key: "营养", statement: "无营养异常"},
+]);
+
+const outputBox = ref([
+    { id: 1, name: "花穗率", value: "" },
+    { id: 2, name: "总枝条数", value: "" },
+    { id: 3, name: "开花率", value: "" },
+    { id: 4, name: "雄花比例", value: "" },
+]);
+
+const qualityBox = ref([
+    { id: 5, name: "通风率", value: "" },
+    { id: 6, name: "透光率", value: "" },
+    { id: 7, name: "地形条件", value: "" },
+]);
 </script>
 
 <style lang="scss" scoped>
@@ -762,6 +844,11 @@ const handleShrink = (position) => {
                     height: 66px;
                     width: 450px;
                     overflow: hidden;
+                    .arrow {
+                        .icon {
+                            transform: rotate(90deg);
+                        }
+                    }
                 }
                 .arrow {
                     position: absolute;
@@ -858,13 +945,160 @@ const handleShrink = (position) => {
 .compare-start-btn {
     position: absolute;
     z-index: 2;
-    // left: 50%;
-    // transform: translateX(-50%);
+    left: 50%;
+    transform: translateX(-50%);
     cursor: pointer;
-    bottom: 40px;
-    right: 445px;
+    bottom: 106px;
+    // right: 445px;
     img {
         height: 55px;
     }
 }
 </style>
+
+<style lang="less">
+.file-wrap {
+    &.map-file {
+        width: 367px;
+        position: relative;
+        background: url("@/assets/images/home/file-bg.png") no-repeat top center / 100% 100%;
+        margin-left: 12px;
+        padding: 12px;
+        .file-title {
+            font-size: 20px;
+            color: #ffd489;
+            .tag {
+                border: 1px solid #FFD489;
+                border-radius: 4px;
+                font-size: 12px;
+                display: inline-block;
+                width: 44px;
+                height: 20px;
+                text-align: center;
+                line-height: 18px;
+                margin-left: 8px;
+                padding: 1px 4px;
+            }
+        }
+        .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;
+                    .label {
+                        font-size: 12px;
+                        color: #666666;
+                    }
+                    .value {
+                        padding-top: 2px;
+                        font-size: 16px;
+                        color: #ffffff;
+                    }
+                }
+                .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 {
+                // flex: 1;
+                min-width: 109px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: 6px;
+                box-sizing: border-box;
+                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;
+                }
+                &.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/map/samplePointLayer.js

@@ -13,6 +13,7 @@ import Icon from "ol/style/Icon";
 import {Cluster, Vector as VectorSource} from "ol/source";
 import {newPoint} from "@/utils/map";
 import eventBus from "@/api/eventBus";
+import Overlay from 'ol/Overlay'
 
 /**
  * @description 地图层对象
@@ -167,6 +168,17 @@ toggleFilePoint(arr) {
 
   addMapSingerClick(kmap){
     let that = this
+    // 创建弹窗图层
+    this.popup = new Overlay({
+      element: document.getElementById('popup-file'),
+      positioning: 'right-center',
+      offset: [0, 0],
+    });
+    kmap.addOverlay(this.popup);
+    // 点击地图弹窗的关闭-销毁dom
+    // eventBus.on("map:destroyPopup", () => {
+    //   that.popup.setPosition(undefined)
+    // })
     kmap.on("singleclick", (evt) => {
       let hasFeature = false
       kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
@@ -185,7 +197,57 @@ toggleFilePoint(arr) {
             fs.set("iconName", "active");
           }
           if (!that.isCompare) {
-            eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
+            const noImg = fs.get("noImg")
+            if (noImg === 1) {
+              // 无照片
+              document.getElementById('file-overview').innerHTML = `
+                <div class="base-item">
+                  <span class="label">品种</span>
+                  <div class="value">${fs.get("pz")}</div>
+                </div>
+                <div class="base-item">
+                  <span class="label">冠幅表面积</span>
+                  <div class="value">${fs.get("sgbmj")}平方米</div>
+                </div>
+                <div class="base-item">
+                  <span class="label">总枝条</span>
+                  <div class="value">${fs.get("zzts")}</div>
+                </div>
+                <div class="base-item">
+                  <span class="label">树龄</span>
+                  <div class="value">${fs.get("sl")}年</div>
+                </div>
+              `;
+              document.getElementById('file-output').innerHTML = `
+                <div class="box-item">
+                    <div class="item-name">产量估计</div>
+                    <div class="item-val">${fs.get("cl")}斤</div>
+                </div>
+                <div class="box-item">
+                    <div class="item-name">高质果率</div>
+                    <div class="item-val">${fs.get("spgl")}%</div>
+                </div>
+              `;
+              document.getElementById('file-quality').innerHTML = `
+                <div class="box-item">
+                    <div class="item-name">通风率</div>
+                    <div class="item-val">${fs.get("tfl")}斤</div>
+                </div>
+                <div class="box-item">
+                    <div class="item-name">透光率</div>
+                    <div class="item-val">${fs.get("tgl")}%</div>
+                </div>
+                <div class="box-item">
+                    <div class="item-name">病虫指标</div>
+                    <div class="item-val">${fs.get("khl")}%</div>
+                </div>
+              `;
+              
+              document.getElementById('tag-nh').style.display = fs.get("nonghu") == 1 ? "inline-block" : 'none'
+              that.popup.setPosition(evt.coordinate)
+            } else {
+              eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
+            }
           } else {
             // fs.set("iconName", "active")
             fs.set("activeCompare", fs.get("activeCompare") ? false : true);
@@ -225,6 +287,13 @@ toggleFilePoint(arr) {
               }
             }
         })
+        if (that.isCompare) {
+          eventBus.emit("quitCompare")
+          eventBus.emit("compareTree", false)
+        }
+        if (that.popup) {
+          that.popup.setPosition(undefined)
+        }
       }
     })
   }

src/views/home/map/warningPolygon.js

@@ -1,57 +0,0 @@
-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;