fix

src/modules/task-center/data-center/Index.tsx

@@ -4,11 +4,36 @@ import { Tabs } from 'antd';
 import Service from '@/common/js/service';
 import Breadcrumbs from "@/components/Breadcrumbs";
 import DataInfo from './components/DataInfo'
+import CourseTable from './components/CourseTable';
+import ExamTable from './components/ExamTable';
+import StudyTable from './components/StudyTable';
 import './index.less'
+const { TabPane } = Tabs;
 
 function DataCenter(props: any) {
     const { match: { params: { planId } } } = props;
     const [info, setInfo] = useState<any>({})
+    const [tabKey,setTabKey] =useState<any>('')
+
+
+    const tabList = [
+        {
+            name: '课程目录',
+            key: 'course',
+            compoment: CourseTable,
+        },
+        {
+            name: '学习详情',
+            key: 'study',
+            compoment: StudyTable,
+        },
+        {
+            name: '考试详情',
+            key: 'exam',
+            compoment: ExamTable,
+        },
+
+    ]
 
     useEffect(() => {
         getInfo()
@@ -27,7 +52,22 @@ function DataCenter(props: any) {
                 props.history.goBack();
             }}
         />
+        <div className="content">
             <DataInfo info={info} />
+            <Tabs defaultActiveKey="1" onChange={() => { }}>
+                {
+                    tabList.map((item: any) => {
+                        return <TabPane tab={item.name} key={item.key}>
+                            {
+                                <item.compoment />
+                            }
+                        </TabPane>
+                    })
+                }
+
+            </Tabs>
+        </div>
+
     </div>
 }
 

src/modules/task-center/data-center/components/CourseTable.tsx

+import React, { useEffect, useState } from 'react';
+import { withRouter } from "react-router-dom";
+
+function CourseTable(props: any) {
+
+    return <div className="info_banner">
+
+    </div>
+}
+
+export default withRouter(CourseTable)
\ No newline at end of file

src/modules/task-center/data-center/components/DataInfo.tsx

 import React, { useEffect, useState } from 'react';
 import { withRouter } from "react-router-dom";
+import { Progress } from 'antd';
 import ENUM from '../../emun'
 const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
 
@@ -29,7 +30,16 @@ function DataInfo(props: any) {
 
 
         </div>
-        <div className="right"></div>
+        <div className="right">
+            <div className="prog">
+                <Progress type="circle" width={85} percent={75} strokeWidth={10} format={percent => <div className='wcl'>{`${percent}% `}  <div>完成率</div></div>} />
+            </div>
+            <div className="num">
+                <div className="item">{`指派人数：${12}`}</div>
+                <div className="item">{`学习人数：${12}`}</div>
+                <div className="item">{`完成人数：${12}`}</div>
+            </div>
+        </div>
     </div>
 }
 

src/modules/task-center/data-center/components/ExamTable.tsx

+import React, { useEffect, useState } from 'react';
+import { withRouter } from "react-router-dom";
+
+function CourseTable(props: any) {
+
+    return <div className="info_banner">
+
+    </div>
+}
+
+export default withRouter(CourseTable)
\ No newline at end of file

src/modules/task-center/data-center/components/StudyTable.tsx

+import React, { useEffect, useState } from 'react';
+import { withRouter } from "react-router-dom";
+
+function CourseTable(props: any) {
+
+    return <div className="info_banner">
+
+    </div>
+}
+
+export default withRouter(CourseTable)
\ No newline at end of file

src/modules/task-center/data-center/index.less

 .train-data-center{
+    .content{
+        margin: 0 16px;
+    }
     .infoBox{
         background: #FFFFFF;
         box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
@@ -6,7 +9,7 @@
         display: flex;
         height: 141px;
         justify-content: space-between;
-        margin: 0 16px 16px;
+        margin: 0 0px 16px;
         .left{
             display: flex;
             .banner{
@@ -42,18 +45,48 @@
                     }
                  }
                  .info{
+                     margin-bottom: 12px;
                      span,.item{
                         font-size: 14px;
                         font-family: PingFangSC-Regular, PingFang SC;
                         font-weight: 400;
                         color: #666666;
                         line-height: 20px;
+                        display: inline-block;
                      }
                   
                  }
                  
              }
         }
+        .right{
+            display: flex;
+            margin-right: 32px;
+            .prog{
+                width: 85px;
+                margin-top: 27px;
+                margin-right: 24px;
+                .wcl{
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #666666;
+                    line-height: 22px;
+                    text-align: center;
+                }
+            }
+            .num{
+                margin-top: 27px;
+                .item{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #666666;
+                    line-height: 20px;
+                    margin-bottom: 12px;
+                }
+            }
+        }
         
     }
 }
\ No newline at end of file