组织架构图v3
This commit is contained in:
parent
7f706f49a2
commit
065acfb002
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -184,7 +184,7 @@ export class TopBar extends React.Component {
|
|||
>
|
||||
查询
|
||||
</Button>
|
||||
<Dropdown overlay={this.menu}>
|
||||
<Dropdown menu={this.menu}>
|
||||
<Button>导出</Button>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -480,7 +480,6 @@ export class OrgChart {
|
|||
//InnerFunctions which will update visuals
|
||||
const attrs = this.getChartState();
|
||||
if (!attrs.data || attrs.data.length == 0) {
|
||||
console.log('ORG CHART - Data is empty');
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
@ -637,19 +636,9 @@ export class OrgChart {
|
|||
({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj),
|
||||
)[0];
|
||||
if (nodeFound) {
|
||||
console.log(
|
||||
`ORG CHART - ADD - Node with id "${attrs.nodeId(
|
||||
obj,
|
||||
)}" already exists in tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
if (!parentFound) {
|
||||
console.log(
|
||||
`ORG CHART - ADD - Parent node with id "${attrs.parentNodeId(
|
||||
obj,
|
||||
)}" not found in the tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
if (obj._centered && !obj._expanded) obj._expanded = true;
|
||||
|
|
@ -670,19 +659,9 @@ export class OrgChart {
|
|||
({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj),
|
||||
)[0];
|
||||
if (nodeFound) {
|
||||
console.log(
|
||||
`ORG CHART - ADD - Node with id "${attrs.nodeId(
|
||||
obj,
|
||||
)}" already exists in tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
if (!parentFound) {
|
||||
console.log(
|
||||
`ORG CHART - ADD - Parent node with id "${attrs.parentNodeId(
|
||||
obj,
|
||||
)}" not found in the tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
obj._expanded = true;
|
||||
|
|
@ -701,9 +680,6 @@ export class OrgChart {
|
|||
({ data }) => attrs.nodeId(data) == nodeId,
|
||||
)[0];
|
||||
if (!node) {
|
||||
console.log(
|
||||
`ORG CHART - REMOVE - Node with id "${nodeId}" not found in the tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
@ -1298,7 +1274,6 @@ export class OrgChart {
|
|||
// } else {
|
||||
// this.fit();
|
||||
// }
|
||||
console.log(44444, centeredNodes);
|
||||
this.fit({
|
||||
animate: true,
|
||||
scale: false,
|
||||
|
|
@ -1622,7 +1597,6 @@ export class OrgChart {
|
|||
const attrs = this.getChartState();
|
||||
const { root } = attrs;
|
||||
let descendants = nodes ? nodes : root.descendants();
|
||||
console.log(11111111111, nodes, descendants, scale);
|
||||
const minX = d3.min(
|
||||
descendants,
|
||||
(d) => d.x + attrs.layoutBindings[attrs.layout].nodeLeftX(d),
|
||||
|
|
@ -1639,7 +1613,6 @@ export class OrgChart {
|
|||
descendants,
|
||||
(d) => d.y + attrs.layoutBindings[attrs.layout].nodeBottomY(d),
|
||||
);
|
||||
console.log('333,minY', minX, maxX, minY, maxY);
|
||||
this.zoomTreeBounds({
|
||||
params: { animate: animate, scale },
|
||||
x0: transform == 'export' ? minX - 700 : minX - 50,
|
||||
|
|
@ -1659,11 +1632,6 @@ export class OrgChart {
|
|||
)[0];
|
||||
|
||||
if (!node) {
|
||||
console.log(
|
||||
`ORG CHART - ${
|
||||
expandedFlag ? 'EXPAND' : 'COLLAPSE'
|
||||
} - Node with id (${id}) not found in the tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
node.data._expanded = expandedFlag;
|
||||
|
|
@ -1677,9 +1645,6 @@ export class OrgChart {
|
|||
(d) => attrs.nodeId(d.data) === nodeId,
|
||||
)[0];
|
||||
if (!node) {
|
||||
console.log(
|
||||
`ORG CHART - CENTER - Node with id (${nodeId}) not found in the tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
node.data._centered = true;
|
||||
|
|
@ -1693,9 +1658,6 @@ export class OrgChart {
|
|||
(d) => attrs.nodeId(d.data) === nodeId,
|
||||
)[0];
|
||||
if (!node) {
|
||||
console.log(
|
||||
`ORG CHART - HIGHLIGHT - Node with id (${nodeId}) not found in the tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
node.data._highlighted = true;
|
||||
|
|
@ -1710,9 +1672,6 @@ export class OrgChart {
|
|||
(d) => attrs.nodeId(d.data) === nodeId,
|
||||
)[0];
|
||||
if (!node) {
|
||||
console.log(
|
||||
`ORG CHART - HIGHLIGHTROOT - Node with id (${nodeId}) not found in the tree`,
|
||||
);
|
||||
return this;
|
||||
}
|
||||
node.data._upToTheRootHighlighted = true;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { OrgChartComponent } from '@/components/orgChart';
|
|||
import * as d3 from 'd3';
|
||||
import { TopBar } from '../components/topBar';
|
||||
import ToolBar from '../components/toolBar';
|
||||
import TimeLine from '../components/timeline';
|
||||
import jsPDF from 'jspdf';
|
||||
import moment from 'moment';
|
||||
import qs from 'qs';
|
||||
|
|
@ -40,9 +41,6 @@ export default function companyPage() {
|
|||
}
|
||||
|
||||
let idsStr = idsList.join(',');
|
||||
|
||||
console.log('idsStr', idsStr);
|
||||
|
||||
let api = '';
|
||||
if (topBarSearchRequest) {
|
||||
let request = { ...topBarSearchRequest, ids: idsStr };
|
||||
|
|
@ -314,7 +312,6 @@ export default function companyPage() {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log('data', data);
|
||||
if (active == 'left') {
|
||||
orgChart &&
|
||||
orgChart
|
||||
|
|
@ -369,6 +366,7 @@ export default function companyPage() {
|
|||
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
|
||||
onZoomBehavior={(value) => handleZoomBehavior(value)}
|
||||
/>
|
||||
<TimeLine url="/api/bs/hrmorganization/orgchart/timelines?type=company" />
|
||||
<OrgChartComponent
|
||||
setChart={(chart) => (orgChart = chart)}
|
||||
setClick={(click) => (addNodeChildFunc = click)}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export default function userPage() {
|
|||
// 获取数据
|
||||
useEffect(() => {
|
||||
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(
|
||||
// "/user/data"
|
||||
'/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
|
||||
|
|
|
|||
Loading…
Reference in New Issue