页面调整

src/views/home/album_compoents/albumCarousel.vue

@@ -362,7 +362,7 @@ function toggleQualityAcitve() {
         .box-wrap {
             display: flex;
             .box-item {
-                min-width: 109px;
+                min-width: 140px;
                 box-sizing: border-box;
                 display: flex;
                 flex-direction: column;

src/views/workDetail/components/recheckBox2.vue

@@ -0,0 +1,247 @@
+<template>
+    <div class="work-item last-enter">
+        <div class="work-line">
+            <div class="line-box">
+                <div class="line-dotted">
+                    <div class="dotted-inset"></div>
+                </div>
+            </div>
+        </div>
+        <div class="work-info">
+            <div class="card-item-title" style="color: #ffffff;"><span class="dotted"></span>本次农事复核成效优异，作物产量潜力实现大幅增长，杀小叶情况优秀，小叶率在5%以内</div>
+            <div class="recheck-content">
+                <div class="over-img">
+                    <!-- 图片列表 -->
+                    <div class="carousel-wrapper" :style="carouselStyle">
+                      <photo-provider :photo-closable="true">
+                        <template v-for="(photo, index) in treeImgList"
+                                   :key="index">
+                          <photo-consumer
+                              class="carousel-item"
+                              :src="photo.filename"
+                          >
+                            <div class="img-two">
+                              <img :id="'img1' + index" :src="photo.filename" />
+                              <div class="tag tag-l">2025年2月19日
+                              </div>
+                              <div class="tag tag-l" style="bottom: 20px;">执行前花带叶率15%
+                              </div>
+                            </div>
+                          </photo-consumer>
+                          <photo-consumer
+                              class="carousel-item"
+                              :src="photo.filename2">
+                            <div class="img-two">
+                              <img :id="'img2' + index"  :src="photo.filename2" />
+                              <div class="tag tag-r">2025年2月22日
+                              </div>
+                              <div class="tag tag-r" style="bottom: 20px;">执行后花带叶率5%
+                              </div>
+                            </div>
+                          </photo-consumer>
+                        </template>
+
+                      </photo-provider>
+                    </div>
+
+                    <!-- 左右箭头 -->
+                    <div @click="prev" class="arrow left-arrow">
+                        <el-icon color="#F0D09C" size="20"><ArrowLeftBold /></el-icon>
+                    </div>
+                    <div @click="next" class="arrow right-arrow">
+                        <el-icon color="#F0D09C" size="20"><ArrowRightBold /></el-icon>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { base_img_url2, resize } from "@/api/config";
+
+
+const treeImgList = ref([
+    {
+        filename:
+            "https://birdseye-img.sysuimars.com/birdseye-look-vue/zj/%E5%9B%BE%E7%89%872.png",
+      filename2:
+          "https://birdseye-img.sysuimars.com/birdseye-look-vue/zj/%E5%9B%BE%E7%89%871.png",
+    }
+]);
+
+const updateImagePosition = () => {
+    carouselStyle.value.transform = `translateX(-${currentIndex.value * 100}%)`;
+};
+const currentIndex = ref(0);
+// 计算轮播图样式
+const carouselStyle = computed(() => {
+    return {
+        transform: `translateX(-${currentIndex.value * 100}%)`,
+    };
+});
+// 下一张图片
+const next = () => {
+    // 图片总数
+    const totalImages = treeImgList.value.length;
+    currentIndex.value = (currentIndex.value + 1) % totalImages;
+    updateImagePosition();
+};
+
+// 上一张图片
+const prev = () => {
+    // 图片总数
+    const totalImages = treeImgList.value.length;
+    currentIndex.value = (currentIndex.value - 1 + totalImages) % totalImages;
+    updateImagePosition();
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./boxClass.scss";
+
+.recheck-content {
+    padding-right: 10px;
+    .sub-title {
+        color: #2199f8;
+    }
+    .over-img {
+        margin-top: 8px;
+        width: 100%;
+        overflow: hidden;
+        transition: transform 0.5s ease;
+        display: flex;
+        position: relative;
+        .carousel-container {
+            flex: none;
+            // transform: translateX(-100%);
+            transition: transform 0.5s ease;
+            &.hideMap {
+                flex: none;
+                transform: translateX(0);
+                // transform: translateX(-100%);
+            }
+            position: relative;
+            width: 100%;
+            overflow: hidden;
+            margin: 0 auto;
+        }
+
+        .carousel-wrapper {
+            display: flex;
+            flex-direction: row;
+            justify-content: left;
+            transition: transform 0.5s ease;
+            width: 100%;
+            height: 100%;
+        }
+
+        .carousel-item {
+            flex-shrink: 0;
+            pointer-events: auto;
+            position: relative;
+            width: 50%;
+            .img-two {
+                display: flex;
+                position: relative;
+
+                .tag {
+                    position: absolute;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.6);
+                    color: #fff;
+                    font-size: 10px;
+                    padding: 2px 10px;
+                }
+                .tag-l {
+                    left: 0;
+                    border-radius: 0 5px 0 5px;
+                }
+                .tag-r {
+                    right: 0;
+                    border-radius: 5px 0 0 5px;
+                }
+            }
+        }
+
+        .carousel-item img {
+            width: 100%;
+            display: block;
+        }
+
+        .overlay {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: rgba(255, 255, 255, 0.3);
+            width: 100%;
+            height: 100%;
+            transition: width 0.5s ease-in-out;
+        }
+
+        .percentage {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+        }
+
+        .arrow {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0, 0, 0, 0.5);
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+
+        .left-arrow {
+            left: 16px;
+        }
+
+        .right-arrow {
+            right: 16px;
+        }
+        ::v-deep {
+            .el-carousel__arrow {
+                background: rgba(0, 0, 0, 0.5);
+            }
+            .PhotoConsumer {
+                width: 50%;
+                height: 100%;
+                img {
+                    width: calc(100%);
+                    height: 100%;
+                    max-height: 200px;
+                    // height: 300px;
+                    // max-height: 500px;
+                    object-fit: scale-down;
+                    border-radius: 5px;
+                }
+                img + img {
+                    padding-left: 8px;
+                }
+            }
+        }
+    }
+    .compare-b {
+        padding: 12px 0 8px 0;
+        .compare-chart {
+            margin-top: 8px;
+            background: #eaf4ff;
+            border-radius: 5px;
+            padding: 4px 0 8px 0;
+            ::v-deep {
+                .card-chart {
+                    height: 160px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/workDetail/components/recheckBox3.vue

@@ -0,0 +1,249 @@
+<template>
+    <div class="work-item last-enter">
+        <div class="work-line">
+            <div class="line-box">
+                <div class="line-dotted">
+                    <div class="dotted-inset"></div>
+                </div>
+            </div>
+        </div>
+        <div class="work-info">
+            <div class="card-item-title" style="color: #ffffff;"><span class="dotted"></span>本次农事复核成效优异，作物产量潜力实现大幅增长，压花情况优秀，未发现花量过多情况</div>
+            <div class="recheck-content">
+                <div class="over-img">
+                    <!-- 图片列表 -->
+                    <div class="carousel-wrapper" :style="carouselStyle">
+                      <photo-provider :photo-closable="true">
+                        <template v-for="(photo, index) in treeImgList"
+                                   :key="index">
+                          <photo-consumer
+                              class="carousel-item"
+                              :src="photo.filename"
+                          >
+                            <div class="img-two">
+                              <img :id="'img1' + index" :src="photo.filename" />
+                              <div class="tag tag-l">2025年2月18日
+                              </div>
+                              <div class="tag tag-l" style="bottom: 20px;">执行前花量比例85%
+
+                              </div>
+                            </div>
+                          </photo-consumer>
+                          <photo-consumer
+                              class="carousel-item"
+                              :src="photo.filename2">
+                            <div class="img-two">
+                              <img :id="'img2' + index"  :src="photo.filename2" />
+                              <div class="tag tag-r">2025年2月27日
+                              </div>
+                              <div class="tag tag-r" style="bottom: 20px;">执行前花量比例50%
+
+                              </div>
+                            </div>
+                          </photo-consumer>
+                        </template>
+
+                      </photo-provider>
+                    </div>
+
+                    <!-- 左右箭头 -->
+                    <div @click="prev" class="arrow left-arrow">
+                        <el-icon color="#F0D09C" size="20"><ArrowLeftBold /></el-icon>
+                    </div>
+                    <div @click="next" class="arrow right-arrow">
+                        <el-icon color="#F0D09C" size="20"><ArrowRightBold /></el-icon>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { base_img_url2, resize } from "@/api/config";
+
+
+const treeImgList = ref([
+    {
+        filename:
+            "https://birdseye-img.sysuimars.com/birdseye-look-vue/zj/1744537851048.jpg",
+      filename2:
+          "https://birdseye-img.sysuimars.com/birdseye-look-vue/zj/1744537851048.jpg",
+    }
+]);
+
+const updateImagePosition = () => {
+    carouselStyle.value.transform = `translateX(-${currentIndex.value * 100}%)`;
+};
+const currentIndex = ref(0);
+// 计算轮播图样式
+const carouselStyle = computed(() => {
+    return {
+        transform: `translateX(-${currentIndex.value * 100}%)`,
+    };
+});
+// 下一张图片
+const next = () => {
+    // 图片总数
+    const totalImages = treeImgList.value.length;
+    currentIndex.value = (currentIndex.value + 1) % totalImages;
+    updateImagePosition();
+};
+
+// 上一张图片
+const prev = () => {
+    // 图片总数
+    const totalImages = treeImgList.value.length;
+    currentIndex.value = (currentIndex.value - 1 + totalImages) % totalImages;
+    updateImagePosition();
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./boxClass.scss";
+
+.recheck-content {
+    padding-right: 10px;
+    .sub-title {
+        color: #2199f8;
+    }
+    .over-img {
+        margin-top: 8px;
+        width: 100%;
+        overflow: hidden;
+        transition: transform 0.5s ease;
+        display: flex;
+        position: relative;
+        .carousel-container {
+            flex: none;
+            // transform: translateX(-100%);
+            transition: transform 0.5s ease;
+            &.hideMap {
+                flex: none;
+                transform: translateX(0);
+                // transform: translateX(-100%);
+            }
+            position: relative;
+            width: 100%;
+            overflow: hidden;
+            margin: 0 auto;
+        }
+
+        .carousel-wrapper {
+            display: flex;
+            flex-direction: row;
+            justify-content: left;
+            transition: transform 0.5s ease;
+            width: 100%;
+            height: 100%;
+        }
+
+        .carousel-item {
+            flex-shrink: 0;
+            pointer-events: auto;
+            position: relative;
+            width: 50%;
+            .img-two {
+                display: flex;
+                position: relative;
+
+                .tag {
+                    position: absolute;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.6);
+                    color: #fff;
+                    font-size: 10px;
+                    padding: 2px 10px;
+                }
+                .tag-l {
+                    left: 0;
+                    border-radius: 0 5px 0 5px;
+                }
+                .tag-r {
+                    right: 0;
+                    border-radius: 5px 0 0 5px;
+                }
+            }
+        }
+
+        .carousel-item img {
+            width: 100%;
+            display: block;
+        }
+
+        .overlay {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: rgba(255, 255, 255, 0.3);
+            width: 100%;
+            height: 100%;
+            transition: width 0.5s ease-in-out;
+        }
+
+        .percentage {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+        }
+
+        .arrow {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0, 0, 0, 0.5);
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+
+        .left-arrow {
+            left: 16px;
+        }
+
+        .right-arrow {
+            right: 16px;
+        }
+        ::v-deep {
+            .el-carousel__arrow {
+                background: rgba(0, 0, 0, 0.5);
+            }
+            .PhotoConsumer {
+                width: 50%;
+                height: 100%;
+                img {
+                    width: calc(100%);
+                    height: 100%;
+                    max-height: 200px;
+                    // height: 300px;
+                    // max-height: 500px;
+                    object-fit: scale-down;
+                    border-radius: 5px;
+                }
+                img + img {
+                    padding-left: 8px;
+                }
+            }
+        }
+    }
+    .compare-b {
+        padding: 12px 0 8px 0;
+        .compare-chart {
+            margin-top: 8px;
+            background: #eaf4ff;
+            border-radius: 5px;
+            padding: 4px 0 8px 0;
+            ::v-deep {
+                .card-chart {
+                    height: 160px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/workDetail/index.vue

@@ -34,10 +34,10 @@
                         </div>
                         <div class="box-item">
                           <div class="box-title">
-                            复核对比
-                            <!-- <el-icon class="icon-arrow" size="18"><ArrowUpBold /></el-icon> -->
+                            农事对比
                           </div>
-                          <recheck-box2></recheck-box2>
+                          <recheck-box2 v-if="workList[0].farmWorkLibId ==='699268027270565895'"></recheck-box2>
+                          <recheck-box3 v-if="workList[0].farmWorkLibId ==='699268027274760192'"></recheck-box3>
                         </div>
                     </div>
                 </chart-box>
@@ -87,6 +87,7 @@ import chartBox from "@/components/chartBox.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
 import RecheckBox2 from "./components/recheckBox2";
+import RecheckBox3 from "./components/recheckBox3";
 
 const components = {
     prescriptionBox,