feat: 目标检测分页筛选完成
parent
c115e0221b
commit
01b43061d9
Binary file not shown.
|
After Width: | Height: | Size: 734 B |
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
@ -1,125 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: donghao donghao@supervision.ltd
|
|
||||||
* @Date: 2025-06-12 10:37:10
|
|
||||||
* @LastEditors: donghao donghao@supervision.ltd
|
|
||||||
* @LastEditTime: 2025-06-12 10:38:40
|
|
||||||
* @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type4AudioDetection.vue
|
|
||||||
* @Description: 递烟
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="type-fourth">
|
|
||||||
<!-- <div class="type-fourth-top">
|
|
||||||
<span>←</span> <span>车牌识别</span>
|
|
||||||
</div> -->
|
|
||||||
<div class="type-fourth-mid">
|
|
||||||
<div class="type-fourth-mid-video">
|
|
||||||
<video
|
|
||||||
class="w-[720px] h-[100%]"
|
|
||||||
:src="info[0].video_url"
|
|
||||||
controls
|
|
||||||
></video>
|
|
||||||
</div>
|
|
||||||
<div class="type-fourth-mid-tab">
|
|
||||||
<el-button type="primary" class="w-[76px] h-[32px!important]">全部</el-button>
|
|
||||||
<el-button class="w-[76px] h-[32px!important]">人员</el-button>
|
|
||||||
<el-button class="w-[76px] h-[32px!important]">车辆</el-button>
|
|
||||||
<el-button class="w-[76px] h-[32px!important]">路灯</el-button>
|
|
||||||
</div>
|
|
||||||
<div class="type-fourth-mid-box">
|
|
||||||
<div class="type-fourth-mid-crad" v-for="(item, index) in 8">
|
|
||||||
<div class="type-fourth-mid-crad-image">
|
|
||||||
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
|
|
||||||
</div>
|
|
||||||
<div class="type-fourth-mid-crad-text">
|
|
||||||
<span style="color: #666;">检测类型:</span> 123123
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="type-fourth-bottom"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({
|
|
||||||
name: "Type3CigaretteOfferWarp"
|
|
||||||
});
|
|
||||||
interface Props {
|
|
||||||
typeKey: String;
|
|
||||||
info: Record<string, any>;
|
|
||||||
title: String;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
typeKey: "3",
|
|
||||||
info: {},
|
|
||||||
title: String,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.type-fourth {
|
|
||||||
.type-fourth-top {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
font-family: PingFang SC, PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #1D2129;
|
|
||||||
}
|
|
||||||
.type-fourth-mid {
|
|
||||||
.type-fourth-mid-video {
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 324px;
|
|
||||||
border-radius: 4px;
|
|
||||||
img {
|
|
||||||
width: 720px;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.type-fourth-mid-tab {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
width: 100%;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
.type-fourth-mid-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-content: space-between;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
height: 420px;
|
|
||||||
.type-fourth-mid-crad {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 348px;
|
|
||||||
height: 202px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 4px;
|
|
||||||
.type-fourth-mid-crad-image {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 148px;
|
|
||||||
img {
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.type-fourth-mid-crad-text {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 54px;
|
|
||||||
padding: 16px;
|
|
||||||
font-family: PingFang SC, PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #1D2129;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,275 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: donghao donghao@supervision.ltd
|
||||||
|
* @Date: 2025-06-12 10:37:10
|
||||||
|
* @LastEditors: donghao donghao@supervision.ltd
|
||||||
|
* @LastEditTime: 2025-06-13 13:13:42
|
||||||
|
* @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type4AudioDetection.vue
|
||||||
|
* @Description: 递烟
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="type-fourth">
|
||||||
|
<!-- <div class="type-fourth-top">
|
||||||
|
<span>←</span> <span>车牌识别</span>
|
||||||
|
</div> -->
|
||||||
|
<div class="type-fourth-mid">
|
||||||
|
<div class="type-fourth-mid-video">
|
||||||
|
<div
|
||||||
|
class="arrow-icon left-arrow"
|
||||||
|
@click="toPrev()"
|
||||||
|
v-if="info?.length > 1"
|
||||||
|
></div>
|
||||||
|
<video
|
||||||
|
class="w-[720px] h-[100%]"
|
||||||
|
:src="currentInfo?.video_url"
|
||||||
|
controls
|
||||||
|
></video>
|
||||||
|
<div
|
||||||
|
class="arrow-icon right-arrow"
|
||||||
|
@click="toNext()"
|
||||||
|
v-if="info?.length > 1"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="type-fourth-mid-tab">
|
||||||
|
<el-button
|
||||||
|
v-for="v in regTypeMap"
|
||||||
|
:type="currentRegType === v.key ? 'primary' : ''"
|
||||||
|
class="w-[76px] h-[32px!important]"
|
||||||
|
:key="v.key"
|
||||||
|
@click="changeRegType(v)"
|
||||||
|
>{{ v.title }}</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 type-fourth-mid-box"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="type-fourth-mid-crad"
|
||||||
|
v-for="(item, index) in currentInfoList.slice(
|
||||||
|
(pagination.page - 1) * pagination.pageSize,
|
||||||
|
pagination.page * pagination.pageSize
|
||||||
|
)"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="type-fourth-mid-crad-image">
|
||||||
|
<img :src="item['图片']" class="w-[100%] h-[100%]" />
|
||||||
|
</div>
|
||||||
|
<div class="type-fourth-mid-crad-text">
|
||||||
|
<span style="color: #666">检测类型:</span> {{ item["检测类型"] }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="type-fourth-bottom mt-[100px]" v-if="currentInfoList?.length">
|
||||||
|
<BasePagination
|
||||||
|
class="bg-transparent"
|
||||||
|
:showTable="false"
|
||||||
|
:total="currentInfoList?.length"
|
||||||
|
:pageSize="pagination.pageSize"
|
||||||
|
:dataSource="currentInfoList"
|
||||||
|
:isFixedPagination="true"
|
||||||
|
:page="pagination.page"
|
||||||
|
@change="changePage"
|
||||||
|
>
|
||||||
|
</BasePagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { BasePagination } from "@/components/CustomTable";
|
||||||
|
defineOptions({
|
||||||
|
name: "Type3TargetRecog",
|
||||||
|
});
|
||||||
|
interface Props {
|
||||||
|
typeKey: String;
|
||||||
|
info: Record<string, any>;
|
||||||
|
title: String;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
typeKey: "3",
|
||||||
|
info: {},
|
||||||
|
title: String,
|
||||||
|
});
|
||||||
|
// 目标检测类型
|
||||||
|
const regTypeMap = [
|
||||||
|
{
|
||||||
|
key: "0",
|
||||||
|
title: "全部",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "人",
|
||||||
|
title: "人员",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "车",
|
||||||
|
title: "车辆",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "信号灯",
|
||||||
|
title: "路灯",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const currentRegType = ref<string>("0");
|
||||||
|
const pagination = ref({ page: 1, pageSize: 8 });
|
||||||
|
const currentIndex = ref<number>(0); // 当前视频索引
|
||||||
|
const currentInfo = ref<Record<string, any> | null>(null);
|
||||||
|
const currentInfoList = ref<Record<string, any>[]>([]);
|
||||||
|
// 当前目标检测信息列表合并
|
||||||
|
function convertObjects(key) {
|
||||||
|
const targetArr = currentInfo.value?.["目标检测"]?.[key];
|
||||||
|
const result = [];
|
||||||
|
for (let i = 0; i < targetArr.length; i++) {
|
||||||
|
result.push({
|
||||||
|
["图片"]: targetArr[i],
|
||||||
|
["检测类型"]: key,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
function changePage({ page, pageSize }) {
|
||||||
|
pagination.value = { page, pageSize };
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换视频
|
||||||
|
function changeCurrentVideo(index: number) {
|
||||||
|
currentIndex.value = index;
|
||||||
|
currentInfo.value = props.info[index];
|
||||||
|
}
|
||||||
|
function toPrev() {
|
||||||
|
if (currentIndex.value > 0) {
|
||||||
|
changeCurrentVideo(toRaw(currentIndex.value) - 1);
|
||||||
|
} else {
|
||||||
|
changeCurrentVideo(props.info.length - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function toNext() {
|
||||||
|
if (currentIndex.value < props.info.length - 1) {
|
||||||
|
changeCurrentVideo(toRaw(currentIndex.value) + 1);
|
||||||
|
} else {
|
||||||
|
changeCurrentVideo(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换识别类型
|
||||||
|
function changeRegType(record) {
|
||||||
|
currentRegType.value = record.key;
|
||||||
|
console.log(record, "changeRegType");
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
props.info,
|
||||||
|
() => {
|
||||||
|
currentInfo.value = props.info[0];
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [currentIndex.value, currentRegType.value],
|
||||||
|
() => {
|
||||||
|
console.log(
|
||||||
|
currentInfo.value,
|
||||||
|
props.title,
|
||||||
|
"watch-目标检测-currentInfo.value"
|
||||||
|
);
|
||||||
|
pagination.value = { ...toRaw(pagination.value), page: 1 };
|
||||||
|
const currRegTypeKey = toRaw(currentRegType.value);
|
||||||
|
if (currRegTypeKey === "0") {
|
||||||
|
currentInfoList.value = [
|
||||||
|
...convertObjects("人"),
|
||||||
|
...convertObjects("车"),
|
||||||
|
...convertObjects("信号灯"),
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
currentInfoList.value = convertObjects(currRegTypeKey);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.type-fourth {
|
||||||
|
.type-fourth-top {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #1d2129;
|
||||||
|
}
|
||||||
|
.type-fourth-mid {
|
||||||
|
.type-fourth-mid-video {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 324px;
|
||||||
|
border-radius: 4px;
|
||||||
|
.arrow-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: url("@/assets/images/left_arrow.png");
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.right-arrow {
|
||||||
|
background-image: url("@/assets/images/right_arrow.png");
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 720px;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.type-fourth-mid-tab {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 100%;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.type-fourth-mid-box {
|
||||||
|
min-height: 420px;
|
||||||
|
max-height: 420px;
|
||||||
|
overflow-y: auto;
|
||||||
|
.type-fourth-mid-crad {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 348px;
|
||||||
|
height: 202px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
.type-fourth-mid-crad-image {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 148px;
|
||||||
|
img {
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.type-fourth-mid-crad-text {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 54px;
|
||||||
|
padding: 16px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1d2129;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue