import { Space, Table, Button, Popconfirm, notification, Spin, Input } from 'antd'; import React, { useState, useEffect } from 'react'; import styles from '../SchemeConfig.less'; import { GetVectorService, deleteVectorService, getSolutionList, updatePublishedMetaData, } from '@/services/webConfig/api'; import AddModal from './AddModal'; import PreviewModal from './VectorPreviewModal'; import MeteDataModal from './MeteDataModal'; const VectorData = props => { const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示 const [tileData, setTileData] = useState([]); // table表格数据 const [visible, setVisible] = useState(false); // 弹窗 const [previewVisible, setPreviewVisible] = useState(false); // 预览弹窗 const [meteDataVisible, setMeteDataVisible] = useState(false); // 预览弹窗 const [flag, setFlag] = useState(0); // 更新list const [loading, setLoading] = useState([]); // 更新状态 const [allLoading, setAllLoading] = useState(false); // 更新状态 const [type, setType] = useState(''); // 弹窗类型 const [solutionNames, setSolutionNames] = useState(''); const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' }); const [currentMetaData, setCurrentMetaData] = useState(null); const [searchValue, setSearchValue] = useState(''); const { Search } = Input; 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', width: 260, render: (text, record, index) => ( <Space> <Button type="primary" size="small" onClick={() => metadata(record)}> 元数据 </Button> <Button type="primary" size="small" onClick={() => previewMetaData(record, index)}> 预览 </Button> <Button type="primary" size="small" loading={loading[index] || allLoading} 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) => { const newLoadings = [...loading]; newLoadings[index] = true; setLoading(newLoadings); 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); notification.error({ message: '提示', duration: 3, description: '服务无法访问', }); }); }; const previewMetaData = record => { setCurrentMetaData(record); setPreviewVisible(true); }; const metadata = record => { setCurrentMetaData(record); setMeteDataVisible(true); }; const solutionName = () => { getSolutionList({ _version: 9999, }).then(res => { setSolutionNames(res.data.currentSolution); }); }; const onSubmit = prop => { setVisible(false); setFlag(flag + 1); }; const delConfirm = record => { console.log(' record.ServiceName', record.ServiceName.split('.')); let query = { serviceName: record.ServiceName.split('.')[0], _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'); setVisible(true); }; useEffect(() => { renderTile({ info: searchValue }); }, [flag]); // 获取瓦片数据配置数据 const renderTile = (params = { info: '' }) => { setTreeLoading(true); solutionName(); GetVectorService(params).then(res => { if (res.msg === 'Ok') { let arr = []; res.data.VectorList.map(item => { arr.push(false); }); setLoading(arr); setTreeLoading(false); setTileData(res.data.VectorList); } else { setTreeLoading(false); notification.error({ message: '获取失败', description: res.message, }); } }); }; // 搜索 const handleSearch = text => { setFlag(flag + 1); }; // 搜索框改变时存储输入的值 const handleChange = e => { setSearchValue(e.target.value); }; const updateAll = async () => { let query = { version: 9999, solution: solutionNames, }; for (const [index,item] of tileData.entries()) { setAllLoading(true); query.serviceName = item.ServiceName; let res = null; res = await updatePublishedMetaData(query); if (res.success) { setAllLoading(false); notification.success({ message: '提示', duration: 1, // description: `${item.ServiceName}更新辣`, description: `更新元数据成功`, }); } else { setAllLoading(false); notification.error({ message: '提示', duration: 3, description: '更新元数据失败', }); } if(index === tileData.length-1) { setFlag(flag + 1) } } }; return ( <> <div className={styles.pipeNetwork}> <Spin tip="loading..." spinning={treeLoading}> <div className={styles.tileBtn}> <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span> <Search allowClear placeholder="请输入服务名或工程名" onSearch={handleSearch} onChange={handleChange} value={searchValue} enterButton style={{ width: '300px', marginRight: '20px' }} /> <Button type="primary" onClick={() => { updateAll(); }} loading={allLoading} style={{ marginRight: '20px' }} > 批量更新 </Button> <Button type="primary" onClick={() => { handleAdd(); }} > 新增 </Button> </div> <div style={{ height: 'calc(100% - 51px)', width: '100%' }}> <Table columns={columns} dataSource={tileData} bordered rowKey="CreateTime" scroll={{ y: 'calc(100% - 70px)' }} pagination={{ showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`, }} /> </div> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} formObj={formObj} solutionNames={solutionNames} /> <PreviewModal visible={previewVisible} onCancel={() => setPreviewVisible(false)} metaData={currentMetaData} /> <MeteDataModal visible={meteDataVisible} onCancel={() => setMeteDataVisible(false)} metaData={currentMetaData} /> </Spin> </div> </> ); }; export default VectorData;