Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/feiniao-pc-vue

src/api/modules/miniimage.js

@@ -0,0 +1,8 @@
+const config = require("../config")
+
+module.exports = {
+    list: {
+        url: config.base_dev_url + "image/list?key="+config.mini_key,
+        type: "post",
+    }
+}

src/api/modules/warning.js

@@ -10,6 +10,11 @@ module.exports = {
         url: config.base_url + "poi/districtById",
         type: "get",
     },
+
+    fetchFarmLog: {
+        url:  config.base_url + "temp_blue_region/vrOrchardContent",
+        type: "post",
+    },
     
     transformLocation: {
         url: "/ws/geocoder/v1",

src/views/home/album_compoents/albumCarousel.vue

@@ -0,0 +1,54 @@
+<template>
+    <el-dialog
+        v-model="dialogVisible"
+        width="60%"
+        class="picture-preview-wrap v-dialog"
+        :show-close="false"
+        top="10vh"
+        append-to-body
+    >
+    <album-carousel-item v-if="images" :images="images"></album-carousel-item>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import "./cacheImg.js"
+import AlbumCarouselItem from "./albumCarouselItem";
+import {dateFormat} from "@/utils/date_util.js"
+import eventBus from "@/api/eventBus";
+
+
+const images = ref(null);
+const dialogVisible = ref(false)
+// 获取当前日期
+const currentDate = new Date();
+// 获取当前日期的前一个月
+const startDate = new Date(currentDate);
+startDate.setMonth(currentDate.getMonth() - 1);
+
+// 格式化日期
+const formattedStartDate = dateFormat(startDate, 'YY-mm-dd');
+const formattedEndDate = dateFormat(currentDate, 'YY-mm-dd');
+
+eventBus.on("click:point",function({name}){
+  let params = {sampleId: name,farmId: 766, startDate: formattedStartDate, endDate: formattedEndDate}
+  VE_API.miniimage.list(params).then(res => {
+    if(res.code === 0){
+      images.value = res.data
+      dialogVisible.value = true
+    }
+  })
+})
+
+
+
+onMounted(() => {
+
+});
+
+</script>
+
+<style lang="scss" scoped>
+@import "src/styles/index";
+</style>

src/views/home/album_compoents/albumCarousel7d.vue

@@ -0,0 +1,91 @@
+<template>
+  <template v-for="(images,index) in imagesList" :key="index">
+    <album-carousel-item  :images="images"></album-carousel-item>
+    <div style="height: 5px"></div>
+  </template>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import AlbumDrawBoxItem from "./albumCarouselItem";
+import "./cacheImg.js"
+import AlbumCarouselItem from "./albumCarouselItem";
+import {dateFormat} from "@/utils/date_util.js"
+
+const props =defineProps({
+  sampleId:{
+    type: [Number, String],
+    required: false
+  },
+  farmId:{
+    type: [Number, String],
+    required: true
+  },
+  farmWork:{
+    type: Object,
+    required: false
+  }
+})
+const imagesList = ref([]);
+
+onMounted(() => {
+  let params = {sampleId: props.sampleId,farmId: props.farmId}
+  if(props.farmWork?.executeDate){
+    let execcuteDate = new Date(props.farmWork.executeDate)
+    let beforeExecuteDate = new Date(props.farmWork.beforeExecuteDate)
+    const pastDate = new Date(beforeExecuteDate);
+    const futureDate = new Date(execcuteDate);
+    params.startDate = dateFormat(pastDate, "YY-mm-dd");
+    params.endDate = dateFormat(futureDate, "YY-mm-dd");
+  }
+  VE_API.image.list(params).then(res => {
+    if(res.code === 0){
+      let result = splitByWeek(res.data, params.startDate, params.endDate);
+      if(result && result.length > 0){
+        result = result.reverse()
+      }
+      for(let i=0;result != null && i<result.length;i++){
+        if (result[i] && result[i].length > 0){
+          imagesList.value.push(result[i])
+        }
+      }
+    }
+  })
+});
+
+function splitByWeek(items, startDate, endDate) {
+  // 将开始时间和结束时间转换为时间戳
+  const start = new Date(startDate).getTime();
+  const end = new Date(endDate).getTime();
+
+  // 创建一个用于存储按周分组的结果
+  const weeklyGroups = [];
+
+  // 遍历每一项
+  items.forEach(item => {
+    const uploadDate = new Date(item.uploadDate).getTime();
+
+    // 确保上传日期在开始日期和结束日期之间
+    if (uploadDate >= start && uploadDate <= end) {
+      // 计算上传日期属于第几周
+      const weekIndex = Math.floor((uploadDate - start) / (7 * 24 * 60 * 60 * 1000));
+
+      // 如果该周的数组不存在，则创建一个
+      if (!weeklyGroups[weekIndex]) {
+        weeklyGroups[weekIndex] = [];
+      }
+
+      // 将当前项添加到对应的周数组中
+      weeklyGroups[weekIndex].push(item);
+    }
+  });
+
+  return weeklyGroups;
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+@import "src/styles/index";
+</style>

src/views/home/album_compoents/albumCarouselItem.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="carousel-container">
+    <!-- 图片列表 -->
+    <div class="carousel-wrapper"  :style="carouselStyle">
+      <photo-provider v-if="images" :photo-closable="true" @visibleChange="handleVisibleChange">
+        <template  v-for="(photo, index) in images"
+                   :key="photo.id">
+          <album-draw-box  :photo="photo" :current="currentIndex" :index="index" :length="images.length"
+          ></album-draw-box>
+        </template>
+      </photo-provider>
+    </div>
+
+
+    <!-- 左右箭头 -->
+    <div @click.stop="prev" v-if="currentIndex !== 0" class="arrow left-arrow">
+      <el-icon color="#F0D09C"><ArrowLeftBold /></el-icon>
+    </div>
+    <div
+      @click.stop="next"
+      v-if="images && currentIndex !== images.length - 1"
+      class="arrow right-arrow"
+    >
+      <el-icon color="#F0D09C"><ArrowRightBold /></el-icon>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs, ref, computed, onMounted, onUnmounted } from "vue";
+import AlbumDrawBox from "./albumDrawBox";
+import "./cacheImg.js"
+const props =defineProps({
+  images:{
+    type: Array,
+    required: true
+  }
+})
+const {images} = toRefs(props);
+let timer = null;
+const currentIndex = ref(0);
+
+onMounted(() => {
+  updateImagePosition();
+  clearAndRestartTimer();
+});
+onUnmounted(() => {
+  clearInterval(timer);
+});
+
+const updateImagePosition = () => {
+  carouselStyle.value.transform = `translateX(-${currentIndex.value * 100}%)`;
+};
+
+const clickPhotoShow = () => {
+  if (timer) {
+    clearInterval(timer)
+  };
+}
+
+// 图片显隐切换回调
+const handleVisibleChange = ({visible}) => {
+  if (visible.value) {
+    if (timer) {
+      clearInterval(timer)
+    }
+  } else {
+    clearAndRestartTimer();
+  }
+}
+
+// 计算轮播图样式
+const carouselStyle = computed(() => {
+  return {
+    transform: `translateX(-${currentIndex.value * 100}%)`,
+  };
+});
+
+// 下一张图片
+const next = () => {
+  // 图片总数
+  const totalImages = images.value.length;
+  currentIndex.value = (currentIndex.value + 1) % totalImages;
+  updateImagePosition();
+  clearAndRestartTimer();
+};
+
+// 上一张图片
+const prev = () => {
+  // 图片总数
+  const totalImages = images.value.length;
+  currentIndex.value = (currentIndex.value - 1 + totalImages) % totalImages;
+  updateImagePosition();
+  clearAndRestartTimer();
+};
+
+const clearAndRestartTimer = () => {
+  if (timer) {
+    clearInterval(timer);
+  }
+  // timer = setInterval(next, 5000);
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+@import "src/styles/index";
+.carousel-container {
+  position: relative;
+  width: 800px;
+  height: 600px;
+  overflow: hidden;
+  margin: 0 auto;
+  .carousel-wrapper {
+    display: flex;
+    transition: transform 0.5s ease;
+    width: 100%;
+  }
+  .blur-bg {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(1.4px);
+    .blur-content {
+      border-radius: 8px;
+      background: rgba(0, 0, 0, 0.5);
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      color: #fff;
+      .blur-img {
+        img {
+          width: 54px;
+          position: relative;
+          left: 4px;
+          top: 4px;
+        }
+      }
+      .blur-text {
+        padding: 8px 0;
+        text-align: center;
+        line-height: 1.5;
+      }
+      .blur-btn {
+        padding: 0 40px;
+        box-shadow: 0 -2px 2px #86C9FF;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 50px;
+        background: rgba(33, 153, 248, 0.7);
+        // background: linear-gradient(#86C9FF, rgba(255, 255, 255, 0));
+      }
+    }
+  }
+
+  .arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.5);
+    width: rpx(72);
+    height: rpx(72);
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    pointer-events: all;
+  }
+
+  .left-arrow {
+    left: rpx(32);
+  }
+
+  .right-arrow {
+    right: rpx(32);
+  }
+}
+</style>

src/views/home/album_compoents/albumDrawBox.vue

@@ -0,0 +1,277 @@
+<template>
+  <photo-consumer
+      class="carousel-item"
+      :src="watermark || base_img_url2 + photo.filename + resize"
+  >
+    <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event,photo.markText)" loading="lazy" :src="watermark || (base_img_url2 + (photo.resFilename ? photo.resFilename : photo.filename) + resize)" style="width: 100%;" />
+    <canvas  ref="canvasRef" style="position: absolute;"></canvas>
+    <div class="tag-text" v-if="showTagBox" >
+      <span v-html="photo.growText"></span>
+      <button class="close-button" @click="hideTagBox">✖</button>
+    </div>
+    <div class="tag-box right" :class="{'leftTop': 'leftTop'}">{{ index+1 }}/{{ length }}</div>
+<!--    <div class="center-mark">mark</div>-->
+  </photo-consumer>
+
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, defineProps } from "vue";
+import { base_img_url2 } from "@/api/config";
+import {imageCache} from "./cacheImg.js"
+import {dateFormat} from "@/utils/date_util.js"
+const resize = "?x-oss-process=image/resize,p_80/format,webp/quality,q_40";
+const canvasRef = ref(null);
+const watermark = ref(null)
+
+const props = defineProps({
+  photo:{
+    type: Object,
+    required: true
+  },
+  index:{
+    type: Number,
+    required: true
+  },
+  length:{
+    type: Number,
+    required: true
+  },
+  current:{
+    type: Number,
+    required: true
+  }
+})
+
+function drawWatermark(event, markText) {
+  // console.log("markText:"+markText)
+  if(!watermark.value && markText){
+    let obj = JSON.parse(markText)
+    const img = event.target;
+    const canvas = canvasRef.value;
+    let scale = 3
+    canvas.width = img.width * scale;
+    canvas.height = img.height * scale;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(scale, scale)
+    ctx.drawImage(img, 0, 0, img.width, img.height);
+    drawBottom(ctx, img.width, img.height)
+    watermark.value = canvas.toDataURL();
+  }
+}
+
+let data = {year:props.photo.uploadDate.substring(0,4),
+  monthDay:dateFormat(new Date(props.photo.uploadDate),'mm/dd'),
+  address:props.photo.district.replaceAll("\"","") + props.photo.gardenName,
+  tempImg:imageCache.get("temp"),temp:"20°C",
+  feiniao:imageCache.get("feiniao"),
+  fusheImg:imageCache.get("fushe"),fushe:"光照优",
+  shiduImg:imageCache.get("shidu"),shidu:"湿度适宜",
+  shotCode:props.photo.shotCode
+}
+// console.log(data)
+const drawBottom = (ctx, imgWidth, imgHeight) => {
+  // 设置遮罩的高度为imgHeight的1/6
+  const maskHeight = imgHeight / 4;
+
+  // 绘制黑色半透明遮罩
+  ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; // 黑色，50%透明度
+  ctx.fillRect(0, imgHeight - maskHeight, imgWidth, maskHeight);
+
+  // 设置文本样式
+  ctx.fillStyle = "white"; // 文本颜色为白色
+  ctx.font = "8px Arial";
+  ctx.textAlign = "left"; // 设置为左对齐
+
+  // 从遮罩的底部开始绘制文本
+  let currentY = imgHeight - maskHeight + 10; // 字段的起始Y坐标
+  let currentX = 10; // 字段的起始X坐标
+
+  // 绘制年份
+  const field1 = `${data.year}`;
+  ctx.fillText(field1, currentX, currentY+10);
+  currentY += 5;
+  // 计算下划线的起始和结束坐标
+  const underlineY = currentY + 10; // 下划线Y坐标稍微低于文本
+  const underlineWidth = ctx.measureText(field1).width; // 下划线的宽度与文本一致
+  ctx.strokeStyle = "white"; // 下划线颜色为白色
+  ctx.lineWidth = 1; // 下划线的宽度
+  ctx.beginPath();
+  ctx.moveTo(currentX, underlineY); // 下划线起始点
+  ctx.lineTo(currentX + underlineWidth, underlineY); // 下划线结束点
+  ctx.stroke(); // 绘制下划线
+
+  // 绘制日期
+  currentY += 20;
+  currentX += -3
+  ctx.fillStyle = "white"; // 文本颜色为白色
+  ctx.font = "20px Arial";
+  ctx.textAlign = "left"; // 设置为左对齐
+  const field2 = `${data.monthDay}`;
+  ctx.fillText(field2, currentX, currentY + 10);
+
+  // 绘制一个圆点
+  currentX += 60
+  ctx.beginPath();
+  ctx.arc(currentX, imgHeight - maskHeight + (maskHeight / 2 + 1), 2, 0, Math.PI * 2); // 绘制圆形
+  ctx.fill(); // 填充圆形
+
+  // 绘制地址
+  currentY += -10;
+  currentX += 10
+  ctx.font = "8px Arial";
+  const field3 = `${data.address}`;
+  ctx.fillText(field3, currentX, currentY );
+
+  // 绘制温度
+  currentY += 8;
+  currentX += -6
+  ctx.drawImage(data.tempImg, currentX + 2, currentY + 1, 13, 13);
+  const field4 = `${data.temp}`;
+  currentX += 15
+  currentY += 12
+  ctx.fillText(field4, currentX, currentY);
+
+  // 绘制湿度
+  currentX += 20
+  currentY += -12
+  ctx.drawImage(data.shiduImg, currentX +2, currentY + 1, 13, 13);
+  currentX += 16
+  currentY += 12
+  ctx.font = "8px Arial";
+  const field5 = `${data.shidu}`;
+  ctx.fillText(field5, currentX, currentY);
+
+  // 绘制辐射
+  currentX += 32
+  currentY += -12
+  ctx.drawImage(data.fusheImg, currentX + 2, currentY + 1, 13, 13);
+  currentX += 16
+  currentY += 12
+  ctx.font = "8px Arial";
+  const field6 = `${data.fushe}`;
+  ctx.fillText(field6, currentX, currentY);
+
+  // 绘制文本信息
+  currentX =imgWidth - 40;
+  currentY =imgHeight - 40;
+  ctx.drawImage(data.feiniao, currentX, currentY, 25, 25);
+  ctx.fillText(data.shotCode, currentX - 10, currentY + 35);
+}
+
+//绘制文字
+const drawText = (ctx, textObject) => {
+  const { x, y, text, color } = textObject;
+  ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+  ctx.font = 'normal 12px sans-serif';
+  const textHeight = parseInt(ctx.font, 10); // 获取字体大小计算文本的实际高度
+  ctx.fillText(text, x, y + textHeight); // 将y调整为y + textHeight  // 在指定位置（左上角）绘制文本
+};
+
+const showTagBox = ref(true); // 控制 tag-box 的显示状态
+const hideTagBox = (event) => {
+  event.stopPropagation();
+  showTagBox.value = false; // 隐藏 tag-box
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+.canvas-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+.carousel-item {
+  min-width: 100%;
+  flex-shrink: 0;
+  width: 100%;
+  pointer-events: auto;
+  position: relative;
+  .tag-box {
+    position: absolute;
+    bottom: 30%;
+    left: 50%;
+    transform: translate(-50%, 50%); // 确保在高二分之一的位置水平居中
+    height: 18px;
+    padding: 0 6px;
+    background: rgba(108, 108, 108, 0.67);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    color: #FFFFFF;
+    font-size: 12px;
+
+    &.right {
+      left: auto;
+      right: 10px;
+    }
+    &.leftTop {
+      height: 25px;
+      line-height: 26px;
+      padding: 0 8px;
+      border-radius: 16px;
+      background: rgba(0, 0, 0, 0.6);
+      bottom: auto;
+      top: 6px;
+    }
+  }
+  .tag-text {
+    position: absolute;
+    bottom: 31%;
+    left: 50%;
+    width: 80%;
+    transform: translate(-50%, 50%); // 确保在高二分之一的位置水平居中
+    height: 24px;
+    padding: 10px 0px 10px 0px;
+    background: rgba(0, 0, 0, 0.67);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 12px;
+  }
+
+  .center-mark {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #36402c;
+    font-size: rpx(24);
+    font-weight: bold;
+    padding: rpx(14) rpx(30);
+    background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.6) 24%,
+            rgba(255, 255, 255, 0.6) 76%,
+            rgba(255, 255, 255, 0) 100%
+    );
+  }
+}
+.carousel-item img {
+  width: 100%;
+  display: block;
+}
+canvas {
+  position: absolute;
+}
+.close-button {
+  background: transparent;
+  border: none;
+  color: #FFFFFF;
+  cursor: pointer;
+  font-size: 10px; // 可以根据需求调整大小
+  position: absolute;
+  top: -1px;
+  right: -9px; // 调整为合适的间距
+  transform: translateY(-50%);
+}
+
+
+</style>

src/views/home/album_compoents/cacheImg.js

@@ -0,0 +1,64 @@
+// 创建一个全局的图片缓存
+const imageCache = new Map();
+
+function loadImage(url, key) {
+    return new Promise((resolve, reject) => {
+        // 检查缓存中是否存在该key的图片
+        if (imageCache.has(key)) {
+            resolve(imageCache.get(key));
+            return;
+        }
+
+        // 如果缓存中没有，则创建一个新的图片对象
+        const img = new Image();
+        img.src = url;
+
+        img.onload = () => {
+            // 图片加载完成后，将其存入缓存
+            imageCache.set(key, img);
+            resolve(img);
+        };
+
+        img.onerror = (error) => {
+            reject(error);
+        };
+    });
+}
+
+// 使用示例
+loadImage(require('@/assets/watermark/feiniao.png'), 'feiniao')
+    .then((img) => {
+        // 在这里使用加载完成的图片
+        // console.log('图片加载成功', img);
+    })
+    .catch((error) => {
+        console.error('图片加载失败', error);
+    });
+loadImage(require('@/assets/watermark/fushe.png'), 'fushe')
+    .then((img) => {
+        // 在这里使用加载完成的图片
+        // console.log('图片加载成功', img);
+    })
+    .catch((error) => {
+        console.error('图片加载失败', error);
+    });
+loadImage(require('@/assets/watermark/shidu.png'), 'shidu')
+    .then((img) => {
+        // 在这里使用加载完成的图片
+        // console.log('图片加载成功', img);
+    })
+    .catch((error) => {
+        console.error('图片加载失败', error);
+    });
+loadImage(require('@/assets/watermark/temp.png'), 'temp')
+    .then((img) => {
+        // 在这里使用加载完成的图片
+        // console.log('图片加载成功', img);
+    })
+    .catch((error) => {
+        console.error('图片加载失败', error);
+    });
+
+export { imageCache };
+
+

src/views/home/album_compoents/detailDailog.vue

@@ -0,0 +1,268 @@
+<template>
+    <el-dialog v-model="winDialogVisible" lock-scroll modal-class="album-detail-modal" :showClose="false" width="90%" align-center>
+        <div>
+            <div class="congratulation-wrap">
+                <div class="congratulation-box">
+                    <div class="win-des">
+                        <!-- <img src="@/assets/img/weather_index/box-top.png" class="win-icon" /> -->
+                    </div>
+                    <div class="album-detail-box">
+                        <div class="detail-title">{{ dialogData.farmWorkName }}</div>
+                        <div class="detail-desc-box">
+                            <div class="desc-item">
+                                <span class="item-name">触发条件</span>
+                                {{ dialogData.condition }}
+                            </div>
+                            <div class="desc-item">
+                                <span class="item-name">农事编号</span>
+                                {{ dialogData.code }}
+                            </div>
+                            <div class="desc-item">
+                                <div v-if="dialogData.status === 2">
+                                    <span class="item-name">推荐时间</span>
+                                    {{ dialogData.solarName }}
+                                </div>
+                                <div v-if="dialogData.status === 1">
+                                    <span class="item-name">推荐时间</span>
+                                    {{ dialogData.executeDate }}
+                                </div>
+                                
+                                <div v-if="dialogData.status === 0">
+                                    <span class="item-name">{{ dialogData.reCheck ? "复核时间" : "执行时间" }}</span>
+                                    {{ dialogData.executeDate }}
+                                </div>
+                                <!-- <span class="item-name">{{ dialogData.status === 0 ? (dialogData.reCheck ? "复核农事" : "完成农事") : "推荐时间" }}</span>
+                                {{ dialogData.code }} -->
+                            </div>
+                            <div class="desc-item">
+                                <span class="item-name">农事宗旨</span>
+                                {{ dialogData.purpose }}
+                            </div>
+                            <div class="desc-item">
+                                <div class="item-name">药物处方</div>
+                                <div class="item-table">
+                                    <el-table :data="dialogData.pesticideFertilizerList" style="width: 100%" :header-cell-style="{background: '#F5F5F5'}">
+                                        <el-table-column prop="pesticideFertilizerCode" label="功效" width="62">
+                                            <template #default="scope">
+                                                {{scope.row.typeName}}
+                                            </template>
+                                        </el-table-column>
+                                        <el-table-column prop="name" label="名称" />
+                                        <!-- <el-table-column prop="ratio" label="配比" width="50">
+                                            <template #default="scope">
+                                                {{scope.row.ratio ? scope.row.ratio : "--"}}
+                                            </template>
+                                        </el-table-column> -->
+                                        <el-table-column prop="ratio" label="方式" width="62">
+                                            <template #default="scope">
+                                                {{scope.row.ratio ? "人工" : "人工"}}
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                </div>
+                            </div>
+
+                            <div class="card-link">
+                                <img src="@/assets/img/weather_index/expert-icon.png" />
+                                <div class="expert-name">
+                                    {{ dialogData.expertName }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="close-btn">
+                    <!-- <el-icon size="32" color="#fff"><CircleCloseFilled /></el-icon> -->
+                    <el-button type="primary" class="one-btn" @click="toShare"> 立即分享 </el-button>
+            </div>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <div class="close-btn">
+                    <!-- <el-icon size="32" color="#fff"><CircleCloseFilled /></el-icon> -->
+                    <!-- <el-button type="primary" class="one-btn" @click="toShare"> 立即分享 </el-button> -->
+                </div>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script setup>
+import { ref } from "vue";
+import eventBus from "@/api/eventBus";
+import wx from "weixin-js-sdk";
+import { useRoute, useRouter } from "vue-router";
+
+const winDialogVisible = ref(false);
+
+const route = useRoute();
+const sampleId = route.query.sampleId
+const farmId = route.query.farmId;
+
+const dialogData = ref({});
+const currentCard = ref({});
+const showDialog = (pageParams) => {
+    dialogData.value = pageParams.card;
+    currentCard.value = {
+        activeIndex: pageParams.activeIndex,
+        farmWorkName: dialogData.value.farmWorkName,
+        farmId: farmId,
+        sampleId: sampleId,
+    };
+    winDialogVisible.value = true;
+};
+eventBus.on("detailDialog:showDialog", (data) => {
+    showDialog(data)
+});
+
+const toShare = () => {
+    wx.miniProgram.navigateTo({
+        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(currentCard.value)}&type=album`,
+    });
+}
+</script>
+
+<style lang="less" scoped>
+.congratulation-wrap {
+    border-radius: 12px;
+    background: #f4f5f4;
+}
+.close-btn {
+    text-align: center;
+    margin-top: 20px;
+}
+.congratulation-box {
+    border-radius: 12px;
+    background: url("@/assets/img/weather_index/box-top.png") no-repeat top center /contain;
+    .el-message-box__message {
+        padding: 12px 0 24px 0;
+    }
+    .win-title {
+        color: #1d1e1f;
+        font-family: "PangMenZhengDao", sans-serif; /* 使用自定义字体 */
+        text-align: center;
+        font-size: 24px;
+        line-height: 32px;
+    }
+    .win-detail {
+        text-align: center;
+        color: #252525;
+        padding-top: 6px;
+        font-size: 16px;
+        span {
+            font-size: 22px;
+            color: #2199f8;
+            padding: 0 6px;
+            font-weight: bold;
+        }
+    }
+    .win-des {
+        height: 205px;
+        text-align: center;
+    }
+    .win-icon {
+        width: 100%;
+        border-radius: 12px 12px 0 0;
+    }
+}
+.album-detail-box {
+    padding: 0 24px 16px 12px;
+    color: #000;
+    position: relative;
+    // top: -58px;
+    .detail-title {
+        font-size: 24px;
+        font-weight: bold;
+        padding-bottom: 8px;
+        letter-spacing: 1.6px;
+    }
+    .detail-desc-box {
+        position: relative;
+        .desc-item {
+            font-size: 14px;
+            .item-name {
+                color: #999999;
+                margin-right: 12px;
+            }
+            .item-table {
+                margin-top: 8px;
+                border: 1px solid rgba(255, 255, 255, 0.6);
+                border-radius: 4px;
+                ::v-deep {
+                    .el-table th.el-table__cell {
+                        padding: 6px 0;
+                    }
+                    .el-table--default .el-table__cell {
+                        padding: 6px 0;
+                    }
+                    .el-table--default .cell {
+                        padding: 0px 6px;
+                    }
+                }
+            }
+        }
+        .desc-item + .desc-item {
+            padding-top: 8px;
+        }
+        .card-link {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: #2199f8;
+            font-size: 12px;
+            position: absolute;
+            right: 6px;
+            top: 0px;
+            .expert-name {
+                background: #d3e8ff;
+                border-radius: 4px;
+                padding: 1px 12px;
+                margin-top: 4px;
+                display: flex;
+                align-items: center;
+            }
+            img {
+                width: 62px;
+            }
+            .icon {
+                padding-right: 2px;
+            }
+        }
+    }
+}
+.dialog-footer {
+    position: relative;
+    .close-btn {
+        position: absolute;
+        bottom: -58px;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        text-align: center;
+    }
+}
+</style>
+
+<style lang="less">
+.album-detail-modal {
+    .el-overlay-dialog {
+        .el-dialog {
+            padding: 0;
+            border-radius: 12px;
+            background: none;
+            box-shadow: none;
+            .el-dialog__header {
+                padding: 0;
+            }
+        }
+
+        .one-btn {
+            width: 210px;
+            height: 40px;
+            line-height: 40px;
+        }
+    }
+}
+</style>

src/views/home/index.vue

@@ -87,6 +87,7 @@
     :imageUrl="urls"
     :curIndex="urlsIndex"
   ></PicturePreview>
+  <album-carousel></album-carousel>
 </template>
 
 <script setup>
@@ -108,6 +109,8 @@ import SamplePointLayer from "./map/samplePointLayer";
 import {useStore} from "vuex";
 import RegionLayer from "./map/regionLayer";
 import eventBus from "@/api/eventBus";
+import AlbumCarousel from "./album_compoents/albumCarousel.vue";
+
 let store = useStore()
 const components = {
   homePage,

src/views/warningHome/components/alarmList.vue

@@ -10,7 +10,7 @@
                         class="alarm-item"
                         v-for="(item, index) in alarmList"
                         :key="index"
-                        @click="toggleAlarm(item, index)"
+                        @click="toggleAlarm(item, 1)"
                         :class="{ active: activeAlarm === item.id }"
                     >
                         {{ item.name }}
@@ -31,7 +31,7 @@
                         class="alarm-item"
                         v-for="(item, index) in alarmFactorList"
                         :key="index"
-                        @click="toggleAlarm(item, index)"
+                        @click="toggleAlarm(item, 2)"
                         :class="{ active: activeAlarm === item.id }"
                     >
                         {{ item.name }}
@@ -56,9 +56,9 @@ const alarmList = ref([
     { name: "病虫风险", id: 4 },
 ]);
 const alarmFactorList = ref([
-    { name: "温度因子", id: 21 },
-    { name: "土壤水分", id: 22 },
-    { name: "阴坡阳坡", id: 23 },
+    { name: "日间温度", id: 21 },
+    { name: "夜间温度", id: 22 },
+    { name: "土壤水分", id: 23 },
 ]);
 
 const mapLayerList = ref({})
@@ -69,13 +69,15 @@ onMounted(() => {
     }).then(({data}) => {
         mapLayerList.value = data
         eventBus.emit("alarmList:warningLayers", data)
+        toggleAlarm(alarmList.value[0], 1)
     })
 });
 
 const activeAlarm = ref(1);
-const toggleAlarm = (item, index) => {
+const toggleAlarm = (item, type) => {
     activeAlarm.value = item.id;
-    eventBus.emit("alarmList:changeMapLayer", mapLayerList.value[item.name])
+    // eventBus.emit("alarmList:changeMapLayer", {name: item.name, url: mapLayerList.value[item.name]})
+    eventBus.emit("alarmList:changeMapLayer", {url: mapLayerList.value[item.name], type})
 };
 </script>
 

src/views/warningHome/components/album.vue

@@ -3,7 +3,7 @@
         <div class="album-wrap" ref="scrollContainer">
             <div class="barrage-title">
                 <img src="@/assets/images/common/chart-icon.png" />
-                荔博园
+                智慧农场
             </div>
             <div class="album-content">
                 <div class="album-top" v-if="farmDetail?.name">
@@ -76,14 +76,13 @@
                                 <div class="log-box">
                                     <div class="log-title PangMenZhengDao-FONT">果园日志</div>
                                     <div class="log-content">
-                                        <div class="log-desc">
-                                            这里是果园日志的内容，这里是果园日志的内容，这里是果园日志的内容，果园日志
+                                        <div class="log-desc" v-html="indicatorChartData?.content">
                                         </div>
                                         <indicatorChart
                                             :key="cardI + 'log'"
                                             :indexName="card.indexName"
                                             type="feature"
-                                            :chartData="card.indexChart"
+                                            :chartData="indicatorChartData"
                                         ></indicatorChart>
                                     </div>
                                 </div>
@@ -228,7 +227,7 @@ const handleScroll = () => {
 
 const handleRightScroll = () => {
     activeSection.value = null;
-}
+};
 
 // 防抖函数
 function debounce(func, wait) {
@@ -254,22 +253,52 @@ const debouncedHandleScroll2 = debounce(handleRightScroll, 500);
 //     getFarmWorkList(farmId);
 // });
 
-
 const sampleId = ref(route.query.sampleId);
 const farmId = ref(route.query.farmId);
+const indicatorChartData = ref({
+    content: "\n从化的荔博园\n    该果园荔枝处于花芽萌动期，估算当前约为1.0，综合生长异常风险为0.0%，病虫风险为0.33%。\n    （目前没有无人机飞巡监测，结果根据气象与地形条件与周边飞巡点推断获得。）\n\n",
+    dates: [
+        "2024-12-31",
+        "2025-01-01",
+        "2025-01-02",
+        "2025-01-03",
+        "2025-01-04",
+        "2025-01-05",
+        "2025-01-06",
+        "2025-01-07",
+        "2025-01-08",
+        "2025-01-09",
+        "2025-01-10",
+        "2025-01-11",
+        "2025-01-12",
+        "2025-01-13",
+    ],
+    disease_risk: [15, 7, 12, 3, 18, 9, 14, 6, 11, 4, 0.33, 0.33, 0.33, 19],
+    disease_risk_name: "病虫异常",
+    growth_risk: [8, 16, 2, 10, 5, 17, 13, 1, 20, 7, 12, 3, 18, 9],
+    growth_risk_name: "生长异常",
+    pheno_param1: [1.0, 1.0, 1.0, 1.0, 1.0, 14, 6, 11, 4, 19, 15, 7, 12, 3],
+    pheno_param1_name: "褪绿率",
+    pheno_param2: [18, 9, 14, 6, 11, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0],
+    pheno_param2_name: "花芽率",
+    pheno_param3: [5, 17, 13, 1, 20, 7, 12, 3, 18, 9, 14, 6, 11, 4],
+    pheno_param3_name: "花蕾率",
+});
 onMounted(() => {
     sampleId.value = 766;
     farmId.value = 88388;
 
-    eventBus.on("MockFarmLayer:click", ({sampleIdVal, farmIdVal}) => {
-        sampleId.value = sampleIdVal
-        farmId.value = farmIdVal
+    eventBus.on("MockFarmLayer:click", ({ sampleIdVal, farmIdVal }) => {
+        sampleId.value = sampleIdVal;
+        farmId.value = farmIdVal;
         getFarmDetail(farmId.value);
         getFarmWorkList(farmId.value);
-    })
+        getFarmLog()
+    });
     getFarmDetail(farmId.value);
     getFarmWorkList(farmId.value);
     window.addEventListener("scroll", debouncedHandleScroll);
+    getFarmLog()
 });
 // onActivated(() => {
 //     sampleId.value = route.query.sampleId;
@@ -289,6 +318,12 @@ onUnmounted(() => {
     window.removeEventListener("scroll", debouncedHandleScroll);
 });
 
+const getFarmLog = () => {    
+    VE_API.warning.fetchFarmLog({id: farmId.value, farmId: sampleId.value}).then(({data}) => {
+        console.log('fetchFarmLog', data);
+    })
+}
+
 // 农场详情
 const farmDetail = ref({});
 const getFarmDetail = async (id) => {
@@ -464,15 +499,15 @@ const showDetail = (card) => {
                             height: 21px;
                             line-height: 21px;
                             border-radius: 2px;
-                            border: 0.5px solid #FFD489;
+                            border: 0.5px solid #ffd489;
                             font-size: 12px;
-                            color: #FFD489;
+                            color: #ffd489;
                         }
                     }
                     .garden-desc {
                         padding-top: 4px;
                         font-size: 13px;
-                        color: #9F9F9F;
+                        color: #9f9f9f;
                     }
                 }
             }
@@ -552,7 +587,7 @@ const showDetail = (card) => {
                                 height: 32px;
                                 line-height: 32px;
                                 justify-content: center;
-                                color: #CECECE;
+                                color: #cecece;
                                 margin: 10px 0;
                                 padding: 4px;
                                 &:hover {
@@ -560,16 +595,16 @@ const showDetail = (card) => {
                                 }
                                 &.is-active {
                                     background: transparent;
-                                    color: #CECECE;
+                                    color: #cecece;
                                     .menu-name {
                                         // color: #666666;
                                     }
                                 }
                                 &.active {
                                     background: #232323;
-                                    color: #F0AC37;
+                                    color: #f0ac37;
                                     .menu-name {
-                                        color: #F0AC37;
+                                        color: #f0ac37;
                                     }
                                 }
                             }
@@ -604,7 +639,7 @@ const showDetail = (card) => {
                     overflow: auto;
                     box-sizing: border-box;
                     .common-btn {
-                        background: #F7BE5A;
+                        background: #f7be5a;
                         border-radius: 4px;
                         color: #fff;
                         padding: 8px 10px;
@@ -631,7 +666,7 @@ const showDetail = (card) => {
                         background: rgba(105, 73, 13, 0.1);
                         border-radius: 8px;
                         padding: 0 8px 8px;
-                        border: 1px solid #FFDA66;
+                        border: 1px solid #ffda66;
                         &.push {
                             padding: 0 8px 12px 8px;
                             // margin-bottom: 8px;
@@ -661,7 +696,7 @@ const showDetail = (card) => {
                                 padding-bottom: 8px;
                                 .serve-btn {
                                     padding: 3px 10px;
-                                    background: #F7BE5A;
+                                    background: #f7be5a;
                                     border-radius: 22px;
                                     color: #fff;
                                     text-align: center;
@@ -683,7 +718,7 @@ const showDetail = (card) => {
                                     border-radius: 2px;
                                     border: 0.2px solid transparent;
                                     &.blue {
-                                        color: #F7BE5A;
+                                        color: #f7be5a;
                                         background: rgba(33, 153, 248, 0.2);
                                     }
                                     &.good-wrap {
@@ -696,8 +731,8 @@ const showDetail = (card) => {
                                         }
                                     }
                                     &.standard {
-                                        color: #F7BE5A;
-                                        border-color: #FFD489
+                                        color: #f7be5a;
+                                        border-color: #ffd489;
                                     }
                                     &.advice {
                                         color: rgba(252, 167, 3, 0.9);
@@ -717,14 +752,14 @@ const showDetail = (card) => {
                                         position: absolute;
                                         right: -8px;
                                         top: 0;
-                                        background: #F7BE5A;
+                                        background: #f7be5a;
                                         color: #fff;
                                         font-size: 12px;
                                         border-radius: 0 8px 0 8px;
                                         padding: 1px 6px;
                                         &.unactive {
                                             background: #494949;
-                                            color: #9F9F9F;
+                                            color: #9f9f9f;
                                         }
                                     }
                                     .tag {
@@ -753,7 +788,7 @@ const showDetail = (card) => {
                                 }
                             }
                             .card-desc {
-                                color: #9F9F9F;
+                                color: #9f9f9f;
                                 font-size: 12px;
                                 line-height: 18.2px;
                                 .desc-title {
@@ -763,7 +798,7 @@ const showDetail = (card) => {
                                     display: flex;
                                     align-items: center;
                                     .detail-text {
-                                        color: #F7BE5A;
+                                        color: #f7be5a;
                                         padding-left: 6px;
                                     }
                                 }
@@ -779,13 +814,13 @@ const showDetail = (card) => {
                                 flex-direction: column;
                                 align-items: center;
                                 justify-content: center;
-                                color: #A46700;
+                                color: #a46700;
                                 font-size: 12px;
                                 position: absolute;
                                 right: 6px;
                                 top: 20px;
                                 .expert-name {
-                                    background: #FFD489;
+                                    background: #ffd489;
                                     border-radius: 4px;
                                     padding: 2px 6px 3px 10px;
                                     margin-top: 4px;
@@ -829,7 +864,7 @@ const showDetail = (card) => {
                         .log-box {
                             // background: #fff8e0;
                             border-radius: 8px;
-                            border: 0.5px solid #FFD489;
+                            border: 0.5px solid #ffd489;
                             .log-title {
                                 position: relative;
                                 top: -4px;
@@ -843,7 +878,7 @@ const showDetail = (card) => {
                             }
                             .log-content {
                                 padding-bottom: 10px;
-                                color: #FFD489;
+                                color: #ffd489;
                                 .log-desc {
                                     padding: 0 10px;
                                     font-size: 12px;
@@ -871,12 +906,12 @@ const showDetail = (card) => {
 
             @keyframes flash {
                 0% {
-                    box-shadow: 0 0 5px #F7BE5A;
-                    border-color: #F7BE5A;
+                    box-shadow: 0 0 5px #f7be5a;
+                    border-color: #f7be5a;
                 }
                 100% {
-                    box-shadow: 0 0 20px #F7BE5A;
-                    border: 2px solid #F7BE5A;
+                    box-shadow: 0 0 20px #f7be5a;
+                    border: 2px solid #f7be5a;
                 }
             }
         }

src/views/warningHome/components/chartSeting.js

@@ -139,6 +139,18 @@ export const galleryIndicatorLine = {
                 color: "#999999",
                 fontSize: 12
             },
+            formatter: function (value) {
+                // 获取后 5 位字符（假设日期格式始终为 'YYYY-MM-DD'）
+                let shortenedValue = value.slice(-5);
+                
+                // 自定义处理省略号（由于 ECharts 不直接支持，需手动处理）
+                // 此处简单判断，若原长度超过 10（即 'YYYY-MM-DD' 格式），则添加省略号
+                if (value.length > 10) {
+                    shortenedValue = '...' + shortenedValue;
+                }
+                
+                return shortenedValue;
+            }
         },
         axisLine: {
             lineStyle: {
@@ -171,12 +183,36 @@ export const galleryIndicatorLine = {
                 color: "#333333",
             },
         },
-        min: 0, // 最小值固定为0
-        max: 100, // 最大值固定为100
-        splitNumber: 5, // 设置5个分割段
+        // min: 0, // 最小值固定为0
+        // max: 100, // 最大值固定为100
+        // splitNumber: 5, // 设置5个分割段
     }],
     series: [
         {
+            name: "病虫异常",
+            data: [40, 28, 22, 64, 28, 24, 40],
+            type: 'line',
+            smooth: true,
+            symbol: "none",
+            itemStyle: { color: "#FF7219" },
+            lineStyle: {
+                color: "#FF7219", // 折线颜色为红色
+                width: 2, // 线条宽度
+            },
+        },
+        {
+            name: "生长异常",
+            data: [80, 88, 92, 84, 88, 74, 80],
+            type: 'line',
+            symbol: "none",
+            smooth: true,
+            itemStyle: { color: "#FFB82E" },
+            lineStyle: {
+                color: "#FFB82E", // 折线颜色为红色
+                width: 2, // 线条宽度
+            },
+        },
+        {
             name: "褪绿率",
             data: [
                 ["9/1", 10],
@@ -225,29 +261,5 @@ export const galleryIndicatorLine = {
                 width: 2, // 线条宽度
             },
         },
-        {
-            name: "生长异常",
-            data: [80, 88, 92, 84, 88, 74, 80],
-            type: 'line',
-            symbol: "none",
-            smooth: true,
-            itemStyle: { color: "#FFB82E" },
-            lineStyle: {
-                color: "#FFB82E", // 折线颜色为红色
-                width: 2, // 线条宽度
-            },
-        },
-        {
-            name: "病虫异常",
-            data: [40, 28, 22, 64, 28, 24, 40],
-            type: 'line',
-            smooth: true,
-            symbol: "none",
-            itemStyle: { color: "#FF7219" },
-            lineStyle: {
-                color: "#FF7219", // 折线颜色为红色
-                width: 2, // 线条宽度
-            },
-        },
     ],
 }

src/views/warningHome/components/indicatorChart.vue

@@ -30,65 +30,21 @@ const props = defineProps({
 let myChart = null;
 const chartRef = ref();
 
-let chartDataArr = ref([
-    { date: "9/1", value: 40 },
-    { date: "9/7", value: 60 },
-    { date: "9/13", value: 63 },
-    { date: "9/19", value: 68 },
-    { date: "9/25", value: 80, feature: true },
-    { date: "10/1", value: 85, feature: true },
-    { date: "10/7", value: 88, feature: true },
-]);
-
 onMounted(() => {
     myChart = echarts.init(chartRef.value);
     const options = deepClone(galleryIndicatorLine);
-    options.yAxis.name = props.indexName;
-
-    // if (props.type === "feature") {
-    //     processData();
-
-    //     // 数据处理
-    //     let currentData = [];
-    //     let forecastData = [];
-
-    //     props.chartData.forEach((item) => {
-    //         if (item.feature) {
-    //             forecastData.push([item.date, Number(item.value)]);
-    //         } else {
-    //             currentData.push([item.date, Number(item.value)]);
-    //         }
-    //     });
-    //     // 追加实际数据的最后一组数据
-    //     forecastData.unshift(currentData[currentData.length - 1]);
-    // } else {
-    //     // 完成农事
-    //     let seriesData = props.chartData.map((m) => {
-    //         return Number(m.value);
-    //     });
-
-    //     options.series = [
-    //         {
-    //             data: seriesData,
-    //             type: "line",
-    //             symbolSize: 6,
-    //             itemStyle: {
-    //                 color: "#2199F8", // 设置数据点颜色为红色
-    //             },
-    //         },
-    //     ];
-    // }
-
-    let labels = props.chartData.map((m) => {
-        return m.date;
-    });
-
-    if (props.isDark) {
-        options.yAxis[0].splitLine.lineStyle.color = "#333333"
-        options.yAxis[0].axisLabel.textStyle.color = "#999999"
-        options.xAxis.axisLine.lineStyle.color = "#333333"
-        options.xAxis.axisLabel.textStyle.color = "#999999"
-    }
+    // options.yAxis.name = props.indexName;
+    options.xAxis.data = props.chartData.dates
+    options.series[0].name = props.chartData.disease_risk_name
+    options.series[0].data = props.chartData.disease_risk
+    options.series[1].name = props.chartData.growth_risk_name
+    options.series[1].data = props.chartData.growth_risk
+    options.series[2].name = props.chartData.pheno_param1_name
+    options.series[2].data = props.chartData.pheno_param1
+    options.series[3].name = props.chartData.pheno_param2_name
+    options.series[3].data = props.chartData.pheno_param2
+    options.series[4].name = props.chartData.pheno_param3_name
+    options.series[4].data = props.chartData.pheno_param3
     myChart.setOption(options);
 });
 

src/views/warningHome/components/timeLine.vue

@@ -60,7 +60,7 @@ const numList = [7, 21, 37, 52, 68, 84, 99];
 function formatDateToMMDD(date) {
     const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1，并确保是两位数
     const day = String(date.getDate()).padStart(2, "0"); // 确保日期是两位数
-    return `${month}/${day}`;
+    return `${month}-${day}`;
 }
 
 function getCurrentDateAndNextSixDaysMMDD() {
@@ -86,11 +86,11 @@ const timer = ref(null);
 const incrementCount = (type) => {
     if (active.value === 6) {
         active.value = 0;
-        eventBus.emit("weatherTime:changeTime",active.value)
+        eventBus.emit("weatherTime:changeTime",{index: active.value, date: list[active.value]})
     } else {
         if(type!=='original'){
             active.value += 1;
-            eventBus.emit("weatherTime:changeTime",active.value)
+            eventBus.emit("weatherTime:changeTime",{index: active.value, date: list[active.value]})
         }
     }
 
@@ -115,7 +115,7 @@ const handleChange = () => {
     }
     isCounting.value = !isCounting.value;
     if (isCounting.value) {
-        eventBus.emit("weatherTime:changeTime", 0)
+        eventBus.emit("weatherTime:changeTime", {index: 0, date: list[0]})
     }
 };
 

src/views/warningHome/index.vue

@@ -30,26 +30,22 @@
                     </div>
                     <div class="top-r yes-events">
                         <div class="data-box" @click="toggleBox('面积')" :class="{ active: activeBoxName === '面积' }">
-                            <div class="data-value"><span>526</span>亩</div>
+                            <div class="data-value"><span>{{areaVal.includes('3186') ? 31.2 : 419.89}}</span>万亩</div>
                             <div class="data-name">种植面积</div>
                         </div>
                         <div
                             class="data-box"
                             v-if="areaVal.includes('3186')"
-                            @click="toggleBox('失管')"
-                            :class="{ active: activeBoxName === '失管' }"
+                            @click="toggleBox('从化荔枝')"
+                            :class="{ active: activeBoxName === '从化荔枝' }"
                         >
-                            <div class="data-value"><span>526</span>亩</div>
+                            <div class="data-value"><span>11.9</span>万亩</div>
                             <div class="data-name">疑似失管面积</div>
                         </div>
                         <div class="data-box" @click="toggleBox('产量')" :class="{ active: activeBoxName === '产量' }">
-                            <div class="data-value"><span>526</span>亩</div>
+                            <div class="data-value"><span>{{areaVal.includes('3186') ? 10.4 : 192.12}}</span>万吨</div>
                             <div class="data-name">预估产量</div>
                         </div>
-                        <div class="data-box" @click="toggleBox('产值')" :class="{ active: activeBoxName === '产值' }">
-                            <div class="data-value"><span>526</span>万元</div>
-                            <div class="data-name">预估总产值</div>
-                        </div>
                     </div>
                 </div>
                 <div class="warning-alarm yes-events">
@@ -288,9 +284,10 @@ const toggleBox = (name) => {
                 .data-box {
                     cursor: pointer;
                     margin-left: 20px;
-                    width: 200px;
+                    // width: 200px;
+                    width: 242px;
                     height: 104px;
-                    background: url("@/assets/images/warningHome/box-bg.png") no-repeat center center / cover;
+                    background: url("@/assets/images/warningHome/box-bg.png") no-repeat center center / 100% 100%;
                     display: flex;
                     flex-direction: column;
                     align-items: center;

src/views/warningHome/map/alarmLayer copy.js

@@ -0,0 +1,157 @@
+import eventBus from "@/api/eventBus";
+import * as KMap from "@/utils/ol-map/KMap";
+import { Vector as VectorSource } from "ol/source.js";
+import Style from "ol/style/Style";
+import { WKT } from 'ol/format'
+import { Fill, Text } from "ol/style";
+import { Feature } from "ol";
+import store from '@/store'
+
+/**
+ *
+ */
+class AlarmLayer {
+    constructor(kmap) {
+        let that = this;
+        this.kmap = kmap
+        let vectorStyle = new KMap.VectorStyle()
+        this.regionLayer = new KMap.VectorLayer("regionLayer", 3, {
+            source: new VectorSource({}),
+            style: function (f) {
+                let style2 = vectorStyle.getPolygonStyle("#032833" + "30", "#c7cb20", 2)
+                return [style2]
+            }
+        });
+        this.kmap.addLayer(this.regionLayer.layer)
+
+        this.warningLayers = {}
+        // 底图数据
+        eventBus.on("alarmList:warningLayers", (data) => {
+            this.warningLayers = data
+            this.plantLayer1 = this.kmap.addXYZLayer(
+                this.warningLayers["面积"],
+                { minZoom: 6, maxZoom: 22 },
+                99,
+                0.4
+            );
+            this.plantLayer1.layer.setOpacity(0.4)
+
+            this.plantLayer2 = this.kmap.addXYZLayer(
+                this.warningLayers["产量"],
+                { minZoom: 6, maxZoom: 22 },
+                99,
+                0.4
+            );
+            this.plantLayer2.layer.setOpacity(0.4)
+            this.plantLayer3 = ""
+            this.plantLayer4 = ""
+        })
+
+        // 预警底图
+        eventBus.on("alarmList:changeMapLayer", function (url) {
+            console.log('uu', url);
+            that.initLayer("https://birdseye-img.sysuimars.com/map/risk/lby_dwdh/{z}/{x}/{y}.png")
+        })
+        // 种植面积，预估产量，底图切换
+        eventBus.on("warningHome:toggleMapLayer", function (name) {
+            that.togglePlantLayer(name)
+        })
+        // 切换区域广东省or从化区
+        that.areaId = "3"
+        eventBus.on("warningHome:toggleArea", (id) => {
+            that.areaId = id
+            that.changeDistrict(id)
+        })
+        // 时间轴
+        eventBus.on("weatherTime:changeTime", (index) => {
+            console.log('vvv',index);
+            that.toggleSmallLayer(index)
+        })
+    }
+
+    initLayer(layerUrl) {
+        this.lizhiLayer && this.kmap.map.removeLayer(this.lizhiLayer.layer)
+        // 104.3017367175,30.329292136
+        this.lizhiLayer = this.kmap.addXYZLayer(
+            layerUrl,
+            { minZoom: 5, maxZoom: 22 },
+            99,
+            0.4
+        );
+        this.lizhiLayer.layer.setOpacity(0.7)
+        // this.kmap.map.getView().setZoom(18)
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+    }
+
+    togglePlantLayer(name) {
+        const url = this.warningLayers[name]
+        console.log('rrrr', url);
+        // const url = "https://birdseye-img.sysuimars.com/map/szts/{z}/{x}/{y}.png"
+        // console.log('uu', url);
+        // this.plantLayer && this.kmap.map.removeLayer(this.plantLayer.layer)
+        // 104.3017367175,30.329292136
+        // this.plantLayer = this.kmap.addXYZLayer(
+        //     url,
+        //     { minZoom: 6, maxZoom: 22 },
+        //     99,
+        //     0.4
+        // );
+        // this.plantLayer.layer.setOpacity(0.4)
+        if (name === "面积") {
+            this.plantLayer1.layer.setVisible(true)
+            this.plantLayer2.layer.setVisible(false)
+        } else if(name === "产量") {
+            this.plantLayer1.layer.setVisible(false)
+            this.plantLayer2.layer.setVisible(true)
+        }
+        this.kmap.map.getView().setZoom(7.3)
+        this.kmap.map.getView().setCenter([113.679, 23.607])
+        // this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+
+        
+        // this.plantLayer && this.kmap.map.removeLayer(this.plantLayer.layer)
+        // // 104.3017367175,30.329292136
+        // this.plantLayer = this.kmap.addXYZLayer(
+        //     url,
+        //     { minZoom: 5, maxZoom: 22 },
+        //     99,
+        //     0.4
+        // );
+        // this.plantLayer.layer.setOpacity(0.7)
+        // this.kmap.map.getView().setZoom(18)
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+    }
+
+    // 切换地图区域
+    changeDistrict(id) {
+        VE_API.warning.fetchAreaDistrict({ id }).then(({ data }) => {
+            if (data.geom) {
+                let f = new Feature({
+                    geometry: new WKT().readGeometry(data.geom)
+                })
+                this.regionLayer.source.addFeature(f)
+                this.kmap.map.getView().fit(f.getGeometry(), { padding: [180, 150, 100, 150] })
+            }
+            if (id === "3") {
+                this.kmap.map.getView().setZoom(7.2)
+                // const position = store.getters.userinfo.location
+                this.kmap.map.getView().setCenter([113.679, 23.607])
+            }
+        })
+    }
+
+    // 从化区-切换到小范围
+    toggleSmallLayer(index) {
+        if (this.areaId === "3") {
+            // 虚拟果园会播放物候变化
+        }
+        if (this.areaId === "3186") {
+            this.kmap.map.getView().setZoom(12+index)
+            // const position = store.getters.userinfo.location
+            this.kmap.map.getView().setCenter([113.679, 23.607])
+        }
+    }
+}
+
+export default AlarmLayer;

src/views/warningHome/map/alarmLayer.js

@@ -25,44 +25,56 @@ class AlarmLayer {
         this.kmap.addLayer(this.regionLayer.layer)
 
         this.warningLayers = {}
+        this.plantLayer = null
+        this.warningLayer = null
         // 底图数据
         eventBus.on("alarmList:warningLayers", (data) => {
             this.warningLayers = data
         })
 
         // 预警底图
-        eventBus.on("alarmList:changeMapLayer", function (layerUrl) {
-            that.initLayer(layerUrl)
+        eventBus.on("alarmList:changeMapLayer", function ({url, type}) {
+            that.plantLayer && that.kmap.map.removeLayer(that.plantLayer.layer)
+            that.initWarningLayer(url, type)
         })
         // 种植面积，预估产量，底图切换
         eventBus.on("warningHome:toggleMapLayer", function (name) {
+            that.warningLayer && that.kmap.map.removeLayer(that.warningLayer.layer)
             that.togglePlantLayer(name)
         })
         // 切换区域广东省or从化区
         that.areaId = "3"
         eventBus.on("warningHome:toggleArea", (id) => {
+            that.plantLayer && that.kmap.map.removeLayer(that.plantLayer.layer)
+            that.warningLayer && that.kmap.map.removeLayer(that.warningLayer.layer)
             that.areaId = id
             that.changeDistrict(id)
         })
         // 时间轴
-        eventBus.on("weatherTime:changeTime", (index) => {
+        eventBus.on("weatherTime:changeTime", ({index}) => {
             console.log('vvv',index);
             that.toggleSmallLayer(index)
         })
     }
 
-    initLayer(layerUrl) {
-        this.lizhiLayer && this.kmap.map.removeLayer(this.lizhiLayer.layer)
+    initWarningLayer(layerUrl, type) {
+        this.warningLayer && this.kmap.map.removeLayer(this.warningLayer.layer)
         // 104.3017367175,30.329292136
-        this.lizhiLayer = this.kmap.addXYZLayer(
+        this.warningLayer = this.kmap.addXYZLayer(
             layerUrl,
             { minZoom: 5, maxZoom: 22 },
             99,
             0.4
         );
-        this.lizhiLayer.layer.setOpacity(0.7)
-        this.kmap.map.getView().setZoom(18)
-        this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+        this.warningLayer.layer.setOpacity(0.67)
+        if (type === 1) {
+            this.kmap.map.getView().setZoom(7.6)
+            // 23.310292140601142,113.10638639232688
+            this.kmap.map.getView().setCenter([113.609050, 23.30707646])
+        }
+        // 23.407672480519803,113.07739330484166
+        // this.kmap.map.getView().setZoom(18)
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
     }
 
     togglePlantLayer(name) {
@@ -77,9 +89,15 @@ class AlarmLayer {
             99,
             0.4
         );
-        this.plantLayer.layer.setOpacity(0.4)
-        this.kmap.map.getView().setZoom(11)
-        this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+        this.plantLayer.layer.setOpacity(0.6)
+        if (name !== "从化荔枝") {
+            this.kmap.map.getView().setZoom(7.6)
+            this.kmap.map.getView().setCenter([113.609050, 23.30707646])
+        } else {
+            this.kmap.map.getView().setZoom(11)
+            this.kmap.map.getView().setCenter([113.679, 23.607])
+        }
+        // this.kmap.map.getView().setCenter([113.679, 23.607])
         // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
 
         
@@ -109,7 +127,7 @@ class AlarmLayer {
             if (id === "3") {
                 this.kmap.map.getView().setZoom(7.2)
                 // const position = store.getters.userinfo.location
-                this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+                this.kmap.map.getView().setCenter([113.679, 23.607])
             }
         })
     }
@@ -120,9 +138,26 @@ class AlarmLayer {
             // 虚拟果园会播放物候变化
         }
         if (this.areaId === "3186") {
-            this.kmap.map.getView().setZoom(12+index)
+            let url = "https://birdseye-img.sysuimars.com/map/risk/lby_rjwd/{z}/{x}/{y}.png"
+            // if (index === 0) {
+            //     url = "https://birdseye-img.sysuimars.com/map/risk/lby_ghqs/{z}/{x}/{y}.png"
+            // } else if (index === 1) {
+            //     url =  "https://birdseye-img.sysuimars.com/map/risk/lby_dwdh/{z}/{x}/{y}.png"
+            // }
+            this.warningLayer && this.kmap.map.removeLayer(this.warningLayer.layer)
+            // 104.3017367175,30.329292136
+            this.warningLayer = this.kmap.addXYZLayer(
+                url,
+                { minZoom: 5, maxZoom: 22 },
+                99,
+                0.4
+            );
+            this.warningLayer.layer.setOpacity(0.6)
+            // this.kmap.map.getView().setZoom(12+index)
             // const position = store.getters.userinfo.location
-            this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+            this.kmap.map.getView().setZoom(16.6)
+            // 23.60747406160339,113.6805952006568
+            this.kmap.map.getView().setCenter([113.6805952006568, 23.60747406160339])
         }
     }
 }

src/views/warningHome/map/mockFarmLayer.js

@@ -50,6 +50,14 @@ class MockFarmLayer {
                 }
             })
         })
+
+        eventBus.on("weatherTime:changeTime", function ({date}) {
+            VE_API.mini_farm.weatherRiskVirtualFarmList({date: "2025-"+date}).then(res => {
+                if(res.code ===0){
+                    that.setData(res.data)
+                }
+            })
+        })
         // eventBus.on("MockFarmLayer:click", function ({event, feature}) {
         //     let targetSampleId = feature.get("targetSampleId")
         //     let mockFarmId = feature.get("mockFarmId")
@@ -69,7 +77,7 @@ class MockFarmLayer {
         this.clusterSource = new VectorSource({})
         this.clusterLayer = new Vector({
             source: new Cluster({
-                distance: 120,
+                distance: 50,
                 source: this.clusterSource,
             }),
             name: "MockFarmLayer",