资产全文检索

src/App.js

@@ -28,6 +28,8 @@ export default class App extends React.Component {
       id = params.id||'';
     }
 
+    console.log('params', params);
+
     if (message === 'showDataModelDetail') {
       return (
         <ImportModal

src/model/assetmanage.js

@@ -93,4 +93,8 @@ export function* loadDataAssets(payload) {
 
 export function* unloadDataAssets(payload) {
   return yield call(service.unloadDataAssets, payload);
+}
+
+export function* getDataAssetLocation(payload) {
+  return yield call(service.getDataAssetLocation, payload);
 }
\ No newline at end of file

src/routes.js

@@ -9,7 +9,7 @@ export const routes = [
   {
     name: 'manage',
     text: '数据管理',
-    redirect: 'map',
+    redirect: 'asset-map',
     children: [
       {
         name: 'datasource-manage',

src/service/dataassetmanager.js

@@ -60,6 +60,10 @@ export function unloadDataAssets(payload) {
   return PostJSON("/dataassetmanager/dataAssetApi/unloadDataAssets", payload);
 }
 
+export function getDataAssetLocation(payload) {
+  return GetJSON("/dataassetmanager/dataAssetApi/locateDataAssetById", payload);
+}
+
 export function addOrUpdateDirectory(payload) {
   return PostJSON("/dataassetmanager/directoryApi/addOrUpdateDirectory", payload);
 }

src/util/constant.js

 export const AnchorId = 'id';
 export const AnchorTimestamp = 'timestamp';
-export const AnchorDid = 'did';
-export const AnchorLocation = 'location';
\ No newline at end of file

src/view/Manage/AssetManage/Component/AssetDetail.jsx

 import React, { useEffect, useState } from "react";
-import { Modal, Typography } from "antd";
+import { Modal, Typography, Spin } from "antd";
 
-import AssetItem from './AssetItem';
+import AssetDetailItem from './AssetDetailItem';
 import { dispatch } from '../../../../model';
 
 const AssetDetail = (props)=>{
@@ -9,6 +9,7 @@ const AssetDetail = (props)=>{
   const { onCancel, visible, id, reference=null } = props;
   const [ asset, setAsset ] = useState('');
   const [ assetName, setAssetName ] = useState('');
+  const [ loading, setLoading ] = useState(false);
 
   useEffect(() => {
 
@@ -16,17 +17,22 @@ const AssetDetail = (props)=>{
       getAssetThenGetAssetName();
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ visible ])
+  }, [ visible, id ])
 
   const getAssetThenGetAssetName = () => {
+    setLoading(true);
     dispatch({
       type: 'assetmanage.getDataAssetDetail',
       payload: {
         dataAssetId: id
       },
       callback: data => {
+        setLoading(false);
         setAsset(data);
         getAssetName(data);
+      },
+      error: () => {
+        setLoading(false);
       }
     })
   }
@@ -57,11 +63,15 @@ const AssetDetail = (props)=>{
        onCancel={()=>{ onCancel && onCancel()}}
        footer={null}
      >
-       <AssetItem data={asset} />
+      <Spin spinning={loading}>
+        <AssetDetailItem data={asset} />
+      </Spin>
      </Modal>
     }
     {
-      reference && <AssetItem data={asset} />
+      reference && <Spin spinning={loading}>
+        <AssetDetailItem data={asset} />
+      </Spin>
     }
     </>
   )

src/view/Manage/AssetManage/Component/AssetDetailItem.jsx

+import React, { useEffect, useState } from 'react';
+import { Avatar, Row, Col, Typography, Divider } from 'antd';
+
+import './AssetItem.less';
+
+const colors = [
+  '#BDD2FD',
+  '#C2C8D5',
+  '#FBE5A2',
+  '#F6C3B7',
+  '#B6E3F5',
+  '#D3C6EA',
+  '#FFD8B8',
+  '#AAD8D8',
+  '#FFD6E7',
+];
+
+const AssetItem = (props) => {
+
+  const { data } = props;
+  const [ typesOfElements, setTypesOfElements ] = useState([]);
+
+  useEffect(() => {
+
+    if (data) {
+      convertData();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ data ]);
+
+  const convertData = () => {
+    const _typesOfElements = [];
+
+    const _types = [];
+
+    data && (data.elements||[]).forEach(element => {
+      if (_types.indexOf(element.type||'') === -1) {
+        _types.push(element.type||'');
+        const _elements =  (data.elements||[]).filter(_element => (_element.type||'') === (element.type||''));
+        _typesOfElements.push({ type: element.type||'', elements: _elements||[] });
+      }
+    })
+
+    setTypesOfElements(_typesOfElements);
+  }
+
+  return (
+    <div className='asset-item'>
+    {
+      (typesOfElements||[]).map((typeOfElements, index) => {
+        const _type = typeOfElements.type||'';
+
+        return (
+          <div key={index} className='d-flex' style={{ alignItems: 'center' }}>
+            <Avatar 
+              className='mr-3' 
+              title={_type}
+              style={{ 
+                backgroundColor: colors[index%colors.length] 
+              }}
+            >
+            { _type==='' ? '无' : _type.slice(0, 2) }
+            </Avatar>
+            <div className='textOverflow' style={{ flex: 1 }}>
+              <Row className='mb-3'>
+              {
+                typeOfElements && typeOfElements.elements && typeOfElements.elements.map((element, _index) => {
+                  return (
+                    <Col className='mt-3' key={_index} md={8}>
+                      <Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } ellipsis>
+                      { `${element.name||''}: ${element.value||''}` }
+                      </Typography.Paragraph>
+                    </Col>
+                  );
+                })
+              }
+              </Row>
+              { index !== ((typesOfElements||[]).length-1) && <Divider /> }
+            </div>
+          </div>
+        )
+      })
+    }
+    </div>
+  );
+}
+
+export default AssetItem;

src/view/Manage/AssetManage/Component/AssetTable.jsx

@@ -12,7 +12,7 @@ import AssetDetail from "./AssetDetail"
 import AssetItem from './AssetItem';
 import { dispatch } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam } from '../../../../util';
-import { AnchorId, AnchorLocation } from '../../../../util/constant';
+import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
 
 import "./AssetTable.less";
 
@@ -40,7 +40,7 @@ const AssetTable = (props) => {
   const [ modal, contextHolder ] = Modal.useModal();
 
   const anchorId = getQueryParam(AnchorId, props.location.search);
-  const anchorLocation = Number(getQueryParam(AnchorLocation, props.location.search));
+  const timestamp = getQueryParam(AnchorTimestamp, props.location.search);
 
   const shouldScrollRef = useRef(false);
 
@@ -49,8 +49,7 @@ const AssetTable = (props) => {
 
       if (shouldScrollRef.current === true) {
 
-        const _pageNum = parseInt(anchorLocation/pageSize + ((anchorLocation%pageSize===0)?0:1));
-        setPagination({ ...pagination, pageNum: _pageNum });
+        getDataAssetLocation();
 
       } else {
 
@@ -72,8 +71,7 @@ const AssetTable = (props) => {
     }
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [anchorId])
-
+  }, [timestamp])
 
   useEffect(() => {
     if ((nodeId||'') !== '' ) {
@@ -105,6 +103,24 @@ const AssetTable = (props) => {
     }
   })
 
+  const getDataAssetLocation = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getDataAssetLocation',
+      payload: {
+        dataAssetId: anchorId
+      },
+      callback: data => {
+        const anchorLocation = data.offset;
+        const _pageNum = parseInt(anchorLocation/pageSize + ((anchorLocation%pageSize===0)?0:1));
+        setPagination({ ...pagination, pageNum: _pageNum });
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
   const changeCurrent = (page,size) => {
     setCheckAllValue(false);
     setSelectedKeys([]);

src/view/Manage/AssetManage/Component/AssetTree.jsx

@@ -8,12 +8,12 @@ import ImportDirectory from './ImportDirectory';
 import UpdateDirectoryModal from './UpdateDirectoryModal';
 import CustomDirectoryModal from './CustomDirectoryModal';
 import { showMessage, getQueryParam } from '../../../../util';
-import { AnchorDid } from '../../../../util/constant';
+import { AnchorTimestamp, AnchorId } from '../../../../util/constant';
 import './AssetTree.less';
 
 const AssetTree = (props) => {
 
-  const { readOnly = false, onSelect, className,  ...restProps } = props; 
+  const { readOnly = false, onSelect, className } = props; 
   const [ keyword, setKeyword ] = useState('');
   const [ loading, setLoading ] = useState(false);
   const [ treeData, setTreeData ] = useState([]);
@@ -30,12 +30,33 @@ const AssetTree = (props) => {
 
   const [modal, contextHolder] = Modal.useModal();
   
-  const did = getQueryParam(AnchorDid, props.location.search);
+  const timestamp = getQueryParam(AnchorTimestamp, props.location.search);
+  const id = getQueryParam(AnchorId, props.location.search);
 
   useEffect(() => {
-    getAllDirectoryAsTree(true, did);
+    if ((id||'') !== '') {
+      getDataAssetLocationThenGetTreeData();
+    } else {
+      getAllDirectoryAsTree(true);
+    } 
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [did])
+  }, [timestamp])
+
+  const getDataAssetLocationThenGetTreeData = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getDataAssetLocation',
+      payload: {
+        dataAssetId: id
+      },
+      callback: data => {
+        getAllDirectoryAsTree(true, data.dirId||'');
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
 
   const getAllDirectoryAsTree = (resetCurrentDirId=true, defaultSelectedId='') => {
     setLoading(true);
@@ -365,7 +386,6 @@ const AssetTree = (props) => {
       bodyStyle={{ padding:10 }}
       headStyle={{ padding:10 }}
       style={{ width: '100%' }} 
-      {...restProps}
     >
       <Spin spinning={loading}>
         <Input  

src/view/Manage/Model/Component/ModelTree.jsx

@@ -31,14 +31,14 @@ const ModelTree = (props) => {
 
   useEffect(() => {
     if ((id||'') !== '') {
-      getDataModelLocation();
+      getDataModelLocationThenGetTreeData();
     } else {
       getTreeData();
     }  
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timestamp])
 
-  const getDataModelLocation = () => {
+  const getDataModelLocationThenGetTreeData = () => {
     setLoading(true);
     dispatch({
       type: 'datamodel.getDataModelLocation',