地图完成

config/config.js

@@ -138,5 +138,13 @@ export default {
   },
   chainWebpack: webpackPlugin,
 
-  proxy,
+  proxy: {
+    ...proxy,
+    '/gaode_amap': { // 高德地图
+      // target: 'http://192.168.0.11:8080/',
+      target: 'https://restapi.amap.com/v3/',
+      changeOrigin: true,
+      pathRewrite: { '^/gaode_amap': '' },
+    },
+  },
 };

src/pages/building/list/add/components/amapAroundData.js

@@ -0,0 +1,103 @@
+import request from '../../../../../utils/request';
+import apis from '../../../../../services/apis';
+
+const KEY = '14f05ce59c26364fd0674014dc0d8b1b'
+
+const POI_TYPES_KETY = {
+    Transport: 'Transport',
+    Mall: 'Mall',
+    Edu: 'Edu',
+    Hospital: 'Hospital',
+    Bank: 'Bank',
+    Restaurant: 'Restaurant',
+}
+
+// key 值会被拿到 building 表中 组合为字段名
+const POI_TYPES = [
+    {
+      key: POI_TYPES_KETY.Transport,
+      label: '交通',
+      types: ['150100', '150200', '150300', '150400', '150500', '150600'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Mall,
+      label: '商业',
+      types: ['060100', '060200', '060300', '060400', '060500', '060600',
+              '060700', '060800', '060900', '061000', '061100', '061200',
+              '061300', '061400', '080100', '080200', '080300', '080400',
+              '080500', '080600'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Edu,
+      label: '学校',
+      types: ['141200'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Hospital,
+      label: '医院',
+      types: ['090100', '090200', '090300', '090400', '090500', '090600', '090700'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Bank,
+      label: '银行',
+      types: ['160100'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Restaurant,
+      label: '餐饮',
+      types: ['050100', '050200', '050300', '050400', '050500', '050600',
+              '050700', '050800', '050900'],
+      data: [],
+    },
+  ]
+
+/**
+ * 获取 POI 类型
+ * @param {*} keyType 
+ */
+const getPOIType = keyType => {
+    return POI_TYPES.filter(item => item.key === keyType)
+}
+
+/**
+ * 获取这个 keyType 类型的所有 types
+ * @param {类型的key值} keyType 
+ */
+const getTypes = keyType => {
+  const typesArr = getPOIType(keyType)
+  return typesArr[0].types.join('|')
+}
+
+/**
+ * 获取周边数据
+ * @param {查询参数} params 
+ */
+function getAroundData (params) {
+    return new Promise((resolve, reject) => {
+        const { types, location } = params
+        if (!types) {
+            // console.err('未传输类型types值')
+            reject(new Error('未传输类型types值'))
+            return
+        }
+        if (!location) {
+            // console.err('未传输传输中心坐标location值')
+            reject(new Error('未传输传输中心坐标location值'))
+            return
+        }
+
+        request({ ...apis.amap.webService, params: { ...params, key: KEY, types: getTypes(types), location } }).then(data => {
+            // console.log(data)
+            resolve(data)
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
+
+export { POI_TYPES_KETY, getAroundData, getPOIType, POI_TYPES }

src/pages/building/list/add/components/base.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, InputNumber, notification } from 'antd';
 import moment from 'moment';
+import { router } from 'umi';
 import request from '../../../../../utils/request';
 import apis from '../../../../../services/apis';
 import Styles from '../style.less';
-import { router } from 'umi';
 import ImageUpload from '../../../../../components/XForm/ImageUpload'
 import ImageListUpload from '../../../../../components/XForm/ImageListUpload'
 import Wangedit from '../../../../../components/Wangedit/Wangedit'
@@ -13,6 +13,8 @@ import Amap from './amap'
 import BudildingProjectType from './buildingProjectType'
 import SelectCity from '../../../../../components/SelectButton/CitySelect'
 import FileUpload from '@/components/XForm/FileUpload';
+import { POI_TYPES_KETY, getAroundData, getPOIType, POI_TYPES } from './amapAroundData'
+import { ifError } from 'assert';
 
 const { Option } = Select
 const { TabPane } = Tabs;
@@ -41,6 +43,8 @@ function openNotificationWithIcon(type, message) {
 function AddBuilding(props) {
   const { getFieldDecorator } = props.form;
 
+  const [poi, setPoi] = useState([])
+
   console.log('props.building: ', props.building)
   if (props.building.buildingId !== undefined) {
     const { buildingId } = props.building
@@ -48,13 +52,13 @@ function AddBuilding(props) {
      useEffect(() => {
       if (buildingId !== '') {
         getById(buildingId)
+        setPoi(POI_TYPES)
       }
     }, [])
   }
 
    // 获取详情信息
    function getById(currentId) {
-
     request({ ...apis.building.buildingGetById, urlData: { id: currentId } }).then(res => {
       if (res.openingDate !== null) {
         res.openingDate = moment(res.openingDate)
@@ -87,6 +91,8 @@ function AddBuilding(props) {
   }
 
   function addBuilding(data) {
+    console.log('poi: ', poi)
+    data.mapJson = poi
     data.openingDate = moment(data.openingDate, 'yyyy-MM-dd HH:mm:ss')
     data.receivedDate = moment(data.receivedDate, 'yyyy-MM-dd HH:mm:ss')
     // 项目主图
@@ -121,6 +127,74 @@ function AddBuilding(props) {
     })
   }
 
+  // 周边设施 回调
+  function getMapScope(e) {
+    const coordinate = props.form.getFieldValue('coordinate').split(',')
+    const poiData = [].concat(POI_TYPES)
+    poiData.map(item => {
+      getAroundData({ types: item.key, location: `${coordinate[1]},${coordinate[0]}`, radius: e }).then(res => {
+        const { pois } = res
+        setFormMapScopeValue(item.key, pois)
+      }).catch(err => {
+        console.log(err.message)
+        openNotificationWithIcon('error', '周边数据获取失败')
+      })
+    })
+  }
+
+  function setFormMapScopeValue(key, pois) {
+    const poiArray = pois.map(p => {
+      return {
+        address: p.address,
+        adname: p.adname,
+        cityname: p.cityname,
+        distance: p.distance,
+        id: p.id,
+        location: p.location,
+        name: p.name,
+        pname: p.pname,
+        shopinfo: p.shopinfo,
+        type: p.type,
+        typecode: p.typecode,
+      }
+    })
+    
+    // 设置表单值
+    getFormMapScopeName(key, { data: poiArray })
+
+    const newPoi = poi.map(m => {
+      if (m.key === key) {
+        m.data = poiArray
+      }
+      return m
+    })
+    setPoi(newPoi)
+  }
+
+  function getFormMapScopeName(keyType, item) {
+    switch (keyType) {
+      case POI_TYPES_KETY.Transport:
+        props.form.setFieldsValue({ buildingTransport: item.data.map(t => t.name).join(',') })
+        return 'buildingTransport';
+      case POI_TYPES_KETY.Bank:
+        props.form.setFieldsValue({ buildingBank: item.data.map(t => t.name).join(',') })
+        return 'buildingBank';
+      case POI_TYPES_KETY.Edu:
+        props.form.setFieldsValue({ buildingEdu: item.data.map(t => t.name).join(',') })
+        return 'buildingEdu';
+      case POI_TYPES_KETY.Hospital:
+        props.form.setFieldsValue({ buildingHospital: item.data.map(t => t.name).join(',') })
+        return 'buildingHospital';
+      case POI_TYPES_KETY.Restaurant:
+        props.form.setFieldsValue({ buildingRestaurant: item.data.map(t => t.name).join(',') })
+        return 'buildingRestaurant';
+      case POI_TYPES_KETY.Mall:
+        props.form.setFieldsValue({ buildingMall: item.data.map(t => t.name).join(',') })
+        return 'buildingMall';
+      default:
+    }
+  }
+
   return (
         <Form {...formItemLayout} onSubmit={handleSubmit}>
           <Form.Item label="项目Id" style={{ display: 'none' }}>
@@ -186,7 +260,7 @@ function AddBuilding(props) {
           <Form.Item label="项目标签" >
             {getFieldDecorator('tag')(
               <Select mode="tags" placeholder="输入后选中" style={{ width: '1016px' }}>
-                
+
               </Select>,
             )}
           </Form.Item>
@@ -226,7 +300,7 @@ function AddBuilding(props) {
             {getFieldDecorator('discount')(<Input />)}
           </Form.Item>
           <Form.Item label="首页推荐" >
-            {getFieldDecorator('isMain',{
+            {getFieldDecorator('isMain', {
               initialValue: 1,
             })(
             <Radio.Group>
@@ -264,7 +338,7 @@ function AddBuilding(props) {
             {getFieldDecorator('mapScope', {
               rules: [{ required: true, message: '请选择周边设施搜索范围' }],
             })(
-              <Select placeholder="请选择周边设施搜索范围" style={{ width: '970px' }}>
+              <Select placeholder="请选择周边设施搜索范围" style={{ width: '970px' }} onChange={e => getMapScope(e)}>
                 <Option value={1000}>1公里</Option>
                 <Option value={3000}>3公里</Option>
                 <Option value={5000}>5公里</Option>

src/pages/building/list/add/components/buildingImage.jsx

@@ -1,15 +1,37 @@
 import React, { useState, useEffect } from 'react';
 import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification, Modal, Layout } from 'antd';
 import ImageListUpload from '../../../../../components/XForm/ImageListUpload';
+import moment from 'moment';
+import request from '../../../../../utils/request';
+import apis from '../../../../../services/apis';
 
 const { Header, Footer, Sider, Content } = Layout;
 
+const modalEdiFormItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+const openNotificationWithIcon = (type, message) => {
+  notification[type]({
+    message,
+    description:
+      '',
+  });
+};
+
 /**
  * 弹框
  */
 function ModalEdi(props) {
-
-  const [visibleData, setVisibleData] = useState({ visible: false })
+  const { apartment, buildingId, apartmentId } = props.visibleData
+  const [visibleData, setVisibleData] = useState({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
 
   if (!props.visibleData) {
     console.error('缺少visibleData参数!')
@@ -17,6 +39,7 @@ function ModalEdi(props) {
 
   useEffect(() => {
     setVisibleData(props.visibleData)
+    props.form.setFieldsValue({ apartmentId, apartmentName: apartment !== '' ? apartment.apartmentName : '' })
   }, [props.visibleData.visible])
 
   function handleOk(e) {
@@ -29,54 +52,171 @@ function ModalEdi(props) {
     props.onCancel();
   }
 
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+        submitData(values)
+      }
+    });
+  }
+
+  function submitData(data) {
+    if (buildingId === '' || buildingId === undefined) {
+      return
+    }
+    if (data.img) {
+        // 如果是 名称 和 图片一起编辑，就穿最新的图片
+      data.img = data.img.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
+    } else {
+        // 如果是 名称 和 图片一起编辑，就穿最新的图片
+      data.img = visibleData.apartment.buildingImgList
+    }
+    data.buildingId = buildingId;
+    data.apartmentType = 'photo'
+    const api = (data.apartmentId !== undefined && data.apartmentId !== '') ? apis.building.buildingApartmentUpdate : apis.building.buildingApartmentAdd;
+
+    // 网路请求
+    request({ ...api, data: { ...data } }).then(() => {
+      // eslint-disable-next-line no-unused-expressions
+      openNotificationWithIcon('success', '操作成功')
+      handleCancel()
+      props.onSuccess()
+      // this.setState({ visibleData: { visible: false, apartmentId: '', buildingId: '' } }, () => console.log('回调：', this.state.visibleData))
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      openNotificationWithIcon('error', err)
+    })
+  }
+
+  const { getFieldDecorator } = props.form;
   return (
     <>
       <Modal
-          title="Basic Modal"
+          title="编辑"
           visible={visibleData.visible}
           onOk={handleOk}
           onCancel={handleCancel}
+          width={700}
+          footer={null}
         >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
+         <Form {...modalEdiFormItemLayout} onSubmit={handleSubmit}>
+          <Form.Item label="编号" style={{ display: 'none' }}>
+              {getFieldDecorator('apartmentId')(<Input />)}
+          </Form.Item>
+          <Form.Item label="相册名称">
+            {getFieldDecorator('apartmentName', {
+              rules: [
+                {
+                  required: true,
+                  message: '请输入相册名称',
+                },
+                {
+                  max: 10,
+                  message: '不超过10个字符',
+                },
+              ],
+            })(<Input />)}
+          </Form.Item>
+          {
+            !props.noImage && <Form.Item label="选择图片">
+            {getFieldDecorator('img', {
+              rules: [
+                {
+                  required: true,
+                  message: '请选择图片',
+                },
+              ],
+            })(<ImageListUpload />)}
+          </Form.Item>
+          }
+          <Form.Item style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button type="primary" htmlType="submit">
+              保存
+            </Button>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <Button onClick={() => handleCancel()}>
+              取消
+            </Button>
+          </Form.Item>
+         </Form>
         </Modal>
     </>
   )
 }
 
+const WrappedModalEdiForm = Form.create({ name: 'ModalEdi' })(ModalEdi);
+
 /**
  * 模块
  */
 function BuildingImageModel(props) {
   const [imageList, setImageList] = useState([])
-  const [visibleData, setVisibleData] = useState({ visible: false })
+  const [visibleData, setVisibleData] = useState({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
+
+  useEffect(() => {
+    setImageList(getImgUrl())
+  }, [props.apartment.apartmentId])
+
+  function getImgUrl() {
+    return ((props.apartment.buildingImgList || [])).map(item => item.url)
+  }
+
+  function submitData(data) {
+    const { apartmentId } = props.apartment
+    if (apartmentId === '' || apartmentId === undefined) {
+      return
+    }
+
+    data.buildingId = props.apartment.buildingId;
+    data.apartmentType = 'photo'
+    const api = data.apartmentId !== undefined ? apis.building.buildingApartmentUpdate : apis.building.buildingApartmentAdd;
+
+    // 网路请求
+    request({ ...api, data: { ...data } }).then(() => {
+      // eslint-disable-next-line no-unused-expressions
+      openNotificationWithIcon('success', '操作成功')
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      // openNotificationWithIcon('error', err)
+    })
+  }
 
   function onImageChange(e) {
     setImageList(e)
+       
+    // 新增加图片后，更新后端数据
+    const img = e.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
+    submitData({ ...props.apartment, img })
   }
 
   function edi() {
-    setVisibleData({ visible: true })
+    setVisibleData({ visible: true, buildingId: props.apartment.buildingId, apartmentId: props.apartment.apartmentId, apartment: props.apartment })
   }
 
   function onCancel(e) {
-    setVisibleData({ visible: false })
+    setVisibleData({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
   }
 
   function deletePhoto() {
+    request({ ...apis.building.buildingApartmentDelete, urlData: { id: props.apartment.apartmentId } }).then(() => {
+      openNotificationWithIcon('success', '操作成功')
+      props.onSuccess()
+    }).catch(err => {
 
+    })
   }
 
   return (
     <>
-<span style={{ marginTop: '10px', marginBottom: '10px' }}>效果图（{imageList.length}）</span>
+      <span style={{ marginTop: '10px', marginBottom: '10px' }}>{props.apartment.apartmentName}({imageList.length})</span>
       <Button type="link" style={{ color: 'blue' }} onClick={() => edi()}>重命名</Button>
       <Button type="link" style={{ color: 'blue' }} onClick={() => deletePhoto()}>删除相册</Button>
       <ImageListUpload value={imageList} onChange={onImageChange} unlimited/>
 
        {/* 编辑页 */}
-       <ModalEdi visibleData={visibleData} onCancel={e => onCancel(e)}/>
+       <WrappedModalEdiForm visibleData={visibleData} onCancel={e => onCancel(e)} onSuccess={() => props.onSuccess()} noImage/>
        <hr />
     </>
   )
@@ -85,28 +225,49 @@ function BuildingImageModel(props) {
 /**
  * 主体
  */
-function buildingImage() {
-  const [visibleData, setVisibleData] = useState({ visible: false })
+function buildingImage(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [visibleData, setVisibleData] = useState({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
+  const [imageList, setImageList] = useState([])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getList()
+  }, [props.building.buildingId])
+ 
 
   function edi() {
-    setVisibleData({ visible: true })
+    setVisibleData({ visible: true, buildingId: props.building.buildingId, apartmentId: '', apartment: '' })
   }
 
   function onCancel(e) {
-    setVisibleData({ visible: false })
+    setVisibleData({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
+  }
+
+  function onSuccess(e) {
+    getList()
+  }
+
+  function getList(params) {
+    // 网路请求
+    request({ ...apis.building.buildingApartment, urlData: { id: props.building.buildingId }, params: { ...params, apartmentType: 'photo' } }).then(res => {
+      setImageList(res)
+    }).catch(err => {
+      openNotificationWithIcon('error', err.message)
+    })
   }
 
   return (
     <>
       <Button type="primary" onClick={() => edi()}>新增</Button>
       <Layout style={{ background: '#fff' }}>
-        <Content><BuildingImageModel /></Content>
-        <Content><BuildingImageModel /></Content>
-        <Content><BuildingImageModel /></Content>
+        {
+          imageList.map(item => <Content><BuildingImageModel apartment={item} key={item.apartmentId} onSuccess={e => onSuccess(e)}/></Content>)
+        }
       </Layout>
 
       {/* 编辑页 */}
-      <ModalEdi visibleData={visibleData} onCancel={e => onCancel(e)}/>
+      <WrappedModalEdiForm visibleData={visibleData} onCancel={e => onCancel(e)} onSuccess={e => onSuccess(e)}/>
     </>
   )
 }

src/pages/building/list/add/components/imageSet.jsx

@@ -53,7 +53,7 @@ function imageSet(props) {
 
   function getList(params) {
     // 网路请求
-    request({ ...apis.building.buildingApartment, urlData: { id: props.building.buildingId }, params: { ...params } }).then(res => {
+    request({ ...apis.building.buildingApartment, urlData: { id: props.building.buildingId }, params: { ...params, apartmentType: 'apart' } }).then(res => {
       setData(res)
     }).catch(err => {
       openNotificationWithIcon('error', err.message)

src/services/apis.js

@@ -1,4 +1,6 @@
 const prefix = '/api/admin'
+// 高德地图
+const amapPrefix = '/gaode_amap'
 
 export default {
   image: {
@@ -906,5 +908,11 @@ export default {
     method: 'GET',
     action: 'admin.posterTemplate.get',
   },
+ },
+ amap: { // 高德地图
+   webService: { // Web服务Api ---- 周边搜索
+     url: `${amapPrefix}/place/around`,
+     method: 'GET',
+   },
  }
 }

src/utils/request.js

@@ -65,7 +65,6 @@ request.interceptors.request.use((url, options) => {
 });
 
 request.interceptors.response.use(async (response, options) => {
-
   if (response && response.status) {
     if (response.status != 200) {
       const errorText = codeMessage[response.status] || response.statusText;
@@ -76,12 +75,17 @@ request.interceptors.response.use(async (response, options) => {
       });
       throw new Error(response.statusText);
     } else {
-      console.log('response.headers: ', response.headers)
-      console.log('response.headers.Content-Type: ', response.headers.get('Content-Type'))
+      // console.log('response.headers: ', response.headers)
+      // console.log('response.headers.Content-Type: ', response.headers.get('Content-Type'))
       if (response.headers.get('Content-Type') === 'application/octet-stream;charset=utf-8') {
         return await response.clone().blob();
       }
 
+      // 高德地图的数据，直接返回
+      if (response.url.indexOf('gaode_amap') !== -1) {
+        return await response.clone().json();
+      }
+
       const { code, data, message } = await response.clone().json();
       if (code != 1000) {
         if (code === 1001) {