diff --git a/src/components/timeline/index.jsx b/src/components/timeline/index.jsx new file mode 100644 index 0000000..df82985 --- /dev/null +++ b/src/components/timeline/index.jsx @@ -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 ( +
+ + {this.state.timelineList.map((item) => { + return ( + +
{item.title}
{' '} +
{item.time}
+ + ); + })} + +
+ ); + } +} diff --git a/src/components/timeline/index.less b/src/components/timeline/index.less new file mode 100644 index 0000000..7ece1ab --- /dev/null +++ b/src/components/timeline/index.less @@ -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; + } +} diff --git a/src/components/topBar/index.jsx b/src/components/topBar/index.jsx index 2bb1fe2..bdc5853 100644 --- a/src/components/topBar/index.jsx +++ b/src/components/topBar/index.jsx @@ -184,7 +184,7 @@ export class TopBar extends React.Component { > 查询 - + diff --git a/src/d3-org-chart.js b/src/d3-org-chart.js index ba08742..62276d0 100644 --- a/src/d3-org-chart.js +++ b/src/d3-org-chart.js @@ -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; diff --git a/src/pages/company.jsx b/src/pages/company.jsx index df2f2b0..d69fdaf 100644 --- a/src/pages/company.jsx +++ b/src/pages/company.jsx @@ -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)} /> + (orgChart = chart)} setClick={(click) => (addNodeChildFunc = click)} diff --git a/src/pages/user.jsx b/src/pages/user.jsx index eea1a5e..8fb751a 100644 --- a/src/pages/user.jsx +++ b/src/pages/user.jsx @@ -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=' +