|
|
/*
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
* @Date: 2024-04-22 15:23:36
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
* @LastEditTime: 2024-06-11 13:30:14
|
|
|
* @FilePath: \general-ai-platform-web\src\pages\Business\DeviceGroup\index.tsx
|
|
|
* @Description: 设备节点设置 关键词 deviceGroup（dg）
|
|
|
* @交互说明
|
|
|
* 1、节点列表的查看、添加、删除
|
|
|
* 2、节点基本信息展示
|
|
|
* 3、设备列表分页查看、新建、编辑、删除、设备分类、基础模型配置
|
|
|
* 4、业务模型部署配置参数
|
|
|
* 5、企业告警设置
|
|
|
*/
|
|
|
|
|
|
import { DeviceGroupTree } from '@/components/Tree';
|
|
|
import { deviceGroupEnums } from '@/enums/device';
|
|
|
import { useBusinessInfo } from '@/hooks/useBusinessInfo';
|
|
|
import { isSuccessApi } from '@/utils/forApi';
|
|
|
|
|
|
import IsConfirmModal from '@/components/TableActionCard/isConfirmModal';
|
|
|
import {
|
|
|
apiEntityNodes,
|
|
|
apiEntityNodesDelete,
|
|
|
apiEntityNodesInfo,
|
|
|
} from '@/services/business/entity';
|
|
|
import { ProCard } from '@ant-design/pro-components';
|
|
|
import { useIntl } from '@umijs/max';
|
|
|
import { Button, Tabs, message } from 'antd';
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
import AlarmSetForm from './components/alarmSetForm';
|
|
|
import BaseInfo from './components/baseInfo';
|
|
|
import CreateForm from './components/createForm';
|
|
|
import DeviceList from './components/deviceList';
|
|
|
import ModelDeploy from './components/modelDeploy';
|
|
|
import UpdateForm from './components/updateForm';
|
|
|
|
|
|
import './index.less';
|
|
|
|
|
|
const DeviceGroup: React.FC = () => {
|
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
const intl = useIntl();
|
|
|
const { getStoreBusinessInfo } = useBusinessInfo();
|
|
|
|
|
|
/**state */
|
|
|
// 节点信息
|
|
|
const [deviceTreeList, setDeviceTreeList] = useState<Record<string, any>[]>([]);
|
|
|
const [nodeInfo, setNodeInfo] = useState<Record<string, any>>({}); // 当前节点信息
|
|
|
const [commInfo] = useState<Record<string, any>>({ ...getStoreBusinessInfo() }); // 通用信息
|
|
|
// const [parentInfo, setParentInfo] = useState<Record<string, any>>({}); // 通用信息
|
|
|
const [currTreeInfo, setCurrTreeInfo] = useState<Record<string, any>>({});
|
|
|
const [actionType, setActionType] = useState<string>('');
|
|
|
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false); // 创建新增窗口是否打开
|
|
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false); // 编辑窗口是否打开
|
|
|
const comfirmModalRef = useRef(null);
|
|
|
// 切换模块
|
|
|
const [tabKey, setTabKey] = useState<string>(deviceGroupEnums[0].key);
|
|
|
const [tabs] = useState<any>([...deviceGroupEnums]);
|
|
|
const changeTabMode = (key: string) => {
|
|
|
setTabKey(key);
|
|
|
console.log(key);
|
|
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
|
// initList(key);
|
|
|
};
|
|
|
/**节点设置 */
|
|
|
|
|
|
// 设备节点信息
|
|
|
async function loadDeviceDetail(record, isParent = false) {
|
|
|
const resp = await apiEntityNodesInfo({ node_id: record?.id });
|
|
|
if (isSuccessApi(resp) && resp?.data) {
|
|
|
// console.log(resp.data, 'loadDeviceDetail_resp');
|
|
|
if (isParent) {
|
|
|
// setParentInfo(resp?.data);
|
|
|
} else {
|
|
|
setNodeInfo({ ...resp?.data, node_id: record?.id });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 设备节点树
|
|
|
async function loadDeviceTree(otherParams = {}) {
|
|
|
console.log('loadDeviceTree_commInfo', commInfo);
|
|
|
const resp = await apiEntityNodes({ entity_id: commInfo.id, ...otherParams });
|
|
|
console.log(resp.data, 'loadDeviceTree');
|
|
|
if (isSuccessApi(resp)) {
|
|
|
setDeviceTreeList(resp?.data.data);
|
|
|
}
|
|
|
if (
|
|
|
isSuccessApi(resp) &&
|
|
|
resp?.data &&
|
|
|
resp?.data?.data &&
|
|
|
Array.isArray(resp?.data.data) &&
|
|
|
resp?.data.data.length
|
|
|
) {
|
|
|
const currNodeInfo = resp?.data.data[0];
|
|
|
loadDeviceDetail(currNodeInfo);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 新增
|
|
|
const handleCreateModal = () => {
|
|
|
setCreateModalOpen(!createModalOpen);
|
|
|
};
|
|
|
// 编辑
|
|
|
const handleUpdateModal = () => {
|
|
|
setUpdateModalOpen(!updateModalOpen);
|
|
|
};
|
|
|
// 节点信息展示
|
|
|
|
|
|
// 切换
|
|
|
|
|
|
// 初始化加载
|
|
|
useEffect(() => {
|
|
|
loadDeviceTree();
|
|
|
}, []);
|
|
|
|
|
|
useEffect(() => {
|
|
|
switch (actionType) {
|
|
|
case 'deleteNode':
|
|
|
if (currTreeInfo) {
|
|
|
comfirmModalRef?.current?.confirm();
|
|
|
}
|
|
|
break;
|
|
|
case 'addNode':
|
|
|
handleCreateModal();
|
|
|
break;
|
|
|
}
|
|
|
}, [currTreeInfo, actionType]);
|
|
|
|
|
|
return (
|
|
|
<div className="flex deviceGroup_page">
|
|
|
{/* 节点列表 */}
|
|
|
<div className="dg_content gn_head_card w-[300px] node_list">
|
|
|
<ProCard className="gn_card_wrap pb-[16px]" title={<span className="head3">节点列表</span>}>
|
|
|
<div className="dg_tree_box">
|
|
|
<DeviceGroupTree
|
|
|
dataSource={deviceTreeList}
|
|
|
searchChange={(record) => {
|
|
|
console.log(record, 'searchChange');
|
|
|
loadDeviceTree({ name: record });
|
|
|
}}
|
|
|
addTreeNode={(node) => {
|
|
|
// 判断是根节点还是子节点
|
|
|
console.log(node, 'addTreeNode');
|
|
|
if (node) {
|
|
|
setCurrTreeInfo({ ...node, id: Number(node.key) });
|
|
|
} else {
|
|
|
setCurrTreeInfo({});
|
|
|
}
|
|
|
setActionType('addNode');
|
|
|
}}
|
|
|
deleteTreeNode={(node) => {
|
|
|
// 是否确认删除
|
|
|
setCurrTreeInfo(node);
|
|
|
setActionType('deleteNode');
|
|
|
console.log('deleteTreeNode_node', node, comfirmModalRef);
|
|
|
}}
|
|
|
selectTree={(selectedKeys, info) => {
|
|
|
if (selectedKeys && Array.isArray(selectedKeys) && selectedKeys.length) {
|
|
|
loadDeviceDetail({ id: selectedKeys[0] });
|
|
|
}
|
|
|
console.log('selectTree_selected', selectedKeys, info);
|
|
|
}}
|
|
|
></DeviceGroupTree>
|
|
|
</div>
|
|
|
</ProCard>
|
|
|
</div>
|
|
|
|
|
|
{/* 节点信息 */}
|
|
|
<div className="flex-1 dg_content gn_head_card node_info">
|
|
|
<ProCard
|
|
|
className="gn_card_wrap pb-[16px]"
|
|
|
title={<span className="head3">节点信息</span>}
|
|
|
extra={
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={() => {
|
|
|
handleUpdateModal();
|
|
|
}}
|
|
|
>
|
|
|
修改节点信息
|
|
|
</Button>
|
|
|
}
|
|
|
>
|
|
|
<div className="dg_content_box">
|
|
|
<BaseInfo info={nodeInfo} />
|
|
|
<Tabs
|
|
|
className="gn_tabs"
|
|
|
activeKey={tabKey}
|
|
|
items={tabs}
|
|
|
onChange={(key) => {
|
|
|
changeTabMode(key);
|
|
|
}}
|
|
|
></Tabs>
|
|
|
{tabKey === '1' && <DeviceList commInfo={commInfo} nodeInfo={nodeInfo}></DeviceList>}
|
|
|
{tabKey === '2' && <ModelDeploy nodeInfo={nodeInfo}></ModelDeploy>}
|
|
|
{tabKey === '3' && <AlarmSetForm values={nodeInfo}></AlarmSetForm>}
|
|
|
</div>
|
|
|
</ProCard>
|
|
|
</div>
|
|
|
{/* 弹窗 */}
|
|
|
<CreateForm
|
|
|
createModalOpen={createModalOpen}
|
|
|
handleModal={handleCreateModal}
|
|
|
parentInfo={currTreeInfo}
|
|
|
commInfo={commInfo}
|
|
|
reload={() => {
|
|
|
loadDeviceTree();
|
|
|
}}
|
|
|
/>
|
|
|
<UpdateForm
|
|
|
values={nodeInfo}
|
|
|
updateModalOpen={updateModalOpen}
|
|
|
handleModal={handleUpdateModal}
|
|
|
commInfo={commInfo}
|
|
|
reload={() => {
|
|
|
loadDeviceTree();
|
|
|
}}
|
|
|
/>
|
|
|
{/* UpdateForm */}
|
|
|
{/* 是否删除节点 */}
|
|
|
<IsConfirmModal
|
|
|
ref={comfirmModalRef}
|
|
|
modalProps={{
|
|
|
content: `确定删除${currTreeInfo.name}及相关信息吗？删除后将无法找回，请谨慎
|
|
|
操作.`,
|
|
|
onOk: () => {
|
|
|
console.log('删除成功');
|
|
|
apiEntityNodesDelete({ node_id: currTreeInfo.id })
|
|
|
.then(() => {
|
|
|
message.success(
|
|
|
intl.formatMessage({
|
|
|
id: 'common.action.success',
|
|
|
defaultMessage: '$$$',
|
|
|
}),
|
|
|
);
|
|
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
|
loadDeviceTree();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
message.error(
|
|
|
intl.formatMessage({
|
|
|
id: 'common.action.failure',
|
|
|
defaultMessage: '$$$',
|
|
|
}),
|
|
|
);
|
|
|
});
|
|
|
},
|
|
|
}}
|
|
|
></IsConfirmModal>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default DeviceGroup;
|