1.新增报警管理部分图表
2.修改箭头为本地图片 3.优化部分样式 4.完成性能比水滴图
This commit is contained in:
re-JZzzz
332
src/views/integratedManage/stateManage/components/manageForm.vue
Normal file
332
src/views/integratedManage/stateManage/components/manageForm.vue
Normal file
@ -0,0 +1,332 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user