maintenance_system/src/views/integratedManage/stateManage/components/manageForm.vue

<template>
    <div class="manage-form-container">
        <!-- 搜索和筛选区域 -->
        <div class="search-filter-section">
            <el-row gutter="12" align="middle">
                <el-col :span="2">
                    <el-select v-model="searchForm.deviceType" placeholder="设备类型" clearable>
                        <el-option label="全部类型" value="" />
                        <el-option label="逆变器" value="逆变器" />
                        <el-option label="传感器" value="传感器" />
                        <el-option label="电表" value="电表" />
                        <el-option label="摄像头" value="摄像头" />
                        <el-option label="控制器" value="控制器" />
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-select v-model="searchForm.status" placeholder="设备状态" clearable>
                        <el-option label="全部状态" value="" />
                        <el-option label="正常" value="normal" />
                        <el-option label="异常" value="abnormal" />
                        <el-option label="中断" value="interrupt" />
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-select v-model="searchForm.protocol" placeholder="通讯状态" clearable>
                        <el-option label="全部状态" value="" />
                        <el-option label="Modbus TCP" value="Modbus TCP" />
                        <el-option label="其他协议" value="其他" />
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-select v-model="searchForm.station" placeholder="所属电站" clearable>
                        <el-option label="全部电站" value="" />
                        <el-option label="兴电基站1" value="兴电基站1" />
                        <el-option label="兴电基站2" value="兴电基站2" />
                        <el-option label="兴电基站3" value="兴电基站3" />
                        <el-option label="兴电基站4" value="兴电基站4" />
                        <el-option label="兴电基站5" value="兴电基站5" />
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="handleSearch" style="width: 100%">
                        <el-icon><Search /></el-icon>
                        搜索
                    </el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="handleAddDevice" style="width: 100%">
                        <el-icon><CirclePlus /></el-icon>
                        添加设备
                    </el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="handleBatchConfig" style="width: 100%">
                        <el-icon><Setting /></el-icon>
                        批量配置
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 设备信息表格 -->
        <el-table v-loading="loading" :data="deviceList" style="width: 100%">
            <el-table-column prop="deviceId" label="设备ID" min-width="120" align="center" />
            <el-table-column prop="deviceName" label="设备名称" min-width="120" align="center" />
            <el-table-column prop="deviceType" label="类型" min-width="100" align="center">
                <template #default="scope">
                    <el-tag :type="getDeviceTypeTagType(scope.row.deviceType)" :effect="'light'">
                        {{ scope.row.deviceType }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="station" label="所属电站" min-width="120" align="center" />
            <el-table-column prop="protocol" label="通讯协议" min-width="100" align="center" />
            <el-table-column prop="ipAddress" label="IP地址" min-width="120" align="center" />
            <el-table-column prop="lastOnlineTime" label="最后在线时间" min-width="150" align="center" />
            <el-table-column prop="status" label="状态" min-width="80">
                <template #default="scope">
                    <el-tag :type="getStatusTagType(scope.row.status)" :effect="light">
                        {{ getStatusText(scope.row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="150" fixed="right">
                <template #default="scope">
                    <span style="color: #1890ff; cursor: pointer; margin-right: 15px;" @click="handleDetails(scope.row)">
                        查看
                    </span>
                    <span style="color: #666666; cursor: pointer; margin-right: 15px;" @click="handleConfig(scope.row)">
                        配置
                    </span>
                    <span style="color: #666666; cursor: pointer;" @click="handleDelete(scope.row)">
                        删除
                    </span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, jumper"
                :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import { Search, CirclePlus, Setting } from '@element-plus/icons-vue';
import { ref, reactive, watch } from 'vue';

// 定义props接收数据
const props = defineProps({
  tableData: {
    type: Object,
    default: () => ({
      list: [],
      total: 0
    })
  }
});

// 搜索表单数据
const searchForm = reactive({
    deviceType: '',
    station: '',
    protocol: '',
    status: '',
    keyword: ''
});

// 表格加载状态
const loading = ref(false);

// 分页数据
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
});

// 设备列表数据
const deviceList = ref([]);

// 监听props变化并更新设备列表
watch(() => props.tableData, (newData) => {
  deviceList.value = newData.list || [];
  pagination.total = newData.total || 0;
}, { immediate: true, deep: true });

// 获取状态文本
const getStatusText = (status) => {
    const statusMap = {
        normal: '正常',
        interrupt: '中断',
        abnormal: '异常'
    };
    return statusMap[status] || status;
};

// 获取状态标签类型
const getStatusTagType = (status) => {
    const typeMap = {
        normal: 'success',
        interrupt: 'warning',
        abnormal: 'danger'
    };
    return typeMap[status] || 'default';
};



// 获取设备类型标签类型
const getDeviceTypeTagType = (deviceType) => {
    const typeMap = {
        '逆变器': 'primary',
        '传感器': 'success',
        '电表': 'warning',
        '摄像头': 'info',
        '控制器': 'danger'
    };
    return typeMap[deviceType] || 'default';
};

// 处理搜索
const handleSearch = () => {
    loading.value = true;
    pagination.currentPage = 1;
    // 模拟搜索请求
    setTimeout(() => {
        loading.value = false;
        ElMessage.success('搜索成功');
        // 实际项目中这里应该调用API获取数据
    }, 500);
};

// 处理添加设备
const handleAddDevice = () => {
    // 实际项目中这里应该打开添加设备的弹窗或跳转到添加页面
    ElMessage.success('打开添加设备窗口');
};

// 处理批量配置
const handleBatchConfig = () => {
    // 实际项目中这里应该打开批量配置的弹窗
    ElMessage.success('打开批量配置窗口');
};

// 处理查看详情
const handleDetails = (row) => {
    // 实际项目中这里应该打开设备详情的弹窗或跳转到详情页面
    ElMessage.success(`查看设备${row.deviceId}详情`);
};

// 处理配置
const handleConfig = (row) => {
    // 实际项目中这里应该打开设备配置的弹窗
    ElMessage.success(`配置设备${row.deviceId}`);
};

// 处理删除
const handleDelete = (row) => {
    ElMessageBox.confirm(
        `确定要删除设备${row.deviceId}吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            // 实际项目中这里应该调用API删除设备
            ElMessage.success('删除成功');
        })
        .catch(() => {
            ElMessage.info('已取消删除');
        });
};

// 处理分页大小变化
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    // 实际项目中这里应该重新请求数据
};

// 处理分页页码变化
const handleCurrentChange = (current) => {
    pagination.currentPage = current;
    // 实际项目中这里应该重新请求数据
};
</script>

<style scoped>
.manage-form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    min-height: 100%;
}

.search-filter-section {
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f5f7fa;
    border-radius: 8px;
}

/* 下拉选择框样式优化 */
:deep(.el-select) {
    width: 100%;
}

:deep(.el-input__wrapper) {
    border-radius: 6px;
}

/* 按钮样式优化 */
:deep(.el-button) {
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
}

:deep(.el-button--primary) {
    background-color: #1890ff;
    border-color: #1890ff;
}

:deep(.el-button--primary:hover) {
    background-color: #40a9ff;
    border-color: #40a9ff;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
    .search-filter-section .el-col {
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 768px) {
    .search-filter-section {
        padding: 12px;
    }
    
    .search-filter-section .el-row {
        display: flex;
        flex-direction: column;
    }
    
    .search-filter-section .el-col {
        width: 100% !important;
        margin-bottom: 12px;
    }
}

.action-buttons {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 表格样式优化 */
:deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
}

:deep(.el-table__header-wrapper) {
    background-color: #fafafa;
}

:deep(.el-table__row:hover) {
    background-color: #f5f7fa;
}

/* 分页样式优化 */
:deep(.el-pagination) {
    display: flex;
    justify-content: flex-end;
}
</style>