diff --git a/dist.zip b/dist.zip new file mode 100644 index 0000000..88723e5 Binary files /dev/null and b/dist.zip differ diff --git a/public/img/back/level1.png b/public/img/back/level1.png new file mode 100644 index 0000000..4d2a63d Binary files /dev/null and b/public/img/back/level1.png differ diff --git a/public/img/back/level2.png b/public/img/back/level2.png new file mode 100644 index 0000000..2ab4d3c Binary files /dev/null and b/public/img/back/level2.png differ diff --git a/public/img/back/level3.png b/public/img/back/level3.png new file mode 100644 index 0000000..e655097 Binary files /dev/null and b/public/img/back/level3.png differ diff --git a/public/img/back/level4.png b/public/img/back/level4.png new file mode 100644 index 0000000..06947e4 Binary files /dev/null and b/public/img/back/level4.png differ diff --git a/public/img/back/level5.png b/public/img/back/level5.png new file mode 100644 index 0000000..e77017a Binary files /dev/null and b/public/img/back/level5.png differ diff --git a/public/img/back/level6.png b/public/img/back/level6.png new file mode 100644 index 0000000..6be044f Binary files /dev/null and b/public/img/back/level6.png differ diff --git a/public/img/back/level7.png b/public/img/back/level7.png new file mode 100644 index 0000000..0d164b5 Binary files /dev/null and b/public/img/back/level7.png differ diff --git a/public/img/back/level8.png b/public/img/back/level8.png new file mode 100644 index 0000000..e2041c7 Binary files /dev/null and b/public/img/back/level8.png differ diff --git a/src/components/timeline/index.jsx b/src/components/timeline/index.jsx index df82985..ae5fc01 100644 --- a/src/components/timeline/index.jsx +++ b/src/components/timeline/index.jsx @@ -2,7 +2,7 @@ * @Author: Chengliang 1546584672@qq.com * @Date: 2023-06-25 16:33:21 * @LastEditors: Chengliang 1546584672@qq.com - * @LastEditTime: 2023-06-25 18:15:45 + * @LastEditTime: 2023-06-27 10:51:02 * @FilePath: /org-chart-frant/src/components/timeline/index.jsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -18,8 +18,18 @@ export default class TimeLine extends React.Component { }; } - handleLineClick(item) { - debugger; + handleLineClick(data) { + let newList = this.state.timelineList.map((item) => { + item.color = 'grey'; + if (item.key == data.key) { + item.color = 'blue'; + } + return item; + }); + this.setState({ + timelineList: newList, + }); + this.props.onClick(data); } componentDidMount() { @@ -31,17 +41,17 @@ export default class TimeLine extends React.Component { // }); // }); const datas = [ - { key: '0', title: '当前版本', color: 'blue', time: '2022-01-09' }, - { key: '1', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '2', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '3', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '4', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '5', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '6', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '7', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '8', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '9', title: '测试', color: 'grey', time: '2022-01-09' }, - { key: '10', title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 0, title: '当前版本', color: 'blue', time: '2022-01-09' }, + { key: 1, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 2, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 3, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 4, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 5, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 6, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 7, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 8, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 9, title: '测试', color: 'grey', time: '2022-01-09' }, + { key: 10, title: '测试', color: 'grey', time: '2022-01-09' }, ]; this.setState({ timelineList: datas, @@ -55,11 +65,13 @@ export default class TimeLine extends React.Component { {this.state.timelineList.map((item) => { return ( -
{item.title}
{' '} +
{item.title}
{item.time}
 ); diff --git a/src/components/timeline/index.less b/src/components/timeline/index.less index 7ece1ab..55d216d 100644 --- a/src/components/timeline/index.less +++ b/src/components/timeline/index.less @@ -1,14 +1,16 @@ .lineWrapper { width: 208px; - height: 480px; + height: calc(~'100% - 200px'); overflow-y: scroll; position: fixed; left: 10px; z-index: 100; background: #fff; border-radius: 20px; - padding-top: 10px; - padding-bottom: 10px; + padding-top: 20px; + padding-bottom: 20px; + padding-left: 20px; + .timeline { cursor: pointer; } @@ -21,3 +23,33 @@ color: dimgray; } } + +.lineWrapper::-webkit-scrollbar { + /*滚动条整体样式*/ + width: 10px; + /*高宽分别对应横竖滚动条的尺寸*/ + height: 1px; +} + +.lineWrapper::-webkit-scrollbar-thumb { + /*滚动条里面小方块*/ + border-radius: 10px; + background-color: skyblue; + background-image: -webkit-linear-gradient( + 45deg, + rgba(255, 255, 255, 0.2) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.2) 50%, + rgba(255, 255, 255, 0.2) 75%, + transparent 75%, + transparent + ); +} + +.lineWrapper::-webkit-scrollbar-track { + /*滚动条里面轨道*/ + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background: #ededed; + border-radius: 10px; +} diff --git a/src/components/topBar/index.jsx b/src/components/topBar/index.jsx index bdc5853..5dba488 100644 --- a/src/components/topBar/index.jsx +++ b/src/components/topBar/index.jsx @@ -9,6 +9,7 @@ import { Col, Dropdown, Menu, + TreeSelect, } from 'antd'; const { Option } = Select; import moment from 'moment'; @@ -21,26 +22,33 @@ export class TopBar extends React.Component { super(props); this.state = { fclasslist: [], - companylist: [], + rootTreeData: [], //根节点异步树 + treeExpandedKeys: [], requestData: { - date: moment(new Date()).format('YYYY-MM-DD'), fclass: '0', - root: '0', + root: undefined, level: '3', fisvitual: '0', }, }; } + /** + * 表单值改变 + * @param {*} payload + */ handleFormChange(payload) { let requestData = { ...this.state.requestData, ...payload }; this.setState({ requestData }); } - //日期可选择未来 - // disabledDate (current) { - // // return current && current >moment().subtract(1, "days"); - // return current && current > moment().endOf("day"); - // } + + /** + * 组织维度改变 + */ + changeFclass() { + debugger; + this.getSeatchCondition(this.props.url); + } handleExportMenuClick(e) { this.props.onExport(e.key == '1' ? 'png' : 'pdf'); @@ -50,16 +58,70 @@ export class TopBar extends React.Component { this.props.onExport('png'); } + /** + * 根节点树数据 + * @param {} parentId + * @returns + */ + getNodeTreeNode = (parentId) => { + const { fclass } = this.state.requestData; + let api = + '/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' + + parentId + + '&fclass=' + + fclass; + fetch(api) + .then((res) => res.json()) + .then((data) => { + if (data.api_status) { + let arr = [...this.state.rootTreeData, ...data.companyTree]; + this.setState({ + rootTreeData: arr, + }); + } + }); + }; + + /** + * 根节点树异步加载 + * @param {} parentId + * @returns + */ + onRootLoadData = (treeNode) => + new Promise((resolve) => { + const { id } = treeNode.props; + setTimeout(() => { + this.getNodeTreeNode(id); + resolve(undefined); + }, 1000); + }); + + onRootChange = (value) => { + debugger; + let requestData = { ...this.state.requestData, root: value }; + this.setState({ requestData }); + }; + + onTreeExpand = (expandedKeys) => { + this.setState({ + treeExpandedKeys: expandedKeys, + }); + }; + componentDidMount() { - fetch(this.props.url) + this.getSeatchCondition(this.props.url); + } + + getSeatchCondition = (url) => { + fetch(url) .then((res) => res.json()) .then((data) => { this.setState({ fclasslist: data.fclasslist, - companylist: data.companylist, + rootTreeData: data.companyTree, }); }); - } + }; menu = ( - - 数据日期： - - this.handleFormChange({ - date: value && value != '' ? value.format('YYYY-MM-DD') : '', - }) - } - /> - - 维度： - 根节点： - + dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} + placeholder="请选择根节点" + onChange={this.onRootChange} + loadData={this.onRootLoadData} + treeData={rootTreeData} + /> - - - 显示层级： - - - - this.handleFormChange({ fisvitual: e.target.checked ? '1' : '0', @@ -165,6 +192,21 @@ export class TopBar extends React.Component { + 显示层级： + + + + + - + diff --git a/src/pages/company.jsx b/src/pages/company.jsx index d69fdaf..4ef9853 100644 --- a/src/pages/company.jsx +++ b/src/pages/company.jsx @@ -70,14 +70,12 @@ export default function companyPage() { // 获取部门图片 function getDepartmentImage() { let index = Math.floor(Math.random() * 8) + 1; - // return `./img/department/${index}.png`; - return `./img/department/1.png`; + return `./img/back/level4.png`; } - // 获取部门图片 + // 获取分部图片 function getSubcompanyImage() { let index = Math.floor(Math.random() * 3) + 1; - // return `./img/subcompany/${index}.png`; return `./img/subcompany/2.png`; } @@ -118,9 +116,9 @@ export default function companyPage() { if (d.data.ftype == 0) { return 100; } else if (d.data.ftype == 1) { - return 160; + return 80; } else if (d.data.ftype == 2) { - return 56; + return 106; } return 120; }; @@ -152,18 +150,13 @@ export default function companyPage() { `; } else if (d.data.ftype == 1) { - return `
-
- -
-
+
${d.data.fname} @@ -174,17 +167,15 @@ export default function companyPage() {
-
-
-
- - ${d.data.fname} +
+ +
+
+
${d.data.fname}
`; @@ -268,6 +259,10 @@ export default function companyPage() { }); } + /** + * 导出 + * @param {*} type + */ const handleExport = (type) => { if (type == 'png') { orgChart && orgChart.exportImg({ full: true }); @@ -276,6 +271,16 @@ export default function companyPage() { } }; + /** + * 时间轴点击 + * @param {*} timeline + */ + const timeLineSearch = (timeline) => {}; + + /** + * 查询 + * @param {*} requestData + */ const handleSearch = (requestData) => { topBarSearchRequest = requestData; let api = @@ -295,6 +300,10 @@ export default function companyPage() { }); }; + /** + * 同步数据 + * @param {*} requestData + */ const handleSynchronous = (requestData) => { setDisabled(true); let api = '/api/bs/hrmorganization/orgchart/synchronousData'; @@ -326,9 +335,8 @@ export default function companyPage() { .render(); } }, [data]); - // top bar end + if (hasRight === false) { - //return message.error("对不起，您暂时没有权限", 2); return (
handleZoomIn(progressBtn)} onZoomBehavior={(value) => handleZoomBehavior(value)} /> - + { + timeLineSearch(timeline); + }} + url="/api/bs/hrmorganization/orgchart/timelines?type=company" + /> (orgChart = chart)} setClick={(click) => (addNodeChildFunc = click)} diff --git a/src/pages/user.jsx b/src/pages/user.jsx index 8fb751a..d8c25c0 100644 --- a/src/pages/user.jsx +++ b/src/pages/user.jsx @@ -87,7 +87,7 @@ export default function userPage() { // 获取数据 useEffect(() => { document.cookie = - 'ecology_JSessionid=aaabAoBxcpmhQ5GSTpXJy; JSESSIONID=aaabAoBxcpmhQ5GSTpXJy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=137b6014-3b43-44f3-b921-3a7fddbbe91e'; + 'ecology_JSessionid=aaabAoBxcpmhQ5GSTpXJy; JSESSIONID=aaabAoBxcpmhQ5GSTpXJy; Systemlanguid=7; languageidweaver=7; loginuuids=1; __randcode__=1e1d21ef-3a75-4eaa-b3b3-277fa0ca0ef3; loginidweaver=sysadmin'; d3.json( // "/user/data" '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +