保时捷人员组织架构前端代码编写

src/components/OrgChart.jsx

@@ -14,41 +14,55 @@ export class OrgChart extends Component {
     this.state = {...this.state, ...props}
   }
 
-  showOrHidden = (node) => {
+  showOrHidden = (node, layer) => {
     if (node.showChildren === 0) {
-      this.showChildren(node)
+      this.showChildren(node, layer)
     } else {
-      this.hiddenChildren((node))
+      this.hiddenChildren(node, layer)
     }
   }
 
-  showChildren = (node) => {
+  showChildren = (node, layer) => {
-    node.showChildren = 1
     this.setState({
-      data: {...this.state.data}
+      orgChildren: ""
     })
+    this.props.showChildren(node, layer)
+    // node.showChildren = 1
+    // node.showBrother = 1
+    // node.children?.forEach(item=>item.show=1)
+    // this.setState({
+    //   data: {...this.state.data}
+    // })
   }
 
 
-  hiddenChildren = (node) => {
+  hiddenChildren = (node, layer) => {
     this.setState({
       orgChildren: "hidden-org-children"
     })
-    setTimeout(() => {
+    setTimeout(()=>{
-      node.showChildren = 0
+      this.props.hiddenChildren(node, layer)
-      this.hiddenChildrenStack(node)
       this.setState({
-        data: {...this.state.data},
+        orgChildren: ""
-        orgChildren: "",
       })
-    }, 300)
+    },700)
+
+    // setTimeout(() => {
+
+    // node.showChildren = 0
+    // this.hiddenChildrenStack(node)
+    // this.setState({
+    // data: {...this.state.data},
+    // orgChildren: "",
+    // })
+    // }, 700)
   }
 
-  hiddenChildrenStack = (node)=>{
+  hiddenChildrenStack = (node) => {
-    if(!node.children || node.children.length === 0){
+    if (!node.children || node.children.length === 0) {
       return
     }
-    node.children.forEach(item=>{
+    node.children.forEach(item => {
       item.showChildren = 0
       this.hiddenChildrenStack(item)
     })
@@ -56,31 +70,41 @@ export class OrgChart extends Component {
 
   getOrgChartNode = (node) => {
     return <Fragment>
-      <div className="org-chart-item">
+      <div className={node.show && node.show === 1
+        ?
+        (this.props.parent?.showBrother ? "org-chart-item" : "org-chart-item hidden-brother")
+        : "org-chart-item hidden-node"}>
         {
-          node.isRoot ? "" : (this.props.parent && this.props.parent.show && this.props.parent.show === 1 ?
+          node.isRoot ? "" : (this.props.parent?.show === 1 ?
-            <i className="hidden-parent-icon cus_iconfont icon-zhankai_mian"
+            <i className="hover-icon hidden-parent-icon cus_iconfont icon-zhankai_mian"
-               onClick={()=>this.props.hiddenParent(this.props.parent)}></i>
+               onClick={() => this.props.hiddenParent(node, this.props.layer)}></i>
             :
-            <i className="show-parent-icon cus_iconfont icon-zhankai_mian"
+            <i className="hover-icon show-parent-icon cus_iconfont icon-zhankai_mian"
-               onClick={()=>this.props.showParent(this.props.parent)}></i>)
+               onClick={() => this.props.showParent(node, this.props.layer)}></i>)
         }
         {this.state.getChartNode(node)}
-        {/*{*/}
+        {
-        {/*  node.children && node.children.length > 0 ?  (node.showChildren === 0  ?*/}
+          this.props.parent &&
-        {/*    <i className="expansion-icon show-icon cus_iconfont icon-zhankai_mian"*/}
+          this.props.parent.children.length > 1 &&
-        {/*    onClick={()=>this.showChildren(node)}>*/}
+          this.props.parent?.show  ? <Fragment><i
-        {/*    </i>*/}
+            className="show-or-hidden-brother left cus_iconfont icon-zhankai"
-        {/*    :*/}
+            onClick={() => {
-        {/*  <i className="expansion-icon hidden-icon cus_iconfont icon-zhankai_mian"*/}
+              this.props.showOrHiddenBrother(node, this.props.layer)
-        {/*     onClick={()=>this.hiddenChildren(node)}>*/}
+            }}
-        {/*  </i>) : ""*/}
+          ></i>
-        {/*}*/}
+            <i
+              className="show-or-hidden-brother right cus_iconfont icon-zhankai"
+              onClick={() => {
+                this.props.showOrHiddenBrother(node, this.props.layer)
+              }}
+            ></i>
+          </Fragment> : ""
+        }
         {
           node.children && node.children.length > 0 ? <i
             className="show-or-hidden cus_iconfont icon-zhankai"
             onClick={() => {
-              this.showOrHidden(node)
+              this.showOrHidden(node, this.props.layer)
             }}
           ></i> : ""
         }
@@ -89,69 +113,84 @@ export class OrgChart extends Component {
     // return this.props.getChartNode(node)
   }
 
-  getOrgItem = (parent) => {
+  getOrgItem = () => {
     let getChartNode = this.state.getChartNode
     let node = this.state.data
     if (node.children && node.children.length > 0) {
       return (
         <div className="org-root">
-          <div className="org-chart-node "
+          <div className={node.show ? "org-chart-node " : "org-chart-node hidden-node"}
                onMouseOver={() => this.setState({marginTop: 2})}
                onMouseOut={() => this.setState({marginTop: 0})}
-               >
+          >
             {
               this.getOrgChartNode(node)
             }
           </div>
           {
             node.showChildren === 1 ? <Fragment>
-              <div className="line bottom-down-line" style={{
+              <div className={node.show && node.show === 1 ? "line bottom-down-line" :
+                "line bottom-down-line hidden-node"} style={{
                 marginTop: this.state.marginTop + "px"
               }}></div>
               <div className={'org-children-chart ' + this.state.orgChildren} ref="orgChildren">
-
                 {
                   node.children.length === 1 ?
-                    <OrgChart key={node.children[0].name} data={node.children[0]}
+                    <OrgChart key={node.children[0].id} data={node.children[0]}
                               getChartNode={getChartNode}
                               parent={node}
+                              showChildren={this.props.showChildren}
+                              hiddenChildren={this.props.hiddenChildren}
+                              layer={this.props.layer === undefined ? 1 : this.props.layer + 1}
                               showParent={this.props.showParent}
                               hiddenParent={this.props.hiddenParent}
+                              showOrHiddenBrother={this.props.showOrHiddenBrother}
                               lineClass="line"
-                              ></OrgChart>
+                    ></OrgChart>
-
+                    :
-                  : node.children.map((item, index) => {
+                    node.children.map((item, index) => {
-                    if (index === 0) {
+                      if (index === 0) {
-                      return <OrgChart key={item.name} data={item}
+                        return <OrgChart key={item.id} data={item}
+                                         getChartNode={getChartNode}
+                                         parent={node}
+                                         hiddenChildren={this.props.hiddenChildren}
+                                         showChildren={this.props.showChildren}
+                                         layer={this.props.layer === undefined ? 1 : this.props.layer + 1}
+                                         showParent={this.props.showParent}
+                                         hiddenParent={this.props.hiddenParent}
+                                         showOrHiddenBrother={this.props.showOrHiddenBrother}
+                                         lineClass="line right-row-line"
+                        ></OrgChart>
+                      }
+                      if (index === node.children.length - 1) {
+                        return <OrgChart key={item.id}
+                                         getChartNode={getChartNode}
+                                         parent={node}
+                                         hiddenChildren={this.props.hiddenChildren}
+                                         showChildren={this.props.showChildren}
+                                         layer={this.props.layer === undefined ? 1 : this.props.layer + 1}
+                                         showParent={this.props.showParent}
+                                         hiddenParent={this.props.hiddenParent}
+                                         showOrHiddenBrother={this.props.showOrHiddenBrother}
+                                         data={item} lineClass="line left-row-line"
+                        ></OrgChart>
+                      }
+                      return <OrgChart key={item.id}
                                        getChartNode={getChartNode}
                                        parent={node}
+                                       hiddenChildren={this.props.hiddenChildren}
+                                       showChildren={this.props.showChildren}
+                                       layer={this.props.layer === undefined ? 1 : this.props.layer + 1}
                                        showParent={this.props.showParent}
                                        hiddenParent={this.props.hiddenParent}
-                                       lineClass="line right-row-line"
+                                       showOrHiddenBrother={this.props.showOrHiddenBrother}
-                                       ></OrgChart>
+                                       data={item} lineClass="line row-line"
-                    }
+                      ></OrgChart>
-                    if (index === node.children.length - 1) {
+                    })
-                      return <OrgChart key={item.name}
-                                       getChartNode={getChartNode}
-                                       parent={node}
-                                       showParent={this.props.showParent}
-                                       hiddenParent={this.props.hiddenParent}
-                                       data={item} lineClass="line left-row-line"
-                                       ></OrgChart>
-                    }
-                    return <OrgChart key={item.name}
-                                     getChartNode={getChartNode}
-                                     parent={node}
-                                     showParent={this.props.showParent}
-                                     hiddenParent={this.props.hiddenParent}
-                                     data={item} lineClass="line row-line"
-                                     ></OrgChart>
-                  })
                 }
               </div>
             </Fragment> : ""
           }
-
         </div>
       )
     } else {
@@ -163,12 +202,22 @@ export class OrgChart extends Component {
     return (
       <Fragment>
         {
-          this.state.lineClass ?
+          this.state.lineClass && this.props.data?.show ?
             <div className="org-chart-node">
-              <div className={this.state.lineClass}
+              {
-                   ></div>
+                this.props.parent?.showBrother ?
-              <div className="line top-down-line"
+                  <div className={
-                   ></div>
+                    this.props.parent?.show
+                      ?
+                      this.state.lineClass : this.state.lineClass + " hidden-node"}
+                  ></div>
+                  : <div className={
+                    this.state.lineClass + " hidden-node"}
+                  ></div>
+              }
+              <div className={this.props.parent && this.props.parent.show && this.props.parent.show === 1
+                ? "line top-down-line" : "line top-down-line hidden-node"}
+              ></div>
               {
                 this.getOrgItem(this.props.parent)
               }

src/components/OrgChartNode.jsx

@@ -9,13 +9,20 @@ export class OrgChartNode extends Component {
     return (
       <Fragment>
         <div className="org-chart-node-item">
-          <div className="node-container">
+          <div className={node.current ? "node-container current" : "node-container"}>
             <div className="avatar-container"
-                 style={{
+                 style={node.avatar ? {
                    background: `url('${node.avatar}') 0 0 no-repeat`,
                    backgroundSize: '100px'
+                 } : {
+                   lineHeight: "100px",
+                   textAlign:'center',
+                   fontSize:'26px',
+                   fontWeight:'600',
+                   color:'#FFF'
                  }}
             >
+              {node.avatar ? "" : node.name.substring(0,1)}
             </div>
             <img className="logo" alt="logo" src="/logo.png"/>
             <div className="down-level-type">
@@ -45,7 +52,7 @@ export class OrgChartNode extends Component {
                     d="M682.752 597.333333a256 256 0 0 1 255.786667 246.4l0.213333 9.6H725.333333a298.410667 298.410667 0 0 0-144-255.530666c5.290667-0.298667 10.666667-0.469333 16.085334-0.469334h85.333333z m-85.333333-384A170.666667 170.666667 0 1 1 529.066667 540.458667 212.650667 212.650667 0 0 0 597.418667 384a212.736 212.736 0 0 0-68.266667-156.416A169.216 169.216 0 0 1 597.418667 213.333333z"
                     fill="#666666" p-id="930"></path>
                 </svg>
-                <span>{node.downLevel}</span>
+                <span>{node.childrenNum}</span>
               </div>
             </div>
             <div className="content-container">

src/css/index.css

@@ -1,3 +1,6 @@
+html{
+    scroll-behavior: smooth;
+}
 
 body{
     -moz-user-select:none; /*火狐*/
@@ -8,30 +11,41 @@ body{
     /*cursor: move;*/
 }
 
+#org-chart-container .hidden-node{
+    width: 0 !important;
+    height: 0 !important;
+    margin-top: 0 !important;
+    padding: 0 !important;
+    font-size: 0!important;
+}
+#org-chart-container .hidden-node i{
+    font-size: 0!important;
+}
+
 #org-chart-container{
     text-align: center;
-    padding: 20px;
+    padding: 10vh 20px;
     position: relative;
     transform-origin: left center;
 }
 #org-chart-container .org-root{
-    transition: height 0.3s;
+    transition: height 0.6s;
 }
 .functional-container{
     position: fixed;
-    top: 20px;
+    top: 2vw;
-    right: 20px;
+    right: 2vw;
-    font-size: 14px;
+    font-size: 0.5vw;
     display: flex;
     align-items: center;
     z-index: 99;
     background-color:rgba(255,255,255,0.8);
-    padding: 10px;
+    padding: 0.8vw;
-    border-radius: 5px;
+    border-radius: 0.3vw;
-    box-shadow: 1px 1px 5px 1px #f1f1f1;
+    box-shadow: 1px 1px 6px 1px #f1f1f1;
 }
 .functional-container .cus_iconfont{
-    font-size: 25px;
+    font-size: 1.5vw;
     margin: 0 5px;
     cursor: pointer;
     color: #333;
@@ -53,12 +67,12 @@ body{
     align-items: flex-start;
     animation: 0.3s children-show;
     opacity: 1;
-    transition: 0.3s all;
+    transition: 0.6s all;
     /*margin-top: -20px;*/
 }
 
 #org-chart-container .org-children-chart.hidden-org-children{
-    animation: 0.4s children-hidden;
+    animation: 0.8s children-hidden;
 }
 
 
@@ -114,7 +128,7 @@ body{
     position: relative;
     left: 50%;
     transform: translateX(-50%);
-    transition: all 0.3s;
+    transition: all 0.6s;
 }
 
 #org-chart-container .right-row-line{
@@ -123,7 +137,7 @@ body{
     position: relative;
     left: 50%;
     background-color: #C32929;
-    transition: all 0.3s;
+    transition: all 0.6s;
 }
 #org-chart-container .left-row-line{
     height: 2px;
@@ -131,14 +145,14 @@ body{
     position: relative;
     left: 0;
     background-color: #C32929;
-    transition: all 0.3s;
+    transition: all 0.6s;
 }
 #org-chart-container .row-line{
     height: 2px;
     position: relative;
     left: 0;
     background-color: #C32929;
-    transition: all 0.3s;
+    transition: all 0.6s;
 }
 #org-chart-container .top-down-line{
     height: 20px;
@@ -148,7 +162,7 @@ body{
     top: -2px;
     left: 50%;
     transform: translateX(-50%);
-    transition: all 0.3s;
+    transition: all 0.6s;
 }
 
 
@@ -158,7 +172,7 @@ body{
 }
 
 #org-chart-container .org-chart-item:hover{
-    transition: all 0.3s;
+    transition: all 0.6s;
     /*transform: scale(0.975);*/
 }
 
@@ -169,10 +183,7 @@ body{
     transform: translateX(-50%) rotateZ(180deg) !important;
     display: inline-block;
 }
-#org-chart-container .org-chart-item .show-parent-icon{
+
-    transform: rotateZ(180deg);
-    display: inline-block;
-}
 
 #org-chart-container .org-chart-item .expansion-icon{
     position: absolute;
@@ -192,7 +203,7 @@ body{
     color: #C32929;
     transform: translateX(-50%);
     font-size: 30px;
-    transition: all 0.3s;
+    transition: all 0.6s;
 }
 
 #org-chart-container .org-chart-item .show-or-hidden{
@@ -201,7 +212,7 @@ body{
     position: absolute;
     bottom: -15px;
     transform: translateX(-50%);
-    transition: all 0.3s;
+    transition: all 0.6s;
     opacity: 0;
 }
 #org-chart-container .org-chart-item:hover .show-or-hidden{
@@ -216,3 +227,91 @@ body{
     transform: translateX(-50%) scale(1.125);
     transform-origin: center;
 }
+
+#org-chart-container .hover-icon{
+    /*display: none;*/
+    display: inline-block;
+    opacity: 1;
+    cursor: pointer;
+    transform: translateX(-50%);
+    position: absolute;
+}
+
+#org-chart-container .hover-icon.show-parent-icon{
+    transform: translateX(-52%) rotateZ(180deg);
+    left: 50%;
+    top: -13px;
+    font-size: 25px;
+    z-index: 999;
+    color: #C32929;
+    transition: all 0.6s;
+    opacity: 0;
+}
+
+#org-chart-container .hover-icon.show-parent-icon:hover{
+    transform: translateX(-52%) rotateZ(180deg) scale(1.125);
+    transform-origin: center;
+}
+
+
+#org-chart-container .hover-icon.hidden-parent-icon:hover{
+    transform: translateX(-52%) scale(1.125);
+    transform-origin: center;
+}
+
+#org-chart-container .hover-icon.hidden-parent-icon{
+    transform: translateX(-52%);
+    left: 50%;
+    top: -19px;
+    font-size: 25px;
+    z-index: 999;
+    color: #C32929;
+    transition: all 0.6s;
+    opacity: 0;
+}
+#org-chart-container .org-chart-item:hover .show-parent-icon{
+    opacity: 1;
+    top: -18px;
+}
+
+#org-chart-container .org-chart-item:hover .hidden-parent-icon{
+    opacity: 1;
+    top: -15px;
+}
+
+#org-chart-container .show-or-hidden-brother{
+    display: inline-block;
+    top: 50%;
+    font-size: 30px;
+    position: absolute;
+    z-index: 99;
+    color: #C32929;
+    opacity: 0;
+    transition: all 0.6s;
+}
+#org-chart-container .show-or-hidden-brother.left{
+    left: -14px;
+    transform: rotateZ(90deg)  translateY(-50%);
+}
+
+#org-chart-container .show-or-hidden-brother.right{
+    right: -14px;
+    transform: rotateZ(-90deg)  translateY(-50%);
+}
+
+#org-chart-container .show-or-hidden-brother.left:hover{
+    transform: rotateZ(90deg)  translateY(-50%) scale(1.125);
+    transform-origin: center;
+}
+#org-chart-container .show-or-hidden-brother.right:hover{
+    transform: rotateZ(-90deg)  translateY(-50%) scale(1.125);
+    transform-origin: center;
+}
+#org-chart-container .org-chart-item:hover .show-or-hidden-brother.left{
+    opacity: 1;
+    left: -16.5px;
+}
+#org-chart-container .org-chart-item:hover .show-or-hidden-brother.right{
+    opacity: 1;
+    right: -16.5px;
+}

src/css/node.css

@@ -3,12 +3,20 @@
     width: 160px;
     border: 1px #C32929 solid;
     border-radius: 10px;
+    box-shadow: 1px 1px 5px #f2f2f2;
     position: relative;
     margin: 50px 15px 0px 15px;
     font-size: 10px;
     padding: 10px 10px 20px 10px;
     height: 100%;
-    animation: 0.6s show;
+    animation: 1s show;
+    background-color: #FFF;
+}
+
+.node-container.current{
+}
+.hidden-org-children .line{
+    display: none;
 }
 
 .org-chart-node-item{
@@ -16,9 +24,10 @@
     margin: 0 0 -3px 0;
 }
 .node-container .content-container{
-    animation: 0.5s show-content;
+    animation: 1s show-content;
 }
 
+
 @keyframes show-content {
     from{
         height: 0;
@@ -35,11 +44,11 @@
 }
 
 .hidden-org-children .node-container{
-    animation: 0.6s hidden;
+    animation: 1.2s hidden;
 }
 
 .hidden-org-children .node-container .content-container{
-    animation: 0.6s hidden-content;
+    animation: 1s hidden-content;
 }
 
 @keyframes hidden-content {
@@ -51,6 +60,8 @@
         width: 0;
         opacity: 0;
         height: 0;
+        padding: 0;
+        margin: 0;
     }
 }
 @keyframes hidden {
@@ -58,6 +69,7 @@
         width: 0;
         opacity: 0;
         height: 0;
+        padding: 0;
     }
 }
 
@@ -84,7 +96,7 @@
     top: -50px;
     transform: translateX(-50%);
     border: 1px #C32929 solid;
-    background-color: #f2f2f2;
+    background-color: #C32929 !important;
 }
 .node-container .logo{
     position: absolute;
@@ -147,4 +159,11 @@
     transform-origin:center left;
 }
 
+.hidden-node .node-container{
+    width: 0 !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
 

src/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cus_iconfont"; /* Project id 3778032 */
-  src: url('iconfont.woff2?t=1669465666296') format('woff2'),
+  src: url('iconfont.woff2?t=1669805325787') format('woff2'),
-       url('iconfont.woff?t=1669465666296') format('woff'),
+       url('iconfont.woff?t=1669805325787') format('woff'),
-       url('iconfont.ttf?t=1669465666296') format('truetype');
+       url('iconfont.ttf?t=1669805325787') format('truetype');
 }
 
 .cus_iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhankai2:before {
+  content: "\e6c5";
+}
+
+.icon-zhankai1:before {
+  content: "\e66c";
+}
+
+.icon-zhankaishousuo:before {
+  content: "\e6cb";
+}
+
+.icon-caozuo-quanping-shousuo:before {
+  content: "\e73a";
+}
+
+.icon-moduanzhankai:before {
+  content: "\e6e4";
+}
+
+.icon-shousuo:before {
+  content: "\e85f";
+}
+
 .icon-fangda1:before {
   content: "\e614";
 }