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.
130 lines
4.1 KiB
Vue
130 lines
4.1 KiB
Vue
<template>
|
|
<div class="appearance-monitor-warp">
|
|
<div class="appearance-monitor-left w-[56%] h-[100%]">
|
|
<div class="monitor-left-top">
|
|
<img src="https://picsum.photos/300/200?random=1" alt="监控画面">
|
|
</div>
|
|
<div class="monitor-left-bottom">
|
|
<img src="https://picsum.photos/300/200?random=2" alt="监控画面">
|
|
</div>
|
|
</div>
|
|
<div class="appearance-monitor-right w-[44%] h-[100%]">
|
|
<div class="module-header">
|
|
<ContentHeader bgLayout="918">
|
|
<template #title>
|
|
<div class="w-[200px] bg_title bg_title_5">
|
|
</div>
|
|
</template>
|
|
<template #extra>
|
|
<div></div>
|
|
</template>
|
|
</ContentHeader>
|
|
</div>
|
|
<!-- 表格区域 -->
|
|
<el-table
|
|
:data="tableData"
|
|
stripe
|
|
style="width: 100%; margin-top: 20px"
|
|
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 class="pagination-container">
|
|
<el-pagination
|
|
:page-sizes="[100, 200, 300, 400]"
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="400"
|
|
/>
|
|
</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' },
|
|
{ carNo: 'CA1002', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-12 15:33' },
|
|
// 其他数据...
|
|
]);
|
|
|
|
const total = ref(66);
|
|
|
|
// 搜索方法
|
|
const handleSearch = () => {
|
|
console.log('搜索参数', searchForm.value);
|
|
};
|
|
|
|
// 重置方法
|
|
const handleReset = () => {
|
|
searchForm.value = {
|
|
trainNo: 'all',
|
|
carriageNo: 'all',
|
|
faultType: 'all'
|
|
};
|
|
};
|
|
|
|
// 分页切换
|
|
const handlePageChange = (page) => {
|
|
console.log('当前页码', page);
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.appearance-monitor-warp {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
// align-items: center;
|
|
// .appearance-monitor-right {
|
|
// display: flex;
|
|
// }
|
|
.pagination-container {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
:deep(.el-pagination__total) {
|
|
color: #606266;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
:deep(.el-pagination__sizes .el-select__inner) {
|
|
background: #002a5c;
|
|
color: white;
|
|
border: 1px solid #409eff;
|
|
}
|
|
|
|
:deep(.el-pagination__item),
|
|
:deep(.el-pagination__button) {
|
|
background: #002a5c;
|
|
color: white;
|
|
border: 1px solid #409eff;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
:deep(.el-pagination__item.is-active) {
|
|
background: #409eff;
|
|
color: white;
|
|
|
|
}
|
|
}
|
|
</style> |