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-11 13:46:36
 * @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">
        <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="search-section">
            <el-row>
                <el-col span="6">
                    <el-select v-model="searchForm.trainNo" placeholder="列车号">
                        <el-option label="全部列车" value="all"></el-option>
                    </el-select>
                </el-col>
                <el-col span="6">
                    <el-select v-model="searchForm.carriageNo" placeholder="车厢号">
                        <el-option label="全部车厢" value="all"></el-option>
                    </el-select>
                </el-col>
                <el-col span="6">
                    <el-select v-model="searchForm.faultType" placeholder="故障类型">
                        <el-option label="全部类型" value="all"></el-option>
                    </el-select>
                </el-col>
                <el-col span="3">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-col>
                <el-col span="3">
                    <el-button @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 主体内容区域 -->
        <div class="flex justify-between pole-monitor-main">
            <!-- 左侧视频与缩略图区域 -->
            <div class="left-panel w-[900px]">
                <!-- 主图显示 -->
                <div class="main-image">
                    <img src="https://picsum.photos/300/200?random=1" alt="监控画面">
                    <div class="image-info">
                        长: 35cm 宽: 52cm 高: 28cm 体积: 50960cm 重量: 58kg
                    </div>
                </div>

                <!-- 缩略图区域 -->
                <div class="thumbnail-container">
                    <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)"
                            :class="{ 'active-slide': activeIndex === index }"
                        >
                            <img :src="image" alt="Slide" />
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
            <!-- 右侧表格区域 -->
            <div class="right-panel w-[934px]">
                <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">
                        </BaseTable>
                    </template>
                </div>
                <!-- <el-table :data="tableData" stripe class="custom-table">
                    <el-table-column prop="carNo" label="车号" width="80"></el-table-column>
                    <el-table-column prop="carType" label="车型" width="60"></el-table-column>
                    <el-table-column prop="carriageNo" label="车厢号" width="80"></el-table-column>
                    <el-table-column prop="warnType" label="告警类型" width="80"></el-table-column>
                    <el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
                    <el-table-column prop="level" label="等级" width="60"></el-table-column>
                    <el-table-column prop="review" label="复核" width="60"></el-table-column>
                    <el-table-column prop="date" label="时间" width="120"></el-table-column>
                </el-table> -->
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import ContentHeader from '@/components/ContentHeader.vue';
import { BaseTable } from "@/components/CustomTable";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules";
import "swiper/css";
import 'swiper/scss';
import 'swiper/scss/navigation';

defineOptions({
    name: "PoleMonitorIndex"
});
const modules = [Navigation, Scrollbar];
// 搜索表单
const searchForm = ref({
    trainNo: 'all',
    carriageNo: 'all',
    faultType: 'all'
});
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 activeIndex = ref(-1);
const handleSlideClick = (index) => {
  console.log(index);
  activeIndex.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 currentRow = ref<Record<string, any>>({});
const columns = [
    {
        label: "车号",
        property: "carNo",
        width: 100,
    },
    {
        label: "车型",
        property: "carType",
        width: 100,
    },
    {
        label: "车厢号",
        property: "carriageNo",
        width: 100,
    },
    {
        label: "告警类型",
        property: "warnType",
        width: 120,
    },
    {
        label: "故障类型",
        property: "faultType",
        width: 120,
    },
    {
        label: "等级",
        property: "level",
        width: 80,
    },
    {
        label: "复核",
        property: "review",
        width: 80,
    },
    {
        label: "时间",
        property: "date"
    }
]

const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });

const listData = ref([]);

// const searchValue = ref("");

const formData = reactive({
    name: "",
    status: ""
});

const dataLoading = ref(true);

const getList = async () => {
    const { currentPage, pageSize } = pagination.value;
    const res = await fetch('/api/getPoleMonitorList', {
        method: 'POST',
        body: JSON.stringify({ ...formData, page: currentPage, pageSize })
    })
    const { data } = await res.json()
    console.log(data, 'getList_data')
    listData.value = data.list;
    console.log(data.list);
    pagination.value = {
        ...pagination.value,
        total: data.total
    };
    dataLoading.value = false;
};

// 查询方法
const handleQuery = () => {
    getList()
};

// 重置方法
const handleReset = () => {
    formData.name = '';
    // deviceId.value = '';
};

function handleTableChange(record) {
    console.log("handleTableChange_record", record);
    pagination.value = {
        ...pagination.value,
        currentPage: record.page,
        pageSize: record.pageSize
    };
    getList();
}

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