|
|
|
@ -1,11 +1,14 @@ |
|
|
|
|
import * as React from 'react'; |
|
|
|
|
import styles from '../SummaryGlobalComponent/SummaryGlobalComponent.module.scss' |
|
|
|
|
import Moment from "react-moment"; |
|
|
|
|
import moment from "moment/min/moment-with-locales"; |
|
|
|
|
|
|
|
|
|
import { DetailsList, SelectionMode, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList'; |
|
|
|
|
|
|
|
|
|
export interface IComponentProps{ |
|
|
|
|
statuses: {[key: string]: string;}; |
|
|
|
|
taskStats: {[key: string]: number;}; |
|
|
|
|
dateInfo: { dateFinish: string, dateStart: string }; |
|
|
|
|
} |
|
|
|
|
export default class TrafficLight extends React.Component<IComponentProps, {}> { |
|
|
|
|
public renderItemColumn = (item, index: number, column) => { |
|
|
|
@ -24,44 +27,46 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
public render(): React.ReactElement<IComponentProps> { |
|
|
|
|
const { statuses, taskStats} = this.props; |
|
|
|
|
const { statuses, taskStats, dateInfo} = this.props; |
|
|
|
|
let procent = (taskStats.compl/(taskStats.plan + taskStats.compl + taskStats.exec))* 100; |
|
|
|
|
|
|
|
|
|
let startDate = moment(dateInfo.dateStart).format("DD.MM.YY"); |
|
|
|
|
let finDate = moment(dateInfo.dateFinish).format("DD.MM.YY"); |
|
|
|
|
let totalDays = new moment.duration((new Date(dateInfo.dateFinish) as any) -(new Date(dateInfo.dateStart) as any)).asDays(); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className={styles.statusesContainer}> |
|
|
|
|
<DetailsList |
|
|
|
|
onRenderItemColumn={this.renderItemColumn} |
|
|
|
|
items={ |
|
|
|
|
[ |
|
|
|
|
items={[ |
|
|
|
|
{ |
|
|
|
|
key: 1, |
|
|
|
|
fieldName: 'Статус по сроку', |
|
|
|
|
status: statuses.term, |
|
|
|
|
fieldName: "Статус по сроку", |
|
|
|
|
status: statuses.term |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: 2, |
|
|
|
|
fieldName: 'Статус по бюджету', |
|
|
|
|
status: statuses.budget, |
|
|
|
|
fieldName: "Статус по бюджету", |
|
|
|
|
status: statuses.budget |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: 3, |
|
|
|
|
fieldName: 'Статус по % выполнения', |
|
|
|
|
status: statuses.percCompl, |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
fieldName: "Статус по % выполнения", |
|
|
|
|
status: statuses.percCompl |
|
|
|
|
} |
|
|
|
|
]} |
|
|
|
|
columns={[ |
|
|
|
|
{ |
|
|
|
|
key: 'column1', |
|
|
|
|
name: 'Название', |
|
|
|
|
fieldName: 'fieldName', |
|
|
|
|
key: "column1", |
|
|
|
|
name: "Название", |
|
|
|
|
fieldName: "fieldName", |
|
|
|
|
minWidth: 16, |
|
|
|
|
maxWidth: 150 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: 'column2', |
|
|
|
|
name: 'Статус', |
|
|
|
|
fieldName: 'status', |
|
|
|
|
key: "column2", |
|
|
|
|
name: "Статус", |
|
|
|
|
fieldName: "status", |
|
|
|
|
minWidth: 16, |
|
|
|
|
maxWidth: 80 |
|
|
|
|
} |
|
|
|
@ -71,35 +76,40 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> { |
|
|
|
|
selectionMode={SelectionMode.none} |
|
|
|
|
/> |
|
|
|
|
<DetailsList |
|
|
|
|
items={ |
|
|
|
|
[ |
|
|
|
|
items={[ |
|
|
|
|
{ |
|
|
|
|
key: 1, |
|
|
|
|
start: '10.10.10', |
|
|
|
|
end: '10.10.11', |
|
|
|
|
time: '10.10.12' |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
start: startDate, |
|
|
|
|
end: finDate, |
|
|
|
|
time: totalDays, |
|
|
|
|
allTasks: taskStats.plan + taskStats.compl + taskStats.exec |
|
|
|
|
} |
|
|
|
|
]} |
|
|
|
|
columns={[ |
|
|
|
|
{ |
|
|
|
|
key: 'column1', |
|
|
|
|
name: 'Дата начала', |
|
|
|
|
fieldName: 'start', |
|
|
|
|
minWidth: 80, |
|
|
|
|
key: "column1", |
|
|
|
|
name: "Дата начала", |
|
|
|
|
fieldName: "start", |
|
|
|
|
minWidth: 40, |
|
|
|
|
maxWidth: 60
|
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: 'column2', |
|
|
|
|
name: 'Дата окончания', |
|
|
|
|
fieldName: 'end', |
|
|
|
|
minWidth: 80, |
|
|
|
|
|
|
|
|
|
key: "column2", |
|
|
|
|
name: "Дата окончания", |
|
|
|
|
fieldName: "end", |
|
|
|
|
minWidth: 80 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: "column3", |
|
|
|
|
name: "Срок выполнения", |
|
|
|
|
fieldName: "time", |
|
|
|
|
minWidth: 90 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: 'column3', |
|
|
|
|
name: 'Срок выполнения', |
|
|
|
|
fieldName: 'time', |
|
|
|
|
minWidth: 100, |
|
|
|
|
key: "column4", |
|
|
|
|
name: "Всего задач", |
|
|
|
|
fieldName: "allTasks", |
|
|
|
|
minWidth: 60, |
|
|
|
|
} |
|
|
|
|
]} |
|
|
|
|
compact={true} |
|
|
|
@ -107,7 +117,14 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> { |
|
|
|
|
selectionMode={SelectionMode.none} |
|
|
|
|
layoutMode={DetailsListLayoutMode.justified} |
|
|
|
|
/> |
|
|
|
|
<div style={{ marginLeft: '9', fontSize: '13px' }}>{`Актуальный статус выполнения ${procent.toFixed(2)}%`}</div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
marginLeft: "9", |
|
|
|
|
fontSize: "13px", |
|
|
|
|
marginTop: 15, |
|
|
|
|
marginBottom: 15 |
|
|
|
|
}} |
|
|
|
|
>{`Актуальный статус выполнения ${procent.toFixed(2)}%`}</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|