Осьмаков Денис
5 years ago
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'; |
||||
|
||||
.summaryWebPart { |
||||
.container { |
||||
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; |
||||
} |
||||
.listElement{ |
||||
font-size: 13px !important; |
||||
.ms-DetailsHeader-cellName{ |
||||
font-size: 13px !important; |
||||
} |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
export interface DeviationTasks { |
||||
Departments: any; |
||||
} |
||||
|
||||
Loading…
Reference in new issue