import { Space, Table, Button, Popconfirm, notification, Spin } 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 [type, setType] = useState(''); // 弹窗类型 const [solutionNames, setSolutionNames] = useState(''); const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' }); const [currentMetaData, setCurrentMetaData] = useState(null); 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]} 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(); }, [flag]); // 获取瓦片数据配置数据 const renderTile = () => { setTreeLoading(true); solutionName(); GetVectorService().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, }); } }); }; return ( <> <div className={styles.pipeNetwork}> <Spin tip="loading..." spinning={treeLoading}> <div className={styles.tileBtn}> <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;