Skip to content

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

攥写GiS平台GiS配置等页面

parent f6b8e1e3
Pipeline #26000 skipped with stages
        Show whitespace changes
        Inline Side-by-side
        Showing with 1328 additions and 19 deletions
        src/assets/images/thumbnail/thumbnail_1.jpg 0 → 100644
        View file @ 2bab64ee
        This diff was suppressed by a .gitattributes entry.
        src/assets/images/thumbnail/thumbnail_2.jpg 0 → 100644
        View file @ 2bab64ee
        This diff was suppressed by a .gitattributes entry.
        src/assets/images/thumbnail/thumbnail_3.jpg 0 → 100644
        View file @ 2bab64ee
        This diff was suppressed by a .gitattributes entry.
        src/assets/images/thumbnail/thumbnail_3.png 0 → 100644
        View file @ 2bab64ee
        This diff was suppressed by a .gitattributes entry.
        src/assets/images/thumbnail/thumbnail_4.jpg 0 → 100644
        View file @ 2bab64ee
        This diff was suppressed by a .gitattributes entry.
        src/pages/platformCenter/schemeConfig/SchemeConfig.jsx 0 → 100644
        View file @ 2bab64ee
        import { Tabs, Button } from 'antd';
        import React from 'react';
        import PageContainer from '@/components/BasePageContainer';
        import styles from './SchemeConfig.less'
        import TileConfig from './TileConfig/TileConfig';
        import VectorData from './VectorData/VectorData';
        import ProjectMessage from './projectMessage/projectMessage';
        const { TabPane } = Tabs;
        const SchemeConfig = () => {
        const callback = () => {
        }
        return (
        <PageContainer>
        <div className={styles.container}>
        <Tabs onChange={callback} type="card">
        <TabPane tab="瓦片数据配置" key="1">
        <TileConfig />
        </TabPane>
        <TabPane tab="矢量数据配置" key="2">
        <VectorData />
        </TabPane>
        <TabPane tab="方案管理" key="3">
        <ProjectMessage />
        </TabPane>
        <TabPane tab="方案配置" key="4">
        </TabPane>
        </Tabs>
        </div>
        </PageContainer>
        )
        }
        export default SchemeConfig;
        \ No newline at end of file
        src/pages/platformCenter/schemeConfig/SchemeConfig.less 0 → 100644
        View file @ 2bab64ee
        .container{
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        display: flex;
        padding: 0.8rem;
        .ant-table-thead tr th {
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        }
        }
        .imgList{
        display: flex;
        }
        .imgItem{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:0 1rem 1rem 0;
        }
        .tileBtn{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        padding: 0 0 2rem
        }
        .schemeName{
        margin-right: 0.8rem;
        font-weight: bold;
        }
        .schemeItem,.schemeBtn{
        display: flex;
        align-items: center;
        }
        .schemeBtn{
        width: 12rem;
        justify-content: center;
        }
        .mapItem{
        display: flex;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: 2.2rem;
        align-items: center;
        margin: 0.5rem 0;
        width: 14.5rem;
        }
        .defaultTile{
        background: #ccc;
        color: white;
        cursor: pointer;
        height: 100%;
        display: flex;
        align-items: center;
        width: 3rem;
        justify-content: center;
        }
        .mapText{
        width: 10rem;
        text-align: center;
        }
        .mapIcon{
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        }
        .activeTile{
        background-color: #4699f4
        }
        \ No newline at end of file
        src/pages/platformCenter/schemeConfig/TileConfig/AddModal.jsx 0 → 100644
        View file @ 2bab64ee
        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';
        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 [loading, setLoading] = useState(false);
        const [radio, setRadio] = useState();
        const [alpha, setAlpha] = useState(0);
        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,
        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(() => {
        switch (type) {
        case 'add':
        setRadio('')
        form.resetFields();
        form.setFieldsValue({
        servicename: 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;
        }
        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)
        }
        }, [visible]);
        const layout = {
        layout: 'horizontal',
        labelCol: {
        span: 4,
        },
        wrapperCol: {
        span: 16,
        },
        };
        const onChange = (value) => {
        let silderData = (value / 100).toFixed(2)
        setAlpha(silderData)
        }
        const tipFormatter = (value) => {
        return (value / 100).toFixed(2)
        }
        const imgURL = [
        {
        url: thumbnail_1
        },
        {
        url: thumbnail_2
        },
        {
        url: thumbnail_3
        },
        {
        url: thumbnail_4
        },
        ]
        const radioChange = (e) => {
        setRadio(e.target.value)
        }
        const handleChange = (value) => {
        if ( baseMap.indexOf(value) == 2 || baseMap.indexOf(value) == 3) {
        setMapType(1)
        }
        else {
        setMapType(0)
        }
        }
        //选择坐标系
        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 />
        </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' ? 0 : formObj.alpha * 100}
        />
        </Col>
        <Col span={4}>
        <InputNumber
        min={0}
        max={1}
        style={{ margin: '0 16px' }}
        defaultValue={type === 'add' ? 0 : 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>
        </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}>
        </Select>
        </Item>
        <Item
        label="图层名"
        name="layer"
        rules={[{ required: true, message: '请选择图层名' }]}
        >
        <Select onChange={handleLayer}>
        </Select>
        </Item>
        <Item
        label="坐标系名"
        name="coordinate"
        rules={[{ required: true, message: '请选择坐标系名' }]}
        >
        <Select onChange={handleCoordinate}>
        </Select>
        </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 AddModal;
        src/pages/platformCenter/schemeConfig/TileConfig/TileConfig.jsx 0 → 100644
        View file @ 2bab64ee
        import { Space, Table, Button, Popconfirm,notification } from 'antd';
        import React, { useState, useEffect, Modal } from 'react';
        import styles from '../SchemeConfig.less'
        import {
        GetAllConfig,
        } from '@/services/webConfig/api';
        import AddModal from './AddModal'
        const TileData = props => {
        const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
        const [tileData, setTileData] = useState([]); // table表格数据
        const [visible, setVisible] = useState(false); // 弹窗
        const [type, setType] = useState('add'); // 弹窗类型
        const [formObj, setFormObj] = useState({});
        const columns = [
        {
        title: '服务名',
        dataIndex: 'servicename',
        key: 'servicename',
        align: 'center'
        },
        {
        title: '标签',
        dataIndex: 'label',
        key: 'label',
        align: 'center'
        },
        {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        align: 'center'
        },
        {
        title: '透明度',
        dataIndex: 'alpha',
        key: 'alpha',
        align: 'center'
        },
        {
        title: '编辑',
        align: 'center',
        render: (text, record) => (
        <Space>
        <Button
        type="primary"
        size="small"
        onClick={() => {
        changebaseMap(record);
        }}
        >
        编辑
        </Button>
        <div onClick={e => e.stopPropagation()}>
        <Popconfirm
        title="是否删除该底图？"
        okText="确认"
        cancelText="取消"
        onConfirm={() => {
        delConfirm(record);
        }}
        >
        <Button size="small" danger>
        删除
        </Button>
        </Popconfirm>
        </div>
        </Space>
        ),
        },
        ];
        const changebaseMap = (record) => {
        setType('edit');
        setFormObj(record);
        setVisible(true);
        }
        const onSubmit = prop => {
        setVisible(false);
        };
        const delConfirm = (record) => {
        console.log('record', record)
        }
        const handleAdd = ()=>{
        setType('add');
        setVisible(true);
        }
        useEffect(() => {
        renderTile();
        }, []);
        // 获取瓦片数据配置数据
        const renderTile = () => {
        setTreeLoading(true);
        GetAllConfig({
        terminalType: 'base',
        isBaseMap: true
        }).then(
        res => {
        if (res.Result && res.Result.length > 0) {
        setTreeLoading(false);
        setTileData(res.Result);
        } else {
        setTreeLoading(false);
        notification.error({
        message: '获取失败',
        description: res.message,
        });
        }
        }
        )
        };
        return (
        <>
        <div className={styles.tileBtn}>
        <Button type="primary" onClick={() => {
        handleAdd();
        }} >
        新增
        </Button>
        </div>
        <Table
        columns={columns}
        dataSource={tileData}
        bordered
        rowKey="type"
        scroll={{ y: 400 }}
        >
        </Table>
        <AddModal
        visible={visible}
        onCancel={() => setVisible(false)}
        callBackSubmit={onSubmit}
        type={type}
        formObj={formObj}
        />
        </>
        )
        }
        export default TileData
        \ No newline at end of file
        src/pages/platformCenter/schemeConfig/VectorData/AddModal.jsx 0 → 100644
        View file @ 2bab64ee
        import React, { useState, useEffect } from 'react';
        import { Form, Modal, Input, Select, notification, Button } from 'antd';
        import styles from '../SchemeConfig.less'
        import {
        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 [loading, setLoading] = useState(false);
        const [mapType, setMapType] = useState(0);
        const [ImgIndex, setImgIndex] = useState('');
        const [form] = Form.useForm();
        // 提交
        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 = () => {
        // 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(() => {
        switch (type) {
        case 'add':
        form.resetFields();
        break;
        case 'edit':
        form.setFieldsValue({ ...formObj });
        break;
        default:
        break;
        }
        }, [visible]);
        const layout = {
        layout: 'horizontal',
        labelCol: {
        span: 4,
        },
        wrapperCol: {
        span: 16,
        },
        };
        const handleChange = () => { }
        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="GIS服务器地址"
        name="servicename"
        rules={[{ required: true, message: '请选择服务名' }]}
        >
        <Input placeholder="请输入gis服务器地址" allowClear />
        </Item>
        <Item
        label="GIS服务器端口"
        name="port"
        rules={[{ required: true, message: '请输入GIS服务器端口' }]}
        >
        <Input placeholder="请输入GIS服务器端口" allowClear />
        </Item>
        <Item
        label="GIS服务器名"
        name="serviceName"
        rules={[{ required: true, message: '请输入GIS服务器名' }]}
        >
        <Select onChange={handleChange}>
        </Select>
        </Item>
        <Item
        label="用户名称"
        name="user"
        rules={[{ required: true, message: '请输入用户名称' }]}
        >
        <Input placeholder="请输入用户名称" allowClear />
        </Item>
        <Item
        label="用户密码"
        name="password"
        rules={[{ required: true, message: '请输入用户密码' }]}
        >
        <Input placeholder="请输入用户密码" allowClear />
        </Item>
        <Item
        label="工作空间名称"
        name="password"
        rules={[{ required: true, message: '请选择工作空间名称' }]}
        >
        <div className={styles.imgList}>
        <Select onChange={handleChange}>
        </Select>
        <Button style={{marginLeft:'0.5rem'}}>选择工作空间</Button>
        </div>
        </Item>
        <Item
        label="服务名称"
        name="name"
        rules={[{ required: true, message: '请输入服务名称' }]}
        >
        <Input placeholder="请输入服务名称" allowClear />
        </Item>
        </Form>
        )}
        </Modal>
        );
        };
        export default AddModal;
        src/pages/platformCenter/schemeConfig/VectorData/VectorData.jsx 0 → 100644
        View file @ 2bab64ee
        import { Space, Table, Button, Popconfirm, notification } from 'antd';
        import React, { useState, useEffect } from 'react';
        import styles from '../SchemeConfig.less'
        import {
        GetVectorService,
        } 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 [loading, setLoading] = useState([]); // 更新状态
        const [type, setType] = useState('add'); // 弹窗类型
        const [formObj, setFormObj] = useState({});
        const columns = [
        {
        title: '服务名',
        dataIndex: 'serviceName',
        key: 'serviceName',
        align: 'center'
        },
        {
        title: 'IP',
        dataIndex: 'GISServerIP',
        key: 'GISServerIP',
        align: 'center'
        },
        {
        title: '端口',
        dataIndex: 'GISServerPort',
        key: 'GISServerPort',
        align: 'center'
        },
        {
        title: '工程名',
        dataIndex: 'GISServerProjectName',
        key: 'GISServerProjectName',
        align: 'center'
        },
        {
        title: '发布时间',
        dataIndex: 'publishTime',
        key: 'publishTime',
        align: 'center'
        },
        {
        title: '编辑',
        align: 'center',
        render: (text, record, index) => (
        <Space>
        <Button type="primary" size="small" loading={loading[index]} onClick={() => enterLoading(record, index)}>
        更新
        </Button>
        <div onClick={e => e.stopPropagation()}>
        <Popconfirm
        title="是否删除该矢量数据？"
        okText="确认"
        cancelText="取消"
        onConfirm={() => {
        delConfirm(record);
        }}
        >
        <Button size="small" danger>
        删除
        </Button>
        </Popconfirm>
        </div>
        </Space>
        ),
        },
        ];
        const enterLoading = (record, index) => {
        console.log(loading)
        const newLoadings = [...loading];
        newLoadings[index] = true
        setLoading(newLoadings)
        setTimeout(() => {
        console.log(12)
        const newLoadings = [...loading];
        newLoadings[index] = false
        setLoading(newLoadings)
        }, 1000);
        }
        const onSubmit = prop => {
        setVisible(false);
        };
        const delConfirm = (record) => {
        console.log('record', record)
        }
        const handleAdd = () => {
        setType('add');
        setVisible(true);
        }
        useEffect(() => {
        renderTile();
        }, []);
        // 获取瓦片数据配置数据
        const renderTile = () => {
        setTreeLoading(true);
        GetVectorService().then(
        res => {
        if (res && res.length > 0) {
        let arr = []
        res.map(item=>{
        arr.push(false)
        })
        setLoading(arr)
        setTreeLoading(false);
        setTileData(res);
        } else {
        setTreeLoading(false);
        notification.error({
        message: '获取失败',
        description: res.message,
        });
        }
        }
        )
        };
        return (
        <>
        <div className={styles.tileBtn}>
        <Button type="primary" onClick={() => {
        handleAdd();
        }} >
        新增
        </Button>
        </div>
        <Table
        columns={columns}
        dataSource={tileData}
        bordered
        rowKey="createTime"
        scroll={{ y: 400 }}
        >
        </Table>
        <AddModal
        visible={visible}
        onCancel={() => setVisible(false)}
        callBackSubmit={onSubmit}
        type={type}
        formObj={formObj}
        />
        </>
        )
        }
        export default VectorData
        \ No newline at end of file
        src/pages/platformCenter/schemeConfig/projectMessage/AddModal.jsx 0 → 100644
        View file @ 2bab64ee
        import React, { useState, useEffect } from 'react';
        import { Form, Modal, Input, Select, notification, Button } from 'antd';
        import styles from '../SchemeConfig.less'
        import {
        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 [loading, setLoading] = useState(false);
        const [mapType, setMapType] = useState(0);
        const [ImgIndex, setImgIndex] = useState('');
        const [baseMaplist, setBaseMaplist] = useState([]);
        const [form] = Form.useForm();
        // 提交
        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,
        // 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(() => {
        switch (type) {
        case 'add':
        form.resetFields();
        break;
        case 'edit':
        form.setFieldsValue({ ...formObj });
        break;
        default:
        break;
        }
        }, [visible]);
        const layout = {
        layout: 'horizontal',
        labelCol: {
        span: 4,
        },
        wrapperCol: {
        span: 16,
        },
        };
        //选择服务名
        const handleChange = () => { }
        //选择管网
        const handleService = () => { }
        //选择底图
        const handleBaseMap = ()=>{}
        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}>
        {type === 'add' ? <Item
        label="服务名"
        name="password"
        >
        <Select onChange={handleChange}>
        </Select>
        </Item> :
        <>
        <Item
        label="方案名"
        name="schemename"
        rules={[{ required: true, message: '请输入方案名' }]}
        >
        <Input placeholder="请输入方案名" allowClear />
        </Item>
        <Item
        label="管网"
        name="servicename"
        >
        <Select onChange={handleService}>
        </Select>
        </Item>
        <Item
        label="标签"
        name="label"
        >
        <Input placeholder="请输入标签" allowClear />
        </Item>
        <Item
        label="url"
        name="url"
        >
        <Input placeholder="请输入url" allowClear />
        </Item>
        <Item
        label="默认底图"
        name="servicename"
        rules={[{ required: true, message: '请选择底图' }]}
        >
        <Select onChange={handleBaseMap}>
        </Select>
        </Item>
        </>
        }
        </Form>
        )}
        </Modal>
        );
        };
        export default AddModal;
        src/pages/platformCenter/schemeConfig/projectMessage/projectMessage.jsx 0 → 100644
        View file @ 2bab64ee
        import { Button, Card, notification, Col, Row, Popconfirm } from 'antd';
        import React, { useState, useEffect } from 'react';
        import classnames from 'classnames'
        import styles from '../SchemeConfig.less'
        import {
        GetAllConfig,
        } from '@/services/webConfig/api';
        import {
        CloseOutlined, PlusOutlined
        } from '@ant-design/icons';
        import AddModal from './AddModal'
        const VectorData = props => {
        const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
        const [tileData, setTileData] = useState([]); // 页面初始化数据
        const [visible, setVisible] = useState(false); // 弹窗
        const [type, setType] = useState('add'); // 弹窗类型
        const [formObj, setFormObj] = useState({});
        const onSubmit = prop => {
        setVisible(false);
        };
        const delConfirm = (record) => {
        console.log('record', record)
        }
        const handleAdd = () => {
        setType('schemeAdd');
        setVisible(true);
        }
        useEffect(() => {
        renderTile();
        }, []);
        // 获取瓦片数据配置数据
        const renderTile = () => {
        setTreeLoading(true);
        GetAllConfig({
        terminalType: 'scheme',
        isBaseMap: false
        }).then(
        res => {
        console.log('res', res.Result)
        if (res && res.Result.length > 0) {
        setTreeLoading(false);
        setTileData(res.Result);
        } else {
        setTreeLoading(false);
        notification.error({
        message: '获取失败',
        description: res.message,
        });
        }
        }
        )
        };
        //增加瓦片
        const addTile = (item, index) => {
        setType('add');
        setVisible(true);
        }
        //删除瓦片
        const deleteTile = (item, index) => {
        }
        return (
        <>
        <Row>
        <div className={styles.tileBtn}>
        <Button type="primary" onClick={() => {
        handleAdd();
        }} >
        新增
        </Button>
        </div>
        </Row>
        <Row gutter={16}>
        {tileData && tileData.length ?
        tileData.map((item, index) => {
        return <Col key={index} span={8}> <Card title={<div><span className={styles.schemeName}>方案名</span>{item.schemename}</div>} extra={<a href="#">
        <Popconfirm
        title="是否删除该方案？"
        okText="确认"
        cancelText="取消"
        onConfirm={() => {
        deleteTile(record);
        }}
        >
        <CloseOutlined />
        </Popconfirm> </a>} style={{ width: 300 }}>
        <p><span className={styles.schemeName}>矢量</span> {item.servicename}</p>
        <div className={styles.schemeItem}><span className={styles.schemeName}>瓦片</span>
        <Button className={styles.schemeBtn} onClick={() => addTile(item, index)}> <PlusOutlined />添加瓦片</Button>
        </div>
        {item.baseMap && item.baseMap.length ? item.baseMap.map((baseMapItem, baseindex) => {
        return <div key={baseindex} className={styles.mapItem} >
        <div className={classnames({
        [styles.defaultTile]: true,
        [styles.activeTile]: baseindex == item.defaultBaseMap,
        })}>默认</div>
        <div className={styles.mapText}>{baseMapItem}</div>
        <div className={styles.mapIcon}>
        <Popconfirm
        title="是否删除该底图？"
        okText="确认"
        cancelText="取消"
        onConfirm={() => {
        deleteTile(record);
        }}
        >
        <CloseOutlined />
        </Popconfirm> </div>
        </div>
        }) : ''}
        </Card>
        </Col>
        }) : ''}
        </Row >
        <AddModal
        visible={visible}
        onCancel={() => setVisible(false)}
        callBackSubmit={onSubmit}
        type={type}
        formObj={formObj}
        />
        </>
        )
        }
        export default VectorData
        \ No newline at end of file
        src/routes/config.js
        View file @ 2bab64ee
        ...@@ -38,6 +38,7 @@ import BaseFrameContainer from '@/components/BaseFrameContainer'; ...@@ -38,6 +38,7 @@ import BaseFrameContainer from '@/components/BaseFrameContainer';
        import JumpContainer from '@/components/JumpContainer'; import JumpContainer from '@/components/JumpContainer';
        import HostManager from '@/pages/platformCenter/hostmanager' import HostManager from '@/pages/platformCenter/hostmanager'
        import MessageManager from '@/pages/platformCenter/messageManage' import MessageManager from '@/pages/platformCenter/messageManage'
        import SchemeConfig from '@/pages/platformCenter/schemeConfig/schemeConfig';
        // import ColConen from '@/components/Colophon/colContent'; // import ColConen from '@/components/Colophon/colContent';
        const iconStyle = { verticalAlign: '0.125em' }; const iconStyle = { verticalAlign: '0.125em' };
        ...@@ -141,23 +142,29 @@ export default { ...@@ -141,23 +142,29 @@ export default {
        { {
        path: '/platformCenter/gis', path: '/platformCenter/gis',
        name: 'GIS平台', name: 'GIS平台',
        component: BaseFrameContainer, // component: BlankLayout,
        tabs: [ component: SchemeConfig,
        { // routes: [{
        tabName: '范围配置', // path: '/platformCenter/schemeConfig',
        url: // name: '方案配置',
        '/web4/?widget=product/Tool/EditBoundary/EditBoundary&serverCollextion=JiangNing_JNGW&solution=熊猫智慧水务平台', // component: SchemeConfig,
        }, // }]
        { // tabs: [
        tabName: '方案配置', // {
        url: // tabName: '范围配置',
        '/web4/?widget=product/Tool/MapSettings/MapSettings|hideMap=true', // url:
        }, // '/web4/?widget=product/Tool/EditBoundary/EditBoundary&serverCollextion=JiangNing_JNGW&solution=熊猫智慧水务平台',
        { // },
        tabName: '七参数配置', // {
        type: 'sevenParams', // tabName: '方案配置',
        }, // url:
        ], // '/web4/?widget=product/Tool/MapSettings/MapSettings|hideMap=true',
        // },
        // {
        // tabName: '七参数配置',
        // type: 'sevenParams',
        // },
        // ],
        }, },
        { {
        path: '/platformCenter/iot', path: '/platformCenter/iot',
        ......
        src/services/webConfig/api.js
        View file @ 2bab64ee
        ...@@ -53,8 +53,7 @@ export const postEditWebConfig = (config, isAdd = false) => { ...@@ -53,8 +53,7 @@ export const postEditWebConfig = (config, isAdd = false) => {
        } }
        }); });
        return post( return post(
        `${CITY_SERVICE}/OMS.svc/${ `${CITY_SERVICE}/OMS.svc/${isAdd ? 'W4_AddWebsite' : 'W4_EditWebsite'
        isAdd ? 'W4_AddWebsite' : 'W4_EditWebsite'
        }?_version=9999`, }?_version=9999`,
        qs.stringify({ config: JSON.stringify(obj) }), qs.stringify({ config: JSON.stringify(obj) }),
        { {
        ...@@ -157,3 +156,15 @@ export const editWebsite = params => { ...@@ -157,3 +156,15 @@ export const editWebsite = params => {
        // 删除网站 // 删除网站
        export const omsDeleteWebsite = client => export const omsDeleteWebsite = client =>
        get(`${PUBLISH_SERVICE}/WebSite/DeleteWebsite`, { client }); get(`${PUBLISH_SERVICE}/WebSite/DeleteWebsite`, { client });
        //获取gis底图列表
        export const GetAllConfig = query =>
        get(`${CITY_SERVICE}/OMS.svc/GetAllConfig`, query);
        //设置底图数据
        export const SetServiceConfig = query =>
        get(`${CITY_SERVICE}/OMS.svc/SetServiceConfig`, {query});
        export const GetVectorService = () =>
        get(`${CITY_SERVICE}/OMS.svc/D_GetVectorService`, { _version: 9999 });
        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