Skip to content

C
CivManage
Commit 63d9df44 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: 'gis地图配置'

parent 4c31a407
Pipeline #48423 skipped with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 1670 additions and 132 deletions
          src/pages/platformCenter/gis/schemeConfig/TileConfig/AddModal.jsx
          View file @ 63d9df44
          /* eslint-disable camelcase */
          /* eslint-disable jsx-a11y/alt-text */
          /* eslint-disable no-else-return */
          /* eslint-disable prefer-promise-reject-errors */
          /* eslint-disable indent */
          /* eslint-disable react/jsx-boolean-value */
          /* eslint-disable no-case-declarations */
          /* eslint-disable no-shadow */
          import React, { useState, useEffect } from 'react';
          import {
          Form,
          ......@@ -12,21 +20,38 @@ import {
          Image,
          Radio,
          Button,
          Switch,
          } from 'antd';
          import styles from '../SchemeConfig.less';
          import thumbnail_1 from '@/assets/images/thumbnail/thumbnail_1.jpg';
          import thumbnail_2 from '@/assets/images/thumbnail/thumbnail_2.jpg';
          import thumbnail_3 from '@/assets/images/thumbnail/thumbnail_3.jpg';
          import thumbnail_4 from '@/assets/images/thumbnail/thumbnail_4.jpg';
          import { SetServiceConfig } from '@/services/webConfig/api';
          import classnames from 'classnames';
          import {
          SetServiceConfig,
          GetCustomBaseMapList,
          GetGridSetList,
          GetCustomBaseMapByName,
          } from '@/services/webConfig/api';
          const { Item } = Form;
          const { Option } = Select;
          const AddModal = props => {
          const { callBackSubmit = () => {}, type, formObj, visible, baseMap } = props;
          const { callBackSubmit = () => {}, type, formObj, visible, baseMap, name } = props;
          const [loading, setLoading] = useState(false);
          const [radio, setRadio] = useState();
          const [alpha, setAlpha] = useState(1);
          const [mapType, setMapType] = useState(0);
          const [advanced, setAdvanced] = useState(0);
          const [spaceData, setSpaceData] = useState([]);
          const [keyData, setKeyData] = useState([]);
          const [data, setData] = useState([]);
          const [areaData, setAreaData] = useState([]);
          const [pickItem, setPickItem] = useState('');
          const [aa, setAa] = useState(0);
          const [bb, setBb] = useState(0);
          const [cc, setCc] = useState(0);
          const [dd, setDd] = useState(0);
          const [form] = Form.useForm();
          const arr = [
          'assets/images/thumbnail/thumbnail_1.jpg',
          ......@@ -40,18 +65,49 @@ const AddModal = props => {
          form.validateFields().then(validate => {
          if (validate) {
          let obj = form.getFieldsValue();
          let arr = {
          servicename: obj.servicename,
          terminalType: 'base',
          isBaseMap: true,
          jsonCfg: JSON.stringify({
          alpha: alpha,
          label: obj.label,
          url: obj.url,
          icon: obj.icon,
          type: obj.type,
          }),
          };
          let arr = {};
          if (mapType == 1) {
          arr = {
          servicename: obj.servicename,
          terminalType: 'base',
          isBaseMap: true,
          jsonCfg: JSON.stringify({
          alpha: alpha,
          label: obj.label,
          url: obj.url,
          icon: obj.icon,
          type: obj.type,
          extent: obj.range,
          baseLayer: obj.layer,
          proxyUrl: obj.proxy,
          levelStart: obj.levelStart,
          origin: obj.origin,
          resolution: obj.resolution,
          tileMatrix: obj.coordinate,
          levelEnd: obj.levelEnd,
          levelEndEnlarge: obj.levelEndEnlarge,
          m_Ip: obj.IP,
          m_Port: obj.Port,
          m_User: obj.User,
          m_Pwd: obj.Pwd,
          gsAppName: obj.gis,
          }),
          };
          } else {
          arr = {
          servicename: obj.servicename,
          terminalType: 'base',
          isBaseMap: true,
          jsonCfg: JSON.stringify({
          alpha: alpha,
          label: obj.label,
          url: obj.url,
          icon: obj.icon,
          type: obj.type,
          }),
          };
          }
          SetServiceConfig(arr)
          .then(res => {
          setLoading(false);
          ......@@ -80,14 +136,25 @@ const AddModal = props => {
          const onFinish = value => {};
          useEffect(() => {
          setMapType(0);
          setAdvanced(0);
          setPickItem('');
          console.log(baseMap);
          switch (type) {
          case 'add':
          setRadio('');
          form.resetFields();
          form.setFieldsValue({
          servicename: baseMap[0],
          label: baseMap[0],
          type: servicenameToType(baseMap[0]),
          servicename: '高德地形',
          label: '高德地形',
          type: 'amap-v',
          gis: 'geoserver217',
          IP: '192.168.12.7',
          proxy: 'javasvc.panda-water.cn/geoserver',
          Port: '8080',
          User: 'admin',
          Pwd: 'geoserver',
          levelEndEnlarge: false,
          });
          break;
          ......@@ -123,11 +190,11 @@ const AddModal = props => {
          },
          };
          const onChange = value => {
          let silderData = value == 100 ? 1 : (value / 100).toFixed(1);
          let silderData = value == 100 ? 1 : value / 100;
          setAlpha(silderData);
          };
          const tipFormatter = value => {
          return (value / 100).toFixed(1);
          return value / 100;
          };
          const imgURL = [
          ......@@ -150,56 +217,256 @@ const AddModal = props => {
          };
          const handleChange = value => {
          form.setFieldsValue({
          type: servicenameToType(value),
          label: servicenameToType(value),
          servicename: servicenameToType(value),
          });
          // if (baseMap.indexOf(value) == 2 || baseMap.indexOf(value) == 3) {
          // setMapType(1)
          // }
          // else {
          // setMapType(0)
          // }
          if (value == 'google-user' || value == 'pipenet-tile') {
          setMapType(1);
          } else {
          setMapType(0);
          }
          };
          //添加地图类型
          const servicenameToType = servicename => {
          // if (servicename.indexOf('地形图') > -1)
          // servicename = '地形图'
          // if (servicename.indexOf('自定义底图') > -1)
          // servicename = '自定义底图'
          switch (servicename) {
          case '谷歌地形':
          return 'google-v';
          case '谷歌影像(注记)':
          return 'google-i-a';
          case '谷歌影像':
          return 'google-i';
          case '高德影像':
          return 'amap-i';
          case '高德地形':
          return 'amap-v';
          case '天地图影像':
          return 'tianditu-i-ia';
          case '天地图地形':
          return 'tianditu-v-va';
          case '自定义底图':
          return 'google-user';
          case '地形图':
          case '瓦片图':
          return 'pipenet-tile';
          // 添加地图类型
          const servicenameToType = type => {
          // console.log(name);
          // let random = Math.floor(Math.random() * 100) + 1;
          // if (type == 'google-v') {
          // let aa = `谷歌地形${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `谷歌地形${random}`;
          // }
          // } else if (type == 'google-i-a') {
          // let aa = `谷歌影像(注记)${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `谷歌影像(注记)${random}`;
          // }
          // } else if (type == 'google-i') {
          // let aa = `谷歌影像${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `谷歌影像${random}`;
          // }
          // } else if (type == 'amap-i') {
          // let aa = `高德影像${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `高德影像${random}`;
          // }
          // } else if (type == 'amap-v') {
          // let aa = `高德地形${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `高德地形${random}`;
          // }
          // } else if (type == 'tianditu-i-ia') {
          // let aa = `天地图影像${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `天地图影像${random}`;
          // }
          // } else if (type == 'tianditu-v-va') {
          // let aa = `天地图地形${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `天地图地形${random}`;
          // }
          // } else if (type == 'google-user') {
          // let aa = `自定义底图${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `自定义底图${random}`;
          // }
          // } else if (type == 'pipenet-tile') {
          // let aa = `地形图${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `地形图${random}`;
          // }
          // }
          switch (type) {
          case 'google-v':
          return '谷歌地形';
          case 'google-i-a':
          return '谷歌影像(注记)';
          case 'google-i':
          return '谷歌影像';
          case 'amap-i':
          return '高德影像';
          case 'amap-v':
          return '高德地形';
          case 'tianditu-i-ia':
          return '天地图影像';
          case 'tianditu-v-va':
          return '天地图地形';
          // case 'google-user':
          // return;
          // case 'pipenet-tile':
          // return;
          default:
          return 'arcgis-tilelayer';
          return;
          }
          };
          //选择坐标系
          const handleCoordinate = () => {};
          //选择图层
          const handleLayer = () => {};
          //选择工作空间
          const handleWorkSpance = () => {};
          // 选择坐标系
          const handleCoordinate = e => {
          let work = form.getFieldsValue().workSpance;
          let lay = form.getFieldsValue().layer;
          let index = lay.indexOf(':');
          let result = lay.substr(index + 1, lay.length);
          console.log(result);
          getGetCustomBaseMapByName(work, result, e);
          };
          // 选择图层
          const handleLayer = e => {
          let index = e.indexOf(':');
          let result = e.substr(index + 1, e.length);
          console.log(result);
          let work = form.getFieldsValue().workSpance;
          console.log(work);
          getGetGridSetList(work, result);
          };
          // 选择工作空间
          const handleWorkSpance = e => {
          console.log(e);
          setData(spaceData[e]);
          form.setFieldsValue({ layer: spaceData[e][0] });
          let aa = form.getFieldsValue().layer;
          let index = aa.indexOf(':');
          let result = aa.substr(index + 1, aa.length);
          console.log(result);
          getGetGridSetList(e, result);
          };
          const getGetGridSetList = (a, bb) => {
          let obj = form.getFieldsValue();
          let aa = form.getFieldsValue().layer;
          let result;
          if (aa) {
          let index = aa.indexOf(':');
          result = aa.substr(index + 1, aa.length);
          console.log(result);
          }
          GetGridSetList({
          m_Port: obj.Port || '8080',
          m_User: obj.User || 'admin',
          m_Pwd: obj.Pwd || 'geoserver',
          m_Ip: obj.IP || '192.168.12.7',
          gsAppName: obj.gis || 'geoserver217',
          layerName: bb,
          workSpaceName: a,
          }).then(res => {
          let data = [];
          console.log(res.results);
          res.results.map(i => {
          data.push(i.gridSetName);
          });
          console.log(data);
          setAreaData(data);
          form.setFieldsValue({ coordinate: data[0] });
          getGetCustomBaseMapByName(a, bb, data[0]);
          });
          };
          const getGetCustomBaseMapByName = (a, bb, cc) => {
          let obj = form.getFieldsValue();
          GetCustomBaseMapByName({
          m_Port: obj.Port || '8080',
          m_User: obj.User || 'admin',
          m_Pwd: obj.Pwd || 'geoserver',
          m_Ip: obj.IP || '192.168.12.7',
          gsAppName: obj.gis || 'geoserver217',
          layerName: bb,
          workSpaceName: a,
          gridSet: cc,
          }).then(res => {
          let aa = res.results.coords;
          console.log(JSON.parse(aa)[2]);
          console.log(JSON.parse(aa)[3]);
          console.log(JSON.parse(aa).toString());
          form.setFieldsValue({
          range: JSON.parse(aa).toString(),
          resolution: res.results.resolutions,
          origin: `-${JSON.parse(aa)[2]},${JSON.parse(aa)[3]}`,
          levelStart: '3',
          });
          });
          };
          const change = (e, event) => {
          if (e) {
          setAdvanced(1);
          } else {
          setAdvanced(0);
          }
          console.log(e);
          console.log(event);
          };
          const choose = () => {
          let obj = form.getFieldsValue();
          GetCustomBaseMapList({
          m_Port: obj.Port || '8080',
          m_User: obj.User || 'admin',
          m_Pwd: obj.Pwd || 'geoserver',
          m_Ip: obj.IP || '192.168.12.7',
          gsAppName: obj.gis,
          }).then(res => {
          if (res.IsSuccess == true) {
          console.log(res.results);
          console.log(Object.keys(res.results));
          setSpaceData(res.results);
          setKeyData(Object.keys(res.results));
          let aa = Object.keys(res.results)[0];
          setData(res.results[aa]);
          let bb = res.results[aa];
          let index = bb[0].indexOf(':');
          let result = bb[0].substr(index + 1, bb[0].length);
          console.log(result);
          getGetGridSetList(aa, result);
          form.setFieldsValue({ workSpance: aa, layer: bb[0] });
          } else {
          setSpaceData([]);
          setKeyData([]);
          setData([]);
          setAreaData([]);
          form.setFieldsValue({
          workSpance: '',
          layer: '',
          coordinate: '',
          range: '',
          levelStart: '',
          levelEnd: '',
          origin: '',
          resolution: '',
          });
          notification.error({
          message: '提示',
          duration: 3,
          description: res.EMessage,
          });
          }
          });
          };
          const title = (
          <span>
          透明度<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>{alpha}</span>
          </span>
          );
          return (
          <Modal
          title={`${type === 'add' ? '添加' : '编辑'}底图`}
          bodyStyle={{ width: '100%', minHeight: '100px' }}
          title="添加底图"
          bodyStyle={{ width: '100%', maxHeight: '600px', overflow: 'scroll' }}
          style={{ top: '150px' }}
          width="700px"
          destroyOnClose
          ......@@ -214,67 +481,79 @@ const AddModal = props => {
          >
          {visible && (
          <Form form={form} {...layout} onFinish={onFinish}>
          <Item label="类型" name="type" rules={[{ required: true, message: '请选择服务名' }]}>
          <Select onChange={handleChange}>
          <Option value="amap-v">amap-v（高德地形）</Option>
          <Option value="amap-i">amap-i（高德影像）</Option>
          <Option value="tianditu-v-va">tianditu-v-va（天地图地形）</Option>
          <Option value="tianditu-i-ia">tianditu-i-ia（天地图影像）</Option>
          <Option value="google-user">google-user（自定义底图）</Option>
          <Option value="pipenet-tile">pipenet-tile（地形图）</Option>
          </Select>
          </Item>
          <Item
          label="服务名"
          name="servicename"
          rules={[{ required: true, message: '请选择服务名' }]}
          rules={[
          {
          required: true,
          validator: (rule, value) => {
          if (name.indexOf(form.getFieldsValue().servicename) != -1) {
          return Promise.reject('服务名称已存在');
          } else if (form.getFieldsValue().servicename == '') {
          return Promise.reject('服务名称不能为空');
          }
          return Promise.resolve();
          },
          },
          ]}
          >
          <Select onChange={handleChange}>
          {type === 'add'
          ? baseMap.map((item, index) => {
          return (
          <Option value={item} key={index}>
          {item}
          </Option>
          );
          })
          : ''}
          </Select>
          <Input placeholder="请输入服务名称" allowClear />
          </Item>
          <Item label="标签" name="label" rules={[{ required: true, message: '请输入标签' }]}>
          <Input placeholder="请输入IP" allowClear />
          </Item>
          <Item label="类型" name="type">
          <Input placeholder="请输入类型" allowClear disabled />
          <Input placeholder="请输入标签名" allowClear />
          </Item>
          <Item label="URL" name="url">
          {/* <Item label="URL" name="url">
          <Input placeholder="请输入URL" allowClear />
          </Item> */}
          <Item label={title} name="alpha">
          <Slider
          min={0}
          max={100}
          onChange={onChange}
          // step={0.1}
          tipFormatter={tipFormatter}
          // tooltipVisible={true}
          defaultValue={100}
          />
          </Item>
          <Item label="透明度">
          <Row>
          <Col span={12}>
          <Slider
          min={0}
          max={100}
          onChange={onChange}
          step={0.1}
          tipFormatter={tipFormatter}
          defaultValue={type === 'add' ? 100 : formObj.alpha * 100}
          />
          </Col>
          <Col span={4}>
          <InputNumber
          min={0}
          max={1}
          disabled
          style={{ margin: '0 16px' }}
          defaultValue={type === 'add' ? 1 : formObj.alpha}
          value={alpha}
          onChange={onChange}
          />
          </Col>
          </Row>
          </Item>
          <Item label="选择缩略图" name="icon">
          <div className={styles.imgList}>
          <Item
          label="选择缩略图"
          // name="icon"
          rules={[{ required: true, message: '请选择缩略图' }]}
          >
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          {imgURL.map((item, index) => {
          return (
          <div key={index} className={styles.imgItem}>
          <Image width={100} height={63} src={item.url} />
          <Radio.Group options={item} onChange={radioChange} value={radio}>
          <div
          className={classnames({
          [styles.imgHidden]: index !== pickItem,
          [styles.imgItem]: index === pickItem,
          })}
          key={index}
          >
          <img
          width="100"
          height="63"
          src={item.url}
          onClick={e => {
          setPickItem(index);
          form.setFieldsValue({ icon: arr[index] });
          }}
          />
          {/* <Radio.Group options={item} onChange={radioChange} value={radio}>
          <Radio value={arr[index]} />
          </Radio.Group>
          </Radio.Group> */}
          </div>
          );
          })}
          ......@@ -288,37 +567,75 @@ const AddModal = props => {
          <Item label="ip地址" name="IP" rules={[{ required: true, message: '请输入ip地址' }]}>
          <Input placeholder="请输入ip地址" allowClear />
          </Item>
          <Item
          label="geoserver名"
          name="gis"
          rules={[{ required: true, message: '请选择缩略图' }]}
          >
          <div className={styles.imgList}>
          <Input placeholder="请输入gis服务器名" allowClear />
          <Button style={{ marginLeft: '0.5rem' }}>选择工作空间</Button>
          </div>
          </Item>
          <Row>
          <Col span={16}>
          <Item
          label="geoserver名"
          name="gis"
          rules={[{ required: true, message: '请选择缩略图' }]}
          labelCol={{ span: 6 }}
          >
          <Input placeholder="请输入gis服务器名" allowClear />
          </Item>
          </Col>
          <Col span={8}>
          <Item>
          <Button style={{ width: '100%' }} onClick={choose}>
          选择工作空间
          </Button>
          </Item>
          </Col>
          </Row>
          <Item
          label="工作空间"
          name="workSpance"
          rules={[{ required: true, message: '请选择工作空间' }]}
          >
          <Select onChange={handleWorkSpance} />
          <Select onChange={handleWorkSpance}>
          {keyData
          ? keyData.map((item, index) => {
          return (
          <Option value={item} key={index}>
          {item}
          </Option>
          );
          })
          : ''}
          </Select>
          </Item>
          <Item
          label="图层名"
          name="layer"
          rules={[{ required: true, message: '请选择图层名' }]}
          >
          <Select onChange={handleLayer} />
          <Select onChange={handleLayer}>
          {data
          ? data.map((item, index) => {
          return (
          <Option value={item} key={index}>
          {item}
          </Option>
          );
          })
          : ''}
          </Select>
          </Item>
          <Item
          label="坐标系名"
          name="coordinate"
          rules={[{ required: true, message: '请选择坐标系名' }]}
          >
          <Select onChange={handleCoordinate} />
          <Select onChange={handleCoordinate}>
          {areaData
          ? areaData.map((item, index) => {
          return (
          <Option value={item} key={index}>
          {item}
          </Option>
          );
          })
          : ''}
          </Select>
          </Item>
          <Item
          ......@@ -330,18 +647,29 @@ const AddModal = props => {
          </Item>
          <Item
          label="起始级别"
          name="initLevel"
          name="levelStart"
          rules={[{ required: true, message: '请选择起始级别' }]}
          >
          <Input placeholder="最初显示级别" allowClear />
          </Item>
          <Item
          label="最大级别"
          name="maxLevel"
          rules={[{ required: true, message: '请选择最大级别' }]}
          name="levelEnd"
          // rules={[{ required: true, message: '请选择最大级别' }]}
          >
          <Input placeholder="最大显示级别" allowClear />
          </Item>
          <Item
          label="放大级别后继续放大"
          name="levelEndEnlarge"
          // rules={[{ required: true }]}
          labelCol={{ span: 7 }}
          >
          <Radio.Group>
          <Radio value={false}>否</Radio>
          <Radio value={true}>是</Radio>
          </Radio.Group>
          </Item>
          <Item
          label="代理url"
          name="proxy"
          ......@@ -349,6 +677,49 @@ const AddModal = props => {
          >
          <Input placeholder="请输入URL" allowClear />
          </Item>
          <Switch
          checkedChildren="高级设置"
          unCheckedChildren="高级设置"
          onChange={change}
          style={{ marginLeft: '40px', marginBottom: '15px' }}
          />
          {advanced === 1 ? (
          <>
          <Item
          label="端口号"
          name="Port"
          rules={[{ required: true, message: '请输入端口号' }]}
          >
          <Input placeholder="请输入端口号" allowClear />
          </Item>
          <Item
          label="用户名"
          name="User"
          rules={[{ required: true, message: '请输入用户名' }]}
          >
          <Input placeholder="请输入用户名" allowClear />
          </Item>
          <Item label="密码" name="Pwd" rules={[{ required: true, message: '请输入密码' }]}>
          <Input placeholder="请输入密码" allowClear />
          </Item>
          <Item
          label="原点"
          name="origin"
          rules={[{ required: true, message: '请输入原点' }]}
          >
          <Input placeholder="左上角" disabled />
          </Item>
          <Item
          label="分辨率"
          name="resolution"
          rules={[{ required: true, message: '请输入分辨率' }]}
          >
          <Input placeholder="0级分辨率" disabled />
          </Item>
          </>
          ) : (
          ''
          )}
          </>
          ) : (
          ''
          ......
          src/pages/platformCenter/gis/schemeConfig/TileConfig/EditModal.jsx 0 → 100644
          View file @ 63d9df44
          /* eslint-disable no-case-declarations */
          /* eslint-disable indent */
          import React, { useState, useEffect } from 'react';
          import {
          Form,
          Modal,
          Input,
          Select,
          notification,
          Slider,
          InputNumber,
          Row,
          Col,
          Image,
          Radio,
          Button,
          } from 'antd';
          import styles from '../SchemeConfig.less';
          import thumbnail_1 from '@/assets/images/thumbnail/thumbnail_1.jpg';
          import thumbnail_2 from '@/assets/images/thumbnail/thumbnail_2.jpg';
          import thumbnail_3 from '@/assets/images/thumbnail/thumbnail_3.jpg';
          import thumbnail_4 from '@/assets/images/thumbnail/thumbnail_4.jpg';
          import { SetServiceConfig } from '@/services/webConfig/api';
          const { Item } = Form;
          const { Option } = Select;
          const EditModal = props => {
          const { callBackSubmit = () => {}, type, formObj, visible, baseMap } = props;
          const [loading, setLoading] = useState(false);
          const [radio, setRadio] = useState();
          const [alpha, setAlpha] = useState(1);
          const [mapType, setMapType] = useState(0);
          const [form] = Form.useForm();
          const arr = [
          'assets/images/thumbnail/thumbnail_1.jpg',
          'assets/images/thumbnail/thumbnail_2.jpg',
          'assets/images/thumbnail/thumbnail_3.jpg',
          'assets/images/thumbnail/thumbnail_4.jpg',
          ];
          // 提交
          const onSubmit = () => {
          form.validateFields().then(validate => {
          if (validate) {
          let obj = form.getFieldsValue();
          let arr = {
          servicename: obj.servicename,
          terminalType: 'base',
          isBaseMap: true,
          jsonCfg: JSON.stringify({
          alpha: alpha,
          label: obj.label,
          url: obj.url,
          icon: obj.icon,
          type: obj.type,
          }),
          };
          SetServiceConfig(arr)
          .then(res => {
          setLoading(false);
          if (res.msg === 'Ok') {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: res.message || type == 'add' ? '新增成功' : '编辑成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.message || type == 'add' ? '新增失败' : '编辑失败',
          });
          }
          })
          .catch(err => {
          setLoading(false);
          });
          }
          });
          };
          const onFinish = value => {};
          useEffect(() => {
          switch (type) {
          case 'add':
          setRadio('');
          form.resetFields();
          form.setFieldsValue({
          servicename: baseMap[0],
          label: baseMap[0],
          type: servicenameToType(baseMap[0]),
          });
          break;
          case 'edit':
          form.setFieldsValue({ ...formObj });
          let index = formObj.icon.lastIndexOf('/');
          let str = formObj.icon.substring(index + 1, formObj.icon.length);
          let defaultIndex = arr.filter((item, index) => {
          if (item.indexOf(str) !== -1) {
          return index;
          }
          });
          setRadio(defaultIndex[0]);
          break;
          default:
          break;
          }
          // if (form.getFieldsValue('').servicename && baseMap.indexOf(form.getFieldsValue('').servicename) == 2 || baseMap.indexOf(form.getFieldsValue('').servicename) == 3) {
          // setMapType(1)
          // }
          // else {
          // setMapType(0)
          // }
          }, [visible]);
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 4,
          },
          wrapperCol: {
          span: 18,
          },
          };
          const onChange = value => {
          let silderData = value == 100 ? 1 : (value / 100).toFixed(1);
          setAlpha(silderData);
          };
          const tipFormatter = value => {
          return (value / 100).toFixed(1);
          };
          const imgURL = [
          {
          url: thumbnail_1,
          },
          {
          url: thumbnail_2,
          },
          {
          url: thumbnail_3,
          },
          {
          url: thumbnail_4,
          },
          ];
          const radioChange = e => {
          setRadio(e.target.value);
          };
          const handleChange = value => {
          form.setFieldsValue({
          type: servicenameToType(value),
          });
          // if (baseMap.indexOf(value) == 2 || baseMap.indexOf(value) == 3) {
          // setMapType(1)
          // }
          // else {
          // setMapType(0)
          // }
          };
          //添加地图类型
          const servicenameToType = servicename => {
          // if (servicename.indexOf('地形图') > -1)
          // servicename = '地形图'
          // if (servicename.indexOf('自定义底图') > -1)
          // servicename = '自定义底图'
          switch (servicename) {
          case '谷歌地形':
          return 'google-v';
          case '谷歌影像(注记)':
          return 'google-i-a';
          case '谷歌影像':
          return 'google-i';
          case '高德影像':
          return 'amap-i';
          case '高德地形':
          return 'amap-v';
          case '天地图影像':
          return 'tianditu-i-ia';
          case '天地图地形':
          return 'tianditu-v-va';
          case '自定义底图':
          return 'google-user';
          case '地形图':
          case '瓦片图':
          return 'pipenet-tile';
          default:
          return 'arcgis-tilelayer';
          }
          };
          // 选择坐标系
          const handleCoordinate = () => {};
          // 选择图层
          const handleLayer = () => {};
          // 选择工作空间
          const handleWorkSpance = () => {};
          return (
          <Modal
          title={`${type === 'add' ? '添加' : '编辑'}底图`}
          bodyStyle={{ width: '100%', minHeight: '100px' }}
          style={{ top: '150px' }}
          width="700px"
          destroyOnClose
          maskClosable={false}
          cancelText="取消"
          okText="确认"
          {...props}
          onOk={() => onSubmit()}
          confirmLoading={loading}
          forceRender={true}
          getContainer={false}
          >
          {visible && (
          <Form form={form} {...layout} onFinish={onFinish}>
          <Item
          label="服务名"
          name="servicename"
          rules={[{ required: true, message: '请选择服务名' }]}
          >
          <Select onChange={handleChange}>
          {type === 'add'
          ? baseMap.map((item, index) => {
          return (
          <Option value={item} key={index}>
          {item}
          </Option>
          );
          })
          : ''}
          </Select>
          </Item>
          <Item label="标签" name="label" rules={[{ required: true, message: '请输入标签' }]}>
          <Input placeholder="请输入IP" allowClear />
          </Item>
          <Item label="类型" name="type">
          <Input placeholder="请输入类型" allowClear disabled />
          </Item>
          <Item label="URL" name="url">
          <Input placeholder="请输入URL" allowClear />
          </Item>
          <Item label="透明度">
          <Row>
          <Col span={12}>
          <Slider
          min={0}
          max={100}
          onChange={onChange}
          step={0.1}
          tipFormatter={tipFormatter}
          defaultValue={type === 'add' ? 100 : formObj.alpha * 100}
          />
          </Col>
          <Col span={4}>
          <InputNumber
          min={0}
          max={1}
          disabled
          style={{ margin: '0 16px' }}
          defaultValue={type === 'add' ? 1 : formObj.alpha}
          value={alpha}
          onChange={onChange}
          />
          </Col>
          </Row>
          </Item>
          <Item label="选择缩略图" name="icon">
          <div className={styles.imgList}>
          {imgURL.map((item, index) => {
          return (
          <div key={index} className={styles.imgItem}>
          <Image width={100} height={63} src={item.url} />
          <Radio.Group options={item} onChange={radioChange} value={radio}>
          <Radio value={arr[index]} />
          </Radio.Group>
          </div>
          );
          })}
          </div>
          </Item>
          <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}>
          <Input placeholder="请输入URL" allowClear />
          </Item>
          {mapType === 1 ? (
          <>
          <Item label="ip地址" name="IP" rules={[{ required: true, message: '请输入ip地址' }]}>
          <Input placeholder="请输入ip地址" allowClear />
          </Item>
          <Item
          label="geoserver名"
          name="gis"
          rules={[{ required: true, message: '请选择缩略图' }]}
          >
          <div className={styles.imgList}>
          <Input placeholder="请输入gis服务器名" allowClear />
          <Button style={{ marginLeft: '0.5rem' }}>选择工作空间</Button>
          </div>
          </Item>
          <Item
          label="工作空间"
          name="workSpance"
          rules={[{ required: true, message: '请选择工作空间' }]}
          >
          <Select onChange={handleWorkSpance} />
          </Item>
          <Item
          label="图层名"
          name="layer"
          rules={[{ required: true, message: '请选择图层名' }]}
          >
          <Select onChange={handleLayer} />
          </Item>
          <Item
          label="坐标系名"
          name="coordinate"
          rules={[{ required: true, message: '请选择坐标系名' }]}
          >
          <Select onChange={handleCoordinate} />
          </Item>
          <Item
          label="底图范围"
          name="range"
          rules={[{ required: true, message: '请选择底图范围' }]}
          >
          <Input placeholder="xmin,ymin,xmax,ymax" allowClear />
          </Item>
          <Item
          label="起始级别"
          name="initLevel"
          rules={[{ required: true, message: '请选择起始级别' }]}
          >
          <Input placeholder="最初显示级别" allowClear />
          </Item>
          <Item
          label="最大级别"
          name="maxLevel"
          rules={[{ required: true, message: '请选择最大级别' }]}
          >
          <Input placeholder="最大显示级别" allowClear />
          </Item>
          <Item
          label="代理url"
          name="proxy"
          rules={[{ required: true, message: '请选择缩略图' }]}
          >
          <Input placeholder="请输入URL" allowClear />
          </Item>
          </>
          ) : (
          ''
          )}
          </Form>
          )}
          </Modal>
          );
          };
          export default EditModal;
          src/pages/platformCenter/gis/schemeConfig/TileConfig/NewEditModal.jsx 0 → 100644
          View file @ 63d9df44
          /* eslint-disable jsx-a11y/alt-text */
          /* eslint-disable no-unused-vars */
          /* eslint-disable no-else-return */
          /* eslint-disable prefer-promise-reject-errors */
          /* eslint-disable indent */
          /* eslint-disable react/jsx-boolean-value */
          /* eslint-disable no-case-declarations */
          /* eslint-disable no-shadow */
          import React, { useState, useEffect } from 'react';
          import {
          Form,
          Modal,
          Input,
          Select,
          notification,
          Slider,
          InputNumber,
          Row,
          Col,
          Image,
          Radio,
          Button,
          Switch,
          } from 'antd';
          import styles from '../SchemeConfig.less';
          import thumbnail_1 from '@/assets/images/thumbnail/thumbnail_1.jpg';
          import thumbnail_2 from '@/assets/images/thumbnail/thumbnail_2.jpg';
          import thumbnail_3 from '@/assets/images/thumbnail/thumbnail_3.jpg';
          import thumbnail_4 from '@/assets/images/thumbnail/thumbnail_4.jpg';
          import classnames from 'classnames';
          import {
          SetServiceConfig,
          GetCustomBaseMapList,
          GetGridSetList,
          GetCustomBaseMapByName,
          } from '@/services/webConfig/api';
          const { Item } = Form;
          const { Option } = Select;
          const NewEditModal = props => {
          const { callBackSubmit = () => {}, type, formObj, visible, baseMap, name } = props;
          const [loading, setLoading] = useState(false);
          const [radio, setRadio] = useState();
          const [alpha, setAlpha] = useState(1);
          const [mapType, setMapType] = useState(0);
          const [advanced, setAdvanced] = useState(0);
          const [spaceData, setSpaceData] = useState([]);
          const [keyData, setKeyData] = useState([]);
          const [data, setData] = useState([]);
          const [areaData, setAreaData] = useState([]);
          const [pickItem, setPickItem] = useState('');
          const [form] = Form.useForm();
          const arr = [
          'assets/images/thumbnail/thumbnail_1.jpg',
          'assets/images/thumbnail/thumbnail_2.jpg',
          'assets/images/thumbnail/thumbnail_3.jpg',
          'assets/images/thumbnail/thumbnail_4.jpg',
          ];
          // 提交
          const onSubmit = () => {
          form.validateFields().then(validate => {
          if (validate) {
          let obj = form.getFieldsValue();
          let arr = {};
          if (mapType == 1) {
          arr = {
          servicename: obj.servicename,
          terminalType: 'base',
          isBaseMap: true,
          jsonCfg: JSON.stringify({
          alpha: alpha,
          label: obj.label,
          url: obj.url,
          icon: obj.icon,
          type: obj.type,
          extent: obj.range,
          baseLayer: obj.layer,
          proxyUrl: obj.proxy,
          levelStart: obj.levelStart,
          origin: obj.origin,
          resolution: obj.resolution,
          tileMatrix: obj.coordinate,
          levelEnd: obj.levelEnd,
          levelEndEnlarge: obj.levelEndEnlarge,
          m_Ip: obj.IP,
          m_Port: obj.Port,
          m_User: obj.User,
          m_Pwd: obj.Pwd,
          gsAppName: obj.gis,
          }),
          };
          } else {
          arr = {
          servicename: obj.servicename,
          terminalType: 'base',
          isBaseMap: true,
          jsonCfg: JSON.stringify({
          alpha: alpha,
          label: obj.label,
          url: obj.url,
          icon: obj.icon,
          type: obj.type,
          }),
          };
          }
          SetServiceConfig(arr)
          .then(res => {
          setLoading(false);
          if (res.msg === 'Ok') {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: res.message || type == 'add' ? '新增成功' : '编辑成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.message || type == 'add' ? '新增失败' : '编辑失败',
          });
          }
          })
          .catch(err => {
          setLoading(false);
          });
          }
          });
          };
          const onFinish = value => {};
          useEffect(() => {
          console.log(formObj);
          setAlpha(formObj.alpha);
          let aa;
          if (formObj.baseLayer) {
          let index = formObj.baseLayer.lastIndexOf(':');
          aa = formObj.baseLayer.substring(0, index);
          console.log(aa);
          }
          console.log(formObj.baseLayer);
          if (formObj.baseLayer) {
          console.log(111);
          setMapType(1);
          } else {
          console.log(1212);
          setMapType(0);
          }
          setAdvanced(0);
          switch (type) {
          case 'edit':
          form.setFieldsValue({
          ...formObj,
          IP: formObj.m_Ip,
          gis: formObj.gsAppName,
          layer: formObj.baseLayer,
          coordinate: formObj.tileMatrix,
          range: formObj.extent,
          proxy: formObj.proxyUrl,
          Port: formObj.m_Port,
          User: formObj.m_User,
          Pwd: formObj.m_Pwd,
          workSpance: aa,
          });
          let index = formObj.icon.lastIndexOf('/');
          console.log(index);
          let str = formObj.icon.substring(index + 1, formObj.icon.length);
          console.log(str);
          let defaultIndex = arr.filter((item, index) => {
          if (item.indexOf(str) != -1) {
          return item;
          }
          });
          console.log(defaultIndex);
          if (str.indexOf(1) != -1) {
          setPickItem(0);
          } else if (str.indexOf(2) != -1) {
          setPickItem(1);
          } else if (str.indexOf(3) != -1) {
          setPickItem(2);
          } else if (str.indexOf(4) != -1) {
          setPickItem(3);
          }
          setRadio(defaultIndex[0]);
          break;
          default:
          break;
          }
          }, [visible]);
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 4,
          },
          wrapperCol: {
          span: 18,
          },
          };
          const onChange = value => {
          let silderData = value == 100 ? 1 : value / 100;
          setAlpha(silderData);
          };
          const tipFormatter = value => {
          return value / 100;
          };
          const imgURL = [
          {
          url: thumbnail_1,
          },
          {
          url: thumbnail_2,
          },
          {
          url: thumbnail_3,
          },
          {
          url: thumbnail_4,
          },
          ];
          const radioChange = e => {
          console.log(e.target.value);
          setRadio(e.target.value);
          };
          const handleChange = value => {
          form.setFieldsValue({
          label: servicenameToType(value),
          servicename: servicenameToType(value),
          });
          console.log(value);
          if (value == 'google-user' || value == 'pipenet-tile') {
          setMapType(1);
          console.log(form.getFieldsValue().IP);
          console.log(form.getFieldsValue().gis);
          if (!form.getFieldsValue().IP) {
          form.setFieldsValue({
          IP: '192.168.12.7',
          gis: 'geoserver217',
          proxy: 'javasvc.panda-water.cn/geoserver',
          levelEndEnlarge: false,
          Port: '8080',
          User: 'admin',
          Pwd: 'geoserver',
          });
          }
          // else if (form.getFieldsValue().gis == undefined) {
          // form.setFieldsValue({ gis: 'geoserver217' });
          // } else if (!form.getFieldsValue().proxy) {
          // form.setFieldsValue({ proxy: 'javasvc.panda-water.cn/geoserver' });
          // } else if (!form.getFieldsValue().levelEndEnlarge) {
          // form.setFieldsValue({ levelEndEnlarge: false });
          // } else if (!form.getFieldsValue().Port) {
          // form.setFieldsValue({ Port: '8080' });
          // } else if (!form.getFieldsValue().User) {
          // form.setFieldsValue({ User: 'admin' });
          // } else if (!form.getFieldsValue().Pwd) {
          // form.setFieldsValue({ Pwd: 'geoserver' });
          // }
          } else {
          setMapType(0);
          }
          };
          // 添加地图类型
          const servicenameToType = type => {
          // console.log(name);
          // let random = Math.floor(Math.random() * 100) + 1;
          // if (type == 'google-v') {
          // let aa = `谷歌地形${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `谷歌地形${random}`;
          // }
          // } else if (type == 'google-i-a') {
          // let aa = `谷歌影像(注记)${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `谷歌影像(注记)${random}`;
          // }
          // } else if (type == 'google-i') {
          // let aa = `谷歌影像${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `谷歌影像${random}`;
          // }
          // } else if (type == 'amap-i') {
          // let aa = `高德影像${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `高德影像${random}`;
          // }
          // } else if (type == 'amap-v') {
          // let aa = `高德地形${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `高德地形${random}`;
          // }
          // } else if (type == 'tianditu-i-ia') {
          // let aa = `天地图影像${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `天地图影像${random}`;
          // }
          // } else if (type == 'tianditu-v-va') {
          // let aa = `天地图地形${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `天地图地形${random}`;
          // }
          // } else if (type == 'google-user') {
          // let aa = `自定义底图${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `自定义底图${random}`;
          // }
          // } else if (type == 'pipenet-tile') {
          // let aa = `地形图${random}`;
          // if (name.indexOf(aa) != -1) {
          // servicenameToType(type);
          // } else {
          // return `地形图${random}`;
          // }
          // }
          switch (type) {
          case 'google-v':
          return '谷歌地形';
          case 'google-i-a':
          return '谷歌影像(注记)';
          case 'google-i':
          return '谷歌影像';
          case 'amap-i':
          return '高德影像';
          case 'amap-v':
          return '高德地形';
          case 'tianditu-i-ia':
          return '天地图影像';
          case 'tianditu-v-va':
          return '天地图地形';
          // case 'google-user':
          // return;
          // case 'pipenet-tile':
          // return;
          default:
          return;
          }
          };
          // 选择坐标系
          const handleCoordinate = e => {
          let work = form.getFieldsValue().workSpance;
          let lay = form.getFieldsValue().layer;
          let index = lay.indexOf(':');
          let result = lay.substr(index + 1, lay.length);
          console.log(result);
          getGetCustomBaseMapByName(work, result, e);
          };
          // 选择图层
          const handleLayer = e => {
          let index = e.indexOf(':');
          let result = e.substr(index + 1, e.length);
          console.log(result);
          let work = form.getFieldsValue().workSpance;
          console.log(work);
          getGetGridSetList(work, result);
          };
          // 选择工作空间
          const handleWorkSpance = e => {
          console.log(e);
          setData(spaceData[e]);
          form.setFieldsValue({ layer: spaceData[e][0] });
          let aa = form.getFieldsValue().layer;
          let index = aa.indexOf(':');
          let result = aa.substr(index + 1, aa.length);
          console.log(result);
          getGetGridSetList(e, result);
          };
          const getGetGridSetList = (a, bb) => {
          let obj = form.getFieldsValue();
          let aa = form.getFieldsValue().layer;
          let result;
          if (aa) {
          let index = aa.indexOf(':');
          result = aa.substr(index + 1, aa.length);
          console.log(result);
          }
          GetGridSetList({
          m_Port: obj.Port || '8080',
          m_User: obj.User || 'admin',
          m_Pwd: obj.Pwd || 'geoserver',
          m_Ip: obj.IP || '192.168.12.7',
          gsAppName: obj.gis || 'geoserver217',
          layerName: bb,
          workSpaceName: a,
          }).then(res => {
          let data = [];
          console.log(res.results);
          res.results.map(i => {
          data.push(i.gridSetName);
          });
          console.log(data);
          setAreaData(data);
          form.setFieldsValue({ coordinate: data[0] });
          getGetCustomBaseMapByName(a, bb, data[0]);
          });
          };
          const getGetCustomBaseMapByName = (a, bb, cc) => {
          let obj = form.getFieldsValue();
          GetCustomBaseMapByName({
          m_Port: obj.Port || '8080',
          m_User: obj.User || 'admin',
          m_Pwd: obj.Pwd || 'geoserver',
          m_Ip: obj.IP || '192.168.12.7',
          gsAppName: obj.gis || 'geoserver217',
          layerName: bb,
          workSpaceName: a,
          gridSet: cc,
          }).then(res => {
          let aa = res.results.coords;
          console.log(JSON.parse(aa)[2]);
          console.log(JSON.parse(aa)[3]);
          console.log(JSON.parse(aa).toString());
          form.setFieldsValue({
          range: JSON.parse(aa).toString(),
          resolution: res.results.resolutions,
          origin: `-${JSON.parse(aa)[2]},${JSON.parse(aa)[3]}`,
          levelStart: '3',
          });
          });
          };
          const change = (e, event) => {
          if (e) {
          setAdvanced(1);
          } else {
          setAdvanced(0);
          }
          console.log(e);
          console.log(event);
          };
          const choose = () => {
          let obj = form.getFieldsValue();
          GetCustomBaseMapList({
          m_Port: obj.Port || '8080',
          m_User: obj.User || 'admin',
          m_Pwd: obj.Pwd || 'geoserver',
          m_Ip: obj.IP || '192.168.12.7',
          gsAppName: obj.gis,
          }).then(res => {
          if (res.IsSuccess == true) {
          console.log(res.results);
          console.log(Object.keys(res.results));
          setSpaceData(res.results);
          setKeyData(Object.keys(res.results));
          let aa = Object.keys(res.results)[0];
          setData(res.results[aa]);
          let bb = res.results[aa];
          let index = bb[0].indexOf(':');
          let result = bb[0].substr(index + 1, bb[0].length);
          console.log(result);
          getGetGridSetList(aa, result);
          form.setFieldsValue({ workSpance: aa, layer: bb[0] });
          } else {
          setSpaceData([]);
          setKeyData([]);
          setData([]);
          setAreaData([]);
          form.setFieldsValue({
          workSpance: '',
          layer: '',
          coordinate: '',
          range: '',
          levelStart: '',
          levelEnd: '',
          origin: '',
          resolution: '',
          });
          notification.error({
          message: '提示',
          duration: 3,
          description: res.EMessage,
          });
          }
          });
          };
          const title = (
          <span>
          透明度<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>{alpha}</span>
          </span>
          );
          return (
          <Modal
          title="编辑底图"
          bodyStyle={{ width: '100%', maxHeight: '600px', overflow: 'scroll' }}
          style={{ top: '150px' }}
          width="700px"
          destroyOnClose
          maskClosable={false}
          cancelText="取消"
          okText="确认"
          {...props}
          onOk={() => onSubmit()}
          confirmLoading={loading}
          forceRender={true}
          getContainer={false}
          >
          {visible && (
          <Form form={form} {...layout} onFinish={onFinish}>
          <Item label="类型" name="type" rules={[{ required: true, message: '请选择服务名' }]}>
          <Select onChange={handleChange}>
          <Option value="amap-v">amap-v（高德地形）</Option>
          <Option value="amap-i">amap-i（高德影像）</Option>
          <Option value="tianditu-v-va">tianditu-v-va（天地图地形）</Option>
          <Option value="tianditu-i-ia">tianditu-i-ia（天地图影像）</Option>
          <Option value="google-user">google-user（自定义底图）</Option>
          <Option value="pipenet-tile">pipenet-tile（地形图）</Option>
          </Select>
          </Item>
          <Item
          label="服务名"
          name="servicename"
          rules={[
          {
          required: true,
          },
          ]}
          >
          <Input placeholder="请输入服务名称" disabled />
          </Item>
          <Item label="标签" name="label" rules={[{ required: true, message: '请输入标签' }]}>
          <Input placeholder="请输入标签名" allowClear />
          </Item>
          {/* <Item label="URL" name="url">
          <Input placeholder="请输入URL" allowClear />
          </Item> */}
          <Item label={title} name="alpha">
          {console.log(formObj.alpha)}
          <Slider
          min={1}
          max={100}
          onChange={onChange}
          tipFormatter={tipFormatter}
          // // tooltipVisible={true}
          defaultValue={formObj.alpha * 100}
          />
          </Item>
          <Item
          label="选择缩略图"
          // name="icon"
          rules={[{ required: true, message: '请选择缩略图' }]}
          >
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          {imgURL.map((item, index) => {
          return (
          <div
          className={classnames({
          [styles.imgHidden]: index !== pickItem,
          [styles.imgItem]: index === pickItem,
          })}
          key={index}
          >
          <img
          width="100"
          height="63"
          src={item.url}
          onClick={e => {
          setPickItem(index);
          form.setFieldsValue({ icon: arr[index] });
          }}
          />
          {/* <Radio.Group options={item} onChange={radioChange} value={radio}>
          <Radio value={arr[index]} />
          </Radio.Group> */}
          </div>
          );
          })}
          </div>
          </Item>
          <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}>
          <Input placeholder="请输入URL" allowClear />
          </Item>
          {mapType === 1 ? (
          <>
          <Item label="ip地址" name="IP" rules={[{ required: true, message: '请输入ip地址' }]}>
          <Input placeholder="请输入ip地址" allowClear />
          </Item>
          <Row>
          <Col span={16}>
          <Item
          label="geoserver名"
          name="gis"
          rules={[{ required: true, message: '请选择缩略图' }]}
          labelCol={{ span: 6 }}
          >
          <Input placeholder="请输入gis服务器名" allowClear />
          </Item>
          </Col>
          <Col span={8}>
          <Item>
          <Button style={{ width: '100%' }} onClick={choose}>
          选择工作空间
          </Button>
          </Item>
          </Col>
          </Row>
          <Item
          label="工作空间"
          name="workSpance"
          rules={[{ required: true, message: '请选择工作空间' }]}
          >
          <Select onChange={handleWorkSpance}>
          {keyData
          ? keyData.map((item, index) => {
          return (
          <Option value={item} key={index}>
          {item}
          </Option>
          );
          })
          : ''}
          </Select>
          </Item>
          <Item
          label="图层名"
          name="layer"
          rules={[{ required: true, message: '请选择图层名' }]}
          >
          <Select onChange={handleLayer}>
          {data
          ? data.map((item, index) => {
          return (
          <Option value={item} key={index}>
          {item}
          </Option>
          );
          })
          : ''}
          </Select>
          </Item>
          <Item
          label="坐标系名"
          name="coordinate"
          rules={[{ required: true, message: '请选择坐标系名' }]}
          >
          <Select onChange={handleCoordinate}>
          {areaData
          ? areaData.map((item, index) => {
          return (
          <Option value={item} key={index}>
          {item}
          </Option>
          );
          })
          : ''}
          </Select>
          </Item>
          <Item
          label="底图范围"
          name="range"
          rules={[{ required: true, message: '请选择底图范围' }]}
          >
          <Input placeholder="xmin,ymin,xmax,ymax" allowClear />
          </Item>
          <Item
          label="起始级别"
          name="levelStart"
          rules={[{ required: true, message: '请选择起始级别' }]}
          >
          <Input placeholder="最初显示级别" allowClear />
          </Item>
          <Item
          label="最大级别"
          name="levelEnd"
          // rules={[{ required: true, message: '请选择最大级别' }]}
          >
          <Input placeholder="最大显示级别" allowClear />
          </Item>
          <Item
          label="放大级别后继续放大"
          name="levelEndEnlarge"
          // rules={[{ required: true }]}
          labelCol={{ span: 7 }}
          >
          <Radio.Group>
          <Radio value={false}>否</Radio>
          <Radio value={true}>是</Radio>
          </Radio.Group>
          </Item>
          <Item
          label="代理url"
          name="proxy"
          rules={[{ required: true, message: '请选择缩略图' }]}
          >
          <Input placeholder="请输入URL" allowClear />
          </Item>
          <Switch
          checkedChildren="高级设置"
          unCheckedChildren="高级设置"
          onChange={change}
          style={{ marginLeft: '40px', marginBottom: '15px' }}
          />
          {advanced === 1 ? (
          <>
          <Item
          label="端口号"
          name="Port"
          rules={[{ required: true, message: '请输入端口号' }]}
          >
          <Input placeholder="请输入端口号" allowClear />
          </Item>
          <Item
          label="用户名"
          name="User"
          rules={[{ required: true, message: '请输入用户名' }]}
          >
          <Input placeholder="请输入用户名" allowClear />
          </Item>
          <Item label="密码" name="Pwd" rules={[{ required: true, message: '请输入密码' }]}>
          <Input placeholder="请输入密码" allowClear />
          </Item>
          <Item
          label="原点"
          name="origin"
          rules={[{ required: true, message: '请输入原点' }]}
          >
          <Input placeholder="左上角" disabled />
          </Item>
          <Item
          label="分辨率"
          name="resolution"
          rules={[{ required: true, message: '请输入分辨率' }]}
          >
          <Input placeholder="0级分辨率" disabled />
          </Item>
          </>
          ) : (
          ''
          )}
          </>
          ) : (
          ''
          )}
          </Form>
          )}
          </Modal>
          );
          };
          export default NewEditModal;
          src/pages/platformCenter/gis/schemeConfig/TileConfig/TileConfig.jsx
          View file @ 63d9df44
          ......@@ -3,14 +3,19 @@ import React, { useState, useEffect } from 'react';
          import styles from '../SchemeConfig.less';
          import { GettMaplayer, deleteConfig } from '@/services/webConfig/api';
          import AddModal from './AddModal';
          import EditModal from './EditModal';
          import NewEditModal from './NewEditModal';
          const TileData = props => {
          const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
          const [tileData, setTileData] = useState([]); // table表格数据
          const [visible, setVisible] = useState(false); // 弹窗
          const [addVisible, setAddVisible] = useState(false); // 弹窗
          const [editVisible, setEditVisible] = useState(false);
          const [type, setType] = useState(''); // 弹窗类型
          const [formObj, setFormObj] = useState({});
          const [flag, setFlag] = useState(0); // 弹窗类型
          const [baseMap, setBaseMap] = useState([]); // 底图数据
          const [name, setName] = useState([]);
          const columns = [
          {
          title: '服务名',
          ......@@ -71,11 +76,12 @@ const TileData = props => {
          const changebaseMap = record => {
          setType('edit');
          setFormObj(record);
          setVisible(true);
          setEditVisible(true);
          };
          const onSubmit = prop => {
          setVisible(false);
          setEditVisible(false);
          setFlag(flag + 1);
          setAddVisible(false);
          };
          const delConfirm = record => {
          ......@@ -113,7 +119,7 @@ const TileData = props => {
          const handleAdd = () => {
          if (baseMap.length) {
          setType('add');
          setVisible(true);
          setAddVisible(true);
          } else {
          notification.warning({
          message: '提示',
          ......@@ -128,7 +134,14 @@ const TileData = props => {
          // 获取瓦片数据配置数据
          const renderTile = () => {
          setTreeLoading(true);
          const baseMapData = ['高德地形', '高德影像', '天地图地形', '天地图影像'];
          const baseMapData = [
          // '谷歌地形',
          // '谷歌影像',
          '高德地形',
          '高德影像',
          '天地图地形',
          '天地图影像',
          ];
          GettMaplayer({
          terminalType: 'base',
          isBaseMap: true,
          ......@@ -136,12 +149,15 @@ const TileData = props => {
          if (res.msg === 'Ok') {
          setTreeLoading(false);
          setTileData(res.data.general.baseMap.layers);
          let data = [];
          res.data.general.baseMap.layers.map(item => {
          data.push(item.servicename);
          let index = baseMapData.indexOf(item.servicename);
          if (index != -1) {
          baseMapData.splice(index, 1);
          }
          });
          setName(data);
          setBaseMap(baseMapData);
          } else {
          setTreeLoading(false);
          ......@@ -170,13 +186,22 @@ const TileData = props => {
          columns={columns}
          dataSource={tileData}
          bordered
          rowKey="type"
          rowKey="servicename"
          scroll={{ y: 600 }}
          pagination={{
          showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
          />
          <AddModal
          visible={addVisible}
          onCancel={() => setAddVisible(false)}
          callBackSubmit={onSubmit}
          type={type}
          formObj={formObj}
          baseMap={baseMap}
          name={name}
          />
          <EditModal
          visible={visible}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          ......@@ -184,6 +209,15 @@ const TileData = props => {
          formObj={formObj}
          baseMap={baseMap}
          />
          <NewEditModal
          visible={editVisible}
          onCancel={() => setEditVisible(false)}
          callBackSubmit={onSubmit}
          type={type}
          formObj={formObj}
          baseMap={baseMap}
          name={name}
          />
          </Spin>
          </>
          );
          ......
          src/services/webConfig/api.js
          View file @ 63d9df44
          ......@@ -281,3 +281,12 @@ export const DownLoadWebModuleTree = query =>
          `${PUBLISH_SERVICE}/PlatformCenter/DownLoadWebModuleTree?nodeId=${query.nodeId}&sysName=${
          query.sysName
          }`;
          export const GetCustomBaseMapList = param =>
          get(`${CITY_SERVICE}/MapServer.svc/GetCustomBaseMapList?_version=9999`, param);
          export const GetGridSetList = param =>
          get(`${CITY_SERVICE}/MapServer.svc/GetGridSetList?_version=9999`, param);
          export const GetCustomBaseMapByName = param =>
          get(`${CITY_SERVICE}/MapServer.svc/GetCustomBaseMapByName?_version=9999`, param);
          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