Merge wzy

Next wzy

src/app.tsx

@@ -241,10 +241,15 @@ const MenuItemIcon = (
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
 export const layout: RunTimeLayoutConfig = ({ initialState }) => {
   // console.log({ ...initialState });
-  // let ico:any = document.querySelector('link[rel="icon"]')
-  // if(ico!==null){
-  //   ico.href='https://t9.baidu.com/it/u=2615841454,1925018474&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=A0B46032495267E15A7D35CE000070A2&sec=1657645200&t=b98ebc7ac3073c248e57894e899d7ac1'
-  // }
+  let ico:any = document.querySelector('link[rel="icon"]')
+  if(ico!==null){
+    Service.settingDetail('basis').then(res=>{
+      if(res.status===200){
+        // console.log(res.result.ico)
+        ico.href=res.result.ico
+      }
+    })
+  }
   return {
     navTheme: 'light',
     headerTheme: 'light',

src/components/Upload/Image/index.tsx

@@ -20,6 +20,7 @@ interface UploadImageProps {
    */
   size?: number;
   style?: React.CSSProperties;
+  backgroundSize?:string;
 }
 
 export default ({ onChange, value, ...extraProps }: UploadImageProps) => {
@@ -76,7 +77,7 @@ export default ({ onChange, value, ...extraProps }: UploadImageProps) => {
             {values ? (
               <>
                 {/*<img width={120} height={120} src={values} />*/}
-                <div className={'upload-image'} style={{ backgroundImage: `url(${values})` }} />
+                <div className={'upload-image'} style={{ backgroundImage: `url(${values})`,backgroundSize:extraProps.backgroundSize }} />
                 <div className={'upload-image-mask'}>点击修改</div>
               </>
             ) : (

src/pages/device/Product/Detail/PropertyImport/index.tsx

@@ -214,7 +214,7 @@ const PropertyImport = (props: Props) => {
             MetadataModel.importMetadata = false;
           }}
         >
-          确认
+          确定
         </Button>,
       ]}
     >

src/pages/link/Channel/Modbus/index.tsx

@@ -19,6 +19,7 @@ import Save from './Save';
 import { getMenuPathByCode } from '@/utils/menu';
 import { useDomFullHeight } from '@/hooks';
 import { onlyMessage } from '@/utils/util';
+// import NewModbus from '../new'
 
 export const service = new Service('modbus/master');
 
@@ -210,6 +211,7 @@ const Modbus = () => {
   ];
   return (
     <PageContainer>
+      {/* <NewModbus/> */}
       <Card style={{ marginBottom: 10 }}>
         <Row gutter={[24, 24]}>
           {topCard.map((item) => (

src/pages/link/Channel/channelCard.tsx

@@ -0,0 +1,52 @@
+import { Badge } from "antd";
+import classNames from "classnames";
+import { useState } from "react";
+import './index.less'
+interface Props {
+    actions: any;
+    onClick: Function;
+    active: boolean;
+    data: any;
+    defaultActiveKey?: any;
+}
+
+const ChannelCard = (props: Props) => {
+    const [actions, setActions] = useState<boolean>(false)
+    const connectImg = require('/public/images/channel/connect.png')
+    const disconnectImg = require('/public/images/channel/disconnect.png')
+
+    return (
+        <div
+            className={
+                classNames("channel-card",
+                    {
+                        active: props.active,
+                        connect: props.data.status === 'connect',
+                        disconnect: props.data.status === 'disconnect'
+                    }
+                )}
+            onMouseEnter={() => { setActions(true) }}
+            onMouseLeave={() => { setActions(false) }}
+        >
+            <div
+                className="channel-card-top"
+                onClick={() => { props.onClick() }}
+            >
+                <div className="card-top-img"> <img src={props.data.status === 'connect' ? connectImg : disconnectImg} /></div>
+                <div className="card-top-name">这里是通道名称</div>
+                <div className="card-top-status">
+                    {props.data.status === 'connect' ?
+                        <Badge status="processing" color={'green'} text={'正常'} /> :
+                        <Badge status="processing" color={'red'} text={'禁用'} />}
+                </div>
+            </div>
+            {
+                actions && <div className="channel-card-actions">
+                    {props.actions}
+                </div>
+            }
+
+        </div>
+    )
+}
+export default ChannelCard;

src/pages/link/Channel/index.less

@@ -0,0 +1,81 @@
+.item {
+    display: flex;
+
+    .item-left {
+        margin-right: 20px;
+        padding-right: 10px;
+        border-right: 1px #EEE solid;
+        .item-left-list{
+            height: 628px;
+            overflow: overlay;
+        }
+        ::-webkit-scrollbar{
+            // display:none
+            width: 2px;
+            height: 2px;
+            scrollbar-arrow-color: #eee;
+        }
+        ::-webkit-scrollbar-thumb {
+            border-radius: 5px;
+            background: rgb(136, 136, 136);
+        }
+    }
+
+    .item-right {
+        .ant-card-body {
+            padding-top: 0;
+            padding-left: 0;
+        }
+    }
+}
+
+.channel-card {
+    height: 112px;
+    width: 220px;
+    border: 1px #E0E0E0 solid;
+    margin-top: 16px;
+
+    &.active {
+        &.connect {
+            background-color: #24b27614;
+            border: 1px solid #24B276;
+            border-radius: 2px;
+        }
+
+        &.disconnect {
+            background-color: rgba(255, 144, 0, 0.08);
+            border: 1px solid #FF9000;
+            border-radius: 2px;
+        }
+    }
+
+    .channel-card-top {
+        .card-top-img {
+            text-align: end;
+        }
+
+        .card-top-name {
+            color: #323130;
+            font-size: 16px;
+            font-weight: 600;
+            margin-left: 16px;
+            line-height: 22px;
+            position: relative;
+            bottom: 8px;
+        }
+
+        .card-top-status {
+            margin-left: 16px;
+            margin-bottom: 8px
+        }
+    }
+
+    .channel-card-actions {
+        // height: 40px;
+        background-color: #F6F6F6;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        border-top: 1px #eee solid;
+    }
+}

src/pages/link/Channel/new.tsx

@@ -0,0 +1,383 @@
+import { Button, Card, Divider, Dropdown, Input, Menu } from 'antd';
+import { useDomFullHeight } from '@/hooks';
+import './index.less'
+import SearchComponent from '@/components/SearchComponent';
+import ProTable, { ActionType, ProColumns } from '@jetlinks/pro-table';
+import PermissionButton from '@/components/PermissionButton';
+import { DeleteOutlined, EditOutlined, ExportOutlined, ImportOutlined, PlayCircleOutlined, PlusOutlined, StopOutlined } from '@ant-design/icons';
+import { useRef, useState } from 'react';
+import { useIntl } from 'umi';
+import ChannelCard from './channelCard'
+
+const NewModbus = () => {
+    const { minHeight } = useDomFullHeight(`.modbus`);
+    const intl = useIntl();
+    const actionRef = useRef<ActionType>();
+    const { permission } = PermissionButton.usePermission('link/Channel/Modbus');
+    const [param, setParam] = useState({});
+    const [activeKey, setActiveKey] = useState<any>('')
+    const data = [
+        {
+            id: 1,
+            status: 'connect',
+            state: {
+                text: '正常',
+                value: 'enabled'
+            }
+        },
+        {
+            id: 2,
+            status: 'disconnect',
+            state: {
+                text: '禁用',
+                value: 'disabled'
+            }
+        },
+    ]
+
+    const columns: ProColumns<any>[] = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            ellipsis: true,
+            fixed: 'left',
+        },
+        {
+            title: '功能码',
+            dataIndex: 'host',
+        },
+        {
+            title: '从站ID',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '寄存器数量',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '地址',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '当前数据',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '采集状态',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '状态',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        // {
+        //   title: '状态',
+        //   dataIndex: 'state',
+        //   renderText: (state) => (
+        //     <Badge text={state?.text} status={state?.value === 'disabled' ? 'error' : 'success'} />
+        //   ),
+        //   valueType: 'select',
+        //   valueEnum: {
+        //     disabled: {
+        //       text: intl.formatMessage({
+        //         id: 'pages.data.option.disabled',
+        //         defaultMessage: '禁用',
+        //       }),
+        //       status: 'disabled',
+        //     },
+        //     enabled: {
+        //       text: '正常',
+        //       status: 'enabled',
+        //     },
+        //   },
+        //   filterMultiple: false,
+        // },
+        // {
+        //   title: '操作',
+        //   valueType: 'option',
+        //   align: 'center',
+        //   width: 200,
+        //   fixed: 'right',
+        //   render: (text, record) => [
+        //     <PermissionButton
+        //       isPermission={permission.update}
+        //       key="edit"
+        //       onClick={() => {
+        //         setVisible(true);
+        //         setCurrent(record);
+        //       }}
+        //       type={'link'}
+        //       style={{ padding: 0 }}
+        //       tooltip={{
+        //         title: intl.formatMessage({
+        //           id: 'pages.data.option.edit',
+        //           defaultMessage: '编辑',
+        //         }),
+        //       }}
+        //     >
+        //       <EditOutlined />
+        //     </PermissionButton>,
+        //     <PermissionButton
+        //       type="link"
+        //       key={'action'}
+        //       style={{ padding: 0 }}
+        //       popConfirm={{
+        //         title: intl.formatMessage({
+        //           id: `pages.data.option.${
+        //             record.state.value !== 'disabled' ? 'disabled' : 'enabled'
+        //           }.tips`,
+        //           defaultMessage: '确认禁用？',
+        //         }),
+        //         onConfirm: async () => {
+        //           if (record.state.value === 'disabled') {
+        //             await service.edit({
+        //               ...record,
+        //               state: 'enabled',
+        //             });
+        //           } else {
+        //             await service.edit({
+        //               ...record,
+        //               state: 'disabled',
+        //             });
+        //           }
+        //           onlyMessage(
+        //             intl.formatMessage({
+        //               id: 'pages.data.option.success',
+        //               defaultMessage: '操作成功!',
+        //             }),
+        //           );
+        //           actionRef.current?.reload();
+        //         },
+        //       }}
+        //       isPermission={permission.action}
+        //       tooltip={{
+        //         title: intl.formatMessage({
+        //           id: `pages.data.option.${record.state.value !== 'disabled' ? 'disabled' : 'enabled'}`,
+        //           defaultMessage: record.state.value !== 'disabled' ? '禁用' : '启用',
+        //         }),
+        //       }}
+        //     >
+        //       {record.state.value !== 'disabled' ? <StopOutlined /> : <PlayCircleOutlined />}
+        //     </PermissionButton>,
+        //     <PermissionButton
+        //       isPermission={permission.view}
+        //       style={{ padding: 0 }}
+        //       key="link"
+        //       type="link"
+        //       tooltip={{
+        //         title: '数据点绑定',
+        //       }}
+        //       onClick={() => {
+        //         history.push(`${getMenuPathByCode('link/Channel/Modbus/Access')}?id=${record.id}`);
+        //       }}
+        //     >
+        //       <ControlOutlined />
+        //     </PermissionButton>,
+        //     <PermissionButton
+        //       isPermission={permission.delete}
+        //       style={{ padding: 0 }}
+        //       disabled={record.state.value === 'enabled'}
+        //       popConfirm={{
+        //         title: '确认删除',
+        //         disabled: record.state.value === 'enabled',
+        //         onConfirm: async () => {
+        //           const resp: any = await service.remove(record.id);
+        //           if (resp.status === 200) {
+        //             onlyMessage(
+        //               intl.formatMessage({
+        //                 id: 'pages.data.option.success',
+        //                 defaultMessage: '操作成功!',
+        //               }),
+        //             );
+        //             actionRef.current?.reload();
+        //           }
+        //         },
+        //       }}
+        //       key="delete"
+        //       type="link"
+        //     >
+        //       <DeleteOutlined />
+        //     </PermissionButton>,
+        //   ],
+        // },
+    ];
+
+    const menu = (
+        <Menu>
+            <Menu.Item key="1">
+                <PermissionButton
+                    isPermission={permission.export}
+                    icon={<ExportOutlined />}
+                    type="default"
+                    onClick={() => {
+                        // setExportVisible(true);
+                    }}
+                >
+                    批量导出设备
+                </PermissionButton>
+            </Menu.Item>
+            <Menu.Item key="2">
+                <PermissionButton
+                    isPermission={permission.import}
+                    icon={<ImportOutlined />}
+                    onClick={() => {
+                        // setImportVisible(true);
+                    }}
+                >
+                    批量导入设备
+                </PermissionButton>
+            </Menu.Item>
+        </Menu>
+    );
+
+    return (
+        <Card className='modbus' style={{ minHeight }}>
+            <div className='item'>
+                <div className='item-left'>
+                    <div style={{ width: 220 }}>
+                        <Input.Search
+                            placeholder="请输入名称"
+                            allowClear
+                            onSearch={(value) => {
+                                console.log(value)
+                            }}
+                        />
+                        <PermissionButton
+                            onClick={() => {
+                                // setDeviceVisiable(true);
+                            }}
+                            isPermission={permission.add}
+                            key="add"
+                            icon={<PlusOutlined />}
+                            type="default"
+                            style={{ width: '100%', marginTop: 16}}
+                        >
+                            新增
+                        </PermissionButton>
+                        <div className='item-left-list'>
+                            {
+                                data.map(item => <ChannelCard
+                                    active={activeKey === item.id}
+                                    data={item}
+                                    onClick={() => {
+                                        setActiveKey(item.id)
+                                    }}
+                                    actions={
+                                        <>
+                                            <PermissionButton
+                                                isPermission={permission.update}
+                                                key="edit"
+                                                onClick={() => {
+                                                    // setVisible(true);
+                                                    // setCurrent(record);
+                                                }}
+                                                type={'link'}
+                                                style={{ padding: 0 }}
+                                            >
+                                                <EditOutlined />编辑
+                                            </PermissionButton>
+                                            <Divider type="vertical" />
+                                            <PermissionButton
+                                                isPermission={permission.update}
+                                                key="enbale"
+                                                type={'link'}
+                                                style={{ padding: 0 }}
+                                                popConfirm={{
+                                                    title: intl.formatMessage({
+                                                        id: `pages.data.option.${item.state.value !== 'disabled' ? 'disabled' : 'enabled'
+                                                            }.tips`,
+                                                        defaultMessage: '确认禁用？',
+                                                    }),
+                                                    onConfirm: async () => {
+
+                                                    },
+                                                }}
+                                            >
+                                                {item.state.value === 'enabled' ? <StopOutlined /> : <PlayCircleOutlined />}
+                                                {item.state.value === 'enabled' ? '禁用' : '启用'}
+                                            </PermissionButton>
+                                            <Divider type="vertical" />
+                                            <PermissionButton
+                                                isPermission={permission.delete}
+                                                style={{ padding: 0 }}
+                                                disabled={item.state.value === 'enabled'}
+                                                popConfirm={{
+                                                    title: '确认删除',
+                                                    disabled: item.state.value === 'enabled',
+                                                    onConfirm: async () => {
+
+                                                    },
+                                                }}
+                                                key="delete"
+                                                type="link"
+                                            >
+                                                <DeleteOutlined />
+                                            </PermissionButton>
+                                        </>} />)
+                            }
+
+                        </div>
+                    </div>
+                </div>
+                <div className='item-right'>
+                    <SearchComponent<any>
+                        field={columns}
+                        target="modbus"
+                        onSearch={(data) => {
+                            actionRef.current?.reset?.();
+                            setParam(data);
+                        }}
+                    />
+                    <ProTable
+                        actionRef={actionRef}
+                        params={param}
+                        columns={columns}
+                        rowKey="id"
+                        scroll={{ x: '60%' }}
+                        search={false}
+                        headerTitle={
+                            <>
+                                <PermissionButton
+                                    onClick={() => {
+                                        // setMode('add');
+                                        // setVisible(true);
+                                        // setCurrent({});
+                                    }}
+                                    isPermission={permission.add}
+                                    key="add"
+                                    icon={<PlusOutlined />}
+                                    type="primary"
+                                    style={{marginRight: 10 }}
+                                >
+                                    {intl.formatMessage({
+                                        id: 'pages.data.option.add',
+                                        defaultMessage: '新增',
+                                    })}
+                                </PermissionButton>
+                                <Dropdown key={'more'} overlay={menu} placement="bottom" >
+                                    <Button>批量操作</Button>
+                                </Dropdown>
+                            </>
+                        }
+                    // request={async (params) =>
+                    //     service.query({ ...params, sorts: [{ name: 'createTime', order: 'desc' }] })
+                    // }
+                    />
+                </div>
+            </div>
+        </Card >
+    )
+}
+export default NewModbus;

src/pages/system/Basis/index.tsx

@@ -1,190 +1,159 @@
-import { Card, Form, Input, Select, Upload } from 'antd';
+import { UploadImage } from '@/components';
+import { Card, Col, Form, Input, Row, Select, } from 'antd';
+import Service from './service';
 import { useModel } from '@@/plugin-model/useModel';
-import { useEffect, useState } from 'react';
 import usePermissions from '@/hooks/permission';
 import { PermissionButton } from '@/components';
-import { UploadProps } from 'antd/lib/upload';
-import Token from '@/utils/token';
+import { onlyMessage } from '@/utils/util';
 import SystemConst from '@/utils/const';
-import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
-import styles from './index.less';
-import { PageContainer } from '@ant-design/pro-layout';
-import Service from './service';
+import { useEffect } from 'react';
 import { useDomFullHeight } from '@/hooks';
-import { onlyMessage } from '@/utils/util';
+import { PageContainer } from '@ant-design/pro-layout';
 
 const Basis = () => {
-  const service = new Service();
-  const [form] = Form.useForm();
-  const { initialState, setInitialState } = useModel('@@initialState');
-  const { permission: userPermission } = usePermissions('system/Basis');
-  const [imageUrl, setImageUrl] = useState<string>('');
-  const [loading, setLoading] = useState(false);
-  const { minHeight } = useDomFullHeight(`.basis`);
+    const { initialState, setInitialState } = useModel('@@initialState');
+    const { permission: userPermission } = usePermissions('system/Basis');
+    const [form] = Form.useForm();
+    const service = new Service();
+    const { minHeight } = useDomFullHeight(`.basis`);
 
-  const uploadProps: UploadProps = {
-    showUploadList: false,
-    listType: 'picture-card',
-    accept: 'image/jpeg,image/png',
-    action: `/${SystemConst.API_BASE}/file/static`,
-    headers: {
-      'X-Access-Token': Token.get(),
-    },
-    beforeUpload(file) {
-      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-      if (!isJpgOrPng) {
-        onlyMessage('请上传.png.jpg格式的文件', 'error');
-      }
-      return isJpgOrPng;
-    },
-    onChange(info) {
-      if (info.file.status === 'uploading') {
-        setLoading(true);
-      }
-      if (info.file.status === 'done') {
-        setImageUrl(info.file.response.result);
-        setLoading(false);
-      }
-    },
-  };
-  const uploadButton = (
-    <div>
-      {loading ? <LoadingOutlined /> : <PlusOutlined />}
-      <div style={{ marginTop: 8 }}>Upload</div>
-    </div>
-  );
 
-  const detail = async (data: any) => {
-    const res = await service.detail(data);
-    if (res.status === 200) {
-      const basis = res.result?.filter((item: any) => item.scope === 'basis');
-      const api = res?.result.filter((item: any) => item.scope === 'api');
-      localStorage.setItem(SystemConst.AMAP_KEY, api[0].properties.api);
-      // console.log(basis?.[0])
-      setImageUrl(basis[0].properties?.logo);
-      form.setFieldsValue({
-        title: basis[0].properties.title,
-        headerTheme: basis[0].properties.headerTheme,
-        apikey: api[0].properties.api,
-      });
-      setInitialState({
-        ...initialState,
-        settings: {
-          ...basis[0].properties,
-        },
-      });
-    }
-  };
-  const save = async () => {
-    const formData = await form.validateFields();
-    if (formData && imageUrl !== '') {
-      const item = [
-        {
-          scope: 'basis',
-          properties: {
-            title: formData.title,
-            headerTheme: formData.headerTheme,
-            navTheme: formData.headerTheme,
-            logo: imageUrl,
-          },
-        },
-        {
-          scope: 'api',
-          properties: {
-            api: formData.apikey,
-          },
-        },
-      ];
-      const res = await service.save(item);
-      if (res.status === 200) {
-        onlyMessage('保存成功');
-        detail(['basis', 'api']);
-      }
-    } else {
-      onlyMessage('请上传图片', 'error');
-    }
-  };
+    const detail = async (data: any) => {
+        const res = await service.detail(data);
+        if (res.status === 200) {
+            const basis = res.result?.filter((item: any) => item.scope === 'basis');
+            const api = res?.result.filter((item: any) => item.scope === 'api');
+            localStorage.setItem(SystemConst.AMAP_KEY, api[0].properties.api);
+            form.setFieldsValue({
+                ...basis[0].properties,
+                apikey: api[0].properties.api,
+            });
+            setInitialState({
+                ...initialState,
+                settings: {
+                    ...basis[0].properties,
+                },
+            });
+        }
+    };
+    const save = async () => {
+        const formData = await form.validateFields();
+        console.log(formData)
+        if (formData) {
+            const item = [
+                {
+                    scope: 'basis',
+                    properties: {
+                        ...formData,
+                        apikey: ''
+                    },
+                },
+                {
+                    scope: 'api',
+                    properties: {
+                        api: formData.apikey,
+                    },
+                },
+            ];
+            const res = await service.save(item);
+            if (res.status === 200) {
+                onlyMessage('保存成功');
+                detail(['basis', 'api']);
+            }
+        }
+    };
 
-  useEffect(() => {
-    detail(['basis', 'api']);
-  }, []);
+    useEffect(() => {
+        detail(['basis', 'api']);
+    }, []);
+    return (
+        <PageContainer>
+            <Card className="basis" style={{ minHeight }}>
+                <Form layout="vertical" form={form}>
+                    <Row gutter={[24, 24]}>
+                        <Col span={10}>
+                            <Form.Item
+                                label="系统名称"
+                                name="title"
+                            >
+                                <Input />
+                            </Form.Item>
+                            <Form.Item
+                                label="主题色"
+                                name="headerTheme"
+                                initialValue="light"
+                                rules={[{ required: true, message: '请选择主题色' }]}
+                            >
+                                <Select>
+                                    <Select.Option value="light">白色</Select.Option>
+                                    <Select.Option value="dark">黑色</Select.Option>
+                                </Select>
+                            </Form.Item>
+                            <Form.Item
+                                label="高德API Key"
+                                name="apikey"
+                                tooltip="配置后平台可调用高德地图GIS服务"
+                            >
+                                <Input />
+                            </Form.Item>
+                            <Row gutter={[24, 24]}>
+                                <Col>
+                                    <Form.Item name={'logo'} label="系统logo" extra={
+                                            <>
+                                            <div>推荐尺寸200*200</div>
+                                            <div>支持jpg,png</div>
+                                            </>
+                                        }>
+                                        <UploadImage />
+                                    </Form.Item>
+                                </Col>
+                                <Col>
+                                    <Form.Item
+                                        name={'ico'}
+                                        label="浏览器页签"
+                                        tooltip='浏览器tab页中显示的图片元素'
+                                        extra={
+                                            <>
+                                            <div>推荐尺寸64*64</div>
+                                            <div>支持ico格式</div>
+                                            </>
+                                        }
+                                    >
+                                        <UploadImage size={1} types={['image/x-icon']} backgroundSize={'inherit'} />
+                                    </Form.Item>
+                                </Col>
+                            </Row>
+                        </Col>
+                        <Col span={14}>
+                            <Form.Item
+                                name={'backgroud'}
+                                label="登录背景图"
+                                extra={
+                                    <>
+                                    <div>支持4M以内的图片:支持jpg、png</div>
+                                    <div>建议尺寸1400x1080</div>
+                                    </>
+                                }
+                                rules={[{ required: true, message: '请上传背景图' }]}>
+                                <UploadImage size={4} style={{ width: 570, height: 415 }} />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+                <PermissionButton
+                    type="primary"
+                    key="basis"
+                    onClick={() => {
+                        save();
+                    }}
+                    isPermission={userPermission.update}
+                >
+                    保存
+                </PermissionButton>
+            </Card>
+        </PageContainer>
 
-  return (
-    <PageContainer>
-      <Card className="basis" style={{ minHeight }}>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'flex-start',
-            justifyContent: 'flex-start',
-          }}
-        >
-          <div style={{ width: 400 }}>
-            <Form layout="vertical" form={form}>
-              <Form.Item
-                label="系统名称"
-                name="title"
-                // rules={[{ required: true, message: '请输入系统名称' }]}
-              >
-                <Input />
-              </Form.Item>
-              <Form.Item
-                label="主题色"
-                name="headerTheme"
-                initialValue="light"
-                rules={[{ required: true, message: '请选择主题色' }]}
-              >
-                <Select>
-                  <Select.Option value="light">白色</Select.Option>
-                  <Select.Option value="dark">黑色</Select.Option>
-                </Select>
-              </Form.Item>
-              <Form.Item
-                label="高德API Key"
-                name="apikey"
-                tooltip="配置后平台可调用高德地图GIS服务"
-              >
-                <Input />
-              </Form.Item>
-            </Form>
-          </div>
-          <div className={styles.content}>
-            <div style={{ marginBottom: 8, display: 'flex' }}>
-              系统logo
-              <div className={styles.text}></div>
-            </div>
-            <Upload {...uploadProps}>
-              {imageUrl ? (
-                <img
-                  src={imageUrl}
-                  alt="avatar"
-                  onError={() => {
-                    setImageUrl(require('/public/images/img-miss.png'));
-                  }}
-                  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-                />
-              ) : (
-                uploadButton
-              )}
-            </Upload>
-          </div>
-          <div style={{ paddingTop: 215, color: '#a2a5a7' }}>推荐分辨率200*200</div>
-        </div>
-        <div>
-          <PermissionButton
-            type="primary"
-            key="basis"
-            onClick={async () => {
-              save();
-            }}
-            isPermission={userPermission.update}
-          >
-            保存
-          </PermissionButton>
-        </div>
-      </Card>
-    </PageContainer>
-  );
+    );
 };
 
 export default Basis;

src/pages/system/Basis/init.tsx

@@ -0,0 +1,92 @@
+import { UploadImage } from '@/components';
+import { Card, Col, Form, Input, Row, Select, } from 'antd';
+import { useEffect} from 'react';
+
+interface Props{
+    getData:Function
+}
+
+const Init = (props:Props) => {
+    const [form] = Form.useForm();
+
+    useEffect(()=>{
+        props.getData(form)
+    },[])
+
+    return (
+        <Card>
+            <Form layout="vertical" form={form} >
+                <Row gutter={[24, 24]}>
+                    <Col span={10}>
+                        <Form.Item
+                            label="系统名称"
+                            name="title"
+                        >
+                            <Input />
+                        </Form.Item>
+                        <Form.Item
+                            label="主题色"
+                            name="headerTheme"
+                            initialValue="light"
+                            rules={[{ required: true, message: '请选择主题色' }]}
+                        >
+                            <Select>
+                                <Select.Option value="light">白色</Select.Option>
+                                <Select.Option value="dark">黑色</Select.Option>
+                            </Select>
+                        </Form.Item>
+                        <Form.Item
+                            label="高德API Key"
+                            name="apikey"
+                            tooltip="配置后平台可调用高德地图GIS服务"
+                        >
+                            <Input />
+                        </Form.Item>
+                        <Row gutter={[24, 24]}>
+                            <Col>
+                                <Form.Item name={'logo'} label="系统logo" extra={
+                                    <>
+                                        <div>推荐尺寸200*200</div>
+                                        <div>支持jpg,png</div>
+                                    </>
+                                }>
+                                    <UploadImage />
+                                </Form.Item>
+                            </Col>
+                            <Col>
+                                <Form.Item
+                                    name={'ico'}
+                                    label="浏览器页签"
+                                    tooltip='浏览器tab页中显示的图片元素'
+                                    extra={
+                                        <>
+                                            <div>推荐尺寸64*64</div>
+                                            <div>支持ico格式</div>
+                                        </>
+                                    }
+                                >
+                                    <UploadImage size={1} types={['image/x-icon']} backgroundSize={'inherit'} />
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col span={14}>
+                        <Form.Item
+                            name={'backgroud'}
+                            label="登录背景图"
+                            extra={
+                                <>
+                                    <div>支持4M以内的图片:支持jpg、png</div>
+                                    <div>建议尺寸1400x1080</div>
+                                </>
+                            }
+                            rules={[{ required: true, message: '请上传背景图' }]}>
+                            <UploadImage size={4} style={{ width: 570, height: 415 }} />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Card>
+    )
+}
+export default Init

src/pages/user/Login/index.less

@@ -130,10 +130,10 @@
   width: 73%;
   height: 100%;
   // padding: 112px 80px;
-  background-image: url('/images/login.png');
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  // background-image: url('/images/login.png');
+  // background-repeat: no-repeat;
+  // background-position: center;
+  // background-size: cover;
 
   .systemName {
     width: 100%;

src/pages/user/Login/index.tsx

@@ -75,6 +75,14 @@ const Login: React.FC = () => {
   };
 
   useEffect(getCode, []);
+
+  useEffect(() => {
+    Service.settingDetail('basis').then(res=>{
+      if(res.status===200){
+        console.log(res.result)
+      }
+    })
+  }, [])
   useEffect(() => {
     localStorage.clear();
     Service.bindInfo().then((res) => {
@@ -243,7 +251,7 @@ const Login: React.FC = () => {
           </div>
         </div>
         <div className={styles.right}>
-          {/* <img src={require('/public/images/login.png')}/> */}
+          <img src={require('/public/images/login.png')} style={{width:'100%',height:'100%'}}/>
           {/*<div className={styles.systemName}>{SystemConst.SYSTEM_NAME}</div>*/}
           {/*<div className={styles.systemDesc}>OPEN SOURCE INTERNET OF THINGS BASIC PLATFORM</div>*/}
         </div>