Skip to content

C
CivManage
Commit ce8bca89 authored by shaoan123's avatar shaoan123
Browse files
Options

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

parent b803967b
Pipeline #26179 skipped with stages
        Show whitespace changes
        Inline Side-by-side
        Showing with 372 additions and 145 deletions
        src/pages/platformCenter/schemeConfig/TileConfig/AddModal.jsx
        View file @ ce8bca89
        ......@@ -6,95 +6,61 @@ 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,
        })
        .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();
        }
        }
        });
        };
        const handleEdit = () => {
        let obj = form.getFieldsValue();
        SetServiceConfig({
        servicename: serviceName,
        let arr = {
        servicename: obj.servicename,
        terminalType: 'base',
        isBaseMap: true,
        jsonCfg: JSON.stringify(query)
        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.success) {
        if (res.IsSuccess) {
        form.resetFields();
        callBackSubmit();
        notification.success({
        message: '提示',
        duration: 3,
        description: res.message || '编辑成功',
        description: res.message || type =='add'?'新增成功':'编辑成功'
        });
        } else {
        notification.error({
        message: '提示',
        duration: 3,
        description: res.message || '编辑失败',
        description: res.message || type =='add'?'新增失败':'编辑失败'
        });
        }
        })
        .catch(err => setLoading(false));
        .catch(err => { setLoading(false); });
        }
        });
        };
        const onFinish = value => { };
        useEffect(() => {
        switch (type) {
        ......@@ -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)
        form.setFieldsValue({
        type: servicenameToType(value)
        })
        // if (baseMap.indexOf(value) == 2 || baseMap.indexOf(value) == 3) {
        // setMapType(1)
        // }
        // else {
        // setMapType(0)
        // }
        }
        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
        View file @ ce8bca89
        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 || '删除失败',
        });
        }
        const handleAdd = ()=>{
        }).catch(err => {
        setFlag(flag + 1)
        setTreeLoading(false);
        })
        }
        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
        View file @ ce8bca89
        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
        View file @ ce8bca89
        ......@@ -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
        View file @ ce8bca89
        ......@@ -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 );
        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