General-AI-Platform-Web/src/pages/Business/DeviceGroup/index.tsx

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-04-22 15:23:36
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-04-29 16:50:22
 * @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/deviceGroup';
import { getDeviceGroupList } from '@/services/testApi/deviceGroup';
import { ProCard } from '@ant-design/pro-components';
import { Button, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import BaseInfo from './components/baseInfo';
import CreateForm from './components/createForm';
import DeviceList from './components/deviceList';

import './index.less';

const DeviceGroup: React.FC = () => {
  /**state */
  // 节点信息
  const [deviceTreeList, setDeviceTreeList] = useState<Record<string, any>[]>([]);
  const [nodeInfo, setNodeInfo] = useState<Record<string, any>>({}); // 当前节点信息
  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false); // 创建新增窗口是否打开

  // 切换模块
  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 loadDeviceTree() {
    const resp = await getDeviceGroupList({ page: 1, pageSize: 100 });
    console.log(resp.data, 'loadDeviceTree');
    setDeviceTreeList(resp?.data.results);
    setNodeInfo(resp?.data.results[0]);
  }

  // 新增
  const handleCreateModal = () => {
    setCreateModalOpen(!createModalOpen);
  };

  // 节点信息展示

  // 切换

  // 初始化加载
  useEffect(() => {
    loadDeviceTree();
  }, []);

  return (
    <div className="flex deviceGroup_page">
      {/* 节点列表 */}
      <div className="dg_content gn_head_card w-[300px] node_list">
        <ProCard className="gn_card pb-[16px]" title={<span className="head5">节点列表</span>}>
          <div className="dg_tree_box">
            <DeviceGroupTree
              dataSource={deviceTreeList}
              changeNode={(record) => {
                setNodeInfo(record);
              }}
              addTreeNode={(node) => {
                //TODO 判断是根节点还是子节点 调用新增接口
                console.log('addTreeNode_node', node);
                handleCreateModal();
              }}
              selectTree={(selectedKeys, info) => {
                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
                info?.node && setNodeInfo(info?.node);
                // handleSelectNode(selectedKeys, info)
                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 pb-[16px]"
          title={<span className="head5">节点信息</span>}
          extra={
            <Button
              type="primary"
              onClick={() => {
                //TODO 打开修改节点信息弹窗
                // handleUpdateModal();
              }}
            >
              修改节点信息
            </Button>
          }
        >
          <div className="dg_content_box">
            <BaseInfo info={nodeInfo} />
            <Tabs
              activeKey={tabKey}
              items={tabs}
              onChange={(key) => {
                changeTabMode(key);
              }}
            ></Tabs>
            {tabKey === '1' && <DeviceList info={nodeInfo}></DeviceList>}
          </div>
        </ProCard>
      </div>
      {/* 弹窗 */}
      <CreateForm
        createModalOpen={createModalOpen}
        handleModal={handleCreateModal}
        parentInfo={nodeInfo}
        reload={() => {
          // TODO 调用获取节点列表的接口
        }}
      />
    </div>
  );
};

export default DeviceGroup;