fix: 绘制水印

src/components/album_compoents/albumDrawBox.vue

@@ -6,10 +6,10 @@
     <img
       v-if="Math.abs(current - index) < 3"
       crossorigin="anonymous"
-      @load="drawWatermark($event)"
       loading="lazy"
+      @load="drawWatermark($event)"
       :src="watermark || (base_img_url2 + (photo.resFilename ? photo.resFilename : photo.filename) + resize)"
-      style="width: 100%; height: auto; display: block;"
+      style="width: 100%; height: 255px; object-fit: cover; display: block;"
     />
     <canvas
       ref="canvasRef"
@@ -113,52 +113,49 @@ function drawWatermark2(img,weather) {
   ctx.scale(scale, scale)
   ctx.drawImage(img, 0, 0, img.width, img.height);
   drawBottom(img.width, img.height, weather)
-  watermark.value = canvas.toDataURL();
+  // watermark.value = canvas.toDataURL();
 }
 
 
 // console.log(data)
 const drawBottom = (imgWidth, imgHeight, weather) => {
-  if (weather) {
-    data["temp"] = weather.tempMin + "°C" + "-" + weather.tempMax + "°C" + " " + weather.tempSuitability
-    data["fushe"] = "光照"+weather.vindexSuitability
-    data["shidu"] = "湿度"+weather.humiditySuitability
-  }
   // 设置文本样式
-  ctx.font = "8px Arial";
+  ctx.font = "10px Arial";
   ctx.textAlign = "left"; // 设置为左对齐
-  let imgRect = { x: 0, y: 0, width: imgWidth, height: imgHeight}
-  // 绘制头部黑色半透明遮罩
-  let topRect = drawRectInRect(ctx,imgRect, 0, 0, 70, 10,"rgba(0, 0, 0, 0.6)")
-  // 绘制黑色半透明遮罩
-  let bottomRect = drawRectInRect(ctx,imgRect, 0, 5/6 * 100, 100, 1/6 * 100,"rgba(0, 0, 0, 0.6)")
+  const imgRect = { x: 0, y: 0, width: imgWidth, height: imgHeight };
 
-  drawHorizontalTextList(ctx, topRect, '#ffffff90',[data.treeCode, "蓬径:5m", "高度:3m", "高产树",data.pingzhong],
-      40, 0,
-      65 , 0,"|",0,
-      30,"#ffffff50",1,2)
-  ctx.fillStyle = "white"; // 文本颜色为白色
-  // 绘制温度
-  let startXPercent = 1;
-  // drawImageInRect(ctx, bottomRect, data.tempImg, startXPercent, 5+10, 5, 30)
-  drawTextInRect(ctx, bottomRect,`${data.temp}`,startXPercent + 4, 28+10, 20)
-  // 绘制湿度
-  // drawImageInRect(ctx, bottomRect, data.shiduImg, startXPercent+26, 7 + 10, 4, 30)
-  drawTextInRect(ctx, bottomRect,`${data.shidu}`,startXPercent + 31, 28 + 10, 20)
-  // 绘制辐射
-  // drawImageInRect(ctx, bottomRect, data.fusheImg, startXPercent+26 + 18, 7 + 10, 5, 30)
-  drawTextInRect(ctx, bottomRect,`${data.fushe}`,startXPercent+31 + 18, 28 + 10, 20)
-  //绘制日期信息
-  ctx.fillStyle = "#FFFFFF";
-  drawTextInRect(ctx, bottomRect,`${formatDate(new Date(data.uploadDate))}`,startXPercent +1.7, 75, 24)
-  //绘制位置信息
-  ctx.fillStyle = "#FFFFFF90";
-  drawTextInRect(ctx, bottomRect,`${data.treeCode}_S3_SCS3-3_D0P0G1`,startXPercent +13, 75, 18)
+  // 绘制底部黑色半透明遮罩
+  const bottomRect = drawRectInRect(
+    ctx,
+    imgRect,
+    0,
+    (7 / 9) * 100,
+    100,
+    (2 / 9) * 100,
+    "rgba(0, 0, 0, 0.6)"
+  );
 
-  // if(data.baseMap){
-  //   drawBorderImageInRect(ctx, imgRect, data.baseMap, 2/3*100, 2/3*100,
-  //       1/3*100, 1/3*100, 5, 5)
-  // }
+  ctx.fillStyle = "#FFFFFF"; // 文本颜色为白色
+  const startXPercent = 2;
+
+  // 第一行：日期 + 执行人
+  const line1 = "2025.12.03";
+  drawTextInRect(ctx, bottomRect, line1, startXPercent, 30, 22);
+  drawTextInRect(ctx, bottomRect,'执行人：张三，李四',startXPercent + 22, 30, 22)
+
+  // 第二行：农事名称 + 药物处方
+  const line2 = "梢期杀虫";
+  // 使用 PangMenZhengDao 字体绘制农事名称
+  ctx.font = "12px PangMenZhengDao";
+  drawTextInRect(ctx, bottomRect, line2, startXPercent, 60, 22);
+  // 还原为默认字体，用于后续文字
+  ctx.font = "10px Arial";
+  drawTextInRect(ctx, bottomRect, '药物处方：乙烯利乙烯利', startXPercent+22, 60, 22);
+
+  // 第三行：地址
+  const line3 = "荔博园(广东省广州市从化区)";
+  drawImageInRect(ctx, bottomRect, imageCache.get("address"), startXPercent, 68, 3, 22)
+  drawTextInRect(ctx, bottomRect, line3, startXPercent+4, 90, 22);
 }
 
 

src/components/album_compoents/cacheImg.js

@@ -2,7 +2,6 @@
 const imageCache = new Map();
 
 function loadImage(url, key) {
-    console.log('loadImage',url,key)
     if (!url) {
         return Promise.reject('图片地址不能为空');
     }
@@ -57,6 +56,14 @@ loadImage(require('@/assets/watermark/shidu.png'), 'shidu')
     .catch((error) => {
         console.error('图片加载失败', error);
     });
+loadImage(require('@/assets/watermark/address.png'), 'address')
+    .then((img) => {
+        // 在这里使用加载完成的图片
+        // console.log('图片加载成功', img);
+    })
+    .catch((error) => {
+        console.error('图片加载失败', error);
+    });
 loadImage(require('@/assets/watermark/temp.png'), 'temp')
     .then((img) => {
         // 在这里使用加载完成的图片

src/views/old_mini/achievement_report/index.vue

@@ -82,8 +82,8 @@ const executeViewImage = ref([
   "blueZoneId": null,
   "district": "东莞市",
 //   "filename": "birdseye-look-mini/91429/1763371316207.jpg",
-  "filename": "birdseye-look-mini/91429/1763461501781.png",
-//   "filename": "3f27e127-6497-4175-8efb-ba18d703852b/b1f6d99e-826d-4468-a6dd-83f9e7a12ea3/DJI_202512131000_001_b1f6d99e-826d-4468-a6dd-83f9e7a12ea3/DJI_20251213100724_0070_V_code-ws0fsmghvf91.jpeg",
+//   "filename": "birdseye-look-mini/91429/1763461501781.png",
+  "filename": "3f27e127-6497-4175-8efb-ba18d703852b/b1f6d99e-826d-4468-a6dd-83f9e7a12ea3/DJI_202512131000_001_b1f6d99e-826d-4468-a6dd-83f9e7a12ea3/DJI_20251213100724_0070_V_code-ws0fsmghvf91.jpeg",
   "fosterCode": "LCGW-DGJH-GLY0253",
   "gardenId": null,
   "gardenName": "莞荔园",
@@ -235,6 +235,9 @@ const executeViewImage2 = ref(["birdseye-look-mini/91754/1763373487891.png"]);
         .report-box + .report-box {
             margin-top: 20px;
         }
+        .report-excute {
+            margin-top: 12px;
+        }
     }
 }
 </style>

src/views/old_mini/modify_work/completedWork.vue

@@ -319,10 +319,10 @@
 
 
             <!-- 农资，步骤：农事已确认 -->
-            <div class="fixed-btn-wrap" v-if="curRole == 2 && currentStep == 2">
+            <!-- <div class="fixed-btn-wrap" v-if="curRole == 2 && currentStep == 2">
                 <div class="fixed-btn second" @click="showPriceSheetPopup">生成报价单</div>
                 <div class="fixed-btn" @click="handleTimelineAction(detailData)">转入农事任务</div>
-            </div>
+            </div> -->
         </div>
     </div>
     <!-- 报价弹窗 -->