feat: 微调图片展示

src/views/dataView/components/Type1ObjectDetect.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-06-12 10:26:59
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-06-13 13:38:24
+ * @LastEditTime: 2025-06-13 14:17:19
  * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type1ObjectDetect.vue
  * @Description: 目标检测
 -->
@@ -26,24 +26,31 @@
             controls
           ></video>
         </div>
-        <div class="type-first-mid-box-text" v-if="title === '酒精度数'">
+        <div
+          class="type-first-mid-box-text max-h-[140px] overflow-auto"
+          v-if="title === '酒精度数'"
+        >
           <span>酒精度数：</span>
-          <span style="font-weight: normal">{{ item["酒精度数"] }}mg/100ml</span>
+          <span style="font-weight: normal"
+            >{{ item["酒精度数"] }}mg/100ml</span
+          >
         </div>
         <div class="type-first-mid-box-text" v-else-if="title === '语音角色'">
           <span>语音角色：</span>
+          <div class="max-h-[120px] overflow-auto">
             <p v-for="(v, k) in item['语音角色']" :key="k">
-            <span>角色{{Number( k ) + 1}}：</span>
-            <span style="font-weight: normal">{{ transformKeyframes(v) }}</span>
+              <span>角色{{ Number(k) + 1 }}：</span>
+              <span style="font-weight: normal">{{
+                transformKeyframes(v)
+              }}</span>
             </p>
-          <!-- <span style="font-weight: normal">{{ item["语音角色"] }}</span> -->
           </div>
-        <div class="type-first-mid-box-text" v-else>
+        </div>
+        <div class="type-first-mid-box-text max-h-[140px] overflow-auto" v-else>
           <span>关键帧：</span>
-          <span
-            style="font-weight: normal"
-            >{{ transformKeyframes(item[`${title}时间`]) }}</span
-          >
+          <span style="font-weight: normal">{{
+            transformKeyframes(item[`${title}时间`])
+          }}</span>
         </div>
       </div>
     </div>
@@ -86,12 +93,12 @@ function changePage({ page, pageSize }) {
 }
 function transformKeyframes(data) {
   // 直接遍历数组
-  const result = data.map(item => {
+  const result = data.map((item) => {
     // 假设每个 item 是 [开始时间, 结束时间] 的数组
     if (Array.isArray(item) && item.length === 2) {
       return `${item[0]}-${item[1]}`;
     }
-    return ''; // 处理异常情况
+    return ""; // 处理异常情况
   });
 
   // 过滤空值并拼接成字符串

src/views/dataView/components/Type2LicensePlateRecog.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-06-12 10:27:06
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-06-13 13:27:46
+ * @LastEditTime: 2025-06-13 14:07:24
  * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type2LicensePlateRecog.vue
  * @Description: 车牌识别 人脸检测
 -->
@@ -30,8 +30,8 @@
             )"
             :key="index"
           >
-            <div class="type-second-mid-crad-image">
-              <img :src="item['车牌图片']" class="w-[100%] h-[100%]" />
+            <div class="type-second-mid-crad-image max-w-[100%] overflow-hidden">
+              <img :src="item['车牌图片']" class="h-[100%]" />
             </div>
             <div class="type-second-mid-crad-text text_color_6">
               <p>
@@ -48,16 +48,21 @@
         </template>
         <template v-else>
           <li
-            class="type-second-mid-crad face-Recog-box"
+            class="type-second-mid-crad"
             v-for="(item, index) in currentInfoList.slice(
               (pagination.page - 1) * pagination.pageSize,
               pagination.page * pagination.pageSize
             )"
             :key="index"
           >
-            <div class="flex items-center justify-center type-second-mid-crad-image type-second-mid-crad-image-face-Recog">
+            <div class="flex items-center justify-center type-second-mid-crad-image max-w-[100%] overflow-hidden">
               <img :src="item['人脸图片']" class="h-[100%]"  />
             </div>
+            <div class="type-second-mid-crad-text text_color_6">
+              <p>
+                <span>人脸{{ item.faceNO }}</span>
+              </p>
+            </div>
           </li>
         </template>
       </ul>
@@ -98,6 +103,7 @@ const objectRegTypeMap = {
   '黄': "#E3A108",
   "蓝": "#3B64AC",
   "绿": "#2BC284",
+  "白": "#1d2129",
 }
 const pagination = ref({ page: 1, pageSize: 8 });
 const currentIndex = ref<number>(0); // 当前视频索引
@@ -121,6 +127,7 @@ function convertFRArrToObjects() {
   for (let i = 0; i < currentInfo.value?.["人脸图片"].length; i++) {
     result.push({
       ["人脸图片"]: currentInfo.value?.["人脸图片"][i],
+      faceNO: (Number(i) + 1 < 10 ?  "0" : "") + (Number(i) + 1),
     });
   }
   return result;
@@ -246,9 +253,7 @@ watch(
             border-radius: 4px 4px 0 0;
           }
         }
-        .type-second-mid-crad-image-face-Recog{
-          height: 232px;
-        }
+      
         .type-second-mid-crad-text {
           box-sizing: border-box;
           width: 100%;

src/views/dataView/components/Type3TargetRecog.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-06-12 10:37:10
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-06-13 13:13:42
+ * @LastEditTime: 2025-06-13 14:13:16
  * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type4AudioDetection.vue
  * @Description: 递烟
 -->
@@ -50,8 +50,8 @@
           )"
           :key="index"
         >
-          <div class="type-fourth-mid-crad-image">
-            <img :src="item['图片']" class="w-[100%] h-[100%]" />
+          <div class="flex items-center justify-center type-fourth-mid-crad-image max-w-[100%] overflow-hidden">
+            <img :src="item['图片']" class="h-[100%]" />
           </div>
           <div class="type-fourth-mid-crad-text">
             <span style="color: #666">检测类型:</span> {{ item["检测类型"] }}