5G-Loading-Bay-Web/src/views/dashboard/PoleMonitor.vue

<!--
 * @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">
            <ContentHeader bgLayout="1855">
                <template #title>
                    <div class="w-[200px] bg_title bg_title_3">
                    </div>
                </template>
                <template #extra>
                    <div></div>
                </template>
            </ContentHeader>
        </div>
        <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-select>
                <el-button type="primary" @click="handleQuery" class="basic-btn query-btn">
                    <span class="icon"></span> 查询
                </el-button>
                <el-button @click="handleReset" class="basic-btn reset-btn">
                    <span class="icon"></span> 重置
                </el-button>
            </div>
            <!-- 主体内容区域 -->
            <div class="flex justify-between pole-monitor-main">
                <!-- 左侧视频与缩略图区域 -->
                <div class="left-panel w-[870px] mr-[16px]">
                    <!-- 主图显示 -->
                    <div class="main-image">
                        <!-- <img src="https://picsum.photos/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 v-else>
                            <!-- //TODO 视频【图片】加载失败 -->
                        </div>
                        <div class="image-info">
                        <!-- //TODO 参数单位和待确认 -->
                            <span>长: {{ currFile?.length }}</span>
                            <span>宽: {{ currFile?.width }}</span>
                            <span>高: {{ currFile?.height }}</span>
                            <span>体积: {{ currFile?.volume }}</span>
                            <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
                            :scrollbar="{ draggable: false }" :centered-slides="false" :observer="true"
                            :observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
                            <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>
                                <div v-else>
                                    <!-- //TODO 视频【图片】加载失败 -->
                                </div>
                            </swiper-slide>
                        </swiper>
                    </div>
                </div>
                <!-- 右侧表格区域 -->
                <div class="flex-1 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">
                            </BaseTable>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="bg_footer_desp">
        </div> -->
    </div>
</template>
<script lang="ts" setup>
import Player from '@/components/videoPlayer/Player.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';

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: "车号",
        property: "train_number",
        width: 130,
    },
    {
        label: "车型",
        property: "train_model",
        width: 100,
    },
    {
        label: "车厢号",
        property: "train_carriage_number",
        width: 100,
    },
    {
        label: "告警类型",
        property: "alarm_type",
        width: 120,
    },
    {
        label: "故障类型",
        property: "fault_type",
        width: 120,
    },
    {
        label: "等级",
        property: "level",
        width: 80,
    },
    {
        label: "复核",
        property: "is_reviewed",
        formatter: ({ is_reviewed }) => {
            return is_reviewed === true
                ? "是"
                : "否";
        },
        width: 80,
    },
    {
        label: "时间",
        property: "created_at"
    }
]

const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
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 searchForm = reactive({
    train_number: "",
    train_carriage_number: "",
    fault_type: "",
    type: "pole"
});
const dataLoading = ref(true);
// 获取详情
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')
    }
}

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()
};

// 重置方法
const handleReset = () => {
    searchForm.train_number = '';
    // deviceId.value = '';
    getList()
};
// 分页表格切换参数
function handleTableChange(record) {
    console.log("handleTableChange_record", record);
    pagination.value = {
        ...pagination.value,
        currentPage: record.page,
        pageSize: record.pageSize
    };
    getList();
}
// 定义行类名方法
const handleRowClassName = ({ row }) => {
    return row.id === currentRow.value.id ? 'selected-row' : '';
};

// 行点击事件处理
const handleRowClick = (row, event, rowIndex) => {
    currentRow.value = row;
    getFileList()
};

onMounted(() => {
    getList();
});
</script>
<style lang="scss">
@import url('./PoleMonitor.scss');
</style>