feat: 微调图片展示

master
donghao 22 hours ago
parent 0865787eee
commit d6addefad5

@ -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('", "')}"]`;
}

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

@ -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["检测类型"] }}

Loading…
Cancel
Save