模型统计

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

@@ -19,6 +19,14 @@ import produce from "immer";
 
 const { Paragraph, Text } = Typography;
 
+export const stateColorDic = {
+  草稿: '#DE7777',
+  评审中: '#779BDE',
+  评审通过: '#7CDEBF',
+  已上线: '#4C7813',
+  已下线: '#AAAAAA',
+}
+
 const ModelNameColumn = (props) => {
   const { text, record, detailItem } = props;
   const [ data, setData ] = useState(record);
@@ -235,18 +243,9 @@ const ModelTable = (props) => {
       sortable: true, 
       resizable: true,
       formatter(props) {
-        let color = '';
-        if (props.row.state?.id === '1') {
-          color = '#DE7777';
-        } else if (props.row.state?.id === '2') {
-          color = '#779BDE';
-        } else if (props.row.state?.id === '4') {
-          color = '#77DEBF';
-        }
-
         return (
           <span>
-            <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 5, marginRight: 5, backgroundColor: color  }}></span>
+            <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 5, marginRight: 5, backgroundColor: stateColorDic[props.row.state?.cnName]??'#77DEBF' }}></span>
             <span>{props.row.state?.cnName||''}</span>
           </span>
         );
@@ -701,23 +700,9 @@ const ModelTable = (props) => {
 
   return (
     <div>
-      <div className='flex' style={{ height: 20, alignItems: 'center', marginBottom: 12 }}>
-        <Paragraph style={{ overflow: 'hidden' }}>
-          <Text className='title-color'  ellipsis={true}>
-            总数：
-            <Text className='text-color'>{(tableData||[]).length}</Text>
-          </Text>
-        </Paragraph>
-        <Paragraph style={{ overflow: 'hidden', marginLeft: 20 }}>
-          <Text className='title-color'  ellipsis={true}>
-            已选数：
-            <Text className='text-color'>{summarySelectedCount}</Text>
-          </Text>
-        </Paragraph>
-      </div>
       <DataGrid 
         gridRef={gridRef}
-        style={{ blockSize: 'calc(100vh - 94px - 37px - 57px - 24px - 32px)' }}
+        style={{ blockSize: 'calc(100vh - 121px - 152px )' }}
         checkable
         columns={columns}
         // rows={Array.from({ length: 10000 }).map((_, i) => ({

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

@@ -40,7 +40,7 @@ const ModelTree = (props) => {
     id: MENU_ID,
   });
 
-  const { onSelect, onViewChange, refrence='', importStockModel, keyword, searchProperties, setRootNode, onDirRefresh } = props;
+  const { onSelect, onViewChange, refrence='', importStockModel, keyword, searchProperties, setRootNode, setNode, onDirRefresh } = props;
 
   const { user } = useContext(AppContext);
   const [ loading, setLoading ] = useState(false);
@@ -117,6 +117,10 @@ const ModelTree = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ keyword, searchProperties, viewSelectedKey, item, prevItem])
 
+  useEffect(() => {
+    setNode?.(item)
+  }, [item])
+
   const haveStockImportPermission = useMemo(() => {
     return (item?.optionList||[]).findIndex(option => option.name==='存量模型导入'&&option.enabled) !== -1
   }, [item])

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

+import React from 'react'
+import { Descriptions, Row, Col, Typography, Tooltip, Space } from 'antd'
+
+import { stateColorDic } from './ModelTable'
+
+const FC = (props) => {
+  const { data, node } = props
+
+  const [deployedCount, deployWaitingCount, releaseWaitingCount, offlineCount] = React.useMemo(() => {
+    return [
+      (data??[]).filter(item => item.state?.cnName === '已上线').length,
+      (data??[]).filter(item => item.state?.cnName === '评审通过').length,
+      (data??[]).filter(item => item.state?.cnName === '评审中').length,
+      (data??[]).filter(item => item.state?.cnName === '已下线').length,
+    ]
+  }, [data])
+
+  return (
+    <div style={{ height: 80, padding: '10px 20px' }}>
+      <Row gutter={10}>
+        <Col flex='1' style={{ overflow: 'hidden' }}>
+          <Tooltip title={node?.title}>
+            <Typography.Text ellipsis={true} style={{ fontWeight: 500, fontSize: 16 }}>
+              {node?.title}
+            </Typography.Text>
+          </Tooltip>
+        </Col>
+        <Col flex='0 0 auto'>
+          <Space size={50}>
+            <StateItem title='已上线' count={deployedCount} />
+            <StateItem title='评审通过' count={deployWaitingCount} />
+            <StateItem title='评审中' count={releaseWaitingCount} />
+            <StateItem title='已下线' count={offlineCount} />
+          </Space>
+        </Col>
+      </Row>
+      <div style={{ marginTop: 10 }}>
+        <Tooltip title={node?.remark}>
+          <Typography.Text ellipsis={true}>
+            {node?.remark}
+          </Typography.Text>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default FC
+
+const StateItem = ({ title, count }) => {
+  return (
+    <Space size={10}>
+      <div style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: stateColorDic[title]??'#77DEBF'  }}></div>
+      <span>{title}</span>
+      <span style={{ color: stateColorDic[title]??'#77DEBF' }}>{count}</span>
+    </Space>
+  )
+}
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -27,6 +27,7 @@ import StartFlow from './Component/start-flow'
 import MergeToMaster from './Component/merge-to-master';
 import AuthTransfer from './Component/auth-transfer';
 import AuthShare from './Component/auth-share';
+import Header from './Component/header';
 
 import './index.less';
 
@@ -81,6 +82,7 @@ class Model extends React.Component {
       },
       batchAddTagChange: false,
       rootNode: undefined,
+      node: undefined,
       branchAddParams: {
         visible: false,
       },
@@ -773,6 +775,9 @@ class Model extends React.Component {
             setRootNode={(val) => {
               this.setState({ rootNode: val })
             }} 
+            setNode={(val) => {
+              this.setState({ node: val })
+            }}
             onDirRefresh={() => {
               //刷新目录时,重新获取目录权限
               this.getPermissions()
@@ -785,10 +790,12 @@ class Model extends React.Component {
           </div>
         </div>
         <div className='right'>
+          <Header node={this.state.node} data={filterTableData} />
+          <div style={{ height: 10, background: '#f0f2f5' }} />
           <div
-            className='d-flex p-3'
+            className='flex'
             style={{
-              borderBottom: '1px solid #EFEFEF',
+              padding: '10px 20px',
               justifyContent: 'space-between',
               alignItems: 'center'
             }}
@@ -932,32 +939,32 @@ class Model extends React.Component {
             </Space>
 
           </div>
-          <div className='p-3'>
-          <Spin spinning={loadingTableData}>
-            <ModelTable 
-              loading={loadingTableData}
-              user={value?.user} 
-              catalogId={catalogId} 
-              view={currentView}
-              data={filterTableData} 
-              tagSelectOptions={this.state.tagSelectOptions}
-              batchAddTagChange={this.state.batchAddTagChange}
-              modelState={currentModelState}
-              offset={offset}
-              keyword={keyword}
-              selectModelerIds={selectModelerIds}
-              visibleColNames={visibleColNames}
-              onChange={this.onTableChange} 
-              onSelect={this.onTableSelect} 
-              onItemAction={this.onTableItemAction} 
-              onAutoCreateTable={this.onAutoCreateTable}
-              onHistory={this.onHistory}
-              onAuthTransfer={this.onAuthTransfer}
-              onAuthShare={this.onAuthShare}
-              onMerge={this.onMerge}
-              onSyncSuccess={this.onSyncSuccess}
-              {...this.props} />
-          </Spin> 
+          <div style={{ padding: '0 20px' }}>
+            <Spin spinning={loadingTableData}>
+              <ModelTable 
+                loading={loadingTableData}
+                user={value?.user} 
+                catalogId={catalogId} 
+                view={currentView}
+                data={filterTableData} 
+                tagSelectOptions={this.state.tagSelectOptions}
+                batchAddTagChange={this.state.batchAddTagChange}
+                modelState={currentModelState}
+                offset={offset}
+                keyword={keyword}
+                selectModelerIds={selectModelerIds}
+                visibleColNames={visibleColNames}
+                onChange={this.onTableChange} 
+                onSelect={this.onTableSelect} 
+                onItemAction={this.onTableItemAction} 
+                onAutoCreateTable={this.onAutoCreateTable}
+                onHistory={this.onHistory}
+                onAuthTransfer={this.onAuthTransfer}
+                onAuthShare={this.onAuthShare}
+                onMerge={this.onMerge}
+                onSyncSuccess={this.onSyncSuccess}
+                {...this.props} />
+            </Spin> 
           </div>
         </div>
 

src/view/Manage/Model/index.less

@@ -12,8 +12,9 @@
 
   .tree-toggle-wrap {
     position: relative;
-    width: 20px;
+    width: 15px;
     height: 100%;
+    background: #f0f2f5;
   
     .tree-toggle {
       display: flex;