feat: 新页面开发
JINGYJ
2 months ago
parent
655c1b84d8
commit
caabce90ba
@ -1,3 +1,130 @@
|
||||
<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>
|
||||
Loading…
Reference in New Issue