对接瓦片数据配置模块接口

src/pages/platformCenter/schemeConfig/TileConfig/AddModal.jsx

@@ -6,94 +6,60 @@ 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,
+  SetServiceConfig
 } from '@/services/webConfig/api';
-import {
-  addMySQLConnString,
-  editMySQLConnString,
-} from '@/services/database/api';
-import { number } from 'prop-types';
 const { Item } = Form;
 const { Option } = Select;
 const AddModal = props => {
-  const { callBackSubmit = () => { }, type, formObj, visible } = props;
+  const { callBackSubmit = () => { }, type, formObj, visible, baseMap } = props;
   const [loading, setLoading] = useState(false);
   const [radio, setRadio] = useState();
-  const [alpha, setAlpha] = useState(0);
+  const [alpha, setAlpha] = useState(1);
   const [mapType, setMapType] = useState(0);
-  const [ImgIndex, setImgIndex] = useState('');
   const [form] = Form.useForm();
-  const [baseMap, setBaseMap] = useState(['天地图地形', '天地图影像', '地形图', '自定义底图']); //底图数据
   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) {
-        setLoading(true);
         let obj = form.getFieldsValue();
-        if (type === 'add') {
-          addMySQLConnString({
-            _version: 9999,
-            _dc: Date.now(),
-            ...obj,
+        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,
           })
-            .then(res => {
-              setLoading(false);
-              if (res.success) {
-                form.resetFields();
-                callBackSubmit();
-                notification.success({
-                  message: '提示',
-                  duration: 3,
-                  description: res.message || '新增成功',
-                });
-              } else {
-                notification.error({
-                  message: '提示',
-                  duration: 3,
-                  description: res.message || '新增失败',
-                });
-              }
-            })
-            .catch(err => {
-              setLoading(false);
-              console.error(err);
-            });
-        } else if (type === 'edit') {
-          handleEdit();
         }
+        SetServiceConfig(arr)
+          .then(res => {
+            setLoading(false);
+            if (res.IsSuccess) {
+              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 handleEdit = () => {
-    let obj = form.getFieldsValue();
-    SetServiceConfig({
-      servicename: serviceName,
-      terminalType: 'base',
-      isBaseMap: true,
-      jsonCfg: JSON.stringify(query)
-    })
-      .then(res => {
-        setLoading(false);
-        if (res.success) {
-          form.resetFields();
-          callBackSubmit();
-          notification.success({
-            message: '提示',
-            duration: 3,
-            description: res.message || '编辑成功',
-          });
-        } else {
-          notification.error({
-            message: '提示',
-            duration: 3,
-            description: res.message || '编辑失败',
-          });
-        }
-      })
-      .catch(err => setLoading(false));
-  };
+ 
 
   const onFinish = value => { };
   useEffect(() => {
@@ -102,7 +68,9 @@ const AddModal = props => {
         setRadio('')
         form.resetFields();
         form.setFieldsValue({
-          servicename: baseMap[0]
+          servicename: baseMap[0],
+          label: baseMap[0],
+          type: servicenameToType(baseMap[0])
         })
         break;
       case 'edit':
@@ -119,13 +87,12 @@ const AddModal = props => {
       default:
         break;
     }
-    console.log(baseMap.indexOf(form.getFieldsValue('').servicename))
-    if (form.getFieldsValue('').servicename && baseMap.indexOf(form.getFieldsValue('').servicename) == 2 || baseMap.indexOf(form.getFieldsValue('').servicename) == 3) {
-      setMapType(1)
-    }
-    else {
-      setMapType(0)
-    }
+    // if (form.getFieldsValue('').servicename && baseMap.indexOf(form.getFieldsValue('').servicename) == 2 || baseMap.indexOf(form.getFieldsValue('').servicename) == 3) {
+    //   setMapType(1)
+    // }
+    // else {
+    //   setMapType(0)
+    // }
   }, [visible]);
 
 
@@ -139,11 +106,11 @@ const AddModal = props => {
     },
   };
   const onChange = (value) => {
-    let silderData = (value / 100).toFixed(2)
+    let silderData = value == 100 ? 1 : (value / 100).toFixed(1)
     setAlpha(silderData)
   }
   const tipFormatter = (value) => {
-    return (value / 100).toFixed(2)
+    return (value / 100).toFixed(1)
   }
 
   const imgURL = [
@@ -165,12 +132,44 @@ const AddModal = props => {
     setRadio(e.target.value)
   }
   const handleChange = (value) => {
-
-    if ( baseMap.indexOf(value) == 2 || baseMap.indexOf(value) == 3) {
-      setMapType(1)
-    }
-    else {
-      setMapType(0)
+    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';
     }
   }
   //选择坐标系
@@ -219,7 +218,7 @@ const AddModal = props => {
             label="类型"
             name="type"
           >
-            <Input placeholder="请输入类型" allowClear />
+            <Input placeholder="请输入类型" allowClear disabled />
           </Item>
           <Item
             label="URL"
@@ -238,7 +237,7 @@ const AddModal = props => {
                   onChange={onChange}
                   step={0.1}
                   tipFormatter={tipFormatter}
-                  defaultValue={type === 'add' ? 0 : formObj.alpha * 100}
+                  defaultValue={type === 'add' ? 100 : formObj.alpha * 100}
                 />
               </Col>
               <Col span={4}>
@@ -246,7 +245,7 @@ const AddModal = props => {
                   min={0}
                   max={1}
                   style={{ margin: '0 16px' }}
-                  defaultValue={type === 'add' ? 0 : formObj.alpha}
+                  defaultValue={type === 'add' ? 1 : formObj.alpha}
                   value={alpha}
                   onChange={onChange}
                 />

src/pages/platformCenter/schemeConfig/TileConfig/TileConfig.jsx

-import { Space, Table, Button, Popconfirm,notification } from 'antd';
+import { Space, Table, Button, Popconfirm, notification } from 'antd';
 import React, { useState, useEffect, Modal } from 'react';
 import styles from '../SchemeConfig.less'
 import {
     GetAllConfig,
+    DeleteConfig
 } from '@/services/webConfig/api';
 import AddModal from './AddModal'
 const TileData = props => {
@@ -11,6 +12,8 @@ const TileData = props => {
     const [visible, setVisible] = useState(false); // 弹窗
     const [type, setType] = useState('add'); // 弹窗类型
     const [formObj, setFormObj] = useState({});
+    const [flag, setFlag] = useState(0); // 弹窗类型
+    const [baseMap, setBaseMap] = useState([]); //底图数据
     const columns = [
         {
             title: '服务名',
@@ -75,23 +78,62 @@ const TileData = props => {
         setVisible(true);
     }
     const onSubmit = prop => {
-
         setVisible(false);
-
+        setFlag(flag + 1)
     };
+
     const delConfirm = (record) => {
-        console.log('record', record)
+        const { servicename = '' } = record;
+        setTreeLoading(true);
+        DeleteConfig({
+            servicename: servicename,
+            terminalType: 'base',
+            isBaseMap: true
+        }).then(res => {
+            setFlag(flag + 1)
+            setTreeLoading(false);
+            console.log('res', res)
+            if (res.IsSuccess) {
+                // form.resetFields();
+                // callBackSubmit();
+                notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: res.message || '删除成功',
+                });
+            } else {
+                notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: res.message || '删除失败',
+                });
+            }
+        }).catch(err => {
+            setFlag(flag + 1)
+            setTreeLoading(false);
+        })
     }
-    const handleAdd = ()=>{
-        setType('add');
-        setVisible(true);
+    const handleAdd = () => {
+        if(baseMap.length){
+            setType('add');
+            setVisible(true);
+        }
+        else{
+            notification.warning({
+                message: '提示',
+                duration: 3,
+                description: '地图类型已都存在,可编辑修改',
+            }); 
+        }
+      
     }
     useEffect(() => {
         renderTile();
-    }, []);
+    }, [flag]);
     // 获取瓦片数据配置数据
     const renderTile = () => {
         setTreeLoading(true);
+        const baseMapData = ['高德地形', '高德影像', '天地图地形', '天地图影像']
         GetAllConfig({
             terminalType: 'base',
             isBaseMap: true
@@ -100,6 +142,13 @@ const TileData = props => {
                 if (res.Result && res.Result.length > 0) {
                     setTreeLoading(false);
                     setTileData(res.Result);
+                    res.Result.map( (item) =>{
+                        let index = baseMapData.indexOf(item.servicename);
+                        if (index != -1) {
+                           baseMapData.splice(index, 1);  
+                        }
+                    })
+                    setBaseMap(baseMapData)
                 } else {
                     setTreeLoading(false);
                     notification.error({
@@ -134,6 +183,7 @@ const TileData = props => {
                 callBackSubmit={onSubmit}
                 type={type}
                 formObj={formObj}
+                baseMap = {baseMap}
             />
         </>
     )

src/pages/platformCenter/schemeConfig/VectorData/AddModal.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Modal, Input, Select, notification, Button } from 'antd';
+import { Form, Modal, Input, Select, AutoComplete, Button, notification } from 'antd';
 import styles from '../SchemeConfig.less'
 
 import {
-  SetServiceConfig,
+  GetGISServerMapList,
+  publisService
 } from '@/services/webConfig/api';
-import {
-  addMySQLConnString,
-  editMySQLConnString,
-} from '@/services/database/api';
-import { number } from 'prop-types';
-const { Item } = Form;
+
+
 const { Option } = Select;
 const AddModal = props => {
-  const { callBackSubmit = () => { }, type, formObj, visible } = props;
+  const { callBackSubmit = () => { }, type, formObj, visible,solutionNames } = props;
   const [loading, setLoading] = useState(false);
-  const [mapType, setMapType] = useState(0);
-  const [ImgIndex, setImgIndex] = useState('');
+  const [workSpace, setWorkSpace] = useState('');
+  const [serviceName, setServicename] = useState([{
+    value: 'geoserver',
+    item: 'geoserver'
+  }]);
+  const [workList, setWorkList] = useState([]);
   const [form] = Form.useForm();
+  const { Item } = Form;
   // 提交
   const onSubmit = () => {
     form.validateFields().then(validate => {
       if (validate) {
-        // setLoading(true);
-        // let obj = form.getFieldsValue();
-        // if (type === 'add') {
-        //   addMySQLConnString({
-        //     _version: 9999,
-        //     _dc: Date.now(),
-        //     ...obj,
-        //   })
-        //     .then(res => {
-        //       setLoading(false);
-        //       if (res.success) {
-        //         form.resetFields();
-        //         callBackSubmit();
-        //         notification.success({
-        //           message: '提示',
-        //           duration: 3,
-        //           description: res.message || '新增成功',
-        //         });
-        //       } else {
-        //         notification.error({
-        //           message: '提示',
-        //           duration: 3,
-        //           description: res.message || '新增失败',
-        //         });
-        //       }
-        //     })
-        //     .catch(err => {
-        //       setLoading(false);
-        //       console.error(err);
-        //     });
-        // } else if (type === 'edit') {
-        //   handleEdit();
-        // }
+        setLoading(true);
+        let obj = form.getFieldsValue();
+        if (type === 'add') {
+            let query = {
+              _version: 9999,
+              gsIP: obj.serviceadress,
+              gsPort:  obj.port,
+              gsAppName: obj.servicename,
+              gsUser:  obj.user,
+              gsWorkspaceName:  obj.workname,
+              gsPwd:  obj.password,
+              serviceName:  obj.name,
+              solution: solutionNames,
+            }
+            let timeout =120000
+          publisService(query,timeout)
+            .then(res => {
+              console.log('res',res)
+              setLoading(false);
+              if (res.success) {
+                form.resetFields();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: res.message || '新增成功',
+                });
+                handlelocalStorage('add',obj.serviceadress, obj.servicename)
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.message || '新增失败',
+                });
+              }
+            })
+            .catch(err => {
+              console.log(err);
+              setLoading(false);
+              
+            });
+        } else if (type === 'edit') {
+          handleEdit();
+        }
       }
     });
   };
+
   const handleEdit = () => {
     // SetServiceConfig({
     //   servicename: serviceName,
@@ -90,17 +104,54 @@ const AddModal = props => {
   useEffect(() => {
     switch (type) {
       case 'add':
-        form.resetFields();
+        let gsIp = [];
+        let localStorageData = handlelocalStorage('get');
+        if (localStorageData) {
+          gsIp = localStorageData.map(item => ({
+            value: item.gsIp,
+            item: item.gsIp
+          }));
+        }
+        let localIps = ['192.168.12.7', '192.168.19.100']
+        let port = localIps.includes(gsIp) ? 8080 : 8088
+        form.setFieldsValue({ servicename: serviceName[0].value, port, ...formObj });
         break;
       case 'edit':
         form.setFieldsValue({ ...formObj });
-
         break;
       default:
         break;
     }
   }, [visible]);
 
+  //存储到localstorage
+  const handlelocalStorage = (type, gsIp, gisAppName) => {
+    if (!localStorage) return null;
+    let result = JSON.parse(localStorage.getItem('metaData'))
+    if (type == 'get') {
+      return result;
+    }
+    if (!result || !result.find(item => item.gsIp == gsIp)) {
+      if (!result) result = [];
+      result.push({
+        gsIp,
+        gisAppName: [{
+          value: gisAppName,
+          item: gisAppName
+        }]
+      })
+      localStorage.setItem('metaData', JSON.stringify(result))
+      return
+    }
+    let data = result.find(item => item.gsIp == gsIp)
+    let isHasGisAppName = data.gisAppName.find(item => item.value == gisAppName);
+    if (isHasGisAppName) return;
+    data.gisAppName.push({
+      value: gisAppName,
+      item: gisAppName
+    })
+    localStorage.setItem('metaData', JSON.stringify(result))
+  };
 
   const layout = {
     layout: 'horizontal',
@@ -113,6 +164,49 @@ const AddModal = props => {
   };
 
   const handleChange = () => { }
+
+
+  //选择工作空间
+  const selectWorkspace = () => {
+    let obj = form.getFieldsValue();
+    form.validateFields(['serviceadress', 'port', 'servicename', 'user', 'password']).then(validate => {
+      if (validate) {
+        let query = {
+          GISServerIP: obj.serviceadress,
+          GISServerPort: obj.port,
+          gsAppName: obj.servicename,
+          gsUser: obj.user,
+          gsPwd: obj.password,
+          isGeoServer: true,
+          _version: 9999,
+        }
+        GetGISServerMapList(query).then(res => {
+          if (Array.isArray(res)) {
+            const defaultValue= res[0].name||''
+            form.setFieldsValue({ name:defaultValue,workname:defaultValue});
+            setWorkList(res)
+            setWorkSpace(defaultValue)
+          }
+          else {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: '获取工作空间失败',
+            });
+          }
+        })
+      }
+    })
+
+  };
+  //选择工作空间
+  const handleWorkspace = (value) => {
+    form.setFieldsValue({
+      workname: value,
+      name:value
+    })
+    setWorkSpace(value)
+  }
   return (
     <Modal
       title={`${type === 'add' ? '元数据发布' : '编辑'}`}
@@ -133,7 +227,7 @@ const AddModal = props => {
         <Form form={form} {...layout} onFinish={onFinish}>
           <Item
             label="GIS服务器地址"
-            name="servicename"
+            name="serviceadress"
             rules={[{ required: true, message: '请选择服务名' }]}
           >
             <Input placeholder="请输入gis服务器地址" allowClear />
@@ -148,12 +242,13 @@ const AddModal = props => {
 
           <Item
             label="GIS服务器名"
-            name="serviceName"
+            name="servicename"
             rules={[{ required: true, message: '请输入GIS服务器名' }]}
           >
-            <Select onChange={handleChange}>
-
-            </Select>
+            <AutoComplete
+              placeholder="Email"
+              options={serviceName}
+            />
           </Item>
           <Item
             label="用户名称"
@@ -167,18 +262,18 @@ const AddModal = props => {
             name="password"
             rules={[{ required: true, message: '请输入用户密码' }]}
           >
-            <Input placeholder="请输入用户密码" allowClear />
+            <Input.Password placeholder="请输入用户密码" allowClear />
           </Item>
           <Item
             label="工作空间名称"
-            name="password"
+            name="workname"
             rules={[{ required: true, message: '请选择工作空间名称' }]}
           >
             <div className={styles.imgList}>
-              <Select onChange={handleChange}>
-
+              <Select onChange={handleWorkspace} value ={workSpace}>
+                {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''}
               </Select>
-              <Button style={{marginLeft:'0.5rem'}}>选择工作空间</Button>
+              <Button style={{ marginLeft: '0.5rem' }} onClick={() => { selectWorkspace() }}>选择工作空间</Button>
             </div>
           </Item>
           <Item

src/pages/platformCenter/schemeConfig/VectorData/VectorData.jsx

@@ -2,16 +2,18 @@ import { Space, Table, Button, Popconfirm, notification } from 'antd';
 import React, { useState, useEffect } from 'react';
 import styles from '../SchemeConfig.less'
 import {
-    GetVectorService,
+    GetVectorService, deleteVectorService, getSolutionList, updatePublishedMetaData
 } from '@/services/webConfig/api';
 import AddModal from './AddModal'
 const VectorData = props => {
     const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
     const [tileData, setTileData] = useState([]); // table表格数据
     const [visible, setVisible] = useState(false); // 弹窗
+    const [flag, setFlag] = useState(0); // 更新list
     const [loading, setLoading] = useState([]); // 更新状态
     const [type, setType] = useState('add'); // 弹窗类型
-    const [formObj, setFormObj] = useState({});
+    const [solutionNames, setSolutionNames] = useState('');
+    const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
     const columns = [
         {
             title: '服务名',
@@ -70,25 +72,76 @@ const VectorData = props => {
         },
 
     ];
+    //更新
     const enterLoading = (record, index) => {
-        console.log(loading)
         const newLoadings = [...loading];
         newLoadings[index] = true
         setLoading(newLoadings)
-        setTimeout(() => {
-            console.log(12)
+        let query = {
+            serviceName: record.serviceName,
+            _version: 9999,
+            solution: solutionNames
+        }
+
+        updatePublishedMetaData(query).then(res => {
+            const newLoadings = [...loading];
+            newLoadings[index] = false
+            setLoading(newLoadings)
+            if (res.success) {
+                setFlag(flag + 1)
+                notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: '更新元数据成功',
+                });
+            } else {
+                notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: '更新元数据失败',
+                });
+            };
+        }).catch(err => {
             const newLoadings = [...loading];
             newLoadings[index] = false
             setLoading(newLoadings)
-        }, 1000);
+        })
+
     }
-    const onSubmit = prop => {
 
+    const solutionName = () => {
+        getSolutionList({
+            _version: 9999
+        }).then(res => {
+            setSolutionNames(res.currentSolution)
+        })
+    }
+    const onSubmit = prop => {
         setVisible(false);
 
     };
     const delConfirm = (record) => {
-        console.log('record', record)
+        let query = {
+            serviceName: record.serviceName,
+            _version: 9999,
+            solution: solutionNames
+        }
+        deleteVectorService(query).then(res => {
+            if (res.success) {
+                setFlag(flag + 1)
+                notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: '删除元数据成功',
+                });
+            } else {
+                notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: '删除元数据失败',
+                });
+            };
+        })
     }
     const handleAdd = () => {
         setType('add');
@@ -96,15 +149,16 @@ const VectorData = props => {
     }
     useEffect(() => {
         renderTile();
-    }, []);
+    }, [flag]);
     // 获取瓦片数据配置数据
     const renderTile = () => {
         setTreeLoading(true);
+        solutionName();
         GetVectorService().then(
             res => {
                 if (res && res.length > 0) {
                     let arr = []
-                    res.map(item=>{
+                    res.map(item => {
                         arr.push(false)
                     })
                     setLoading(arr)
@@ -146,6 +200,7 @@ const VectorData = props => {
                 callBackSubmit={onSubmit}
                 type={type}
                 formObj={formObj}
+                solutionNames={solutionNames}
             />
         </>
     )

src/services/webConfig/api.js

@@ -163,8 +163,36 @@ export const GetAllConfig = query =>
 
 //设置底图数据
 export const SetServiceConfig = query =>
-  get(`${CITY_SERVICE}/OMS.svc/SetServiceConfig`, {query});
+  get(`${CITY_SERVICE}/OMS.svc/SetServiceConfig`, query);
 
+//获取方矢量数据列表
 export const GetVectorService = () =>
   get(`${CITY_SERVICE}/OMS.svc/D_GetVectorService`, { _version: 9999 });
 
+//删除底图配置
+export const DeleteConfig = query =>
+  get(`${CITY_SERVICE}/OMS.svc/DeleteConfig`, query);
+
+//获取元数据的工作空间列表
+export const GetGISServerMapList = query =>
+  get(`${CITY_SERVICE}/OMS.svc/D_GetGISServerMapList`, query);
+
+
+//发布原数据
+export const publisService = (query,timeout) =>
+get(`${CITY_SERVICE}/OMS.svc/D_Publish_GS_Service`, query,timeout);
+
+//解决方案名称
+export const getSolutionList = (query) =>
+get(`${CITY_SERVICE}/OMS.svc/W4_GetSolutionList`, query );
+
+//删除元数据
+export const deleteVectorService = (query) =>
+get(`${CITY_SERVICE}/OMS.svc/D_DeleteVectorService`, query );
+
+//更新元数据
+export const updatePublishedMetaData = (query) =>
+get(`${CITY_SERVICE}/OMS.svc/D_UpdatePublishedMetaData`, query );
+
+
+