parent
126add0d5b
commit
1d7ea3c156
13 changed files with 613 additions and 124 deletions
@ -0,0 +1,123 @@ |
|||||||
|
|
||||||
|
.commonTable { |
||||||
|
/* min-width: 361px; |
||||||
|
max-width: 361px; |
||||||
|
width: 361px; */ |
||||||
|
width: 100%; |
||||||
|
border-bottom: 1px solid #c8c8c8; |
||||||
|
.thead { |
||||||
|
display: flex; |
||||||
|
.th { |
||||||
|
padding: 6px; |
||||||
|
border-top: 1px solid #c8c8c8; |
||||||
|
border-left: 1px solid #c8c8c8; |
||||||
|
font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; |
||||||
|
width: 100%; |
||||||
|
color: #767676; |
||||||
|
font-size: 13px; |
||||||
|
font-weight: bold; |
||||||
|
transition: 0.5s; |
||||||
|
|
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: #f4f4f4; |
||||||
|
color: #666666; |
||||||
|
transition: 0.5s; |
||||||
|
} |
||||||
|
} |
||||||
|
.Departments { |
||||||
|
min-width: 123px !important; |
||||||
|
} |
||||||
|
.Managers { |
||||||
|
min-width: 116px !important; |
||||||
|
} |
||||||
|
.Members { |
||||||
|
min-width: 116px !important; |
||||||
|
} |
||||||
|
.count { |
||||||
|
min-width: 46px !important; |
||||||
|
max-width: 46px !important; |
||||||
|
border-right: 1px solid #c8c8c8; |
||||||
|
} |
||||||
|
} |
||||||
|
.tbody { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.td { |
||||||
|
border-top: 1px solid #c8c8c8; |
||||||
|
border-left: 1px solid #c8c8c8; |
||||||
|
color: #767676; |
||||||
|
background: #ffffff; |
||||||
|
font-size: 13px; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; |
||||||
|
transition: 0.5s; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
|
||||||
|
.cell { |
||||||
|
padding: 3px 5px; |
||||||
|
color: #767676; |
||||||
|
border-bottom: 1px solid #c8c8c8; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
/* max-width: 100px; */ |
||||||
|
&:hover { |
||||||
|
background: #f4f4f4; |
||||||
|
color: #666666; |
||||||
|
transition: 0.5s; |
||||||
|
} |
||||||
|
span { |
||||||
|
/* white-space: nowrap; */ |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
.Departments { |
||||||
|
width: 124px !important; |
||||||
|
margin-left: 1px; |
||||||
|
} |
||||||
|
.Managers { |
||||||
|
min-width: 106px !important; |
||||||
|
} |
||||||
|
.Members { |
||||||
|
min-width: 106px !important; |
||||||
|
} |
||||||
|
.isCrit { |
||||||
|
background: #ff000042; |
||||||
|
&:hover { |
||||||
|
background: #ff0000ab; |
||||||
|
color: #4b4b4b; |
||||||
|
transition: 0.5s; |
||||||
|
} |
||||||
|
} |
||||||
|
.count { |
||||||
|
min-width: 47px !important; |
||||||
|
} |
||||||
|
.cell:last-child { |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
div { |
||||||
|
text-align: center; |
||||||
|
vertical-align: center; |
||||||
|
} |
||||||
|
.dividingLine{ |
||||||
|
border-bottom: 1px solid #c8c8c8; |
||||||
|
} |
||||||
|
} |
||||||
|
.MembersTaskCount { |
||||||
|
width: 58px; |
||||||
|
max-width: 58px !important; |
||||||
|
min-width: 58px !important; |
||||||
|
border-right: 1px solid #c8c8c8; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.dividingLine{ |
||||||
|
border-bottom: 1px solid #c8c8c8; |
||||||
|
} |
@ -0,0 +1,203 @@ |
|||||||
|
import * as React from 'react'; |
||||||
|
/* import styles from '../SummaryGlobalComponent/SummaryGlobalComponent.module.scss' */ |
||||||
|
import { DetailsList, SelectionMode, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList'; |
||||||
|
import { DeviationTasks } from '../../interfaces/IDeviationTasks'; |
||||||
|
import styles from '../RejectTasks/RejectTasks.module.scss' |
||||||
|
|
||||||
|
|
||||||
|
export interface IComponentProps { |
||||||
|
structureData: DeviationTasks[] |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export interface IComponentState { |
||||||
|
|
||||||
|
} |
||||||
|
export default class TrafficLight extends React.Component<IComponentProps, IComponentState> { |
||||||
|
|
||||||
|
private _renderHeaderCell(): JSX.Element { |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.thead}> |
||||||
|
<div className={styles.th + ' ' + styles.Departments}> |
||||||
|
Подразделение |
||||||
|
</div> |
||||||
|
<div className={styles.th + ' ' + styles.Managers}> |
||||||
|
Руководитель |
||||||
|
</div> |
||||||
|
<div className={styles.th + ' ' + styles.Members}> |
||||||
|
Участник |
||||||
|
</div> |
||||||
|
<div className={styles.count + ' ' + styles.th}> |
||||||
|
Кол-во задач |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)
|
||||||
|
} |
||||||
|
|
||||||
|
private _cell(value:string,length:any,className:string,crit?:boolean,): JSX.Element { |
||||||
|
// 7 px это 1px border и padding 3px
|
||||||
|
|
||||||
|
var height = 'calc('+ 100/length + '% - 7px)' |
||||||
|
var critClassName = '' |
||||||
|
if(crit) { |
||||||
|
critClassName = 'isCrit' |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.cell + ' ' + styles[className] + ' ' + styles[critClassName]} style={{height}}><span>{value}</span></div> |
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
private _renderCell(structureData:any,i:number): JSX.Element { |
||||||
|
|
||||||
|
var Departments = [] //Подразделения
|
||||||
|
var Managers = [] //Руководители
|
||||||
|
var Members = [] //Участники
|
||||||
|
var MembersTaskCount = [] //Кол-во задач
|
||||||
|
|
||||||
|
if(structureData){ |
||||||
|
if(structureData.Departments.length){ |
||||||
|
|
||||||
|
// пушу в массив Departments ячейки
|
||||||
|
Departments.push(this._cell(structureData.Departments[i].Name,1 , 'Departments')) |
||||||
|
if(structureData.Departments[i].Managers){ |
||||||
|
for (let index = 0; index < structureData.Departments[i].Managers.length; index++) { |
||||||
|
let menagers = structureData.Departments[i].Managers[index].Name |
||||||
|
if(menagers){ |
||||||
|
//Сокращаю Имена и Отчества Пример Масловский Артем Андреевич Масловский А.А.
|
||||||
|
let ManagersName = structureData.Departments[i].Managers[index].Name.split(' ') |
||||||
|
let name = ManagersName[1].split('')[0] + '.' |
||||||
|
let surname = ManagersName[0] |
||||||
|
|
||||||
|
if(ManagersName[2]){ |
||||||
|
|
||||||
|
let patronymic = ManagersName[1].split('')[0] + '.' |
||||||
|
|
||||||
|
ManagersName = surname + ' ' + name + ' ' + patronymic |
||||||
|
} else { |
||||||
|
ManagersName = surname + ' ' + name |
||||||
|
} |
||||||
|
|
||||||
|
let maxLength = 0 |
||||||
|
|
||||||
|
structureData.Departments[i].Managers.forEach(function(e) { |
||||||
|
maxLength = maxLength + e.Members.length |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
//Переменная для расчета высоты ячейки менеджеров.
|
||||||
|
let length = maxLength/structureData.Departments[i].Managers[index].Members.length |
||||||
|
//Пушу ячейки
|
||||||
|
Managers.push(this._cell( ManagersName ,length,'Managers')) |
||||||
|
} else { |
||||||
|
Managers.push(this._cell( '' ,structureData.Departments[i].Managers[index].length,'Managers')) |
||||||
|
} |
||||||
|
if(structureData.Departments[i].Managers[index].Members.length){ |
||||||
|
for (let counter = 0; counter < structureData.Departments[i].Managers[index].Members.length; counter++) { |
||||||
|
let MembersName = structureData.Departments[i].Managers[index].Members[counter].Name |
||||||
|
if(MembersName) { |
||||||
|
//Сокращаю Имена и Отчества Пример Масловский Артем Андреевич Масловский А.А.
|
||||||
|
|
||||||
|
MembersName = MembersName.split(' '); |
||||||
|
let name = MembersName[1].split('')[0] + '.'; |
||||||
|
let surname = MembersName[0];
|
||||||
|
if(MembersName[2]){ |
||||||
|
MembersName[2].split('')[0];
|
||||||
|
|
||||||
|
let patronymic = MembersName[2].split('')[0] + '.'; |
||||||
|
|
||||||
|
MembersName = surname + ' ' + name + ' ' + patronymic; |
||||||
|
} else { |
||||||
|
MembersName = surname + ' ' + name |
||||||
|
} |
||||||
|
} |
||||||
|
//Пушу ячейки
|
||||||
|
Members.push( |
||||||
|
this._cell( MembersName ,structureData.Departments[i].Managers[index].length,'Members', |
||||||
|
structureData.Departments[i].Managers[index].Members[counter].Crit) |
||||||
|
)
|
||||||
|
//Пушу ячейки
|
||||||
|
MembersTaskCount.push( |
||||||
|
this._cell(structureData.Departments[i].Managers[index].Members[counter].TaskCount ,structureData.Departments[i].Managers[index].length,'count', |
||||||
|
structureData.Departments[i].Managers[index].Members[counter].Crit) |
||||||
|
) |
||||||
|
}
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}
|
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.tbody}> |
||||||
|
<div className={styles.td}> |
||||||
|
|
||||||
|
{
|
||||||
|
Departments |
||||||
|
} |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className={styles.td}> |
||||||
|
{ |
||||||
|
Managers |
||||||
|
} |
||||||
|
</div> |
||||||
|
<div className={styles.td}> |
||||||
|
{ |
||||||
|
Members |
||||||
|
} |
||||||
|
</div> |
||||||
|
<div className={styles.MembersTaskCount + ' ' + styles.td}> |
||||||
|
{ |
||||||
|
MembersTaskCount |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)
|
||||||
|
} |
||||||
|
private _renderBodyTable(structureData:any,): JSX.Element { |
||||||
|
var body = [] |
||||||
|
|
||||||
|
for (let i = 0; i < structureData.Departments.length; i++) { |
||||||
|
body.push(this._renderCell(structureData, i)) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div>{body}</div> |
||||||
|
|
||||||
|
) |
||||||
|
} |
||||||
|
componentDidMount(){ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
public onRenderFooter = () =>{ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
public render(): React.ReactElement<IComponentProps> { |
||||||
|
|
||||||
|
return ( |
||||||
|
<div style={{display: 'flex', justifyContent: 'center',minWidth:' 360px'}}> |
||||||
|
<div> |
||||||
|
|
||||||
|
<div className={styles.commonTable}> |
||||||
|
<div>
|
||||||
|
{this._renderHeaderCell()} |
||||||
|
</div> |
||||||
|
<div>
|
||||||
|
{
|
||||||
|
this._renderBodyTable(this.props.structureData) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1 @@ |
|||||||
|
|
@ -1,74 +1,6 @@ |
|||||||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; |
.listElement{ |
||||||
|
font-size: 13px !important; |
||||||
.summaryWebPart { |
.ms-DetailsHeader-cellName{ |
||||||
.container { |
font-size: 13px !important; |
||||||
max-width: 700px; |
|
||||||
margin: 0px auto; |
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); |
|
||||||
} |
|
||||||
|
|
||||||
.row { |
|
||||||
@include ms-Grid-row; |
|
||||||
@include ms-fontColor-white; |
|
||||||
background-color: $ms-color-themeDark; |
|
||||||
padding: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.column { |
|
||||||
@include ms-Grid-col; |
|
||||||
@include ms-lg10; |
|
||||||
@include ms-xl8; |
|
||||||
@include ms-xlPush2; |
|
||||||
@include ms-lgPush1; |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
@include ms-font-xl; |
|
||||||
@include ms-fontColor-white; |
|
||||||
} |
|
||||||
|
|
||||||
.subTitle { |
|
||||||
@include ms-font-l; |
|
||||||
@include ms-fontColor-white; |
|
||||||
} |
|
||||||
|
|
||||||
.description { |
|
||||||
@include ms-font-l; |
|
||||||
@include ms-fontColor-white; |
|
||||||
} |
|
||||||
|
|
||||||
.button { |
|
||||||
// Our button |
|
||||||
text-decoration: none; |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
// Primary Button |
|
||||||
min-width: 80px; |
|
||||||
background-color: $ms-color-themePrimary; |
|
||||||
border-color: $ms-color-themePrimary; |
|
||||||
color: $ms-color-white; |
|
||||||
|
|
||||||
// Basic Button |
|
||||||
outline: transparent; |
|
||||||
position: relative; |
|
||||||
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
font-size: $ms-font-size-m; |
|
||||||
font-weight: $ms-font-weight-regular; |
|
||||||
border-width: 0; |
|
||||||
text-align: center; |
|
||||||
cursor: pointer; |
|
||||||
display: inline-block; |
|
||||||
padding: 0 16px; |
|
||||||
|
|
||||||
.label { |
|
||||||
font-weight: $ms-font-weight-semibold; |
|
||||||
font-size: $ms-font-size-m; |
|
||||||
height: 32px; |
|
||||||
line-height: 32px; |
|
||||||
margin: 0 4px; |
|
||||||
vertical-align: top; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
@ -0,0 +1,4 @@ |
|||||||
|
export interface DeviationTasks { |
||||||
|
Departments: any; |
||||||
|
} |
||||||
|
|
Loading…
Reference in new issue