|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<photo-consumer
|
|
|
class="carousel-item"
|
|
|
- :src="watermark || base_img_url2 + photo.filename + resize"
|
|
|
+ :src="watermark || base_img_url2 + (photo.resFilename ? photo.resFilename : photo.filename) + resize"
|
|
|
>
|
|
|
<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>
|
|
|
@@ -18,12 +18,15 @@
|
|
|
<script setup>
|
|
|
import { ref, onMounted, onBeforeUnmount, defineProps } from "vue";
|
|
|
import { base_img_url2 } from "@/api/config";
|
|
|
-import {imageCache} from "./cacheImg.js"
|
|
|
+import {imageCache,loadImage} from "./cacheImg.js"
|
|
|
import {dateFormat} from "@/utils/date_util.js"
|
|
|
-const resize = "?x-oss-process=image/resize,p_80/format,webp/quality,q_40";
|
|
|
+import {pointToFormat} from "@/utils/util.js"
|
|
|
+import {drawTextInRect, drawBorderImageInRect, drawImageInRect, drawRectInRect, drawHorizontalTextList} from "./utils"
|
|
|
+const resize = "?x-oss-process=image/resize,p_30/format,webp/quality,q_40";
|
|
|
|
|
|
const canvasRef = ref(null);
|
|
|
const watermark = ref(null)
|
|
|
+const baseMapBig = ref(false)
|
|
|
|
|
|
const props = defineProps({
|
|
|
farmId:{
|
|
|
@@ -48,12 +51,30 @@ const props = defineProps({
|
|
|
}
|
|
|
})
|
|
|
let img = null;
|
|
|
-function drawWatermark(event) {
|
|
|
+let ctx = null;
|
|
|
+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:"10°C-20°C",wendu:"适宜",
|
|
|
+ feiniao:imageCache.get("feiniao"),
|
|
|
+ baseMap:imageCache.get("base_map_"+props.photo.treeId),
|
|
|
+ fusheImg:imageCache.get("fushe"),fushe:"光照优",
|
|
|
+ shiduImg:imageCache.get("shidu"),shidu:"湿度适宜",
|
|
|
+ text:"病害风险，及时喷药",
|
|
|
+ shotCode:props.photo.shotCode,
|
|
|
+ treeCode:props.photo.treeCode,
|
|
|
+ pingzhong:props.photo.pingzhong,
|
|
|
+ uploadDate:props.photo.uploadDate,
|
|
|
+}
|
|
|
+
|
|
|
+async function drawWatermark(event) {
|
|
|
img = event.target
|
|
|
+ await loadImage(props.photo.baseMap,"base_map_"+props.photo.treeId)
|
|
|
+ data.baseMap = imageCache.get("base_map_"+props.photo.treeId)
|
|
|
if(!watermark.value){
|
|
|
let param = {farmId:props.farmId, date: props.photo.uploadDate}
|
|
|
let weather = null
|
|
|
- VE_API.miniimage.getByFarmIdAndDate(param).then((res)=>{
|
|
|
+ VE_API.image.findSuitabilityByPoint(param).then((res)=>{
|
|
|
if(res.code === 0){
|
|
|
weather = res.data
|
|
|
drawWatermark2(img,weather)
|
|
|
@@ -69,135 +90,55 @@ function drawWatermark2(img,weather) {
|
|
|
let scale = 3
|
|
|
canvas.width = img.width * scale;
|
|
|
canvas.height = img.height * scale;
|
|
|
- const ctx = canvas.getContext('2d');
|
|
|
+ ctx = canvas.getContext('2d');
|
|
|
ctx.scale(scale, scale)
|
|
|
ctx.drawImage(img, 0, 0, img.width, img.height);
|
|
|
- drawBottom(ctx, img.width, img.height, weather)
|
|
|
+ drawBottom(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,
|
|
|
- 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, 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
|
|
|
+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
|
|
|
}
|
|
|
- // 设置遮罩的高度为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 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)")
|
|
|
|
|
|
- // 从遮罩的底部开始绘制文本
|
|
|
- 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
|
|
|
+ drawHorizontalTextList(ctx, topRect, '#ffffff90',[data.treeCode, "蓬径:5m", "高度:3m", "高产树",data.pingzhong],
|
|
|
+ 40, 0,
|
|
|
+ 65 , 0,"|",0,
|
|
|
+ 30,"#ffffff50",1,2)
|
|
|
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);
|
|
|
-
|
|
|
+ let startXPercent = 1;
|
|
|
+ drawImageInRect(ctx, bottomRect, data.tempImg, startXPercent, 5+10, 5, 30)
|
|
|
+ drawTextInRect(ctx, bottomRect,`${data.temp}`,startXPercent + 4, 28+10, 20)
|
|
|
// 绘制湿度
|
|
|
- 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);
|
|
|
-
|
|
|
+ drawImageInRect(ctx, bottomRect, data.shiduImg, startXPercent+26, 7 + 10, 4, 30)
|
|
|
+ drawTextInRect(ctx, bottomRect,`${data.shidu}`,startXPercent + 31, 28 + 10, 20)
|
|
|
// 绘制辐射
|
|
|
- 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);
|
|
|
+ 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 = "#FFFFFF90";
|
|
|
+ drawTextInRect(ctx, bottomRect,`${formatDate(new Date(data.uploadDate))}_${data.treeCode}_S3_SCS3-3_D0P0G1`,startXPercent +1.7, 75, 16)
|
|
|
|
|
|
- // 绘制文本信息
|
|
|
- currentX =imgWidth - 40;
|
|
|
- currentY =imgHeight - 40;
|
|
|
- ctx.drawImage(data.feiniao, currentX, currentY, 25, 25);
|
|
|
- ctx.fillText(data.shotCode, currentX - 10, currentY + 35);
|
|
|
+ if(data.baseMap){
|
|
|
+ drawBorderImageInRect(ctx, imgRect, data.baseMap, 2/3*100, 2/3*100,
|
|
|
+ 1/3*100, 1/3*100, 5, 5)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-//绘制文字
|
|
|
-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) => {
|
|
|
@@ -205,6 +146,15 @@ const hideTagBox = (event) => {
|
|
|
showTagBox.value = false; // 隐藏 tag-box
|
|
|
};
|
|
|
|
|
|
+const formatDate = (date) => {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ return `${(year+"").substring(2)}${month}${day}`;
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
|
|
|
@@ -304,5 +254,24 @@ canvas {
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
+.floating-img {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ width: auto !important;
|
|
|
+ height: 25% !important;
|
|
|
+}
|
|
|
+.floating-img-big {
|
|
|
+ position: fixed !important;
|
|
|
+ z-index: 99999 !important;
|
|
|
+ top: 50% !important;
|
|
|
+ left: 50% !important;
|
|
|
+ width: auto !important;
|
|
|
+ height: 100% !important;
|
|
|
+ transform: translate(-50%, -50%) !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
</style>
|
wangsisi
