feat:添加黄板

src/components/PicturePreview.vue

@@ -16,13 +16,21 @@
           :autoplay="false"
           indicator-position="none"
         >
-          <el-carousel-item v-for="item in imageUrl" :key="item">
-            <img
+        <template v-for="item in imageUrl" :key="item">
+          <template v-for="ele in ['07','08','09','10','11','12','13']" :key="ele">
+             <el-carousel-item >
+            <!-- <img
               class="image no-events"
               :src="item.imgPath"
               alt=""
               fit="cover"
-            />
+            /> -->
+              <img
+                class="image no-events"
+                :src="require(`@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-${ele}.jpg`)"
+                alt=""
+                fit="cover"
+              />
             <div class="watermark-style">
               <div class="left">
                 <div class="region">2区</div>
@@ -52,7 +60,9 @@
                 </div>
               </div>
             </div>
-          </el-carousel-item>
+              </el-carousel-item>
+          </template>
+        </template>
         </el-carousel>
       </div>
 

src/views/home/index.vue

@@ -142,12 +142,21 @@ 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
-      }
-    })
+    // urls.value = res.data.map(item =>{
+    //   return {
+    //     ...item,
+    //     imgPath:config.base_img_url2+item.cloudFilename
+    //   }
+    // })
+    // urls.value = [
+    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
+    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
+    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
+    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
+    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
+    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
+    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
+    // ]
   })
 }
 
@@ -224,7 +233,20 @@ eventBus.on('echart:barClick',(e)=>{
 })
 
 //黄板点击事件监听
-eventBus.on('click:yellowBlock',()=>{
+eventBus.on('click:yellowBlock',(e)=>{
+  const arr = ["113.61396985128522","113.61390710255375","113.61491218688275"]
+  if(arr[0]==e){
+    urls.value = ["HB-ws0y1menggxv"]
+    urlsIndex.value = 0
+  }
+  if(arr[1]==e){
+    urls.value = ["HB-ws0y1mg0pvd" ]
+    urlsIndex.value = 3
+  }
+if(arr[2]==e){
+    urls.value = ["HB-ws0y1mg9wpcp"]
+    urlsIndex.value = 6
+  }
   eventBus.emit('dialog:show',true)
 })
 

src/views/home/map/regionLayer.js

@@ -34,6 +34,7 @@ class RegionLayer {
             "red":["#b8150094","#b8150094"],
             "red1":["#FF733F94","#FF733F94"],
             "red2":["#FFA96C94","#FFA96C94"],
+            "red3":["#FF26267a","#FF26267a"],
             "green":["#006f0b94","#006f0b94"],
             "green1":["#32b81a94","#32b81a94"],
             "green2":["#B7FFAA94","#B7FFAA94"]
@@ -42,27 +43,30 @@ class RegionLayer {
         this.regionLayer = new KMap.VectorLayer("regionLayer", 99, {
             minZoom: 15,
             style: (f) => {
-                let style1
-                style1 = this.vectorStyle.getPolygonStyle("#fba50410", "#eee5e5", 2);
-                if(f.get("bgName")==="active"){
-                    const color = colorObj[f.get("bgColor")]
-                    style1 = this.vectorStyle.getPolygonStyle(color[0], color[1], 2);
-                }
-                const style2 = new Style({
-                    text: new Text({
-                        text: f.get("id"),
-                        color: "#120046",
-                        stroke: new Stroke({
-                            color: "#FFFFFF",
-                            width: 2,
-                        }),
-                        backgroundFill: new Fill({
-                            color: "#f8f9fa10",
-                            width: 2,
-                        }),
-                        font: "30px sans-serif",
-                    }),
-                });
+                const color = colorObj[f.get("bgColor")]
+                const style1 = this.vectorStyle.getPolygonStyle(color[0], color[1], 2);
+                // let style2 = null
+                // if(f.get("id")==0){
+                //     style2 = new Style({
+                //         image: new Icon({
+                //             src: require("@/assets/images/map/yellow-block.png"),
+                //             scale: 0.4,
+                //         }),
+                //         // text: new Text({
+                //         //     text: f.get("id"),
+                //         //     color: "#120046",
+                //         //     stroke: new Stroke({
+                //         //         color: "#FFFFFF",
+                //         //         width: 2,
+                //         //     }),
+                //         //     backgroundFill: new Fill({
+                //         //         color: "#f8f9fa10",
+                //         //         width: 2,
+                //         //     }),
+                //         //     font: "30px sans-serif",
+                //         // }),
+                //     });
+                // }
                 return [style1];
             },
         });
@@ -106,6 +110,17 @@ class RegionLayer {
                 let f = newRegionFeature({...item,bgName:"defalut",bgColor:"defalut"}, "wkt");
                 features.push(f);
             }
+            features.push(
+                newRegionFeature({
+                    highYield:1,
+                    id:"0",
+                    blueZone:"0",
+                    dateValue:"",
+                    bgName:"defalut",
+                    bgColor:"red3",
+                    wkt:"MULTIPOLYGON (((113.61390710255375 23.586379215663726,113.6140224799741 23.586530760891492,113.61429532483612 23.586727463001182,113.61471252366596 23.587019343551333,113.6151313088028 23.587376262702094,113.61544063873373 23.587220804583183,113.61557230224264 23.58706376015681,113.61544222504097 23.586978099560497,113.6151614486422 23.586913060959716,113.61506827952462 23.586818940057697,113.61491218688275 23.58671519555776,113.61477512992872 23.58657909038834,113.61452195527784 23.586449647709514,113.61430590021848 23.586303072911505,113.61396420961808 23.58621741231542,113.61390710255375 23.586379215663726)))"
+                },"wkt")
+            )
             that.area = features
             const source = new VectorSource({
                 features: features,

src/views/home/map/samplePointLayer.js

@@ -55,7 +55,11 @@ class SamplePointLayer {
     map.addLayer(this.yellowBlockLayer.layer);
 
     let point = new Feature(new Point([113.61396985128522,23.5859386716038]));
+    let point1 = new Feature(new Point([113.61390710255375 ,23.586379215663726]));
+    let point2 = new Feature(new Point([113.61491218688275 ,23.58671519555776]));
     this.yellowBlockLayer.addFeature(point);
+    this.yellowBlockLayer.addFeature(point1);
+    this.yellowBlockLayer.addFeature(point2);
 
     this.initData(this.farmId, this.regionId)
     this.addMapSingerClick(map);
@@ -125,7 +129,7 @@ class SamplePointLayer {
         }
         if (layer instanceof VectorLayer && layer.get("name") === "yellow-block") {
           hasFeature = true
-          eventBus.emit("click:yellowBlock")
+          eventBus.emit("click:yellowBlock",feature.get("geometry").flatCoordinates[0])
         }
       })
       if(!hasFeature){