377 lines
17 KiB
JavaScript
377 lines
17 KiB
JavaScript
|
|
|||
|
|
import { Tooltip } from 'antd';
|
|||
|
|
import { WeaLocaleProvider, WeaEchart } from 'ecCom';
|
|||
|
|
import { observer } from "mobx-react";
|
|||
|
|
import { toJS } from 'mobx';
|
|||
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|||
|
|
import '../../style/stastic.less'
|
|||
|
|
|
|||
|
|
@observer
|
|||
|
|
export default 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() {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
componentWillReceiveProps(nextProps) {
|
|||
|
|
let key = this.props.statkey;
|
|||
|
|
let key_ = nextProps.statkey;
|
|||
|
|
if(key!==key_){
|
|||
|
|
this.chart1 && this.chart1.paint();
|
|||
|
|
this.chart2 && this.chart2.paint();
|
|||
|
|
this.chart3 && this.chart3.paint();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
render() {
|
|||
|
|
|
|||
|
|
const { contentStore: { 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@1eqb8g`} 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@7y6qvi`} 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@7tr9jd`} 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@pui1a9`} 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@ihnf6j`} 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@w2fm1a`} 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@gfauc3`} 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@1sly4y`} 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@9rs98x`} 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@3y5t05`} 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@wxgnge`} 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@bimm68`} ref={this.setChart3Ref} option={charts.option3} useDefault={false} />}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|