首页点击

src/api/modules/miniimage.js

@@ -5,4 +5,9 @@ module.exports = {
         url: config.base_dev_url + "image/list?key="+config.mini_key,
         type: "post",
     }
+    ,
+    getByFarmIdAndDate: {
+        url: config.base_dev_url + "lz_weather7d/getByFarmIdAndDate/{farmId}/{date}?key="+config.mini_key,
+        type: "get",
+    },
 }

src/styles/index.scss

@@ -6,4 +6,8 @@
 $screenWidth:414;
 @function rpx($value){
   @return  $screenWidth / 750 * $value + px;
-}
+}
+
+.v-dialog{
+  background-color: #00000000;
+}

src/views/home/album_compoents/albumCarousel.vue

@@ -1,14 +1,15 @@
 <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>
+  <el-dialog
+      v-model="dialogVisible"
+      width="60%"
+      height="80%"
+      class="picture-preview-wrap v-dialog"
+      :show-close="false"
+      top="10vh"
+      append-to-body
+  >
+    <album-carousel-item v-if="images" :farmId="farmId" :images="images" :lock="lock"></album-carousel-item>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -18,6 +19,8 @@ import AlbumCarouselItem from "./albumCarouselItem";
 import {dateFormat} from "@/utils/date_util.js"
 import eventBus from "@/api/eventBus";
 
+const lock = ref(false);
+const farmId = ref(766);
 
 const images = ref(null);
 const dialogVisible = ref(false)
@@ -32,7 +35,7 @@ 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}
+  let params = {sampleId: name,farmId: farmId.value, startDate: formattedStartDate, endDate: formattedEndDate}
   VE_API.miniimage.list(params).then(res => {
     if(res.code === 0){
       images.value = res.data
@@ -43,10 +46,6 @@ eventBus.on("click:point",function({name}){
 
 
 
-onMounted(() => {
-
-});
-
 </script>
 
 <style lang="scss" scoped>

src/views/home/album_compoents/albumCarousel7d.vue

@@ -1,6 +1,6 @@
 <template>
   <template v-for="(images,index) in imagesList" :key="index">
-    <album-carousel-item  :images="images"></album-carousel-item>
+    <album-carousel-item :farmId="farmId" :images="images"></album-carousel-item>
     <div style="height: 5px"></div>
   </template>
 </template>
@@ -11,12 +11,13 @@ import AlbumDrawBoxItem from "./albumCarouselItem";
 import "./cacheImg.js"
 import AlbumCarouselItem from "./albumCarouselItem";
 import {dateFormat} from "@/utils/date_util.js"
+import eventBus from "@/api/eventBus";
 
 const props =defineProps({
-  sampleId:{
-    type: [Number, String],
-    required: false
-  },
+  // sampleId:{
+  //   type: [Number, String],
+  //   required: false
+  // },
   farmId:{
     type: [Number, String],
     required: true
@@ -27,9 +28,9 @@ const props =defineProps({
   }
 })
 const imagesList = ref([]);
+let params = {farmId: props.farmId}
 
 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)
@@ -38,6 +39,19 @@ onMounted(() => {
     params.startDate = dateFormat(pastDate, "YY-mm-dd");
     params.endDate = dateFormat(futureDate, "YY-mm-dd");
   }
+  // getImageList(params)
+});
+
+const updateData = () =>{
+  params.farmId = props.farmId
+  getImageList(params)
+}
+
+onUnmounted(()=>{
+  eventBus.off("chart:updateOption",updateData)
+})
+
+const getImageList = (params) =>{
   VE_API.image.list(params).then(res => {
     if(res.code === 0){
       let result = splitByWeek(res.data, params.startDate, params.endDate);
@@ -51,7 +65,9 @@ onMounted(() => {
       }
     }
   })
-});
+}
+
+eventBus.on("chart:updateOption",updateData)
 
 function splitByWeek(items, startDate, endDate) {
   // 将开始时间和结束时间转换为时间戳

src/views/home/album_compoents/albumCarouselItem.vue

@@ -5,12 +5,18 @@
       <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  :farmId="farmId" :photo="photo" :current="currentIndex" :index="index" :length="images.length"
           ></album-draw-box>
         </template>
       </photo-provider>
     </div>
-
+    <div class="blur-bg" v-if="lock && currentIndex !== 0">
+      <div class="blur-content">
+        <div class="blur-img">
+          <img src="@/assets/img/gallery/camera-icon.png" />
+        </div>
+      </div>
+    </div>
 
     <!-- 左右箭头 -->
     <div @click.stop="prev" v-if="currentIndex !== 0" class="arrow left-arrow">
@@ -34,6 +40,14 @@ const props =defineProps({
   images:{
     type: Array,
     required: true
+  },
+  farmId:{
+    type: [Number,String],
+    required: true
+  },
+  lock:{
+    type: Boolean,
+    default: true
   }
 })
 const {images} = toRefs(props);
@@ -108,8 +122,8 @@ const clearAndRestartTimer = () => {
 @import "src/styles/index";
 .carousel-container {
   position: relative;
-  width: 800px;
-  height: 600px;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   margin: 0 auto;
   .carousel-wrapper {

src/views/home/album_compoents/albumDrawBox.vue

@@ -3,7 +3,7 @@
       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%;" />
+    <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event)" 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>
@@ -20,11 +20,16 @@ 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 resize = "?x-oss-process=image/resize,p_30/format,webp/quality,q_40";
+
 const canvasRef = ref(null);
 const watermark = ref(null)
 
 const props = defineProps({
+  farmId:{
+    type: [Number,String],
+    required: true
+  },
   photo:{
     type: Object,
     required: true
@@ -42,24 +47,35 @@ const props = defineProps({
     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 img = null;
+function drawWatermark(event) {
+  img = event.target
+  if(!watermark.value){
+    let param = {farmId:props.farmId, date: props.photo.uploadDate}
+    let weather = null
+    VE_API.miniimage.getByFarmIdAndDate(param).then((res)=>{
+      if(res.code === 0){
+        weather = res.data
+        drawWatermark2(img,weather)
+      }else{
+        drawWatermark2(img,null)
+      }
+    })
   }
 }
 
+function drawWatermark2(img,weather) {
+  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, weather)
+  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,
@@ -70,7 +86,22 @@ let data = {year:props.photo.uploadDate.substring(0,4),
   shotCode:props.photo.shotCode
 }
 // console.log(data)
-const drawBottom = (ctx, imgWidth, imgHeight) => {
+const drawBottom = (ctx, imgWidth, imgHeight, weather) => {
+  if(weather){
+    data["temp"] = weather.tempMin+"°C"
+    let fushe = "光照优"
+    if(weather.uvIndex > 5){
+      fushe = "辐射过高"
+    }else if(weather.uvIndex < 1){
+      fushe = "光照差"
+    }
+    data["fushe"] = fushe
+    let shidu = "湿度适宜"
+    if(weather.humidity < 10){
+      shidu = "干旱缺水"
+    }
+    data["shidu"] = shidu
+  }
   // 设置遮罩的高度为imgHeight的1/6
   const maskHeight = imgHeight / 4;