Skip to content

X
xiaomai-cloud-class-web
Commit 7d2d9fcd by chenshu
Options

feat:数据面板完成

parent a8b87dd6
Showing with 251 additions and 19 deletions
package.json
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
"private": true, "private": true,
"homepage": "./", "homepage": "./",
"dependencies": { "dependencies": {
"@antv/data-set": "^0.11.8",
"@antv/g2": "^3.5.13",
"@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",
...@@ -29,6 +31,7 @@ ...@@ -29,6 +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",
"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/core/global.less
...@@ -1346,16 +1346,6 @@ input:focus { ...@@ -1346,16 +1346,6 @@ input:focus {
} }
} }
.g2-tooltip {
background: rgba(0, 0, 0, 0.7) !important;
.g2-tooltip-list {
li {
color: #fff !important;
}
}
}
.BMap_cpyCtrl { .BMap_cpyCtrl {
display: none; display: none;
} }
......
src/modules/home/Home.jsx
import React from 'react'; import React from 'react';
import { Select } from 'antd'; import { Select, Tooltip } from 'antd';
import { Chart } from '@antv/g2';
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';
...@@ -23,6 +24,7 @@ class Home extends React.Component { ...@@ -23,6 +24,7 @@ class Home extends React.Component {
timeRange: '7', timeRange: '7',
studyTimeRange: '7', studyTimeRange: '7',
} }
this._chart = null;
} }
componentDidMount() { componentDidMount() {
...@@ -52,9 +54,12 @@ class Home extends React.Component { ...@@ -52,9 +54,12 @@ class Home extends React.Component {
const { studyTimeRange } = this.state; const { studyTimeRange } = this.state;
Service.Hades('public/hades/studyInfo', { storeId: User.getStoreId(), timeRange: studyTimeRange }).then((res) => { Service.Hades('public/hades/studyInfo', { storeId: User.getStoreId(), timeRange: studyTimeRange }).then((res) => {
if (res.success) { if (res.success) {
this.setState({ const dataList = res.result.map(item => ({
dataList: res.result time: moment(item.dateline).format('MM-DD'),
}) commentCount: item.studyNum,
commentRate: item.studyTime,
}))
this.createChart(dataList);
} }
}); });
} }
...@@ -87,6 +92,93 @@ class Home extends React.Component { ...@@ -87,6 +92,93 @@ class Home extends React.Component {
return 'https://image.xiaomaiketang.com/xm/D64QhNn74S.png'; return 'https://image.xiaomaiketang.com/xm/D64QhNn74S.png';
} }
} }
createChart = (data) => {
if (!this._chart) {
this._chart = new Chart({
container: 'chart-id',
forceFit: true,
height: 290,
padding: [48, 64]
})
}
this._chart.clear();
this._chart.source(data, {
commentRate: {
formatter: (val) => {
return val
},
// tickCount: 5,
},
time: {
formatter: (val) => {
if (val == 8) {
return '7日外'
}
return `${val}`
},
range: [0.06, 0.94]
},
commentCount: {
formatter: (val) => {
return val
},
// tickCount: 5
}
});
this._chart.axis('time', {
label: {
offset: 20,
textStyle: {
fill: '#666666',
fontSize: 14
}
},
line: {
stroke: '#E8E8E8'
},
tickLine: {
stroke: '#E8E8E8'
}
})
this._chart.axis('submitCount', {
label: {
textStyle: {
fill: '#666666',
fontSize: 14
}
}
})
this._chart.axis('commentRate', {
label: {
textStyle: {
fill: '#666666',
fontSize: 14
}
}
})
this._chart.line().position('time*commentCount').color('#5289FA').tooltip('time*commentCount', function( time, commentCount){
return {
name: '学习人数',
value: commentCount
}
});
this._chart.line().position('time*commentRate').color('#FFB714').tooltip('time*commentRate', function( time, commentRate){
return {
name: '人均学习时长',
value: commentRate
}
});
this._chart.legend(false);
this._chart.tooltip({
containerTpl: '<div class="g2-tooltip" style="background: #fff !important;">'
+ '<div class="g2-tooltip-title" style="margin:10px 0;"></div>'
+ '<ul class="g2-tooltip-list"></ul></div>', // tooltip 容器模板
itemTpl: '<li data-index={index} style="color: #333 !important"><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{name}<span style="display: inline-block; float: right; margin-left: 30px;">{value}</span></li>', // tooltip 每项记录的默认模板
})
this._chart.render();
}
render() { render() {
const { const {
...@@ -99,6 +191,7 @@ class Home extends React.Component { ...@@ -99,6 +191,7 @@ class Home extends React.Component {
videoCourseNum, videoCourseNum,
timeRange, timeRange,
scheduleType, scheduleType,
studyTimeRange,
} = this.state; } = this.state;
return ( return (
<div className="home-page"> <div className="home-page">
...@@ -242,7 +335,9 @@ class Home extends React.Component { ...@@ -242,7 +335,9 @@ class Home extends React.Component {
: <span className="table-number">{index + 1}</span> : <span className="table-number">{index + 1}</span>
} }
<div className="table-data"> <div className="table-data">
<div className="table-name">{item.courseName}</div> <Tooltip placement="topLeft" title={item.courseName}>
<div className="table-name">{item.courseName}</div>
</Tooltip>
<div className="table-tag">{item.categoryName}</div> <div className="table-tag">{item.categoryName}</div>
</div> </div>
<span className="table-study">{item.studyNum || 0}人已学习</span> <span className="table-study">{item.studyNum || 0}人已学习</span>
...@@ -252,14 +347,59 @@ class Home extends React.Component { ...@@ -252,14 +347,59 @@ class Home extends React.Component {
</div> </div>
<div className="study-item"> <div className="study-item">
<div className="study-title">培训计划完成情况 <div className="study-title">培训计划完成情况
<span></span> <Tooltip title="若某人加入多个培训计划，则需完成所有已加入的培训计划后，才视为已完成培训">
<span className="iconfont icon">&#xe61d;</span>
</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>
</div>
</div>
</div>
</div>
<div className="circle-tip unfinished">
<div className="spot"></div>
<div className="number">0人</div>
<div className="word">未完成培训</div>
</div>
<div className="circle-tip finished">
<div className="spot"></div>
<div className="number">0人</div>
<div className="word">完成培训</div>
</div> </div>
</div> </div>
</div> </div>
<div className="study-chart"> <div className="study-chart">
<div className="study-title">学习人数与时长</div> <div className="study-title">学习人数与时长
<div className="study-select">
<span className="select-word">（{moment().subtract(studyTimeRange, 'day').format('MM.DD')} ~ {moment().format('MM.DD')}）</span>
<Select
style={{ width: 88 }}
value={studyTimeRange}
onChange={(value) => {
this.setState({ studyTimeRange: value }, () => this.getStudyInfo());
}}
>
<Option value="7">近7天</Option>
<Option value="15">近15天</Option>
<Option value="30">近30天</Option>
</Select>
</div>
</div>
<div className="chart-tip">
<div>学习人数(人)
<Tooltip title="参与任意课程进行学习的人数">
<span className="iconfont icon">&#xe61d;</span>
</Tooltip>
</div>
<div>人均学习时长(分钟)</div>
</div>
<div id="chart-id"></div>
</div> </div>
</div> </div>
) )
......
src/modules/home/Home.less
...@@ -107,6 +107,7 @@ ...@@ -107,6 +107,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.study-item { .study-item {
position: relative;
height: 414px; height: 414px;
background: #fff; background: #fff;
width: ~'calc(50% - 8px)'; width: ~'calc(50% - 8px)';
...@@ -117,6 +118,16 @@ ...@@ -117,6 +118,16 @@
font-weight: 500; font-weight: 500;
line-height: 22px; line-height: 22px;
margin-bottom: 12px; margin-bottom: 12px;
.iconfont {
font-size: 14px;
color: #BFBFBF;
margin-left: 4px;
}
.tip {
font-size: 14px;
color: #999999;
margin-left: 8px;
}
} }
.study-header { .study-header {
display: flex; display: flex;
...@@ -204,6 +215,67 @@ ...@@ -204,6 +215,67 @@
color: #333; color: #333;
} }
} }
.circle-box {
width: 70%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.big-circle {
display: flex;
align-items: center;
justify-content: center;
width: 204px;
height: 204px;
border-radius: 102px;
background: #F1F3F6;
.small-circle {
display: flex;
align-items: center;
justify-content: center;
width: 124px;
height: 124px;
border-radius: 62px;
background: #fff;
.tip-box {
text-align: center;
}
}
}
}
.circle-tip {
position: absolute;
left: 70%;
padding-left: 16px;
&.unfinished {
top: 152px;
.spot {
background: #5289FA;
}
}
&.finished {
top: 232px;
.spot {
background: #FFBB54;
}
}
.spot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 4px;
top: 20px;
left: 0;
}
.number {
color: #333;
font-size: 16px;
margin-bottom: 2px;
}
.word {
color: #999;
}
}
} }
} }
.study-chart { .study-chart {
...@@ -218,6 +290,32 @@ ...@@ -218,6 +290,32 @@
font-weight: 500; font-weight: 500;
line-height: 22px; line-height: 22px;
margin-bottom: 12px; margin-bottom: 12px;
display: flex;
justify-content: space-between;
.study-select {
font-weight: 400;
font-size: 14px;
.select-word {
color: #999;
margin-right: 8px;
}
}
}
.chart-tip {
display: flex;
justify-content: space-between;
div {
color: #999;
.iconfont {
color: #999;
font-size: 14px;
margin-left: 4px;
}
}
} }
} }
}
.g2-tooltip {
background-color: #fff !important;
} }
\ No newline at end of file
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