feat[src/views/index.vue]:【智能孢子仪】新增了红框标记孢子的功能（在“template”中“表格模式”相关区域新增了判断，"style"新增了相关样式） chore[git]:移除了对“dist”的Git跟踪

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%;