You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
4.4 KiB
Vue
108 lines
4.4 KiB
Vue
<!--
|
|
* @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> |