refactor(demo1): 重构示范电站页面布局和样式
- 调整了设备情况、电站一次系统图等组件的布局 - 优化了卡片样式，添加了新的运行步骤日志卡片 - 修改了标题组件的样式，增加了字体大小等属性 - 调整了安全运行天数的展示方式，增加了背景图片
This commit is contained in:
226
src/views/demo1/components/czzljl.vue
Normal file
226
src/views/demo1/components/czzljl.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="operation-log-container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-title">
|
||||
<el-icon class="title-icon">
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<h1>操作指令记录</h1>
|
||||
</div>
|
||||
|
||||
<!-- 搜索和操作区域 -->
|
||||
<div class="search-bar">
|
||||
<el-select v-model="selectedCommandType" placeholder="输入操作指令..." class="search-select" clearable>
|
||||
<el-option v-for="type in commandTypes" :key="type.value" :label="type.label" :value="type.value" />
|
||||
</el-select>
|
||||
|
||||
<el-button type="primary" class="send-btn">
|
||||
<el-icon>
|
||||
<Paperclip />
|
||||
</el-icon>
|
||||
发送
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" :plain="true" class="export-btn">
|
||||
<el-icon>
|
||||
<Download />
|
||||
</el-icon>
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table :data="tableData" border stripe class="log-table">
|
||||
<el-table-column type="selection" width="50" />
|
||||
|
||||
<el-table-column prop="commandType" label="指令类型" width="120" />
|
||||
|
||||
<el-table-column prop="operationContent" label="操作内容" min-width="200" />
|
||||
|
||||
<el-table-column prop="device" label="设备" width="100" />
|
||||
|
||||
<el-table-column prop="status" label="状态" width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 'SUCCESS' ? 'success' : 'danger'" effect="light"
|
||||
class="status-tag">
|
||||
<el-icon :class="scope.row.status === 'SUCCESS' ? 'success-icon' : 'error-icon'">
|
||||
<Check v-if="scope.row.status === 'SUCCESS'" />
|
||||
<Close v-else />
|
||||
</el-icon>
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="time" label="时间" width="140" />
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-container">
|
||||
<div class="record-info">
|
||||
显示第1到7条，共54条记录
|
||||
</div>
|
||||
|
||||
<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :page-count="totalPages"
|
||||
layout="prev, pager, next" @current-change="handlePageChange" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
DocumentChecked,
|
||||
Paperclip,
|
||||
Download,
|
||||
Check,
|
||||
Close
|
||||
} from '@element-plus/icons-vue';
|
||||
|
||||
// 指令类型选项
|
||||
const commandTypes = [
|
||||
{ label: '系统自检', value: 'system_check' },
|
||||
{ label: '闭合馈线开关', value: 'close_feeder_switch' },
|
||||
{ label: '闭合保护开关', value: 'close_protection_switch' },
|
||||
{ label: '断开馈线开关', value: 'open_feeder_switch' },
|
||||
];
|
||||
|
||||
// 选中的指令类型
|
||||
const selectedCommandType = ref('');
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
commandType: '系统自检',
|
||||
operationContent: '系统进入正常供电模式.',
|
||||
device: '主系统',
|
||||
status: 'SUCCESS',
|
||||
time: '09:51:24'
|
||||
},
|
||||
{
|
||||
commandType: '闭合馈线开关',
|
||||
operationContent: '馈线开关A已闭合，负载A.',
|
||||
device: '主系统',
|
||||
status: 'SUCCESS',
|
||||
time: '09:41:20'
|
||||
},
|
||||
{
|
||||
commandType: '闭合保护开关',
|
||||
operationContent: '闭合母线开关',
|
||||
device: '主系统',
|
||||
status: 'ERROR',
|
||||
time: '09:21:24'
|
||||
},
|
||||
{
|
||||
commandType: '系统自检',
|
||||
operationContent: '母线电压稳定在110KV',
|
||||
device: '主系统',
|
||||
status: 'SUCCESS',
|
||||
time: '09:11:24'
|
||||
},
|
||||
{
|
||||
commandType: '断开馈线开关',
|
||||
operationContent: '闭合馈线开关',
|
||||
device: '主系统',
|
||||
status: 'SUCCESS',
|
||||
time: '09:02:24'
|
||||
},
|
||||
{
|
||||
commandType: '断开馈线开关',
|
||||
operationContent: '闭合馈线开关',
|
||||
device: '主系统',
|
||||
status: 'SUCCESS',
|
||||
time: '09:02:24'
|
||||
},
|
||||
{
|
||||
commandType: '断开馈线开关',
|
||||
operationContent: '闭合馈线开关',
|
||||
device: '主系统',
|
||||
status: 'SUCCESS',
|
||||
time: '09:02:24'
|
||||
}
|
||||
]);
|
||||
|
||||
// 分页相关
|
||||
const currentPage = ref(3);
|
||||
const pageSize = ref(7);
|
||||
const totalPages = ref(20);
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page) => {
|
||||
currentPage.value = page;
|
||||
// 实际应用中这里会根据页码加载对应的数据
|
||||
console.log(`切换到第${page}页`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.operation-log-container {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
margin-right: 8px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-select {
|
||||
flex: 0 1 300px;
|
||||
}
|
||||
|
||||
.send-btn,
|
||||
.export-btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-table {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
--el-pagination-active-color: #409eff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user