fix: '地图配置新版本'

src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.jsx

@@ -36,6 +36,7 @@ import {
   Menu,
   Space,
   Tag,
+  Divider,
 } from 'antd';
 import {
   EnvironmentOutlined,
@@ -189,6 +190,8 @@ const Map = props => {
   const [resultData, setResultData] = useState(null);
   const [keepDraw, setKeepDraw] = useState([]);
   const [butState, setButState] = useState(false); // 绘制按钮状态
+  const [load, setLoad] = useState(false);
+  const [keepDataDraw, setKeepDataDraw] = useState([]);
 
   useEffect(() => {
     GetWebSiteConfig({ client: 'sandbox' }).then(res => {
@@ -477,14 +480,16 @@ const Map = props => {
         setArea('');
         obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
         mapRef.current.changeAreaName(obj[index].areaName);
-        form.setFieldsValue({ customPointExtent: '' });
+        // form.setFieldsValue({ customPointExtent: '' });
         setDraw(0);
         setNewDraw(0);
-        if (radio1 == 1) {
-          setButState(true);
-        }
+        setResultData(null);
+        // if (radio1 == 1) {
+        //   setButState(true);
+        // }
         break;
       case 'schemename':
+        setKeepDataDraw([]);
         setRadio1('');
 
         mapInfo.current.map.layers.forEach(item => {
@@ -614,10 +619,13 @@ const Map = props => {
 
   // 选择范围
   const onTangleClick = e => {
+    let aa = 0;
     Drawtool.activate({
       view: mapInfo.current,
       action: 'extent',
       drawEnd: data => {
+        aa = 1;
+        setLoad(false);
         setArea(data);
         console.log(data);
         const geom1 = geomUtils.toGeometry({
@@ -635,6 +643,9 @@ const Map = props => {
         mapRef.current.gotoGeometry(geom1);
       },
     });
+    setTimeout(() => {
+      console.log(aa);
+    }, 0);
   };
 
   const saveCallBack = e => {
@@ -647,11 +658,12 @@ const Map = props => {
       });
 
       let area1 = form.getFieldsValue().areaName;
-      mapRef.current.changeAreaName(area1[0], geom1);
+      mapRef.current.changeAreaName(area1[area1.length - 1], geom1);
       form.setFieldsValue({
         customPointExtent: geom1,
       });
       setKeepDraw(geom1);
+      setKeepDataDraw(geom1);
       setButState(false);
       setDraw(1);
       let data = {
@@ -683,7 +695,6 @@ const Map = props => {
     //   form.setFieldsValue({
     //     customPointExtent: geom,
     //   });
-    //   setKeepDraw(geom);
     // }
 
     Drawtool.deactivate(false);
@@ -725,31 +736,40 @@ const Map = props => {
     } else {
       list = obj.boundColor;
     }
+
     let data = {};
-    console.log(obj.customPointExtent);
-    // console.log(obj.customPointExtent.type);
-    // console.log(obj.customPointExtent.constructor === Array);
     if (obj.customPointExtent) {
       if (keepBorderArea && obj.customPointExtent.constructor === Array) {
         data.type = keepType;
         data.geometry = obj.customPointExtent;
-        console.log(data);
       } else if (!keepBorderArea && obj.customPointExtent.constructor === Array) {
         data.type = keepType;
         data.geometry = obj.customPointExtent;
-        console.log(data);
       } else {
         data = obj.customPointExtent;
-        console.log(data);
+        console.log(obj.customPointExtent);
       }
+    } else if (keepDataDraw.length > 0) {
+      data.type = keepType;
+      data.geometry = keepDataDraw;
+    } else if (keepBorderArea) {
+      console.log(keepBorderArea.constructor);
+      if (keepBorderArea.constructor === Array) {
+        data.type = keepType;
+        data.geometry = keepBorderArea;
+        console.log(123);
+      } else if (keepBorderArea.constructor === Object) {
+        data = keepBorderArea;
+        console.log(234);
       }
-    console.log(obj.customPointExtent);
-    console.log(data);
       console.log(keepBorderArea);
-    console.log(obj.customPointExtent ? data : keepBorderArea);
+    } else {
+      data = '';
+    }
+    console.log(data);
     const jsConfig = {
       extent: form.getFieldValue('extent'),
-      customPointExtent: obj.customPointExtent ? data : keepBorderArea,
+      customPointExtent: data,
       areaName: aa,
       boundColor: list,
       boundWidth: `${obj.boundWidth}px`,
@@ -873,6 +893,7 @@ const Map = props => {
 
       setRadio1(e.target.value);
     } else {
+      console.log(keepDraw);
       if (keepDraw) {
         let area1 = form.getFieldsValue().areaName;
         mapRef.current.changeAreaName(area1[0], keepDraw);
@@ -890,7 +911,7 @@ const Map = props => {
         setResultData({ ...data });
       }
       if (draw == 0) {
-        setButState(true);
+        setButState(false);
       }
       setRadio1(e.target.value);
     }
@@ -908,7 +929,6 @@ const Map = props => {
   };
 
   return (
-    <div>
     <div className={styles.mapContent}>
       <div
         className={classnames({
@@ -934,6 +954,9 @@ const Map = props => {
                 ))}
               </Select>
             </Form.Item>
+            <Divider orientation="left" style={{ borderTopColor: '#99bbe8', color: '#0079c1' }}>
+              <strong>范围编辑</strong>
+            </Divider>
             <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}>
               <Cascader
                 fieldNames={{
@@ -948,24 +971,24 @@ const Map = props => {
                 allowClear={false}
               />
             </Form.Item>
-              <Form.Item label="自定义行政区" name="customFlag" style={{ marginBottom: '19px' }}>
+            <Form.Item label="范围类型" name="customFlag" style={{ marginBottom: '19px' }}>
               <Radio.Group onChange={onChange1} value={radio1}>
-                  <Radio value={0}>否</Radio>
-                  <Radio value={1}>是</Radio>
+                <Radio value={0}>地区选择</Radio>
+                <Radio value={1}>手绘区域</Radio>
               </Radio.Group>
             </Form.Item>
             {radio1 == 0 ? (
               <span />
             ) : (
               <>
-                  <Form.Item label="自定义行政区范围" name="customPointExtent">
+                <Form.Item label="手绘区域" name="customPointExtent">
                   {butState && (
                     <Tag
                       style={{
                         width: '100px',
                         height: '27px',
                         paddingLeft: '28px',
-                          paddingTop: '2px',
+                        paddingTop: '0px',
                         marginTop: '4px',
                         display: 'flex',
                         alignItems: 'center',
@@ -975,43 +998,39 @@ const Map = props => {
                       绘制中
                     </Tag>
                   )}
-                    {!butState && draw == 1 && (
-                      <Tooltip title="点击按钮开始绘制">
+                  {!butState && draw == 0 && (
                     <Tag
-                          icon={<CheckCircleOutlined style={{ marginTop: '2px' }} />}
-                          color="success"
                       style={{
                         width: '100px',
                         height: '27px',
-                            paddingLeft: '24px',
+                        paddingLeft: '25px',
                         paddingTop: '0px',
                         marginTop: '4px',
                         display: 'flex',
                         alignItems: 'center',
                       }}
+                      color="processing"
                       onClick={() => {
-                            setNewDraw(0);
                         setButState(true);
                       }}
                     >
-                          已绘制
+                      开始绘制
                     </Tag>
-                      </Tooltip>
                   )}
-                    {/* {newDraw == 1 && (
+                  {!butState && draw == 1 && (
                     <Tooltip title="点击按钮开始绘制">
                       <Tag
+                        icon={<CheckCircleOutlined style={{ marginTop: '3px' }} />}
+                        color="success"
                         style={{
                           width: '100px',
                           height: '27px',
-                            paddingLeft: '19px',
-                            paddingTop: '2px',
+                          paddingLeft: '21px',
+                          paddingTop: '0px',
                           marginTop: '4px',
                           display: 'flex',
                           alignItems: 'center',
                         }}
-                          icon={<CheckCircleOutlined style={{ marginTop: '2px' }} />}
-                          color="success"
                         onClick={() => {
                           setNewDraw(0);
                           setButState(true);
@@ -1020,7 +1039,7 @@ const Map = props => {
                         已绘制
                       </Tag>
                     </Tooltip>
-                    )} */}
+                  )}
                 </Form.Item>
               </>
             )}
@@ -1039,15 +1058,12 @@ const Map = props => {
                 ))}
               </div>
             </Form.Item>
-              <Form.Item
-                label="透明度(%)"
-                name="backgroundOpacity"
-                style={{ marginBottom: '19px' }}
-              >
+            <Form.Item label="透明度(%)" name="backgroundOpacity" style={{ marginBottom: '19px' }}>
               <Slider min={0} max={100} />
             </Form.Item>
             <Form.Item label="边界颜色" name="boundColor" style={{ marginBottom: '19px' }}>
               <Popconfirm
+                overlayClassName={styles.Popconfirmtitle}
                 placement="topLeft"
                 icon={false}
                 title={
@@ -1080,29 +1096,100 @@ const Map = props => {
             <Form.Item label="边界宽度" name="boundWidth" style={{ marginBottom: '19px' }}>
               <InputNumber min={1} max={10} />
             </Form.Item>
+            <Divider orientation="left" style={{ borderTopColor: '#99bbe8', color: '#0079c1' }}>
+              <strong>高级设置</strong>
+            </Divider>
             {name ? (
               <Form.Item label="管网方案" name="exportScheme" style={{ marginBottom: '19px' }}>
                 <Radio.Group onChange={onChange} value={radio}>
-                    <Radio value="pandagis">后端出图</Radio>
-                    <Radio value="arcgis">前端出图</Radio>
+                  <Radio value="pandagis">整图绘制</Radio>
+                  <Radio value="arcgis">实时绘制</Radio>
                 </Radio.Group>
               </Form.Item>
             ) : (
               <></>
             )}
 
-              <Form.Item label="复位范围" style={{ marginBottom: '19px' }}>
+            <Form.Item label="复位视野" style={{ marginBottom: '19px' }}>
               <div style={{ display: 'flex' }}>
                 <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}>
-                    <Input.TextArea style={{ resize: 'none', height: '76px' }} disabled />
+                  {!load && !area && (
+                    <Tooltip title="点击按钮开始绘制">
+                      <Tag
+                        color="processing"
+                        icon={<EnvironmentOutlined style={{ marginTop: '2px' }} />}
+                        style={{
+                          width: '100px',
+                          height: '27px',
+                          paddingLeft: '13px',
+                          paddingTop: '0px',
+                          marginTop: '4px',
+                          display: 'flex',
+                          alignItems: 'center',
+                        }}
+                        onClick={() => {
+                          onTangleClick();
+                          setLoad(true);
+                        }}
+                      >
+                        开始绘制
+                      </Tag>
+                    </Tooltip>
+                  )}
+
+                  {load && (
+                    <Tooltip title="点击按钮开始绘制">
+                      <Tag
+                        icon={<EnvironmentOutlined style={{ marginTop: '2px' }} />}
+                        color="warning"
+                        style={{
+                          width: '100px',
+                          height: '27px',
+                          paddingLeft: '20px',
+                          paddingTop: '0px',
+                          marginTop: '4px',
+                          display: 'flex',
+                          alignItems: 'center',
+                        }}
+                        onClick={() => {
+                          onTangleClick();
+                        }}
+                      >
+                        绘制中
+                      </Tag>
+                    </Tooltip>
+                  )}
+                  {area && !load && (
+                    <Tooltip title="点击按钮开始绘制">
+                      <Tag
+                        icon={<EnvironmentOutlined style={{ marginTop: '2px' }} />}
+                        color="success"
+                        style={{
+                          width: '100px',
+                          height: '27px',
+                          paddingLeft: '20px',
+                          paddingTop: '0px',
+                          marginTop: '4px',
+                          display: 'flex',
+                          alignItems: 'center',
+                        }}
+                        onClick={() => {
+                          onTangleClick();
+                          setLoad(true);
+                        }}
+                      >
+                        已绘制
+                      </Tag>
+                    </Tooltip>
+                  )}
                 </Form.Item>
-                  <Tooltip title="复位范围框选">
+                {/* <Tooltip title="复位视野框选">
                     <Button
                       style={{ height: '76px', borderLeft: 'none' }}
                       icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />}
                       onClick={e => onTangleClick(e)}
                     />
-                  </Tooltip>
+                  </Tooltip> */}
               </div>
             </Form.Item>
             <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
@@ -1156,13 +1243,11 @@ const Map = props => {
             <span>{console.log(form.getFieldsValue().areaName)}</span>
             <EditAndDrawPanel
               view={mapInfo.current}
-                editType={['EXTENT', 'POLYGON', 'CIRCLE']}
+              editType={['POLYGON', 'EXTENT', 'CIRCLE']}
               defaultGraphic={resultData}
               areaName={() => {
                 if (form.getFieldsValue().areaName) {
-                    return form.getFieldsValue().areaName[
-                      form.getFieldsValue().areaName.length - 1
-                    ];
+                  return form.getFieldsValue().areaName[form.getFieldsValue().areaName.length - 1];
                 }
               }}
               useActivePanel
@@ -1176,7 +1261,6 @@ const Map = props => {
         )}
       </div>
     </div>
-    </div>
   );
 };
 

src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.less

@@ -3,13 +3,23 @@
     margin-top: 0px;
   }
 }
+
+.Popconfirmtitle {
+    .ant-popover-message-title {
+      padding-left: 0px;
+    }
+}
+
 .mapContent {
   display: flex;
   width: 100%;
   height: calc(100vh - 160px);
+
   .ant-radio-wrapper {
-    min-width: 100px;
+    min-width: 88px;
   }
+
+
   .mapTool {
     width: 25%;
     overflow-y: scroll;