400 lines
18 KiB
JavaScript
400 lines
18 KiB
JavaScript
import { inject,observer } from "mobx-react";
|
||
import {withRouter} from 'react-router';
|
||
import { Tooltip } from 'antd';
|
||
import { WeaLocaleProvider, WeaEchart } from 'ecCom';
|
||
import { toJS } from 'mobx';
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
|
||
@inject('prjStasticStore')
|
||
@withRouter
|
||
@observer
|
||
class ProjectStastics extends React.Component {
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
this.chart1 = null;
|
||
this.chart2 = null;
|
||
this.chart3 = null;
|
||
this.setChart1Ref = element => {
|
||
this.chart1 = element;
|
||
}
|
||
this.setChart2Ref = element => {
|
||
this.chart2 = element;
|
||
}
|
||
this.setChart3Ref = element => {
|
||
this.chart3 = element;
|
||
}
|
||
const _this = this;
|
||
window.onresize = function() {
|
||
_this.chart1 && _this.chart1.chart.resize();
|
||
_this.chart2 && _this.chart2.chart.resize();
|
||
_this.chart3 && _this.chart3.chart.resize();
|
||
}
|
||
}
|
||
componentDidMount(){
|
||
const {prjid} = this.props;
|
||
const { location, prjStasticStore } = this.props;
|
||
if(prjid==''||prjid==null){
|
||
prjStasticStore.initDatas(location.query.prjid);
|
||
}else{
|
||
prjStasticStore.initDatas(prjid);
|
||
}
|
||
}
|
||
componentWillReceiveProps(nextProps) {
|
||
const {prjid} = this.props;
|
||
if(prjid==''||prjid==null){
|
||
if (this.props.location.key !== nextProps.location.key) {
|
||
const { prjStasticStore } = nextProps;
|
||
this.chart1 && this.chart1.paint();
|
||
this.chart2 && this.chart2.paint();
|
||
this.chart3 && this.chart3.paint();
|
||
prjStasticStore.initDatas(location.query.prjid);
|
||
}
|
||
}else{
|
||
if (this.props.prjid !== nextProps.prjid) {
|
||
const { location, prjStasticStore } = nextProps;
|
||
this.chart1 && this.chart1.paint();
|
||
this.chart2 && this.chart2.paint();
|
||
this.chart3 && this.chart3.paint();
|
||
prjStasticStore.initDatas(prjid);
|
||
}
|
||
}
|
||
}
|
||
render() {
|
||
const { prjStasticStore: { stastics } } = this.props;
|
||
let chartdata = toJS(stastics);
|
||
let charts = {
|
||
option1: {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
x: 'left',
|
||
data: chartdata.chart1 ? chartdata.chart1.legend:[]
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: '30',
|
||
fontWeight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
// data: [
|
||
// { value: 335, name: '直接访问' },
|
||
// { value: 310, name: '邮件营销' },
|
||
// { value: 234, name: '联盟广告' },
|
||
// { value: 135, name: '视频广告' },
|
||
// { value: 1548, name: '搜索引擎' }
|
||
// ]
|
||
data : chartdata.chart1 ? chartdata.chart1.series:[]
|
||
}
|
||
]
|
||
},
|
||
option2:{
|
||
color: ['#0270c1','#C2C9D4', '#75D294', '#F72E04'],
|
||
tooltip: {
|
||
trigger: 'none',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
}
|
||
},
|
||
legend: {
|
||
data:[getLabel(23774,"已完成"),getLabel(1979,"未开始"),getLabel(1960,"进行中"),getLabel(32556,"已延期")]
|
||
},
|
||
grid: {
|
||
top: 70,
|
||
bottom: 50
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLine: {
|
||
onZero: false,
|
||
lineStyle: {
|
||
color:'#d14a61'
|
||
}
|
||
},
|
||
axisPointer: {
|
||
label: {
|
||
formatter: function (params) {
|
||
return getLabel(1331,"数量")+' ' + params.value
|
||
+ (params.seriesData.length>3 ? '：' +(parseInt(params.seriesData[0].data)+parseInt(params.seriesData[1].data)+parseInt(params.seriesData[2].data)+parseInt(params.seriesData[3].data)): '');
|
||
}
|
||
}
|
||
},
|
||
//data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
|
||
data : chartdata.chart2 ? chartdata.chart2.xAxis:[]
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name:getLabel(23774,"已完成"),
|
||
type:'line',
|
||
smooth: true,
|
||
//data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
||
data : chartdata.chart2 ? chartdata.chart2.finish_data:[]
|
||
},
|
||
{
|
||
name:getLabel(1979,"未开始"),
|
||
type:'line',
|
||
smooth: true,
|
||
//data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
||
data : chartdata.chart2 ? chartdata.chart2.todo_data:[]
|
||
},
|
||
{
|
||
name:getLabel(1960,"进行中"),
|
||
type:'line',
|
||
smooth: true,
|
||
data : chartdata.chart2 ? chartdata.chart2.doing_data:[]
|
||
},
|
||
{
|
||
name:getLabel(32556,"已延期"),
|
||
type:'line',
|
||
smooth: true,
|
||
data : chartdata.chart2 ? chartdata.chart2.overtime_data:[]
|
||
}
|
||
]
|
||
},
|
||
option3: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: [getLabel(23774,"已完成"),getLabel(1979,"未开始"), getLabel(1960,"进行中"), getLabel(32556,"已延期")]
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
//data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||
data : chartdata.chart3 ? chartdata.chart3.xAxis:[]
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: getLabel(23774,"已完成"),
|
||
type: 'line',
|
||
areaStyle: { normal: {} },
|
||
data : chartdata.chart3 ? chartdata.chart3.finish_data:[],
|
||
color: {
|
||
colorStops: [{
|
||
offset: 0, color: '#0270c1' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: '#0270c1' // 100% 处的颜色
|
||
}],
|
||
globalCoord: false // 缺省为 false
|
||
}
|
||
},
|
||
{
|
||
name: getLabel(1979,"未开始"),
|
||
type: 'line',
|
||
areaStyle: { normal: {} },
|
||
data : chartdata.chart3 ? chartdata.chart3.todo_data:[],
|
||
color: {
|
||
colorStops: [{
|
||
offset: 0, color: '#C2C9D4' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: '#C2C9D4' // 100% 处的颜色
|
||
}],
|
||
globalCoord: false // 缺省为 false
|
||
}
|
||
},
|
||
{
|
||
name: getLabel(1960,"进行中"),
|
||
type: 'line',
|
||
areaStyle: { normal: {} },
|
||
data : chartdata.chart3 ? chartdata.chart3.doing_data:[],
|
||
color: {
|
||
colorStops: [{
|
||
offset: 0, color: '#75D294' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: '#75D294' // 100% 处的颜色
|
||
}],
|
||
globalCoord: false // 缺省为 false
|
||
}
|
||
},
|
||
{
|
||
name: getLabel(32556,"已延期"),
|
||
type: 'line',
|
||
areaStyle: { normal: {} },
|
||
data : chartdata.chart3 ? chartdata.chart3.overtime_data:[],
|
||
color: {
|
||
colorStops: [{
|
||
offset: 0, color: '#F72E04' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: '#F72E04' // 100% 处的颜色
|
||
}],
|
||
globalCoord: false // 缺省为 false
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
}
|
||
|
||
// let topTab = [
|
||
// {
|
||
// color: '#000000',
|
||
// groupid: 'flowAll',
|
||
// showcount: true,
|
||
// title: '任务统计',
|
||
// viewcondition: 0
|
||
// },
|
||
// {
|
||
// color: '#ff3232',
|
||
// groupid: 'flowNew',
|
||
// showcount: true,
|
||
// title: '按负责人',
|
||
// viewcondition: 1
|
||
// },
|
||
// {
|
||
// color: '#fea468',
|
||
// groupid: 'flowRes',
|
||
// showcount: true,
|
||
// title: '按看板',
|
||
// viewcondition: 2
|
||
// }
|
||
// ];
|
||
|
||
return (
|
||
<div className={"prjStastics"} >
|
||
{/* {this.getStastics(toJS(stastics))} */}
|
||
<div className={"folderChartBar flexRow"}>
|
||
<div className={"folderChartBarLeft"}>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@7rmcz7`} placement="bottom">
|
||
<div className={"ThemeColor3"}>
|
||
<span class="charBarNum1">{chartdata.allnum ? chartdata.allnum.value:0}</span>{getLabel(27591,"个")}
|
||
<span class="block">{chartdata.allnum ? chartdata.allnum.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@5ehduk`} placement="bottom" >
|
||
<div>
|
||
<span class="charBarNum1">{chartdata.finishnum ? chartdata.finishnum.value:0}</span>{getLabel(27591,"个")}
|
||
<span class="block">{chartdata.finishnum ? chartdata.finishnum.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@50z4st`} placement="bottom" >
|
||
<div >
|
||
<span class="charBarNum1">{chartdata.todonum ? chartdata.todonum.value:0}</span>{getLabel(27591,"个")}
|
||
<span class="block">{chartdata.todonum ? chartdata.todonum.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@urfud0`} placement="bottom">
|
||
<div>
|
||
<span class="charBarNum1">{chartdata.doingnum ? chartdata.doingnum.value:0}</span>{getLabel(27591,"个")}
|
||
<span class="block">{chartdata.doingnum ? chartdata.doingnum.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@k8x7c1`} placement="bottom" title={""}>
|
||
<div>
|
||
<span class="charBarNum1">{chartdata.overtimenum ? chartdata.overtimenum.value:0}</span>{getLabel(27591,"个")}
|
||
<span class="block">{chartdata.overtimenum ? chartdata.overtimenum.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1d5hyj`} placement="bottom" >
|
||
<div className={"ThemeColor3"}>
|
||
<span class="charBarNum1">{chartdata.workday1 ? chartdata.workday1.value:0}</span>{getLabel(1925,"天")}
|
||
<span class="block">{chartdata.workday1 ? chartdata.workday1.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@cqoypg`} placement="bottom">
|
||
<div>
|
||
<span class="charBarNum1">{chartdata.workday2 ? chartdata.workday2.value:0}</span>{getLabel(1925,"天")}
|
||
<span class="block">{chartdata.workday2 ? chartdata.workday2.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
</div>
|
||
<div className={"folderChartBarRight"}>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@bg6o3s`} placement="bottom" >
|
||
<div>
|
||
<span class="charBarNum1">{chartdata.hrmidsnum ? chartdata.hrmidsnum.value:0}</span>{getLabel(127,"人")}
|
||
<span class="block">{chartdata.hrmidsnum ? chartdata.hrmidsnum.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@y9ng1o`} placement="bottom" >
|
||
<div>
|
||
<span class="charBarNum1">{chartdata.members ? chartdata.members.value:0}</span>{getLabel(127,"人")}
|
||
<span class="block">{chartdata.members ? chartdata.members.lable:''}</span>
|
||
</div>
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={"folderChartBox"}>
|
||
<div className={"folderChartBoxModel flexRow"}>
|
||
<div className={"flex"}>
|
||
<div className={"folderChartBoxTitle"}>{getLabel(387425,"阶段任务分布")}</div>
|
||
<div className={"folderChartBoxContent"}>
|
||
{chartdata.chart1&&<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@eez98y`} ref={this.setChart1Ref} option={charts.option1} useDefault={false} />}
|
||
</div>
|
||
</div>
|
||
<div className={"flex"}>
|
||
<div className={"folderChartBoxTitle"}>{getLabel(387426,"阶段任务状态统计")}</div>
|
||
<div className={"folderChartBoxContent"}>
|
||
{chartdata.chart2&&<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@3hfcv0`} ref={this.setChart2Ref} option={charts.option2} useDefault={false} />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className={"folderChartBoxModel flexRow"}>
|
||
<div className={"flex"}>
|
||
<div className={"folderChartBoxTitle"}>{getLabel(387427,"负责人任务状态统计")}</div>
|
||
<div className={"folderChartBoxContent"}>
|
||
{chartdata.chart3&&<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@ppfn4t`} ref={this.setChart3Ref} option={charts.option3} useDefault={false} />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
export default ProjectStastics;
|
||
|