liang.cheng
/
org-chart-frant
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组织架构图v3

Browse Source
feature/v3
Chengliang 2 years ago
parent 7f706f49a2
commit 065acfb002
6 changed files with 98 additions and 47 deletions
Show Stats Download Patch File Download Diff File

71
src/components/timeline/index.jsx
Unescape Escape View File

@ -0,0 +1,71 @@
/*
* @Author: Chengliang 1546584672@qq.com
* @Date: 2023-06-25 16:33:21
* @LastEditors: Chengliang 1546584672@qq.com
* @LastEditTime: 2023-06-25 18:15:45
* @FilePath: /org-chart-frant/src/components/timeline/index.jsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React from 'react';
import { Timeline } from 'antd';
import styles from './index.less';
export default class TimeLine extends React.Component {
constructor(props) {
super(props);
this.state = {
timelineList: [],
};
}
handleLineClick(item) {
debugger;
}
componentDidMount() {
// fetch(this.props.url)
// .then((res) => res.json())
// .then((data) => {
// this.setState({
// timelineList: data.timelineList,
// });
// });
const datas = [
{ key: '0', title: '当前版本', color: 'blue', time: '2022-01-09' },
{ key: '1', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '2', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '3', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '4', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '5', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '6', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '7', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '8', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '9', title: '测试', color: 'grey', time: '2022-01-09' },
{ key: '10', title: '测试', color: 'grey', time: '2022-01-09' },
];
this.setState({
timelineList: datas,
});
}
render() {
return (
<div className={styles.lineWrapper}>
<Timeline>
{this.state.timelineList.map((item) => {
return (
<Timeline.Item
onClick={this.handleLineClick.bind(this, item)}
className={styles.timeline}
color={item.color}
>
<div>{item.title}</div>{' '}
<div className={styles.time}>{item.time}</div>
</Timeline.Item>
);
})}
</Timeline>
</div>
);
}
}

23
src/components/timeline/index.less
Unescape Escape View File

@ -0,0 +1,23 @@
.lineWrapper {
width: 208px;
height: 480px;
overflow-y: scroll;
position: fixed;
left: 10px;
z-index: 100;
background: #fff;
border-radius: 20px;
padding-top: 10px;
padding-bottom: 10px;
.timeline {
cursor: pointer;
}
.timeline :hover {
color: #1890ff;
}
.time {
color: dimgray;
}
}

2
src/components/topBar/index.jsx
Unescape Escape View File

@ -184,7 +184,7 @@ export class TopBar extends React.Component {
> >
查询 查询
</Button> </Button>
<Dropdown overlay={this.menu}> <Dropdown menu={this.menu}>
<Button>导出</Button> <Button>导出</Button>
</Dropdown> </Dropdown>
</Col> </Col>

41
src/d3-org-chart.js vendored
Unescape Escape View File

@ -480,7 +480,6 @@ export class OrgChart {
//InnerFunctions which will update visuals //InnerFunctions which will update visuals
const attrs = this.getChartState(); const attrs = this.getChartState();
if (!attrs.data || attrs.data.length == 0) { if (!attrs.data || attrs.data.length == 0) {
console.log('ORG CHART - Data is empty');
return this; return this;
} }
@ -637,19 +636,9 @@ export class OrgChart {
({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj), ({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj),
)[0]; )[0];
if (nodeFound) { if (nodeFound) {
console.log(
`ORG CHART - ADD - Node with id "${attrs.nodeId(
obj,
)}" already exists in tree`,
);
return this; return this;
} }
if (!parentFound) { if (!parentFound) {
console.log(
`ORG CHART - ADD - Parent node with id "${attrs.parentNodeId(
obj,
)}" not found in the tree`,
);
return this; return this;
} }
if (obj._centered && !obj._expanded) obj._expanded = true; if (obj._centered && !obj._expanded) obj._expanded = true;
@ -670,19 +659,9 @@ export class OrgChart {
({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj), ({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj),
)[0]; )[0];
if (nodeFound) { if (nodeFound) {
console.log(
`ORG CHART - ADD - Node with id "${attrs.nodeId(
obj,
)}" already exists in tree`,
);
return this; return this;
} }
if (!parentFound) { if (!parentFound) {
console.log(
`ORG CHART - ADD - Parent node with id "${attrs.parentNodeId(
obj,
)}" not found in the tree`,
);
return this; return this;
} }
obj._expanded = true; obj._expanded = true;
@ -701,9 +680,6 @@ export class OrgChart {
({ data }) => attrs.nodeId(data) == nodeId, ({ data }) => attrs.nodeId(data) == nodeId,
)[0]; )[0];
if (!node) { if (!node) {
console.log(
`ORG CHART - REMOVE - Node with id "${nodeId}" not found in the tree`,
);
return this; return this;
} }
@ -1298,7 +1274,6 @@ export class OrgChart {
// } else { // } else {
// this.fit(); // this.fit();
// } // }
console.log(44444, centeredNodes);
this.fit({ this.fit({
animate: true, animate: true,
scale: false, scale: false,
@ -1622,7 +1597,6 @@ export class OrgChart {
const attrs = this.getChartState(); const attrs = this.getChartState();
const { root } = attrs; const { root } = attrs;
let descendants = nodes ? nodes : root.descendants(); let descendants = nodes ? nodes : root.descendants();
console.log(11111111111, nodes, descendants, scale);
const minX = d3.min( const minX = d3.min(
descendants, descendants,
(d) => d.x + attrs.layoutBindings[attrs.layout].nodeLeftX(d), (d) => d.x + attrs.layoutBindings[attrs.layout].nodeLeftX(d),
@ -1639,7 +1613,6 @@ export class OrgChart {
descendants, descendants,
(d) => d.y + attrs.layoutBindings[attrs.layout].nodeBottomY(d), (d) => d.y + attrs.layoutBindings[attrs.layout].nodeBottomY(d),
); );
console.log('333,minY', minX, maxX, minY, maxY);
this.zoomTreeBounds({ this.zoomTreeBounds({
params: { animate: animate, scale }, params: { animate: animate, scale },
x0: transform == 'export' ? minX - 700 : minX - 50, x0: transform == 'export' ? minX - 700 : minX - 50,
@ -1659,11 +1632,6 @@ export class OrgChart {
)[0]; )[0];
if (!node) { if (!node) {
console.log(
`ORG CHART - ${
expandedFlag ? 'EXPAND' : 'COLLAPSE'
} - Node with id (${id}) not found in the tree`,
);
return this; return this;
} }
node.data._expanded = expandedFlag; node.data._expanded = expandedFlag;
@ -1677,9 +1645,6 @@ export class OrgChart {
(d) => attrs.nodeId(d.data) === nodeId, (d) => attrs.nodeId(d.data) === nodeId,
)[0]; )[0];
if (!node) { if (!node) {
console.log(
`ORG CHART - CENTER - Node with id (${nodeId}) not found in the tree`,
);
return this; return this;
} }
node.data._centered = true; node.data._centered = true;
@ -1693,9 +1658,6 @@ export class OrgChart {
(d) => attrs.nodeId(d.data) === nodeId, (d) => attrs.nodeId(d.data) === nodeId,
)[0]; )[0];
if (!node) { if (!node) {
console.log(
`ORG CHART - HIGHLIGHT - Node with id (${nodeId}) not found in the tree`,
);
return this; return this;
} }
node.data._highlighted = true; node.data._highlighted = true;
@ -1710,9 +1672,6 @@ export class OrgChart {
(d) => attrs.nodeId(d.data) === nodeId, (d) => attrs.nodeId(d.data) === nodeId,
)[0]; )[0];
if (!node) { if (!node) {
console.log(
`ORG CHART - HIGHLIGHTROOT - Node with id (${nodeId}) not found in the tree`,
);
return this; return this;
} }
node.data._upToTheRootHighlighted = true; node.data._upToTheRootHighlighted = true;

6
src/pages/company.jsx
Unescape Escape View File

@ -4,6 +4,7 @@ import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3'; import * as d3 from 'd3';
import { TopBar } from '../components/topBar'; import { TopBar } from '../components/topBar';
import ToolBar from '../components/toolBar'; import ToolBar from '../components/toolBar';
import TimeLine from '../components/timeline';
import jsPDF from 'jspdf'; import jsPDF from 'jspdf';
import moment from 'moment'; import moment from 'moment';
import qs from 'qs'; import qs from 'qs';
@ -40,9 +41,6 @@ export default function companyPage() {
} }
let idsStr = idsList.join(','); let idsStr = idsList.join(',');
console.log('idsStr', idsStr);
let api = ''; let api = '';
if (topBarSearchRequest) { if (topBarSearchRequest) {
let request = { ...topBarSearchRequest, ids: idsStr }; let request = { ...topBarSearchRequest, ids: idsStr };
@ -314,7 +312,6 @@ export default function companyPage() {
}; };
useEffect(() => { useEffect(() => {
console.log('data', data);
if (active == 'left') { if (active == 'left') {
orgChart && orgChart &&
orgChart orgChart
@ -369,6 +366,7 @@ export default function companyPage() {
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)} onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
onZoomBehavior={(value) => handleZoomBehavior(value)} onZoomBehavior={(value) => handleZoomBehavior(value)}
/> />
<TimeLine url="/api/bs/hrmorganization/orgchart/timelines?type=company" />
<OrgChartComponent <OrgChartComponent
setChart={(chart) => (orgChart = chart)} setChart={(chart) => (orgChart = chart)}
setClick={(click) => (addNodeChildFunc = click)} setClick={(click) => (addNodeChildFunc = click)}

2
src/pages/user.jsx
Unescape Escape View File

@ -87,7 +87,7 @@ export default function userPage() {
// 获取数据 // 获取数据
useEffect(() => { useEffect(() => {
document.cookie = document.cookie =
'Webstorm-3d4d3ad4=b8ca5bef-a131-4c2b-81da-6f8595481dc2; ecology_JSessionid=aaad2HRSW843U9BJFcUuy; JSESSIONID=aaad2HRSW843U9BJFcUuy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=47f1e1cc-51de-48b3-af04-3875b717805f'; 'ecology_JSessionid=aaabAoBxcpmhQ5GSTpXJy; JSESSIONID=aaabAoBxcpmhQ5GSTpXJy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=137b6014-3b43-44f3-b921-3a7fddbbe91e';
d3.json( d3.json(
// "/user/data" // "/user/data"
'/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' + '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +

Write Preview
Loading…
Cancel
Save