10 changed files with 219 additions and 75 deletions
|
After Width: | Height: | Size: 1.6 MiB |
@ -1,17 +1,20 @@ |
|||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||
<html> |
<html> |
||||
|
|
||||
<head> |
<head> |
||||
<meta charset="UTF-8"> |
<meta charset="UTF-8"> |
||||
<link rel="shortcut icon" href="/assets/images/favicon.ico"> |
<link rel="shortcut icon" href="/assets/images/favicon.ico"> |
||||
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
||||
</head> |
</head> |
||||
<style> |
<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 style="background: transparent"> |
</body> |
||||
<div id='App'></div> |
|
||||
</body> |
|
||||
|
|
||||
</html> |
</html> |
||||
@ -1,20 +1,23 @@ |
|||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||
<html> |
<html> |
||||
|
|
||||
<head> |
<head> |
||||
<meta charset="UTF-8"> |
<meta charset="UTF-8"> |
||||
<title></title> |
<title></title> |
||||
<link rel="shortcut icon" href="/assets/images/favicon.ico"> |
<link rel="shortcut icon" href="/assets/images/favicon.ico"> |
||||
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
||||
</head> |
</head> |
||||
<style> |
<style> |
||||
|
@font-face { |
||||
|
font-family: YouSheBiaoTiHei; |
||||
|
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf"); |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
</style> |
<body> |
||||
|
<div id='App'></div> |
||||
<body> |
<script type="text/javascript" src="http://localhost:5401/client/build/vendor.js"></script> |
||||
<div id='App'></div> |
<script type="text/javascript" src="http://localhost:5401/client/build/app.js"></script> |
||||
<script type="text/javascript" src="http://localhost:5401/client/build/vendor.js"></script> |
</body> |
||||
<script type="text/javascript" src="http://localhost:5401/client/build/app.js"></script> |
|
||||
</body> |
|
||||
|
|
||||
</html> |
</html> |
||||
@ -1,50 +1,90 @@ |
|||||
import React, { useEffect, useState } from 'react' |
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 { InsertRowBelowOutlined, DatabaseOutlined, FileOutlined, PullRequestOutlined } from '@ant-design/icons'; |
||||
|
import { useFsRequest, ApiTable } from '$utils'; |
||||
import './style.less'; |
import './style.less'; |
||||
function Retrieval(props) { |
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) { |
switch (type) { |
||||
case '库': |
case '库': |
||||
return <div className='result-row'> |
return <DatabaseOutlined /> |
||||
<div className='column1'> |
|
||||
<InsertRowBelowOutlined /> 代码：T29E_34AC 名称：政务信息变更 类型：库表/表（Table） 路径：/demoABI/govern_metadata/ 标签：XX |
|
||||
</div> |
|
||||
<div className='column2'>相关操作：<a>定位</a></div> |
|
||||
</div> |
|
||||
case '表': |
case '表': |
||||
return <div className='result-row'> |
return <InsertRowBelowOutlined /> |
||||
<div className='column1'> |
|
||||
<DatabaseOutlined /> 代码：init_metadata 名称：政务大数据平台 类型：库表/库（Schema） 路径：/demoABI 标签：XX |
|
||||
</div> |
|
||||
<div className='column2'>相关操作：<a>定位</a><a>下载</a></div> |
|
||||
</div> |
|
||||
case '文件': |
case '文件': |
||||
return <div className='result-row'> |
return <FileOutlined /> |
||||
<div className='column1'> |
|
||||
<FileOutlined /> 名称：政务大数据平台 类型：文件（File） 路径：/demoABI 标签：XX |
|
||||
</div> |
|
||||
<div className='column2'>相关操作：<a>定位</a><a>下载</a></div> |
|
||||
</div> |
|
||||
case '接口': |
case '接口': |
||||
return <div className='result-row'> |
return <PullRequestOutlined /> |
||||
<div className='column1'> |
|
||||
<PullRequestOutlined /> 名称：政务大数据平台 类型：接口（Api） 路径：/demoABII 标签：XX |
|
||||
</div> |
|
||||
<div className='column2'>相关操作：<a>定位</a></div> |
|
||||
</div> |
|
||||
default: |
default: |
||||
break; |
break; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
return <> |
const renderCatalog = (catalogId, rslt = '') => { |
||||
<Input.Search style={{ width: '30%', marginLeft: 10, marginBottom: 30 }} /> |
let resource = rslt |
||||
{renderMetaData('库')} |
let catalog = catalogs.find(s => s.id == catalogId) |
||||
{renderMetaData('表')} |
if (catalog?.parent) { |
||||
{renderMetaData('文件')} |
resource += renderCatalog(catalog.parent, catalog?.name + '/') |
||||
{renderMetaData('接口')} |
} 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 |
export default Retrieval |
||||
Loading…
Reference in new issue