Skip to content

M
max_android_panel
Commit 3d7e1e37 by Zhang Xin
Options

update headerInfo

parent 37043581
Showing with 218 additions and 12 deletions
client/components/CommonComponent/HeaderComponent/HeaderComponent.jsx
import React from 'react'; import React from 'react';
import AllClassify from '../../../containers/AllClassifyContainer/AllClassifyContainer'
require('./index.css') require('./index.css')
const headerStatus = CONFIG.headerStatus; const headerStatus = CONFIG.headerStatus;
export default class HeaderComponent extends React.Component{ export default class HeaderComponent extends React.Component{
...@@ -6,17 +7,26 @@ export default class HeaderComponent extends React.Component{ ...@@ -6,17 +7,26 @@ export default class HeaderComponent extends React.Component{
super(props); super(props);
this.getHomeHeader = this.getHomeHeader.bind(this); this.getHomeHeader = this.getHomeHeader.bind(this);
this.getOtherHeader = this.getOtherHeader.bind(this); this.getOtherHeader = this.getOtherHeader.bind(this);
this.handleShowClassify = this.handleShowClassify.bind(this);
this.state = { this.state = {
showHeader : headerStatus[1] showHeader : headerStatus[1],
showClassify : false
} }
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps){
} }
handleShowClassify(){
this.setState({
showClassify : !this.state.showClassify
})
}
getHeader(){ getHeader(){
let pages = null; let pages = null;
let {showHeader} = this.props; let {showHeader} = this.props;
showHeader = showHeader ? showHeader : this.state.showHeader;
switch (showHeader){ switch (showHeader){
case headerStatus[1]: case headerStatus[1]:
pages = this.getHomeHeader(); pages = this.getHomeHeader();
...@@ -30,7 +40,23 @@ export default class HeaderComponent extends React.Component{ ...@@ -30,7 +40,23 @@ export default class HeaderComponent extends React.Component{
} }
getHomeHeader(){ getHomeHeader(){
let {storeInfo,userinfo} = this.props; let {storeInfo,userinfo,taskInfo} = this.props;
storeInfo = {
name : '华贸商业街',
id : 20
};
userinfo = {
headImageUrl : "",
employeeName : "你说呢",
id : "00001"
};
taskInfo = {
totalTaskNum : 5,
currentTaskNum : 2
};
let style = {
'width' : (parseInt(taskInfo.currentTaskNum) / parseInt(taskInfo.totalTaskNum) * 100) + '%'
}
return ( return (
<div className={"homeHeader clearfix"}> <div className={"homeHeader clearfix"}>
{ {
...@@ -49,11 +75,17 @@ export default class HeaderComponent extends React.Component{ ...@@ -49,11 +75,17 @@ export default class HeaderComponent extends React.Component{
</div> :null </div> :null
} }
<div className={"taskProgress"}>
<div className={"currentTask"} style={style}></div>
<div className={"progressText col333 font26"}>任务进度 {taskInfo.currentTaskNum}/{taskInfo.totalTaskNum}</div>
</div> </div>
}
</div>
}
<div className={"headerContent rightContent fr "}>
{ {
userinfo && userinfo.id ? <div className={"headerContent rightContent fr "}>
userinfo && userinfo.id ? <div className={"userinfos"}>
<img className={"userheadImg"} src={ userinfo.headImageUrl || UTILPATH.localImg.defaultImg} alt=""/> <img className={"userheadImg"} src={ userinfo.headImageUrl || UTILPATH.localImg.defaultImg} alt=""/>
<div className={"userinfo font24 colfff"}> <div className={"userinfo font24 colfff"}>
<p>{userinfo.employeeName || ''}</p> <p>{userinfo.employeeName || ''}</p>
...@@ -61,6 +93,10 @@ export default class HeaderComponent extends React.Component{ ...@@ -61,6 +93,10 @@ export default class HeaderComponent extends React.Component{
</div> </div>
</div> : null </div> : null
} }
<div className={"line"} />
<div className={"classify"} onClick={()=>this.handleShowClassify()}/>
</div>
<AllClassify showClassify={this.state.showClassify}/>
</div> </div>
) )
......
client/components/CommonComponent/HeaderComponent/index.css
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
width: 100%; width: 100%;
position: relative; position: relative;
background-color: #34343e; background-color: #34343e;
overflow: hidden; /*overflow: hidden;*/
} }
.headerComponent .homeHeader{ .headerComponent .homeHeader{
...@@ -62,14 +62,19 @@ ...@@ -62,14 +62,19 @@
vertical-align: middle; vertical-align: middle;
} }
.headerComponent .homeHeader .rightContent{ .headerComponent .homeHeader .rightContent{
padding-right: 59px; padding-right: 40px;
}
.headerComponent .homeHeader .rightContent .userinfos{
display: flex;
height: 72px;
margin-top: 5%;
align-items: center;
} }
.headerComponent .homeHeader .rightContent .userheadImg{ .headerComponent .homeHeader .rightContent .userheadImg{
width: 72px; width: 72px;
height: 72px; height: 72px;
border-radius: 50%; border-radius: 50%;
margin-right: 24px; margin-right: 24px;
transform: translate(0,16%);
} }
.headerComponent .homeHeader .rightContent .userinfo{ .headerComponent .homeHeader .rightContent .userinfo{
line-height: 34px; line-height: 34px;
...@@ -100,6 +105,49 @@ ...@@ -100,6 +105,49 @@
vertical-align: middle ; vertical-align: middle ;
margin-right: 40px; margin-right: 40px;
} }
.headerComponent .taskProgress{
margin-left: 40px;
height: 44px;
width: 600px;
background: #d8d8d8;
text-align: center;
line-height: 44px;
top: 50%;
transform: translateY(-50%);
position: relative;
border-radius: 22px;
}
.headerComponent .taskProgress .currentTask{
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: 22px;
background: #27ce61;
}
.headerComponent .taskProgress .progressText{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.headerComponent .homeHeader .rightContent .line{
height: 50%;
width: 2px;
background: #fff;
margin: 0 40px;
border-radius: 2px;
top: 30%;
position: relative;
}
.headerComponent .homeHeader .rightContent .classify{
width: 50px;
height: 50px;
position: relative;
background: #fff;
top: 50%;
transform: translateY(-50%);
}
/*.headerComponent{*/ /*.headerComponent{*/
......
client/containers/AllClassifyContainer/AllClassifyContainer.jsx 0 → 100644
import React from 'react';
require('./index.css');
export default class AllClassifyContainer extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div className={"allClassify " + (this.props.showClassify ? '':'hide')}>
<ul>
<li>待定</li>
<li>待定</li>
<li>待定</li>
<li>待定</li>
<li>待定</li>
<li>待定</li>
</ul>
</div>
)
}
}
\ No newline at end of file
client/containers/AllClassifyContainer/index.css 0 → 100644
.allClassify{
position: absolute;
background: rgba(0,0,0,.5);
width: 300px;
right: 0;
top: 98px;
z-index: 3;
/* bottom: 0; */
height: 856px;
overflow-y: scroll;
}
.allClassify ul>li{
height: 172px;
}
\ No newline at end of file
client/containers/LeftContainer/LeftContainer.jsx
...@@ -8,7 +8,15 @@ export default class LeftContainer extends React.Component{ ...@@ -8,7 +8,15 @@ export default class LeftContainer extends React.Component{
render(){ render(){
return( return(
<div className={"leftContainer"}> <div className={"leftContainer"}>
{this.props.children} <div className={"circle font40 colfff"}>
<div className={"circle1"}/>
<div className={"circle2"}>
任务1
</div>
</div>
<div className={"leftText font40 col333"}>
核对数量
</div>
</div> </div>
) )
} }
......
client/containers/LeftContainer/index.css
...@@ -4,4 +4,52 @@ ...@@ -4,4 +4,52 @@
width: 398px; width: 398px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
text-align: center;
/*height: 100%; */
/*background: #e4e4e4;*/
/*width: 398px;*/
/* display: inline-block; */
/*position: absolute;*/
/*text-align: center;*/
/*top: 98px;*/
/*bottom: 0;*/
}
.leftContainer .circle{
position: relative;
width: 230px;
height: 230px;
border-radius: 50%;
background: #a1d3a2;
/* left: 50%; */
/* top: 50%; */
/* transform: translate(-50%,-50%); */
display: inline-block;
margin-top: 50%;
}
.leftContainer .circle .circle1{
position: absolute;
width: 194px;
height: 194px;
border-radius: 50%;
background: #85c885;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.leftContainer .circle .circle2{
position: absolute;
width: 156px;
height: 156px;
border-radius: 50%;
background: #65b65a;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
line-height: 156px;
}
.leftContainer .leftText{
margin-top: 10%;
} }
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
...@@ -26,6 +26,7 @@ import HomePage from '../HomeContainer/HomeContainer' ...@@ -26,6 +26,7 @@ import HomePage from '../HomeContainer/HomeContainer'
import TakeStokeContainer from '../TakeStokeContainer/TakeStokeContainer' import TakeStokeContainer from '../TakeStokeContainer/TakeStokeContainer'
import BreakageContainer from '../BreakageContainer/BreakageConatiner' import BreakageContainer from '../BreakageContainer/BreakageConatiner'
import RecoveryPage from '../RecoveryContainer/RecoveryContainer' import RecoveryPage from '../RecoveryContainer/RecoveryContainer'
import AllClassify from '../AllClassifyContainer/AllClassifyContainer'
/*二期引用 end*/ /*二期引用 end*/
import {on,remove} from '../../util/event'; import {on,remove} from '../../util/event';
...@@ -56,14 +57,15 @@ class PageContainer extends React.Component { ...@@ -56,14 +57,15 @@ class PageContainer extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
showPage : showPage[6], showPage : showPage[10],
lastPage : '', lastPage : '',
page : null, page : null,
popupInfo : defaultPopupInfo, popupInfo : defaultPopupInfo,
showClock : false, //关门页面显示倒计时 showClock : false, //关门页面显示倒计时
headerInfo : {}, headerInfo : {},
pageStyle : {}, pageStyle : {},
successCloseDoor : false successCloseDoor : false,
showClassify : false //显示右侧菜单栏，默认不显示
}; };
this.getPages = this.getPages.bind(this); //获取当前页面 this.getPages = this.getPages.bind(this); //获取当前页面
this.showPopup = this.showPopup.bind(this); //显示弹窗 this.showPopup = this.showPopup.bind(this); //显示弹窗
...@@ -88,6 +90,7 @@ class PageContainer extends React.Component { ...@@ -88,6 +90,7 @@ class PageContainer extends React.Component {
this.uploadErrs = this.uploadErrs.bind(this); // this.uploadErrs = this.uploadErrs.bind(this); //
/*以下是二期方法 start*/ /*以下是二期方法 start*/
this.showHomePage = this.showHomePage.bind(this); //二期显示首页 this.showHomePage = this.showHomePage.bind(this); //二期显示首页
this.triggerAllClassify = this.triggerAllClassify.bind(this); //二期显示菜单栏
/*以下是二期方法 end*/ /*以下是二期方法 end*/
...@@ -420,6 +423,11 @@ class PageContainer extends React.Component { ...@@ -420,6 +423,11 @@ class PageContainer extends React.Component {
showPage : showPage[13] showPage : showPage[13]
}); });
} }
triggerAllClassify(status=false){
this.setState({
showAllClassify : status
})
}
getPages(){ getPages(){
...@@ -555,7 +563,6 @@ class PageContainer extends React.Component { ...@@ -555,7 +563,6 @@ class PageContainer extends React.Component {
loop={false} loop={false}
/> : null /> : null
} }
<PopupComponent popupInfo={this.state.popupInfo} /> <PopupComponent popupInfo={this.state.popupInfo} />
{this.getPages()} {this.getPages()}
</div> </div>
......
client/containers/RightContainer/index.css
...@@ -3,4 +3,12 @@ ...@@ -3,4 +3,12 @@
background: #fff; background: #fff;
height: 100%; height: 100%;
position: relative; position: relative;
/*left: 398px;*/
/*background: #fff;*/
/* height: 100%; */
/*position: absolute;*/
/*top: 98px;*/
/*bottom: 0;*/
/* width: 100%; */
/*right: 0;*/
} }
\ No newline at end of file
client/css/font.css
...@@ -3,7 +3,8 @@ body{ ...@@ -3,7 +3,8 @@ body{
--font2:2; --font2:2;
--font3:3; --font3:3;
--font10:10; --font10:10;
--base : 0.571875 /*--base : 0.571875*/
--base : 1
} }
@value font10: 10px; @value font10: 10px;
...@@ -90,6 +91,17 @@ body{ ...@@ -90,6 +91,17 @@ body{
[data-dpr="3"] .font24 { [data-dpr="3"] .font24 {
font-size: calc(var(--font3) * font24 * var(--base)) !important; font-size: calc(var(--font3) * font24 * var(--base)) !important;
} }
.font26 {
font-size: calc(font26 * var(--base)) !important;
}
[data-dpr="2"] .font26 {
font-size: calc(var(--font2) * font26 * var(--base)) !important;
}
[data-dpr="3"] .font26 {
font-size: calc(var(--font3) * font26 * var(--base)) !important;
}
.font30 { .font30 {
font-size: calc(font30 * var(--base)) !important; font-size: calc(font30 * var(--base)) !important;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment