feat: merge

src/app.tsx

@@ -18,6 +18,7 @@ import { AIcon } from '@/components';
 
 const isDev = process.env.NODE_ENV === 'development';
 const loginPath = '/user/login';
+const bindPath = '/account/center/bind';
 let extraRoutes: any[] = [];
 
 /** 获取用户信息比较慢的时候会展示一个 loading */
@@ -43,7 +44,7 @@ export async function getInitialState(): Promise<{
     return undefined;
   };
   // 如果是登录页面，不执行
-  if (history.location.pathname !== loginPath) {
+  if (history.location.pathname !== loginPath && history.location.pathname !== bindPath) {
     const currentUser = await fetchUserInfo();
     return {
       fetchUserInfo,
@@ -113,7 +114,7 @@ export async function getInitialState(): Promise<{
  * @param url
  * @param options
  */
-const filterUrl = ['/authorize/captcha/config', '/authorize/login'];
+const filterUrl = ['/authorize/captcha/config', '/authorize/login', '/sso/bind-code/'];
 const requestInterceptor = (url: string, options: RequestOptionsInit) => {
   // const {params} = options;
   let authHeader = {};
@@ -195,7 +196,12 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
     onPageChange: () => {
       const { location } = history;
       // 如果没有登录，重定向到 login
-      if (!initialState?.currentUser && location.pathname !== loginPath) {
+      console.log(location.pathname);
+      if (
+        !initialState?.currentUser &&
+        location.pathname !== loginPath &&
+        location.pathname !== bindPath
+      ) {
         history.push(loginPath);
       }
     },
@@ -253,7 +259,7 @@ export function patchRoutes(routes: any) {
 }
 
 export function render(oldRender: any) {
-  if (history.location.pathname !== loginPath) {
+  if (history.location.pathname !== loginPath && history.location.pathname !== bindPath) {
     SystemConfigService.getAMapKey().then((res) => {
       if (res && res.status === 200 && res.result) {
         localStorage.setItem(SystemConst.AMAP_KEY, res.result.apiKey);

src/components/AMapComponent/hooks/Distance.tsx

@@ -4,7 +4,7 @@ const useDistance = () => {
   const [distance, setDistance] = useState(0);
 
   const onDistance = (data: number[][]) => {
-    if (window.AMap && data && data.length > 2) {
+    if (window.AMap && data && data.length >= 2) {
       const pointArr = data.map((point) => new window.AMap.LngLat(point[0], point[1]));
       const distanceOfLine = AMap.GeometryUtil.distanceOfLine(pointArr);
       setDistance(Math.round(distanceOfLine));

src/components/ProTableCard/CardItems/AlarmConfig.tsx

@@ -36,7 +36,9 @@ export default (props: AlarmConfigProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>{props?.name}</span>
+            <span className={'card-item-header-name ellipsis'}>
+              <Tooltip title={props?.name}>{props?.name}</Tooltip>
+            </span>
           </div>
           <div className={'card-item-content'}>
             <div>

src/components/ProTableCard/CardItems/noticeConfig.tsx

@@ -3,6 +3,7 @@ import { TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { imgMap, typeList } from './noticeTemplate';
+import { Tooltip } from 'antd';
 
 export interface NoticeCardProps extends ConfigItem {
   detail?: React.ReactNode;
@@ -19,7 +20,11 @@ export default (props: NoticeCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>{props.name}</span>
+            <span className={'card-item-header-name ellipsis'}>
+              <Tooltip placement="topLeft" title={props.name}>
+                {props.name}
+              </Tooltip>
+            </span>
           </div>
           <div className={'card-item-content'}>
             <div>
@@ -28,7 +33,11 @@ export default (props: NoticeCardProps) => {
             </div>
             <div>
               <label>说明</label>
-              <div className={'ellipsis'}>{props.description}</div>
+              <div className={'ellipsis'}>
+                <Tooltip placement="topLeft" title={props.description}>
+                  {props.description}
+                </Tooltip>
+              </div>
             </div>
           </div>
         </div>

src/components/ProTableCard/CardItems/noticeTemplate.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
+import { Tooltip } from 'antd';
 
 export interface NoticeCardProps extends TemplateItem {
   detail?: React.ReactNode;
@@ -64,7 +65,9 @@ export default (props: NoticeCardProps) => {
         </div>
         <div className={'card-item-body'}>
           <div className={'card-item-header'}>
-            <span className={'card-item-header-name ellipsis'}>{props.name}</span>
+            <span className={'card-item-header-name ellipsis'}>
+              <Tooltip title={props.name}>{props.name}</Tooltip>
+            </span>
           </div>
           <div className={'card-item-content'}>
             <div>
@@ -73,7 +76,9 @@ export default (props: NoticeCardProps) => {
             </div>
             <div>
               <label>说明</label>
-              <div className={'ellipsis'}>{props.description}</div>
+              <div className={'ellipsis'}>
+                <Tooltip title={props.description}>{props.description}</Tooltip>
+              </div>
             </div>
           </div>
         </div>

src/pages/Northbound/AliCloud/Detail/index.tsx

@@ -11,10 +11,11 @@ import {
   Select,
 } from '@formily/antd';
 import type { Field } from '@formily/core';
+import { onFormInit } from '@formily/core';
 import { createForm, FormPath, onFieldChange, onFieldValueChange } from '@formily/core';
 import { createSchemaField, observer } from '@formily/react';
 import { Card, Col, Image, message, Row } from 'antd';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useParams } from 'umi';
 import { useAsyncDataSource } from '@/utils/util';
 import './index.less';
@@ -30,22 +31,41 @@ const Detail = observer(() => {
       createForm({
         validateFirst: true,
         effects() {
+          onFormInit(async (form1) => {
+            if (params.id === ':id') return;
+            const resp = await service.detail(params.id);
+            form1.setInitialValues(resp.result);
+          });
           onFieldValueChange('accessConfig.*', async (field, f) => {
             const regionId = field.query('accessConfig.regionId').value();
             const accessKeyId = field.query('accessConfig.accessKeyId').value();
             const accessSecret = field.query('accessConfig.accessSecret').value();
+            const instanceId = field.query('accessConfig.instanceId').value();
             let response: any[] = [];
             if (regionId && accessKeyId && accessSecret) {
               response = await service.getAliyunProductsList({
                 regionId,
                 accessKeyId,
                 accessSecret,
+                instanceId,
               });
             }
             f.setFieldState(field.query('bridgeProductKey'), (state) => {
               state.dataSource = response;
               Store.set('datalist', response);
+              if (field.modified) {
+                state.value = undefined;
+              }
             });
+            if (field.modified) {
+              f.setFieldState(field.query('mappings.*.productKey'), (state) => {
+                state.value = undefined;
+                state.componentProps = {
+                  header: '产品映射',
+                };
+                state.dataSource = response;
+              });
+            }
           });
 
           onFieldChange('mappings.*.productKey', async (field, f) => {
@@ -66,7 +86,11 @@ const Detail = observer(() => {
             } else {
               const accessConfig = field.query('accessConfig').value();
               let response: any[] = [];
-              if (Object.keys(accessConfig).length >= 3) {
+              if (
+                accessConfig?.regionId &&
+                accessConfig?.accessKeyId &&
+                accessConfig?.accessSecret
+              ) {
                 response = await service.getAliyunProductsList(accessConfig);
               }
               f.setFieldState(propertyPath, (state) => {
@@ -83,16 +107,6 @@ const Detail = observer(() => {
     [],
   );
 
-  useEffect(() => {
-    if (params.id && params.id !== ':id') {
-      service.detail(params.id).then((resp) => {
-        if (resp.status === 200) {
-          form.setValues(resp.result);
-        }
-      });
-    }
-  }, [params.id]);
-
   const SchemaField = createSchemaField({
     components: {
       FormItem,
@@ -135,7 +149,7 @@ const Detail = observer(() => {
         const list = (Store.get('datalist') || []).filter((j: any) => !checked.includes(j.value));
         resolve(list);
       });
-    } else if (Object.keys(accessConfig).length >= 3) {
+    } else if (accessConfig?.regionId && accessConfig?.accessKeyId && accessConfig?.accessSecret) {
       return service.getAliyunProductsList(accessConfig).then((resp) => {
         Store.set('datalist', resp);
         return resp.filter((j: any) => !checked.includes(j.value));

src/pages/account/Center/bind/index.less

@@ -1,18 +1,16 @@
 .cards {
-  position: absolute;
-  top: 150px;
-  left: 17%;
   box-sizing: border-box;
-  width: 66%;
+  width: 850px;
+  min-height: 510px;
   background: #fff;
   border: 1px solid #e0e4e8;
   border-radius: 2px;
 
   .title {
-    margin: 50px 0;
+    margin: 30px 0;
     color: #0f1222;
     font-weight: 400;
-    font-size: 24px;
+    font-size: 20px;
     font-family: 'PingFang SC';
     font-style: normal;
     line-height: 25px;
@@ -23,13 +21,14 @@
     display: flex;
     justify-content: center;
 
+    //登录
     .infotitle {
       width: 64px;
       height: 24px;
       margin-left: 10px;
       color: rgba(0, 0, 0, 0.85);
       font-weight: 400;
-      font-size: 16px;
+      font-size: 14px;
       font-family: 'PingFang SC';
       font-style: normal;
       line-height: 24px;
@@ -39,18 +38,51 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 300px;
+      width: 280px;
 
       .fonts {
         font-weight: 400;
-        font-size: 16px;
+        font-size: 14px;
         font-family: 'PingFang SC';
         font-style: normal;
-        line-height: 16px;
+        line-height: 14px;
         opacity: 0.75;
         mix-blend-mode: normal;
       }
     }
+
+    //未登录
+    .topimg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .topfont {
+      margin-top: 30px;
+      margin-bottom: 30px;
+      font-size: 14px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      line-height: 14px;
+      opacity: 0.75;
+      mix-blend-mode: normal;
+    }
+    .form {
+      width: 250px;
+      :global {
+        // .ant-form-item{
+        //   margin-bottom: 24px;
+        // }
+        .ant-form-item-label > label {
+          font-weight: 600;
+        }
+        .ant-form-item-label
+          > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+          content: none;
+        }
+      }
+    }
   }
 
   .btn {

src/pages/account/Center/bind/index.tsx

@@ -1,14 +1,20 @@
-import { Button, Card, message } from 'antd';
+import { Button, Card, message, Form, Input } from 'antd';
 import { useEffect, useState } from 'react';
 import Service from '@/pages/account/Center/service';
+import api from '@/pages/user/Login/service';
 import styles from './index.less';
+import Token from '@/utils/token';
+import { useModel } from '@@/plugin-model/useModel';
 
 export const service = new Service();
 
 const Bind = () => {
+  const [form] = Form.useForm();
   const [bindUser, setBindUser] = useState<any>();
   const [user, setUser] = useState<any>();
   const [code, setCode] = useState<string>('');
+  const [isLogin, setIslogin] = useState<any>('yes');
+  const { initialState, setInitialState } = useModel('@@initialState');
 
   const bindPage = require('/public/images/bind/bindPage.png');
   const Vector = require('/public/images/bind/Vector.png');
@@ -28,7 +34,62 @@ const Bind = () => {
   };
   const getDetail = () => {
     service.getUserDetail().subscribe((res) => {
-      setUser(res.result);
+      setUser(res?.result);
+    });
+  };
+
+  //未登录页
+  const loginDiv = () => (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <div className={styles.topimg}>
+        <img src={logo} style={{ width: '50px', height: '50px' }} />
+        <img src={Vector} style={{ height: '15px', margin: '0 15px' }} />
+        <img src={logo} style={{ width: '50px', height: '50px' }} />
+      </div>
+      <div className={styles.topfont}>
+        你已通过{bindUser?.type === 'dingtalk' ? '钉钉' : '微信'}授权,完善以下登录信息即可以完成绑定
+      </div>
+      <div className={styles.form}>
+        <Form layout="vertical" form={form}>
+          <Form.Item
+            label="账户"
+            name="username"
+            rules={[{ required: true, message: '请输入账户' }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="密码"
+            name="password"
+            rules={[{ required: true, message: '请输入密码' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+
+  const fetchUserInfo = async () => {
+    const userInfo = (await initialState?.fetchUserInfo?.()) as UserInfo;
+    if (userInfo) {
+      await setInitialState({
+        ...initialState,
+        currentUser: userInfo,
+      });
+    }
+  };
+  const doLogin = async (data: any) => {
+    api.login(data).subscribe({
+      next: async (userInfo) => {
+        Token.set(userInfo.token);
+        await fetchUserInfo();
+        localStorage.setItem('onLogin', 'yes');
+        setTimeout(() => window.close(), 1000);
+      },
+      error: () => {
+        message.error('登录失败,请重试！');
+      },
     });
   };
 
@@ -37,80 +98,112 @@ const Bind = () => {
     // const params = 'b584032923c78d69e6148cf0e9312723'
     setCode(params);
     bindUserInfo(params);
-    getDetail();
+    if (localStorage.getItem('onLogin') === 'yes') {
+      getDetail();
+    }
+    if (localStorage.getItem('onLogin')) {
+      setIslogin(localStorage.getItem('onLogin'));
+    }
   }, []);
+
   return (
     <>
       <div
         style={{
           width: '100%',
-          height: '100%',
+          height: '100vh',
           background: `url(${bindPage}) no-repeat`,
           backgroundSize: '100% 100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
         }}
       >
         <div className={styles.cards}>
           <div className={styles.title}>第三方账户绑定</div>
           <div className={styles.info}>
-            <Card
-              title={
-                <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <div>
-                    <img src={Rectangle} />
+            {isLogin === 'no' ? (
+              <>{loginDiv()}</>
+            ) : (
+              <>
+                <Card
+                  title={
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <div>
+                        <img src={Rectangle} />
+                      </div>
+                      <div className={styles.infotitle}>个人信息</div>
+                    </div>
+                  }
+                >
+                  <div className={styles.item}>
+                    <div style={{ height: 100, marginTop: 10, marginBottom: 10 }}>
+                      <img src={logo} style={{ height: 70 }} />
+                    </div>
+                    <p className={styles.fonts}>账号：{user?.username}</p>
+                    <p className={styles.fonts}>用户名：{user?.name}</p>
                   </div>
-                  <div className={styles.infotitle}>个人信息</div>
-                </div>
-              }
-            >
-              <div className={styles.item}>
-                <div style={{ height: 100, marginTop: 10, marginBottom: 10 }}>
-                  <img src={logo} style={{ width: 90, height: 90 }} />
+                </Card>
+                <div style={{ position: 'relative', top: '135px', margin: '0 20px' }}>
+                  <img src={Vector} style={{ height: '15px' }} />
                 </div>
-                <p className={styles.fonts}>账号：{user?.username}</p>
-                <p className={styles.fonts}>用户名：{user?.name}</p>
-              </div>
-            </Card>
-            <div style={{ position: 'relative', top: '135px', margin: '0 20px' }}>
-              <img src={Vector} />
-            </div>
-            <Card
-              title={
-                <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <div>
-                    <img src={Rectangle} />
+                <Card
+                  title={
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <div>
+                        <img src={Rectangle} />
+                      </div>
+                      <div className={styles.infotitle}>三方账户信息</div>
+                    </div>
+                  }
+                >
+                  <div className={styles.item}>
+                    <div style={{ height: 100, marginTop: 10, marginBottom: 10 }}>
+                      <img style={{ height: 70 }} src={iconMap.get(bindUser?.type)} />
+                    </div>
+                    <p className={styles.fonts}>账户：{bindUser?.providerName}</p>
+                    <p className={styles.fonts}>用户名：{bindUser?.result.others.name}</p>
                   </div>
-                  <div className={styles.infotitle}>三方账户信息</div>
-                </div>
-              }
-            >
-              <div className={styles.item}>
-                <div style={{ height: 100, marginTop: 10, marginBottom: 10 }}>
-                  <img style={{ height: 80 }} src={iconMap.get(bindUser?.type)} />
-                </div>
-                <p className={styles.fonts}>账户：{bindUser?.providerName}</p>
-                <p className={styles.fonts}>用户名：{bindUser?.result.others.name}</p>
-              </div>
-            </Card>
+                </Card>
+              </>
+            )}
           </div>
           <div className={styles.btn}>
-            <Button
-              style={{ marginTop: 30, marginBottom: 30 }}
-              type="primary"
-              onClick={() => {
-                // window.close()
-                service.bind(code).then((res) => {
-                  if (res.status === 200) {
-                    message.success('绑定成功');
-                    localStorage.setItem('onBind', 'true');
-                    setTimeout(() => window.close(), 1000);
-                  } else {
-                    message.error('绑定失败');
+            {isLogin === 'no' ? (
+              <Button
+                style={{ marginTop: 10, marginBottom: 30, width: 250 }}
+                type="primary"
+                onClick={async () => {
+                  const data = await form.validateFields();
+                  if (data) {
+                    doLogin({
+                      ...data,
+                      bindCode: code,
+                    });
                   }
-                });
-              }}
-            >
-              立即绑定
-            </Button>
+                }}
+              >
+                登录并已绑定账户
+              </Button>
+            ) : (
+              <Button
+                style={{ marginTop: 30, marginBottom: 30 }}
+                type="primary"
+                onClick={() => {
+                  service.bind(code).then((res) => {
+                    if (res.status === 200) {
+                      message.success('绑定成功');
+                      localStorage.setItem('onBind', 'true');
+                      setTimeout(() => window.close(), 1000);
+                    } else {
+                      message.error('绑定失败');
+                    }
+                  });
+                }}
+              >
+                立即绑定
+              </Button>
+            )}
           </div>
         </div>
       </div>

src/pages/account/Center/index.tsx

@@ -280,13 +280,10 @@ const Center = () => {
                       <Button
                         type="primary"
                         onClick={() => {
-                          window.open(
-                            `/${SystemConst.API_BASE}/sso/${item.provider}/login`,
-                            '',
-                            'width=700,height=500,left=500,top=300',
-                          );
-                          // window.open(`/#/account/center/bind`,'','width=700,height=500,left=500,top=300');
+                          window.open(`/${SystemConst.API_BASE}/sso/${item.provider}/login`);
+                          // window.open(`/#/account/center/bind`);
                           localStorage.setItem('onBind', 'false');
+                          localStorage.setItem('onLogin', 'yes');
                           window.onstorage = (e) => {
                             if (e.newValue) {
                               getBindInfo();

src/pages/device/Instance/Detail/Modbus/index.tsx

@@ -54,7 +54,7 @@ const Modbus = () => {
     },
     {
       title: '值',
-      render: (record: any) => <>{propertyValue[record?.property] || '-'}</>,
+      render: (record: any) => <>{propertyValue[record?.metadataId] || '-'}</>,
     },
     {
       title: '状态',
@@ -201,7 +201,7 @@ const Modbus = () => {
         const { value } = payload;
         propertyValue[value.property] = value.formatValue;
         setPropertyValue({ ...propertyValue });
-        // console.log(propertyValue)
+        console.log(propertyValue);
       });
   }, [data]);
 

src/pages/device/Instance/Detail/Tags/location/AMap.tsx

@@ -24,8 +24,8 @@ export default (props: Props) => {
   };
 
   useEffect(() => {
-    setValue(props.value);
-    const list = props?.value.split(',') || [];
+    setValue(props?.value || '');
+    const list = (props?.value || '').split(',') || [];
     if (!!props.value && list.length === 2) {
       setMarkerCenter({
         longitude: list[0],

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

@@ -57,7 +57,7 @@ const Access = () => {
     },
     {
       title: '值',
-      render: (record: any) => <>{propertyValue[record?.property] || '-'}</>,
+      render: (record: any) => <>{propertyValue[record?.metadataId] || '-'}</>,
     },
     {
       title: '状态',

src/pages/notice/Config/index.tsx

@@ -54,6 +54,7 @@ const Config = observer(() => {
     {
       dataIndex: 'name',
       title: '配置名称',
+      ellipsis: true,
     },
     {
       dataIndex: 'provider',
@@ -62,6 +63,7 @@ const Config = observer(() => {
     },
     {
       dataIndex: 'description',
+      ellipsis: true,
       title: '说明',
     },
     {

src/pages/notice/Template/index.tsx

@@ -50,6 +50,7 @@ const Template = observer(() => {
     {
       dataIndex: 'name',
       title: '模版名称',
+      ellipsis: true,
     },
     {
       dataIndex: 'provider',
@@ -59,7 +60,7 @@ const Template = observer(() => {
     {
       dataIndex: 'description',
       title: '说明',
-      // valueType: 'dateTime',
+      ellipsis: true,
     },
     {
       title: intl.formatMessage({

src/pages/rule-engine/Alarm/Configuration/index.tsx

@@ -35,6 +35,7 @@ const Configuration = () => {
     {
       dataIndex: 'name',
       title: '名称',
+      ellipsis: true,
     },
     {
       title: '类型',

src/pages/user/Login/index.tsx

@@ -19,7 +19,6 @@ const Login: React.FC = () => {
   const [captcha, setCaptcha] = useState<{ key?: string; base64?: string }>({});
 
   const { initialState, setInitialState } = useModel('@@initialState');
-
   const intl = useIntl();
 
   const fetchUserInfo = async () => {
@@ -188,6 +187,17 @@ const Login: React.FC = () => {
                       defaultMessage: '登录',
                     })}
                   </Submit>
+                  {/* <Button
+                      onClick={()=>{
+                        localStorage.setItem('onLogin', 'no');
+                        window.open(`/${SystemConst.API_BASE}/sso/dingd2rgqrqnbvgbvi9x/login`);
+                        window.onstorage = (e) => {
+                          if (e.newValue) {
+                            window.location.href = '/';
+                          }
+                        };
+                      }}
+                  >三方登录</Button> */}
                 </Form>
               </div>
             </div>