diff --git a/src/views/dataView/components/Type1ObjectDetect.vue b/src/views/dataView/components/Type1ObjectDetect.vue
index 5f8acaf..9d46db1 100644
--- a/src/views/dataView/components/Type1ObjectDetect.vue
+++ b/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: 目标检测
-->
@@ -14,9 +14,9 @@
<div
class="type-first-mid-box"
v-for="(item, index) in info.slice(
- (pagination.page - 1) * pagination.pageSize,
- pagination.page * pagination.pageSize
- )"
+ (pagination.page - 1) * pagination.pageSize,
+ pagination.page * pagination.pageSize
+ )"
:key="index"
>
<div class="type-first-mid-box-video">
@@ -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>
- <p v-for="(v, k) in item['语音角色']" :key="k">
- <span>角色{{Number( k ) + 1}}：</span>
- <span style="font-weight: normal">{{ transformKeyframes(v) }}</span>
- </p>
- <!-- <span style="font-weight: normal">{{ item["语音角色"] }}</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>
+ </p>
+ </div>
</div>
- <div class="type-first-mid-box-text" v-else>
+ <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,14 +93,14 @@ 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 ""; // 处理异常情况
});
-
+
// 过滤空值并拼接成字符串
return `["${result.filter(Boolean).join('", "')}"]`;
}
diff --git a/src/views/dataView/components/Type2LicensePlateRecog.vue b/src/views/dataView/components/Type2LicensePlateRecog.vue
index aeb3129..ab2ac97 100644
--- a/src/views/dataView/components/Type2LicensePlateRecog.vue
+++ b/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%;
diff --git a/src/views/dataView/components/Type3TargetRecog.vue b/src/views/dataView/components/Type3TargetRecog.vue
index 5732005..c0216d6 100644
--- a/src/views/dataView/components/Type3TargetRecog.vue
+++ b/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["检测类型"] }}