加入虚拟果园点位

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/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

@@ -85,6 +85,7 @@
     :imageUrl="urls"
     :curIndex="urlsIndex"
   ></PicturePreview>
+  <album-carousel></album-carousel>
 </template>
 
 <script setup>
@@ -106,6 +107,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,