AddModal.jsx 10.4 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import {
  Form,
  Modal,
  Input,
  Select,
  notification,
  Slider,
  InputNumber,
  Row,
  Col,
  Image,
  Radio,
  Button,
} from 'antd';
import styles from '../dimensionsConfig.less';
17 18 19 20
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';
21
import { AddBaseMap, EditBaseMap } from '@/services/webConfig/api';
22
import { number } from 'prop-types';
23 24 25
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
26
  const { callBackSubmit = () => {}, type, formObj, visible, baseMap } = props;
27 28 29 30 31
  const [loading, setLoading] = useState(false);
  const [radio, setRadio] = useState();
  const [alpha, setAlpha] = useState(1);
  const [mapType, setMapType] = useState(0);
  const [form] = Form.useForm();
32 33 34 35 36 37
  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',
  ];
38 39 40 41 42

  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
43
        let str = type === 'add' ? AddBaseMap : EditBaseMap;
44 45
        let obj = form.getFieldsValue();
        let arr = {
46 47
          name: obj.name,
          type: obj.type,
shaoan123's avatar
shaoan123 committed
48
          opacity: Number(alpha),
49
          icon: obj.icon,
50 51
          url: obj.url,
        };
52
        str(arr)
53 54
          .then(res => {
            setLoading(false);
55
            if (res.msg === 'Ok' || res.msg === '') {
56 57 58 59 60
              form.resetFields();
              callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
61
                description: res.message || type == 'add' ? '新增成功' : '编辑成功',
62 63 64 65 66
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
67
                description: res.message || type == 'add' ? '新增失败' : '编辑失败',
68 69 70
              });
            }
          })
71 72 73
          .catch(err => {
            setLoading(false);
          });
74 75 76 77
      }
    });
  };

78
  const onFinish = value => {};
79 80 81
  useEffect(() => {
    switch (type) {
      case 'add':
82 83
        setRadio('');
        setAlpha(1);
shaoan123's avatar
shaoan123 committed
84 85 86
        form.resetFields();
        form.setFieldsValue({
          name: baseMap[0],
87 88
          type: servicenameToType(baseMap[0]),
        });
shaoan123's avatar
shaoan123 committed
89

90 91 92
        break;
      case 'edit':
        form.setFieldsValue({ ...formObj });
93 94
        setAlpha(formObj.opacity);
        let index = formObj.icon.lastIndexOf('/');
95
        let str = formObj.icon.substring(index + 1, formObj.icon.length);
96
        let flag = '';
97
        let defaultIndex = arr.filter((item, index1) => {
98
          if (item.indexOf(str) !== -1) {
99
            flag = index1;
100
          }
101
        });
102
        setRadio(arr[flag]);
103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
        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: {
121
      span: 18,
122 123
    },
  };
124 125 126 127 128 129 130
  const onChange = value => {
    let silderData = value == 100 ? 1 : (value / 100).toFixed(1);
    setAlpha(silderData);
  };
  const tipFormatter = value => {
    return (value / 100).toFixed(1);
  };
131 132 133

  const imgURL = [
    {
134
      url: thumbnail_1,
135 136
    },
    {
137
      url: thumbnail_2,
138 139
    },
    {
140
      url: thumbnail_3,
141 142
    },
    {
143
      url: thumbnail_4,
144
    },
145
  ];
146

147 148 149 150
  const radioChange = e => {
    setRadio(e.target.value);
  };
  const handleChange = value => {
151
    form.setFieldsValue({
152 153
      type: servicenameToType(value),
    });
154 155 156 157 158 159
    // if (baseMap.indexOf(value) == 2 || baseMap.indexOf(value) == 3) {
    //   setMapType(1)
    // }
    // else {
    //   setMapType(0)
    // }
160
  };
161
  //添加地图类型
162
  const servicenameToType = servicename => {
163 164 165 166 167
    // if (servicename.indexOf('地形图') > -1)
    //   servicename = '地形图'
    // if (servicename.indexOf('自定义底图') > -1)
    //   servicename = '自定义底图'
    switch (servicename) {
168
      case '高德街道':
169
        return 'amap-v';
170
      case '高德影像':
171
        return 'amap-i';
172
      case '天地图街道':
173
        return 'tianditu-v';
174
      case '天地图影像':
175
        return 'tianditu-i';
176
      case '百度街道':
邹绪超's avatar
邹绪超 committed
177
        return 'baiduMapStreet';
178
      case '百度影像':
邹绪超's avatar
邹绪超 committed
179
        return 'baiduMapImage';
180
      case 'mapBox地图':
邹绪超's avatar
邹绪超 committed
181
        return 'mapBoxImage';
182 183
      case 'arcgis地图':
        return 'arcgisImage';
184
      default:
185
        return 'amap-v';
186
    }
187
  };
188
  //选择坐标系
189
  const handleCoordinate = () => {};
190
  //选择图层
191
  const handleLayer = () => {};
192
  //选择工作空间
193
  const handleWorkSpance = () => {};
194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212

  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}>
213
          <Item label="名称" name="name" rules={[{ required: true, message: '请选择服务名' }]}>
214
            <Select onChange={handleChange}>
215 216 217 218 219 220 221 222 223
              {type === 'add'
                ? baseMap.map((item, index) => {
                    return (
                      <Option value={item} key={index}>
                        {item}
                      </Option>
                    );
                  })
                : ''}
224 225
            </Select>
          </Item>
226
          <Item label="类型" name="type">
227 228
            <Input placeholder="请输入类型" allowClear disabled />
          </Item>
229
          <Item label="URL" name="url">
230 231
            <Input placeholder="请输入URL" allowClear />
          </Item>
232
          <Item label="透明度">
233 234 235 236 237 238 239 240
            <Row>
              <Col span={12}>
                <Slider
                  min={0}
                  max={100}
                  onChange={onChange}
                  step={0.1}
                  tipFormatter={tipFormatter}
241
                  defaultValue={type === 'add' ? 100 : formObj.opacity * 100}
242 243 244 245 246 247 248 249
                />
              </Col>
              <Col span={4}>
                <InputNumber
                  min={0}
                  max={1}
                  disabled
                  style={{ margin: '0 16px' }}
250
                  defaultValue={type === 'add' ? 1 : formObj.opacity}
251 252 253 254 255 256
                  value={alpha}
                  onChange={onChange}
                />
              </Col>
            </Row>
          </Item>
257
          <Item label="选择缩略图" name="icon">
258 259
            <div className={styles.imgList}>
              {imgURL.map((item, index) => {
260 261 262 263 264 265 266 267
                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>
                );
268 269 270
              })}
            </div>
          </Item>
271
          <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}>
272 273
            <Input placeholder="请输入URL" allowClear />
          </Item>
274
          {mapType === 1 ? (
275
            <>
276
              <Item label="ip地址" name="IP" rules={[{ required: true, message: '请输入ip地址' }]}>
277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294
                <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: '请选择工作空间' }]}
              >
295
                <Select onChange={handleWorkSpance} />
296 297 298 299 300 301
              </Item>
              <Item
                label="图层名"
                name="layer"
                rules={[{ required: true, message: '请选择图层名' }]}
              >
302
                <Select onChange={handleLayer} />
303 304 305 306 307 308
              </Item>
              <Item
                label="坐标系名"
                name="coordinate"
                rules={[{ required: true, message: '请选择坐标系名' }]}
              >
309
                <Select onChange={handleCoordinate} />
310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340
              </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>
            </>
341 342 343
          ) : (
            ''
          )}
344 345 346 347 348 349
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;