|
|
|
@ -7,7 +7,7 @@ import ToolBar from '../components/toolBar';
|
|
|
|
import jsPDF from 'jspdf';
|
|
|
|
import jsPDF from 'jspdf';
|
|
|
|
import moment from 'moment';
|
|
|
|
import moment from 'moment';
|
|
|
|
import qs from 'qs';
|
|
|
|
import qs from 'qs';
|
|
|
|
import { message } from 'antd';
|
|
|
|
import { message, Tooltip } from 'antd';
|
|
|
|
|
|
|
|
|
|
|
|
let active = 'top';
|
|
|
|
let active = 'top';
|
|
|
|
export default function companyPage() {
|
|
|
|
export default function companyPage() {
|
|
|
|
@ -37,11 +37,11 @@ export default function companyPage() {
|
|
|
|
if (topBarSearchRequest) {
|
|
|
|
if (topBarSearchRequest) {
|
|
|
|
let request = { ...topBarSearchRequest, ids: idsStr };
|
|
|
|
let request = { ...topBarSearchRequest, ids: idsStr };
|
|
|
|
api =
|
|
|
|
api =
|
|
|
|
'/api/bs/hrmorganization/jclorgchart/asyncCompanyData' +
|
|
|
|
'/api/ais/orgChart/asyncCompanyData' +
|
|
|
|
qs.stringify(request, { addQueryPrefix: true });
|
|
|
|
qs.stringify(request, { addQueryPrefix: true });
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
api =
|
|
|
|
api =
|
|
|
|
'/api/bs/hrmorganization/jclorgchart/asyncCompanyData?fclass=0&root=0&date=' +
|
|
|
|
'/api/ais/orgChart/asyncCompanyData?level=0&date=' +
|
|
|
|
moment(new Date()).format('YYYY-MM-DD') +
|
|
|
|
moment(new Date()).format('YYYY-MM-DD') +
|
|
|
|
'&ids=' +
|
|
|
|
'&ids=' +
|
|
|
|
idsStr;
|
|
|
|
idsStr;
|
|
|
|
@ -49,9 +49,9 @@ export default function companyPage() {
|
|
|
|
|
|
|
|
|
|
|
|
fetch(api)
|
|
|
|
fetch(api)
|
|
|
|
.then((res) => res.json())
|
|
|
|
.then((res) => res.json())
|
|
|
|
.then((data) => {
|
|
|
|
.then((resp) => {
|
|
|
|
if (data.data) {
|
|
|
|
if (resp.data.data) {
|
|
|
|
data.data.forEach((item) => {
|
|
|
|
resp.data.data.forEach((item) => {
|
|
|
|
window.chart.addNode(item);
|
|
|
|
window.chart.addNode(item);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -59,28 +59,39 @@ export default function companyPage() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 获取部门图片
|
|
|
|
// 获取层级图片
|
|
|
|
function getDepartmentImage() {
|
|
|
|
function getLevelImage(deptLevel, isVirtual) {
|
|
|
|
let index = Math.floor(Math.random() * 8) + 1;
|
|
|
|
switch (deptLevel) {
|
|
|
|
// return `./img/department/${index}.png`;
|
|
|
|
case '0':
|
|
|
|
return `./img/department/1.png`;
|
|
|
|
return isVirtual == 0
|
|
|
|
|
|
|
|
? `./img/company/level1.png`
|
|
|
|
|
|
|
|
: `./img/company/level5.png`;
|
|
|
|
|
|
|
|
case '1':
|
|
|
|
|
|
|
|
return isVirtual == 0
|
|
|
|
|
|
|
|
? `./img/company/level2.png`
|
|
|
|
|
|
|
|
: `./img/company/level6.png`;
|
|
|
|
|
|
|
|
case '2':
|
|
|
|
|
|
|
|
return isVirtual == 0
|
|
|
|
|
|
|
|
? `./img/company/level3.png`
|
|
|
|
|
|
|
|
: `./img/company/level7.png`;
|
|
|
|
|
|
|
|
case '3':
|
|
|
|
|
|
|
|
return isVirtual == 0
|
|
|
|
|
|
|
|
? `./img/company/level4.png`
|
|
|
|
|
|
|
|
: `./img/company/level8.png`;
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
|
|
|
return isVirtual == 0
|
|
|
|
|
|
|
|
? `./img/company/level4.png`
|
|
|
|
|
|
|
|
: `./img/company/level8.png`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 获取分部图片
|
|
|
|
|
|
|
|
function getSubcompanyImage() {
|
|
|
|
|
|
|
|
let index = Math.floor(Math.random() * 3) + 1;
|
|
|
|
|
|
|
|
return `./img/subcompany/2.png`;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//获取数据
|
|
|
|
//获取数据
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
document.cookie =
|
|
|
|
|
|
|
|
'ecology_JSessionid=aaa_5XehwlWEjcCKl0cHy; JSESSIONID=aaa_5XehwlWEjcCKl0cHy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=706b3e41-eafb-4e55-bc1c-a4cf0f9fdaa7';
|
|
|
|
|
|
|
|
d3.json(
|
|
|
|
d3.json(
|
|
|
|
'/api/bs/hrmorganization/jclorgchart/companyData?fclass=0&isvitual=0&root=0&date=' +
|
|
|
|
'/api/ais/orgChart/companyData?level=0&date=' +
|
|
|
|
moment(new Date()).format('YYYY-MM-DD'),
|
|
|
|
moment(new Date()).format('YYYY-MM-DD'),
|
|
|
|
).then((data) => {
|
|
|
|
).then((resp) => {
|
|
|
|
setData(data.data);
|
|
|
|
setData(resp.data.data);
|
|
|
|
setHasRight('true');
|
|
|
|
setHasRight('true');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}, [true]);
|
|
|
|
}, [true]);
|
|
|
|
@ -110,24 +121,16 @@ export default function companyPage() {
|
|
|
|
if (d.data.ftype == 0) {
|
|
|
|
if (d.data.ftype == 0) {
|
|
|
|
return 100;
|
|
|
|
return 100;
|
|
|
|
} else if (d.data.ftype == 1) {
|
|
|
|
} else if (d.data.ftype == 1) {
|
|
|
|
return 160;
|
|
|
|
return 80;
|
|
|
|
} else if (d.data.ftype == 2) {
|
|
|
|
} else if (d.data.ftype == 2) {
|
|
|
|
return 56;
|
|
|
|
return 106;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return 120;
|
|
|
|
return 120;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const nodeContentRender = (d, i, arr, state) => {
|
|
|
|
const nodeContentRender = (d, i, arr, state) => {
|
|
|
|
// 集团地址
|
|
|
|
|
|
|
|
let companyUrl =
|
|
|
|
|
|
|
|
'/spa/organization/static/index.html#/main/organization/group';
|
|
|
|
|
|
|
|
// 分部地址
|
|
|
|
|
|
|
|
let subcompanyUrl = `/spa/hrm/engine.html#/hrmengine/organization?showTree=false&type=subcompany&id=${d.data.fobjid}`;
|
|
|
|
|
|
|
|
// 部门地址
|
|
|
|
|
|
|
|
let departmentUrl = `/spa/hrm/engine.html#/hrmengine/organization?showTree=false&isView=1&type=department&id=${d.data.fobjid}`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (d.data.ftype == 0) {
|
|
|
|
if (d.data.ftype == 0) {
|
|
|
|
return `<div onclick="if(${d.data.fisvitual}==1) return;" style="text-align:center">
|
|
|
|
return `<div style="text-align:center">
|
|
|
|
<div style="display: inline-block; vertical-align: top;">
|
|
|
|
<div style="display: inline-block; vertical-align: top;">
|
|
|
|
<img src="./img/company.png" />
|
|
|
|
<img src="./img/company.png" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -144,12 +147,7 @@ export default function companyPage() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>`;
|
|
|
|
</div>`;
|
|
|
|
} else if (d.data.ftype == 1) {
|
|
|
|
} else if (d.data.ftype == 1) {
|
|
|
|
return `<div onclick="if(${
|
|
|
|
return `<div onclick="window.open('${d.data.url}', '_blank')">
|
|
|
|
d.data.fisvitual
|
|
|
|
|
|
|
|
}==1) return;window.open('${subcompanyUrl}', '_blank')">
|
|
|
|
|
|
|
|
<div style="width: 85px; height: 85px; border: 1px solid #66BAF5; border-radius: 50%;text-align: center; line-height: 85px; margin: 0 auto;display:flex;justify-content:center;align-items:center">
|
|
|
|
|
|
|
|
<img src="${getSubcompanyImage()}" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style="width: 136px; border: 1px solid #66BAF5; margin: 10px auto 0px; border-radius: 23px; text-align: center;
|
|
|
|
<div style="width: 136px; border: 1px solid #66BAF5; margin: 10px auto 0px; border-radius: 23px; text-align: center;
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
|
|
@ -162,21 +160,32 @@ export default function companyPage() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>`;
|
|
|
|
</div>`;
|
|
|
|
} else if (d.data.ftype == 2) {
|
|
|
|
} else if (d.data.ftype == 2) {
|
|
|
|
|
|
|
|
let one = d.data.leader == '' ? 'none' : 'inline-block';
|
|
|
|
|
|
|
|
let three = d.data.deputyLeader == '' ? 'none' : 'inline-block';
|
|
|
|
|
|
|
|
let two = d.data.header == '' ? 'none' : 'block';
|
|
|
|
return `
|
|
|
|
return `
|
|
|
|
<div style="width: 100%; height: 100%; background-size: 100% 100%;" onclick="if(${
|
|
|
|
<div style="width: 100%; height: 100%; background-size: 100% 100%;" >
|
|
|
|
d.data.fisvitual
|
|
|
|
<div style='position:absolute;height:100%'>
|
|
|
|
}==1) return;window.open('${departmentUrl}')">
|
|
|
|
<img style='width:144px;height:106px' src="${getLevelImage(
|
|
|
|
<div style='position:absolute'>
|
|
|
|
d.data.deptLevel,
|
|
|
|
<img src='./img/company_job_label.png'/></div>
|
|
|
|
d.data.isVirtual,
|
|
|
|
<div style="padding-left: 8px; padding-top: 23px;display:flex;align-items:center">
|
|
|
|
)}"/></div>
|
|
|
|
<img src="${getDepartmentImage()}"/>
|
|
|
|
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 12px;
|
|
|
|
<span style="
|
|
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
|
|
|
|
margin-left: 3px;
|
|
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
<div title=${
|
|
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
|
|
d.data.fname
|
|
|
|
font-weight: 400;
|
|
|
|
} style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
|
|
|
|
color: #333333;
|
|
|
|
line-height: 18px;word-break: break-all;">${d.data.fname}</div>
|
|
|
|
">${d.data.fname}</span>
|
|
|
|
<div style="width: 130px;margin: 0 auto;line-height: 18px;display:${two}">分管领导：${
|
|
|
|
|
|
|
|
d.data.header
|
|
|
|
|
|
|
|
} </div>
|
|
|
|
|
|
|
|
<div style="width: 120px;margin: 0 auto;line-height: 18px;display:${one}">
|
|
|
|
|
|
|
|
<span style="display:${one}">${
|
|
|
|
|
|
|
|
d.data.leader
|
|
|
|
|
|
|
|
}</span><span style="display:${three}"> || ${
|
|
|
|
|
|
|
|
d.data.deputyLeader
|
|
|
|
|
|
|
|
}</span></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
@ -233,10 +242,6 @@ export default function companyPage() {
|
|
|
|
orgChart && orgChart.zoomBehavior(value - 50);
|
|
|
|
orgChart && orgChart.zoomBehavior(value - 50);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// tool bar end
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// top bar start
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function downloadPdf(chart) {
|
|
|
|
function downloadPdf(chart) {
|
|
|
|
chart.exportImg({
|
|
|
|
chart.exportImg({
|
|
|
|
save: false,
|
|
|
|
save: false,
|
|
|
|
@ -271,21 +276,22 @@ export default function companyPage() {
|
|
|
|
const handleSearch = (requestData) => {
|
|
|
|
const handleSearch = (requestData) => {
|
|
|
|
topBarSearchRequest = requestData;
|
|
|
|
topBarSearchRequest = requestData;
|
|
|
|
let api =
|
|
|
|
let api =
|
|
|
|
'/api/bs/hrmorganization/jclorgchart/companyData' +
|
|
|
|
'/api/ais/orgChart/companyData' +
|
|
|
|
qs.stringify(requestData, { addQueryPrefix: true });
|
|
|
|
qs.stringify(requestData, { addQueryPrefix: true });
|
|
|
|
fetch(api)
|
|
|
|
fetch(api)
|
|
|
|
.then((res) => res.json())
|
|
|
|
.then((res) => res.json())
|
|
|
|
.then((data) => {
|
|
|
|
.then((resp) => {
|
|
|
|
if (data.data) {
|
|
|
|
if (resp.status) {
|
|
|
|
if (!data.data.length) {
|
|
|
|
if (!resp.data.data.length) {
|
|
|
|
setData([{}]);
|
|
|
|
setData([{}]);
|
|
|
|
message.warning('暂无数据');
|
|
|
|
message.warning('暂无数据');
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
setData(data?.data);
|
|
|
|
setData(resp.data.data);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (active == 'left') {
|
|
|
|
if (active == 'left') {
|
|
|
|
orgChart &&
|
|
|
|
orgChart &&
|
|
|
|
@ -301,7 +307,7 @@ export default function companyPage() {
|
|
|
|
.render();
|
|
|
|
.render();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [data]);
|
|
|
|
}, [data]);
|
|
|
|
// top bar end
|
|
|
|
|
|
|
|
if (hasRight === false) {
|
|
|
|
if (hasRight === false) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div style={{ width: '100%', top: '40%', position: 'absolute' }}>
|
|
|
|
<div style={{ width: '100%', top: '40%', position: 'absolute' }}>
|
|
|
|
@ -325,7 +331,7 @@ export default function companyPage() {
|
|
|
|
handleSearch(requestData);
|
|
|
|
handleSearch(requestData);
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
type="company"
|
|
|
|
type="company"
|
|
|
|
url="/api/bs/hrmorganization/jclorgchart/getSearchCondition"
|
|
|
|
url="/api/ais/orgChart/getSearchCondition"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<ToolBar
|
|
|
|
<ToolBar
|
|
|
|
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
|
|
|
|
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
|
|
|
|
|
