|
|
@ -1,6 +1,6 @@ |
|
|
import React, { useEffect, useState, useMemo } from 'react'; |
|
|
import React, { useEffect, useState, useMemo } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { Select, Input, Button, CheckboxGroup, DatePicker, Table } from '@douyinfe/semi-ui'; |
|
|
import { Select, Input, Button, Tooltip, DatePicker, Table } from '@douyinfe/semi-ui'; |
|
|
import { IconSearch } from '@douyinfe/semi-icons'; |
|
|
import { IconSearch } from '@douyinfe/semi-icons'; |
|
|
import ReactECharts from 'echarts-for-react'; |
|
|
import ReactECharts from 'echarts-for-react'; |
|
|
import * as echarts from 'echarts'; |
|
|
import * as echarts from 'echarts'; |
|
|
@ -133,7 +133,7 @@ const Rest = (props) => { |
|
|
const [pepUserId, setPepUserId] = useState(''); |
|
|
const [pepUserId, setPepUserId] = useState(''); |
|
|
const [pepObj, setPepObj] = useState({}); |
|
|
const [pepObj, setPepObj] = useState({}); |
|
|
const scroll = useMemo(() => ({ y: 248 }), []); |
|
|
const scroll = useMemo(() => ({ y: 248 }), []); |
|
|
|
|
|
|
|
|
const [startDate, setStartDate] = useState('');//开始时间 |
|
|
const [startDate, setStartDate] = useState('');//开始时间 |
|
|
const [endDate, setEndDate] = useState('');//结束时间 |
|
|
const [endDate, setEndDate] = useState('');//结束时间 |
|
|
|
|
|
|
|
|
@ -164,14 +164,14 @@ const Rest = (props) => { |
|
|
let textdate = []; |
|
|
let textdate = []; |
|
|
for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) { |
|
|
for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) { |
|
|
if (textdate.findIndex((ev) => { |
|
|
if (textdate.findIndex((ev) => { |
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')&&ev.compensate == res.payload.data.dayStatisticData[i].compensate |
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate |
|
|
}) !== -1) { |
|
|
}) !== -1) { |
|
|
textdate[textdate.findIndex((ev) => { |
|
|
textdate[textdate.findIndex((ev) => { |
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')&&ev.compensate == res.payload.data.dayStatisticData[i].compensate |
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate |
|
|
})].num |
|
|
})].num |
|
|
= |
|
|
= |
|
|
textdate[textdate.findIndex((ev) => { |
|
|
textdate[textdate.findIndex((ev) => { |
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')&&ev.compensate == res.payload.data.dayStatisticData[i].compensate |
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate |
|
|
})].num + res.payload.data.dayStatisticData[i].duration / 3600 |
|
|
})].num + res.payload.data.dayStatisticData[i].duration / 3600 |
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
@ -183,7 +183,6 @@ const Rest = (props) => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
console.log('textdate', textdate); |
|
|
|
|
|
for (let l = 0; l < textdate.length; l++) { |
|
|
for (let l = 0; l < textdate.length; l++) { |
|
|
if (textdate[l].compensate == '调休') { |
|
|
if (textdate[l].compensate == '调休') { |
|
|
showdate.push([textdate[l].time, textdate[l].num]) |
|
|
showdate.push([textdate[l].time, textdate[l].num]) |
|
|
@ -613,30 +612,6 @@ const Rest = (props) => { |
|
|
{pepObj.userCode || '暂无'} |
|
|
{pepObj.userCode || '暂无'} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ display: 'flex', width: '85.285%' }}> |
|
|
|
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}> |
|
|
|
|
|
所属部门： |
|
|
|
|
|
</div> |
|
|
|
|
|
{ |
|
|
|
|
|
pepObj.departmrnt?.map((ite, idx) => { |
|
|
|
|
|
return ( |
|
|
|
|
|
<div key={idx} style={{ color: '#FFFFFF', fontSize: 12, padding: '0px 4px 1px', background: 'rgba(0,90,189,0.8)', marginRight: 4 }}> |
|
|
|
|
|
{ite.name} |
|
|
|
|
|
</div> |
|
|
|
|
|
) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style={{ marginTop: 9, display: 'flex' }}> |
|
|
|
|
|
<div style={{ display: 'flex', width: '14.715%' }}> |
|
|
|
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}> |
|
|
|
|
|
员工职位： |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}> |
|
|
|
|
|
{pepObj.roleName || '暂无'} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style={{ display: 'flex', width: '19.072%' }}> |
|
|
<div style={{ display: 'flex', width: '19.072%' }}> |
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}> |
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}> |
|
|
入职时间： |
|
|
入职时间： |
|
|
@ -662,6 +637,74 @@ const Rest = (props) => { |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style={{ marginTop: 9, display: 'flex' }}> |
|
|
|
|
|
<div style={{ display: 'flex', width: '33.787%' }}> |
|
|
|
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}> |
|
|
|
|
|
员工职位： |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style={{ color: '#005ABD', fontSize: 13, display: 'flex', alignItems: 'center' }}> |
|
|
|
|
|
{ |
|
|
|
|
|
pepObj?.role?.map((item, index) => { |
|
|
|
|
|
let roleArr = [] |
|
|
|
|
|
for (let i = 0; i < pepObj.role.length; i++) { |
|
|
|
|
|
roleArr.push(pepObj.role[i].name) |
|
|
|
|
|
} |
|
|
|
|
|
return ( |
|
|
|
|
|
<div key={index} style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
|
|
{index < 2 ? |
|
|
|
|
|
(item.name) : ('') |
|
|
|
|
|
} |
|
|
|
|
|
{ |
|
|
|
|
|
pepObj.role.length > 1 && index == 0 ? |
|
|
|
|
|
(',') : ('') |
|
|
|
|
|
} |
|
|
|
|
|
{ |
|
|
|
|
|
pepObj.role.length > 2 && index == 2 ? ( |
|
|
|
|
|
<Tooltip content={roleArr.join(',')} trigger="click" style={{ lineHeight: 2 }}> |
|
|
|
|
|
<div style={{ color: 'rgba(0,90,189,0.8)', fontSize: 12, marginRight: 4, cursor: "pointer", }}> |
|
|
|
|
|
+{pepObj.role.length - 2} |
|
|
|
|
|
</div> |
|
|
|
|
|
</Tooltip> |
|
|
|
|
|
) : ('') |
|
|
|
|
|
} |
|
|
|
|
|
</div> |
|
|
|
|
|
) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style={{ display: 'flex', width: '66.213%' }}> |
|
|
|
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 84, textAlign: 'end' }}> |
|
|
|
|
|
所属部门： |
|
|
|
|
|
</div> |
|
|
|
|
|
{ |
|
|
|
|
|
pepObj.departmrnt?.map((ite, idx) => { |
|
|
|
|
|
let departmentsArr = [] |
|
|
|
|
|
for (let i = 0; i < pepObj.departmrnt.length; i++) { |
|
|
|
|
|
departmentsArr.push(pepObj.departmrnt[i].name) |
|
|
|
|
|
} |
|
|
|
|
|
return ( |
|
|
|
|
|
<div key={idx}> |
|
|
|
|
|
{idx < 3 ? |
|
|
|
|
|
(<div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4 }}> |
|
|
|
|
|
{ite.name} |
|
|
|
|
|
</div>) : ('') |
|
|
|
|
|
} |
|
|
|
|
|
{ |
|
|
|
|
|
pepObj.departmrnt.length > 3 && idx == 3 ? ( |
|
|
|
|
|
<Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}> |
|
|
|
|
|
<div style={{ padding: '0px 4px 1px 4px ', color: 'rgba(0,90,189,0.8)', fontSize: 12, marginRight: 4, cursor: "pointer", }}> |
|
|
|
|
|
+{pepObj.departmrnt.length - 3} |
|
|
|
|
|
</div> |
|
|
|
|
|
</Tooltip> |
|
|
|
|
|
) : ('') |
|
|
|
|
|
} |
|
|
|
|
|
</div> |
|
|
|
|
|
) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<div style={{ display: 'flex' }}> |
|
|
<div style={{ display: 'flex' }}> |
|
|
<div style={{ marginTop: 9, display: 'flex', width: '14.715%' }}> |
|
|
<div style={{ marginTop: 9, display: 'flex', width: '14.715%' }}> |
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}> |
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}> |
|
|
@ -753,7 +796,7 @@ const Rest = (props) => { |
|
|
工作日： |
|
|
工作日： |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}> |
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}> |
|
|
{tableStatistic.sumPayWorkday / 3600 + tableStatistic.sumTakeRestWorkday /3600 || 0}小时 |
|
|
{tableStatistic.sumPayWorkday / 3600 + tableStatistic.sumTakeRestWorkday / 3600 || 0}小时 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '19.87%' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '19.87%' }}> |
|
|
@ -777,7 +820,7 @@ const Rest = (props) => { |
|
|
累计加班时长： |
|
|
累计加班时长： |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}> |
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}> |
|
|
{(tableStatistic.sumPayWorkday / 3600 + tableStatistic.sumTakeRestWorkday / 3600 + tableStatistic.sumTakeRestDayoff / 3600 + tableStatistic.sumPayDayoff /3600 + tableStatistic.sumPayFestivals / 3600 + tableStatistic.sumTakeRestFestivals / 3600) || 0}小时 |
|
|
{(tableStatistic.sumPayWorkday / 3600 + tableStatistic.sumTakeRestWorkday / 3600 + tableStatistic.sumTakeRestDayoff / 3600 + tableStatistic.sumPayDayoff / 3600 + tableStatistic.sumPayFestivals / 3600 + tableStatistic.sumTakeRestFestivals / 3600) || 0}小时 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
