IOT/web-Iot
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增编辑设备初始化

Browse Source
This commit is contained in:
mmc
2026-05-19 17:20:20 +08:00
parent 045be7f605
commit 64682d9ef5
1 changed files with 58 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/SystemSetting/DeviceAccessPage.tsx
View File

@@ -7,8 +7,7 @@ import {
PlusOutlined, EditOutlined, DeleteOutlined, ProductOutlined,
AppstoreOutlined, SwapOutlined, VideoCameraOutlined
} from '@ant-design/icons';
import { addDeviceModel, addProduct, deleteModel, deleteProduct, getConnectTypes, getDataTypesApi, getDeviceModelList, getProductPage, updateDeviceModel, updateProduct } from '../../api/deviceAccess.ts';
import { Z_FIXED } from 'zlib';
import { addIotDevice, updateIotDevice, addDeviceModel, addProduct, deleteModel, deleteProduct, getConnectTypes, getDataTypesApi, getDeviceModelList, getProductPage, updateDeviceModel, updateProduct } from '../../api/deviceAccess.ts';
const { Option } = Select;
const { TabPane } = Tabs;
@@ -48,21 +47,7 @@ let mappingInitList = [
{ id: 1, productId: 1, standardCode: 'device_online', sourceField: 'online_flag', convertRule: 'value==1?true:false' }
];
const deviceList = [
{
id: 1, name: '1#阵列区球机', sn: 'HK20260507001',
productId: 1, productName: '海康威视摄像头', modelId: 10, modelName: '通用视频监控设备',
protocolType: 'onvif', ip: '192.168.1.65', port: 80, username: 'admin', password: '123456',
mqttServer: '', mqttPort: 1883, clientId: '', mqttUsername: '', mqttPassword: '',
alarmConfig: {}, onlineStatus: 1, createTime: '2026-05-07 10:23:45'
},
{
id: 2, name: '1#环境传感器', sn: 'SEN001',
productId: 3, productName: '通用MQTT设备', modelId: 11, modelName: '环境监测设备',
protocolType: 'mqtt', mqttServer: 'tcp://192.168.1.200', mqttPort: 1883, clientId: 'sen_001',
alarmConfig: { tempMax: 60, tempMin: 0, humiMax: 90, humiMin: 20 }, onlineStatus: 1
}
];
export default function DeviceAccessPage() {
const [activeTab, setActiveTab] = useState('device');
@@ -75,6 +60,7 @@ export default function DeviceAccessPage() {
const [deviceProtocol, setDeviceProtocol] = useState('onvif');
const [productProtocol, setProductProtocol] = useState('');
const [deviceList, setDeviceList] = useState([]); // 👈 替换这行
const [modelDetail, setModelDetail] = useState<any>({ props: [], events: [], actions: [] });
const [itemModal, setItemModal] = useState(false);
@@ -275,6 +261,38 @@ export default function DeviceAccessPage() {
let success = false;
try {
if (modalType === 'device') {
// 组装你需要的传参格式
const submitData = {
id: editData?.id, // 编辑才有
deviceName: values.name, // 设备名称
sn: values.sn, // SN
productId: values.productId,
modelId: values.modelId || 10, // 默认给一个
connectType: values.protocolType || 'ONVIF',
ip: values.ip,
port: values.port,
username: values.username,
password: values.password,
remark: values.remark || '阵列区监控设备',
orgId: 1,
siteId: 100,
};
let res;
if (editData) {
res = await updateIotDevice(submitData); // 编辑
} else {
res = await addIotDevice(submitData); // 新增
}
if (res.code === 200) {
messageApi.success(editData ? '编辑设备成功' : '新增设备成功');
success = true;
} else {
messageApi.error(res.msg || '操作失败');
}
}
if (modalType === 'model') {
const submitData = {
id: editData?.id,
@@ -400,13 +418,28 @@ export default function DeviceAccessPage() {
// 表格列
const deviceColumns = [
{ title: '设备名称', dataIndex: 'name' },
{ title: '设备名称', dataIndex: 'deviceName' }, // 👈 改成 deviceName
{ title: 'SN', dataIndex: 'sn' },
{ title: '所属产品', dataIndex: 'productName' },
{ title: '物模型', dataIndex: 'modelName' },
{ title: '协议', render: t => <Tag>{t.protocolType.toUpperCase()}</Tag> },
{ title: '状态', render: r => <Tag color={r.onlineStatus ? 'green' : 'red'}>{r.onlineStatus ? '在线' : '离线'}</Tag> },
{ title: '操作', fixed: "right", render: r => <Button type="text" icon={<EditOutlined />} onClick={() => openModal('device', r)}>编辑</Button> }
{ title: '产品ID', dataIndex: 'productId' },
{ title: '模型ID', dataIndex: 'modelId' },
{ title: 'IP', dataIndex: 'ip' },
{ title: '端口', dataIndex: 'port' },
{ title: '账号', dataIndex: 'username' },
{
title: '状态',
render: (r) => <Tag color={r.onlineStatus ? 'green' : 'red'}>
{r.onlineStatus ? '在线' : '离线'}
</Tag>
},
{
title: '操作',
fixed: 'right',
render: (r) => (
<Button type="text" icon={<EditOutlined />} onClick={() => openModal('device', r)}>
编辑
</Button>
)
}
];
const modelColumns = [
@@ -617,6 +650,8 @@ export default function DeviceAccessPage() {
// 自动设置协议并回填表单
setDeviceProtocol(protocol.toUpperCase());
form.setFieldsValue({ protocolType: protocol });
form.setFieldsValue({ modelId: targetProduct.modelId || 10 });
// 自动回填产品里的协议配置
const configFields = ['ip', 'port', 'username', 'password', 'rtspUrl', 'mqttServer', 'mqttPort', 'clientId', 'mqttUsername', 'mqttPassword'];