fix: 果园档案

src/views/home/album_compoents/albumCarousel.vue

@@ -1,7 +1,7 @@
 <template>
     <el-dialog
         v-model="dialogVisible"
-        width="60%"
+        width="65%"
         align-center
         class="picture-preview-wrap v-dialog"
         :show-close="false"
@@ -35,16 +35,51 @@
                             <div class="value">{{ item.value }}</div>
                         </div>
                     </div> -->
+                    <div class="box-form">
+                        <el-form
+                            ref="ruleFormRef"
+                            :model="ruleForm"
+                            :rules="rules"
+                            label-position="left"
+                            label-width="78px"
+                        >
+                            <el-form-item label="品种" prop="pz">
+                                <el-input v-model="ruleForm.pz" placeholder="请输入品种" style="width: 240px;" />
+                            </el-form-item>
+                            <el-form-item label="树龄" prop="age">
+                                <el-input-number
+                                    class="number-input"
+                                    :controls="false"
+                                    placeholder="请输入树龄"
+                                    v-model="ruleForm.age"
+                                    :min="0"
+                                    style="width: 240px;"
+                                />
+                            </el-form-item>
+                            <el-form-item label="栽种时间" prop="time">
+                                <el-date-picker
+                                    v-model="ruleForm.time"
+                                    type="date"
+                                    format="YYYY.MM.DD"
+                                    style="width: 240px;"
+                                    value-format="YYYY.MM.DD"
+                                    placeholder="请选择栽种时间"
+                                />
+                            </el-form-item>
+                            <el-form-item label="守护人" prop="user">
+                                <el-select v-model="ruleForm.user" style="width: 240px;" placeholder="请选择守护人">
+                                    <el-option label="张三" value="张三" />
+                                    <el-option label="张四" value="张四" />
+                                </el-select>
+                            </el-form-item>
+                        </el-form>
+                    </div>
                 </div>
 
                 <div class="overview-file">
                     <div class="box-title">产量详情</div>
                     <div class="box-wrap">
-                        <div
-                            class="box-item"
-                            v-for="(item, index) in outputBox"
-                            :key="index"
-                        >
+                        <div class="box-item" v-for="(item, index) in outputBox" :key="index">
                             <div class="item-name">{{ item.name }}</div>
                             <div class="item-val">{{ item.value }}</div>
                         </div>
@@ -54,23 +89,25 @@
                 <div class="overview-file">
                     <div class="box-title">质量详情</div>
                     <div class="box-wrap">
-                        <div
-                            class="box-item"
-                            v-for="(item, index) in qualityBox"
-                            :key="index"
-                        >
+                        <div class="box-item" v-for="(item, index) in qualityBox" :key="index">
                             <div class="item-name">{{ item.name }}</div>
                             <div class="item-val">{{ item.value }}</div>
                         </div>
                     </div>
                 </div>
+
+                
+                <div class="btn-group">
+                    <div class="btn cancel-btn" @click="saveEdit(0)">取消</div>
+                    <div class="btn edit-btn" @click="saveEdit(1)">确认修改</div>
+                </div>
             </div>
         </div>
     </el-dialog>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, onActivated } from "vue";
+import { ref, computed, onMounted, reactive, onActivated } from "vue";
 import "./cacheImg.js";
 import AlbumCarouselItem from "./albumCarouselItem";
 import { dateFormat } from "@/utils/date_util.js";
@@ -182,16 +219,50 @@ const photoBaseData = ref([
     },
 ]);
 
-
 const activeOuput = ref(null);
 
-
 function closeDialog() {
     activeOuput.value = null;
     eventBus.emit("change:watermark", "");
     eventBus.emit("resetImgIndex");
+    ruleFormRef.value.resetFields()
 }
 
+// 修改档案信息
+
+const ruleFormRef = ref();
+const ruleForm = reactive({
+    pz: "",
+    age: null,
+    time: "",
+    user: "",
+});
+
+const rules = reactive({
+    pz: [{ required: true, message: "请输入品种", trigger: "blur" }],
+    age: [{ required: true, message: "请输入树龄", trigger: "blur" }],
+    time: [
+        {
+            type: "date",
+            required: true,
+            message: "请选择栽种时间",
+            trigger: "change",
+        },
+    ],
+});
+
+async function saveEdit(isToSave) {
+    if (isToSave) {
+        // 保存
+        await ruleFormRef.value.validate((valid, fields) => {
+            if (valid) {
+                console.log('submit!')
+            } else {
+                console.log('error submit!', fields)
+            }
+        })
+    }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -208,12 +279,12 @@ function closeDialog() {
         padding: 12px;
         .file-title {
             font-size: 20px;
-            color: #2199F8;
+            color: #2199f8;
             display: flex;
             align-items: center;
 
             .tag {
-                border: 1px solid #2199F8;
+                border: 1px solid #2199f8;
                 border-radius: 4px;
                 font-size: 12px;
                 display: inline-block;
@@ -239,11 +310,11 @@ function closeDialog() {
                     content: "";
                     position: absolute;
                     left: 0;
-                    top: 3px;
+                    top: 5px;
                     width: 3px;
                     height: 16px;
                     background: #000000;
-                    border-radius: 11px;
+                    border-radius: 2px;
                 }
             }
             .title {
@@ -302,6 +373,42 @@ function closeDialog() {
                     }
                 }
             }
+            .box-form {
+                ::v-deep {
+                    .el-input-number .el-input__inner {
+                        text-align: left;
+                    }
+                }
+            }
+        }
+        .btn-group {
+            margin-top: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: end;
+            width: 100%;
+            padding: 10px 12px 0 12px;
+            border-top: 1px solid rgba(0, 0, 0, 0.2);
+            box-sizing: border-box;
+            border-radius: 0 0 8px 8px;
+            .btn {
+                cursor: pointer;
+                padding: 10px 20px;
+                font-size: 14px;
+                border-radius: 4px;
+                color: #2199F8;
+            }
+            .cancel-btn {
+                color: #000000;
+                background: rgba(206, 206, 206, 0.4);
+            }
+            .edit-btn {
+                background: #2199F8;
+                color: #FFFFFF;
+            }
+            .btn + .btn {
+                margin-left: 12px;
+            }
         }
         .overview-file + .overview-file {
             margin-top: 8px;

src/views/home/album_compoents/albumDrawBox.vue

@@ -72,7 +72,7 @@ let data = {year:props.photo.uploadDate.substring(0,4),
 
 async function drawWatermark(event,name) {
   if(!name){
-    // drawWatermark1(event)
+    drawWatermark1(event)
   }else{
     // drawTargetRectangles2(event.target,props.photo.watermarks.find(item=>item.name === name))
   }
@@ -92,8 +92,8 @@ function drawTargetRectangles2(img, obj) {
 
 async function drawWatermark1(event) {
   img = event.target
-  await loadImage(props.photo.baseMap,"base_map_"+props.photo.treeId)
-  data.baseMap = imageCache.get("base_map_"+props.photo.treeId)
+  // 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
@@ -161,7 +161,7 @@ const drawBottom = (imgWidth, imgHeight, weather) => {
   ctx.fillStyle = "#FFFFFF90";
   drawTextInRect(ctx, bottomRect,`${data.treeCode}_S3_SCS3-3_D0P0G1`,startXPercent +13, 75, 18)
 
-  if(data.baseMap){
+  if(data?.baseMap){
     drawBorderImageInRect(ctx, imgRect, data.baseMap, 2/3*100, 2/3*100,
         1/3*100, 1/3*100, 5, 5)
   }