import React, { useEffect, useState, useMemo } from 'react'; import { connect } from 'react-redux'; import { Select, Input, Button, Tooltip, DatePicker, Table } from '@douyinfe/semi-ui'; import { IconSearch } from '@douyinfe/semi-icons'; import ReactECharts from 'echarts-for-react'; import * as echarts from 'echarts'; import DeleteModal from '../components/deleteModal'; import PersonnelModal from '../components/personnelModal'; import moment from 'moment' import { UserAttribute } from '$utils' import { isAuthorized } from '$utils' import '../style.less' const Rest = (props) => { const { dispatch, actions, user, loading, socket, history } = props const { humanAffairs } = actions; const [option, setOption] = useState({}); const [leaveoption, setLeaveOption] = useState({}); const [tableData, setTableData] = useState([]) //表格数据 const [leaveData, setLeaveData] = useState([]) //表格数据 const [tableStatistic, setTableStatistic] = useState({}) //加班总数据 const [leaveStatistic, setLeaveStatistic] = useState({}) //请假总数据 const [deleteModal, setDeleteModal] = useState(false) //删除弹框 const [personnelModal, setPersonnelModal] = useState(false);//档案弹框 const [columns, setColumns] = useState([//表格属性 { title: "实例号", dataIndex: "storyId", key: 'storyId', render: (text, r, index) => { return {text}; }, }, { title: "事由", dataIndex: "reason", key: 'reason', render: (text, r, index) => { return text; }, }, { title: "类型", dataIndex: "compensate", key: 'compensate', render: (text, r, index) => { return text; }, }, { title: "发起时间", dataIndex: "createTime", key: 'createTime', render: (text, r, index) => { return moment(text).format('YYYY-MM-DD HH:mm'); }, }, { title: "开始时间", dataIndex: "startTime", key: 'startTime', render: (text, r, index) => { return moment(text).format('YYYY-MM-DD HH:mm'); }, }, { title: "结束时间", dataIndex: "endTime", key: 'endTime', render: (text, r, index) => { return moment(text).format('YYYY-MM-DD HH:mm'); }, }, { title: "核定时间", dataIndex: "duration", key: 'duration', render: (text, r, index) => { return (text / 60 / 60 + '小时'); }, }, ]) const [leaveColumns, setLeaveColumns] = useState([//表格属性 { title: "实例号", dataIndex: "storyId", key: 'storyId', render: (text, r, index) => { return {text}; }, }, { title: "事由", dataIndex: "reason", key: 'reason', render: (text, r, index) => { return text; }, }, { title: "类型", dataIndex: "type", key: 'type', render: (text, r, index) => { return text; }, }, { title: "发起时间", dataIndex: "createTime", key: 'createTime', render: (text, r, index) => { return moment(text).format('YYYY-MM-DD HH:mm'); }, }, { title: "开始时间", dataIndex: "startTime", key: 'startTime', render: (text, r, index) => { return moment(text).format('YYYY-MM-DD HH:mm'); }, }, { title: "结束时间", dataIndex: "endTime", key: 'endTime', render: (text, r, index) => { return moment(text).format('YYYY-MM-DD HH:mm'); }, }, { title: "核定时间", dataIndex: "duration", key: 'duration', render: (text, r, index) => { return (text / 60 / 60 + '小时'); }, }, ]) const [pepUserCode, setPepUserCode] = useState(''); const [pepUserId, setPepUserId] = useState(''); const [pepObj, setPepObj] = useState({}); const scroll = useMemo(() => ({ y: 248 }), []); const [startDate, setStartDate] = useState('');//开始时间 const [endDate, setEndDate] = useState('');//结束时间 useEffect(() => { setPepUserCode(history?.location?.search.slice(1).split('-')[0]) setPepUserId(history?.location?.search.slice(1).split('-')[1]) peopleDetail() }, []) useEffect(() => { getWorkOption()//加班信息 getLeaveOption()//请假信息 }, [startDate, endDate]) function peopleDetail() { dispatch(humanAffairs.getMemberList({ keywordTarget: 'number', keyword: history?.location?.search.slice(1).split('-')[0] })).then((res) => {//搜索项企用户 if (res.success) { setPepObj(res.payload?.data?.rows[0]) } }) } function getWorkOption() {//加班折线图 let date = []; let showdate = [] let showdate1 = [] dispatch(humanAffairs.getMemberOvertime({ pepUserId: history?.location?.search.slice(1).split('-')[1], startDate: startDate, endDate: endDate })).then((res) => {//搜索项企用户 if (res.success) { setTableData(res.payload?.data?.data) setTableStatistic(res.payload?.data) let textdate = []; for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) { 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 }) !== -1) { 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 })].num = 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 })].num + res.payload.data.dayStatisticData[i].duration / 3600 } else { textdate.push({ time: moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM'), num: res.payload.data.dayStatisticData[i].duration / 3600, compensate: res.payload.data.dayStatisticData[i].compensate }) } } for (let l = 0; l < textdate.length; l++) { if (textdate[l].compensate == '调休') { showdate.push([textdate[l].time, textdate[l].num]) } else { showdate1.push([textdate[l].time, textdate[l].num]) } } if (!startDate && !endDate) { for (let i = 0; i < 12; i++) { date.unshift(moment(new Date()).subtract(i, 'months').format('YYYY/MM')); } } else { let nowdate = moment(startDate).format('YYYY/MM') date.push(nowdate) for (let o = 0; o < 10000; o++) { if (nowdate !== moment(endDate).format('YYYY/MM')) { nowdate = moment(nowdate).add(1, 'months').format('YYYY/MM') date.push(nowdate) } else { break } } } let data = { legend: { data: ["调休", "折算"], left: 'right', icon: 'roundRect', itemHeight: 3, // 粗细 }, color: ['#0F7EFB', '#FE9812'], //两条折线的颜色 xAxis: [ { boundaryGap: false, data: date, }, ], yAxis: [ { type: "value", name: '小时' }, ], dataZoom: [ { id: "dataZoomX", type: "slider", start: 0, end: 100, handleIcon: "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z", handleSize: "80%", }, ], tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, series: [ { name: "调休", type: "line", areaStyle: { color: 'rgba(14,156,255,0.5)', opacity: 0.1 }, smooth: true, data: showdate, }, { name: "折算", type: "line", areaStyle: { color: 'rgba(254,152,18,0.2)', }, smooth: true, data: showdate1, }, ], } setOption(data) } }) } function getLeaveOption() {//请假折线图 let date = []; let showdate = [] dispatch(humanAffairs.getMemberVacate({ pepUserId: history?.location?.search.slice(1).split('-')[1], startDate: startDate, endDate: endDate })).then((res) => {//搜索项企用户 if (res.success) { setLeaveData(res.payload?.data?.data) let year = 0; let compassionate = 0; let sick = 0; let other = 0; let all = 0; for (let i = 0; i < res.payload?.data?.statistic.length; i++) { if (res.payload?.data?.statistic[i].type == '事假') { compassionate = compassionate + (res.payload?.data?.statistic[i].sumDuration / 60 / 60) } else if (res.payload?.data?.statistic[i].type == '病假') { sick = sick + (res.payload?.data?.statistic[i].sumDuration / 60 / 60) } else if (res.payload?.data?.statistic[i].type == '年休假') { year = year + (res.payload?.data?.statistic[i].sumDuration / 60 / 60) } else { other = other + (res.payload?.data?.statistic[i].sumDuration / 60 / 60) } all = all + (res.payload?.data?.statistic[i].sumDuration / 60 / 60) } setLeaveStatistic({ compassionate, sick, year, other, all }) let textdate = []; for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) { if (textdate.findIndex((ev) => { return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') }) !== -1) { textdate[textdate.findIndex((ev) => { return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') })].num = textdate[textdate.findIndex((ev) => { return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') })].num + res.payload.data.dayStatisticData[i].duration / 3600 } else { textdate.push({ time: moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM'), num: res.payload.data.dayStatisticData[i].duration / 3600 }) } } for (let l = 0; l < textdate.length; l++) { showdate.push([textdate[l].time, textdate[l].num]) } if (!startDate && !endDate) { for (let i = 0; i < 12; i++) { date.unshift(moment(new Date()).subtract(i, 'months').format('YYYY/MM')); } } else { let nowdate = moment(startDate).format('YYYY/MM') date.push(nowdate) for (let o = 0; o < 10000; o++) { if (nowdate !== moment(endDate).format('YYYY/MM')) { nowdate = moment(nowdate).add(1, 'months').format('YYYY/MM') date.push(nowdate) } else { break } } } let data = { legend: { data: ["请假"], left: 'right', icon: 'roundRect', itemHeight: 3, // 粗细 }, color: ['#0F7EFB', '#FE9812'], //两条折线的颜色 xAxis: [ { boundaryGap: false, data: date, }, ], yAxis: [ { type: "value", name: '小时' }, ], dataZoom: [ { id: "dataZoomX", type: "slider", start: 0, end: 100, handleIcon: "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z", handleSize: "80%", }, ], tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, series: [ { name: "请假", type: "line", areaStyle: { color: 'rgba(14,156,255,0.5)', opacity: 0.1 }, smooth: true, data: showdate, }, ], } setLeaveOption(data) } }) } function handleChange(date) { if (date.length > 1) { setStartDate(moment(date[0]).format('YYYY-MM-DD')) setEndDate(moment(date[1]).format('YYYY-MM-DD')) } else { setStartDate('') setEndDate('') } } return ( <>