From df0f6784655a7b475213bff156cb13ae4c0f204a Mon Sep 17 00:00:00 2001
From: YangBin <fdybggys@163.com>
Date: Tue, 15 Oct 2024 09:59:42 +0800
Subject: [PATCH] =?UTF-8?q?feat[src/views/index.vue]:=E3=80=90=E6=99=BA?=
 =?UTF-8?q?=E8=83=BD=E5=AD=A2=E5=AD=90=E4=BB=AA=E3=80=91=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=BA=86=E7=BA=A2=E6=A1=86=E6=A0=87=E8=AE=B0=E5=AD=A2=E5=AD=90?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=88=E5=9C=A8=E2=80=9Ctemplate?=
 =?UTF-8?q?=E2=80=9D=E4=B8=AD=E2=80=9C=E8=A1=A8=E6=A0=BC=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E2=80=9D=E7=9B=B8=E5=85=B3=E5=8C=BA=E5=9F=9F=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=BA=86=E5=88=A4=E6=96=AD=EF=BC=8C"style"=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=BA=86=E7=9B=B8=E5=85=B3=E6=A0=B7=E5=BC=8F=EF=BC=89=20chore[?=
 =?UTF-8?q?git]:=E7=A7=BB=E9=99=A4=E4=BA=86=E5=AF=B9=E2=80=9Cdist=E2=80=9D?=
 =?UTF-8?q?=E7=9A=84Git=E8=B7=9F=E8=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 73 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index f0e2681..0def8ca 100755
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1580,7 +1580,11 @@
                           item, index
                         ) in scope.row.picturesMark2O1List.reduce(
                           (pre, cur) => {
-                            if (!pre.some(item => item.pestName === cur.pestName)) {
+                            if (
+                              !pre.some(
+                                (item) => item.pestName === cur.pestName
+                              )
+                            ) {
                               pre.push({
                                 pestName: cur.pestName,
                                 bhName: cur.bhName,
@@ -2326,6 +2330,7 @@
         width="35%"
         :before-close="handleClose"
         draggable
+        destroy-on-close
       >
         <div v-if="label3 !== '土壤墒情、土质'" class="rowContent">
           <div class="rowContentTop">
@@ -2422,7 +2427,7 @@
 
           <!-- 图像展示 -->
           <image-preview
-            v-if="label3 !== '土壤墒情、土质'"
+            v-if="label3 !== '土壤墒情、土质' && !(label3 == '智能孢子仪')"
             append-to-body
             :src="`${DetailArr.picturePath ? DetailArr.picturePath : ''}`"
             :zoom-rate="1.2"
@@ -2433,6 +2438,42 @@
               <i class="el-icon-picture-outline"></i>
             </div>
           </image-preview>
+
+          <!-- 智能孢子仪 红框标记 -->
+          <div
+            style="position: relative"
+            id="sporeImgBox"
+            v-if="label3 == '智能孢子仪'"
+          >
+            <div
+              v-for="(item, index) in DetailArr.picturesMark2O1List"
+              :key="index"
+              id="sporeImgMarkBox"
+              :style="{
+                position: 'absolute',
+                left: (item.x / imgSize.width) * 100 + '%',
+                top: (item.y / imgSize.height) * 100 + '%',
+                width: (item.width / imgSize.width) * 100 + '%',
+                height: (item.height / imgSize.height) * 100 + '%',
+                border: '2px solid red',
+                background: 'rgba(64,158,255,0.3)',
+                cursor: 'pointer',
+                zIndex: 999,
+              }"
+            ></div>
+            <image-preview
+              append-to-body
+              :src="`${DetailArr.picturePath ? DetailArr.picturePath : ''}`"
+              :zoom-rate="1"
+              style="width: 100%"
+              fit="cover"
+            >
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+              </div>
+            </image-preview>
+          </div>
+
           <image-preview
             v-if="label3 == '大田视频病害监测'"
             append-to-body
@@ -3063,6 +3104,9 @@ import { ElMessage } from "element-plus";
 import "@/assets/monitor/imouplayer.js";
 import Insect from "@/views/insect/insect.vue";
 
+// 2024 10 14
+let imgSize = reactive({ width: 0, height: 0 });
+
 // 标记 虫情监测仪 处理状态 弹框
 // 弹窗开关
 let chongQingState = ref(false);
@@ -4512,8 +4556,26 @@ const tabulationCurrentChange = (val) => {
 const onDetail = (row) => {
   DetailVisible.value = true;
   DetailArr.value = row;
+
+  console.log(row.picturePath, label3.value);
+
   if (label3.value == "虫情监测仪") {
     DetailArr["pestName"] = row.picturesMark2O1List[0].pestName;
+  } else if (label3.value == "智能孢子仪") {
+    const img = new Image();
+    img.src = row.picturePath;
+
+    console.log(row.picturePath);
+
+    img.onload = function () {
+      // 图片加载完成，获取图片的宽高
+      imgSize.width = img.naturalWidth;
+      imgSize.height = img.naturalHeight;
+    };
+
+    img.onerror = function () {
+      console.error("图片加载失败");
+    };
   }
 };
 
@@ -6590,6 +6652,13 @@ getList();
 <style lang="scss" scoped>
 $height: calc(100vh - 110px);
 
+//标记 2024 10 15
+#sporeImgBox:hover {
+  #sporeImgMarkBox {
+    display: none;
+  }
+}
+
 //查看详情 展示处理意见
 .clcqpjContentBox {
   width: 100%;