资产运营

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 ResizeObserver from 'rc-resize-observer'
+import { Row, Col, Card, Space, Divider, Badge, Select, DatePicker } from 'antd'
 
 import Table from '../../../util/Component/Table'
 import { dispatch } from '../../../model'
@@ -53,48 +54,111 @@ export const Header = ({ title }) => (
 )
 
 const Summary = ({ data }) => {
+  const [contentWidth, setContentWidth] = React.useState()
+
+  const colWidth = React.useMemo(() => {
+    const len = (data??[]).length
+
+    if (contentWidth && len>0) {
+      const len = (data??[]).length
+      return (contentWidth - (len-1)*10)/len
+    }
+
+    return 0
+  }, [contentWidth, data])
+
   return (
-    <Card>
+    <Card size='small'>
       <Header title='资产数据概览' />
-      <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>
+      <ResizeObserver
+        onResize={({ width }) => {
+          setContentWidth(width)
+        }}
+      >
+        <div className='flex' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          {
+            data?.map((item, index) => {
+              return (
+                <div key={index} style={{ width: colWidth }}>
+                  <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>
+                </div>
+              );
+            })
+          }  
+        </div>
+      </ResizeObserver>
     </Card>
   )
 }
 
 const ResourceStatistic = () => {
+  const mockOptions = [
+    '按资源状态',
+  ]
   return (
-    <Card>
+    <Card size='small'>
       <Header title='数据资源统计' />
+      <div className='flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <Select 
+          onChange={(value) => {
+
+          }}
+          style={{ width: 140 }}
+        >
+          {
+            (mockOptions??[]).map((item, index) => <Select.Option key={index} value={item}>{item}</Select.Option>)
+          }
+        </Select>
+        <DatePicker.RangePicker 
+          format="YYYY-MM-DD" 
+          onChange={(values) => {
+            // setArgsAndPage({ startTime: (values??[]).length>0?values[0].valueOf():'', endTime: (values??[]).length>1?values[1].valueOf():'' })
+          }}
+          style={{ width: 240 }}
+        />
+      </div>
       <StackedLine />
     </Card>
   )
 }
 
 const AssetStatistic = () => {
+  const mockOptions = [
+    '按资源状态',
+  ]
   return (
-    <Card>
+    <Card size='small'>
       <Header title='数据资产统计' />
+      <div className='flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <Select 
+          onChange={(value) => {
+
+          }}
+          style={{ width: 140 }}
+        >
+          {
+            (mockOptions??[]).map((item, index) => <Select.Option key={index} value={item}>{item}</Select.Option>)
+          }
+        </Select>
+        <DatePicker.RangePicker 
+          format="YYYY-MM-DD" 
+          onChange={(values) => {
+            // setArgsAndPage({ startTime: (values??[]).length>0?values[0].valueOf():'', endTime: (values??[]).length>1?values[1].valueOf():'' })
+          }}
+          style={{ width: 240 }}
+        />
+      </div>
       <StackedLine />
     </Card>
   )
@@ -154,7 +218,7 @@ const AssetBrowseRank = () => {
   }
 
   return (
-    <Card>
+    <Card size='small'>
       <Header title='资产浏览排行榜' />
       <Table
         loading={loading}
@@ -221,7 +285,7 @@ const AssetNewest = () => {
   }
 
   return (
-    <Card>
+    <Card size='small'>
       <Header title='最新发布资产' />
       <Table
         loading={loading}