Yaxin
/
Web-Traffic-Police
27
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 微调图片展示

Browse Source
master
donghao 2 days ago
parent 0865787eee
commit d6addefad5
3 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File

45
src/views/dataView/components/Type1ObjectDetect.vue
Unescape Escape View File

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

21
src/views/dataView/components/Type2LicensePlateRecog.vue
Unescape Escape View File

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

6
src/views/dataView/components/Type3TargetRecog.vue
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save