|
|
|
|
@ -1,18 +1,29 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="appearance-monitor-warp">
|
|
|
|
|
<div class="appearance-monitor-left h-[100%]">
|
|
|
|
|
<template v-if="isImageFlag">
|
|
|
|
|
<template v-if="currFileList?.length">
|
|
|
|
|
<div class="monitor-left-top">
|
|
|
|
|
<img :src="imageBig" alt="监控画面" />
|
|
|
|
|
<!-- <video src=""></video> -->
|
|
|
|
|
<div class="file-preview-screen">
|
|
|
|
|
<Player :src="currFile?.video_url" :is-playing="isPlaying" v-if="currFile?.video_url"
|
|
|
|
|
@play="isPlaying = true" @pause="isPlaying = false" />
|
|
|
|
|
<img :src="currFile?.image_url" v-else-if="currFile?.image_url" >
|
|
|
|
|
<div v-else>
|
|
|
|
|
<!-- //TODO 视频【图片】加载失败 -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="monitor-left-bottom">
|
|
|
|
|
<swiper ref="swiperRef" :modules="modules" :slides-per-view="4" :space-between="10" navigation
|
|
|
|
|
:scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :observeParents="true"
|
|
|
|
|
@swiper="onSwiper" @slideChange="onSlideChange">
|
|
|
|
|
<swiper-slide v-for="(image, index) in images" :key="index" @click="handleSlideClick(index)"
|
|
|
|
|
<swiper-slide v-for="(file, index) in currFileList" :key="index" @click="handleSlideClick(index)"
|
|
|
|
|
:class="{ 'active-slide': activeIndex === index }">
|
|
|
|
|
<img :src="image" alt="Slide" />
|
|
|
|
|
<img :src="file?.image_url" v-if="file?.image_url" class="cursor-pointer" />
|
|
|
|
|
<SwiperPlayer class="cursor-pointer" :videoUrl="file?.video_url" v-else-if="file?.video_url"
|
|
|
|
|
:isPlaying="isPlaying && (activeIndex === index)" />
|
|
|
|
|
<div v-else>
|
|
|
|
|
<!-- //TODO 视频【图片】加载失败 -->
|
|
|
|
|
</div>
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
</swiper>
|
|
|
|
|
</div>
|
|
|
|
|
@ -53,13 +64,12 @@
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 右侧表格区域 -->
|
|
|
|
|
<div class="right-panel w-[800px]">
|
|
|
|
|
<div class="w-full right-panel">
|
|
|
|
|
<div class="bg-transparent baseTable_wrap">
|
|
|
|
|
<template v-if="pagination.total > 0">
|
|
|
|
|
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total" :pageSize="pagination.pageSize"
|
|
|
|
|
:dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage"
|
|
|
|
|
@change="handleTableChange":row-class-name="handleRowClassName"
|
|
|
|
|
@row-click="handleRowClick">
|
|
|
|
|
@change="handleTableChange" :row-class-name="handleRowClassName" @row-click="handleRowClick">
|
|
|
|
|
</BaseTable>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
@ -70,17 +80,21 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import Player from '@/components/videoPlayer/Player.vue'
|
|
|
|
|
import SwiperPlayer from './components/SwiperPlayer.vue'
|
|
|
|
|
import ContentHeader from "@/components/ContentHeader.vue";
|
|
|
|
|
import { BaseTable } from "@/components/CustomTable";
|
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
|
|
|
import { Navigation, Scrollbar } from "swiper/modules";
|
|
|
|
|
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
|
|
|
|
|
import { isSuccessApi } from "@/utils/forApi";
|
|
|
|
|
|
|
|
|
|
import "swiper/css";
|
|
|
|
|
import 'swiper/scss';
|
|
|
|
|
import 'swiper/scss/navigation';
|
|
|
|
|
const modules = [Navigation, Scrollbar];
|
|
|
|
|
|
|
|
|
|
// const currentRow = ref<Record<string, any>>({});
|
|
|
|
|
const activeIndex = ref(-1);
|
|
|
|
|
const swiperRef = ref(null);
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
label: "车号",
|
|
|
|
|
@ -116,24 +130,24 @@ const columns = [
|
|
|
|
|
label: "复核",
|
|
|
|
|
property: "is_reviewed",
|
|
|
|
|
formatter: ({ is_reviewed }) => {
|
|
|
|
|
return is_reviewed === true
|
|
|
|
|
return is_reviewed === true
|
|
|
|
|
? "是"
|
|
|
|
|
:"否";
|
|
|
|
|
: "否";
|
|
|
|
|
},
|
|
|
|
|
width: 60,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "时间",
|
|
|
|
|
property: "created_at",
|
|
|
|
|
width: 170
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
|
|
|
|
|
|
|
|
|
const listData = ref([]);
|
|
|
|
|
const listDetail = ref([]);
|
|
|
|
|
const isImageFlag = ref(true);
|
|
|
|
|
const listData = ref([]); // 列表数据
|
|
|
|
|
const currentRow = ref<Record<string, any>>({}); // 当前选中行
|
|
|
|
|
const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
|
|
|
|
|
const currFile = ref<Record<string, any>>({}); // 详情数据
|
|
|
|
|
const isPlaying = ref<boolean>(false); // 是否播放
|
|
|
|
|
// 搜索表单
|
|
|
|
|
const searchForm = reactive({
|
|
|
|
|
train_number: "",
|
|
|
|
|
@ -143,30 +157,83 @@ const searchForm = reactive({
|
|
|
|
|
});
|
|
|
|
|
const dataLoading = ref(true);
|
|
|
|
|
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
const { currentPage, pageSize } = pagination.value;
|
|
|
|
|
const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
|
|
|
|
|
const { data } = await res
|
|
|
|
|
console.log(data, 'getList_data')
|
|
|
|
|
listData.value = data.data;
|
|
|
|
|
getDetail(listData.value[0]?.id)
|
|
|
|
|
console.log(data.list);
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
total: data.total
|
|
|
|
|
};
|
|
|
|
|
dataLoading.value = false;
|
|
|
|
|
const togglePlay = () => {
|
|
|
|
|
isPlaying.value = !isPlaying.value;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getDetail = async (id: any) => {
|
|
|
|
|
const res = await getAppearanceMonitorDetailApi({ id, current:1,})
|
|
|
|
|
const { data } = await res
|
|
|
|
|
console.log(data, 'getDetail_data')
|
|
|
|
|
listDetail.value = data.data;
|
|
|
|
|
isImageFlag.value = data.data?.length > 0 ? true : false;
|
|
|
|
|
console.log(data.data);
|
|
|
|
|
const handleSlideClick = (index) => {
|
|
|
|
|
if (activeIndex.value === index) {
|
|
|
|
|
togglePlay() // 播放 暂停
|
|
|
|
|
} else {
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
currFile.value = currFileList.value[index];
|
|
|
|
|
isPlaying.value = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onSwiper = (swiper) => {
|
|
|
|
|
swiperRef.value = swiper;
|
|
|
|
|
console.log('Swiper 实例已获取:', swiper);
|
|
|
|
|
};
|
|
|
|
|
const onSlideChange = () => {
|
|
|
|
|
console.log("slide change");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 文件详情
|
|
|
|
|
const getFileList = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const res = await getAppearanceMonitorDetailApi({ id: currentRow.value?.id, current: 1, pageSize: 1000 })
|
|
|
|
|
console.log(res.data, 'getDetailList_data')
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
|
currFileList.value = res.data.data;
|
|
|
|
|
currFile.value = res.data.data[0];
|
|
|
|
|
activeIndex.value = 0;
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error, 'getDetailList_error')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// TODO mock 获取视频列表数据
|
|
|
|
|
// const getFileList = async () => {
|
|
|
|
|
// try {
|
|
|
|
|
// const resAll = await fetch('/api/v1/record/record_detail_list/', {
|
|
|
|
|
// method: 'POST'
|
|
|
|
|
// })
|
|
|
|
|
// const res = await resAll.json()
|
|
|
|
|
// if (isSuccessApi(res)) {
|
|
|
|
|
// currFileList.value = res.data.data;
|
|
|
|
|
// currFile.value = res.data.data[0];
|
|
|
|
|
// activeIndex.value = 0;
|
|
|
|
|
// }
|
|
|
|
|
// } catch (error) {
|
|
|
|
|
// console.error('获取数据失败:', error)
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
function loadDetail() {
|
|
|
|
|
currentRow.value = listData.value[0]
|
|
|
|
|
getFileList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取列表
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const { currentPage, pageSize } = pagination.value;
|
|
|
|
|
const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
|
|
|
|
|
console.log(res.data, 'getList_data')
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
|
listData.value = res.data.data;
|
|
|
|
|
loadDetail()
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
total: res.data.total
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取数据失败:', error)
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 查询方法
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
getList()
|
|
|
|
|
@ -190,41 +257,15 @@ function handleTableChange(record) {
|
|
|
|
|
getList();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const images = ref([
|
|
|
|
|
'https://picsum.photos/300/200?random=1',
|
|
|
|
|
'https://picsum.photos/300/200?random=2',
|
|
|
|
|
'https://picsum.photos/300/200?random=3',
|
|
|
|
|
'https://picsum.photos/300/200?random=4',
|
|
|
|
|
'https://picsum.photos/300/200?random=5'
|
|
|
|
|
]);
|
|
|
|
|
const imageBig = ref(images.value[0])
|
|
|
|
|
const activeIndex = ref(-1);
|
|
|
|
|
|
|
|
|
|
const handleSlideClick = (index) => {
|
|
|
|
|
console.log(index);
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
imageBig.value = images.value[index];
|
|
|
|
|
};
|
|
|
|
|
const swiperRef = ref(null);
|
|
|
|
|
console.log(swiperRef.value);
|
|
|
|
|
const onSwiper = (swiper) => {
|
|
|
|
|
swiperRef.value = swiper;
|
|
|
|
|
console.log('Swiper 实例已获取:', swiper);
|
|
|
|
|
};
|
|
|
|
|
const onSlideChange = () => {
|
|
|
|
|
console.log("slide change");
|
|
|
|
|
};
|
|
|
|
|
const currentRowIndex = ref(-1);
|
|
|
|
|
// 定义行类名方法
|
|
|
|
|
const handleRowClassName = ({ row }) => {
|
|
|
|
|
return row.train_number === currentRowIndex.value ? 'selected-row' : '';
|
|
|
|
|
return row.id === currentRow.value.id ? 'selected-row' : '';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 行点击事件处理
|
|
|
|
|
const handleRowClick = (row, event, rowIndex) => {
|
|
|
|
|
currentRowIndex.value = row.train_number;
|
|
|
|
|
getDetail(row.id)
|
|
|
|
|
currentRow.value = row;
|
|
|
|
|
getFileList()
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
