Skip to content

C
CivManage
Commit 9df89f83 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: '地图配置新版本'

parent f64ab8f2
Pipeline #61871 waiting for manual action with stages
          Show whitespace changes
          Inline Side-by-side
          Showing with 148 additions and 54 deletions
          src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.jsx
          View file @ 9df89f83
          ...@@ -36,6 +36,7 @@ import { ...@@ -36,6 +36,7 @@ import {
          Menu, Menu,
          Space, Space,
          Tag, Tag,
          Divider,
          } from 'antd'; } from 'antd';
          import { import {
          EnvironmentOutlined, EnvironmentOutlined,
          ...@@ -189,6 +190,8 @@ const Map = props => { ...@@ -189,6 +190,8 @@ const Map = props => {
          const [resultData, setResultData] = useState(null); const [resultData, setResultData] = useState(null);
          const [keepDraw, setKeepDraw] = useState([]); const [keepDraw, setKeepDraw] = useState([]);
          const [butState, setButState] = useState(false); // 绘制按钮状态 const [butState, setButState] = useState(false); // 绘制按钮状态
          const [load, setLoad] = useState(false);
          const [keepDataDraw, setKeepDataDraw] = useState([]);
          useEffect(() => { useEffect(() => {
          GetWebSiteConfig({ client: 'sandbox' }).then(res => { GetWebSiteConfig({ client: 'sandbox' }).then(res => {
          ...@@ -477,14 +480,16 @@ const Map = props => { ...@@ -477,14 +480,16 @@ const Map = props => {
          setArea(''); setArea('');
          obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1]; obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
          mapRef.current.changeAreaName(obj[index].areaName); mapRef.current.changeAreaName(obj[index].areaName);
          form.setFieldsValue({ customPointExtent: '' }); // form.setFieldsValue({ customPointExtent: '' });
          setDraw(0); setDraw(0);
          setNewDraw(0); setNewDraw(0);
          if (radio1 == 1) { setResultData(null);
          setButState(true); // if (radio1 == 1) {
          } // setButState(true);
          // }
          break; break;
          case 'schemename': case 'schemename':
          setKeepDataDraw([]);
          setRadio1(''); setRadio1('');
          mapInfo.current.map.layers.forEach(item => { mapInfo.current.map.layers.forEach(item => {
          ...@@ -614,10 +619,13 @@ const Map = props => { ...@@ -614,10 +619,13 @@ const Map = props => {
          // 选择范围 // 选择范围
          const onTangleClick = e => { const onTangleClick = e => {
          let aa = 0;
          Drawtool.activate({ Drawtool.activate({
          view: mapInfo.current, view: mapInfo.current,
          action: 'extent', action: 'extent',
          drawEnd: data => { drawEnd: data => {
          aa = 1;
          setLoad(false);
          setArea(data); setArea(data);
          console.log(data); console.log(data);
          const geom1 = geomUtils.toGeometry({ const geom1 = geomUtils.toGeometry({
          ...@@ -635,6 +643,9 @@ const Map = props => { ...@@ -635,6 +643,9 @@ const Map = props => {
          mapRef.current.gotoGeometry(geom1); mapRef.current.gotoGeometry(geom1);
          }, },
          }); });
          setTimeout(() => {
          console.log(aa);
          }, 0);
          }; };
          const saveCallBack = e => { const saveCallBack = e => {
          ...@@ -647,11 +658,12 @@ const Map = props => { ...@@ -647,11 +658,12 @@ const Map = props => {
          }); });
          let area1 = form.getFieldsValue().areaName; let area1 = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(area1[0], geom1); mapRef.current.changeAreaName(area1[area1.length - 1], geom1);
          form.setFieldsValue({ form.setFieldsValue({
          customPointExtent: geom1, customPointExtent: geom1,
          }); });
          setKeepDraw(geom1); setKeepDraw(geom1);
          setKeepDataDraw(geom1);
          setButState(false); setButState(false);
          setDraw(1); setDraw(1);
          let data = { let data = {
          ...@@ -683,7 +695,6 @@ const Map = props => { ...@@ -683,7 +695,6 @@ const Map = props => {
          // form.setFieldsValue({ // form.setFieldsValue({
          // customPointExtent: geom, // customPointExtent: geom,
          // }); // });
          // setKeepDraw(geom);
          // } // }
          Drawtool.deactivate(false); Drawtool.deactivate(false);
          ...@@ -725,31 +736,40 @@ const Map = props => { ...@@ -725,31 +736,40 @@ const Map = props => {
          } else { } else {
          list = obj.boundColor; list = obj.boundColor;
          } }
          let data = {}; let data = {};
          console.log(obj.customPointExtent);
          // console.log(obj.customPointExtent.type);
          // console.log(obj.customPointExtent.constructor === Array);
          if (obj.customPointExtent) { if (obj.customPointExtent) {
          if (keepBorderArea && obj.customPointExtent.constructor === Array) { if (keepBorderArea && obj.customPointExtent.constructor === Array) {
          data.type = keepType; data.type = keepType;
          data.geometry = obj.customPointExtent; data.geometry = obj.customPointExtent;
          console.log(data);
          } else if (!keepBorderArea && obj.customPointExtent.constructor === Array) { } else if (!keepBorderArea && obj.customPointExtent.constructor === Array) {
          data.type = keepType; data.type = keepType;
          data.geometry = obj.customPointExtent; data.geometry = obj.customPointExtent;
          console.log(data);
          } else { } else {
          data = obj.customPointExtent; 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(keepBorderArea);
          console.log(obj.customPointExtent ? data : keepBorderArea); } else {
          data = '';
          }
          console.log(data);
          const jsConfig = { const jsConfig = {
          extent: form.getFieldValue('extent'), extent: form.getFieldValue('extent'),
          customPointExtent: obj.customPointExtent ? data : keepBorderArea, customPointExtent: data,
          areaName: aa, areaName: aa,
          boundColor: list, boundColor: list,
          boundWidth: `${obj.boundWidth}px`, boundWidth: `${obj.boundWidth}px`,
          ...@@ -873,6 +893,7 @@ const Map = props => { ...@@ -873,6 +893,7 @@ const Map = props => {
          setRadio1(e.target.value); setRadio1(e.target.value);
          } else { } else {
          console.log(keepDraw);
          if (keepDraw) { if (keepDraw) {
          let area1 = form.getFieldsValue().areaName; let area1 = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(area1[0], keepDraw); mapRef.current.changeAreaName(area1[0], keepDraw);
          ...@@ -890,7 +911,7 @@ const Map = props => { ...@@ -890,7 +911,7 @@ const Map = props => {
          setResultData({ ...data }); setResultData({ ...data });
          } }
          if (draw == 0) { if (draw == 0) {
          setButState(true); setButState(false);
          } }
          setRadio1(e.target.value); setRadio1(e.target.value);
          } }
          ...@@ -908,7 +929,6 @@ const Map = props => { ...@@ -908,7 +929,6 @@ const Map = props => {
          }; };
          return ( return (
          <div>
          <div className={styles.mapContent}> <div className={styles.mapContent}>
          <div <div
          className={classnames({ className={classnames({
          ...@@ -934,6 +954,9 @@ const Map = props => { ...@@ -934,6 +954,9 @@ const Map = props => {
          ))} ))}
          </Select> </Select>
          </Form.Item> </Form.Item>
          <Divider orientation="left" style={{ borderTopColor: '#99bbe8', color: '#0079c1' }}>
          <strong>范围编辑</strong>
          </Divider>
          <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}> <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}>
          <Cascader <Cascader
          fieldNames={{ fieldNames={{
          ...@@ -948,24 +971,24 @@ const Map = props => { ...@@ -948,24 +971,24 @@ const Map = props => {
          allowClear={false} allowClear={false}
          /> />
          </Form.Item> </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.Group onChange={onChange1} value={radio1}>
          <Radio value={0}>否</Radio> <Radio value={0}>地区选择</Radio>
          <Radio value={1}>是</Radio> <Radio value={1}>手绘区域</Radio>
          </Radio.Group> </Radio.Group>
          </Form.Item> </Form.Item>
          {radio1 == 0 ? ( {radio1 == 0 ? (
          <span /> <span />
          ) : ( ) : (
          <> <>
          <Form.Item label="自定义行政区范围" name="customPointExtent"> <Form.Item label="手绘区域" name="customPointExtent">
          {butState && ( {butState && (
          <Tag <Tag
          style={{ style={{
          width: '100px', width: '100px',
          height: '27px', height: '27px',
          paddingLeft: '28px', paddingLeft: '28px',
          paddingTop: '2px', paddingTop: '0px',
          marginTop: '4px', marginTop: '4px',
          display: 'flex', display: 'flex',
          alignItems: 'center', alignItems: 'center',
          ...@@ -975,43 +998,39 @@ const Map = props => { ...@@ -975,43 +998,39 @@ const Map = props => {
          绘制中 绘制中
          </Tag> </Tag>
          )} )}
          {!butState && draw == 1 && ( {!butState && draw == 0 && (
          <Tooltip title="点击按钮开始绘制">
          <Tag <Tag
          icon={<CheckCircleOutlined style={{ marginTop: '2px' }} />}
          color="success"
          style={{ style={{
          width: '100px', width: '100px',
          height: '27px', height: '27px',
          paddingLeft: '24px', paddingLeft: '25px',
          paddingTop: '0px', paddingTop: '0px',
          marginTop: '4px', marginTop: '4px',
          display: 'flex', display: 'flex',
          alignItems: 'center', alignItems: 'center',
          }} }}
          color="processing"
          onClick={() => { onClick={() => {
          setNewDraw(0);
          setButState(true); setButState(true);
          }} }}
          > >
          已绘制 开始绘制
          </Tag> </Tag>
          </Tooltip>
          )} )}
          {/* {newDraw == 1 && ( {!butState && draw == 1 && (
          <Tooltip title="点击按钮开始绘制"> <Tooltip title="点击按钮开始绘制">
          <Tag <Tag
          icon={<CheckCircleOutlined style={{ marginTop: '3px' }} />}
          color="success"
          style={{ style={{
          width: '100px', width: '100px',
          height: '27px', height: '27px',
          paddingLeft: '19px', paddingLeft: '21px',
          paddingTop: '2px', paddingTop: '0px',
          marginTop: '4px', marginTop: '4px',
          display: 'flex', display: 'flex',
          alignItems: 'center', alignItems: 'center',
          }} }}
          icon={<CheckCircleOutlined style={{ marginTop: '2px' }} />}
          color="success"
          onClick={() => { onClick={() => {
          setNewDraw(0); setNewDraw(0);
          setButState(true); setButState(true);
          ...@@ -1020,7 +1039,7 @@ const Map = props => { ...@@ -1020,7 +1039,7 @@ const Map = props => {
          已绘制 已绘制
          </Tag> </Tag>
          </Tooltip> </Tooltip>
          )} */} )}
          </Form.Item> </Form.Item>
          </> </>
          )} )}
          ...@@ -1039,15 +1058,12 @@ const Map = props => { ...@@ -1039,15 +1058,12 @@ const Map = props => {
          ))} ))}
          </div> </div>
          </Form.Item> </Form.Item>
          <Form.Item <Form.Item label="透明度(%)" name="backgroundOpacity" style={{ marginBottom: '19px' }}>
          label="透明度(%)"
          name="backgroundOpacity"
          style={{ marginBottom: '19px' }}
          >
          <Slider min={0} max={100} /> <Slider min={0} max={100} />
          </Form.Item> </Form.Item>
          <Form.Item label="边界颜色" name="boundColor" style={{ marginBottom: '19px' }}> <Form.Item label="边界颜色" name="boundColor" style={{ marginBottom: '19px' }}>
          <Popconfirm <Popconfirm
          overlayClassName={styles.Popconfirmtitle}
          placement="topLeft" placement="topLeft"
          icon={false} icon={false}
          title={ title={
          ...@@ -1080,29 +1096,100 @@ const Map = props => { ...@@ -1080,29 +1096,100 @@ const Map = props => {
          <Form.Item label="边界宽度" name="boundWidth" style={{ marginBottom: '19px' }}> <Form.Item label="边界宽度" name="boundWidth" style={{ marginBottom: '19px' }}>
          <InputNumber min={1} max={10} /> <InputNumber min={1} max={10} />
          </Form.Item> </Form.Item>
          <Divider orientation="left" style={{ borderTopColor: '#99bbe8', color: '#0079c1' }}>
          <strong>高级设置</strong>
          </Divider>
          {name ? ( {name ? (
          <Form.Item label="管网方案" name="exportScheme" style={{ marginBottom: '19px' }}> <Form.Item label="管网方案" name="exportScheme" style={{ marginBottom: '19px' }}>
          <Radio.Group onChange={onChange} value={radio}> <Radio.Group onChange={onChange} value={radio}>
          <Radio value="pandagis">后端出图</Radio> <Radio value="pandagis">整图绘制</Radio>
          <Radio value="arcgis">前端出图</Radio> <Radio value="arcgis">实时绘制</Radio>
          </Radio.Group> </Radio.Group>
          </Form.Item> </Form.Item>
          ) : ( ) : (
          <></> <></>
          )} )}
          <Form.Item label="复位范围" style={{ marginBottom: '19px' }}> <Form.Item label="复位视野" style={{ marginBottom: '19px' }}>
          <div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
          <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}> <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> </Form.Item>
          <Tooltip title="复位范围框选"> {/* <Tooltip title="复位视野框选">
          <Button <Button
          style={{ height: '76px', borderLeft: 'none' }} style={{ height: '76px', borderLeft: 'none' }}
          icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />} icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />}
          onClick={e => onTangleClick(e)} onClick={e => onTangleClick(e)}
          /> />
          </Tooltip> </Tooltip> */}
          </div> </div>
          </Form.Item> </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 18 }}> <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          ...@@ -1156,13 +1243,11 @@ const Map = props => { ...@@ -1156,13 +1243,11 @@ const Map = props => {
          <span>{console.log(form.getFieldsValue().areaName)}</span> <span>{console.log(form.getFieldsValue().areaName)}</span>
          <EditAndDrawPanel <EditAndDrawPanel
          view={mapInfo.current} view={mapInfo.current}
          editType={['EXTENT', 'POLYGON', 'CIRCLE']} editType={['POLYGON', 'EXTENT', 'CIRCLE']}
          defaultGraphic={resultData} defaultGraphic={resultData}
          areaName={() => { areaName={() => {
          if (form.getFieldsValue().areaName) { if (form.getFieldsValue().areaName) {
          return form.getFieldsValue().areaName[ return form.getFieldsValue().areaName[form.getFieldsValue().areaName.length - 1];
          form.getFieldsValue().areaName.length - 1
          ];
          } }
          }} }}
          useActivePanel useActivePanel
          ...@@ -1176,7 +1261,6 @@ const Map = props => { ...@@ -1176,7 +1261,6 @@ const Map = props => {
          )} )}
          </div> </div>
          </div> </div>
          </div>
          ); );
          }; };
          ......
          src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.less
          View file @ 9df89f83
          ...@@ -3,13 +3,23 @@ ...@@ -3,13 +3,23 @@
          margin-top: 0px; margin-top: 0px;
          } }
          } }
          .Popconfirmtitle {
          .ant-popover-message-title {
          padding-left: 0px;
          }
          }
          .mapContent { .mapContent {
          display: flex; display: flex;
          width: 100%; width: 100%;
          height: calc(100vh - 160px); height: calc(100vh - 160px);
          .ant-radio-wrapper { .ant-radio-wrapper {
          min-width: 100px; min-width: 88px;
          } }
          .mapTool { .mapTool {
          width: 25%; width: 25%;
          overflow-y: scroll; overflow-y: scroll;
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment