feat 项目部署代ç 优化

src/pages/Setting/AlgorithmSetting.tsx

@@ -49,6 +49,7 @@ const AlgorithmSetting: React.FC = () => {
   const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>('extra');
   const [modelVersionData, setModelVersionData] = useState<any[]>([]);
   const [projectData, setProjectData] = useState<any>({});
+  const [targetKeys, setTargetKeys] = useState<string[]>([]);
 
   const handleUpdateModal = () => {
     if (updateModalOpen) {
@@ -170,7 +171,9 @@ const AlgorithmSetting: React.FC = () => {
     // console.log('clickTreeNode', projectCardListRef.current)
     postGetProjectByGroupId({ id: record.id }).then((resp) => {
       let tab_data = (resp?.data?.list || []).map((v: any) => {
-        let model_data = ([...v?.models] || []).map((item: any) => ({
+        let model_data = ([...v?.models] || []).map((item: any) =>
+          (
+          {
           title: (
             <>
               <img src="/images/model.png" alt="" style={{ width: '50px' }} />
@@ -185,12 +188,15 @@ const AlgorithmSetting: React.FC = () => {
                 handleUpdateModal();
               }}
             >
-              连接
+              配置
             </Button>,
           ],
           content: <ProjectCard info={item}></ProjectCard>,
 
-        }));
+        })
+
+
+        );
         // console.log(88, model_data);
         // setProjectData({...projectData, [v.id]: v})
         return {

src/pages/Setting/components/ProjectCard.tsx

@@ -59,11 +59,11 @@ const ProjectCard: React.FC = ({ info }: { info: Record<string, any> }) => {
       <ul>
         <li style={listItemStyle}>
           <span style={listItemLabelStyle}>模型名称：</span>
-          <p className='single_line' style={listItemTextStyle}>{info.name}很多文字很多文字很多文字很多文字很多文字很多文字</p>
+          <p className='single_line' style={listItemTextStyle}>{info.modelName}</p>
         </li>
         <li style={listItemStyle}>
           <span style={listItemLabelStyle}>版本号：</span>
-          <p className='single_line' style={listItemTextStyle}>{info.remark || 'v0.01'}</p>
+          <p className='single_line' style={listItemTextStyle}>{info.version || ''}</p>
         </li>
         <li style={listItemStyle}>
           <span style={listItemLabelStyle}>更新时间：</span>

src/pages/Setting/components/TableTransfer.tsx

@@ -0,0 +1,230 @@
+import React, { useState } from 'react';
+import { Space, Switch, Table, Tag, Transfer } from 'antd';
+import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
+import type { TransferItem, TransferProps } from 'antd/es/transfer';
+import difference from 'lodash/difference';
+import {randomInt} from "@antv/xflow-extension";
+import {ProTable} from "@ant-design/pro-components";
+
+interface RecordType {
+  key: string;
+  title: string;
+  description: string;
+  tag: string;
+  age: number;
+}
+
+interface DataType {
+  key: string;
+  title: string;
+  description: string;
+  tag: string;
+  age: number;
+}
+
+
+const tableListDataSource = [];
+const valueEnum = {
+  0: 'close',
+  1: 'running',
+  2: 'online',
+  3: 'error',
+};
+
+const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
+
+for (let i = 0; i < 5; i += 1) {
+  tableListDataSource.push({
+    key: i,
+    name: 'AppName',
+    containers: Math.floor(Math.random() * 20),
+    creator: creators[Math.floor(Math.random() * creators.length)],
+    status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'],
+    createdAt: Date.now() - Math.floor(Math.random() * 100000),
+    memo:
+      i % 2 === 1
+        ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴'
+        : '简短备注文案',
+  });
+}
+console.log(tableListDataSource)
+const columns1 = [
+  {
+    title: '应用名称',
+    width: 80,
+    dataIndex: 'name',
+  },
+  {
+    title: '容器数量',
+    dataIndex: 'containers',
+  },
+  {
+    title: '状态',
+    width: 80,
+    dataIndex: 'status',
+  },
+  {
+    title: '创建者',
+    width: 80,
+    dataIndex: 'creator',
+  },
+];
+
+interface TableTransferProps extends TransferProps<TransferItem> {
+  dataSource: DataType[];
+  leftColumns: ColumnsType<DataType>;
+  rightColumns: ColumnsType<Pick<DataType, 'title'| 'key'>>
+}
+
+// Customize Table Transfer
+const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransferProps) => (
+  <Transfer {...restProps} locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
+  >
+    {({
+        direction,
+        filteredItems,
+        onItemSelectAll,
+        onItemSelect,
+        selectedKeys: listSelectedKeys,
+        disabled: listDisabled,
+      }) => {
+      const columns = direction === 'left' ? leftColumns : rightColumns;
+
+      const rowSelection: TableRowSelection<TransferItem> = {
+        getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),
+        // onSelectAll(selected, selectedRows) {
+        //   console.log(4545, selected)
+        //   const treeSelectedKeys = selectedRows
+        //     .filter((item) => !item.disabled)
+        //     .map(({ key }) => key);
+        //   const diffKeys = selected
+        //     ? difference(treeSelectedKeys, listSelectedKeys)
+        //     : difference(listSelectedKeys, treeSelectedKeys);
+        //   onItemSelectAll(diffKeys as string[], selected);
+        // },
+        onChange(selected, selectedRows, info) {
+          // console.log(4545, selected, info)
+
+          if (info.type == 'all') {
+            const treeSelectedKeys = selectedRows
+              .filter((item) => !item.disabled)
+              .map(({ key }) => key);
+            const diffKeys = selected
+              ? difference(treeSelectedKeys, listSelectedKeys)
+              : difference(listSelectedKeys, treeSelectedKeys);
+            console.log(45678, diffKeys)
+            onItemSelectAll(diffKeys as string[], true);
+          }
+        },
+        onSelect({ key }, selected) {
+          console.log(890, key)
+          onItemSelect(key as string, selected);
+        },
+        selectedRowKeys: listSelectedKeys,
+      };
+
+
+
+      return (
+
+        <Table<any>
+          rowSelection={rowSelection}
+          columns={columns}
+          dataSource={filteredItems}
+          size="small"
+          style={{ pointerEvents: listDisabled ? 'none' : undefined, width: 500 }}
+          onRow={({ key, disabled: itemDisabled }) => ({
+            onClick: () => {
+              if (itemDisabled || listDisabled) return;
+              onItemSelect(key as string, !listSelectedKeys.includes(key as string));
+            },
+          })}
+        />
+      );
+    }}
+  </Transfer>
+);
+
+const mockTags = ['cat', 'dog', 'bird'];
+
+const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
+  key: i.toString(),
+  title: `监控1`,
+  description: `DEVICE1002`,
+  tag: "走廊123",
+  age: "rtsp://129.12.12.12:90001"
+}));
+
+const originTargetKeys = mockData
+  .filter((item) => Number(item.key) % 3 > 1)
+  .map((item) => item.key);
+
+const leftTableColumns: ColumnsType<DataType> = [
+  {
+    dataIndex: 'title',
+    title: '名称',
+  },
+  {
+    dataIndex: 'tag',
+    title: '位置',
+  },
+  {
+    dataIndex: 'description',
+    title: '编码',
+  },
+  {
+    dataIndex: 'age',
+    title: '参数',
+  },
+];
+
+const rightTableColumns: ColumnsType<Pick<DataType, 'title' | 'key'>> = [
+  {
+    dataIndex: 'title',
+    title: '名称',
+  },
+  {
+    dataIndex: 'tag',
+    title: '位置',
+  },
+  {
+    dataIndex: 'description',
+    title: '编码',
+  },
+  {
+    dataIndex: 'age',
+    title: '参数',
+  },
+];
+
+export type UpdateFormProps = {
+  targetKeys: string[];
+  setTargetKeys: (data: string[])=>void;
+};
+
+const TableTransferList: React.FC<UpdateFormProps>  = (props) => {
+  const [showSearch, setShowSearch] = useState(false);
+
+  const onChange = (nextTargetKeys: string[]) => {
+    props.setTargetKeys(nextTargetKeys);
+  };
+  const triggerShowSearch = (checked: boolean) => {
+    setShowSearch(checked);
+  };
+
+  return (
+    <>
+      <TableTransfer
+        dataSource={mockData}
+
+        targetKeys={props.targetKeys}
+        showSearch={showSearch}
+        onChange={onChange}
+        leftColumns={leftTableColumns}
+        rightColumns={rightTableColumns}
+      />
+    </>
+  );
+};
+
+export default TableTransferList;

src/pages/Setting/components/UpdateForm.tsx

@@ -1,17 +1,38 @@
-import {ModalForm,ProForm} from '@ant-design/pro-components';
+import {
+  ModalForm, ProCard,
+  ProForm, ProFormDependency, ProFormDigit, ProFormList, ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+  ProFormUploadDragger,
+  StepsForm
+} from '@ant-design/pro-components';
 import {FormattedMessage, useIntl} from '@umijs/max';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
-import {Button, Form, message} from 'antd';
+import {Button, Form, message, Modal, Switch, Tree} from 'antd';
 
 import { Table, Transfer } from 'antd';
 import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
 import type { TransferItem, TransferProps } from 'antd/es/transfer';
 import {TransferDirection} from "antd/es/transfer";
 import {postAlgorithmModelGetAlgorithmModelFkSelect} from "@/services/resource/AlgorithmModel";
-import {postDeviceGetDeviceFkSelect} from "@/services/device/Device";
+import {postDeviceGetDeviceFkSelect, postDeviceGetDeviceList} from "@/services/device/Device";
 import {postDeviceGroupGetDeviceGroupTree} from "@/services/device/DeviceGroup";
 import {putRoleUpdateDevicesInGroupModel} from "@/services/device/DeviceModelInGroup";
+import {postProjectCreateProject} from "@/services/project/Project";
+import {beforeUploadFile} from "@/utils/common";
+import yaml from "js-yaml";
+import {CloseOutlined, SnippetsOutlined} from "@ant-design/icons";
+import {FormListActionType, ProFormDatePicker} from "@ant-design/pro-form/lib";
+import {postModelVersionGetModelVersionById} from "@/services/resource/ModelVersion";
 
+import difference from 'lodash/difference';
+import TableTransferList from "@/pages/Setting/components/TableTransfer";
+
+
+const formContainerWidth: number = 755;
+const stepFormItemStyleProps: Record<string, any> = {
+  width: formContainerWidth,
+};
 interface RecordType {
     key: string;
     title: string;
@@ -42,95 +63,343 @@ export type FormValueType = {
       frequency?: string;
     } & Partial<API.DeviceModelInGroup>;
 
-    export type UpdateFormProps = {
+export type UpdateFormProps = {
-      updateModalOpen: boolean;
+  updateModalOpen: boolean;
-      handleModal: () => void;
+  handleModal: () => void;
-      values: Partial<API.DeviceModelInGroup>;
+  values: Partial<API.DeviceModelInGroup>;
-      reload: any;
+  reload: any;
-    };
+};
+
+const genFormFields = (type: number)=>{
+  return (
+    <>
+      <ProFormText
+        name="name"
+        label="实验名称"
+        width="md"
+        tooltip="最长为 24 位，用于标定的唯一 id"
+        placeholder="请输入名称"
+        rules={[{ required: true }]}
+      />
+      <ProFormDatePicker name="date" label="日期" />
+    </>
+  )
+}
+const dataSource = [
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+];
 
+const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+];
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
 
   const intl = useIntl();
   const [form] = Form.useForm<API.DeviceModelInGroup>();
 
-    const [modalData, setModalData] = useState<RecordType[]>([]);
+  const [modalData, setModalData] = useState<RecordType[]>([]);
-    const [targetKeys, setTargetKeys] = useState<string[]>([]);
+  const [targetKeys, setTargetKeys] = useState<string[]>([]);
+  const [current, setCurrent] = useState(0);
 
+  const [configData, setConfigData] = useState([]);
 
-    const getModelData = () => {
+  const [addrValue, setAddr] = useState('')
-        postDeviceGetDeviceFkSelect({keyword: ''}).then((res)=>{
+
-            let result = (res.data?.list || []).map((v: any)=>{
+  const handleSelectChange = (value)=>{
-                return {
+    postModelVersionGetModelVersionById({ id: value }).then((resp) => {
-                    key: v.id,
+      let data = resp.data.modelVersion.modelConfig?.params || [];
-                    title: v.name,
+      setConfigData(data); // 更新状态
-                    chosen: false,
+    });
-                }
+  }
-            })
+
-            setModalData(result);
+  useEffect(() => {
-        })
+    if (addrValue) {
-        // setMockData(tempMockData);
+      postModelVersionGetModelVersionById({ id: 23 }).then((resp) => {
-        // setTargetKeys(tempTargetKeys);
+        let data = resp.data.modelVersion.modelConfig?.params || [];
-    };
+        setConfigData(data); // 更新状态
-    useEffect(() => {
+      });
-        setTargetKeys([])
+    }
-        if (props.updateModalOpen) {
+  }, [addrValue]);
-            getModelData();
+
-        } else {
+  const actionFormListRef = useRef<
-        }
+    FormListActionType<{
-    }, [props.updateModalOpen])
+      name: string;
-    const handleChange = (newTargetKeys: string[]) => {
+    }>
-        setTargetKeys(newTargetKeys);
+  >();
-    };
+  const getModelData = () => {
-    const handleSearch = (dir: TransferDirection, value: string) => {
+      postDeviceGetDeviceFkSelect({keyword: ''}).then((res)=>{
-        postDeviceGetDeviceFkSelect({keyword: value}).then((res)=>{
+          let result = (res.data?.list || []).map((v: any)=>{
-            let result = (res.data?.list || []).map((v: any)=>{
+              return {
-                return {
+                  key: v.id,
-                    key: v.id,
+                  title: v.name,
-                    title: v.name,
+                  chosen: false,
-                    chosen: false,
+              }
-                }
+          })
-            })
+          setModalData(result);
-            setModalData(result);
+      })
-        })
+      // setMockData(tempMockData);
-    };
+      // setTargetKeys(tempTargetKeys);
+  };
+  useEffect(() => {
+      setTargetKeys([])
+      setConfigData([])
+      if (props.updateModalOpen) {
+          getModelData();
+
+          postDeviceGetDeviceList({groupFkId: 2, page: 1, pageSize:10}).then((resp)=>{
+            console.log(111, resp)
+          })
+      } else {
+      }
+  }, [props.updateModalOpen])
+  const handleChange = (newTargetKeys: string[]) => {
+      setTargetKeys(newTargetKeys);
+  };
+  const handleSearch = (dir: TransferDirection, value: string) => {
+      postDeviceGetDeviceFkSelect({keyword: value}).then((res)=>{
+          let result = (res.data?.list || []).map((v: any)=>{
+              return {
+                  key: v.id,
+                  title: v.name,
+                  chosen: false,
+              }
+          })
+          setModalData(result);
+      })
+  };
   return (
-    <ModalForm<API.DeviceModelInGroup>
+
-      title={intl.formatMessage({
+    <StepsForm<{
-        id: 'common.modal.table.update.title',
+      name: string;
-        defaultMessage: '$$$',
+    }>
-      })}
+      stepsProps={{
-      open={props.updateModalOpen}
+        labelPlacement: 'vertical',
-      form={form}
-      autoFocusFirstInput
-      modalProps={{
-        destroyOnClose: true,
-        onCancel: () => props.handleModal(),
       }}
-      submitTimeout={2000}
+      current={current}
-      onFinish={async (values:any) => {
+      onCurrentChange={setCurrent}
-          console.log(4444, props.values)
+      onFinish={async () => {
-          putRoleUpdateDevicesInGroupModel({groupId: props.values.groupFkId, modelId: props.values.modelFkId, deviceIds: values?.devices || []}).then(()=>{
+
-              props.handleModal();
-                message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
-          }).catch(()=>{
-                message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
-          })
         return true;
       }}
+      formProps={{
+        validateMessages: {
+          required: '此项为必填项',
+        },
+      }}
+      stepsFormRender={(dom, submitter) => {
+        return (
+          <Modal
+            title="分步表单"
+            width={1200}
+            onCancel={() => {
+              setCurrent(0);
+              props.handleModal();
+            }}
+            open={props.updateModalOpen}
+            footer={submitter}
+            destroyOnClose
+          >
+            {dom}
+          </Modal>
+        );
+      }}
     >
-        <ProForm.Item name='devices'>
+
-            <Transfer
+      <StepsForm.StepForm<{
-                dataSource={modalData}
+        config: string;
-                showSearch
+      }>
-                locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
+        name="config3"
-                targetKeys={targetKeys}
+        title="设备配置"
-                onChange={handleChange}
+        stepProps={{
-                onSearch={handleSearch}
+          description: '业务参数配置',
-                style={{marginBottom: '20px'}}
+        }}
-                render={(item) => item.title}
+        onFinish={async (values: any) => {
-            />
+          console.log(targetKeys)
-
+          return true;
-        </ProForm.Item>
+        }}
-</ModalForm>)}
+      >
+        <>
+          <TableTransferList setTargetKeys={setTargetKeys}
+                             targetKeys={targetKeys}></TableTransferList>
+        </>
+
+      </StepsForm.StepForm>
+      {/* 关联算法模型 */}
+      <StepsForm.StepForm<{
+        config: string;
+      }>
+        name="config"
+        title="模型参数配置"
+        stepProps={{
+          description: '业务参数配置',
+        }}
+        onFinish={async (values: any) => {
+          return true;
+        }}
+      >
+        <>
+          <ProFormSelect
+            name="addr"
+            width="xs"
+            label="模型版本"
+            onChange={handleSelectChange}
+            // dependencies 的内容会注入 request 中
+            request={async () => [
+              { label: 'V1.0', value: 22 },
+              { label: 'V1.2', value: 23 },
+            ]}
+          />
+          {
+            configData.map((item:any, index)=> {
+              console.log(typeof item.default)
+              if (typeof  item.default === 'number') {
+                return (<ProFormDigit
+                  key={index}
+                  name={item.name}
+                  label={item.name}
+                  initialValue={item.default}
+                  tooltip={item.remark}
+                />)
+              } else if (typeof  item.default === 'boolean') {
+                return (<ProFormSwitch
+                  key={index}
+                  name={item.name}
+                  label={item.name}
+                  initialValue={item.default}
+                  tooltip={item.remark}
+                />)
+              } else {
+                return (<ProFormText
+                  key={index}
+                  name={item.name}
+                  label={item.name}
+                  initialValue={item.default}
+                  tooltip={item.remark}
+                />)
+              }
+              }
+            )
+          }
+        </>
+
+      </StepsForm.StepForm>
+      {/* 业务参数配置 */}
+      <StepsForm.StepForm<{
+        config: string;
+      }>
+        name="config1"
+        title="项目参数配置"
+        stepProps={{
+          description: '业务参数配置',
+        }}
+        onFinish={async (values: any) => {
+          return true;
+        }}
+      >
+        <>
+
+          {
+            configData.map((item:any, index)=> {
+                console.log(typeof item.default)
+                if (typeof  item.default === 'number') {
+                  return (<ProFormDigit
+                    key={index}
+                    name={item.name}
+                    label={item.name}
+                    initialValue={item.default}
+                    tooltip={item.remark}
+                  />)
+                } else if (typeof  item.default === 'boolean') {
+                  return (<ProFormSwitch
+                    key={index}
+                    name={item.name}
+                    label={item.name}
+                    initialValue={item.default}
+                    tooltip={item.remark}
+                  />)
+                } else {
+                  return (<ProFormText
+                    key={index}
+                    name={item.name}
+                    label={item.name}
+                    initialValue={item.default}
+                    tooltip={item.remark}
+                  />)
+                }
+              }
+            )
+          }
+        </>
+
+      </StepsForm.StepForm>
+
+    </StepsForm>
+
+
+
+//     <ModalForm<API.DeviceModelInGroup>
+//       title={intl.formatMessage({
+//         id: 'common.modal.table.update.title',
+//         defaultMessage: '$$$',
+//       })}
+//       open={props.updateModalOpen}
+//       form={form}
+//       autoFocusFirstInput
+//       modalProps={{
+//         destroyOnClose: true,
+//         onCancel: () => props.handleModal(),
+//       }}
+//       submitTimeout={2000}
+//       onFinish={async (values:any) => {
+//           console.log(4444, props.values)
+//           putRoleUpdateDevicesInGroupModel({groupId: props.values.groupFkId, modelId: props.values.modelFkId, deviceIds: values?.devices || []}).then(()=>{
+//               props.handleModal();
+//                 message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
+//           }).catch(()=>{
+//                 message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
+//           })
+//         return true;
+//       }}
+//     >
+//         <ProForm.Item name='devices'>
+//             <Transfer
+//                 dataSource={modalData}
+//                 showSearch
+//                 locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
+//                 targetKeys={targetKeys}
+//                 onChange={handleChange}
+//                 onSearch={handleSearch}
+//                 style={{marginBottom: '20px'}}
+//                 render={(item) => item.title}
+//             />
+//
+//         </ProForm.Item>
+// </ModalForm>
+
+  )}
 export default UpdateForm;