修改传参方式
This commit is contained in:
@ -82,15 +82,15 @@
|
||||
</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">
|
||||
<span style="color: #1890ff; cursor: pointer; margin-right: 15px;" @click="handleDetails(scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="handleConfig(scope.row)" size="small">
|
||||
</span>
|
||||
<span style="color: #666666; cursor: pointer; margin-right: 15px;" @click="handleConfig(scope.row)">
|
||||
配置
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="handleDelete(scope.row)" size="small">
|
||||
</span>
|
||||
<span style="color: #666666; cursor: pointer;" @click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -106,8 +106,18 @@
|
||||
|
||||
<script setup>
|
||||
import { Search, CirclePlus, Setting } from '@element-plus/icons-vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
|
||||
// 定义props接收数据
|
||||
const props = defineProps({
|
||||
tableData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
list: [],
|
||||
total: 0
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 搜索表单数据
|
||||
const searchForm = reactive({
|
||||
@ -125,112 +135,17 @@ const loading = ref(false);
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 545
|
||||
total: 0
|
||||
});
|
||||
|
||||
// 设备列表数据
|
||||
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 deviceList = ref([]);
|
||||
|
||||
// 监听props变化并更新设备列表
|
||||
watch(() => props.tableData, (newData) => {
|
||||
deviceList.value = newData.list || [];
|
||||
pagination.total = newData.total || 0;
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
@ -269,6 +184,7 @@ const getDeviceTypeTagType = (deviceType) => {
|
||||
// 处理搜索
|
||||
const handleSearch = () => {
|
||||
loading.value = true;
|
||||
pagination.currentPage = 1;
|
||||
// 模拟搜索请求
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
@ -292,19 +208,19 @@ const handleBatchConfig = () => {
|
||||
// 处理查看详情
|
||||
const handleDetails = (row) => {
|
||||
// 实际项目中这里应该打开设备详情的弹窗或跳转到详情页面
|
||||
ElMessage.success(`查看设备${row.deviceCode}详情`);
|
||||
ElMessage.success(`查看设备${row.deviceId}详情`);
|
||||
};
|
||||
|
||||
// 处理配置
|
||||
const handleConfig = (row) => {
|
||||
// 实际项目中这里应该打开设备配置的弹窗
|
||||
ElMessage.success(`配置设备${row.deviceCode}`);
|
||||
ElMessage.success(`配置设备${row.deviceId}`);
|
||||
};
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要删除设备${row.deviceCode}吗?`,
|
||||
`确定要删除设备${row.deviceId}吗?`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
|
||||
Reference in New Issue
Block a user