From 89587a6b1a64cd508d9807fdc3fc7af0e833d129 Mon Sep 17 00:00:00 2001 From: Chengliang <1546584672@qq.com> Date: Tue, 27 Sep 2022 17:50:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E5=8D=A1=E7=89=87=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E9=94=9A=E7=82=B9=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/resource/AnchorDetect.js | 35 +++++++- .../components/resource/ResourceCard.js | 85 ++++++++++++++++--- pc4mobx/organization/stores/resourceCard.js | 47 ++++++++++ pc4mobx/organization/style/card.less | 13 ++- 4 files changed, 166 insertions(+), 14 deletions(-) diff --git a/pc4mobx/organization/components/resource/AnchorDetect.js b/pc4mobx/organization/components/resource/AnchorDetect.js index 43f67f3..3a4c02e 100644 --- a/pc4mobx/organization/components/resource/AnchorDetect.js +++ b/pc4mobx/organization/components/resource/AnchorDetect.js @@ -5,6 +5,7 @@ import { import { Spin, Button, + Timeline } from 'antd' import { @@ -20,11 +21,41 @@ export default class AnchorDetect extends React.Component { } } - render() { + componentDidMount() { + + } + + componentWillUnmount() { + } + + + + render() { + const { + anchorList, + activity, + onChange + } = this.props; + + const activityStyle = { + color:"#4aacf4" + } return ( -
+
+ + { + anchorList.map((item,index) => { + return( + : ''}> + onChange(item.id,index)}>{item.title} + + ) + }) + } + +
) } } diff --git a/pc4mobx/organization/components/resource/ResourceCard.js b/pc4mobx/organization/components/resource/ResourceCard.js index db5f976..bf025f6 100644 --- a/pc4mobx/organization/components/resource/ResourceCard.js +++ b/pc4mobx/organization/components/resource/ResourceCard.js @@ -22,7 +22,7 @@ import { Switch, Menu, Dropdown,Icon,Anchor } from 'antd'; - + import { WeaSwitch, WeaTableNew @@ -34,6 +34,7 @@ import { import '../../style/card.less'; import FormItem from './FormItem'; import IframeItem from './IframeItem'; +import AnchorDetect from './AnchorDetect'; import { renderNoright } from '../../util'; // 从util文件引入公共的方法 const toJS = mobx.toJS; @@ -44,6 +45,11 @@ const confirm = Modal.confirm; export default class ResourceCard extends React.Component { constructor(props) { super(props); + this.state = { + activity:0,//激活的锚点 + detectElements: [], // 受监控元素,可能存在空项 + } + this.flag = false; // 点击Anchor菜单项,不执行监听滚动事件 } componentWillMount() { @@ -53,6 +59,28 @@ export default class ResourceCard extends React.Component { this.init(); } + // componentDidUpdate(prevProps) { + // // 判断items是否更新 + // if (prevProps.items !== this.props.items + // && this.isDiff(prevProps.items, this.props.items)) { + // // 重新生成受监控元素 + // this.buildDetectElements(this.props.items); + // } + // } + + // // 判断两数组是否一摸一样 + // isDiff = (before, after) => { + // if (before.length !== after.length) return false; + // // 先对数组进行排序 + // const beforeTemp = [...before].sort(), afterTemp = [...after].sort(); + // for (let i = 0; i < beforeTemp.length; i++) { + // if (beforeTemp[i] !== afterTemp[i]) { + // return false; + // } + // } + // return true; + // }; + componentWillUnmount() { } @@ -68,8 +96,28 @@ export default class ResourceCard extends React.Component { resourceCard } = this.props; resourceCard.init(); + this.buildDetectElements(); //生成受监控元素 } + buildDetectElements = () => { + const { + resourceCard + } = this.props,{ + data + } = resourceCard; + + data.anchorList.map((item,index) => { + item.activity = index; + item.offset = document.getElementById(item.id).offsetTop + document.getElementById(item.id).clientHeight; + }) + + this.setState({ + detectElements:data.anchorList + }) + + } + + onScrollEnd = () => { const { resourceCard @@ -85,7 +133,24 @@ export default class ResourceCard extends React.Component { }, 2000); }; - scrollToAnchor = (anchorName) => { + handleMenuClick = (e) => { + console.log('click', e); + } + + onScroll = (event) => { + const postion = event.target.scrollTop; + let getActivityCurrent = this.state.activity; + this.state.detectElements.map((item,index) => { + if(postion >= document.getElementById(item.id).offsetTop &&postion <= item.offset){ + return getActivityCurrent = item.activity; + } + }) + this.setState({ + activity: getActivityCurrent + }) + } + + scrollToAnchor = (anchorName,index) => { if (anchorName) { // 找到锚点 let anchorElement = document.getElementById(anchorName); @@ -94,10 +159,6 @@ export default class ResourceCard extends React.Component { } } - handleMenuClick = (e) => { - console.log('click', e); - } - render() { const { resourceCard @@ -108,7 +169,7 @@ export default class ResourceCard extends React.Component { overtime, intervalTime, data, - iframeList + iframeList, } = resourceCard; const menu = ( @@ -123,6 +184,7 @@ export default class ResourceCard extends React.Component {
@@ -220,9 +282,12 @@ export default class ResourceCard extends React.Component { }
-
- this.scrollToAnchor("educationInfo")}>教育经历 -
+
diff --git a/pc4mobx/organization/stores/resourceCard.js b/pc4mobx/organization/stores/resourceCard.js index 84e96a2..130725c 100644 --- a/pc4mobx/organization/stores/resourceCard.js +++ b/pc4mobx/organization/stores/resourceCard.js @@ -82,6 +82,30 @@ export class ResourceCardStore { },{ fieldId:'个人邮箱', fieldValue:'1546875925@qq.com' + },{ + fieldId:'姓名', + fieldValue:'萧言' + },{ + fieldId:'性别', + fieldValue:'男' + },{ + fieldId:'出生日期', + fieldValue:'1987年9月1日' + },{ + fieldId:'个人邮箱', + fieldValue:'1546875925@qq.com' + },{ + fieldId:'姓名', + fieldValue:'萧言' + },{ + fieldId:'性别', + fieldValue:'男' + },{ + fieldId:'出生日期', + fieldValue:'1987年9月1日' + },{ + fieldId:'个人邮箱', + fieldValue:'1546875925@qq.com' } ] }, @@ -108,6 +132,29 @@ export class ResourceCardStore { ] } ], + anchorList:[ + { + id:'userInfo', + title:'员工信息' + }, + { + id:'workInfo', + title:'工作信息' + }, + { + id:'educationInfo', + title:'教育经历' + }, + { + id:'comp', + title:'分部扩展页' + }, + { + id:'dept', + title:'部门扩展页' + } + + ] } diff --git a/pc4mobx/organization/style/card.less b/pc4mobx/organization/style/card.less index 3924490..b9bbb1a 100644 --- a/pc4mobx/organization/style/card.less +++ b/pc4mobx/organization/style/card.less @@ -181,10 +181,19 @@ background-color: #ffffff; margin-left: 20px; .right{ - a{ + height: 100%; + padding-left: 20px; + .ant-timeline{ position: fixed; - top: 0; + top: 20px; + .title { + cursor: pointer; + } + .title:hover{ + color: #4aacf4; + } } + } } }