<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:15:01
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-06 15:15:26
 * @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-warp">
        <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="pole-monitor-main">
            <!-- 左侧视频与缩略图区域 -->
            <div class="left-panel">
                <!-- 主图显示 -->
                <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">
                    <img src="https://picsum.photos/300/200?random=2" alt="监控画面">
                </div>
            </div>
            <!-- 右侧表格区域 -->
            <div class="right-panel">
                <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="time" label="时间" width="120"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import ContentHeader from '@/components/ContentHeader.vue';
import { ref } from 'vue';
// 搜索表单
const searchForm = ref({
  trainNo: 'all',
  carriageNo: 'all',
  faultType: 'all'
});

// 模拟数据
const tableData = ref([
  { carNo: 'CA1001', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-05 14:33' },
  // 其他数据...
]);
</script>
<style scoped lang="scss">
.pole-monitor-warp {
    .pole-monitor-main{
        display: flex;
        justify-content: space-between;
    }
}
</style>