add static

5 years ago · 0e7ad92b35
parent a1e2ac94a4
commit 0e7ad92b35
6 changed files with 316 additions and 3 deletions
--- a/public/react/package.json
+++ b/public/react/package.json
@ -71,6 +71,7 @@
    "rc-tree": "^1.7.11",
    "rc-upload": "^2.5.1",
    "react": "^16.9.0",
+    "react-base-table": "^1.9.1",
    "react-beautiful-dnd": "^10.0.4",
    "react-codemirror": "^1.0.0",
    "react-codemirror2": "^6.0.0",
--- a/public/react/src/modules/paths/Index.js
+++ b/public/react/src/modules/paths/Index.js
@ -17,10 +17,14 @@ const PathsNew = Loadable({
    loader: () => import('./PathNew'),
    loading:Loading,
 })
+// const Statistics = Loadable({
+//     loader: () => import('./SchoolStatistics/Statistics'),
+//     loading:Loading
+// })
 const Statistics = Loadable({
-    loader: () => import('./SchoolStatistics/Statistics'),
-    loading:Loading
-})
+    loader: () => import('./statics'),
+    loading: Loading
+});

 const ShixunPaths = Loadable({
    loader: () => import('./ShixunPaths'),
--- a/public/react/src/modules/paths/statics/DisplayTableData.js
+++ b/public/react/src/modules/paths/statics/DisplayTableData.js
@ -0,0 +1,26 @@
+/*
+ * @Description: 展示表格数据
+ * @Author: tangjiang
+ * @Github: 
+ * @Date: 2020-01-10 13:46:30
+ * @LastEditors  : tangjiang
+ * @LastEditTime : 2020-01-10 13:48:54
+ */
+import React from 'react';
+// import { Table } from 'antd';
+
+const DisplayTableData = ({
+  columns,
+  datas
+}) => {
+
+  return (
+    <Table
+      pagination={false}
+      dataSource={datas}
+      columns={columns} 
+    />
+  );
+}
+
+export default DisplayTableData;
--- a/public/react/src/modules/paths/statics/StaticNumberAndTxt.js
+++ b/public/react/src/modules/paths/statics/StaticNumberAndTxt.js
@ -0,0 +1,43 @@
+/*
+ * @Description: 数字及文字提示
+ * @Author: tangjiang
+ * @Github: 
+ * @Date: 2020-01-10 10:26:57
+ * @LastEditors  : tangjiang
+ * @LastEditTime : 2020-01-10 11:15:28
+ */
+import './index.scss';
+import React from 'react';
+import { Tooltip } from 'antd';
+const numberal = require('numeral');
+
+const StaticNumberAndTxt = ({
+  count = 0, // 总数
+  txt, // 文字描述
+  type = 'tishi1', // 字体类型
+  desc // 描述信息
+}) => {
+
+  const formatNumber = (value, format = '0,0') => {
+    return numberal(value).format(format);
+  }
+
+  const _classes = `iconfont icon-${type} icon`;
+  return (
+    <div className="static-flex-item">
+      <span className="item-count">{formatNumber(count)}</span>
+      <span className="item-txt">
+        {txt}
+        <Tooltip
+          placement='bottom' 
+          title={desc}
+          overlayClassName='tool-clazz'
+        >
+          <span className={_classes}></span>
+        </Tooltip>
+      </span>
+    </div>
+  );
+}
+
+export default StaticNumberAndTxt;
--- a/public/react/src/modules/paths/statics/index.js
+++ b/public/react/src/modules/paths/statics/index.js
@ -0,0 +1,147 @@
+/*
+ * @Description: 实践课程统计页面
+ * @Author: tangjiang
+ * @Github: 
+ * @Date: 2020-01-10 09:33:45
+ * @LastEditors  : tangjiang
+ * @LastEditTime : 2020-01-10 13:45:26
+ */
+import './index.scss';
+import React from 'react';
+import StaticNumberAndTxt from './StaticNumberAndTxt';
+import { Table, Tabs } from 'antd';
+const { TabPane } = Tabs;
+const App = () => {
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'id'
+    },
+    {
+      title: '使用单位',
+      dataIndex: 'id2'
+    },
+    {
+      title: '使用课堂/个',
+      dataIndex: 'id3'
+    },
+    {
+      title: '课堂实训/个',
+      dataIndex: 'id4'
+    },
+    {
+      title: '选用实训/个',
+      dataIndex: 'id5'
+    },
+    {
+      title: '选用实训/次',
+      dataIndex: 'id6'
+    }
+  ];
+
+  const datas = [
+    {
+      key: '1',
+      id: 1,
+      id2: '',
+      id3: '',
+      id4: '',
+      id5: '',
+      id6: ''
+    },
+    {
+      key: '1',
+      id: 1,
+      id2: '',
+      id3: '',
+      id4: '',
+      id5: '',
+      id6: ''
+    },
+    {
+      key: '1',
+      id: 1,
+      id2: '',
+      id3: '',
+      id4: '',
+      id5: '',
+      id6: ''
+    },
+    {
+      key: '1',
+      id: 1,
+      id2: '',
+      id3: '',
+      id4: '',
+      id5: '',
+      id6: ''
+    }
+  ];
+  return (
+    <div className="static_wrap">
+      <div className="ant-spin-container">
+        <div className="educontent">
+          <section className="static_section_header">
+            <div className="header_title">
+              <span className="title-p">学习统计</span>
+              <span className="title-sub">Android综合实训之物联网移动应用</span>
+            </div>
+            <div className="header-number header-flex">
+              <StaticNumberAndTxt
+                count={542678445} // 总数
+                txt={'学习总人数'} // 文字描述
+                desc={'学习该课程的全部人数（学习总人数=课堂学习人数+自主学习人数）'}
+              />
+              <StaticNumberAndTxt 
+                count={542678445} // 总数
+                txt={'课堂学习人数'} // 文字描述
+                desc={'通过课堂学习该课程的人数'}
+              />
+              <StaticNumberAndTxt 
+                count={542678445} // 总数
+                txt={'自主学习人数'} // 文字描述
+                desc={'通过自主学习该课程的人数'}
+              />
+              <StaticNumberAndTxt 
+                count={542678445} // 总数
+                txt={'通关总人数'} // 文字描述
+                desc={'通关该课程所有实训的人数（去重。一个人数计算1次）'}
+              />
+              <StaticNumberAndTxt 
+                count={542678445} // 总数
+                txt={'使用课堂数'} // 文字描述
+                desc={'使用该课程的课堂数量'}
+              />
+              <StaticNumberAndTxt 
+                count={542678445} // 总数
+                txt={'使用单位数'} // 文字描述
+                desc={'使用该课程的单位数量（包括自主学习者所在单位）'}
+              />
+            </div>
+          </section>
+          <section className="static_section_table">
+          <Tabs defaultActiveKey="1">
+            <TabPane tab="Tab 1" key="1">
+              Content of Tab Pane 1
+            </TabPane>
+            <TabPane tab="Tab 2" key="2">
+              Content of Tab Pane 2
+            </TabPane>
+            <TabPane tab="Tab 3" key="3">
+              Content of Tab Pane 3
+            </TabPane>
+          </Tabs>
+            <Table
+              pagination={false}
+              dataSource={datas}
+              columns={columns} 
+            />
+          </section> 
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
--- a/public/react/src/modules/paths/statics/index.scss
+++ b/public/react/src/modules/paths/statics/index.scss
@ -0,0 +1,92 @@
+.static_wrap {
+  .static_section_header,
+  .static_section_table{
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 30px 20px 0;
+    margin-top: 20px;
+  }
+
+  .static_section_header{
+    .header_title{
+      line-height: 1;
+      .title-p,
+      .title-sub{
+        display: inline-block;
+        vertical-align: bottom;
+        color: #303133;
+      }
+
+      .title-p{
+        position: relative;
+        font-size: 20px;
+        height: 20px;
+        line-height: 1;
+        font-weight: bold;
+
+        &::before{
+          position: absolute;
+          content: '';
+          border-left: 1px solid rgba(192,196,204,1);
+          right: -10px;
+          top: 2px;
+          bottom: 0px;
+          margin-left: 10px;
+        }
+      }
+      .title-sub{
+        margin-left: 20px;
+        font-size: 16px;
+        max-width: 1000px;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+        vertical-align: bottom;
+      }
+    }
+
+    .header-number{
+      height: 158px;
+    }
+    .header-flex{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .static-flex-item{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .item-count{
+          font-size: 24px;
+          color: #4CACFF;
+          font-weight: bold;
+        }
+        .item-txt{
+          font-size: 14px;
+          line-height: 1.5;
+          text-align: center;
+          color: #909399;
+          .icon{
+            margin-left: 5px;
+            font-size: 16px !important;
+          }
+        }
+      }
+    }
+  }
+  .static_section_table{
+    .ant-table-body th{
+      background: rgba(241,248,255,1);
+      color:#303133;
+      text-align: center;
+    }
+    .ant-table-body tr:nth-child(even){
+      background: rgba(241,248,255,.4);
+    }
+  }
+}
+
+.tool-clazz{
+  max-width: 200px !important;   
+}