|
|
|
|
@ -1,11 +1,3 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
|
* @Date: 2025-03-06 15:15:01
|
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
|
* @LastEditTime: 2025-03-14 11:19:33
|
|
|
|
|
* @FilePath: \vite-ai\data-dashboard\src\views\dashboard\PoleMonitor.vue
|
|
|
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="pole-monitor-wrap mt-[32px]">
|
|
|
|
|
<div class="module-header">
|
|
|
|
|
@ -22,17 +14,11 @@
|
|
|
|
|
<div class="pole-main-content px-[16px]">
|
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<div class="pole-monitor-search-box">
|
|
|
|
|
<el-select v-model="searchForm.train_number" placeholder="列车号" class="custom-select">
|
|
|
|
|
<el-option label="A" value="deviceA"></el-option>
|
|
|
|
|
<el-option label="B" value="deviceB"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-select v-model="searchForm.train_carriage_number" placeholder="车厢号" class="custom-select">
|
|
|
|
|
<el-option label="ID-001" value="id001"></el-option>
|
|
|
|
|
<el-option label="ID-002" value="id002"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-select v-model="searchForm.fault_type" placeholder="故障类型" class="custom-select">
|
|
|
|
|
<el-option label="类型1" value="id001"></el-option>
|
|
|
|
|
<el-option label="类型2" value="id002"></el-option>
|
|
|
|
|
<el-input v-model="searchForm.train_number" placeholder="列车号" class="custom-input" clearable />
|
|
|
|
|
<el-input v-model="searchForm.train_carriage_number" placeholder="车厢号" class="custom-input" clearable />
|
|
|
|
|
<el-select v-model="searchForm.fault_type" placeholder="故障类型" class="custom-select" clearable>
|
|
|
|
|
<el-option label="撑杆弯曲" value="撑杆弯曲"></el-option>
|
|
|
|
|
<el-option label="撑杆断折" value="撑杆断折"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-button type="primary" @click="handleQuery" class="basic-btn query-btn">
|
|
|
|
|
<span class="icon"></span> 查询
|
|
|
|
|
@ -44,18 +30,21 @@
|
|
|
|
|
<!-- 主体内容区域 -->
|
|
|
|
|
<div class="flex justify-between pole-monitor-main">
|
|
|
|
|
<!-- 左侧视频与缩略图区域 -->
|
|
|
|
|
<div class="left-panel w-[870px] mr-[16px]">
|
|
|
|
|
<div class="left-panel" v-if="currFileList?.length">
|
|
|
|
|
<!-- 主图显示 -->
|
|
|
|
|
<div class="main-image">
|
|
|
|
|
<!-- <img src="https://picsum.photos/300/200?random=1" alt="监控画面"> -->
|
|
|
|
|
<!-- <img src="https://picsum.phfotos/300/200?random=1" alt="监控画面"> -->
|
|
|
|
|
<!-- <video ref="refVideo" controls muted :src="currFile?.video_url" width="100%" height="100%" style="object-fit: fill;"></video> -->
|
|
|
|
|
<img src="https://picsum.photos/300/200?random=1" alt="监控画面" v-if="currFile?.image_url">
|
|
|
|
|
<Player :src="currFile?.video_url" v-else-if="currFile?.video_url" />
|
|
|
|
|
<div class="video-screen" v-if="currFile?.video_url">
|
|
|
|
|
<Player :src="currFile?.video_url" :is-playing="isPlaying"
|
|
|
|
|
@play="isPlaying = true" @pause="isPlaying = false" />
|
|
|
|
|
</div>
|
|
|
|
|
<img src="https://picsum.photos/300/200?random=1" alt="监控画面" v-else-if="currFile?.image_url">
|
|
|
|
|
<div v-else>
|
|
|
|
|
<!-- //TODO 视频【图片】加载失败 -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="image-info">
|
|
|
|
|
<!-- //TODO 参数单位和待确认 -->
|
|
|
|
|
<!-- //TODO 参数单位和待确认 -->
|
|
|
|
|
<span>长: {{ currFile?.length }}</span>
|
|
|
|
|
<span>宽: {{ currFile?.width }}</span>
|
|
|
|
|
<span>高: {{ currFile?.height }}</span>
|
|
|
|
|
@ -63,7 +52,6 @@
|
|
|
|
|
<span>重量: {{ currFile?.weight }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 缩略图区域 -->
|
|
|
|
|
<div class="thumbnail-container mt-[16px] w-[870px]">
|
|
|
|
|
<swiper ref="swiperRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
|
|
|
|
|
@ -72,8 +60,8 @@
|
|
|
|
|
<swiper-slide v-for="(file, index) in currFileList" :key="index"
|
|
|
|
|
@click="handleSlideClick(index)" :class="{ 'active-slide': activeIndex === index }">
|
|
|
|
|
<img :src="file?.image_url" v-if="file?.image_url" />
|
|
|
|
|
<video ref="refVideo" :controls="false" muted :src="file?.video_url" width="100%"
|
|
|
|
|
height="144" v-else-if="file?.video_url" style="object-fit: fill;"></video>
|
|
|
|
|
<SwiperPlayer :videoUrl="file?.video_url" v-else-if="file?.video_url"
|
|
|
|
|
:isPlaying="isPlaying && (activeIndex === index)" />
|
|
|
|
|
<div v-else>
|
|
|
|
|
<!-- //TODO 视频【图片】加载失败 -->
|
|
|
|
|
</div>
|
|
|
|
|
@ -81,6 +69,7 @@
|
|
|
|
|
</swiper>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left-panel empty-bg" v-else></div>
|
|
|
|
|
<!-- 右侧表格区域 -->
|
|
|
|
|
<div class="flex-1 right-panel">
|
|
|
|
|
<div class="bg-transparent baseTable_wrap">
|
|
|
|
|
@ -103,6 +92,7 @@
|
|
|
|
|
import Player from '@/components/videoPlayer/Player.vue'
|
|
|
|
|
import ContentHeader from '@/components/ContentHeader.vue';
|
|
|
|
|
import { BaseTable } from "@/components/CustomTable";
|
|
|
|
|
import SwiperPlayer from './components/SwiperPlayer.vue'
|
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
|
|
|
import { Navigation, Scrollbar } from "swiper/modules";
|
|
|
|
|
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
|
|
|
|
|
@ -115,30 +105,9 @@ defineOptions({
|
|
|
|
|
name: "PoleMonitorIndex"
|
|
|
|
|
});
|
|
|
|
|
const modules = [Navigation, Scrollbar];
|
|
|
|
|
// 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 videoUrl = ref("http://192.168.10.28:8081/%E4%BA%A4%E8%AD%A6%E6%89%A7%E6%B3%95%E8%AE%B0%E5%BD%95%E4%BB%AA%E8%A7%86%E9%A2%91/guidang/zhixingren/AB4303403_090976_20240415164239_20240415162738MEDIA_CH0_090976_4303403_00000000_003.mp4");
|
|
|
|
|
|
|
|
|
|
const activeIndex = ref(-1);
|
|
|
|
|
const handleSlideClick = (index) => {
|
|
|
|
|
console.log(index);
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
currFile.value = currFileList.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 columns = [
|
|
|
|
|
{
|
|
|
|
|
label: "车号",
|
|
|
|
|
@ -191,6 +160,7 @@ const listData = ref<Record<string, any>[]>([]); // 列表数据
|
|
|
|
|
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: "",
|
|
|
|
|
train_carriage_number: "",
|
|
|
|
|
@ -198,17 +168,60 @@ const searchForm = reactive({
|
|
|
|
|
type: "pole"
|
|
|
|
|
});
|
|
|
|
|
const dataLoading = ref(true);
|
|
|
|
|
// 获取详情
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const isCurrPlaying = computed(() => {
|
|
|
|
|
// return (index) => {
|
|
|
|
|
// return isPlaying.value && (activeIndex === index)
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
const togglePlay = () => {
|
|
|
|
|
isPlaying.value = !isPlaying.value;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSlideClick = (index) => {
|
|
|
|
|
if (activeIndex.value === index) {
|
|
|
|
|
togglePlay() // 播放 暂停
|
|
|
|
|
} else {
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
currFile.value = currFileList.value[index]
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
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]
|
|
|
|
|
// }
|
|
|
|
|
// } catch (error) {
|
|
|
|
|
// console.log(error, 'getDetailList_error')
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// TODO mock 获取视频列表数据
|
|
|
|
|
const getFileList = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const res = await getAppearanceMonitorDetailApi({ id: currentRow.value?.id, current: 1, pageSize: 1000 })
|
|
|
|
|
console.log(res.data, 'getDetailList_data')
|
|
|
|
|
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.log(error, 'getDetailList_error')
|
|
|
|
|
console.error('获取数据失败:', error)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -235,6 +248,7 @@ const getList = async () => {
|
|
|
|
|
console.error('获取数据失败:', error)
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 查询方法
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
getList()
|
|
|
|
|
|
