|
|
|
|
@ -1,24 +1,27 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
// import axios from "axios";
|
|
|
|
|
import { onMounted, ref, reactive } from "vue";
|
|
|
|
|
// import dplayer from "@/components/VideoPlayer/MyPlayer.vue";
|
|
|
|
|
// import OurPlayer from "@/components/VideoPlayer/OurPlayer.vue";
|
|
|
|
|
import { PureTableBar } from "@/components/RePureTableBar";
|
|
|
|
|
import { PureTable } from "@pureadmin/table";
|
|
|
|
|
import { type PaginationProps } from "@pureadmin/table";
|
|
|
|
|
import { ElMessageBox, ElMessage } from "element-plus";
|
|
|
|
|
import { getConfig } from "@/config";
|
|
|
|
|
import { getToken, formatToken } from "@/utils/auth";
|
|
|
|
|
import { getHomeList } from "@/api/home";
|
|
|
|
|
import { ElMessageBox } from "element-plus";
|
|
|
|
|
// import { getConfig } from "@/config";
|
|
|
|
|
// import { getToken, formatToken } from "@/utils/auth";
|
|
|
|
|
import { getHomeList, getEvents } from "@/api/home";
|
|
|
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|
|
|
|
import Delete from "@iconify-icons/ep/delete";
|
|
|
|
|
import EditPen from "@iconify-icons/ep/edit-pen";
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "Welcome"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const AdminHostUrl = getConfig().AdminHostUrl;
|
|
|
|
|
// const AdminHostUrl = getConfig().AdminHostUrl;
|
|
|
|
|
|
|
|
|
|
const formInline = ref({
|
|
|
|
|
date: [],
|
|
|
|
|
const formInline = reactive({
|
|
|
|
|
date: "",
|
|
|
|
|
policeId: "",
|
|
|
|
|
event: "",
|
|
|
|
|
violation: "",
|
|
|
|
|
@ -58,19 +61,13 @@ const violationMap = ref({
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
function onSearch() {
|
|
|
|
|
let start_time;
|
|
|
|
|
let end_time;
|
|
|
|
|
if (formInline.value.date) {
|
|
|
|
|
start_time = formInline.value.date[0];
|
|
|
|
|
end_time = formInline.value.date[1];
|
|
|
|
|
}
|
|
|
|
|
const params = {
|
|
|
|
|
start_time: start_time || undefined,
|
|
|
|
|
end_time: end_time || undefined,
|
|
|
|
|
police_id: formInline.value.policeId || undefined,
|
|
|
|
|
event_type: formInline.value.event || undefined,
|
|
|
|
|
violation: violationMap.value[formInline.value.violation] || undefined,
|
|
|
|
|
violation_type: formInline.value.violationType || undefined,
|
|
|
|
|
start_time: formInline.date === null ? undefined : formInline.date[0],
|
|
|
|
|
end_time: formInline.date === null ? undefined : formInline.date[1],
|
|
|
|
|
police_id: formInline.policeId || undefined,
|
|
|
|
|
event_type: formInline.event || undefined,
|
|
|
|
|
violation: violationMap.value[formInline.violation] || undefined,
|
|
|
|
|
violation_type: formInline.violationType || undefined,
|
|
|
|
|
page: currentPage.value || undefined,
|
|
|
|
|
page_size: pageSize.value || undefined
|
|
|
|
|
};
|
|
|
|
|
@ -78,7 +75,6 @@ function onSearch() {
|
|
|
|
|
const dataList = response;
|
|
|
|
|
totalNumber.value = dataList.count;
|
|
|
|
|
pagination.total = dataList.count;
|
|
|
|
|
console.log(totalNumber.value, "totalNumber");
|
|
|
|
|
if (!isDisplay) {
|
|
|
|
|
tableData.value = dataList.results.filter(data => {
|
|
|
|
|
return data.is_display === true;
|
|
|
|
|
@ -86,7 +82,6 @@ function onSearch() {
|
|
|
|
|
} else {
|
|
|
|
|
tableData.value = dataList.results;
|
|
|
|
|
}
|
|
|
|
|
console.log(pagination, "pagination");
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
}, 500);
|
|
|
|
|
@ -163,24 +158,26 @@ const handleClose = (done: () => void) => {
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function getEvents() {
|
|
|
|
|
axios({
|
|
|
|
|
url: AdminHostUrl + "events",
|
|
|
|
|
headers: {
|
|
|
|
|
token: formatToken(getToken().accessToken)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(response => {
|
|
|
|
|
eventMap.value = response.data.data;
|
|
|
|
|
// console.log(eventMap.value);
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
ElMessage({
|
|
|
|
|
message: "网络暂不通畅",
|
|
|
|
|
type: "warning"
|
|
|
|
|
});
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
async function getEvent() {
|
|
|
|
|
// axios({
|
|
|
|
|
// url: AdminHostUrl + "events",
|
|
|
|
|
// headers: {
|
|
|
|
|
// token: formatToken(getToken().accessToken)
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// .then(response => {
|
|
|
|
|
// eventMap.value = response.data.data;
|
|
|
|
|
// // console.log(eventMap.value);
|
|
|
|
|
// })
|
|
|
|
|
// .catch(error => {
|
|
|
|
|
// ElMessage({
|
|
|
|
|
// message: "网络暂不通畅",
|
|
|
|
|
// type: "warning"
|
|
|
|
|
// });
|
|
|
|
|
// console.log(error);
|
|
|
|
|
// });
|
|
|
|
|
const { results } = await getEvents();
|
|
|
|
|
eventMap.value = results;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function pickerOptions(time) {
|
|
|
|
|
@ -211,7 +208,8 @@ const columns: TableColumnList = [
|
|
|
|
|
{
|
|
|
|
|
label: "是否违规",
|
|
|
|
|
prop: "is_violation",
|
|
|
|
|
minWidth: 100
|
|
|
|
|
minWidth: 100,
|
|
|
|
|
slot: "violation"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "违规行为",
|
|
|
|
|
@ -236,6 +234,12 @@ const columns: TableColumnList = [
|
|
|
|
|
label: "视频",
|
|
|
|
|
slot: "video"
|
|
|
|
|
}
|
|
|
|
|
// {
|
|
|
|
|
// label: "操作",
|
|
|
|
|
// fixed: "right",
|
|
|
|
|
// width: 180,
|
|
|
|
|
// slot: "operation"
|
|
|
|
|
// }
|
|
|
|
|
];
|
|
|
|
|
const loading = ref(true);
|
|
|
|
|
const pagination = reactive<PaginationProps>({
|
|
|
|
|
@ -244,9 +248,12 @@ const pagination = reactive<PaginationProps>({
|
|
|
|
|
currentPage: currentPage.value,
|
|
|
|
|
background: true
|
|
|
|
|
});
|
|
|
|
|
console.log(totalNumber.value, "totalNumber");
|
|
|
|
|
console.log(pagination, "pagination111111");
|
|
|
|
|
|
|
|
|
|
function handleUpdate(row) {
|
|
|
|
|
console.log(row);
|
|
|
|
|
}
|
|
|
|
|
function handleDelete(row) {
|
|
|
|
|
console.log(row);
|
|
|
|
|
}
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
onSearch();
|
|
|
|
|
});
|
|
|
|
|
@ -264,12 +271,12 @@ onMounted(() => {
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-form
|
|
|
|
|
:inline="true"
|
|
|
|
|
:model="formInline"
|
|
|
|
|
v-model="formInline"
|
|
|
|
|
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="日期:" style="font-weight: bold">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
:model="formInline.date"
|
|
|
|
|
v-model="formInline.date"
|
|
|
|
|
type="daterange"
|
|
|
|
|
unlink-panels
|
|
|
|
|
range-separator="--"
|
|
|
|
|
@ -296,7 +303,7 @@ onMounted(() => {
|
|
|
|
|
v-model="formInline.event"
|
|
|
|
|
placeholder="违法行为"
|
|
|
|
|
clearable
|
|
|
|
|
@click="getEvents"
|
|
|
|
|
@click="getEvent"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(event, type) in eventMap"
|
|
|
|
|
@ -359,6 +366,9 @@ onMounted(() => {
|
|
|
|
|
@page-size-change="handleSizeChange"
|
|
|
|
|
@page-current-change="handleCurrentChange"
|
|
|
|
|
>
|
|
|
|
|
<template #violation="{ row }">
|
|
|
|
|
{{ row.is_violation ? "是" : "否" }}
|
|
|
|
|
</template>
|
|
|
|
|
<template #image="{ row, index }">
|
|
|
|
|
<el-image
|
|
|
|
|
preview-teleported
|
|
|
|
|
@ -375,6 +385,31 @@ onMounted(() => {
|
|
|
|
|
<source :src="row.video_dir" type="video/mp4" />
|
|
|
|
|
</video>
|
|
|
|
|
</template>
|
|
|
|
|
<template #operation="{ row }">
|
|
|
|
|
<el-button
|
|
|
|
|
class="reset-margin"
|
|
|
|
|
link
|
|
|
|
|
type="primary"
|
|
|
|
|
:size="size"
|
|
|
|
|
@click="handleUpdate(row)"
|
|
|
|
|
:icon="useRenderIcon(EditPen)"
|
|
|
|
|
>
|
|
|
|
|
修改
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-button
|
|
|
|
|
class="reset-margin"
|
|
|
|
|
link
|
|
|
|
|
type="primary"
|
|
|
|
|
:size="size"
|
|
|
|
|
:icon="useRenderIcon(Delete)"
|
|
|
|
|
>
|
|
|
|
|
删除
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</pure-table>
|
|
|
|
|
</template>
|
|
|
|
|
</PureTableBar>
|
|
|
|
|
|
JINGYJ
2 years ago