<!--
* @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>