Merge branch 'feature/chenshu/graphics'

package.json

@@ -5,7 +5,7 @@
   "homepage": "./",
   "dependencies": {
     "@antv/data-set": "^0.11.8",
-    "@antv/g2": "^3.5.13",
+    "@antv/g2": "^3.5.17",
     "@babel/core": "7.9.0",
     "@babel/plugin-transform-typescript": "^7.11.0",
     "@babel/preset-typescript": "^7.10.4",
@@ -31,7 +31,7 @@
     "babel-plugin-jsx-control-statements": "^4.1.0",
     "babel-plugin-named-asset-import": "^0.3.6",
     "babel-preset-react-app": "^9.1.2",
-    "bizcharts": "^4.1.7",
+    "bizcharts": "^3.3.0",
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "classnames": "^2.2.6",

src/modules/course-manage/components/AddLiveBasic.jsx

 /*
  * @Author: 吴文洁 
  * @Date: 2020-07-15 17:29:12 
- * @Last Modified by: 吴文洁
- * @Last Modified time: 2020-07-15 18:16:05
+ * @Last Modified by: chenshu
+ * @Last Modified time: 2021-03-29 16:19:49
  * @Description: 新建/编辑直播课-基本信息
  */
 
@@ -241,7 +241,7 @@ class AddLiveBasic extends React.Component {
                 className={`default-btn ${isDefaultCover ? 'disabled' : ''}`}
                 onClick={this.handleResetCoverUrl}
               >使用默认图</span>
-              <div className="tips">建议尺寸1280*720像素，图片支持jpg、jpeg、png格式。</div>
+              <div className="tips">建议尺寸1280*720px，图片支持jpg、jpeg、png格式。</div>
             </div>
           </div>
         </div>

src/modules/course-manage/components/GraphicsEditor.jsx

@@ -156,7 +156,6 @@ class GraphicsEditor extends React.Component {
       const videoCount = ((html || '').match(/<iframe/g) || []).length;
       const imageCount = ((html || '').match(/<img/g) || []).length;
       const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length + videoCount + imageCount;
-      console.log(html, 777777)
       this.setState({ textLength }, () => {
         onChange(html, this.state.textLength);
       })

src/modules/course-manage/components/GraphicsEditor.less

@@ -17,13 +17,13 @@
   }
   .editor-box {
     height: 100%;
+    width: 100%;
   }
 
   .w-e-toolbar {
     background-color: #fff !important;
     border: none !important;
     border-bottom: 1px solid #E8E8E8 !important;
-    width: 700px;
   }
 
   .w-e-text-container {

src/modules/home/Home.jsx

 import React from 'react';
 import { Select, Tooltip } from 'antd';
-import { Chart } from '@antv/g2';
+import DataSet from "@antv/data-set";
+import { Chart as G2Chart } from '@antv/g2';
+import {
+  G2,
+  Chart,
+  Geom,
+  Axis,
+  Tooltip as G2Tooltip,
+  Coord,
+  Label,
+  Legend,
+  View,
+  Guide,
+  Shape,
+  Facet,
+  Util
+} from "bizcharts";
 import moment from 'moment'
 import Service from "@/common/js/service";
 import User from '@/common/js/user';
@@ -21,8 +37,11 @@ class Home extends React.Component {
       liveCourseNum: 0,
       totalCustomerNum: 0,
       videoCourseNum: 0,
+      pictureCourseNum: 0,
       timeRange: '7',
       studyTimeRange: '7',
+      completeNum: 0,
+      unfinishedNum: 0,
     }
     this._chart = null;
   }
@@ -31,6 +50,15 @@ class Home extends React.Component {
     this.getPanelInfo();
     this.getStudyInfo();
     this.getHotCourse();
+    this.getTrainingInfo();
+  }
+
+  getTrainingInfo() {
+    Service.Hades('public/hades/planOverview', { storeId: User.getStoreId() }).then((res) => {
+      if (res.success) {
+        this.setState(res.result)
+      }
+    });
   }
 
   getHotCourse() {
@@ -72,10 +100,12 @@ class Home extends React.Component {
           incLiveCourseNum: res.result.incLiveCourseNum,
           incVideoCourseNum: res.result.incVideoCourseNum,
           incPictureCourseNum: res.result.incPictureCourseNum,
+          incTrainingPlanNum: res.result.incTrainingPlanNum,
           liveCourseNum: res.result.liveCourseNum,
           totalCustomerNum: res.result.totalCustomerNum,
           videoCourseNum: res.result.videoCourseNum,
           pictureCourseNum: res.result.pictureCourseNum,
+          trainingPlanNum: res.result.trainingPlanNum,
         })
       }
     })
@@ -97,7 +127,7 @@ class Home extends React.Component {
   
   createChart = (data) => {
     if (!this._chart) {
-      this._chart = new Chart({
+      this._chart = new G2Chart({
         container: 'chart-id',
         forceFit: true,
         height: 290,
@@ -192,7 +222,39 @@ class Home extends React.Component {
       timeRange,
       scheduleType,
       studyTimeRange,
+      trainingPlanNum,
+      incTrainingPlanNum,
+      unfinishedNum,
+      completeNum,
+      planCustomerNum,
     } = this.state;
+    const data = [
+      {
+        item: '已完成培训',
+        count: completeNum,
+      }, {
+        item: '未完成培训',
+        count: unfinishedNum,
+      }
+    ];
+    const { DataView } = DataSet;
+    const { Html } = Guide;
+    const sum = data[0].count + data[1].count;
+    const dv = new DataView();
+    sum && dv.source(data).transform({
+      type: "percent",
+      field: "count",
+      dimension: "item",
+      as: "percent"
+    });
+    const cols = {
+      percent: {
+        formatter: val => {
+          val = val * 100 + "%";
+          return val;
+        }
+      }
+    };
     return (
       <div className="home-page">
         <div className="home-title">数据概况</div>
@@ -269,13 +331,13 @@ class Home extends React.Component {
               <img className="header-icon" src="https://image.xiaomaiketang.com/xm/jZf3GNY5tY.png" />
               <span className="header-word">培训计划总数 (个)</span>
             </div>
-            <div className="data-number">0</div>
+            <div className="data-number">{trainingPlanNum}</div>
             <div className="data-footer">
               <span className="footer-word">本月新增</span>
-              {false &&
+              {incTrainingPlanNum > 0 &&
                 <span className="icon iconfont">&#xe635;</span>
               }
-              <span className="footer-number">0</span>
+              <span className="footer-number">{incTrainingPlanNum}</span>
             </div>
           </div>
           <div className="data-item">
@@ -358,24 +420,78 @@ class Home extends React.Component {
                </Tooltip>
                <span className="tip">(本月)</span>
             </div>
-            <div className="circle-box">
-              <div className="big-circle">
-                <div className="small-circle">
-                  <div className="tip-box">
-                    <div style={{ color: '#333', fontSize: '20px', marginBottom: 4 }}>0人</div>
-                    <div style={{ color: '#999' }}>新增培训人数</div>
+            {(unfinishedNum || completeNum) ?
+              <div
+                className="left-graph-container"
+                id="mountNode"
+                style={{ width: '100%', marginLeft: '-20%', marginTop: -30 }}
+                ref={e => e && (this.width = e.clientWidth)}
+              >
+                {this.width && <div>
+                  <Chart
+                    height={400}
+                    width={this.width}
+                    data={dv}
+                    scale={cols}
+                    padding={20}
+                  >
+                    <Coord type={"theta"} radius={0.75} innerRadius={0.6} />
+                    <Axis name="percent" />
+                    <G2Tooltip
+                      showTitle={false}
+                      itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
+                    />
+                    <Guide>
+                      <Html
+                        position={['50%', "50%"]}
+                        html={`<div style="color:#8c8c8c;font-size:14px;text-align: center;width: ${this.width}px;"><span style="color:#333;font-size:20px">${planCustomerNum}人</span><br>新增培训人数</div>`}
+                        alignX="middle"
+                        alignY="middle"
+                      />
+                    </Guide>
+                    <Geom
+                      type="intervalStack"
+                      position="percent"
+                      color={['item', ['#FDB513', '#5289FA']]}
+                      tooltip={[
+                        "item*percent",
+                        (item, percent) => {
+                          percent = Math.round(percent * 100) + "%";
+                          return {
+                            name: item,
+                            value: percent,
+                          };
+                        }
+                      ]}
+                      style={{
+                        lineWidth: 1,
+                        stroke: "#fff"
+                      }}
+                    >
+                    </Geom>
+                  </Chart>
+                </div>
+              }
+              </div>
+              : <div className="circle-box">
+                <div className="big-circle">
+                  <div className="small-circle">
+                    <div className="tip-box">
+                      <div style={{ color: '#333', fontSize: '20px', marginBottom: 4 }}>{planCustomerNum}人</div>
+                      <div style={{ color: '#999' }}>新增培训人数</div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
+            }
             <div className="circle-tip unfinished">
               <div className="spot"></div>
-              <div className="number">0人</div>
+              <div className="number">{unfinishedNum}人</div>
               <div className="word">未完成培训</div>
             </div>
             <div className="circle-tip finished">
               <div className="spot"></div>
-              <div className="number">0人</div>
+              <div className="number">{completeNum}人</div>
               <div className="word">完成培训</div>
             </div>
           </div>
@@ -405,7 +521,11 @@ class Home extends React.Component {
             </div>
             <div>人均学习时长(分钟)</div>
           </div>
-					<div id="chart-id"></div>
+          <div id="chart-id"></div>
+          <div className="chart-bottom-tip">
+            <div className="tip-item" style={{ marginRight: 100 }}><span className="student-dot"></span>学习人数</div>
+            <div className="tip-item"><span className="time-dot"></span>人均学习时长</div>
+          </div>
         </div>
       </div>
     )

src/modules/home/Home.less

 .home-page {
   padding: 0 16px 16px;
   min-width: 1100px;
+  .g2-tooltip-marker {
+    border-radius: 50% !important;
+  }
   .home-title {
     height: 44px;
     line-height: 44px;
@@ -282,10 +285,11 @@
   }
   .study-chart {
     width: 100%;
-    height: 396px;
+    height: 432px;
     background: #fff;
     padding: 16px;
     margin-top: 16px;
+    padding-bottom: 32px;
     .study-title {
       font-size: 16px;
       color: #333;
@@ -315,6 +319,29 @@
         }
       }
     }
+    .chart-bottom-tip {
+      display: flex;
+      justify-content: center;
+      .tip-item {
+        display: flex;
+        align-items: center;
+        color: #666;
+        .student-dot {
+          background: #5289FA;
+          height: 8px;
+          width: 8px;
+          border-radius: 50%;
+          margin-right: 8px;
+        }
+        .time-dot {
+          background: #FEB613;
+          height: 8px;
+          width: 8px;
+          border-radius: 50%;
+          margin-right: 8px;
+        }
+      }
+    }
   }
 }
 

src/modules/root/App.tsx

@@ -30,9 +30,11 @@ const App: React.FC = (props: any) => {
 
   useEffect(() => {
     getStoreAndUserInfo();
-    // window.RCHistory.push({
-    //   pathname: `/switch-route`,
-    // })
+    if (window.location.hash === "#/") {
+      window.RCHistory.replace({
+        pathname: '/home',
+      })
+    }
   }, [])
 
   async function getStoreAndUserInfo() {

src/modules/store-manage/StoreH5DecorationTab.jsx

@@ -377,7 +377,7 @@ class StoreH5Decoration extends React.Component {
           <div className="banner-setting">
             <div className="title">banner设置</div>
             <div className="tip">
-              图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸750x252像素。
+              图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸750*252px。
             </div>
           </div>
           <Button

src/modules/store-manage/StoreWebDecorationTab.jsx

@@ -375,7 +375,7 @@ class StoreWebDecoration extends React.Component {
           <div className="banner-setting">
             <div className="title">banner设置</div>
             <div className="tip">
-              图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸1232*212像素。
+              图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸1232*212px。
              </div>
           </div>
           <Button