forked from kongfp/Tp_Web2.0
feat: 视频分析页开发
JINGYJ
2 years ago
parent
402ca4719e
commit
fff9fc175c
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,318 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { PureTable } from "@pureadmin/table";
|
||||||
|
import { type PaginationProps } from "@pureadmin/table";
|
||||||
|
import { onMounted, ref, reactive } from "vue";
|
||||||
|
import { useWindowSize } from "@vueuse/core";
|
||||||
|
import { getVideoList } from "@/api/videoParse";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "VideoList"
|
||||||
|
});
|
||||||
|
|
||||||
|
const formInline = reactive({
|
||||||
|
date: "",
|
||||||
|
violation: ""
|
||||||
|
});
|
||||||
|
function pickerOptions(time) {
|
||||||
|
return time.getTime() > Date.now();
|
||||||
|
}
|
||||||
|
const now_date = new Date();
|
||||||
|
now_date.setMonth(now_date.getMonth() - 1);
|
||||||
|
const lastMonth = now_date;
|
||||||
|
const tableData = ref([]);
|
||||||
|
// const violationMap = ref({
|
||||||
|
// 疑似静止: "0",
|
||||||
|
// 疑似遮挡: "1",
|
||||||
|
// 疑似抖动: "2",
|
||||||
|
// 疑似递烟: "3",
|
||||||
|
// 疑似递钱: "4"
|
||||||
|
// });
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
value: "疑似静止",
|
||||||
|
label: "疑似静止"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "疑似遮挡",
|
||||||
|
label: "疑似遮挡"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "疑似抖动",
|
||||||
|
label: "疑似抖动"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "疑似递烟",
|
||||||
|
label: "疑似递烟"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "疑似递钱",
|
||||||
|
label: "疑似递钱"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const { height } = useWindowSize();
|
||||||
|
const tableSize = ref("default");
|
||||||
|
const columns: TableColumnList = [
|
||||||
|
{
|
||||||
|
label: "序号",
|
||||||
|
type: "index",
|
||||||
|
width: 70,
|
||||||
|
fixed: "left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "视频名称",
|
||||||
|
// width: 200,
|
||||||
|
prop: "video_name"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "日期",
|
||||||
|
prop: "video_date",
|
||||||
|
// width: 140,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: "异常数量",
|
||||||
|
// width: 100,
|
||||||
|
prop: "abnormal_count"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "异常表现",
|
||||||
|
prop: "abnormal_performance",
|
||||||
|
width: 370,
|
||||||
|
slot: "violation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "文件地址",
|
||||||
|
prop: "video_path"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
// width: 160,
|
||||||
|
slot: "operation"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
function tagStyle(type) {
|
||||||
|
switch (type) {
|
||||||
|
case "疑似遮挡":
|
||||||
|
return "span-occlusion";
|
||||||
|
case "疑似递烟":
|
||||||
|
return "span-smoke";
|
||||||
|
case "疑似递钱":
|
||||||
|
return "span-money";
|
||||||
|
case "疑似静止":
|
||||||
|
return "span-stillness";
|
||||||
|
default:
|
||||||
|
return "span-shake";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function onSearch() {
|
||||||
|
const params = {
|
||||||
|
start_time: formInline.date === null ? undefined : formInline.date[0],
|
||||||
|
end_time: formInline.date === null ? undefined : formInline.date[1],
|
||||||
|
abnormal_behavior: formInline.violation || undefined,
|
||||||
|
page: pagination.currentPage || undefined,
|
||||||
|
page_size: pagination.pageSize || undefined
|
||||||
|
};
|
||||||
|
const { results, count } = await getVideoList(params);
|
||||||
|
pagination.total = count;
|
||||||
|
tableData.value = results;
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
function handleSearch() {
|
||||||
|
pagination.currentPage = 1;
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRefresh() {
|
||||||
|
Object.assign(formInline, { date: "", violation: "" });
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSizeChange(val) {
|
||||||
|
pagination.pageSize = val;
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCurrentChange(val) {
|
||||||
|
pagination.currentPage = val;
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
const router = useRouter();
|
||||||
|
function handleProductDetail(product) {
|
||||||
|
// 保存信息到标签页
|
||||||
|
useMultiTagsStoreHook().handleTags("push", {
|
||||||
|
path: `/videoParse/index`,
|
||||||
|
name: "VideoParsePage",
|
||||||
|
query: product,
|
||||||
|
meta: {
|
||||||
|
title: `视频分析`,
|
||||||
|
showLink: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
router.push({ name: "VideoParsePage", query: product });
|
||||||
|
}
|
||||||
|
const loading = ref(true);
|
||||||
|
const pagination = reactive<PaginationProps>({
|
||||||
|
total: 0,
|
||||||
|
pageSize: 15,
|
||||||
|
currentPage: 1,
|
||||||
|
background: true
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
onSearch();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<h2 class="mb-4 text-xl">视频分析</h2>
|
||||||
|
<el-card shadow="never" :style="{ height: `calc(${height}px - 140px)` }">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="font-semibold">异常分析</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="formInline"
|
||||||
|
class="search-form bg-bg_color w-[99/100]"
|
||||||
|
>
|
||||||
|
<el-form-item style="margin-right: 10px">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formInline.date"
|
||||||
|
type="daterange"
|
||||||
|
unlink-panels
|
||||||
|
range-separator="~"
|
||||||
|
start-placeholder="起始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
:disabled-date="pickerOptions"
|
||||||
|
:default-value="lastMonth"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item style="margin-right: 12px">
|
||||||
|
<el-select
|
||||||
|
v-model="formInline.violation"
|
||||||
|
placeholder="异常表现"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
collapse-tags-tooltip
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||||
|
<el-button @click="handleRefresh">重置 </el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!-- <PureTableBar title="" :columns="columns" @refresh="onSearch"> -->
|
||||||
|
<!-- <template v-slot="{ size, columns }"> -->
|
||||||
|
<pure-table
|
||||||
|
adaptive
|
||||||
|
align-whole="left"
|
||||||
|
table-layout="auto"
|
||||||
|
:loading="loading"
|
||||||
|
:data="tableData"
|
||||||
|
showOverflowTooltip
|
||||||
|
:columns="columns"
|
||||||
|
:pagination="pagination"
|
||||||
|
:paginationSmall="tableSize === 'small' ? true : false"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-table-row-hover-bg-color)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}"
|
||||||
|
@page-size-change="handleSizeChange"
|
||||||
|
@page-current-change="handleCurrentChange"
|
||||||
|
>
|
||||||
|
<template #violation="{ row }">
|
||||||
|
<!-- {{ row.is_violation ? "是" : "否" }} -->
|
||||||
|
<span
|
||||||
|
:class="tagStyle(item)"
|
||||||
|
v-for="(item, index) in row.abnormal_performance"
|
||||||
|
:key="index"
|
||||||
|
>{{ item }}</span
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<template #operation="{ row }">
|
||||||
|
<el-button
|
||||||
|
class="reset-margin"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
@click="handleProductDetail(row)"
|
||||||
|
>
|
||||||
|
详情
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</pure-table>
|
||||||
|
<!-- </template> -->
|
||||||
|
<!-- </PureTableBar> -->
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.span-occlusion,
|
||||||
|
.span-smoke,
|
||||||
|
.span-money,
|
||||||
|
.span-stillness,
|
||||||
|
.span-shake {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
width: 64px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgb(247 95 25 / 100%);
|
||||||
|
text-align: center;
|
||||||
|
background: rgb(247 112 49 / 10%);
|
||||||
|
border: 1px solid #f75f19;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-smoke {
|
||||||
|
color: rgb(2 36 215 / 100%);
|
||||||
|
background: rgb(2 36 215 / 10%);
|
||||||
|
border: 1px solid rgb(2 36 215 / 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-money {
|
||||||
|
color: rgb(232 13 13 / 100%);
|
||||||
|
background: rgb(232 13 13 / 10%);
|
||||||
|
border: 1px solid rgb(232 13 13 / 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-stillness {
|
||||||
|
color: rgb(68 174 245 / 100%);
|
||||||
|
background: rgb(68 174 245 / 10%);
|
||||||
|
border: 1px solid rgb(68 174 245 / 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-shake {
|
||||||
|
color: rgb(246 148 0 / 100%);
|
||||||
|
background: rgb(246 148 0 / 10%);
|
||||||
|
border: 1px solid rgb(246 148 0 / 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-margin {
|
||||||
|
color: #e80d0d;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #e80d0d;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue