add report page

front/project/www/app.less

@@ -130,6 +130,10 @@
   margin-bottom: 20px;
 }
 
+.m-b-4 {
+  margin-bottom: 40px;
+}
+
 .p-l-5 {
   padding-left: 5px;
 }

front/project/www/components/Panel/index.js

@@ -2,11 +2,35 @@ import React from 'react';
 import { Tooltip } from 'antd';
 import './index.less';
 import Assets from '@src/components/Assets';
+import PieChart from '@src/components/PieChart';
 import { formatDate } from '@src/services/Tools';
 import Module from '../Module';
 import ProgressButton from '../ProgressButton';
 import Button from '../Button';
 
+function makePie(value) {
+  return {
+    title: {
+      text: '30%',
+      textAlign: 'center',
+      textVerticalAlign: 'middle',
+      subtext: '全站 60%',
+      top: '28%',
+      left: '48%',
+    },
+    color: [value < 50 ? '#f19057' : '#6966fb', '#f7f7f7'],
+    series: [
+      {
+        type: 'pie',
+        radius: ['90%', '100%'],
+        label: {
+          show: false,
+        },
+        data: [value, 100 - value],
+      },
+    ],
+  };
+}
 export default function Panel(props) {
   const { style, message, data = {}, col = 3, title, onClick } = props;
   return (
@@ -21,7 +45,7 @@ export default function Panel(props) {
       </div>
       <div className="body">
         <div className="chart-info">
-          <div className="chart" />
+          <PieChart option={makePie(23)} width={110} height={110} />
           <div className="info">
             {(data.info || []).map(row => {
               return (
@@ -155,7 +179,7 @@ export function SmallPanel(props) {
       </div>
       <div className="body" onClick={() => onClick && onClick()}>
         <div className="chart-info">
-          <div className="chart" />
+          <PieChart option={makePie(33)} width={110} height={110} />
           <div className="info">
             {(data.info || []).map(row => {
               return (
@@ -177,7 +201,7 @@ export function SmallPanel(props) {
 }
 
 export function SmallWaitPanel(props) {
-  const { style, title, lock, data, onOpen } = props;
+  const { style, title, lock, data = {}, onOpen } = props;
   const { endTime } = data;
   return (
     <Module style={style} className="panel small-wait-panel">

front/project/www/components/Panel/index.less

@@ -31,9 +31,9 @@
       height: 110px;
       margin-bottom: 24px;
 
-      .chart {
-        height: 110px;
+      .pie-chart {
         width: 110px;
+        height: 110px;
         margin-right: 22px;
         display: inline-block;
       }
@@ -111,6 +111,7 @@
     position: relative;
 
     .chart-info {
+
       .info {
         padding-top: 0;
 

front/project/www/components/Tabs/index.less

@@ -222,4 +222,21 @@
     color: #fff;
     background: @theme_color;
   }
+}
+
+.tabs.division.gray {
+  .tab {
+    color: #A7A7B7;
+    background: #ECEDEE;
+  }
+
+  .tab::after {
+    display: none;
+  }
+
+  .tab:hover,
+  .tab.active {
+    color: #fff;
+    background: #989FC1;
+  }
 }

front/project/www/routes/paper/report/index.less

@@ -1,3 +1,217 @@
 @charset "utf-8";
 
-#paper-report {}
+#paper-report {
+
+  .header {
+    background: #F7F8FC;
+    padding: 30px 0;
+
+    .title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #303036;
+    }
+
+    .btns {
+      .button {
+        margin-right: 10px;
+      }
+    }
+
+    .right {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      text-align: right;
+
+      .text {
+        color: #303036;
+        font-size: 18px;
+        font-weight: bold;
+      }
+
+      .desc {
+        color: #686872;
+      }
+    }
+  }
+
+  .body {
+    padding: 70px 0;
+
+    .title {
+      line-height: 32px;
+      font-size: 32px;
+      padding-left: 10px;
+      color: #303036;
+      margin-bottom: 40px;
+    }
+  }
+
+  .body.gray {
+    background: #F7F8FC;
+  }
+
+  .content {
+    width: 1200px;
+    position: relative;
+
+    .block-wrapper {
+      display: flex;
+
+      .block {
+        flex: 1;
+      }
+
+      .block-1-5 {
+        flex: 1.5;
+      }
+    }
+  }
+
+  .detail {
+    text-align: center;
+    padding-top: 10px;
+    margin-left: -1px;
+
+    .block {
+      display: inline-block;
+      width: 300px;
+      text-align: center;
+
+      .t1 {
+        color: #686872;
+        font-size: 24px;
+      }
+
+      .t2 {
+        font-size: 56px;
+        font-weight: 600;
+        display: inline;
+        color: #4299FF;
+      }
+
+      .t3 {
+        color: #303036;
+        font-size: 20px;
+        display: inline;
+      }
+    }
+
+    .line {
+      height: 100px;
+      width: 1px;
+      background: #E3E5E9;
+      display: inline-block;
+    }
+  }
+
+  .detail-1 {
+    margin-bottom: 20px;
+
+    .block {
+      display: inline-block;
+      width: 160px;
+
+      .t1 {
+        color: #686872;
+        font-size: 24px;
+        font-weight: 600;
+      }
+
+      .t2 {
+        font-size: 30px;
+        display: inline;
+        color: #4299FF;
+      }
+
+      .t3 {
+        color: #303036;
+        font-size: 30px;
+        display: inline;
+      }
+    }
+
+    .block.all {
+      .t2 {
+        font-size: 30px;
+        display: inline;
+        color: #6865FD;
+      }
+    }
+  }
+
+  .tip {
+    margin-bottom: 30px;
+
+    .t1 {
+      color: #303036;
+      display: inline;
+      font-size: 16px;
+    }
+
+    .t2 {
+      font-size: 32px;
+      color: #4299FF;
+      display: inline;
+    }
+
+    i {
+      font-size: 20px;
+      color: #D0D8E2;
+    }
+  }
+}
+
+.exercise,
+.sentence {
+  border-top: 20px solid #7775CA;
+  background: #fff;
+
+  .body {
+    .title {
+      border-left: 10px solid #7775CA;
+    }
+  }
+}
+
+.examination {
+  border-top: 20px solid #8D909C;
+  background: #fff;
+
+  .body {
+    .title {
+      border-left: 10px solid #989FC1;
+    }
+
+    .tabs {
+      transform: translateY(-30px);
+      margin-bottom: 10px;
+    }
+
+    table {
+      width: 100%;
+      color: #686872;
+      font-size: 16px;
+      line-height: 20px;
+
+      th {
+        background: #ECEDEE;
+        padding: 30px 20px;
+        font-weight: 500;
+        border: 1px solid #fff;
+      }
+
+      td {
+        background: #fff;
+        padding: 40px 20px;
+        border: 1px solid #fff;
+
+        span {
+          color: #A7A7B7;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}

front/src/components/BarChart/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import './index.less';
 import echarts from 'echarts/lib/echarts';
 import ReactEchartsCore from 'echarts-for-react/lib/core';
-import 'echarts/lib/chart/pie';
+import 'echarts/lib/chart/bar';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 import 'echarts/lib/component/legend';
 
 function BarChart(props) {
-  const { className = '', theme = 'shine', option = {}, data = [] } = props;
+  const { className = '', theme = 'shine', option = {}, data = [], width, height } = props;
   let defaultOption = {
     series: [
       {
@@ -28,9 +28,20 @@ function BarChart(props) {
   } else {
     defaultOption = option;
   }
+  const style = {};
+  if (width) style.width = width;
+  if (height) style.height = height;
   return (
     <div className={`bar-chart ${className}`}>
-      <ReactEchartsCore echarts={echarts} option={defaultOption} notMerge lazyUpdate theme={theme} />
+      <ReactEchartsCore
+        echarts={echarts}
+        option={defaultOption}
+        style={style}
+        opts={style}
+        notMerge
+        lazyUpdate
+        theme={theme}
+      />
     </div>
   );
 }

front/src/components/LineChart/index.js

@@ -8,7 +8,7 @@ import 'echarts/lib/component/title';
 import 'echarts/lib/component/legend';
 
 function LineChart(props) {
-  const { className = '', theme = 'shine', option = {}, data = [] } = props;
+  const { className = '', theme = 'shine', option = {}, data = [], width, height } = props;
 
   let defaultOption = {
     series: [
@@ -30,9 +30,20 @@ function LineChart(props) {
   } else {
     defaultOption = option;
   }
+  const style = {};
+  if (width) style.width = width;
+  if (height) style.height = height;
   return (
     <div className={`line-chart ${className}`}>
-      <ReactEchartsCore echarts={echarts} option={defaultOption} notMerge lazyUpdate theme={theme} />
+      <ReactEchartsCore
+        echarts={echarts}
+        option={defaultOption}
+        style={style}
+        opts={style}
+        notMerge
+        lazyUpdate
+        theme={theme}
+      />
     </div>
   );
 }

front/src/components/PieChart/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import './index.less';
 import echarts from 'echarts/lib/echarts';
 import ReactEchartsCore from 'echarts-for-react/lib/core';
-import 'echarts/lib/chart/bar';
+import 'echarts/lib/chart/pie';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 import 'echarts/lib/component/legend';
 
 function PieChart(props) {
-  const { className = '', theme = 'shine', option = {}, data = [] } = props;
+  const { className = '', theme = 'shine', option = {}, data = [], width, height } = props;
   let defaultOption = {
     series: [
       {
@@ -28,9 +28,20 @@ function PieChart(props) {
   } else {
     defaultOption = option;
   }
+  const style = {};
+  if (width) style.width = width;
+  if (height) style.height = height;
   return (
     <div className={`pie-chart ${className}`}>
-      <ReactEchartsCore echarts={echarts} option={defaultOption} notMerge lazyUpdate theme={theme} />
+      <ReactEchartsCore
+        echarts={echarts}
+        option={defaultOption}
+        style={style}
+        opts={style}
+        notMerge
+        lazyUpdate
+        theme={theme}
+      />
     </div>
   );
 }