Forráskód Böngészése

fix: 基础配置修改

wzyyy 3 éve
szülő
commit
26c75c77cc

+ 9 - 4
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',

+ 0 - 2
src/components/DashBoard/echarts.tsx

@@ -59,7 +59,6 @@ export default (props: EchartsProps) => {
   const chartsRef = useRef<any>(null);
 
   const initEcharts = (dom: HTMLDivElement) => {
-    debugger;
     if (!chartsRef.current) {
       chartsRef.current = echarts.init(dom);
       if (props.options) {
@@ -85,7 +84,6 @@ export default (props: EchartsProps) => {
   }, []);
 
   useEffect(() => {
-    debugger;
     if (chartsRef.current && props.options) {
       chartsRef.current.setOption(props.options);
     }

+ 2 - 1
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>
               </>
             ) : (

+ 1 - 1
src/pages/device/Product/Detail/PropertyImport/index.tsx

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

+ 145 - 176
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;

+ 86 - 0
src/pages/system/Basis/init.tsx

@@ -0,0 +1,86 @@
+import { UploadImage } from '@/components';
+import { Card, Col, Form, Input, Row, Select, } from 'antd';
+
+interface Props{
+
+}
+
+const Init = (props:Props) => {
+    const [form] = Form.useForm();
+    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

+ 4 - 4
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%;

+ 9 - 1
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>