Merge branch 'lx' of http://xny.yj-3d.com:3000/taoge_xiaodi/maintenance_system into tcy

2025-09-19 10:20:18 +08:00
parent 504e1760d7 16b7bd4240
commit 3c989db422
44 changed files with 3949 additions and 91 deletions
--- a/src/views/integratedManage/stateManage/components/manageForm.vue
+++ b/src/views/integratedManage/stateManage/components/manageForm.vue
@ -0,0 +1,433 @@
+<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">
+                    <el-button type="primary" link @click="handleDetails(scope.row)" size="small">
+                        查看
+                    </el-button>
+                    <el-button type="primary" link @click="handleConfig(scope.row)" size="small">
+                        配置
+                    </el-button>
+                    <el-button type="primary" link @click="handleDelete(scope.row)" size="small">
+                        删除
+                    </el-button>
+                </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 } from 'vue';
+
+
+// 搜索表单数据
+const searchForm = reactive({
+    deviceType: '',
+    station: '',
+    protocol: '',
+    status: '',
+    keyword: ''
+});
+
+// 表格加载状态
+const loading = ref(false);
+
+// 分页数据
+const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 545
+});
+
+// 设备列表数据
+const deviceList = ref([
+    {
+        deviceId: 'WO-2023-0620-056',
+        deviceName: '逆变器-01',
+        deviceType: '逆变器',
+        station: '兴电基站1',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'normal'
+    },
+    {
+        deviceId: 'WO-2023-0620-057',
+        deviceName: '温度传感器-45',
+        deviceType: '传感器',
+        station: '兴电基站2',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'interrupt'
+    },
+    {
+        deviceId: 'WO-2023-0620-058',
+        deviceName: '智能电表-03',
+        deviceType: '电表',
+        station: '兴电基站3',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'abnormal'
+    },
+    {
+        deviceId: 'WO-2023-0620-059',
+        deviceName: '监控摄像头-02',
+        deviceType: '摄像头',
+        station: '兴电基站4',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'normal'
+    },
+    {
+        deviceId: 'WO-2023-0620-060',
+        deviceName: '控制器-07',
+        deviceType: '控制器',
+        station: '兴电基站5',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'normal'
+    },
+    {
+        deviceId: 'WO-2023-0620-061',
+        deviceName: '逆变器-02',
+        deviceType: '逆变器',
+        station: '兴电基站1',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'normal'
+    },
+    {
+        deviceId: 'WO-2023-0620-062',
+        deviceName: '电流传感器-08',
+        deviceType: '传感器',
+        station: '兴电基站1',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'normal'
+    },
+    {
+        deviceId: 'WO-2023-0620-063',
+        deviceName: '多功能电表-12',
+        deviceType: '电表',
+        station: '兴电基站1',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'normal'
+    },
+    {
+        deviceId: 'WO-2023-0620-064',
+        deviceName: '门禁摄像头-05',
+        deviceType: '摄像头',
+        station: '兴电基站1',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'normal'
+    },
+    {
+        deviceId: 'WO-2023-0620-065',
+        deviceName: '开关控制器-15',
+        deviceType: '控制器',
+        station: '兴电基站1',
+        protocol: 'Modbus TCP',
+        ipAddress: '192.168.1.101',
+        lastOnlineTime: '2023-06-30 17:00',
+        status: 'normal'
+    }
+]);
+
+// 获取状态文本
+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;
+    // 模拟搜索请求
+    setTimeout(() => {
+        loading.value = false;
+        ElMessage.success('搜索成功');
+        // 实际项目中这里应该调用API获取数据
+    }, 500);
+};
+
+// 处理添加设备
+const handleAddDevice = () => {
+    // 实际项目中这里应该打开添加设备的弹窗或跳转到添加页面
+    ElMessage.success('打开添加设备窗口');
+};
+
+// 处理批量配置
+const handleBatchConfig = () => {
+    // 实际项目中这里应该打开批量配置的弹窗
+    ElMessage.success('打开批量配置窗口');
+};
+
+// 处理查看详情
+const handleDetails = (row) => {
+    // 实际项目中这里应该打开设备详情的弹窗或跳转到详情页面
+    ElMessage.success(`查看设备${row.deviceCode}详情`);
+};
+
+// 处理配置
+const handleConfig = (row) => {
+    // 实际项目中这里应该打开设备配置的弹窗
+    ElMessage.success(`配置设备${row.deviceCode}`);
+};
+
+// 处理删除
+const handleDelete = (row) => {
+    ElMessageBox.confirm(
+        `确定要删除设备${row.deviceCode}吗？`,
+        '提示',
+        {
+            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>