10 changed files with 219 additions and 75 deletions
|
After Width: | Height: | Size: 1.6 MiB |
@ -1,17 +1,20 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<link rel="shortcut icon" href="/assets/images/favicon.ico"> |
|||
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
|||
</head> |
|||
<style> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<link rel="shortcut icon" href="/assets/images/favicon.ico"> |
|||
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
|||
</head> |
|||
<style> |
|||
@font-face { |
|||
font-family: YouSheBiaoTiHei; |
|||
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf"); |
|||
} |
|||
</style> |
|||
|
|||
</style> |
|||
|
|||
<body style="background: transparent"> |
|||
<div id='App'></div> |
|||
</body> |
|||
<body style="background: transparent"> |
|||
<div id='App'></div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -1,20 +1,23 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title></title> |
|||
<link rel="shortcut icon" href="/assets/images/favicon.ico"> |
|||
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
|||
</head> |
|||
<style> |
|||
|
|||
</style> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title></title> |
|||
<link rel="shortcut icon" href="/assets/images/favicon.ico"> |
|||
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
|||
</head> |
|||
<style> |
|||
@font-face { |
|||
font-family: YouSheBiaoTiHei; |
|||
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf"); |
|||
} |
|||
</style> |
|||
|
|||
<body> |
|||
<div id='App'></div> |
|||
<script type="text/javascript" src="http://localhost:5401/client/build/vendor.js"></script> |
|||
<script type="text/javascript" src="http://localhost:5401/client/build/app.js"></script> |
|||
</body> |
|||
<body> |
|||
<div id='App'></div> |
|||
<script type="text/javascript" src="http://localhost:5401/client/build/vendor.js"></script> |
|||
<script type="text/javascript" src="http://localhost:5401/client/build/app.js"></script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -1,50 +1,90 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Input } from 'antd' |
|||
import { Input, Tooltip, Empty } from 'antd' |
|||
import { InsertRowBelowOutlined, DatabaseOutlined, FileOutlined, PullRequestOutlined } from '@ant-design/icons'; |
|||
import { useFsRequest, ApiTable } from '$utils'; |
|||
import './style.less'; |
|||
function Retrieval(props) { |
|||
const renderMetaData = (type) => { |
|||
const [keywords, setKeywords] = useState() |
|||
const [firstInput, setFirstInput] = useState() |
|||
|
|||
const { data: catalogs = [] } = useFsRequest({ |
|||
url: ApiTable.getResourceCatalog, |
|||
}); |
|||
|
|||
const { data: result = {} } = useFsRequest({ |
|||
url: ApiTable.searchMetadata, |
|||
query: { |
|||
keywords: keywords |
|||
}, |
|||
refreshDeps: [keywords], |
|||
ready: !!keywords |
|||
}); |
|||
|
|||
console.log(result) |
|||
|
|||
const renderIcon = (type) => { |
|||
switch (type) { |
|||
case '库': |
|||
return <div className='result-row'> |
|||
<div className='column1'> |
|||
<InsertRowBelowOutlined /> 代码：T29E_34AC 名称：政务信息变更 类型：库表/表（Table） 路径：/demoABI/govern_metadata/ 标签：XX |
|||
</div> |
|||
<div className='column2'>相关操作：<a>定位</a></div> |
|||
</div> |
|||
return <DatabaseOutlined /> |
|||
case '表': |
|||
return <div className='result-row'> |
|||
<div className='column1'> |
|||
<DatabaseOutlined /> 代码：init_metadata 名称：政务大数据平台 类型：库表/库（Schema） 路径：/demoABI 标签：XX |
|||
</div> |
|||
<div className='column2'>相关操作：<a>定位</a><a>下载</a></div> |
|||
</div> |
|||
return <InsertRowBelowOutlined /> |
|||
case '文件': |
|||
return <div className='result-row'> |
|||
<div className='column1'> |
|||
<FileOutlined /> 名称：政务大数据平台 类型：文件（File） 路径：/demoABI 标签：XX |
|||
</div> |
|||
<div className='column2'>相关操作：<a>定位</a><a>下载</a></div> |
|||
</div> |
|||
return <FileOutlined /> |
|||
case '接口': |
|||
return <div className='result-row'> |
|||
<div className='column1'> |
|||
<PullRequestOutlined /> 名称：政务大数据平台 类型：接口（Api） 路径：/demoABII 标签：XX |
|||
</div> |
|||
<div className='column2'>相关操作：<a>定位</a></div> |
|||
</div> |
|||
return <PullRequestOutlined /> |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
|
|||
return <> |
|||
<Input.Search style={{ width: '30%', marginLeft: 10, marginBottom: 30 }} /> |
|||
{renderMetaData('库')} |
|||
{renderMetaData('表')} |
|||
{renderMetaData('文件')} |
|||
{renderMetaData('接口')} |
|||
</> |
|||
const renderCatalog = (catalogId, rslt = '') => { |
|||
let resource = rslt |
|||
let catalog = catalogs.find(s => s.id == catalogId) |
|||
if (catalog?.parent) { |
|||
resource += renderCatalog(catalog.parent, catalog?.name + '/') |
|||
} else { |
|||
resource += catalog?.name |
|||
} |
|||
return resource |
|||
} |
|||
|
|||
const renderText = (text) => { |
|||
return text?.length > 16 ? <Tooltip placement="top" title={text}> |
|||
{text.substring(0, 16) + '...'} |
|||
</Tooltip> : text |
|||
} |
|||
|
|||
return !result?.rows ? <div className='search-container'> |
|||
<div className='title'>数据资源检索</div> |
|||
<Input addonAfter={<div onClick={() => { setKeywords(firstInput) }} style={{ color: '#fff' }}>搜索一下</div>} |
|||
style={{ width: '40%', marginLeft: 10, marginBottom: 30 }} |
|||
onChange={e => { setFirstInput(e.target.value) }} |
|||
onPressEnter={e => { setKeywords(e.target.value) }} |
|||
/> |
|||
</div> : |
|||
<> |
|||
<Input.Search defaultValue={keywords} style={{ width: '30%', marginLeft: 10, marginBottom: 30 }} |
|||
onSearch={value => { setKeywords(value) }} |
|||
/> |
|||
{result?.rows?.map(s => { |
|||
const catalogText = renderCatalog(s?.catalog).split('/').reverse().toString().replaceAll(',', '/') |
|||
const tagText = s?.tagDatabases?.map(x => x.tag.name).toString() || '-' |
|||
return <div className='result-row'> |
|||
<div className='column1'> |
|||
{renderIcon(s?.type)} |
|||
{s?.code && <span> 代码：{renderText(s?.code)}</span>} |
|||
<span> 名称：{renderText(s?.name)}</span> |
|||
<span> 类型：{s?.type}</span> |
|||
<span> 路径：{renderText(catalogText)}</span> |
|||
<span> 标签：{renderText(tagText)}</span> |
|||
</div> |
|||
<div className='column2'>相关操作：<a>定位</a> |
|||
{s?.type == '表' || s?.type == '文件' ? <a>下载</a> : ''} |
|||
</div> |
|||
</div> |
|||
})} |
|||
{!result?.rows?.length > 0 && <Empty />} |
|||
</> |
|||
} |
|||
|
|||
export default Retrieval |
|||
Loading…
Reference in new issue