feat：添加黄色面板，修改bug

src/api/modules/home.js

@@ -0,0 +1,8 @@
+const config = require("../config");
+
+module.exports = {
+  getYellowList: {
+    url: config.base_url + "temp_yellow_board/list",
+    type: "get",
+  }
+};

src/components/PicturePreview.vue

@@ -1,43 +1,22 @@
 <template>
-  <!-- <div v-if="dialogVisible"> -->
   <el-dialog
     v-model="dialogVisible"
-    width="65%"
-    class="picture-preview v-dialog"
+    width="60%"
+    class="picture-preview-wrap v-dialog"
     :show-close="false"
-    top="5vh"
+    top="10vh"
     append-to-body
   >
-    <!-- <template #header>
-      <div class="dialog-header">
-        <div>图片预览</div>
-        <div class="right">
-          <el-icon
-            @click="dialogVisible = false"
-            class="close-icon"
-            color="#00FFF0"
-            size="20px"
-            ><CircleCloseFilled
-          /></el-icon>
-        </div>
-      </div>
-    </template> -->
     <div class="dialog-body">
       <div ref="imageRef" v-if="isArray">
         <el-carousel
           ref="carouselRef"
-          height="88.8vh"
+          height="80vh"
           :initial-index="curIndex"
           :autoplay="false"
           indicator-position="none"
         >
           <el-carousel-item v-for="item in imageUrl" :key="item">
-            <DrawBox
-              v-if="switchValue && item.markText && imgWidth"
-              :sourceData="item.markText"
-              :width="imgWidth"
-              :height="imgHeight"
-            ></DrawBox>
             <img
               class="image no-events"
               :src="item.imgPath"
@@ -72,22 +51,12 @@
                   </div>
                 </div>
               </div>
-              <!-- <div class="right">
-                <div class="block mr">病虫害</div>
-                <div class="block">二梢杀虫</div>
-              </div> -->
             </div>
           </el-carousel-item>
         </el-carousel>
       </div>
 
       <div style="height: 100%" v-else>
-        <DrawBox
-          v-if="switchValue && imageUrl.markText && imgWidth"
-          :sourceData="imageUrl.markText"
-          :width="imgWidth"
-          :height="imgHeight"
-        ></DrawBox>
         <img
           class="image no-events"
           :src="imageUrl.filename + '?x-oss-process=image/resize,w_2000'"
@@ -124,31 +93,22 @@
               </div>
             </div>
           </div>
-          <!-- <div class="right">
-              <div class="block mr">病虫害</div>
-              <div class="block">二梢杀虫</div>
-            </div> -->
         </div>
       </div>
       <!-- 自定义水印内容 -->
       <!-- <slot v-else></slot> -->
     </div>
   </el-dialog>
-  <!-- </div> -->
 </template>
 
 <script setup>
-import DrawBox from "@/components/drawBox.vue";
-import { ref, watch, computed, onMounted, nextTick } from "vue";
+import eventBus from "@/api/eventBus";
+import { ref, watch, computed } from "vue";
 const props = defineProps({
   imageUrl: {
     type: [Object, Array],
     default: () => {},
   },
-  show: {
-    type: Boolean,
-    default: false,
-  },
   switchValue: {
     type: Boolean,
     default: false,
@@ -172,35 +132,22 @@ const isArray = computed(() => Array.isArray(props.imageUrl));
 
 const dialogVisible = ref(false);
 
+eventBus.on('dialog:show',(e)=>{
+  dialogVisible.value = e
+})
+
 const carouselRef = ref(null);
 const imageRef = ref(null);
-const imgWidth = ref("");
-const imgHeight = ref("");
 
 const caruuselItem = ref(null);
-
-onMounted(async () => {
-  dialogVisible.value = true;
-  await nextTick();
-  if (imageRef.value) {
-    imgWidth.value = imageRef.value.offsetWidth;
-    imgHeight.value = imageRef.value.offsetHeight;
-  }
-});
-
-watch(
-  () => props.show,
-  (newValue, oldValue) => {
-    if (carouselRef.value && carouselRef.value.setActiveItem) {
-      carouselRef.value.setActiveItem(props.curIndex);
-    }
-    dialogVisible.value = true;
-  }
-);
 </script>
 
-<style lang="scss" scoped>
-.picture-preview {
+<style lang="scss">
+.picture-preview-wrap {
+  padding: 0;
+  .el-dialog__header{
+    padding-bottom: 0 !important;
+  }
   .dialog-body {
     position: relative;
     width: 100%;

src/views/home/index.vue

@@ -81,15 +81,15 @@
   <div ref="mapRef" class="bottom-map"></div>
 
   <!-- 图片弹窗 -->
-  <!-- <PicturePreview
-    :show="dialogVisible"
+  <PicturePreview
     :imageUrl="urls"
     :curIndex="urlsIndex"
-  ></PicturePreview> -->
+  ></PicturePreview>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
+import config from "@/api/config.js"
 import PicturePreview from "@/components/PicturePreview.vue";
 import fnHeader from "@/components/fnHeader.vue";
 import navigation from "@/components/navigation.vue";
@@ -106,7 +106,6 @@ import SamplePointLayer from "./map/samplePointLayer";
 import {useStore} from "vuex";
 import RegionLayer from "./map/regionLayer";
 import eventBus from "@/api/eventBus";
-// import "./map/mockFarmLayer"
 let store = useStore()
 const components = {
   homePage,
@@ -129,24 +128,44 @@ let regionLayer = null
 const router = useRouter();
 const mapRef = ref();
 onMounted(() => {
-  homeMap.initMap(store.getters.userinfo.location, mapRef.value);
+  homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
+  // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
   samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion)
   regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
+
+  getYellow()
 });
 
-const dialogVisible = ref(true)
+const urls = ref([])
+const urlsIndex = ref(0)
+const getYellow = () =>{
+  VE_API.home.getYellowList().then(res =>{
+    urls.value = res.data.map(item =>{
+      return {
+        ...item,
+        imgPath:config.base_img_url2+item.cloudFilename
+      }
+    })
+  })
+}
 
 const btnIndex = ref(null)
 const btnName = ref("")
 const handleBtn = (e) =>{
+  btnName.value = ""
   btnIndex.value = e
+  eventBus.emit("clear:area")
+  regionLayer.resetData()
+  samplePointLayer.resetPoint()
 }
 
 //点击果园日志
 const handleSelectArea = () =>{
+  btnName.value = ""
+  btnIndex.value = null
   eventBus.emit("clear:area")
-  console.log('currentFarm',currentFarm);
-  regionLayer.reset(currentFarm)
+  regionLayer.resetData()
+  samplePointLayer.resetPoint()
 }
 
 //农事点击高亮
@@ -158,6 +177,9 @@ const handleAct = (v) =>{
 
 //柱状图点击事件监听
 eventBus.on('echart:barClick',(e)=>{
+  btnName.value = ""
+  btnIndex.value = null
+  eventBus.emit("clear:area")
   const arr =  ["病虫害03", "病害1", "虫害1","病虫害02"]
   const isDraw = arr.includes(e)
   if(isDraw){
@@ -165,6 +187,11 @@ eventBus.on('echart:barClick',(e)=>{
   }
 })
 
+//黄板点击事件监听
+eventBus.on('click:yellowBlock',()=>{
+  eventBus.emit('dialog:show',true)
+})
+
 const showPoint = ref(true)
 //地图点击事件
 eventBus.on('click:point',(e)=>{
@@ -187,6 +214,7 @@ eventBus.on('click:area',(e)=>{
     }else{
       showPoint.value = false
     }
+    regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,["#f2d1909c","#f2d1909c"])
   }
 })
 

src/views/home/map/homeMap.js

@@ -19,7 +19,7 @@ class HomeMap {
   }
 
   initMap(location, target) {
-    let level = 19;
+    let level = 19.2;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
     this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
     eventBus.emit('homeMap:init', this.kmap);

src/views/home/map/regionLayer.js

@@ -64,19 +64,25 @@ class RegionLayer {
 
     selectArea(index,color){
         if(this.index !=null){
-            this.area[this.index].set("bgName", "defalut");
+            this.resetData()
         }
         this.colorArea = color
         this.area[index].set("bgName", "active");
         this.index = index
     }
 
+    resetData(){
+        this.area.forEach(item =>{
+            item.set("bgName", "defalut");
+        })
+    }
+
     selectAreaMultiple(arr,color){
+        this.resetData()
+        this.colorArea = color
         arr.forEach(item =>{
-            console.log('item',item);
             this.area[item].set("bgName", "active");
         })
-        this.colorArea = color
     }
 
     initData(farmId) {

src/views/home/map/samplePointLayer.js

@@ -36,7 +36,25 @@ class SamplePointLayer {
       minZoom:15,
       source:this.clusterSource,
       style:(f)=> this.getStyle(f)})
+    this.yellowBlockLayer = new KMap.VectorLayer("yellow-block",999,{
+      minZoom:15,
+      // source:this.clusterSource,
+      // source:"POINT(113.61396985128522 23.5859386716038)",
+      style: () => {
+        return new Style({
+          image: new Icon({
+            src: require("@/assets/images/map/yellow-block.png"),
+            scale: 0.4,
+          }),
+        });
+      },
+    })
     map.addLayer(this.treeClusterLayer.layer)
+    map.addLayer(this.yellowBlockLayer.layer);
+
+    let point = new Feature(new Point([113.61396985128522,23.5859386716038]));
+    this.yellowBlockLayer.addFeature(point);
+
     this.initData(this.farmId, this.regionId)
     this.addMapSingerClick(map);
   }
@@ -45,7 +63,7 @@ class SamplePointLayer {
       image: new Icon({
         // src: feature.get('icon'),
         src: require(`@/assets/images/map/${feature.get('iconName')}-icon.png`),
-        scale:0.3,
+        scale:0.25,
       })
     });
     return style
@@ -88,29 +106,47 @@ class SamplePointLayer {
   addMapSingerClick(kmap){
     let that = this
     kmap.on("singleclick", (evt) => {
+      let hasFeature = false
       kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
         if (layer instanceof VectorLayer && layer.get("name") === "tree-cluster") {
+          hasFeature = true
           if(that.curPoint){
             that.curPoint.set("iconName", "defalut");
           }
           const featureArr = feature.get("features")
           const fs = featureArr[0]
           that.curPoint = fs
-          // fs.set("iconName", "active");
+          fs.set("iconName", "active");
           eventBus.emit("click:point",{name:fs.get("id"),value:fs.get("highYield")})
         }
-        if (layer instanceof VectorLayer && layer.get("name") === "regionLayer") {
-          if(that.curArea){
-            that.curArea.set("bgName", "defalut");
-          }
-          feature.set("bgName", "active");
-          that.curArea = feature
-          eventBus.emit("click:area",{name:feature.get("id"),value:feature.get("highYield")})
+        if (layer instanceof VectorLayer && layer.get("name") === "yellow-block") {
+          hasFeature = true
+          console.log('333333');
+          eventBus.emit("click:yellowBlock")
         }
       })
+      if(!hasFeature){
+          kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+            if (layer instanceof VectorLayer && layer.get("name") === "regionLayer") {
+              hasFeature = false
+              if(that.curArea){
+                that.curArea.set("bgName", "defalut");
+              }
+              feature.set("bgName", "active");
+              that.curArea = feature
+              eventBus.emit("click:area",{name:feature.get("id"),value:feature.get("highYield")})
+            }
+        })
+      }
     })
   }
 
+  resetPoint(){
+    if(this.curPoint){
+      this.curPoint.set("iconName", "defalut");
+    }
+  }
+
   getIcon(item){
     // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
     // if(item.status == 9){