fix(bzy, scd, cbd): 修复分页跳转逻辑并优化设备图片识别展示

1. 修正bzy和scd页面的上下页页码计算逻辑
2. 重构cbd设备图片页面的识别结果展示，新增is_mark区分标注模式
3. 调整接口调用顺序，添加异步等待逻辑
4. 优化害虫数据分组和标记绘制逻辑，适配两种不同的识别数据格式

pages/bzy/detail.vue

@@ -264,14 +264,14 @@ export default {
       if(e == 1){
         return
       }
-      this.page = e;
+      this.page = e-=1;
       this.getDeviceHistoryData();
     },
     nextPage(e){
       if(e * this.page_size >= this.totalPage){
         return
       }
-      this.page = e;
+      this.page = e+=1;
       this.getDeviceHistoryData();
     },
     changeTab(pestList){

pages/cbd/devicePhoto.vue

@@ -95,17 +95,30 @@
     <view class="recognition-result" v-if="pestList.length">
       <view class="result-title">当前图片识别结果</view>
       <!-- 一类害虫 -->
-      <view class="pest-category" v-for="(pest,index) in pestList" :key="index">
-        <view class="category-header">
-          <text class="category-title">{{ pest[0] }}</text>
-          <text class="category-count">数量</text>
+      <view v-if="is_mark == 0">
+        <view class="pest-category" v-for="(pest,index) in pestList" :key="index">
+          <view class="category-header">
+            <text class="category-title">{{ pest[0] }}</text>
+            <text class="category-count">数量</text>
+          </view>
+          <view class="pest-item" v-for="(p, i) in pest[1]" :key="i">
+            <view class="pest-info">
+              <view class="pest-color" :style="{ backgroundColor: getPestColor(p.pest_name) }"></view>
+              <text class="pest-name">{{ p.pest_name }}</text>
+            </view>
+            <text class="pest-count">{{ p.pest_num }}</text>
+          </view>
         </view>
-        <view class="pest-item" v-for="(p, i) in pest[1]" :key="i">
-          <view class="pest-info">
-            <view class="pest-color" :style="{ backgroundColor: getPestColor(p.pest_name) }"></view>
-            <text class="pest-name">{{ p.pest_name }}</text>
+      </view>
+      <view v-else>
+        <view class="pest-category" v-for="(pest,index) in pestList" :key="index">
+          <view class="pest-item">
+            <view class="pest-info">
+              <view class="pest-color" :style="{ backgroundColor: getPestColor(pest[1].text) }"></view>
+              <text class="pest-name">{{ pest[1].text }}</text>
+            </view>
+            <text class="pest-count">{{ pest[1].value }}</text>
           </view>
-          <text class="pest-count">{{ p.pest_num }}</text>
         </view>
       </view>
     </view>
@@ -138,6 +151,7 @@ export default {
       title: '查看图片',
       currentThumbnail: 2,
       pestYype:{},
+      is_mark:0,
       device_id: '',
       time_begin: this.formatTime(new Date(new Date().getFullYear(), 0, 1)),
       time_end: this.formatTime(new Date()),
@@ -190,13 +204,16 @@ export default {
     }
     this.pestList = [];
     await this.getPestDict();
-    this.getPestLevelMap();
-    this.getPestList();
+    await this.getPestLevelMap();
+    await this.getPestList();
     // this.getDevicePhotoDetails();
   },
   methods: {
     getPestName(id){
-      return this.pestDict[id] || id;
+      if(this.is_mark == 0){
+        return this.pestDict[id] || id;
+      }
+      return id;
     },
     async confirmHandler(e){
       this.currentYear = this.selectorRange[e].id;
@@ -209,8 +226,8 @@ export default {
         this.time_begin = this.formatTime(new Date(this.currentYear, 0, 1));
         this.time_end = this.formatTime(new Date(this.currentYear, 11, 31));
         this.maxDate = this.formatTime(new Date(this.currentYear, 11, 31));
-      this.minDate = this.formatTime(new Date(this.currentYear, 0, 1));
-      this.defaultDate = this.minDate;
+        this.minDate = this.formatTime(new Date(this.currentYear, 0, 1));
+        this.defaultDate = this.minDate;
       }
       this.showPicker = false;
       this.pestList = [];
@@ -364,13 +381,20 @@ export default {
       }
       pest_list.forEach(item => {
         if(!pesAlltList.includes(item.pest_name)){
-          pestArr.get('其他害虫').push(item)
+          if(pestArr.has('其他害虫')){
+            pestArr.get('其他害虫').push(item)
+          }else{
+            pestArr.set('其他害虫', [item])
+          }
         }
       })
       const pestList = []
       for(let key of pestArr){
         pestList.push(key)
       }
+      if (this.currentImg.is_mark != 0) {
+        this.processBugMarkers();
+      }
       this.pestList = pestList
     },
     onImageLoad(e) {
@@ -391,66 +415,120 @@ export default {
     },
     
     processBugMarkers() {
-      console.log('开始处理label参数:', this.currentImg.label);
-      if (!this.currentImg.label) {
-        console.log('没有label参数');
-        this.bugMarkers = [];
-        return;
-      }
+      if (this.currentImg.is_mark === 0) {
+        if (!this.currentImg.label) {
+          console.log('没有label参数');
+          this.bugMarkers = [];
+          return;
+        }
 
-      // 如果没有图片尺寸，先设置默认值
-      if (!this.imageWidth || !this.imageHeight) {
-        console.log('没有图片尺寸，使用默认值');
-        this.imageWidth = 1000;
-        this.imageHeight = 1000;
-      }
+        // 如果没有图片尺寸，先设置默认值
+        if (!this.imageWidth || !this.imageHeight) {
+          console.log('没有图片尺寸，使用默认值');
+          this.imageWidth = 1000;
+          this.imageHeight = 1000;
+        }
 
-      try {
-        // 处理label参数，将单引号替换为双引号
-        let labelStr = this.currentImg.label;
-        labelStr = labelStr.replace(/'/g, '"');
-        const label = JSON.parse(labelStr);
+        try {
+          // 根据原图宽度计算缩放比例
+          let scaleRatio;
+          if (this.imageWidth >= 5000) {
+            scaleRatio = 1;
+          } else if (this.imageWidth >= 4000) {
+            scaleRatio = 1;
+          } else {
+            scaleRatio = 1;
+          }
+          // 处理label参数，将单引号替换为双引号
+          let labelStr = this.currentImg.label;
+          labelStr = labelStr.replace(/'/g, '"');
+          console.log(labelStr,'labelStrlabelStr')
+          const label = JSON.parse(labelStr);
+          const markers = [];
+
+          console.log('原图宽度:', this.imageWidth, '缩放比例:', scaleRatio);
+
+          label.forEach(item => {
+            for (let key in item) {
+              const [x1, y1, x2, y2] = item[key];
+              // 使用缩放比例计算标记位置和尺寸
+              const x = (x1 * scaleRatio / this.imageWidth) * 100;
+              const y = (y1 * scaleRatio / this.imageHeight) * 100;
+              const width = ((x2 - x1) * scaleRatio / this.imageWidth) * 100;
+              const height = ((y2 - y1) * scaleRatio / this.imageHeight) * 100;
+
+              // 从字典中获取虫子名字（尝试字符串和数字两种类型）
+              const pestName = this.pestDict[key] || this.pestDict[String(key)] || key;
+              const color = this.getPestColor(pestName);
+
+              markers.push({
+                id: pestName, // 显示虫子名字
+                x,
+                y,
+                width,
+                height,
+                color
+              });
+            }
+          });
+          console.log(markers,'markersmarkers')
+          this.bugMarkers = markers;
+        } catch (error) {
+          console.error('处理label参数失败:', error);
+          this.bugMarkers = [];
+        }
+      } else {
+        this.pestList = [];
         const markers = [];
-
         // 根据原图宽度计算缩放比例
-        let scaleRatio;
-        if (this.imageWidth >= 5000) {
-          scaleRatio = 1;
-        } else if (this.imageWidth >= 4000) {
-          scaleRatio = 1;
-        } else {
-          scaleRatio = 1;
-        }
-        console.log('原图宽度:', this.imageWidth, '缩放比例:', scaleRatio);
-
-        label.forEach(item => {
-          for (let key in item) {
-            const [x1, y1, x2, y2] = item[key];
-            // 使用缩放比例计算标记位置和尺寸
-            const x = (x1 * scaleRatio / this.imageWidth) * 100;
-            const y = (y1 * scaleRatio / this.imageHeight) * 100;
-            const width = ((x2 - x1) * scaleRatio / this.imageWidth) * 100;
-            const height = ((y2 - y1) * scaleRatio / this.imageHeight) * 100;
-
-            // 从字典中获取虫子名字（尝试字符串和数字两种类型）
-            const pestName = this.pestDict[key] || this.pestDict[String(key)] || key;
-            const color = this.getPestColor(pestName);
-
-            markers.push({
-              id: pestName, // 显示虫子名字
-              x,
-              y,
-              width,
-              height,
-              color
-            });
+        let scaleRatio = 4;
+        // if (this.imageWidth >= 5000) {
+        //   scaleRatio = 4;
+        // } else if (this.imageWidth >= 4000) {
+        //   scaleRatio = 1;
+        // } else {
+        //   scaleRatio = 2.5;
+        // }
+        const pestArr = new Map()
+        this.currentImg.mark.map((item, index) => {
+          if(pestArr.has(item.text)){
+            pestArr.set(item.text,{
+              value: pestArr.get(item.text).value+=1,
+              text: item.text
+            })
+          }else{
+            pestArr.set(item.text, {
+              value: 1,
+              text: item.text
+            })
+          }
+          const pestList = []
+          for(let key of pestArr){
+            pestList.push(key)
           }
+          this.pestList = pestList
+          this.is_mark = 1
+          const { startX, startY,text } = item;
+          // 使用缩放比例计算标记位置和尺寸
+          const x = (startX * scaleRatio / this.imageWidth) * 100;
+          const y = (startY * scaleRatio / this.imageHeight) * 100;
+          const width = (item.width * scaleRatio / this.imageWidth) * 100;
+          const height = (item.height * scaleRatio / this.imageHeight) * 100;
+
+          // 从字典中获取虫子名字（尝试字符串和数字两种类型）
+          const pestName = text;
+          const color = this.getPestColor(text);
+
+          markers.push({
+            id: pestName, // 显示虫子名字
+            x,
+            y,
+            width,
+            height,
+            color
+          });
         });
-
         this.bugMarkers = markers;
-      } catch (error) {
-        console.error('处理label参数失败:', error);
-        this.bugMarkers = [];
       }
     },
     handleBack() {

pages/scd/detail.vue

@@ -268,14 +268,14 @@ export default {
       if(e == 1){
         return
       }
-      this.page = e;
+      this.page = e-=1;
       this.getDeviceHistoryData();
     },
     nextPage(e){
       if(e * this.page_size >= this.totalPage){
         return
       }
-      this.page = e;
+      this.page = e+=1;
       this.getDeviceHistoryData();
     },
     changeTab(pestList){