d3组织架构

src/components/orgChart/index.jsx

@@ -1,6 +1,7 @@
 import React, { useLayoutEffect, useRef, useEffect } from 'react';
 import { OrgChart } from 'd3-org-chart';
 import * as d3 from 'd3';
+import { message } from "antd";
 
 export const OrgChartComponent = (props, ref) => {
   const d3Container = useRef(null);
@@ -30,7 +31,7 @@ export const OrgChartComponent = (props, ref) => {
         .data(props.data)
         .nodeWidth(props.nodeWidth)
         .nodeHeight(props.nodeHeight)
-        .layout("left")
+        .layout("top")
         .linkUpdate(function(d, i, arr) {
           d3.select(this)
             .attr("stroke", "#66BAF5")
@@ -54,6 +55,7 @@ export const OrgChartComponent = (props, ref) => {
         
       } catch(err) {
         console.log(err);
+        message.warning(err);
       }
     }
   }, [props.data, d3Container.current]);

src/components/toolBar/index.jsx

@@ -16,7 +16,7 @@ export default class ToolBar extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            toolActive: "left"
+            toolActive: "top"
         }
     }
 

src/components/topBar/index.jsx

@@ -94,11 +94,6 @@ export class TopBar extends React.Component {
                             <Option value="1">一级</Option>
                             <Option value="2">二级</Option>
                             <Option value="3">三级</Option>
-                            <Option value="4">四级</Option>
-                            <Option value="5">五级</Option>
-                            <Option value="6">六级</Option>
-                            <Option value="7">七级</Option>
-                            <Option value="8">八级</Option>
                         </Select>
                     </Col>
 

src/pages/company.jsx

@@ -188,12 +188,12 @@ export default function companyPage() {
     // tool bar start
     const handleTopLayoutClick = (progressBtn) => {
       progressBtn.current.style.top= 50 + "px";
-      orgChart && orgChart.layout('top').render().fit();
+      orgChart && orgChart.layout('top').render();
     }
 
     const handleLeftLayoutClick = (progressBtn) => {
       progressBtn.current.style.top= 50 + "px";
-      orgChart && orgChart.layout('left').render().fit();
+      orgChart && orgChart.layout('left').render();
     }
 
     const handleZoomIn = (progressBtn) => {

src/pages/user.jsx

@@ -6,6 +6,7 @@ import { TopBar } from '../components/topBar';
 import ToolBar from '../components/toolBar';
 import moment from "moment";
 import qs from 'qs';
+import { message } from 'antd'; 
 
 
 export default function userPage() {
@@ -172,7 +173,11 @@ export default function userPage() {
       topBarSearchRequest = requestData
       let api = "/api/bs/hrmorganization/orgchart/userData" + qs.stringify(requestData, {addQueryPrefix: true})
       fetch(api).then(res => res.json()).then(data => {
+        if(data.data && data.data.length > 0) {
           setData(data.data)
+        } else {
+          message.warning("暂无数据");
+        }
       })
     }
 
@@ -314,20 +319,20 @@ export default function userPage() {
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
-                ">${d.data.department} / ${d.data.fleaderjob}</div>
+                ">${d.data.department ? d.data.department + " / " : ""}${d.data.fleaderjob}</div>
                 <div style="
                   font-size: 10px;
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
                   margin-bottom: 10px;
-                ">${d.data.mobile}</div>
+                ">${d.data.mobile ? d.data.mobile : ""}</div>
                 <div style="
                   font-size: 10px;
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
-                ">地址：${d.data.address}</div>
+                ">${d.data.address ? "地址：" + d.data.address : ""}</div>
               </div>
             </div>
           </div>