td_official/src/views/demo1/components/czzljl.vue

<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>