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