资产运营

src/App.js

@@ -21,6 +21,7 @@ const AssetResourceBrowse = loadable(()=> import('./view/Manage/AssetResourceBro
 const AssetBrowse = loadable(()=> import('./view/Manage/AssetBrowse'));
 const TaskManage = loadable(()=> import('./view/Manage/AssetTask'));
 const AssetRecycle = loadable(()=> import('./view/Manage/AssetRecycle'));
+const AssetOperation = loadable(()=> import('./view/Manage/AssetOperation')); 
 const DatasourceManage = loadable(()=> import('./view/Manage/DatasourceManage'));
 const AssetDetailPage = loadable(()=> import('./view/Manage/AssetManage/Component/AssetDetailPage'));
 const AssetDetail = loadable(()=> import('./view/Manage/AssetManage/Component/AssetDetail'));
@@ -161,6 +162,7 @@ export class App extends React.Component {
             <Route path={'/center-home/menu/asset-browse'} component={AssetBrowse} exact />
             <Route path={'/center-home/menu/task-manage'} component={TaskManage} exact /> 
             <Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact /> 
+            <Route path={'/center-home/menu/asset-operation'} component={AssetOperation} exact />  
             <Route path={'/center-home/menu/msd-define'} component={DataMasterDefine} exact /> 
             <Route path={'/center-home/menu/msd-manage'} component={DataMasterManage} exact /> 
             <Route path={'/center-home/menu/metadata-harvester'} component={MetadataHarvester} exact />

src/routes.js

@@ -48,6 +48,10 @@ export const routes = [
         text: '未挂载资产',
       },
       {
+        name: 'asset-operation',
+        text: '资产运营',
+      },
+      {
         name: 'msd-define',
         text: '主数据定义'
       },

src/view/Manage/AssetOperation/index.jsx

+import React from 'react'
+import * as echarts from 'echarts'
+import { Row, Col, Card, Space, Divider, Badge } from 'antd'
+
+import Table from '../../../util/Component/Table'
+import { dispatch } from '../../../model'
+
+import './index.less'
+
+const mockStatisticInfo = [
+  { title: '内部资源', value: 12112 },
+  { title: '外部资源', value: 5609 },
+  { title: '已发布资产', value: 7174 },
+  { title: '未发布资产', value: 1309 },
+  { title: '梳理任务', value: 122 },
+]
+
+const FC = (props) => {
+  return (
+    <div className='asset-operation p-3'>
+      <Header title='资产数据概览' />
+      <Summary data={mockStatisticInfo} />
+      <div className='my-3'>
+        <Row gutter={10}>
+          <Col span={12}>
+            <ResourceStatistic />
+          </Col>
+          <Col span={12}>
+            <AssetStatistic />
+          </Col>
+        </Row>
+      </div>
+      <div className='my-3'>
+        <Row gutter={10}>
+          <Col span={12}>
+            <AssetBrowseRank />
+          </Col>
+          <Col span={12}>
+            <AssetNewest />
+          </Col>
+        </Row>
+      </div>
+    </div>
+  )
+}
+
+export default FC
+
+export const Header = ({ title }) => (
+  <Space size='small' align='center'>
+    <Divider style={{ width: 2, height: 15, backgroundColor: '#196AD2', margin: '15px 0' }} />
+    <span style={{ fontWeight: 500, fontSize: 16 }}>{title}</span>
+  </Space>
+)
+
+const Summary = ({ data }) => {
+  return (
+    <Row gutter={10} >
+      {
+        data?.map((item, index) => {
+          return (
+            <Col key={index} span={4}>
+              <Card>
+                <div 
+                  className='flex' 
+                  style={{ 
+                    justifyContent: 'space-between', 
+                    alignItems: 'center' 
+                  }}
+                >
+                  <span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>{item.title}</span>
+                  <span style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: 24 }}>{item.value||0}</span>
+                </div>
+              </Card>
+            </Col>
+          );
+        })
+      }  
+    </Row>
+  )
+}
+
+const ResourceStatistic = () => {
+  return (
+    <Card>
+      <Header title='数据资源统计' />
+      <StackedLine />
+    </Card>
+  )
+}
+
+const AssetStatistic = () => {
+  return (
+    <Card>
+      <Header title='数据资产统计' />
+      <StackedLine />
+    </Card>
+  )
+}
+
+const AssetBrowseRank = () => {
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const cols = [
+    {
+      title: '名次',
+      dataIndex: 'index',
+      render: (_, __, index) => {
+        let color = '#c7000b'
+        if (index === 0) {
+          color = '#FD6161'
+        } else if (index === 1){
+          color = '#F0864F'
+        } else if (index === 2){
+          color = '#F9C22E'
+        }
+
+        return (
+          <Badge style={{ marginBottom: 2, backgroundColor: color }} count={index+1} />
+        )
+      }
+    },
+    {
+      title: '英文名',
+      dataIndex: 'name',
+      ellipsis: true,
+    },
+    {
+      title: '中文名',
+      dataIndex: 'cnName',
+      ellipsis: true,
+    },
+    {
+      title: '浏览次数',
+      dataIndex: 'count',
+      ellipsis: true,
+    },
+  ]
+
+  React.useEffect(() => {
+    getRanks()
+  }, [])
+
+  const getRanks = () => {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setData(Array.from({ length: 10 }).map((_, i) => ({
+
+      })))
+    }, 1000)
+  }
+
+  return (
+    <Card>
+      <Header title='资产浏览排行榜' />
+      <Table
+        loading={loading}
+        size='small'
+        columns={cols}
+        dataSource={data}
+        pagination={false}
+      />
+    </Card>
+  )
+}
+
+const AssetNewest = () => {
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const cols = [
+    {
+      title: '名次',
+      dataIndex: 'index',
+      render: (_, __, index) => {
+        let color = '#c7000b'
+        if (index === 0) {
+          color = '#FD6161'
+        } else if (index === 1){
+          color = '#F0864F'
+        } else if (index === 2){
+          color = '#F9C22E'
+        }
+
+        return (
+          <Badge style={{ marginBottom: 2, backgroundColor: color }} count={index+1} />
+        )
+      }
+    },
+    {
+      title: '英文名',
+      dataIndex: 'name',
+      ellipsis: true,
+    },
+    {
+      title: '中文名',
+      dataIndex: 'cnName',
+      ellipsis: true,
+    },
+    {
+      title: '发布时间',
+      dataIndex: 'time',
+      ellipsis: true,
+    },
+  ]
+
+  React.useEffect(() => {
+    getRanks()
+  }, [])
+
+  const getRanks = () => {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setData(Array.from({ length: 10 }).map((_, i) => ({
+
+      })))
+    }, 1000)
+  }
+
+  return (
+    <Card>
+      <Header title='最新发布资产' />
+      <Table
+        loading={loading}
+        size='small'
+        columns={cols}
+        dataSource={data}
+        pagination={false}
+      />
+    </Card>
+  )
+}
+
+const StackedLine = ({ data }) => {
+  const ref = React.useRef()
+  const echartsRef = React.useRef()
+
+  React.useEffect(() => {
+    echartsRef.current = echarts.init(ref.current)
+  }, [])
+
+  React.useEffect(() => {
+    setOption()
+  }, [data])
+
+  const setOption = () => {
+    let option = {
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        bottom: 0,
+        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        top: '3%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          name: 'Email',
+          type: 'line',
+          stack: 'Total',
+          data: [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+          name: 'Union Ads',
+          type: 'line',
+          stack: 'Total',
+          data: [220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+          name: 'Video Ads',
+          type: 'line',
+          stack: 'Total',
+          data: [150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+          name: 'Direct',
+          type: 'line',
+          stack: 'Total',
+          data: [320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+          name: 'Search Engine',
+          type: 'line',
+          stack: 'Total',
+          data: [820, 932, 901, 934, 1290, 1330, 1320]
+        }
+      ]
+    }
+    echartsRef.current?.setOption(option)
+  }
+
+  return (
+    <div ref={ref} style={{ width: '100%', height: '300px' }}/>
+  )
+}
\ No newline at end of file

src/view/Manage/AssetOperation/index.less

+.asset-operation {
+  height: 100%;
+  background-color: white;
+  overflow: auto;
+}
\ No newline at end of file

src/view/Manage/index.jsx

@@ -13,6 +13,7 @@ import AssetManage from './AssetManage';
 import AssetResourceBrowse from './AssetResourceBrowse';
 import AssetBrowse from './AssetBrowse';
 import AssetRecycle from './AssetRecycle';
+import AssetOperation from './AssetOperation';
 import TaskManage from './AssetTask';
 import DataMasterDefine from "./DataMaster/Define";
 import DataMasterManage from "./DataMaster/Manage";
@@ -40,6 +41,7 @@ class Manage extends Component {
                 <Route path={`${match.path}/asset-browse`} component={AssetBrowse} />
                 <Route path={`${match.path}/task-manage`} component={TaskManage} />
                 <Route path={`${match.path}/asset-recycle`} component={AssetRecycle} />
+                <Route path={`${match.path}/asset-operation`} component={AssetOperation} />
                 <Route path={`${match.path}/msd-define`} component={DataMasterDefine} />
                 <Route path={`${match.path}/msd-manage`} component={DataMasterManage} />
                 <Route path={`${match.path}/metadata-harvester`} component={MetadataHarvester} />