332 lines
9.5 KiB
Vue
332 lines
9.5 KiB
Vue
|
<template>
|
||
|
|
<div class="manage-form-container">
|
||
|
|
<!-- 搜索和筛选区域 -->
|
||
|
|
|
||
|
|
<!-- 设备信息表格 -->
|
||
|
|
<el-table v-loading="loading" :data="deviceList" style="width: 100%" height="calc(100vh - 300px)">
|
||
|
|
<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="getStatusTagEffect(scope.row.status)">
|
||
|
|
{{ 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="total, sizes, prev, pager, next, jumper"
|
||
|
|
:total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
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 getStatusTagEffect = (status) => {
|
||
|
|
// 正常状态使用浅色效果，其他状态使用深色效果
|
||
|
|
return status === 'normal' ? 'light' : 'dark';
|
||
|
|
};
|
||
|
|
|
||
|
|
// 获取设备类型标签类型
|
||
|
|
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-form {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|