Skip to content

X
xiaomai-cloud-class-web
Commit 0ea34c9a by chenshu
Options

feat:图文课数据接入

parent c8d4eb3b
Showing with 135 additions and 16 deletions
package.json
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"homepage": "./", "homepage": "./",
"dependencies": { "dependencies": {
"@antv/data-set": "^0.11.8", "@antv/data-set": "^0.11.8",
"@antv/g2": "^3.5.13", "@antv/g2": "^3.5.17",
"@babel/core": "7.9.0", "@babel/core": "7.9.0",
"@babel/plugin-transform-typescript": "^7.11.0", "@babel/plugin-transform-typescript": "^7.11.0",
"@babel/preset-typescript": "^7.10.4", "@babel/preset-typescript": "^7.10.4",
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
"babel-plugin-jsx-control-statements": "^4.1.0", "babel-plugin-jsx-control-statements": "^4.1.0",
"babel-plugin-named-asset-import": "^0.3.6", "babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2", "babel-preset-react-app": "^9.1.2",
"bizcharts": "^4.1.7", "bizcharts": "^3.3.0",
"camelcase": "^5.3.1", "camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0", "case-sensitive-paths-webpack-plugin": "2.3.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
......
src/modules/home/Home.jsx
import React from 'react'; import React from 'react';
import { Select, Tooltip } from 'antd'; 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 moment from 'moment'
import Service from "@/common/js/service"; import Service from "@/common/js/service";
import User from '@/common/js/user'; import User from '@/common/js/user';
...@@ -21,8 +37,11 @@ class Home extends React.Component { ...@@ -21,8 +37,11 @@ class Home extends React.Component {
liveCourseNum: 0, liveCourseNum: 0,
totalCustomerNum: 0, totalCustomerNum: 0,
videoCourseNum: 0, videoCourseNum: 0,
pictureCourseNum: 0,
timeRange: '7', timeRange: '7',
studyTimeRange: '7', studyTimeRange: '7',
completeNum: 0,
unfinishedNum: 0,
} }
this._chart = null; this._chart = null;
} }
...@@ -31,6 +50,15 @@ class Home extends React.Component { ...@@ -31,6 +50,15 @@ class Home extends React.Component {
this.getPanelInfo(); this.getPanelInfo();
this.getStudyInfo(); this.getStudyInfo();
this.getHotCourse(); this.getHotCourse();
this.getTrainingInfo();
}
getTrainingInfo() {
Service.Hades('public/hades/planOverview', { storeId: User.getStoreId() }).then((res) => {
if (res.success) {
this.setState(res.result)
}
});
} }
getHotCourse() { getHotCourse() {
...@@ -72,10 +100,12 @@ class Home extends React.Component { ...@@ -72,10 +100,12 @@ class Home extends React.Component {
incLiveCourseNum: res.result.incLiveCourseNum, incLiveCourseNum: res.result.incLiveCourseNum,
incVideoCourseNum: res.result.incVideoCourseNum, incVideoCourseNum: res.result.incVideoCourseNum,
incPictureCourseNum: res.result.incPictureCourseNum, incPictureCourseNum: res.result.incPictureCourseNum,
incTrainingPlanNum: res.result.incTrainingPlanNum,
liveCourseNum: res.result.liveCourseNum, liveCourseNum: res.result.liveCourseNum,
totalCustomerNum: res.result.totalCustomerNum, totalCustomerNum: res.result.totalCustomerNum,
videoCourseNum: res.result.videoCourseNum, videoCourseNum: res.result.videoCourseNum,
pictureCourseNum: res.result.pictureCourseNum, pictureCourseNum: res.result.pictureCourseNum,
trainingPlanNum: res.result.trainingPlanNum,
}) })
} }
}) })
...@@ -97,7 +127,7 @@ class Home extends React.Component { ...@@ -97,7 +127,7 @@ class Home extends React.Component {
createChart = (data) => { createChart = (data) => {
if (!this._chart) { if (!this._chart) {
this._chart = new Chart({ this._chart = new G2Chart({
container: 'chart-id', container: 'chart-id',
forceFit: true, forceFit: true,
height: 290, height: 290,
...@@ -192,7 +222,39 @@ class Home extends React.Component { ...@@ -192,7 +222,39 @@ class Home extends React.Component {
timeRange, timeRange,
scheduleType, scheduleType,
studyTimeRange, studyTimeRange,
trainingPlanNum,
incTrainingPlanNum,
unfinishedNum,
completeNum,
planCustomerNum,
} = this.state; } = 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 ( return (
<div className="home-page"> <div className="home-page">
<div className="home-title">数据概况</div> <div className="home-title">数据概况</div>
...@@ -269,13 +331,13 @@ class Home extends React.Component { ...@@ -269,13 +331,13 @@ class Home extends React.Component {
<img className="header-icon" src="https://image.xiaomaiketang.com/xm/jZf3GNY5tY.png" /> <img className="header-icon" src="https://image.xiaomaiketang.com/xm/jZf3GNY5tY.png" />
<span className="header-word">培训计划总数 (个)</span> <span className="header-word">培训计划总数 (个)</span>
</div> </div>
<div className="data-number">0</div> <div className="data-number">{trainingPlanNum}</div>
<div className="data-footer"> <div className="data-footer">
<span className="footer-word">本月新增</span> <span className="footer-word">本月新增</span>
{false && {incTrainingPlanNum > 0 &&
<span className="icon iconfont">&#xe635;</span> <span className="icon iconfont">&#xe635;</span>
} }
<span className="footer-number">0</span> <span className="footer-number">{incTrainingPlanNum}</span>
</div> </div>
</div> </div>
<div className="data-item"> <div className="data-item">
...@@ -358,24 +420,78 @@ class Home extends React.Component { ...@@ -358,24 +420,78 @@ class Home extends React.Component {
</Tooltip> </Tooltip>
<span className="tip">(本月)</span> <span className="tip">(本月)</span>
</div> </div>
<div className="circle-box"> {(unfinishedNum || completeNum) ?
<div className="big-circle"> <div
<div className="small-circle"> className="left-graph-container"
<div className="tip-box"> id="mountNode"
<div style={{ color: '#333', fontSize: '20px', marginBottom: 4 }}>0人</div> style={{ width: '100%', marginLeft: '-20%', marginTop: -30 }}
<div style={{ color: '#999' }}>新增培训人数</div> 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">${sum}人</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> </div>
</div> }
<div className="circle-tip unfinished"> <div className="circle-tip unfinished">
<div className="spot"></div> <div className="spot"></div>
<div className="number">0人</div> <div className="number">{unfinishedNum}人</div>
<div className="word">未完成培训</div> <div className="word">未完成培训</div>
</div> </div>
<div className="circle-tip finished"> <div className="circle-tip finished">
<div className="spot"></div> <div className="spot"></div>
<div className="number">0人</div> <div className="number">{completeNum}人</div>
<div className="word">完成培训</div> <div className="word">完成培训</div>
</div> </div>
</div> </div>
......
src/modules/home/Home.less
.home-page { .home-page {
padding: 0 16px 16px; padding: 0 16px 16px;
min-width: 1100px; min-width: 1100px;
.g2-tooltip-marker {
border-radius: 50% !important;
}
.home-title { .home-title {
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment