import styles from './index.less';
import React, { useEffect, useState } from "react";
import {OrgChartComponent} from '@/components/orgChart'
import * as d3 from 'd3';
import { TopBar } from '../components/topBar';
import ToolBar from '../components/toolBar';
import moment from "moment";
import qs from 'qs';
export default function userPage() {
const [data, setData] = useState(null);
const [progressTop, setProgressTop] = useState(50);
let addNodeChildFunc = null;
let orgChart = null;
let progressBtnRef = null;
// 点击节点
function onNodeClick(nodeId) {
// alert('clicked ' + nodeId);
}
// 获取部门图片
function getDepartmentImage() {
let index = Math.floor(Math.random() * 8) + 1
return `./img/department/${index}.png`
}
// 获取部门图片
function getSubcompanyImage() {
let index = Math.floor(Math.random() * 3) + 1
return `./img/subcompany/${index}.png`
}
// 获取数据
useEffect(() => {
d3.json(
// "/user/data"
"/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD")
).then(data => {
setData(data.data);
});
}, [true]);
// ButtonContent渲染
const buttonContentRender = ({ node, state }) => {
return `
`
}
// 节点宽度渲染
const nodeWidthRender = d =>
{
return 280;
}
const nodeHeightRender = d => {
return 160;
}
// tool bar start
const handleTopLayoutClick = (progressBtn) => {
progressBtn.current.style.top= 50 + "px";
orgChart && orgChart.layout('top').render().fit();
}
const handleLeftLayoutClick = (progressBtn) => {
progressBtn.current.style.top= 50 + "px";
orgChart && orgChart.layout('left').render().fit();
}
const handleZoomIn = (progressBtn) => {
if(progressBtn) {
let top = (parseInt(progressBtn.current.style.top) - 10)
if(top <= 0) {
top = 30;
}
progressBtn.current.style.top = top + "px";
}
orgChart && orgChart.zoomIn();
}
const handleZoomOut = (progressBtn) => {
if(progressBtn) {
let top = (parseInt(progressBtn.current.style.top) + 10)
if(top >= 100) {
top = 70;
}
progressBtn.current.style.top = top + "px";
}
orgChart && orgChart.zoomOut();
}
// tool bar end
// top bar start
function downloadPdf(chart) {
chart.exportImg({
save: false,
onLoad: (base64) => {
var pdf = new jsPDF();
var img = new Image();
img.src = base64;
img.onload = function () {
pdf.addImage(
img,
'JPEG',
5,
5,
595 / 3,
((img.height / img.width) * 595) / 3
);
pdf.save('chart.pdf');
};
},
});
}
const handleExport = (type) => {
if(type == "png") {
orgChart && orgChart.exportImg({full:true});
} else {
orgChart && downloadPdf(orgChart)
}
}
const handleSearch = (requestData) => {
let api = "/api/bs/hrmorganization/orgchart/jcl/orgchart/userData" + qs.stringify(requestData, {addQueryPrefix: true})
fetch(api).then(res => res.json()).then(data => {
setData(data.data)
})
}
// top bar end
const nodeContentRender = (d, i, arr, state) => {
if(d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) {
return `
${d.data.fname}
${d.data.fleadername}
${d.data.fname} / ${d.data.fleaderjob}
编制: ${d.data.fplan}
在岗: ${d.data.fonjob}
`
} else if(d.data.ftype == 3) {
return ``
} else if(d.data.ftype == 4) {
return `
${d.data.fname}
${d.data.department} / ${d.data.fleaderjob}
${d.data.mobile}
地址：${d.data.address}
`
}
}
return (
{handleExport()}}
onSearch={(requestData) => {handleSearch(requestData)}}
url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
/>
handleTopLayoutClick(progressBtn)}
onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)}
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
/>
orgChart = chart}
setClick={click => (addNodeChildFunc = click)}
onNodeClick={onNodeClick}
data={data}
buttonContent={
buttonContentRender
}
nodeWidth={nodeWidthRender}
nodeHeight={nodeHeightRender}
nodeContent={nodeContentRender}
/>
);
}
