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 {
}
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;
+ }
}
+
}
}
}