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

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-04-30 10:02:29
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-07-22 11:40:49
 * @FilePath: \general-ai-platform-web\src\pages\Business\DeviceGroup\components\modelSetting.tsx
 * @Description: 业务模型部署
 * @交互说明
 * 1、业务模型部署列表的分页展示
 * 2、配置参数功能
 */
import TableActionCard from '@/components/TableActionCard';
import { apiEntityNodesDeviceModels } from '@/services/business/entity';
import { isSuccessApi } from '@/utils/forApi';
import type { ProColumns } from '@ant-design/pro-components';
import { ProList, ProTable } from '@ant-design/pro-components';
import { FormattedMessage } from '@umijs/max';
import { Button } from 'antd';
import { proTableDefaultOptions } from '../../../../../config/defaultTable';

import { useEffect, useState } from 'react';
// import CreateForm from './components/createForm';
import CreateModelParams from './createModelParams';

type ModelSettingProps = {
  info: Record<string, any>;
  commInfo: Record<string, any>;
  nodeInfo: Record<string, any>;
};

const ModelSetting: React.FC<ModelSettingProps> = (props) => {
  /**state */
  const [modelData, setModelData] = useState<Record<string, any>[]>([]); // 列表数据

  // const intl = useIntl();

  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
  // const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
  //  动态设置每页数量
  const [currentRow, setCurrentRow] = useState<Record<string, any>>({});

  /**配置参数 */
  const handleCreateModal = () => {
    setCreateModalOpen(!createModalOpen);
  };

  // 业务模型列表信息
  const columns: ProColumns<Record<string, any>>[] = [
    {
      title: <FormattedMessage id="base_model.table.list.name" defaultMessage="基础模型名称" />,
      dataIndex: 'model_name',
      hideInSearch: true,
      key: 'fixedName',
      fixed: 'left',
      width: '30%',
    },
    {
      title: <FormattedMessage id="base_model.table.list.version" defaultMessage="版本" />,
      dataIndex: 'model_version',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: (
        <FormattedMessage id="base_model.table.list.runtimeLibFile" defaultMessage="运行库镜像" />
      ),
      dataIndex: 'model_hub_image',
      hideInSearch: true,
      render: (dom, record) => {
        return (
          <div>
            {record.model_hub_image ? (
              dom
            ) : (
              <div className={`gn_list_type_tag flex items-center justify-center active2`}>
                <span className="dot"></span>
                <span>
                  <FormattedMessage
                    id="base_model.table.list.undeployed.runtimeLibFile"
                    defaultMessage="未部署"
                  />
                </span>
              </div>
            )}
          </div>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      key: 'option',
      render: (_, record) => [
        <TableActionCard
          key="TableActionCardRef"
          renderActions={[
            {
              key: 'setConfig',
              renderDom: (
                <Button
                  key="setConfig"
                  type="link"
                  size="small"
                  onClick={() => {
                    setCurrentRow({
                      ...record,
                      base_model_id: record.model_id,
                      busi_model_id: record?.parentInfo?.busi_model_id,
                    });
                    handleCreateModal();
                  }}
                >
                  <FormattedMessage
                    id="base_model.table.list.action.config"
                    defaultMessage="配置参数"
                  />
                </Button>
              ),
            },
          ]}
        ></TableActionCard>,
      ],
    },
  ];

  // 将数据组装成reactDom
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function toListDomByData(record) {
    let startList = [...record];
    let finalList = startList.map((item) => ({
      content: (
        <div>
          <div className="gn_list_card_title pb-[12px]">
            <span></span>
            <span>{item?.busi_model_name}</span>
          </div>
          <ProTable
            {...proTableDefaultOptions}
            className="gn_pro_table mb-[16px]"
            // headerTitle={
            //   <div>
            //     <span></span>
            //     <span>{item.name}</span>
            //   </div>
            // }
            cardProps={{
              bodyStyle: { padding: 0, margin: 0 },
            }}
            // 标题栏
            search={false}
            options={{ fullScreen: false, setting: false, density: false, reload: false }}
            rowKey="model_id"
            onDataSourceChange={(data) => {
              console.log(data, 'onDataSourceChange_data');
            }}
            pagination={false}
            columnsState={{
              persistenceKey: 'algorithm_model_list',
              persistenceType: 'localStorage',
            }}
            dataSource={item.base_models.map((baseModelItem) => {
              const { base_models, ...restInfo } = item;
              console.log(base_models, 'base_models');
              baseModelItem.parentInfo = restInfo;
              return baseModelItem;
            })}
            columns={columns}
          />
        </div>
      ),
    }));
    setModelData(finalList);
    console.log(finalList, 'toListDomByData_finalList');
  }

  // 基础模型列表数据api
  async function fetchData() {
    const resp = await apiEntityNodesDeviceModels({
      pageNo: 1,
      pageSize: 100,
      device_id: props.info.device_id,
    });
    if (isSuccessApi(resp)) {
      toListDomByData(resp.data.data);
    }
  }

  function reloadList() {
    fetchData();
  }

  // 初始化加载
  useEffect(() => {
    console.log(props.info, 'useEffect_info');
    fetchData();
  }, [props.info]);

  return (
    <div className="dg_modelSetting_page">
      <ProList<{ title: string }>
        {...proTableDefaultOptions}
        itemLayout="vertical"
        itemCardProps={{
          ghost: true,
          bodyStyle: { padding: 0, margin: 0 },
          style: {
            width: '100%',
            border: 0,
          },
        }}
        cardProps={{
          style: { padding: 0, margin: 0 }, // 设置卡片的内外边距为 0
          bodyStyle: {
            padding: 0,
            margin: 0,
            height: 'calc(100vh - 420px)',
            overflow: 'scroll',
          },
        }}
        rowKey="model_id"
        dataSource={modelData}
        pagination={false}
        rowSelection={false}
        metas={{
          content: {
            style: { margin: 0, padding: 0 },
          },
        }}
      />
      <CreateModelParams
        createModalOpen={createModalOpen}
        handleModal={handleCreateModal}
        info={currentRow}
        deviceInfo={props.info}
        commInfo={props.commInfo}
        nodeInfo={props.nodeInfo}
        reload={reloadList}
      />
    </div>
  );
};

export default ModelSetting;