Commit 6c40b77c authored by 皮倩雯's avatar 皮倩雯

fix: '瓦片管网'

parent d906d18f
Pipeline #82738 failed with stages
...@@ -43,7 +43,6 @@ ...@@ -43,7 +43,6 @@
.imgHidden { .imgHidden {
border: none; border: none;
} }
.tileBtn { .tileBtn {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
...@@ -52,8 +51,29 @@ ...@@ -52,8 +51,29 @@
padding: 0 0 2rem; padding: 0 0 2rem;
} }
.tileBtnVe {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 0 2rem;
.tileBtnLeft {
display: flex;
align-items: center;
}
.tileBtnLeft {
display: flex;
align-items: center;
}
}
.schemeName { .schemeName {
width: 68px; width: 30px;
margin-right: 0.8rem;
font-weight: bold;
}
.schemeNameL {
width: 60px;
margin-right: 0.8rem; margin-right: 0.8rem;
font-weight: bold; font-weight: bold;
} }
...@@ -298,4 +318,4 @@ ...@@ -298,4 +318,4 @@
// } // }
.schemeBox { .schemeBox {
height: calc(100% - 51px); height: calc(100% - 51px);
} }
\ No newline at end of file
...@@ -203,7 +203,6 @@ const AddModal = props => { ...@@ -203,7 +203,6 @@ const AddModal = props => {
setCurrent(false); setCurrent(false);
setPickItem(''); setPickItem('');
setAlpha(1); setAlpha(1);
console.log(baseMap);
switch (type) { switch (type) {
case 'add': case 'add':
setRadio1(0); setRadio1(0);
...@@ -225,7 +224,6 @@ const AddModal = props => { ...@@ -225,7 +224,6 @@ const AddModal = props => {
break; break;
case 'edit': case 'edit':
console.log(formObj);
setRadio1(formObj.isTainDiTu || 0); setRadio1(formObj.isTainDiTu || 0);
form.setFieldsValue({ ...formObj }); form.setFieldsValue({ ...formObj });
let index = formObj.icon.lastIndexOf('/'); let index = formObj.icon.lastIndexOf('/');
......
...@@ -198,7 +198,7 @@ const NewEditModal = props => { ...@@ -198,7 +198,7 @@ const NewEditModal = props => {
setMaplayer(json); setMaplayer(json);
let data = []; let data = [];
json.forEach(item => { json.forEach(item => {
data = [...data, ...item.items]; data = [...data, ...item.items].filter(i => i.type !== 'google-user');
}); });
setKeepJsonData(data); setKeepJsonData(data);
} else { } else {
...@@ -245,8 +245,6 @@ const NewEditModal = props => { ...@@ -245,8 +245,6 @@ const NewEditModal = props => {
setRadio1(formObj.isTainDiTu); setRadio1(formObj.isTainDiTu);
switch (type) { switch (type) {
case 'edit': case 'edit':
console.log(formObj);
form.setFieldsValue({ form.setFieldsValue({
...formObj, ...formObj,
isTainDiTu: formObj.isTainDiTu, isTainDiTu: formObj.isTainDiTu,
......
...@@ -203,6 +203,9 @@ const TileData = props => { ...@@ -203,6 +203,9 @@ const TileData = props => {
QueryBaseMapItems() QueryBaseMapItems()
.then(res => { .then(res => {
if (res.code === '0') { if (res.code === '0') {
res.data.forEach(item => {
item.items = item.items.filter(i => i.type !== 'google-user');
});
setJson(res.data); setJson(res.data);
} }
}) })
...@@ -241,7 +244,8 @@ const TileData = props => { ...@@ -241,7 +244,8 @@ const TileData = props => {
.then(res => { .then(res => {
if (res.code == '0') { if (res.code == '0') {
setTreeLoading(false); setTreeLoading(false);
setTileData(res.data.general.baseMap.layers); let newdata = res.data.general.baseMap.layers?.filter(i => i.type !== 'google-user');
setTileData(newdata);
let data = []; let data = [];
res.data.general.baseMap.layers.map(item => { res.data.general.baseMap.layers.map(item => {
data.push(item.servicename); data.push(item.servicename);
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"groupName": "地形", "groupName": "地形",
"items": [ "items": [
{ {
"title": "高德地形", "title": "高德地形11",
"type": "amap-v", "type": "amap-v",
"url": "", "url": "",
"key": "", "key": "",
...@@ -96,13 +96,6 @@ ...@@ -96,13 +96,6 @@
{ {
"groupName": "其他", "groupName": "其他",
"items": [ "items": [
{
"title": "自定义底图",
"type": "google-user",
"url": "",
"key": "",
"maxleve": 18
},
{ {
"title": "矢量底图切片", "title": "矢量底图切片",
"type": "pipenet-tile", "type": "pipenet-tile",
......
import { Space, Table, Button, Popconfirm, notification, Spin, Input } from 'antd'; /* eslint-disable no-restricted-syntax */
import { Space, Table, Button, Popconfirm, notification, Spin, Input, Radio } from 'antd';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import styles from '../SchemeConfig.less'; import styles from '../SchemeConfig.less';
import { import {
...@@ -6,13 +7,16 @@ import { ...@@ -6,13 +7,16 @@ import {
deleteVectorService, deleteVectorService,
getSolutionList, getSolutionList,
updatePublishedMetaData, updatePublishedMetaData,
GettMaplayer,
} from '@/services/webConfig/api'; } from '@/services/webConfig/api';
import AddModal from './AddModal'; import AddModal from './AddModal';
import PreviewModal from './VectorPreviewModal'; import PreviewModal from './VectorPreviewModal';
import MeteDataModal from './MeteDataModal'; import MeteDataModal from './MeteDataModal';
import AddSlicedModal from './AddSlicedModal';
const VectorData = props => { const VectorData = props => {
const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示 const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
const [tileData, setTileData] = useState([]); // table表格数据 const [tileData, setTileData] = useState([]); // table表格数据
const [tileSlicedData, setTileSlicedData] = useState([]);
const [visible, setVisible] = useState(false); // 弹窗 const [visible, setVisible] = useState(false); // 弹窗
const [previewVisible, setPreviewVisible] = useState(false); // 预览弹窗 const [previewVisible, setPreviewVisible] = useState(false); // 预览弹窗
const [meteDataVisible, setMeteDataVisible] = useState(false); // 预览弹窗 const [meteDataVisible, setMeteDataVisible] = useState(false); // 预览弹窗
...@@ -22,8 +26,12 @@ const VectorData = props => { ...@@ -22,8 +26,12 @@ const VectorData = props => {
const [type, setType] = useState(''); // 弹窗类型 const [type, setType] = useState(''); // 弹窗类型
const [solutionNames, setSolutionNames] = useState(''); const [solutionNames, setSolutionNames] = useState('');
const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' }); const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
const [record, setRecord] = useState();
const [currentMetaData, setCurrentMetaData] = useState(null); const [currentMetaData, setCurrentMetaData] = useState(null);
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('');
const [radioType, setRadioType] = useState('1');
const [addVisible, setAddVisible] = useState(false); // 弹窗
const [name, setName] = useState([]);
const { Search } = Input; const { Search } = Input;
const columns = [ const columns = [
{ {
...@@ -94,6 +102,57 @@ const VectorData = props => { ...@@ -94,6 +102,57 @@ const VectorData = props => {
), ),
}, },
]; ];
const columnsPart = [
{
title: '服务名',
dataIndex: 'servicename',
key: 'servicename',
align: 'center',
},
{
title: '标签',
dataIndex: 'label',
key: 'label',
align: 'center',
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
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 enterLoading = (record, index) => { const enterLoading = (record, index) => {
const newLoadings = [...loading]; const newLoadings = [...loading];
...@@ -156,6 +215,7 @@ const VectorData = props => { ...@@ -156,6 +215,7 @@ const VectorData = props => {
const onSubmit = prop => { const onSubmit = prop => {
setVisible(false); setVisible(false);
setFlag(flag + 1); setFlag(flag + 1);
setAddVisible(false);
}; };
const delConfirm = record => { const delConfirm = record => {
console.log(' record.ServiceName', record.ServiceName.split('.')); console.log(' record.ServiceName', record.ServiceName.split('.'));
...@@ -183,10 +243,15 @@ const VectorData = props => { ...@@ -183,10 +243,15 @@ const VectorData = props => {
}; };
const handleAdd = () => { const handleAdd = () => {
setType('add'); setType('add');
setVisible(true); if (radioType == 1) {
setVisible(true);
} else {
setAddVisible(true);
}
}; };
useEffect(() => { useEffect(() => {
renderTile({ info: searchValue }); renderTile({ info: searchValue });
renderTileSliced();
}, [flag]); }, [flag]);
// 获取瓦片数据配置数据 // 获取瓦片数据配置数据
const renderTile = (params = { info: '' }) => { const renderTile = (params = { info: '' }) => {
...@@ -194,16 +259,57 @@ const VectorData = props => { ...@@ -194,16 +259,57 @@ const VectorData = props => {
solutionName(); solutionName();
GetVectorService(params) GetVectorService(params)
.then(res => { .then(res => {
setTreeLoading(false);
if (res.msg === 'Ok') { if (res.msg === 'Ok') {
let arr = []; let arr = [];
res.data.VectorList.map(item => { res.data.VectorList.map(item => {
arr.push(false); arr.push(false);
}); });
setLoading(arr); setLoading(arr);
setTreeLoading(false);
setTileData(res.data.VectorList); setTileData(res.data.VectorList);
} else { } else {
setTreeLoading(false); notification.error({
message: '获取失败',
description: res.message,
});
}
})
.catch(err => {
if (err.message.indexOf('timeout') !== -1) {
notification.error({
message: '提示',
duration: 3,
description: '请求超时',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: err.message,
});
}
setTreeLoading(false);
});
};
const renderTileSliced = () => {
setTreeLoading(true);
GettMaplayer({
terminalType: 'base',
isBaseMap: true,
})
.then(res => {
setTreeLoading(false);
if (res.code == '0') {
let newdata = res.data.general.baseMap.layers?.filter(i => i.type === 'google-user');
setTileSlicedData(newdata);
let data = [];
newdata.map(item => {
data.push(item.servicename);
});
setName(data);
} else {
notification.error({ notification.error({
message: '获取失败', message: '获取失败',
description: res.message, description: res.message,
...@@ -268,44 +374,71 @@ const VectorData = props => { ...@@ -268,44 +374,71 @@ const VectorData = props => {
} }
}; };
const handleSelect = e => {
setRadioType(e.target.value);
};
const changebaseMap = e => {
setType('edit');
setRecord(e);
setAddVisible(true);
};
return ( return (
<> <>
<div className={styles.pipeNetwork}> <div className={styles.pipeNetwork}>
<Spin tip="loading..." spinning={treeLoading}> <Spin tip="loading..." spinning={treeLoading}>
<div className={styles.tileBtn}> <div className={styles.tileBtnVe}>
<span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span> <div className={styles.tileBtnLeft}>
<Search <span>管网类型:</span>
allowClear <Radio.Group defaultValue="1" value={radioType} onChange={e => handleSelect(e)}>
placeholder="请输入服务名或工程名" <Radio.Button value="1" style={{ width: '90px', textAlign: 'center' }}>
onSearch={handleSearch} 管网
onChange={handleChange} </Radio.Button>
value={searchValue} <Radio.Button value="2" style={{ width: '90px', textAlign: 'center' }}>
enterButton 切片管网
style={{ width: '300px', marginRight: '20px' }} </Radio.Button>
/> </Radio.Group>
<Button </div>
type="primary" <div className={styles.tileBtnRight}>
onClick={() => { {radioType == 1 && (
updateAll(); <>
}} <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span>
loading={allLoading} <Search
style={{ marginRight: '20px' }} allowClear
> placeholder="请输入服务名或工程名"
批量更新 onSearch={handleSearch}
</Button> onChange={handleChange}
<Button value={searchValue}
type="primary" enterButton
onClick={() => { style={{ width: '300px', marginRight: '20px' }}
handleAdd(); />
}} <Button
> type="primary"
新增 onClick={() => {
</Button> updateAll();
}}
loading={allLoading}
style={{ marginRight: '20px' }}
>
批量更新
</Button>
</>
)}
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
新增
</Button>
</div>
</div> </div>
<div style={{ height: 'calc(100% - 51px)', width: '100%' }}> <div style={{ height: 'calc(100% - 51px)', width: '100%' }}>
<Table <Table
columns={columns} columns={radioType == 1 ? columns : columnsPart}
dataSource={tileData} dataSource={radioType == 1 ? tileData : tileSlicedData}
bordered bordered
rowKey="CreateTime" rowKey="CreateTime"
scroll={{ y: 'calc(100% - 70px)' }} scroll={{ y: 'calc(100% - 70px)' }}
...@@ -332,6 +465,14 @@ const VectorData = props => { ...@@ -332,6 +465,14 @@ const VectorData = props => {
onCancel={() => setMeteDataVisible(false)} onCancel={() => setMeteDataVisible(false)}
metaData={currentMetaData} metaData={currentMetaData}
/> />
<AddSlicedModal
visible={addVisible}
onCancel={() => setAddVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={record}
name={name}
/>
</Spin> </Spin>
</div> </div>
</> </>
......
...@@ -25,6 +25,7 @@ const AddModal = props => { ...@@ -25,6 +25,7 @@ const AddModal = props => {
const [pipeArr, setPipeArr] = useState([]); const [pipeArr, setPipeArr] = useState([]);
const [list, setList] = useState([]); const [list, setList] = useState([]);
const [radio, setRadio] = useState(''); const [radio, setRadio] = useState('');
const [tileSlicedData, setTileSlicedData] = useState([]);
const [form] = Form.useForm(); const [form] = Form.useForm();
// 提交 // 提交
...@@ -77,6 +78,7 @@ const AddModal = props => { ...@@ -77,6 +78,7 @@ const AddModal = props => {
jsonCfg: JSON.stringify({ jsonCfg: JSON.stringify({
baseMap: [obj.baseMap], baseMap: [obj.baseMap],
servicename: obj.servicename, servicename: obj.servicename,
tileMaps: obj.tileMaps ? [obj.tileMaps] : [],
label: obj.label, label: obj.label,
url: obj.url, url: obj.url,
alpha: 1, alpha: 1,
...@@ -108,6 +110,7 @@ const AddModal = props => { ...@@ -108,6 +110,7 @@ const AddModal = props => {
break; break;
case 'schemeAdd': case 'schemeAdd':
pipeNetwork(); pipeNetwork();
renderTileSliced();
setRadio('基础底图'); setRadio('基础底图');
form.setFieldsValue({ choose: '基础底图' }); form.setFieldsValue({ choose: '基础底图' });
form.setFieldsValue({ form.setFieldsValue({
...@@ -148,7 +151,7 @@ const AddModal = props => { ...@@ -148,7 +151,7 @@ const AddModal = props => {
pipeArr.push(item.ServiceName.split('.')[0]); pipeArr.push(item.ServiceName.split('.')[0]);
}); });
} }
console.log(baseMap);
setPipeArr(pipeArr); setPipeArr(pipeArr);
setBaseMap(baseMap); setBaseMap(baseMap);
// form.setFieldsValue({ // form.setFieldsValue({
...@@ -156,6 +159,40 @@ const AddModal = props => { ...@@ -156,6 +159,40 @@ const AddModal = props => {
// }); // });
}); });
}; };
const renderTileSliced = () => {
GettMaplayer({
terminalType: 'base',
isBaseMap: true,
})
.then(res => {
if (res.code == '0') {
let newdata = res.data.general.baseMap.layers?.filter(i => i.type === 'google-user');
setTileSlicedData(newdata);
} else {
notification.error({
message: '获取失败',
description: res.message,
});
}
})
.catch(err => {
if (err.message.indexOf('timeout') !== -1) {
notification.error({
message: '提示',
duration: 3,
description: '请求超时',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: err.message,
});
}
setTreeLoading(false);
});
};
const layout = { const layout = {
layout: 'horizontal', layout: 'horizontal',
labelCol: { labelCol: {
...@@ -254,6 +291,17 @@ const AddModal = props => { ...@@ -254,6 +291,17 @@ const AddModal = props => {
: ''} : ''}
</Select> </Select>
</Item> </Item>
<Item label="切片管网" name="tileMaps" placeholder="请选择切片管网">
<Select showSearch>
{tileSlicedData.length
? tileSlicedData.map((item, index) => (
<Option key={index} value={item.servicename}>
{item.servicename}
</Option>
))
: ''}
</Select>
</Item>
<Item label="标签" name="label"> <Item label="标签" name="label">
<Input placeholder="请输入标签" allowClear /> <Input placeholder="请输入标签" allowClear />
</Item> </Item>
......
...@@ -5,6 +5,7 @@ import { ...@@ -5,6 +5,7 @@ import {
GetVectorService, GetVectorService,
bindSchemeBaseMap, bindSchemeBaseMap,
UpdateSchemPipeNetwork, UpdateSchemPipeNetwork,
GettMaplayer,
} from '@/services/webConfig/api'; } from '@/services/webConfig/api';
const { Item } = Form; const { Item } = Form;
const { Option } = Select; const { Option } = Select;
...@@ -12,6 +13,7 @@ const EditModal = props => { ...@@ -12,6 +13,7 @@ const EditModal = props => {
const { callBackSubmit = () => {}, formObj, visible } = props; const { callBackSubmit = () => {}, formObj, visible } = props;
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [pipeArr, setPipeArr] = useState([]); const [pipeArr, setPipeArr] = useState([]);
const [tileSlicedData, setTileSlicedData] = useState([]);
const [form] = Form.useForm(); const [form] = Form.useForm();
// 提交 // 提交
...@@ -22,7 +24,10 @@ const EditModal = props => { ...@@ -22,7 +24,10 @@ const EditModal = props => {
let obj = form.getFieldsValue(); let obj = form.getFieldsValue();
UpdateSchemPipeNetwork({ UpdateSchemPipeNetwork({
schemename: formObj.schemename, schemename: formObj.schemename,
...obj, servicename: obj.servicename,
label: obj.label,
url: obj.url,
tileMaps: obj.tileMaps || [],
}).then(res => { }).then(res => {
setLoading(false); setLoading(false);
if (res.code == '0') { if (res.code == '0') {
...@@ -48,8 +53,10 @@ const EditModal = props => { ...@@ -48,8 +53,10 @@ const EditModal = props => {
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
pipeNetwork(); pipeNetwork();
renderTileSliced();
form.setFieldsValue({ form.setFieldsValue({
servicename: formObj.servicename, servicename: formObj.servicename,
tileMaps: formObj.tileMaps?.[0],
label: formObj.label, label: formObj.label,
url: formObj.url, url: formObj.url,
}); });
...@@ -58,6 +65,39 @@ const EditModal = props => { ...@@ -58,6 +65,39 @@ const EditModal = props => {
} }
}, [visible]); }, [visible]);
const renderTileSliced = () => {
GettMaplayer({
terminalType: 'base',
isBaseMap: true,
})
.then(res => {
if (res.code == '0') {
let newdata = res.data.general.baseMap.layers?.filter(i => i.type === 'google-user');
setTileSlicedData(newdata);
} else {
notification.error({
message: '获取失败',
description: res.message,
});
}
})
.catch(err => {
if (err.message.indexOf('timeout') !== -1) {
notification.error({
message: '提示',
duration: 3,
description: '请求超时',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: err.message,
});
}
});
};
// 获取管网及默认底图 // 获取管网及默认底图
const pipeNetwork = () => { const pipeNetwork = () => {
form.resetFields(); form.resetFields();
...@@ -111,7 +151,7 @@ const EditModal = props => { ...@@ -111,7 +151,7 @@ const EditModal = props => {
> >
{visible && ( {visible && (
<Form form={form} {...layout}> <Form form={form} {...layout}>
<Item label="管网" name="servicename"> <Item label="管网" name="servicename" rules={[{ required: true, message: '请选择管网' }]}>
<Select onChange={handleService} placeholder="请选择管网"> <Select onChange={handleService} placeholder="请选择管网">
{pipeArr.length {pipeArr.length
? pipeArr.map((item, index) => { ? pipeArr.map((item, index) => {
...@@ -124,6 +164,19 @@ const EditModal = props => { ...@@ -124,6 +164,19 @@ const EditModal = props => {
: ''} : ''}
</Select> </Select>
</Item> </Item>
<Item label="切片管网" name="tileMaps">
<Select placeholder="请选择管网">
{tileSlicedData.length
? tileSlicedData.map((item, index) => {
return (
<Option key={index} value={item.servicename}>
{item.servicename}
</Option>
);
})
: ''}
</Select>
</Item>
<Item label="标签" name="label"> <Item label="标签" name="label">
<Input placeholder="请输入标签" allowClear /> <Input placeholder="请输入标签" allowClear />
</Item> </Item>
......
...@@ -293,8 +293,37 @@ const CardData = props => { ...@@ -293,8 +293,37 @@ const CardData = props => {
style={{ width: 360 }} style={{ width: 360 }}
> >
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '13px' }}> <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '13px' }}>
<div> <div style={{ display: 'flex', alignItems: 'center' }}>
<span className={styles.schemeName}>管网</span> {props.item.servicename} <span className={styles.schemeName}>管网</span>{' '}
<Tooltip title={props.item.servicename}>
<span
style={{
display: 'inline-block',
width: '80px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{props.item.servicename}
</span>
</Tooltip>
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<span className={styles.schemeNameL}>切片管网</span>{' '}
<Tooltip title={props.item.tileMaps}>
<span
style={{
display: 'inline-block',
width: '80px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{props.item.tileMaps}
</span>
</Tooltip>
</div> </div>
<div> <div>
<FormOutlined <FormOutlined
......
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