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