fix: 对接照片，增加反馈弹窗

src/api/modules/image.js

@@ -25,6 +25,10 @@ export default {
         url: config.base_url + "adm/images/{organId}/{areaId}",
         type: "get",
     },
+    fetchGardenImgsDate: {
+        url: config.base_url + "adm/findHasImagesDate",
+        type: "get",
+    },
     fetchRegionList: {
         url: config.base_url + "adm/regionList",
         type: "post",

src/components/fnHeader.vue

@@ -229,6 +229,9 @@ onUnmounted(() => {
                 font-family: "PangMenZhengDao";
                 text-align: center;
             }
+            .el-select__input {
+                color: #f7be5a;
+            }
         }
     }
     .date {

src/components/navigation.vue

@@ -40,7 +40,7 @@
             </el-checkbox>
         </el-checkbox-group>
 
-        <div class="compare-tips" v-show="checkedCompareChildren.length && !checkedCompareChildren.includes('2')">>
+        <div class="compare-tips" v-show="checkedCompareChildren.length && !checkedCompareChildren.includes('2')">
             <span>提示：</span>请在底图上点选 <span>两棵树</span>，才可以进行对比
         </div>
     </div>
@@ -300,6 +300,7 @@ function handleQuitCompare() {
         left: 50%;
         transform: translateX(-50%);
         background: rgba(4, 3, 0, 0.6);
+        width: max-content;
         border-radius: 40px;
         padding: 6px 34px;
         font-family: 'PangMenZhengDao';

src/views/home/album/album_compoents/albumCarousel.vue

@@ -63,7 +63,7 @@ const getList = () =>{
     params.startDate = dateFormat(pastDate, "YY-mm-dd");
     params.endDate = dateFormat(futureDate, "YY-mm-dd");
   }
-  VE_API.image.list(params).then(res => {
+  VE_API.image.list(params, {Global: false}).then(res => {
   if(res.code === 0){
       images.value = res.data
     }

src/views/home/album/album_compoents/albumDrawBox.vue

@@ -77,7 +77,7 @@ async function drawWatermark(event) {
   if(!watermark.value){
     let param = {farmId:props.farmId, date: props.photo.uploadDate}
     let weather = null
-    VE_API.image.findSuitabilityByPoint(param).then((res)=>{
+    VE_API.image.findSuitabilityByPoint(param, {Global: false}).then((res)=>{
       if(res.code === 0){
         weather = res.data
         drawWatermark2(img,weather)

src/views/home/album/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="album-page">
+    <div class="album-page" v-loading="loadingAlbum" element-loading-background="rgba(0, 0, 0, 0.3)">
         <div class="album-wrap" ref="scrollContainer">
             <!-- <div class="barrage-title">
                 农情动态
@@ -383,9 +383,11 @@ const getFarmDetail = (id) => {
     });
 };
 
+const loadingAlbum = ref(false)
 // 农事列表
 const farmWorkList = ref([]);
 const getFarmWorkList = (farmId) => {
+    loadingAlbum.value = true
     // regionId
     const regionVal = regionId.value ? regionId.value : null
     VE_API.farm.fetchFarmWorkList({ farmId, regionId: regionVal }).then(({ data }) => {
@@ -394,6 +396,7 @@ const getFarmWorkList = (farmId) => {
             item.condition=item2.name + "大于" + (parseFloat(item2.value) * 100) + "%";
           }
         }
+        loadingAlbum.value = false
         getSecondLastIndex(data);
         // farmWorkList.value = data;
         // nextTick(() => {

src/views/home/album_compoents/albumCarousel.vue

@@ -32,8 +32,8 @@
                     <div class="base-data">
                         <div class="base-item" v-for="item in photoBaseData" :key="item.label">
                             <template v-if="item.value">
-                            <span class="label">{{ item.label }}</span>
-                            <div class="value">{{ item.value }}</div>
+                                <span class="label">{{ item.label }}</span>
+                                <div class="value">{{ item.value }}</div>
                             </template>
                         </div>
                     </div>
@@ -58,10 +58,10 @@
                             @click="toggleAcitve(item.name)"
                             :class="{ active: activeOuput === item.name }"
                         >
-                          <template v-if="item.value">
-                            <div class="item-name">{{ item.name }}</div>
-                            <div class="item-val">{{ item.value }}</div>
-                          </template>
+                            <template v-if="item.value">
+                                <div class="item-name">{{ item.name }}</div>
+                                <div class="item-val">{{ item.value }}</div>
+                            </template>
                         </div>
                     </div>
                 </div>
@@ -69,20 +69,63 @@
                 <div class="overview-file">
                     <div class="box-title">质量详情</div>
                     <div class="box-wrap">
-                      <div
+                        <div
                             class="box-item"
                             v-for="(item, index) in qualityBox"
                             :key="index"
                             @click="toggleAcitve(item.name)"
                             :class="{ active: activeOuput === item.name }"
                         >
-                          <template v-if="item.value">
-                              <div class="item-name">{{ item.name }}</div>
-                              <div class="item-val">{{ item.value }}</div>
-                          </template>
+                            <template v-if="item.value">
+                                <div class="item-name">{{ item.name }}</div>
+                                <div class="item-val">{{ item.value }}</div>
+                            </template>
                         </div>
                     </div>
                 </div>
+
+                <el-popover placement="top-end" :width="350" trigger="click" effect="dark">
+                    <template #reference>
+                        <div class="feedback-btn">意见反馈</div>
+                    </template>
+                    <div class="feedback-cont">
+                        <div class="tips">请选择您发现的实际情况：</div>
+                        <div class="tab-group" v-for="(item, index) in tabList" :key="index">
+                            <div class="tab-title">
+                                <div class="text">
+                                    <div class="line"></div>
+                                    <span>{{ item.title }}</span>
+                                </div>
+                                <div class="toggle" @click="handleToogle(index)" v-if="item.list.length > 3">
+                                    <span>{{ item.toggle ? "展开更多" : "收起" }}</span>
+                                    <el-icon v-show="item.toggle"><ArrowDown /></el-icon>
+                                    <el-icon v-show="!item.toggle"><ArrowUp /></el-icon>
+                                </div>
+                            </div>
+                            <div class="tab-list" :style="{ height: item.toggle ? '46px' : '93px' }">
+                                <div
+                                    class="tab-item"
+                                    :class="{ active: ele.active }"
+                                    v-for="(ele, idx) in item.list"
+                                    @click="handleActiveFeed(index, idx)"
+                                    :key="idx"
+                                >
+                                    {{ ele.name }}
+                                </div>
+                            </div>
+                        </div>
+                        <el-input
+                            class="feedback-input"
+                            :autosize="{ maxRows: 3 }"
+                            type="textarea"
+                            v-model="remarkVal"
+                            size="large"
+                            placeholder="备注：请写下具体内容吧～"
+                        >
+                        </el-input>
+                        <div class="feedback-btn" @click="handleSubmit">提交反馈</div>
+                    </div>
+                </el-popover>
             </div>
         </div>
     </el-dialog>
@@ -94,12 +137,13 @@ import "./cacheImg.js";
 import AlbumCarouselItem from "./albumCarouselItem";
 import { dateFormat } from "@/utils/date_util.js";
 import eventBus from "@/api/eventBus";
+import { ElMessage } from "element-plus";
 
 const lock = ref(false);
 const farmId = ref(766);
 const nameRef = ref("");
 
-const isLoadingImg = ref(true)
+const isLoadingImg = ref(true);
 const images = ref(null);
 const dialogVisible = ref(false);
 // 获取当前日期
@@ -112,14 +156,83 @@ startDate.setMonth(currentDate.getMonth() - 1);
 const formattedStartDate = dateFormat(startDate, "YY-mm-dd");
 const formattedEndDate = dateFormat(currentDate, "YY-mm-dd");
 
-eventBus.on("change:watermark",function(name){
-  nameRef.value = name
-})
+eventBus.on("change:watermark", function (name) {
+    nameRef.value = name;
+});
 
 const outputBox = ref([]);
 const qualityBox = ref([]);
 const photoBaseData = ref([]);
 
+const remarkVal = ref("");
+const input = ref("");
+const tabList = ref([
+    {
+        title: "病害",
+        toggle: true,
+        list: [
+            {
+                name: "叶瘿蚊",
+                active: false,
+            },
+            {
+                name: "卷叶蛾",
+                active: false,
+            },
+            {
+                name: "毛毡病",
+                active: false,
+            },
+            {
+                name: "炭疽病",
+                active: false,
+            },
+            {
+                name: "蒂蛀虫",
+                active: false,
+            },
+        ],
+    },
+    {
+        title: "虫害",
+        toggle: true,
+        list: [
+            {
+                name: "蝽象",
+                active: false,
+            },
+            {
+                name: "其它",
+                active: false,
+            },
+        ],
+    },
+    {
+        title: "物候期",
+        toggle: true,
+        list: [
+            {
+                name: "蝽象",
+                active: false,
+            },
+            {
+                name: "其它",
+                active: false,
+            },
+        ],
+    },
+]);
+const handleToogle = (index) => {
+    tabList.value[index].toggle = !tabList.value[index].toggle;
+};
+const handleActiveFeed = (index, idx) => {
+    tabList.value[index].list[idx].active = !tabList.value[index].list[idx].active;
+};
+const handleSubmit = () => {
+    ElMessage.success("感谢您的反馈");
+    input.value = "";
+    showFeedback.value = false;
+};
 
 function resetData() {
     outputBox.value = [
@@ -152,35 +265,35 @@ function resetData() {
     ];
 }
 
-const showTag = ref(false)
-eventBus.on("click:point",function({farmId,sampleId, data}){
-  sampleId = data.id;
-  getSampleFiles(data.geoHashSample);
-  photoBaseData.value[0].value = data.pz;
-    isLoadingImg.value = true
-  let startDate = new Date(currentDate);
-  startDate.setFullYear(currentDate.getFullYear() - 2);
+const showTag = ref(false);
+eventBus.on("click:point", function ({ farmId, sampleId, data }) {
+    sampleId = data.id;
+    getSampleFiles(data.geoHashSample);
+    photoBaseData.value[0].value = data.pz;
+    isLoadingImg.value = true;
+    let startDate = new Date(currentDate);
+    startDate.setFullYear(currentDate.getFullYear() - 2);
 
-// 格式化日期
-  let params = {sampleId,farmId,startDate:dateFormat(startDate, "YY-mm-dd")}
-  VE_API.miniimage.list(params).then(res => {
-      if(res.code === 0){
-        dialogVisible.value = true
-      images.value = res.data
-      isLoadingImg.value = false
-    }
-  })
-  showTag.value = data.nonghu == 1 ? true : false
-//   photoBaseData.value[0].value = data.pz;
-//   photoBaseData.value[1].value = data?.sgbmj ? data?.sgbmj + "平方米" : "--";
-//   photoBaseData.value[2].value = data?.zzts ? data.zzts + "" : "--";
-//   photoBaseData.value[3].value = data?.sl ? data?.sl + "年" : "--";
-//   outputBox.value[0].value = data?.cl ? (data.cl + "斤") : "--";
-//   outputBox.value[1].value = data?.spgl? (data.spgl + "%") : "--";
-//   qualityBox.value[0].value = data?.tfl? (data.tfl + "%") : "--";
-//   qualityBox.value[1].value = data?.tgl? (data.tgl + "%") : "--";
-//   qualityBox.value[2].value = data?.dxtj? (data.dxtj + "%") : "--";
-})
+    // 格式化日期
+    let params = { sampleId, farmId, startDate: dateFormat(startDate, "YY-mm-dd") };
+    VE_API.miniimage.list(params).then((res) => {
+        if (res.code === 0) {
+            dialogVisible.value = true;
+            images.value = res.data;
+            isLoadingImg.value = false;
+        }
+    });
+    showTag.value = data.nonghu == 1 ? true : false;
+    //   photoBaseData.value[0].value = data.pz;
+    //   photoBaseData.value[1].value = data?.sgbmj ? data?.sgbmj + "平方米" : "--";
+    //   photoBaseData.value[2].value = data?.zzts ? data.zzts + "" : "--";
+    //   photoBaseData.value[3].value = data?.sl ? data?.sl + "年" : "--";
+    //   outputBox.value[0].value = data?.cl ? (data.cl + "斤") : "--";
+    //   outputBox.value[1].value = data?.spgl? (data.spgl + "%") : "--";
+    //   qualityBox.value[0].value = data?.tfl? (data.tfl + "%") : "--";
+    //   qualityBox.value[1].value = data?.tgl? (data.tgl + "%") : "--";
+    //   qualityBox.value[2].value = data?.dxtj? (data.dxtj + "%") : "--";
+});
 
 eventBus.off("albumCarousel", toggleActiveImg);
 eventBus.on("albumCarousel", toggleActiveImg);
@@ -191,65 +304,68 @@ function toggleActiveImg(index) {
 }
 
 const getSampleFiles = (geoHash) => {
-    resetData()
+    resetData();
     const farmId = sessionStorage.getItem("farmId");
-    VE_API.mini_farm.getSampleFiles({ geoHashSample: geoHash,farmId }).then(({data,extData}) => {
+    VE_API.mini_farm.getSampleFiles({ geoHashSample: geoHash, farmId }).then(({ data, extData }) => {
         photoBaseData.value[0].value = data.meta_info.type_id;
         let i = 1;
-        for(let key of Object.keys(data.meta_info)){
-          let dict = extData.find((item) => item.field == key)
-          if(dict){
-            photoBaseData.value[i].label = dict.label
-            if(dict.field === "crown"){
-                photoBaseData.value[i].value = data.meta_info[dict.field]
-                let pj = Math.sqrt(photoBaseData.value[i].value * 1.2).toFixed(1);
-                photoBaseData.value[i].value = photoBaseData.value[i].value.toFixed(1) +  dict.unit + "(蓬径"+pj+"米)";
-            }else{
-                photoBaseData.value[i].value = data.meta_info[dict.field] + dict.unit
+        for (let key of Object.keys(data.meta_info)) {
+            let dict = extData.find((item) => item.field == key);
+            if (dict) {
+                photoBaseData.value[i].label = dict.label;
+                if (dict.field === "crown") {
+                    photoBaseData.value[i].value = data.meta_info[dict.field];
+                    let pj = Math.sqrt(photoBaseData.value[i].value * 1.2).toFixed(1);
+                    photoBaseData.value[i].value =
+                        photoBaseData.value[i].value.toFixed(1) + dict.unit + "(蓬径" + pj + "米)";
+                } else {
+                    photoBaseData.value[i].value = data.meta_info[dict.field] + dict.unit;
+                }
+                i++;
             }
-            i++;
-          }
         }
         i = 0;
-        for(let key of Object.keys(data.production_info)){
-          let dict = extData.find((item) => item.field == key)
-          if(dict){
-            outputBox.value[i].name = dict.label
-            if(dict.label === "产量估计"){
-              data.production_info[dict.field] = data.production_info[dict.field] < 50 ? (data.production_info[dict.field] * 3).toFixed(0) : data.production_info[dict.field]
+        for (let key of Object.keys(data.production_info)) {
+            let dict = extData.find((item) => item.field == key);
+            if (dict) {
+                outputBox.value[i].name = dict.label;
+                if (dict.label === "产量估计") {
+                    data.production_info[dict.field] =
+                        data.production_info[dict.field] < 50
+                            ? (data.production_info[dict.field] * 3).toFixed(0)
+                            : data.production_info[dict.field];
+                }
+                outputBox.value[i].value = data.production_info[dict.field] + dict.unit;
+                i++;
             }
-            outputBox.value[i].value = data.production_info[dict.field] + dict.unit
-            i++;
-          }
         }
 
         i = 0;
-        for(let key of Object.keys(data.ecology_info)){
-          let dict = extData.find((item) => item.field == key)
-          if(dict){
-            qualityBox.value[i].name = dict.label
-            qualityBox.value[i].value = data.ecology_info[dict.field] + dict.unit
-            i++;
-          }
+        for (let key of Object.keys(data.ecology_info)) {
+            let dict = extData.find((item) => item.field == key);
+            if (dict) {
+                qualityBox.value[i].name = dict.label;
+                qualityBox.value[i].value = data.ecology_info[dict.field] + dict.unit;
+                i++;
+            }
         }
 
-        photoList.value[0].key = data.meta_info.dp_alert_info.key
-        photoList.value[0].statement = data.meta_info.dp_alert_info.statement
-        photoList.value[1].key = data.meta_info.grow_alert_info.key
-        photoList.value[1].statement = data.meta_info.grow_alert_info.statement
-        photoList.value[2].key = data.meta_info.nutrition_info.key
-        photoList.value[2].statement = data.meta_info.nutrition_info.statement
-        photoList.value[3].key = data.meta_info.prescription_info.key
-        photoList.value[3].statement = data.meta_info.prescription_info.statement
+        photoList.value[0].key = data.meta_info.dp_alert_info.key;
+        photoList.value[0].statement = data.meta_info.dp_alert_info.statement;
+        photoList.value[1].key = data.meta_info.grow_alert_info.key;
+        photoList.value[1].statement = data.meta_info.grow_alert_info.statement;
+        photoList.value[2].key = data.meta_info.nutrition_info.key;
+        photoList.value[2].statement = data.meta_info.nutrition_info.statement;
+        photoList.value[3].key = data.meta_info.prescription_info.key;
+        photoList.value[3].statement = data.meta_info.prescription_info.statement;
     });
 };
 
-
 const photoList = ref([
-    {key: "病虫", statement: "--"},
-    {key: "异常", statement: "--"},
-    {key: "营养", statement: "--"},
-    {key: "农事", statement: "--"},
+    { key: "病虫", statement: "--" },
+    { key: "异常", statement: "--" },
+    { key: "营养", statement: "--" },
+    { key: "农事", statement: "--" },
 ]);
 
 const activeOuput = ref(null);
@@ -258,28 +374,26 @@ const activeOuput = ref(null);
 function toggleAcitve(name) {
     activeOuput.value = name;
     if (name.indexOf("开花") > -1) {
-        eventBus.emit("change:watermark", "开花目标框")
+        eventBus.emit("change:watermark", "开花目标框");
     } else if (name.indexOf("花穗") > -1) {
-        eventBus.emit("change:watermark", "花穗目标框")
+        eventBus.emit("change:watermark", "花穗目标框");
     } else if (name.indexOf("雄花") > -1) {
-        eventBus.emit("change:watermark", "雄花目标框")
+        eventBus.emit("change:watermark", "雄花目标框");
     } else if (name.indexOf("枝条数") > -1) {
-        eventBus.emit("change:watermark", "")
+        eventBus.emit("change:watermark", "");
     } else {
-        eventBus.emit("change:watermark", "")
+        eventBus.emit("change:watermark", "");
     }
 }
 
 function closeDialog() {
-    activeOuput.value = null
-    eventBus.emit("change:watermark", "")
-    eventBus.emit("resetImgIndex")
+    activeOuput.value = null;
+    eventBus.emit("change:watermark", "");
+    eventBus.emit("resetImgIndex");
 }
 
 // 质量详情
-function toggleQualityAcitve() {
-
-}
+function toggleQualityAcitve() {}
 </script>
 
 <style lang="scss" scoped>
@@ -301,7 +415,7 @@ function toggleQualityAcitve() {
             align-items: center;
 
             .tag {
-                border: 1px solid #FFD489;
+                border: 1px solid #ffd489;
                 border-radius: 4px;
                 font-size: 12px;
                 display: inline-block;
@@ -314,11 +428,11 @@ function toggleQualityAcitve() {
             }
         }
         .overview-file {
-            padding-top: 20px;
+            padding-top: 12px;
             .box-title {
                 font-size: 16px;
                 padding-left: 13px;
-                margin-bottom: 16px;
+                margin-bottom: 12px;
                 position: relative;
                 display: flex;
                 justify-content: space-between;
@@ -392,12 +506,21 @@ function toggleQualityAcitve() {
             }
         }
         .overview-file + .overview-file {
-            margin-top: 8px;
+            margin-top: 4px;
+        }
+        .feedback-btn {
+            margin: 16px auto 10px auto;
+            color: rgba(255, 255, 255, 0.6);
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 20px;
+            padding: 5px 26px;
+            width: fit-content;
+            cursor: pointer;
         }
         .box-wrap {
             display: flex;
             .box-item {
-                min-width: 140px;
+                min-width: 110px;
                 box-sizing: border-box;
                 display: flex;
                 flex-direction: column;
@@ -438,4 +561,97 @@ function toggleQualityAcitve() {
 .picture-preview-wrap {
     background: none;
 }
+
+.feedback-cont {
+    background: #303030;
+    border-radius: 5px;
+    padding: 4px 0px;
+    color: #ffffff;
+    .tips {
+        font-size: 16px;
+    }
+    .tab-group {
+        margin-top: 12px;
+        .tab-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .text {
+                color: #666666;
+                display: flex;
+                align-items: center;
+                .line {
+                    width: 3px;
+                    height: 12px;
+                    background: #999999;
+                    border-radius: 2px;
+                    margin-right: 5px;
+                }
+            }
+            .toggle {
+                color: #999999;
+                font-size: 12px;
+                cursor: pointer;
+            }
+        }
+    }
+    .tab-list {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 8px;
+        height: 46px;
+        overflow: hidden;
+        transition: all 0.3s;
+        .tab-item {
+            cursor: pointer;
+            background: rgba(233, 233, 233, 0.1);
+            font-size: 14px;
+            height: 37px;
+            line-height: 37px;
+            width: 31%;
+            border-radius: 5px;
+            box-sizing: border-box;
+            text-align: center;
+            margin-bottom: 10px;
+            &.active {
+                background: #ffd489;
+                color: #000000;
+            }
+        }
+        .tab-item + .tab-item {
+            margin-right: 10px;
+        }
+        .tab-item:nth-child(3n) {
+            margin-right: 0;
+        }
+        .tab-item:first-child {
+            margin-right: 10px;
+        }
+    }
+    .input {
+        padding-bottom: 16px;
+        border-bottom: 1px solid rgba(180, 180, 180, 0.3);
+    }
+    .feedback-input {
+        padding: 10px 0;
+        .el-input__wrapper, .el-textarea__inner {
+            box-shadow: 0 0 0 1px #cacaca inset;
+            background: none;
+            color: #fff;
+        }
+        .el-input__inner {
+            color: #fff;
+        }
+    }
+    .feedback-btn {
+        cursor: pointer;
+        padding: 10px;
+        background-image: linear-gradient(140deg, #ffd887, #ed9e1e);
+        border-radius: 25px;
+        color: #fff;
+        width: 66%;
+        text-align: center;
+        margin: 10px auto 0 auto;
+    }
+}
 </style>

src/views/home/album_compoents/albumDrawBox.vue

@@ -98,7 +98,7 @@ async function drawWatermark1(event) {
   if(!watermark.value){
     let param = {farmId:props.farmId, date: props.photo.uploadDate}
     let weather = null
-    VE_API.image.findSuitabilityByPoint(param).then((res)=>{
+    VE_API.image.findSuitabilityByPoint(param, {Global: false}).then((res)=>{
       if(res.code === 0){
         weather = res.data
         drawWatermark2(img,weather)

src/views/home/album_compoents/compareDialog.vue

@@ -412,8 +412,9 @@ function toggleAcitve2 (name){
     display: flex;
     .left-img {
         // min-width: 500px;
-        width: 782px;
-        height: 580px;
+        // width: 782px;
+        width: 36vw;
+        // height: 580px;
     }
     .compare-l {
         padding-right: 60px;

src/views/home/components/farmFightTask.vue

@@ -20,7 +20,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
 import eventBus from "@/api/eventBus";
 let props = defineProps({
   farmId:{
-    type:Number,
+    type:[Number, String],
     required:true
   }
 })

src/views/home/components/leftComponents/leftFly.vue

@@ -5,21 +5,39 @@
             <div class="tab-item" :class="{ active: activeTab === 1 }" @click="handleTab(1)">视频</div>
         </div>
         <div class="select-group">
+            <!-- <el-date-picker
+                class="date-picker"
+                v-model="dateTime"
+                @change="changeDate"
+                size="large"
+                type="date"
+                format="YYYY年MM月DD日"
+                value-format="YYYY-MM-DD"
+                :style="{ width: activeTab ? '100%' : 'calc(100% - 145px)' }"
+            /> -->
             <el-date-picker
                 class="date-picker"
                 v-model="dateTime"
                 @change="changeDate"
                 size="large"
                 type="date"
+                popper-class="pic-time-picker"
                 format="YYYY年MM月DD日"
                 value-format="YYYY-MM-DD"
                 :style="{ width: activeTab ? '100%' : 'calc(100% - 145px)' }"
-            />
-            <el-select v-if="activeTab === 0" class="select" v-model="areaValue" size="large">
+            >
+                <template #default="cell">
+                    <div class="cell" :class="{ current: cell.isCurrent }">
+                        <span class="text">{{ cell.text }}</span>
+                        <span v-if="isHoliday(cell)" class="holiday" />
+                    </div>
+                </template>
+            </el-date-picker>
+            <el-select v-if="activeTab === 0" @change="changeArea" class="select" v-model="areaValue" size="large">
                 <el-option v-for="item in areaOptions" :key="item.value" :label="item.name" :value="item.id" />
             </el-select>
         </div>
-        <div div class="photo-list" v-show="activeTab === 0">
+        <div class="photo-list" v-show="activeTab === 0" v-loading="loadingImgs" element-loading-background="rgba(0, 0, 0, 0.3)">
             <div
                 class="photo-item"
                 v-for="(item, index) in imageList"
@@ -30,14 +48,14 @@
                     lbum-carousel-item
                     :key="index"
                     :name="item.code"
-                    :farmId="766"
+                    :farmId="curFarmId"
                     :images="[item]"
                     :lock="false"
                 ></album-carousel-item>
             </div>
-            <div class="no-photo" v-show="!imageList.length">暂无数据</div>
+            <div class="no-photo" v-show="loadingImgs === false && !imageList.length">暂无数据</div>
         </div>
-        <div class="pagination-wrap">
+        <div class="pagination-wrap" v-show="activeTab === 0">
             <el-pagination
                 background
                 :page-size="pageSize"
@@ -69,14 +87,23 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import albumCarouselItem from "../../album_compoents/albumCarouselItem.vue";
 import config from "@/api/config";
+import eventBus from "@/api/eventBus";
 const resize = "?imageView/1/w/240/h/240";
 
 const activeTab = ref(0);
 const handleTab = (index) => {
     activeTab.value = index;
-    changeDate()
+    changeDate();
 };
 
+const curFarmId = ref(sessionStorage.getItem("farmId"))
+
+function handleChangeGarden(id) {
+    curFarmId.value = id
+    console.log('curFarmId', id);
+    getBlueRegionList()
+}
+
 function getCurrentMonth() {
     const now = new Date();
     const formattedDate = now.toISOString().slice(0, 10);
@@ -88,27 +115,53 @@ const changeDate = () => {
     if (activeTab.value) {
         getVideoList();
     } else {
+        currentPage.value = 1
         geImgaeList();
     }
 };
-const areaValue = ref(2); // 默认区域ID
+
+const isHoliday = ({ dayjs }) => {
+    return allImgsDates.value.includes(dayjs.format("YYYY-MM-DD"));
+};
+
+const allImgsDates = ref([]);
+function getDates() {
+    VE_API.image.fetchGardenImgsDate({ farmId: curFarmId.value, regionId: areaValue.value }).then(({ data }) => {
+        allImgsDates.value = data;
+        dateTime.value = data[0];
+        geImgaeList();
+    });
+}
+
+const areaValue = ref(null); // 默认区域ID
 
 const areaOptions = ref([]);
 const currentPage = ref(1);
 const pageSize = ref(10); // 每页显示20条数据
 const totalVal = ref(0);
 
+const loadingImgs = ref(false)
 const imageList = ref([]);
 const geImgaeList = () => {
-    VE_API.image.fetchGardenImgs({ date: dateTime.value, organId: 766, areaId: areaValue.value, limit: pageSize.value, page: currentPage.value }).then((res) => {
-        imageList.value = res.data;
-        totalVal.value = res.count;
-    });
+    loadingImgs.value = true
+    VE_API.image
+        .fetchGardenImgs({
+            date: dateTime.value,
+            organId: curFarmId.value,
+            areaId: areaValue.value,
+            limit: pageSize.value,
+            page: currentPage.value,
+        }, {Global: false})
+        .then((res) => {
+            imageList.value = res.data;
+            totalVal.value = res.count;
+            loadingImgs.value = false
+        });
 };
 
 function changeArea() {
     currentPage.value = 1; // 重置页码
-    geImgaeList();
+    getDates();
 }
 
 const videoList = ref([]);
@@ -126,13 +179,17 @@ const handlePlay = (index) => {
 };
 
 onMounted(() => {
-    geImgaeList();
-    getBlueRegionList()
+    eventBus.off('garden:organId', handleChangeGarden)
+    eventBus.on('garden:organId', handleChangeGarden)
+    
+    getBlueRegionList();
 });
 
 function getBlueRegionList() {
-    VE_API.image.fetchRegionList({ farmId: 766 }).then(({ data }) => {
+    VE_API.image.fetchRegionList({ farmId: curFarmId.value }).then(({ data }) => {
         areaOptions.value = data;
+        areaValue.value = data[0].id;
+        getDates();
     });
 }
 
@@ -247,6 +304,25 @@ function formatDatePart(originalStr) {
             .el-pagination {
                 justify-content: center;
             }
+            .el-pagination.is-background .el-pager li {
+                background: #424242;
+                color: rgba(255, 255, 255, 0.7);
+            }
+            .el-pagination.is-background .el-pager li.is-active {
+                background: #FFD489;
+                color: #000;
+            }
+            .el-pagination.is-background .btn-prev:disabled {
+                background: #424242;
+                color: rgba(255, 255, 255, 0.4);
+            }
+            .el-pagination button {
+                background: #424242;
+                color: rgba(255, 255, 255, 0.7);
+                &:hover {
+                    color: rgba(255, 255, 255, 1);
+                }
+            }
         }
     }
     .video-list {
@@ -278,3 +354,49 @@ function formatDatePart(originalStr) {
     }
 }
 </style>
+
+<style lang="less">
+.pic-time-picker {
+    .cell {
+        height: 30px;
+        padding: 3px 0;
+        box-sizing: border-box;
+    }
+
+    .cell .text {
+        width: 24px;
+        height: 24px;
+        display: block;
+        margin: 0 auto;
+        line-height: 24px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: 50%;
+    }
+
+    .cell.current .text {
+        background: #409eff;
+        color: #fff;
+    }
+    .available.today {
+        .cell .text {
+            color: #409eff;
+        }
+        .cell.current .text {
+            color: #fff;
+        }
+    }
+
+    .cell .holiday {
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        background: #2199f8;
+        border-radius: 50%;
+        bottom: 0px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+</style>

src/views/home/index.vue

@@ -687,7 +687,6 @@ function deleteLine() {
 airLineStringLayer.deleteSelectedPoints();
 }
 
-
 const rightToolList = [
     [
         {