Просмотр исходного кода

fix: 修复场景联动无法保存问题

xieyonghong 3 лет назад
Родитель
Сommit
fcb33e1f39

+ 26 - 0
src/components/AMapComponent/APILoader.ts

@@ -0,0 +1,26 @@
+const protocol = window.location.protocol;
+
+const buildScriptTag = (src: string): HTMLScriptElement => {
+  const script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.async = true;
+  script.defer = true;
+  script.src = src;
+  return script;
+};
+
+export const getAMapUiPromise = (version: string = '1.1'): Promise<any> => {
+  if ((window as any).AMapUI) {
+    return Promise.resolve();
+  }
+  const script = buildScriptTag(`${protocol}//webapi.amap.com/ui/${version}/main-async.js`);
+  const pro = new Promise((resolve) => {
+    script.onload = () => {
+      (window as any).initAMapUI();
+      resolve(true);
+    };
+  });
+
+  document.body.append(script);
+  return pro;
+};

+ 29 - 4
src/components/AMapComponent/amap.tsx

@@ -1,14 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { MapProps } from 'react-amap';
 import { Map } from 'react-amap';
+import { getAMapUiPromise } from './APILoader';
 
 interface AMapProps extends MapProps {
   style?: React.CSSProperties;
   className?: string;
+  AMapUI?: string;
 }
 
 export default (props: AMapProps) => {
-  const { style, className, ...extraProps } = props;
+  const { style, className, onInstanceCreated, ...extraProps } = props;
+
+  const [uiLoading, setUiLoading] = useState(false);
+
+  const isOpenUi = 'AMapUI' in props || props.AMapUI;
+
+  const getAMapUI = () => {
+    const version = typeof props.AMapUI === 'string' ? props.AMapUI : '1.1';
+    getAMapUiPromise(version).then(() => {
+      setUiLoading(true);
+    });
+  };
 
   // TODO 后期可以使用页面渲染时获取缓存中的key
 
@@ -16,8 +29,20 @@ export default (props: AMapProps) => {
     <div style={style || { width: '100%', height: '100%' }} className={className}>
       {
         // @ts-ignore
-        <Map version={'1.4.0'} {...extraProps}>
-          {props.children}
+        <Map
+          version={'2.0'}
+          onInstanceCreated={(map: any) => {
+            if (onInstanceCreated) {
+              onInstanceCreated(map);
+            }
+            console.log(isOpenUi);
+            if (isOpenUi) {
+              getAMapUI();
+            }
+          }}
+          {...extraProps}
+        >
+          {isOpenUi ? (uiLoading ? props.children : null) : props.children}
         </Map>
       }
     </div>

+ 1 - 1
src/pages/demo/AMap/index.tsx

@@ -5,7 +5,7 @@ export default () => {
   const [speed] = useState(100000);
   return (
     <AMap
-      useAMapUI={true}
+      AMapUI
       style={{
         height: 500,
         width: '100%',

+ 5 - 4
src/pages/rule-engine/Scene/Save/index.tsx

@@ -97,14 +97,15 @@ export default () => {
 
   const saveData = async () => {
     const formData = await form.validateFields();
+    console.log('save1', formData);
     let triggerData = undefined;
     // 获取触发条件数据
-    if (triggerRef.current) {
+    if (triggerRef.current && formData.trigger) {
       triggerData = await triggerRef.current.getTriggerForm();
-      if (!triggerData) {
-        return;
+      console.log('save1', triggerData);
+      if (triggerData) {
+        formData.terms = triggerData.trigger;
       }
-      formData.terms = triggerData.trigger;
     }
     console.log('save', formData);
     if (formData) {

+ 1 - 1
src/pages/rule-engine/Scene/Save/trigger/device.tsx

@@ -312,7 +312,7 @@ export default (props: TriggerProps) => {
               />
             </Col>
             <Col span={18}>
-              <span style={{ lineHeight: '32px' }}>定时调用所选功能,功能返回值用于条件配置</span>
+              <span style={{ lineHeight: '32px' }}>定时调用所选功能</span>
             </Col>
           </Row>
           <Row>

+ 1 - 2
src/pages/rule-engine/Scene/Save/trigger/index.tsx

@@ -1,4 +1,3 @@
-// 已废弃
 import { useCallback, useEffect, useState } from 'react';
 import type { FormInstance } from 'antd';
 import { Col, Form, Row, Select } from 'antd';
@@ -335,7 +334,7 @@ export default observer((props: TriggerProps) => {
               </Form.Item>
             </Col>
             <Col span={18}>
-              <span style={{ lineHeight: '32px' }}>定时调用所选功能,功能返回值用于条件配置</span>
+              <span style={{ lineHeight: '32px' }}>定时调用所选功能</span>
             </Col>
             <Col span={24}>
               <Form.Item name={['trigger', 'device', 'operation', 'functionParameters']}>