diff --git a/src/App.js b/src/App.js index c18ff67..d0cc088 100644 --- a/src/App.js +++ b/src/App.js @@ -4,392 +4,9 @@ import {Component, Fragment} from "react"; import {OrgChartNode} from "./components/OrgChartNode"; import "./iconfont/iconfont.css" -const orgTree = [{ - 'id': 1, - 'isRoot':true, - 'name': 'Lao Lao parent parent', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 0, - 'showChildren': 1, - "children": [{ - 'id': 2, - 'name': 'Lao Lao parent', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 0, - 'showChildren': 1, - "children": [{ - 'id': 39, - 'name': 'Lao Lao61', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 1, - 'showChildren': 0, - },{ - 'id': 38, - 'name': 'Lao Lao72', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 1, - 'showChildren': 0, - },{ - 'id': 3, - 'name': 'Lao Lao4', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 1, - 'showChildren': 1, - 'children': [ - { - 'id': 4, - 'name': 'Bo Miao', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 1 - }, - { - 'id': 5, - 'name': 'Su Miao', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 2, - 'children': [ - { - 'id': 6, - 'name': 'Tie Hua', 'title': 'senior engineer', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 1, - }, - { - 'id': 7, - 'name': 'Hei Hei', 'title': 'senior engineer', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 1 - } - ] - }, - { - 'id': 8, - 'name': 'Yu Jie', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 2, - }, - { - 'id': 9, - 'name': 'Yu Li', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 2, - 'children': [ - { - 'id': 9, - 'name': 'Bo Miao', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 1 - }, - { - 'id': 10, - 'name': 'Su Miao', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'type': 2, - 'show': 1, - 'children': [ - { - 'id': 11, - 'name': 'Tie Hua', 'title': 'senior engineer', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 1, - }, - { - 'id': 12, - 'name': 'Hei Hei', 'title': 'senior engineer', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 1 - } - ] - }, - { - 'id': 13, - 'name': 'Yu Jie', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 2, - }, - { - 'id': 14, - 'name': 'Yu Li', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 2, - }, - { - 'id': 14, - 'name': 'Hong Miao', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 2, - }, - { - 'id': 15, - 'name': 'Yu Wei', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 1, - }, - { - 'id': 16, - 'name': 'Chun Miao', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 2, - }, - { - 'id': 17, - 'name': 'Yu Tie', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 1, - } - ] - }, - { - 'id': 18, - 'name': 'Hong Miao', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 2, - }, - { - 'id': 19, - 'name': 'Yu Wei', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 1, - }, - { - 'id': 20, - 'name': 'Chun Miao', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 2, - }, - { - 'id': 21, - 'name': 'Yu Tie', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 1, - } - ] - },{ - 'id': 31, - 'name': 'Lao Lao5', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 1, - 'showChildren': 0, - },{ - 'id': 32, - 'name': 'Lao Lao6', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 1, - 'showChildren': 0, - },{ - 'id': 33, - 'name': 'Lao Lao7', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 1, - 'showChildren': 0, - }] - }, { - 'id': 25, - 'name': 'Lao Lao parent 1', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 0, - 'showChildren': 0, - }, { - 'id': 24, - 'name': 'Lao Lao parent2', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 0, - 'showChildren': 0, - "children": [{ - 'id': 23, - 'name': 'Lao Lao 1', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 1, - 'showChildren': 0, - 'children': [ - { - 'id': 26, - 'name': 'Bo Miao 1', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 1 - }, - { - 'id': 27, - 'name': 'Su Miao 1', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 2, - }, - { - 'id': 28, - 'name': 'Yu Jie 1', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'showChildren': 0, - 'show': 1, - 'type': 2, - }, - { - 'id': 29, - 'name': 'Yu Wei 1', 'title': 'department manager', 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'showChildren': 0, - 'downLevel': '29', - 'show': 1, - 'type': 1, - }] - }] - }, { - 'id': 30, - 'name': 'Lao Lao parent 3', - 'title': 'general manager', - 'avatar': 'avatar.jpg', - 'department': 'Senior Manager After Sales Marketing Communication & e-Commerce', - 'job': 'Senior Manager Technology China Advanced Driver Assistance Systems', - 'downLevel': '29', - 'type': 1, - 'show': 0, - 'showChildren': 0, - }] -}] + +const orgTree =[{"children":[{"children":[{"children":[{"children":[{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"工作流程组","departmentId":17,"id":59,"job":"测试工程师","jobId":35,"managerId":53,"managerIds":[53,42,24,23,22],"name":"徐芬","show":0,"showBrother":0,"showChildren":0,"type":4}],"childrenNum":1,"current":false,"currentParent":false,"department":"工作流程组","departmentId":17,"id":53,"job":"测试组长","jobId":31,"managerId":42,"managerIds":[42,24,23,22],"name":"刘艳","show":0,"showBrother":0,"showChildren":0,"type":3},{"childrenNum":0,"current":false,"currentParent":false,"department":"工作流程组","departmentId":17,"id":55,"job":"高级开发工程师","jobId":32,"managerId":42,"managerIds":[42,24,23,22],"name":"廖冬","show":0,"showBrother":0,"showChildren":0,"type":4},{"childrenNum":0,"current":false,"currentParent":false,"department":"工作流程组","departmentId":17,"id":56,"job":"开发工程师","jobId":33,"managerId":42,"managerIds":[42,24,23,22],"name":"茅春荣","show":0,"showBrother":0,"showChildren":0,"type":4}],"childrenNum":4,"current":false,"currentParent":false,"department":"工作流程组","departmentId":17,"id":42,"job":"模块负责人","jobId":22,"managerId":24,"managerIds":[24,23,22],"name":"王成才","show":0,"showBrother":0,"showChildren":0,"type":3},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"系统架构部","departmentId":21,"id":52,"job":"系统安全主管","jobId":30,"managerId":48,"managerIds":[48,24,23,22],"name":"柳炉","show":0,"showBrother":0,"showChildren":0,"type":3},{"childrenNum":0,"current":false,"currentParent":false,"department":"系统架构部","departmentId":21,"id":60,"job":"高级开发工程师","jobId":32,"managerId":48,"managerIds":[48,24,23,22],"name":"李斌（上海）","show":0,"showBrother":0,"showChildren":0,"type":4}],"childrenNum":2,"current":false,"currentParent":false,"department":"系统架构部","departmentId":21,"id":48,"job":"系统架构部经理","jobId":28,"managerId":24,"managerIds":[24,23,22],"name":"王金永","show":0,"showBrother":0,"showChildren":0,"type":3},{"childrenNum":0,"current":false,"currentParent":false,"department":"门户协同区组","departmentId":24,"id":72,"job":"模块负责人","jobId":22,"managerId":24,"managerIds":[24,23,22],"name":"陆佳牛","show":0,"showBrother":0,"showChildren":0,"type":5}],"childrenNum":9,"current":false,"currentParent":false,"department":"技术总服部","departmentId":5,"id":24,"job":"EBU产品开发总监","jobId":4,"managerId":23,"managerIds":[23,22],"name":"杨国生","show":0,"showBrother":0,"showChildren":0,"type":1},{"children":[{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU培训服务部","departmentId":14,"id":74,"job":"产品培训师","jobId":42,"managerId":35,"managerIds":[35,25,23,22],"name":"陈莉莉","show":0,"showBrother":0,"showChildren":0,"type":5},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU培训服务部","departmentId":14,"id":77,"job":"产品培训师","jobId":42,"managerId":35,"managerIds":[35,25,23,22],"name":"彭雨","show":0,"showBrother":0,"showChildren":0,"type":6}],"childrenNum":2,"current":false,"currentParent":false,"department":"EBU培训服务部","departmentId":14,"id":35,"job":"培训经理","jobId":15,"managerId":25,"managerIds":[25,23,22],"name":"崔莹","show":0,"showBrother":0,"showChildren":0,"type":2},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"客服EBU一部","departmentId":15,"id":50,"job":"高级客户服务顾问","jobId":20,"managerId":38,"managerIds":[38,25,23,22],"name":"金俊俊","show":0,"showBrother":0,"showChildren":0,"type":3}],"childrenNum":1,"current":false,"currentParent":false,"department":"客服EBU一部","departmentId":15,"id":38,"job":"客服EBU一部经理","jobId":18,"managerId":25,"managerIds":[25,23,22],"name":"鲍建","show":0,"showBrother":0,"showChildren":0,"type":2},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"客服EBU三部","departmentId":16,"id":40,"job":"高级客户服务顾问","jobId":20,"managerId":39,"managerIds":[39,25,23,22],"name":"王君","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"客服EBU三部","departmentId":16,"id":61,"job":"高级客户服务顾问","jobId":20,"managerId":39,"managerIds":[39,25,23,22],"name":"石楠","show":0,"showBrother":0,"showChildren":0,"type":4}],"childrenNum":2,"current":false,"currentParent":false,"department":"客服EBU三部","departmentId":16,"id":39,"job":"客服EBU三部经理","jobId":19,"managerId":25,"managerIds":[25,23,22],"name":"苏永强","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"财务服务部","departmentId":19,"id":44,"job":"出纳","jobId":24,"managerId":25,"managerIds":[25,23,22],"name":"郭敬美","show":0,"showBrother":0,"showChildren":0,"type":3},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU客服中心","departmentId":6,"id":46,"job":"客服助理","jobId":26,"managerId":25,"managerIds":[25,23,22],"name":"刘晓璇","show":0,"showBrother":0,"showChildren":0,"type":3}],"childrenNum":10,"current":false,"currentParent":false,"department":"EBU客服中心","departmentId":6,"id":25,"job":"EBU客服总监","jobId":5,"managerId":23,"managerIds":[23,22],"name":"隋清","show":0,"showBrother":0,"showChildren":0,"type":1},{"childrenNum":0,"current":false,"currentParent":false,"department":"技术总服部","departmentId":5,"id":26,"job":"EBU开发平台技术总监","jobId":6,"managerId":23,"managerIds":[23,22],"name":"胡波","show":0,"showBrother":0,"showChildren":0,"type":1},{"childrenNum":0,"current":false,"currentParent":false,"department":"技术总服部","departmentId":5,"id":27,"job":"EBU项目开发总监","jobId":7,"managerId":23,"managerIds":[23,22],"name":"周军锋","show":0,"showBrother":0,"showChildren":0,"type":1},{"children":[{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"PMO服务部","departmentId":11,"id":41,"job":"项目助理","jobId":21,"managerId":32,"managerIds":[32,31,23,22],"name":"何新琼","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"PMO服务部","departmentId":11,"id":54,"job":"项目助理","jobId":21,"managerId":32,"managerIds":[32,31,23,22],"name":"张弛","show":0,"showBrother":0,"showChildren":0,"type":4},{"childrenNum":0,"current":false,"currentParent":false,"department":"PMO服务部","departmentId":11,"id":71,"job":"项目助理","jobId":21,"managerId":32,"managerIds":[32,31,23,22],"name":"谢陈林","show":0,"showBrother":0,"showChildren":0,"type":5}],"childrenNum":3,"current":false,"currentParent":false,"department":"PMO服务部","departmentId":11,"id":32,"job":"PMO管理部主管","jobId":12,"managerId":31,"managerIds":[31,23,22],"name":"李芹","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":33,"job":"项目经理","jobId":13,"managerId":31,"managerIds":[31,23,22],"name":"张理祯","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目服务部","departmentId":10,"id":36,"job":"项目顾问","jobId":16,"managerId":31,"managerIds":[31,23,22],"name":"郑电敏","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":57,"job":"项目经理","jobId":13,"managerId":31,"managerIds":[31,23,22],"name":"边宝","show":0,"showBrother":0,"showChildren":0,"type":4},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":62,"job":"项目经理","jobId":13,"managerId":31,"managerIds":[31,23,22],"name":"平龙成","show":0,"showBrother":0,"showChildren":0,"type":4},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":64,"job":"项目实施工程师","jobId":37,"managerId":31,"managerIds":[31,23,22],"name":"陈义","show":0,"showBrother":0,"showChildren":0,"type":4},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":66,"job":"项目经理","jobId":13,"managerId":31,"managerIds":[31,23,22],"name":"王海涛（上海）","show":0,"showBrother":0,"showChildren":0,"type":5},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":67,"job":"项目实施工程师","jobId":37,"managerId":31,"managerIds":[31,23,22],"name":"沈超","show":0,"showBrother":0,"showChildren":0,"type":5},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":75,"job":"项目实施工程师","jobId":37,"managerId":69,"managerIds":[69,31,23,22],"name":"马超","show":0,"showBrother":0,"showChildren":0,"type":5},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":76,"job":"项目实施工程师","jobId":37,"managerId":69,"managerIds":[69,31,23,22],"name":"李雯","show":0,"showBrother":0,"showChildren":0,"type":6}],"childrenNum":2,"current":false,"currentParent":false,"department":"EBU项目一部","departmentId":12,"id":69,"job":"项目经理","jobId":13,"managerId":31,"managerIds":[31,23,22],"name":"何源","show":0,"showBrother":0,"showChildren":0,"type":5}],"childrenNum":14,"current":false,"currentParent":false,"department":"EBU项目服务部","departmentId":10,"id":31,"job":"项目总监","jobId":11,"managerId":23,"managerIds":[23,22],"name":"严玥宸","show":0,"showBrother":0,"showChildren":0,"type":2},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"商务服务部","departmentId":13,"id":58,"job":"商务专员","jobId":34,"managerId":34,"managerIds":[34,23,22],"name":"叶小芳","show":0,"showBrother":0,"showChildren":0,"type":4}],"childrenNum":1,"current":false,"currentParent":false,"department":"商务服务部","departmentId":13,"id":34,"job":"商务经理","jobId":14,"managerId":23,"managerIds":[23,22],"name":"王玉梅","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU营销中心","departmentId":3,"id":68,"job":"销售助理","jobId":39,"managerId":23,"managerIds":[23,22],"name":"李梦璇","show":0,"showBrother":0,"showChildren":0,"type":5},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU营销中心","departmentId":3,"id":73,"job":"售前咨询顾问","jobId":41,"managerId":23,"managerIds":[23,22],"name":"刘祥","show":0,"showBrother":0,"showChildren":0,"type":5},{"childrenNum":0,"current":false,"currentParent":false,"department":"EBU营销中心","departmentId":3,"id":80,"job":"售前咨询总监","jobId":44,"managerId":23,"managerIds":[23,22],"name":"杨昭","show":0,"showBrother":0,"showChildren":0,"type":6},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"上海大区服务中心","departmentId":28,"id":87,"job":"行政助理","jobId":47,"managerId":85,"managerIds":[85,23,22],"name":"陈倩","show":0,"showBrother":0,"showChildren":0,"type":6},{"childrenNum":0,"current":true,"currentParent":false,"department":"上海大区服务中心","departmentId":28,"id":88,"job":"出纳","jobId":48,"managerId":85,"managerIds":[85,23,22],"name":"赵咏梅","show":1,"showBrother":1,"showChildren":1,"type":6}],"childrenNum":2,"current":false,"currentParent":true,"department":"上海大区服务中心","departmentId":28,"id":85,"job":"上海大区总经理","jobId":46,"managerId":23,"managerIds":[23,22],"name":"陈驰","show":0,"showBrother":0,"showChildren":1,"type":6}],"childrenNum":46,"current":false,"currentParent":true,"department":"EBU营销中心","departmentId":3,"id":23,"job":"EBU本部总经理兼副总裁","jobId":3,"managerId":22,"managerIds":[22],"name":"王晨志","show":0,"showBrother":0,"showChildren":1,"type":1},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"行政服务部","departmentId":18,"id":43,"job":"行政助理","jobId":23,"managerId":28,"managerIds":[28,22],"name":"张逊良","show":0,"showBrother":0,"showChildren":0,"type":3},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"人事服务组","departmentId":20,"id":70,"job":"人事专员","jobId":40,"managerId":45,"managerIds":[45,28,22],"name":"叶可可","show":0,"showBrother":0,"showChildren":0,"type":5}],"childrenNum":1,"current":false,"currentParent":false,"department":"人事服务组","departmentId":20,"id":45,"job":"人事主管","jobId":25,"managerId":28,"managerIds":[28,22],"name":"马琳琳","show":0,"showBrother":0,"showChildren":0,"type":3},{"childrenNum":0,"current":false,"currentParent":false,"department":"行政服务部","departmentId":22,"id":51,"job":"行政助理","jobId":23,"managerId":28,"managerIds":[28,22],"name":"房鹏飞","show":0,"showBrother":0,"showChildren":0,"type":3},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"招聘一组","departmentId":25,"id":84,"job":"招聘专员","jobId":43,"managerId":78,"managerIds":[78,28,22],"name":"陈静","show":0,"showBrother":0,"showChildren":0,"type":6}],"childrenNum":1,"current":false,"currentParent":false,"department":"招聘一组","departmentId":25,"id":78,"job":"招聘专员","jobId":43,"managerId":28,"managerIds":[28,22],"name":"廖宇","show":0,"showBrother":0,"showChildren":0,"type":6},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"招聘二组","departmentId":26,"id":83,"job":"招聘专员","jobId":43,"managerId":79,"managerIds":[79,28,22],"name":"赵银银","show":0,"showBrother":0,"showChildren":0,"type":6}],"childrenNum":1,"current":false,"currentParent":false,"department":"招聘二组","departmentId":26,"id":79,"job":"招聘专员","jobId":43,"managerId":28,"managerIds":[28,22],"name":"贾韫琪","show":0,"showBrother":0,"showChildren":0,"type":6}],"childrenNum":8,"current":false,"currentParent":false,"department":"人力资源部","departmentId":7,"id":28,"job":"人力资源部经理","jobId":8,"managerId":22,"managerIds":[22],"name":"蔡苒","show":0,"showBrother":0,"showChildren":0,"type":1},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"财务服务部","departmentId":8,"id":30,"job":"会计","jobId":10,"managerId":29,"managerIds":[29,22],"name":"展璐芸","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"财务服务部","departmentId":8,"id":37,"job":"出纳","jobId":17,"managerId":29,"managerIds":[29,22],"name":"张静","show":0,"showBrother":0,"showChildren":0,"type":2},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"分支机构财务部","departmentId":27,"id":82,"job":"财务支撑","jobId":45,"managerId":81,"managerIds":[81,29,22],"name":"韩亚萍","show":0,"showBrother":0,"showChildren":0,"type":6}],"childrenNum":1,"current":false,"currentParent":false,"department":"分支机构财务部","departmentId":27,"id":81,"job":"财务支撑","jobId":45,"managerId":29,"managerIds":[29,22],"name":"吕成龙","show":0,"showBrother":0,"showChildren":0,"type":6},{"childrenNum":0,"current":false,"currentParent":false,"department":"财务服务部","departmentId":8,"id":86,"job":"会计","jobId":10,"managerId":29,"managerIds":[29,22],"name":"张元雪","show":0,"showBrother":0,"showChildren":0,"type":6}],"childrenNum":5,"current":false,"currentParent":false,"department":"财务服务部","departmentId":8,"id":29,"job":"财务经理","jobId":9,"managerId":22,"managerIds":[22],"name":"包小娟","show":0,"showBrother":0,"showChildren":0,"type":2},{"childrenNum":0,"current":false,"currentParent":false,"department":"总裁办公室","departmentId":2,"id":47,"job":"副总裁","jobId":27,"managerId":22,"managerIds":[22],"name":"金戈","show":0,"showBrother":0,"showChildren":0,"type":3},{"children":[{"childrenNum":0,"current":false,"currentParent":false,"department":"总裁办公室","departmentId":2,"id":63,"job":"投资助理","jobId":36,"managerId":49,"managerIds":[49,22],"name":"晏成","show":0,"showBrother":0,"showChildren":0,"type":4}],"childrenNum":1,"current":false,"currentParent":false,"department":"总裁办公室","departmentId":2,"id":49,"job":"泛微副总裁兼点甲创投副总裁","jobId":29,"managerId":22,"managerIds":[22],"name":"唐星坤","show":0,"showBrother":0,"showChildren":0,"type":3},{"childrenNum":0,"current":false,"currentParent":false,"department":"案例运营部","departmentId":23,"id":65,"job":"案例运营部总监","jobId":38,"managerId":22,"managerIds":[22],"name":"桂菲蓝","show":0,"showBrother":0,"showChildren":0,"type":5}],"childrenNum":66,"current":false,"currentParent":true,"department":"总裁办公室","departmentId":2,"id":22,"isRoot":true,"job":"总裁","jobId":2,"managerId":0,"managerIds":[],"name":"韦利东","show":0,"showBrother":0,"showChildren":1,"type":1}] + class App extends Component { @@ -399,7 +16,8 @@ class App extends Component { top: 0, scale: 1, cursor: 'auto', - orgTree: orgTree + layer: 0, + orgTree: [...JSON.parse(JSON.stringify(orgTree))] } getChartNoe = (node) => { @@ -445,40 +63,206 @@ class App extends Component { // document.documentElement.scrollLeft = (document.documentElement.scrollWidth - document.documentElement.clientWidth) / 2 showParent = (node) => { - if(!node){ + console.log(node) + if (!node) { return } - this.state.orgTree.forEach(item=>{ - this.findChildrenShow(item,node) - }) - this.setState({ - orgTree:[...this.state.orgTree] - }) - } - - - - findChildrenShow = (node,children)=>{ - let childrenIndex = node.children.findIndex(item=>item.id === children.id) - if(childrenIndex === -1){ - // 没有找到 - node.children.forEach(item=>{ - item.show = 0 - this.findChildrenShow(item,node) - }) - }else { - node.children.forEach((item,index)=>{ - if(index !== childrenIndex){ - item.show = 0 - }else { + if (this.state.orgTree.findIndex(item => item.id === node.managerId) !== -1) { + this.state.orgTree.forEach(item => { + if (item.id === node.managerId) { item.show = 1 } }) + } else { + this.state.orgTree.forEach(item => this.findChildrenParentShow(item, node)) + } + this.setState({ + orgTree: [...this.state.orgTree] + }, () => { + setTimeout(this.toCenter, 1000) + }) + + // console.log(node) + // this.state.orgTree.forEach(item => { + // this.findChildrenParentShow(item, node) + // }) + // this.setState({ + // orgTree: [...this.state.orgTree] + // }, () => { + // setTimeout(this.toCenter, 1000) + // }) + } + + findChildrenParentShow = (node, children) => { + if (node.children?.findIndex(item => item.id === children.managerId) !== -1) { + node.children?.forEach(item => { + if (item.id === children.managerId) { + item.show = 1 + } + }) + } else { + node.children?.forEach(item => this.findChildrenParentShow(item, children)) + } + + /*if (!node.children || node.children.length === 0) { + return + } + if (children.isRoot) { + // roo + children.show = 1 + return; + } + let childrenIndex = node.children.findIndex(item => item.id === children.id) + if (childrenIndex === -1) { + // 没有找到 + node.children.forEach(item => { + item.show = 0 + this.findChildrenParentShow(item, node) + }) + } else { + node.children.forEach((item, index) => { + if (index !== childrenIndex) { + item.show = 0 + } else { + item.show = 1 + item.showBrother = 0 + // item.children?.forEach(children => { + // children.show = 0 + // }) + } + }) + }*/ + } + + hiddenParent = (node, layer) => { + if (!node) { + return + } + if (node.isRoot) { + return; + } + this.state.orgTree.forEach(item => { + this.hiddenChildrenNodes(item, node) + if (node.managerIds.includes(item.id)) { + this.findChildrenParentHidden(item, node) + item.showChildren = 1 + } + }) + // this.state.orgTree.forEach((item, index) => { + // item.show = 0 + // this.findChildrenParentHidden(item, node, layer, 0) + // }) + this.setState({ + orgTree: [...this.state.orgTree] + }) + } + + hiddenChildrenNodes = (node, currentNode) => { + debugger + if (node.id === currentNode.id) { + return + } + node.show = 0 + node.showBrother = 0 + node.showChildren = 0 + if (node.children) { + node.children.forEach(item => this.hiddenChildrenNodes(item, currentNode)) } } - hiddenParent = (node) => { - console.log("hidden", node) + + + findChildrenParentHidden = (node, children, layer, n) => { + if (node.id === children.id) { + return + } + node?.children.forEach(item => { + this.hiddenChildrenNodes(item, children) + if (children.managerIds.includes(item.id)) { + item.showChildren = 1 + this.findChildrenParentHidden(item, children) + } + }) + // let childrenIndex = node.children?.findIndex(item => item.id === children.id) + // node.children?.forEach((item, index) => { + // if (index === childrenIndex) { + // item.show = 1 + // } else { + // item.show = 0 + // if (n >= layer) { + // item.showChildren = 0 + // } + // this.findChildrenParentHidden(item, children, layer, ++n) + // } + // }) } + + toCenter = () => { + let mid = (document.documentElement.scrollWidth - document.documentElement.clientWidth) / 2 + // let n = mid / 40; + // let interval = setInterval(() => { + // if (document.documentElement.scrollLeft >= mid) { + // clearInterval(interval) + // document.documentElement.scrollLeft = mid + document.documentElement.scrollTo(mid, 0) + // } + // document.documentElement.scrollLeft = document.documentElement.scrollLeft + 2 * n + // if (n <= 1) { + // n = 1 + // } else { + // n-- + // } + // }, 1) + } + + + showOrHiddenBrother = (node, layer) => { + if (node.isRoot) { + this.state.orgTree.forEach(item => { + (item.id === node.id) || (item.show = 0) + }) + } else { + this.state.orgTree.forEach(item => { + this.findChildrenShowOrHiddenBrother(item, node, 0, layer) + }) + } + this.setState({ + orgTree: [...this.state.orgTree] + }) + } + + findChildrenShowOrHiddenBrother = (parent, node, n, layer) => { + if (n >= layer) { + return + } + if (parent.children?.findIndex(item => item.id === node.id) !== -1) { + parent.children?.forEach(item => { + if (item.id !== node.id) { + item.show = 0 + item.showChildren = 0 + } + }) + if (parent.showBrother === 0) { + parent.showBrother = 1 + parent.children?.forEach(item => { + item.show = 1 + }) + } else { + parent.children?.forEach(item => { + if (item.id !== node.id) { + item.show = 0 + item.showChildren = 0 + } + }) + parent.showBrother = 0 + } + // (children.id === node.id) || (children.show = children.show === 0 ? ((parent.showBrother = 1) || 1) : (parent.showBrother = 0) || 0) + } else { + parent.children?.forEach(item => { + this.findChildrenShowOrHiddenBrother(item, node, n + 1, layer) + }) + } + } + amplification = () => { let scale = parseFloat(this.state.scale) + 0.05 this.setState({scale}) @@ -492,6 +276,121 @@ class App extends Component { this.setState({scale}) } + + showChildren = (node, layer) => { + if (node.isRoot) { + node.showChildren = 1 + node.showBrother = 1 + node.children?.forEach(item => item.show = 1) + } else { + this.state.orgTree.forEach(item => { + this.showChildrenStack(item, node, 0, layer) + }) + } + this.setState({ + orgTree: [...this.state.orgTree] + }) + } + showChildrenStack = (parent, node, n, layer) => { + if (n > layer) { + return; + } + let nodeIndex = parent.children?.findIndex(item => item.id === node.id) + if (nodeIndex !== -1) { + parent.children?.forEach(item => { + if (item.id === node.id) { + item.showChildren = 1 + item.showBrother = 1 + item.children?.forEach(item => item.show = 1) + } + }) + return + } + parent.children?.forEach(item => { + this.showChildrenStack(item, node, n + 1, layer) + }) + } + + hiddenChildren = (node, layer) => { + if (node.isRoot) { + node.showChildren = 0 + node.showBrother = 0 + // node.children?.forEach(item => item.show = 0) + node.children?.forEach(item => { + item.show = 0 + item.showChildren = 1 + item.showBrother = 1 + this.showOrHiddenStack(item, 0) + }) + } else { + this.state.orgTree.forEach(item => { + this.hiddenChildrenStack(item, node, 0, layer) + }) + } + this.setState({ + orgTree: [...this.state.orgTree] + }) + } + + hiddenChildrenStack = (parent, node, n, layer) => { + if (n > layer) { + return; + } + let nodeIndex = parent.children?.findIndex(item => item.id === node.id) + if (nodeIndex !== -1) { + parent.children?.forEach(item => { + if (item.id === node.id) { + item.showChildren = 0 + node.showBrother = 0 + } + item.children?.forEach(item => { + item.show = 0 + item.showChildren = 0 + item.showBrother = 0 + this.showOrHiddenStack(item, 0) + }) + }) + return + } + parent.children?.forEach(item => { + this.hiddenChildrenStack(item, node, n + 1, layer) + }) + } + + showAll = () => { + this.state.orgTree.forEach(item => this.showOrHiddenStack(item, 1)) + this.setState({ + orgTree: [...this.state.orgTree] + }, () => { + setTimeout(this.toCenter, 1000) + }) + } + + showOrHiddenStack = (node, type) => { + node.showChildren = type + node.showBrother = type + node.show = type + if (type === 0) { + if (node.currentParent) { + node.showChildren = 1 + } + if (node.current) { + node.show = 1 + } + } + if (node.children) { + node.children.forEach(item => this.showOrHiddenStack(item, type)) + } + } + + hiddenAll = () => { + this.state.orgTree.forEach(item => this.showOrHiddenStack(item, 0)) + this.setState({ + orgTree: [...this.state.orgTree] + }) + } + + render() { return ( @@ -502,7 +401,11 @@ class App extends Component { this.setState({scale: 1, left: 0, top: 0})}> + onClick={() => (this.setState({scale: 1, left: 0, top: 0})) || (this.toCenter())}> + +
{ this.state.orgTree.map(item => { - return }) diff --git a/src/components/OrgChart.jsx b/src/components/OrgChart.jsx index b04079a..fc2f136 100644 --- a/src/components/OrgChart.jsx +++ b/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) => { - node.showChildren = 1 + showChildren = (node, layer) => { 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(() => { - node.showChildren = 0 - this.hiddenChildrenStack(node) + setTimeout(()=>{ + this.props.hiddenChildren(node, layer) 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)=>{ - if(!node.children || node.children.length === 0){ + hiddenChildrenStack = (node) => { + 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 -
+
{ - node.isRoot ? "" : (this.props.parent && this.props.parent.show && this.props.parent.show === 1 ? - this.props.hiddenParent(this.props.parent)}> + node.isRoot ? "" : (this.props.parent?.show === 1 ? + this.props.hiddenParent(node, this.props.layer)}> : - this.props.showParent(this.props.parent)}>) + this.props.showParent(node, this.props.layer)}>) } {this.state.getChartNode(node)} - {/*{*/} - {/* node.children && node.children.length > 0 ? (node.showChildren === 0 ?*/} - {/* this.showChildren(node)}>*/} - {/* */} - {/* :*/} - {/* this.hiddenChildren(node)}>*/} - {/* ) : ""*/} - {/*}*/} + { + this.props.parent && + this.props.parent.children.length > 1 && + this.props.parent?.show ? { + this.props.showOrHiddenBrother(node, this.props.layer) + }} + > + { + this.props.showOrHiddenBrother(node, this.props.layer) + }} + > + : "" + } { node.children && node.children.length > 0 ? { - this.showOrHidden(node) + this.showOrHidden(node, this.props.layer) }} > : "" } @@ -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 (
-
this.setState({marginTop: 2})} onMouseOut={() => this.setState({marginTop: 0})} - > + > { this.getOrgChartNode(node) }
{ node.showChildren === 1 ? -
- { node.children.length === 1 ? - - - : node.children.map((item, index) => { - if (index === 0) { - return + : + node.children.map((item, index) => { + if (index === 0) { + return + } + if (index === node.children.length - 1) { + return + } + return - } - if (index === node.children.length - 1) { - return - } - return - }) + showOrHiddenBrother={this.props.showOrHiddenBrother} + data={item} lineClass="line row-line" + > + }) }
: "" } -
) } else { @@ -163,12 +202,22 @@ export class OrgChart extends Component { return ( { - this.state.lineClass ? + this.state.lineClass && this.props.data?.show ?
-
-
+ { + this.props.parent?.showBrother ? +
+ :
+ } +
{ this.getOrgItem(this.props.parent) } diff --git a/src/components/OrgChartNode.jsx b/src/components/OrgChartNode.jsx index e0a400e..68ef6eb 100644 --- a/src/components/OrgChartNode.jsx +++ b/src/components/OrgChartNode.jsx @@ -9,13 +9,20 @@ export class OrgChartNode extends Component { return (
-
+
+ {node.avatar ? "" : node.name.substring(0,1)}
logo
@@ -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"> - {node.downLevel} + {node.childrenNum}
diff --git a/src/css/index.css b/src/css/index.css index c33f584..336f8d2 100644 --- a/src/css/index.css +++ b/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; - right: 20px; - font-size: 14px; + top: 2vw; + right: 2vw; + font-size: 0.5vw; display: flex; align-items: center; z-index: 99; background-color:rgba(255,255,255,0.8); - padding: 10px; - border-radius: 5px; - box-shadow: 1px 1px 5px 1px #f1f1f1; + padding: 0.8vw; + border-radius: 0.3vw; + 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{ @@ -215,4 +226,92 @@ body{ #org-chart-container .org-chart-item .show-or-hidden:hover{ transform: translateX(-50%) scale(1.125); transform-origin: center; -} \ No newline at end of file +} + +#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; +} diff --git a/src/css/node.css b/src/css/node.css index eaa1192..841ce35 100644 --- a/src/css/node.css +++ b/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; +} + diff --git a/src/iconfont/iconfont.css b/src/iconfont/iconfont.css index 7efdc7b..e50a4da 100644 --- a/src/iconfont/iconfont.css +++ b/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'), - url('iconfont.woff?t=1669465666296') format('woff'), - url('iconfont.ttf?t=1669465666296') format('truetype'); + src: url('iconfont.woff2?t=1669805325787') format('woff2'), + url('iconfont.woff?t=1669805325787') format('woff'), + 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"; } diff --git a/src/iconfont/iconfont.ttf b/src/iconfont/iconfont.ttf index 6d77cf5..7ca0dde 100644 Binary files a/src/iconfont/iconfont.ttf and b/src/iconfont/iconfont.ttf differ diff --git a/src/iconfont/iconfont.woff b/src/iconfont/iconfont.woff index 1db0f27..cf9a1c5 100644 Binary files a/src/iconfont/iconfont.woff and b/src/iconfont/iconfont.woff differ diff --git a/src/iconfont/iconfont.woff2 b/src/iconfont/iconfont.woff2 index 63a84fd..bae8a85 100644 Binary files a/src/iconfont/iconfont.woff2 and b/src/iconfont/iconfont.woff2 differ