组织架构图V3版本

src/components/drawer/index.jsx

@@ -0,0 +1,348 @@
+import React from 'react';
+import { Drawer, Space, Button, Dropdown, Menu, Table } from 'antd';
+import { OrgChartComponent } from '@/components/orgChart';
+import * as d3 from 'd3';
+import qs from 'qs';
+import { message } from 'antd';
+import jsPDF from 'jspdf';
+import styles from './index.less';
+
+let addNodeChildFunc = null;
+let orgChart = null;
+let active = 'top';
+export default class DrawerComponents extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      data: [],
+      detailType: 'chart',
+      rootId: '',
+    };
+  }
+
+  componentDidMount() {
+    //this.getDeatilDatas();
+  }
+
+  // 点击节点
+  onNodeClick(node) {}
+
+  onButtonClick(event, d) {
+    if (d.children) {
+      let idsList = [];
+      d.children.forEach((item) => {
+        if (item.data.hasChildren && !item._children) {
+          idsList.push(item.data.id);
+        }
+      });
+      if (idsList.length == 0) {
+        return;
+      }
+      let idsStr = idsList.join(',');
+      let api = '/api/bs/hrmorganization/orgchart/asyncUserData?ids=' + idsStr;
+      fetch(api)
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.data) {
+            data.data.forEach((item) => {
+              window.chart.addNode(item);
+            });
+          }
+        });
+    }
+  }
+
+  // 获取部门图片
+  getDepartmentImage() {
+    let index = Math.floor(Math.random() * 8) + 1;
+    return `./img/department/${index}.png`;
+  }
+
+  //获取数据
+  getDeatilDatas(rootId) {
+    const { detailType } = this.state;
+    d3.json(
+      '/api/bs/hrmorganization/orgchart/userData?' +
+        qs.stringify({ detauleType: detailType, rootId: rootId }),
+    ).then((data) => {
+      this.setState(data.data);
+    });
+  }
+
+  // ButtonContent渲染
+  buttonContentRender = ({ node, state }) => {
+    return `
+            <div style="margin-left: 16px; margin-top: 10px;">
+            <img src="./img/button_content.png" />
+            </div>
+        `;
+  };
+
+  // 节点宽度渲染
+  nodeWidthRender = (d) => {
+    return 280;
+  };
+
+  nodeHeightRender = (d) => {
+    return 160;
+  };
+
+  // tool bar start
+  handleTopLayoutClick = (progressBtn) => {
+    progressBtn.current.style.top = 50 + 'px';
+    orgChart &&
+      orgChart
+        .setCentered(orgChart.getChartState().root.id)
+        .layout('top')
+        .render();
+    active = 'top';
+  };
+
+  handleLeftLayoutClick = (progressBtn) => {
+    progressBtn.current.style.top = 50 + 'px';
+    orgChart &&
+      orgChart
+        .layout('left')
+        .setCentered(orgChart.getChartState().root.id)
+        .render();
+    active = 'left';
+  };
+
+  handleZoomIn = (progressBtn) => {
+    if (progressBtn) {
+      let top = parseInt(progressBtn.current.style.top) - 10;
+      if (top >= 0) {
+        progressBtn.current.style.top = top + 'px';
+      } else {
+        return;
+      }
+    }
+    orgChart && orgChart.zoomIn();
+  };
+
+  handleZoomOut = (progressBtn) => {
+    if (progressBtn) {
+      let top = parseInt(progressBtn.current.style.top) + 10;
+      if (top <= 100) {
+        progressBtn.current.style.top = top + 'px';
+      } else {
+        return;
+      }
+    }
+    orgChart && orgChart.zoomOut();
+  };
+
+  downloadPdf(chart) {
+    chart.exportImg({
+      save: false,
+      full: true,
+      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');
+        };
+      },
+    });
+  }
+
+  handleExport = (e) => {
+    let type = e.key == '1' ? 'png' : 'pdf';
+    if (type == 'png') {
+      orgChart && orgChart.exportImg({ full: true });
+    } else {
+      orgChart && downloadPdf(orgChart);
+    }
+  };
+
+  /**
+   * 节点渲染
+   */
+  nodeContentRender = (d, i, arr, state) => {
+    if (d.data.ftype == 2) {
+      return `<div style="position: relative;">
+                <div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;position:relative;z-index:2">
+                    <div style='position:absolute;z-index:-1;top:0'>
+                        <img src='./img/user-card/user-card.png'>
+                    </div>
+                    <div style="display: inline-block;  background-size: 100% 100%; width: 35%; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
+                        <img src='./img/user-card/avatar-outer.png' style='position:absolute;width:90px;height:90px;left:11px'/>
+                        <img src="./img/department.png" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
+                    </div>
+                    <div style="display: inline-block; margin-left: 6px;width: 55%">
+                        <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;margin-bottom: 9px;">${
+                          d.data.fleadername
+                        }</div>
+                        <div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;margin-bottom: 19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
+                            ${d.data.fname}${
+        d.data.fleaderjob ? `/${d.data.fleaderjob}` : ''
+      }
+                        </div>
+                    </div>
+                    <div style="display:flex" >
+                        <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px;">
+                            在岗: ${d.data.fonjob}
+                        </div>
+                    </div>
+                </div>
+              </div>`;
+    } else if (d.data.ftype == 3) {
+      return `<div style="position: relative;">
+                <div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 40px;">
+                    <div style='position:absolute;z-index:-1;top:16px'>
+                        <img src='./img/user-card/user-card.png'>
+                    </div>
+                    <img src="./img/user-card/jobicon.png" style="margin-left: 20px; vertical-align: top;"/>
+                    <div style="display: inline-block; margin-left: 15px;">
+                        <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;margin-bottom: 23px;">${d.data.fname}</div>
+                        <div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;">
+                            <span style="margin-left: 10px;">在岗：${d.data.fonjob}</span>
+                        </div>
+                    </div>
+                </div>
+              </div>`;
+    } else if (d.data.ftype == 4) {
+      return `<div style="position: relative;" >
+                <div style="height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
+                    <div style='position:absolute;z-index:-1;top:16px'>
+                        <img src='./img/user-card/user-card.png'>
+                    </div>
+                    <div style="display: inline-block;  background-size: 100% 100%; width: 35%; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
+                        <img src='./img/user-card/avatar-outer.png' style='position:absolute;width:90px;height:90px;left:11px;z-index:-1'/>
+                        <img src="${
+                          d.data.fleaderimg
+                            ? d.data.fleaderimg
+                            : './img/default_avator.png'
+                        }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;z-index:999" />
+                    </div>
+                    <div style="display: inline-block; margin-left: 6px;width: 55%;height:100%">
+                        <div style='display:flex;align-items:center;margin-bottom:19px;margin-top:15px'>
+                            <div style="font-size: 13px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">${
+                              d.data.fname
+                            }</div>
+                        </div>
+                    </div>
+                </div>
+             </div>`;
+    }
+  };
+
+  showDrawer = (rootId) => {
+    this.getDeatilDatas(rootId);
+    this.setState({ open: true, rootId: rootId });
+  };
+
+  onClose = () => {
+    this.setState({ open: false });
+  };
+
+  changeDetail = () => {
+    const { detailType, rootId } = this.state;
+    this.getDeatilDatas(rootId);
+    this.setState({
+      detailType: detailType == 'chart' ? 'table' : 'chart',
+    });
+  };
+
+  render() {
+    const { open, data, detailType } = this.state;
+
+    const menu = (
+      <Menu
+        onClick={this.handleExport.bind(this)}
+        items={[
+          {
+            label: '导出图片',
+            key: '1',
+          },
+          {
+            label: '导出PDF',
+            key: '2',
+          },
+        ]}
+      />
+    );
+    const dataSource = [
+      {
+        key: '1',
+        name: '胡彦斌',
+        age: 32,
+        address: '西湖区湖底公园1号',
+      },
+      {
+        key: '2',
+        name: '胡彦祖',
+        age: 42,
+        address: '西湖区湖底公园1号',
+      },
+    ];
+
+    const columns = [
+      {
+        title: '姓名',
+        dataIndex: 'name',
+        key: 'name',
+      },
+      {
+        title: '年龄',
+        dataIndex: 'age',
+        key: 'age',
+      },
+      {
+        title: '住址',
+        dataIndex: 'address',
+        key: 'address',
+      },
+    ];
+
+    return (
+      <Drawer
+        title="详细信息"
+        width={920}
+        onClose={this.onClose}
+        open={open}
+        bodyStyle={{
+          paddingBottom: 80,
+        }}
+        extra={
+          <Space>
+            <Dropdown overlay={menu}>
+              <Button type="primary">导出</Button>
+            </Dropdown>
+            <img
+              style={{ width: 36, height: 36, cursor: 'pointer' }}
+              src="./img/change.png"
+              onClick={this.changeDetail}
+            />
+          </Space>
+        }
+      >
+        {detailType == 'chart' ? (
+          <OrgChartComponent
+            setChart={(chart) => (orgChart = chart)}
+            setClick={(click) => (addNodeChildFunc = click)}
+            onNodeClick={this.onNodeClick}
+            onButtonClick={this.onButtonClick}
+            data={data}
+            buttonContent={this.buttonContentRender}
+            nodeWidth={this.nodeWidthRender}
+            nodeHeight={this.nodeHeightRender}
+            nodeContent={this.nodeContentRender}
+          />
+        ) : (
+          <Table dataSource={dataSource} columns={columns} />
+        )}
+      </Drawer>
+    );
+  }
+}

src/components/timeline/index.jsx

@@ -2,7 +2,7 @@
  * @Author: Chengliang 1546584672@qq.com
  * @Date: 2023-06-25 16:33:21
  * @LastEditors: Chengliang 1546584672@qq.com
- * @LastEditTime: 2023-06-28 16:02:39
+ * @LastEditTime: 2023-06-29 14:24:04
  * @FilePath: /org-chart-frant/src/components/timeline/index.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -33,29 +33,17 @@ export default class TimeLine extends React.Component {
   }
 
   componentDidMount() {
-    // fetch(this.props.url)
+    this.searchTimeLines(this.props.url);
-    //   .then((res) => res.json())
+  }
-    //   .then((data) => {
+
-    //     this.setState({
+  searchTimeLines(url) {
-    //       timelineList: data.timelineList,
+    fetch(url)
-    //     });
+      .then((res) => res.json())
-    //   });
+      .then((data) => {
-    const datas = [
+        this.setState({
-      { key: 0, id: 0, title: '当前版本', color: 'blue', time: '' },
+          timelineList: data.timelineList,
-      { key: 1, id: 1, title: '测试', color: 'grey', time: '2022-01-09' },
+        });
-      { key: 2, id: 2, title: '测试', color: 'grey', time: '2022-01-09' },
+      });
-      { key: 3, id: 3, title: '测试', color: 'grey', time: '2022-01-09' },
-      { key: 4, id: 4, title: '测试', color: 'grey', time: '2022-01-09' },
-      { key: 5, id: 5, title: '测试', color: 'grey', time: '2022-01-09' },
-      { key: 6, id: 6, title: '测试', color: 'grey', time: '2022-01-09' },
-      { key: 7, id: 7, title: '测试', color: 'grey', time: '2022-01-09' },
-      { key: 8, id: 8, title: '测试', color: 'grey', time: '2022-01-09' },
-      { key: 9, id: 9, title: '测试', color: 'grey', time: '2022-01-09' },
-      { key: 10, id: 10, title: '测试', color: 'grey', time: '2022-01-09' },
-    ];
-    this.setState({
-      timelineList: datas,
-    });
   }
 
   render() {

src/components/topBar/index.jsx

@@ -94,18 +94,17 @@ export class TopBar extends React.Component {
    * @param {} parentId
    * @returns
    */
-  getNodeTreeNode = (parentId) => {
+  getNodeTreeNode = (url, merge = true) => {
-    const { fclass } = this.state.requestData;
+    fetch(url)
-    let api =
-      '/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
-      parentId +
-      '&fclass=' +
-      fclass;
-    fetch(api)
       .then((res) => res.json())
       .then((data) => {
         if (data.api_status) {
-          let arr = [...this.state.rootTreeData, ...data.companyTree];
+          let arr = [];
+          if (merge) {
+            arr = [...this.state.rootTreeData, ...data.companyTree];
+          } else {
+            arr = [...data.companyTree];
+          }
           this.setState({
             rootTreeData: arr,
           });
@@ -122,7 +121,13 @@ export class TopBar extends React.Component {
     new Promise((resolve) => {
       const { id } = treeNode.props;
       setTimeout(() => {
-        this.getNodeTreeNode(id);
+        const { fclass } = this.state.requestData;
+        let api =
+          '/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
+          id +
+          '&fclass=' +
+          fclass;
+        this.getNodeTreeNode(api);
         resolve(undefined);
       }, 500);
     });
@@ -190,10 +195,11 @@ export class TopBar extends React.Component {
                   fisvitual: '0',
                 };
                 this.handleFormChange(requestData);
-                this.getSeatchCondition(
+                this.getNodeTreeNode(
-                  `/api/bs/hrmorganization/orgchart/getCondition?fclass=${value}&type=${this.props.type}`,
+                  `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`,
+                  false,
                 );
-                this.props.onSearch(requestData);
+                this.props.changeFclass(requestData);
               }}
             >
               {this.state.fclasslist.map((item) => (

src/d3-org-chart.js

@@ -1076,7 +1076,8 @@ export class OrgChart {
         ) {
           return;
         }
-        attrs.onNodeClick(attrs.nodeId(data));
+        //attrs.onNodeClick(attrs.nodeId(data));
+        attrs.onNodeClick(data);
       });
 
     // Add background rectangle for the nodes

src/pages/company.jsx

@@ -5,14 +5,17 @@ import * as d3 from 'd3';
 import { TopBar } from '../components/topBar';
 import ToolBar from '../components/toolBar';
 import TimeLine from '../components/timeline';
+import DrawerComponents from '../components/drawer';
 import jsPDF from 'jspdf';
 import moment from 'moment';
 import qs from 'qs';
-import { message } from 'antd';
+import { message, Spin } from 'antd';
 
 let active = 'top';
 export default function companyPage() {
   let topbar = null;
+  let timeLine = null;
+  let drawerCom = null;
   const [data, setData] = useState(null);
   const [sliderProgress, setSliderProgress] = useState(50);
   let addNodeChildFunc = null;
@@ -21,10 +24,13 @@ export default function companyPage() {
   let topBarSearchRequest = null;
   const [hasRight, setHasRight] = useState('');
   const [id, setId] = useState(0);
+  const [spinning, setSpinning] = useState(false);
 
   // 点击节点
-  function onNodeClick(nodeId) {
+  function onNodeClick(node) {
-    // alert('clicked ' + nodeId);
+    if (node.ftype == '2') {
+      drawerCom.showDrawer(node.id);
+    }
   }
 
   // 扩展按钮点击
@@ -74,8 +80,7 @@ export default function companyPage() {
 
   // 获取分部图片
   function getSubcompanyImage() {
-    let index = Math.floor(Math.random() * 3) + 1;
+    return `./img/back/level1.png`;
-    return `./img/subcompany/2.png`;
   }
 
   // 获取数据
@@ -113,7 +118,7 @@ export default function companyPage() {
     if (d.data.ftype == 0) {
       return 100;
     } else if (d.data.ftype == 1) {
-      return 80;
+      return 106;
     } else if (d.data.ftype == 2) {
       return 106;
     }
@@ -121,16 +126,8 @@ export default function companyPage() {
   };
 
   const nodeContentRender = (d, i, arr, state) => {
-    // 集团地址
-    let companyUrl =
-      '/spa/organization/static/index.html#/main/organization/group';
-    // 分部地址
-    let subcompanyUrl = `/spa/organization/static/index.html#/main/organization/companyExtend/${d.data.fobjid}`;
-    // 部门地址
-    let departmentUrl = `/spa/organization/static/index.html#/main/organization/departmentExtend/${d.data.fobjid}`;
-
     if (d.data.ftype == 0) {
-      return `<div onclick="if(${d.data.fisvitual}==1) return;window.open('${companyUrl}', '_blank')" style="text-align:center">
+      return `<div style="text-align:center">
           <div style="display: inline-block; vertical-align: top;">
             <img src="./img/company.png" />
           </div>
@@ -147,23 +144,19 @@ export default function companyPage() {
           </div>
         </div>`;
     } else if (d.data.ftype == 1) {
-      return `<div onclick="if(${d.data.fisvitual}==1) return;window.open('${subcompanyUrl}', '_blank')">
+      return `<div style='position:absolute;height:100%'>
-          <div style="width: 144px; border: 1px solid #66BAF5; margin: 10px auto 0px; border-radius: 10px; text-align: center;
+            <img style='width:144px;height:106px' src="${getSubcompanyImage()}"/>
-            font-size: 14px;
-            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-            font-weight: 400;
-            color: #333333;
-            height: 56px;
-            padding: 15px 10px;
-          ">
-            ${d.data.fname}
           </div>
-        </div>`;
+          <div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
+            font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;"> 
+            <div title=${
+              d.data.fname
+            } style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
+            line-height: 18px;word-break: break-all;">${d.data.fname}</div>
+          </div>`;
     } else if (d.data.ftype == 2) {
       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
-        }==1) return;window.open('${departmentUrl}')">
           <div style='position:absolute;height:100%'>
             <img style='width:144px;height:106px' src="${getDepartmentImage()}"/>
           </div>
@@ -278,6 +271,7 @@ export default function companyPage() {
    * @param {*} requestData
    */
   const handleSearch = (requestData, cache = true) => {
+    setSpinning(true);
     if (cache) {
       requestData = { ...requestData, id: id };
     }
@@ -296,9 +290,21 @@ export default function companyPage() {
             setData(data?.data);
           }
         }
+        setSpinning(false);
       });
   };
 
+  /**
+   * 切换维度
+   * @param {*} requestData
+   */
+  const handleChange = (requestData) => {
+    timeLine.searchTimeLines(
+      `/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
+    );
+    handleSearch(requestData);
+  };
+
   useEffect(() => {
     if (active == 'left') {
       orgChart &&
@@ -338,6 +344,9 @@ export default function companyPage() {
           onSearch={(requestData) => {
             handleSearch(requestData);
           }}
+          changeFclass={(requestData) => {
+            handleChange(requestData);
+          }}
           type="company"
           url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company"
         />
@@ -351,22 +360,27 @@ export default function companyPage() {
           onZoomBehavior={(value) => handleZoomBehavior(value)}
         />
         <TimeLine
+          ref={(r) => (timeLine = r)}
           onClick={(timeline) => {
             timeLineSearch(timeline);
           }}
-          url={'/api/bs/hrmorganization/orgchart/timelines?id=' + id}
+          url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
-        />
-        <OrgChartComponent
-          setChart={(chart) => (orgChart = chart)}
-          setClick={(click) => (addNodeChildFunc = click)}
-          onNodeClick={onNodeClick}
-          data={data}
-          onButtonClick={onButtonClick}
-          buttonContent={buttonContentRender}
-          nodeWidth={nodeWidthRender}
-          nodeHeight={nodeHeightRender}
-          nodeContent={nodeContentRender}
         />
+        <Spin size="large" spinning={spinning}>
+          <OrgChartComponent
+            setChart={(chart) => (orgChart = chart)}
+            setClick={(click) => (addNodeChildFunc = click)}
+            onNodeClick={onNodeClick}
+            data={data}
+            onButtonClick={onButtonClick}
+            buttonContent={buttonContentRender}
+            nodeWidth={nodeWidthRender}
+            nodeHeight={nodeHeightRender}
+            nodeContent={nodeContentRender}
+          />
+        </Spin>
+
+        <DrawerComponents ref={(r) => (drawerCom = r)} />
       </div>
     )
   );

src/pages/user.jsx

@@ -5,7 +5,6 @@ import * as d3 from 'd3';
 import { TopBar } from '../components/topBar';
 import ToolBar from '../components/toolBar';
 import TimeLine from '../components/timeline';
-
 import moment from 'moment';
 import qs from 'qs';
 import { message } from 'antd';
@@ -14,6 +13,7 @@ let active = 'top';
 export default function userPage() {
   const [data, setData] = useState(null);
   let topbar = null;
+  let timeLine = null;
   const [topBarSearchRequest, setTpBarSearchRequest] = useState(null);
   const [requestRes, setRequestRes] = useState({
     date: moment(new Date()).format('YYYY-MM-DD'),
@@ -99,7 +99,7 @@ export default function userPage() {
   // 获取数据
   useEffect(() => {
     document.cookie =
-      'ecology_JSessionid=aaaMxyh0rOLot5nEk86Jy; JSESSIONID=aaaMxyh0rOLot5nEk86Jy; __randcode__=39ee6033-5f6f-4e53-ad53-5a3de97645eb; Systemlanguid=7; languageidweaver=7; loginidweaver=sysadmin; loginuuids=1';
+      'ecology_JSessionid=aaazPUne5WAU1eB9vTfKy; JSESSIONID=aaazPUne5WAU1eB9vTfKy; Systemlanguid=7; languageidweaver=7; loginidweaver=sysadmin; loginuuids=1; __randcode__=0fd53114-a13b-400b-a7bc-bb0ffb7ab567';
     d3.json(
       // "/user/data"
       '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
@@ -172,10 +172,6 @@ export default function userPage() {
     orgChart && orgChart.zoomOut();
   };
 
-  // tool bar end
-
-  // top bar start
-
   function downloadPdf(chart) {
     chart.exportImg({
       save: false,
@@ -229,6 +225,17 @@ export default function userPage() {
       });
   };
 
+  /**
+   * 切换维度
+   * @param {*} requestData
+   */
+  const handleChange = (requestData) => {
+    timeLine.searchTimeLines(
+      `/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
+    );
+    handleSearch(requestData);
+  };
+
   useEffect(() => {
     if (active == 'left') {
       orgChart &&
@@ -512,6 +519,9 @@ export default function userPage() {
             setRequestRes(requestData);
             handleSearch(requestData);
           }}
+          changeFclass={(requestData) => {
+            handleChange(requestData);
+          }}
           type="user"
           url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=user"
         />
@@ -522,10 +532,11 @@ export default function userPage() {
           onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
         />
         <TimeLine
+          ref={(r) => (timeLine = r)}
           onClick={(timeline) => {
             timeLineSearch(timeline);
           }}
-          url={'/api/bs/hrmorganization/orgchart/timelines?id=' + id}
+          url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
         />
         <OrgChartComponent
           setChart={(chart) => (orgChart = chart)}