feat: 组织架构图组织透视问题单修改

src/components/orgChart/index.jsx

@@ -6,15 +6,27 @@
  * @FilePath: /org-chart-frant/src/components/orgChart/index.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import React, { useLayoutEffect, useRef, useEffect } from 'react';
-import { OrgChart } from 'd3-org-chart';
+import React, { useLayoutEffect, useRef, useEffect, memo } from 'react';
+import { OrgChart } from '../../d3-org-chart.js';
 import * as d3 from 'd3';
 import { message } from 'antd';
+import moment from 'moment';
 
-export const OrgChartComponent = (props, ref) => {
+export const OrgChartComponent = memo((props, ref) => {
   const d3Container = useRef(null);
+  const chartBackup = useRef(null);
   let chart = null;
-
+  const { data = [{}] } = props;
+  const {
+    requestRes = {
+      date: moment(new Date()).format('YYYY-MM-DD'),
+      fclass: '0',
+      root: '0',
+      level: '3',
+      fisvitual: '0',
+    },
+  } = props;
+  const { level = '3' } = requestRes;
   function addNode(node) {
     chart.addNode(node);
   }
@@ -23,9 +35,9 @@ export const OrgChartComponent = (props, ref) => {
 
   // We need to manipulate DOM
   useLayoutEffect(() => {
-    if (props.data && d3Container.current) {
+    if (d3Container.current) {
       if (!chart) {
-        chart = new OrgChart({ expandLevel: 3 });
+        chart = new OrgChart({ expandLevel: +level == 1 ? 0 : +level });
         window.chart = chart;
       }
       props.setChart(chart);
@@ -34,7 +46,7 @@ export const OrgChartComponent = (props, ref) => {
 
         chart
           .container(d3Container.current)
-          .data(props.data)
+          .data(data)
           .nodeWidth(props.nodeWidth)
           .nodeHeight(props.nodeHeight)
           .layout('top')
@@ -52,13 +64,13 @@ export const OrgChartComponent = (props, ref) => {
           .buttonContent(props.buttonContent)
           .nodeContent(props.nodeContent)
           .render();
-
         chart
           .setCentered(chart.getChartState().root.id)
           .expandExpandNodes()
           .render();
+        chartBackup.current = chart;
         chart.onButtonClick = (event, d) => {
-          buttonClick.bind(chart)(event, d);
+          buttonClick.bind(chartBackup.current)(event, d);
           props.onButtonClick && props.onButtonClick(event, d);
         };
       } catch (err) {
@@ -66,11 +78,11 @@ export const OrgChartComponent = (props, ref) => {
         message.warning(err);
       }
     }
-  }, [props.data, d3Container.current]);
+  }, [data]);
 
   return (
     <div>
       <div ref={d3Container} />
     </div>
   );
-};
+});

src/components/toolBar/index.jsx

@@ -1,78 +1,104 @@
-import React from 'react'
-import add from './img/add.png'
-import decrease from './img/decrease.png'
+import React from 'react';
+import add from './img/add.png';
+import decrease from './img/decrease.png';
 import styles from './index.less';
 import top from './img/top.png';
 import left from './img/left.png';
-import topActive from './img/top_active.png'
-import leftActive from './img/left_active.png'
+import topActive from './img/top_active.png';
+import leftActive from './img/left_active.png';
 
 export default class ToolBar extends React.Component {
-    progressBtn = React.createRef()
-    start = false;
-    clientY = 0
-    originalY = 0
-    top = 50
-    constructor(props) {
-        super(props);
-        this.state = {
-            toolActive: "top"
-        }
-    }
+  progressBtn = React.createRef();
+  start = false;
+  clientY = 0;
+  originalY = 0;
+  top = 50;
+  constructor(props) {
+    super(props);
+    this.state = {
+      toolActive: 'top',
+    };
+  }
 
-    handleMouseDown(e) {
-        this.clientY = e.clientY
-        this.originalY = e.clientY
-        this.top = parseInt(this.progressBtn.current.style.top)
-        this.start = true;
-    }
+  handleMouseDown(e) {
+    this.clientY = e.clientY;
+    this.originalY = e.clientY;
+    this.top = parseInt(this.progressBtn.current.style.top);
+    this.start = true;
+  }
 
-    handleMouseMove(e) {
-        if(this.start && e.clientY - this.clientY > 10) {
-            this.props.onZoomOut()
-            this.clientY = e.clientY
-        } else if(this.start && e.clientY - this.clientY < - 10) {
-            this.props.onZoomIn()
-            this.clientY = e.clientY
-        }
-        if(this.start) {
-            let offset = e.clientY - this.originalY
-            console.log("offset:", offset);
-            if((this.top + offset) < 0) {
-                offset = 0 - this.top
-            }
-            if((this.top + offset) > 100) {
-                offset = 100 - this.top
-            }
-            console.log("(this.top + offset)：", (this.top + offset))
-            this.progressBtn.current.style.top = (this.top + offset) + "px";
-        }
+  handleMouseMove(e) {
+    if (this.start && e.clientY - this.clientY > 10) {
+      this.props.onZoomOut();
+      this.clientY = e.clientY;
+    } else if (this.start && e.clientY - this.clientY < -10) {
+      this.props.onZoomIn();
+      this.clientY = e.clientY;
     }
-
-    handleMouseUp(e) {
-        this.start = false;
-        console.log("this.start:", this.start)
-        
+    if (this.start) {
+      let offset = e.clientY - this.originalY;
+      if (this.top + offset < 0) {
+        offset = 0 - this.top;
+      }
+      if (this.top + offset > 100) {
+        offset = 100 - this.top;
+      }
+      this.progressBtn.current.style.top = this.top + offset + 'px';
     }
-    
-    render() {
-        return (
-            <div className={styles.toolbarWrapper}>
-                <img src={add} style={{cursor: 'pointer'}} onClick={() => {this.props.onZoomIn(this.progressBtn)}}/>
-                <div className={styles.progressWrapper}>
-                    <div className={styles.progressBtn} style={{top: 50}} ref={this.progressBtn}
-                        onMouseDown={(e) => {this.handleMouseDown(e)}}
-                        onMouseMove={(e) => {this.handleMouseMove(e)}}
-                        onMouseUp={(e) => {this.handleMouseUp(e)}}
-                        onMouseLeave={(e) => {this.handleMouseUp(e)}}
-                    ></div>
-                    <div className={styles.progressLine}></div>
-                </div>
-                <img src={decrease} style={{cursor: 'pointer'}} onClick={() => {this.props.onZoomOut(this.progressBtn)}}/>
+  }
 
-                <img className={styles.toolBarItem} src={this.state.toolActive == 'top'? topActive : top} onClick={() => {this.setState({toolActive: "top"}); this.props.onTopLayoutClick(this.progressBtn)}}/>
-                <img className={styles.toolBarItem} src={this.state.toolActive == 'left'? leftActive : left} onClick={() => {this.setState({toolActive: "left"}); this.props.onLeftLayoutClick(this.progressBtn)}}/>
-            </div>
-        )
-    }
-}
+  handleMouseUp(e) {
+    this.start = false;
+    console.log('this.start:', this.start);
+  }
+
+  render() {
+    return (
+      <div className={styles.toolbarWrapper}>
+        <img
+          src={add}
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            this.props.onZoomIn(this.progressBtn);
+          }}
+        />
+        <div className={styles.progressWrapper}>
+          <div
+            className={styles.progressBtn}
+            style={{ top: 50, cursor: 'no-drop' }}
+            ref={this.progressBtn}
+            // onMouseDown={(e) => {this.handleMouseDown(e)}}
+            // onMouseMove={(e) => {this.handleMouseMove(e)}}
+            // onMouseUp={(e) => {this.handleMouseUp(e)}}
+            // onMouseLeave={(e) => {this.handleMouseUp(e)}}
+          ></div>
+          <div className={styles.progressLine}></div>
+        </div>
+        <img
+          src={decrease}
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            this.props.onZoomOut(this.progressBtn);
+          }}
+        />
+
+        <img
+          className={styles.toolBarItem}
+          src={this.state.toolActive == 'top' ? topActive : top}
+          onClick={() => {
+            this.setState({ toolActive: 'top' });
+            this.props.onTopLayoutClick(this.progressBtn);
+          }}
+        />
+        <img
+          className={styles.toolBarItem}
+          src={this.state.toolActive == 'left' ? leftActive : left}
+          onClick={() => {
+            this.setState({ toolActive: 'left' });
+            this.props.onLeftLayoutClick(this.progressBtn);
+          }}
+        />
+      </div>
+    );
+  }
+}

src/components/topBar/index.jsx

@@ -36,6 +36,11 @@ export class TopBar extends React.Component {
     let requestData = { ...this.state.requestData, ...payload };
     this.setState({ requestData });
   }
+  //日期可选择未来
+  // disabledDate (current)  {
+  //   // return current && current >moment().subtract(1, "days");
+  // return current && current > moment().endOf("day");
+  // }
 
   handleExportMenuClick(e) {
     this.props.onExport(e.key == '1' ? 'png' : 'pdf');
@@ -80,8 +85,10 @@ export class TopBar extends React.Component {
             数据日期：
             <DatePicker
               placeholder="请选择日期"
-              style={{ width: 120 }}
+              style={{ width: 130 }}
               locale={locale}
+              allowClear={false}
+              // disabledDate={this.disabledDate}
               defaultValue={moment(new Date())}
               value={
                 this.state.requestData.date && this.state.requestData.date != ''
@@ -157,9 +164,7 @@ export class TopBar extends React.Component {
               查询
             </Button>
             <Dropdown overlay={this.menu}>
-              <Button onClick={this.handleExportButtonClick.bind(this)}>
-                导出
-              </Button>
+              <Button>导出</Button>
             </Dropdown>
           </Col>
         </Row>

src/pages/company.jsx

@@ -9,6 +9,7 @@ import moment from 'moment';
 import qs from 'qs';
 import { message } from 'antd';
 
+let active = 'top';
 export default function companyPage() {
   const [data, setData] = useState(null);
   const [sliderProgress, setSliderProgress] = useState(50);
@@ -70,13 +71,15 @@ export default function companyPage() {
   // 获取部门图片
   function getDepartmentImage() {
     let index = Math.floor(Math.random() * 8) + 1;
-    return `./img/department/${index}.png`;
+    // return `./img/department/${index}.png`;
+    return `./img/department/1.png`;
   }
 
   // 获取部门图片
   function getSubcompanyImage() {
     let index = Math.floor(Math.random() * 3) + 1;
-    return `./img/subcompany/${index}.png`;
+    // return `./img/subcompany/${index}.png`;
+    return `./img/subcompany/2.png`;
   }
 
   // 获取数据
@@ -94,9 +97,9 @@ export default function companyPage() {
   // ButtonContent渲染
   const buttonContentRender = ({ node, state }) => {
     if (node.children) {
-      return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.2;height:11px;font-size:25px; color: #fff;">ˆ</div>  </div>`;
+      return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.35;height:11px;font-size:25px; color: #fff;">ˆ</div>  </div>`;
     } else {
-      return `<div style="border-radius:3px;padding:1px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:-22px;margin-bottom: 3px;font-size:25px; color: #fff;">ˬ</div>  </div>`;
+      return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.35;height:11px;font-size:25px; color: #fff;transform:rotate(180deg)">ˆ</div>  </div>`;
     }
   };
 
@@ -147,22 +150,14 @@ export default function companyPage() {
               letter-spacing: 1px;
               margin-top: 10px;
             ">${d.data.fname}</div>
-              <div style="
-                font-size: 16px;
-                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-                font-weight: 400;
-                color: #D0D0D0;
-                line-height: 19px;
-                margin-top: 10px;
-            ">COMPANY_GROUP</div>
           </div>
         </div>`;
     } else if (d.data.ftype == 1) {
       return `<div onclick="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;">
+          <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-family: Microsoft YaHei-Regular, Microsoft YaHei;
             font-weight: 400;
@@ -175,8 +170,10 @@ export default function companyPage() {
         </div>`;
     } else if (d.data.ftype == 2) {
       return `
-        <div style="width: 100%; height: 100%; background: url('./img/company_job_label.png');background-size: 100% 100%;" onclick="window.open('${departmentUrl}')">
-          <div style="padding-left: 8px; padding-top: 23px;">
+        <div style="width: 100%; height: 100%; background-size: 100% 100%;" onclick="window.open('${departmentUrl}')">
+          <div style='position:absolute'>
+          <img src='./img/company_job_label.png'/></div>
+          <div style="padding-left: 8px; padding-top: 23px;display:flex;align-items:center">
             <img src="${getDepartmentImage()}"/>
             <span style="
             margin-left: 3px;
@@ -195,21 +192,32 @@ export default function companyPage() {
   // tool bar start
   const handleTopLayoutClick = (progressBtn) => {
     progressBtn.current.style.top = 50 + 'px';
-    orgChart && orgChart.layout('top').render();
+    orgChart &&
+      orgChart
+        .layout('top')
+        .setCentered(orgChart.getChartState().root.id)
+        .render();
+    active = 'top';
   };
 
   const handleLeftLayoutClick = (progressBtn) => {
     progressBtn.current.style.top = 50 + 'px';
-    orgChart && orgChart.layout('left').render();
+    orgChart &&
+      orgChart
+        .layout('left')
+        .setCentered(orgChart.getChartState().root.id)
+        .render();
+    active = 'left';
   };
 
   const handleZoomIn = (progressBtn) => {
     if (progressBtn) {
       let top = parseInt(progressBtn.current.style.top) - 10;
-      if (top <= 0) {
-        top = 30;
+      if (top >= 0) {
+        progressBtn.current.style.top = top + 'px';
+      } else {
+        return;
       }
-      progressBtn.current.style.top = top + 'px';
     }
     orgChart && orgChart.zoomIn();
   };
@@ -217,12 +225,12 @@ export default function companyPage() {
   const handleZoomOut = (progressBtn) => {
     if (progressBtn) {
       let top = parseInt(progressBtn.current.style.top) + 10;
-      if (top >= 100) {
-        top = 70;
+      if (top <= 100) {
+        progressBtn.current.style.top = top + 'px';
+      } else {
+        return;
       }
-      progressBtn.current.style.top = top + 'px';
     }
-
     orgChart && orgChart.zoomOut();
   };
 
@@ -237,6 +245,7 @@ export default function companyPage() {
   function downloadPdf(chart) {
     chart.exportImg({
       save: false,
+      full: true,
       onLoad: (base64) => {
         var pdf = new jsPDF();
         var img = new Image();
@@ -272,10 +281,32 @@ export default function companyPage() {
     fetch(api)
       .then((res) => res.json())
       .then((data) => {
-        setData(data.data);
+        if (data.data) {
+          if (!data.data.length) {
+            setData([{}]);
+            message.warning('暂无数据');
+          } else {
+            setData(data?.data);
+          }
+        }
       });
   };
-
+  useEffect(() => {
+    console.log('data', data);
+    if (active == 'left') {
+      orgChart &&
+        orgChart
+          .setCentered(orgChart.getChartState().root?.id)
+          .layout('left')
+          .render();
+    } else {
+      orgChart &&
+        orgChart
+          .setCentered(orgChart.getChartState().root?.id)
+          .layout('top')
+          .render();
+    }
+  }, [data]);
   // top bar end
   if (hasRight === false) {
     //return message.error("对不起，您暂时没有权限", 2);
@@ -316,6 +347,7 @@ export default function companyPage() {
           setClick={(click) => (addNodeChildFunc = click)}
           onNodeClick={onNodeClick}
           data={data}
+          onButtonClick={onButtonClick}
           buttonContent={buttonContentRender}
           nodeWidth={nodeWidthRender}
           nodeHeight={nodeHeightRender}

src/pages/user.jsx

@@ -7,9 +7,17 @@ import ToolBar from '../components/toolBar';
 import moment from 'moment';
 import qs from 'qs';
 import { message } from 'antd';
-
+import jsPDF from 'jspdf';
+let active = 'top';
 export default function userPage() {
   const [data, setData] = useState(null);
+  const [requestRes, setRequestRes] = useState({
+    date: moment(new Date()).format('YYYY-MM-DD'),
+    fclass: '0',
+    root: '0',
+    level: '3',
+    fisvitual: '0',
+  });
   const [progressTop, setProgressTop] = useState(50);
   let addNodeChildFunc = null;
   let orgChart = null;
@@ -79,13 +87,15 @@ export default function userPage() {
 
   // 获取数据
   useEffect(() => {
+    document.cookie =
+      'ecology_JSessionid=aaa1QNMWge48Bh-3oq6oy; JSESSIONID=aaa1QNMWge48Bh-3oq6oy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=0bef9a3b-51e8-452a-8558-5080bdee23ba';
     d3.json(
       // "/user/data"
       '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
         moment(new Date()).format('YYYY-MM-DD'),
     ).then((data) => {
       setData(data.data);
-      setHasRight(data.hasRight);
+      setHasRight(data?.hasRight);
     });
   }, [true]);
 
@@ -110,21 +120,32 @@ export default function userPage() {
   // tool bar start
   const handleTopLayoutClick = (progressBtn) => {
     progressBtn.current.style.top = 50 + 'px';
-    orgChart && orgChart.layout('top').render();
+    orgChart &&
+      orgChart
+        .setCentered(orgChart.getChartState().root.id)
+        .layout('top')
+        .render();
+    active = 'top';
   };
 
   const handleLeftLayoutClick = (progressBtn) => {
     progressBtn.current.style.top = 50 + 'px';
-    orgChart && orgChart.layout('left').render();
+    orgChart &&
+      orgChart
+        .layout('left')
+        .setCentered(orgChart.getChartState().root.id)
+        .render();
+    active = 'left';
   };
 
   const handleZoomIn = (progressBtn) => {
     if (progressBtn) {
       let top = parseInt(progressBtn.current.style.top) - 10;
-      if (top <= 0) {
-        top = 30;
+      if (top >= 0) {
+        progressBtn.current.style.top = top + 'px';
+      } else {
+        return;
       }
-      progressBtn.current.style.top = top + 'px';
     }
     orgChart && orgChart.zoomIn();
   };
@@ -132,10 +153,11 @@ export default function userPage() {
   const handleZoomOut = (progressBtn) => {
     if (progressBtn) {
       let top = parseInt(progressBtn.current.style.top) + 10;
-      if (top >= 100) {
-        top = 70;
+      if (top <= 100) {
+        progressBtn.current.style.top = top + 'px';
+      } else {
+        return;
       }
-      progressBtn.current.style.top = top + 'px';
     }
     orgChart && orgChart.zoomOut();
   };
@@ -147,6 +169,7 @@ export default function userPage() {
   function downloadPdf(chart) {
     chart.exportImg({
       save: false,
+      full: true,
       onLoad: (base64) => {
         var pdf = new jsPDF();
         var img = new Image();
@@ -182,14 +205,31 @@ export default function userPage() {
     fetch(api)
       .then((res) => res.json())
       .then((data) => {
-        if (data.data && data.data.length > 0) {
-          setData(data.data);
-        } else {
-          message.warning('暂无数据');
+        if (data.data) {
+          if (!data.data.length) {
+            setData([{}]);
+            message.warning('暂无数据');
+          } else {
+            setData(data?.data);
+          }
         }
       });
   };
-
+  useEffect(() => {
+    if (active == 'left') {
+      orgChart &&
+        orgChart
+          .setCentered(orgChart.getChartState().root.id)
+          .layout('left')
+          .render();
+    } else {
+      orgChart &&
+        orgChart
+          .setCentered(orgChart.getChartState().root.id)
+          .layout('top')
+          .render();
+    }
+  }, [data]);
   // top bar end
 
   const nodeContentRender = (d, i, arr, state) => {
@@ -204,9 +244,16 @@ export default function userPage() {
     let jobtitleUrl = `/spa/organization/static/index.html#/main/organization/jobExtend/${d.data.fobjid}`;
     // 人员地址
     let userUrl = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${d.data.fleader}`;
-
-    // 通讯录
-    let addressBookUrl = '/spa/hrm/index_mobx.html#/main/hrm/addressBook';
+    // 岗位人员地址
+    let postUserUrl = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${d.data.fobjid}`;
+    //集团通讯录
+    let addressBookGroupUrl = `/spa/hrm/index_mobx.html#/main/hrm/addressBook/?virtualtype=${d.data.fecid}`;
+    // 分部通讯录
+    let addressBookUrl = `/spa/hrm/index_mobx.html#/main/hrm/addressBook/?subcompanyid1=${d.data.fecid}`;
+    // 部门通讯录
+    let addressBookDepartmentUrl = `/spa/hrm/index_mobx.html#/main/hrm/addressBook/?departmentid=${d.data.fecid}`;
+    // 岗位通讯录
+    let addressBookPostUrl = `/spa/hrm/index_mobx.html#/main/hrm/addressBook/?departmentid=${d.data.fobjparentId}`;
 
     if (d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) {
       return `<div>
@@ -218,7 +265,7 @@ export default function userPage() {
               top: -8px;
               background: #F7F9FD;
               z-index: 100;
-              padding: 0px 10px; 
+              padding: 0px 10px;
               font-size: 16px;
               font-family: Microsoft YaHei-Bold, Microsoft YaHei;
               font-weight: bold;
@@ -236,36 +283,58 @@ export default function userPage() {
               <img src="./img/user-card/line1.png" />
               <img src="./img/user-card/line2.png" />
             </span>
-            <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;" onclick="window.open('${userUrl}', '_blank')">
-              <div onclick="window.open('${userUrl}', '_blank')" style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
-                <img src="${
-                  d.data.fleaderimg
-                    ? d.data.fleaderimg
-                    : './img/default_avator.png'
-                }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
+            <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: 90px; 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="${
+              d.data.fleaderimg
+                ? d.data.fleaderimg
+                : d.data.ftype == 0
+                ? './img/company.png'
+                : './img/default_avator.png'
+            }" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px"/>
               </div>
-              <div style="display: inline-block; margin-left: 6px;">
+              <div style="display: inline-block; margin-left: 6px;width:60%"  >
+              <div onclick="${
+                d.data.fleadername ? `window.open('${userUrl}', '_blank')` : ''
+              }">
                 <div style="
-                font-size: 13px;
-                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
-                font-weight: bold;
-                color: #333333;
-                margin-bottom: 9px;
-                ">${d.data.fleadername}</div>
+                  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;
-                ">${d.data.fname} / ${d.data.fleaderjob}</div>
-                <div style="display: flex;" onclick="window.open('${addressBookUrl}', '_blank')">
-                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px;">编制: ${
+                  white-space:nowrap;
+                  overflow:hidden;
+                  text-overflow:ellipsis;"
+                title="${d.data.fname}${
+        d.data.fleaderjob ? `/${d.data.fleaderjob}` : ''
+      }">${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.fplan
                   }</div>
-                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px; margin-left: 10px;">在岗: ${
-                    d.data.fonjob
-                  }</div>
+                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px; margin-left: 10px;" onclick="event.stopPropagation();window.open('${
+                    d.data.ftype == 0
+                      ? addressBookGroupUrl
+                      : d.data.ftype == 1
+                      ? addressBookUrl
+                      : d.data.ftype == 2
+                      ? addressBookDepartmentUrl
+                      : ''
+                  }', '_blank')">在岗: ${d.data.fonjob}</div>
                 </div>
               </div>
             </div>
@@ -281,19 +350,20 @@ export default function userPage() {
               top: -8px;
               background: #F7F9FD;
               z-index: 100;
-              padding: 0px 10px; 
+              padding: 0px 10px;
               font-size: 16px;
               font-family: Microsoft YaHei-Bold, Microsoft YaHei;
               font-weight: bold;
               color: #000000;
-            " onclick="window.open('${
-              jobtitleUrl + d.data.fnumber
-            }', '_blank')">${d.data.fname}</span>
+            " onclick="window.open('${jobtitleUrl}', '_blank')">${d.data.fname}</span>
             <span style="margin-left: 70px;">
               <img src="./img/user-card/line1.png" />
               <img src="./img/user-card/line2.png" />
             </span>
-            <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 40px;">
+            <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="
@@ -302,17 +372,15 @@ export default function userPage() {
                 font-weight: bold;
                 color: #333333;
                 margin-bottom: 23px;
-                " onclick="window.open('${
-                  jobtitleUrl + d.data.fnumber
-                }', '_blank')">${d.data.fname}</div>
+                " onclick="window.open('${jobtitleUrl}', '_blank')">${d.data.fname}</div>
                 <div style="
                 font-size: 13px;
                 font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                 font-weight: 400;
                 color: #333333;
-                "  onclick="window.open('${addressBookUrl}', '_blank')">
+                "  >
                   <span>编制：${d.data.fplan}</span>
-                  <span style="margin-left: 10px;">在岗：${d.data.fonjob}</span>
+                  <span style="margin-left: 10px;" onclick="window.open('${addressBookPostUrl}', '_blank')">在岗：${d.data.fonjob}</span>
                 </div>
               </div>
             </div>
@@ -320,27 +388,54 @@ export default function userPage() {
         </div>`;
     } else if (d.data.ftype == 4) {
       return `<div>
-          <div style="position: relative;" onclick="window.open('${userUrl}', '_blank')">
+          <div style="position: relative;" >
             <img src="./img/user-card/card-label-start.png" />
             <span >
               <img src="./img/user-card/line1.png" />
               <img src="./img/user-card/line2.png" />
             </span>
-            <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
-              <div style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
-                <img src="${
-                  d.data.fleaderimg
-                    ? d.data.fleaderimg
-                    : './img/default_avator.png'
-                }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
+            <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; margin-left: 6px;">
-                <div style="
-                font-size: 13px;
-                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
-                color: #333333;
-                margin-bottom: 9px;
-                ">${d.data.fname}</div>
+              <div style="display: inline-block;  background-size: 100% 100%; width: 90px; 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="${
+                d.data.fleaderimg
+                  ? d.data.fleaderimg
+                  : './img/default_avator.png'
+              }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
+              </div>
+
+              <div style="display: inline-block; margin-left: 6px;width:60%;height:100%"  onclick="window.open('${postUserUrl}', '_blank')">
+                <div style='display:flex;align-items:center;margin-bottom:19px;margin-top:15px'>
+                  <div style="
+                  font-size: 13px;
+                  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+                  color: #333333;"
+                 >${d.data.fname}</div>
+                  <div style="
+                    font-size: 13px;
+                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+                    font-weight: 400;
+                    color: #999;
+                    white-space:nowrap;
+                    overflow:hidden;
+                    flex:1;
+                    font-size:12px;
+                    transform:scale(0.8);
+                    margin-left:-5px;
+                    text-overflow:ellipsis;"
+                  title="${d.data.fleaderlv ? d.data.fleaderlv : ''}/${
+        d.data.fleaderst ? d.data.fleaderst : ''
+      }">${
+        d.data.fleaderlv
+          ? d.data.fleaderst
+            ? `(${d.data.fleaderlv}/`
+            : `(${d.data.fleaderlv})`
+          : ''
+      }${d.data.fleaderst ? `${d.data.fleaderst})` : ''}</div>
+                  </div>
                 <div style="
                   font-size: 13px;
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
@@ -389,15 +484,14 @@ export default function userPage() {
             handleExport(type);
           }}
           onSearch={(requestData) => {
+            setRequestRes(requestData);
             handleSearch(requestData);
           }}
           url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
         />
         <ToolBar
-          onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
-          onLeftLayoutClick={(progressBtn) =>
-            handleLeftLayoutClick(progressBtn)
-          }
+          onTopLayoutClick={handleTopLayoutClick}
+          onLeftLayoutClick={handleLeftLayoutClick}
           onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
           onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
         />
@@ -411,6 +505,7 @@ export default function userPage() {
           nodeWidth={nodeWidthRender}
           nodeHeight={nodeHeightRender}
           nodeContent={nodeContentRender}
+          requestRes={requestRes}
         />
       </div>
     )