Skip to content

M
max_android_panel
Commit bad1eacb by Zhang Xin
Options

添加关门，选择任务，弹窗样式

parent 9a161e43
Showing with 331 additions and 24 deletions
client/components/CommonComponent/ButtonComponent/ButtonComponent.jsx 0 → 100644
import React from 'react';
require('./index.css');
export default class ButtonComponent extends React.Component{
constructor(props){
super(props);
}
render(){
let props = this.props;
return(
<div className={"buttonComponent font32 col333"} style={props.style} onClick={()=>props.option()}>
{props.text}
</div>
)
}
}
\ No newline at end of file
client/components/CommonComponent/ButtonComponent/index.css 0 → 100644
.buttonComponent{
width: 413px;
height: 80px;
border: 2px solid #e5e5e5;
background-color: #ffffff;
line-height: 80px;
text-align: center;
/*display: inline-block;*/
border-radius: 10px;
}
\ No newline at end of file
client/components/CommonComponent/ClockComponent/ClockComponent.jsx 0 → 100644
import React from 'react';
require('./index.css');
export default class ClockComponent extends React.Component{
constructor(props){
super(props);
this.state = {
time : 60
}
}
render(){
let props = this.props;
return(
<div className={"clockComponent font32"} style={props.style}>
<img className={"clockIcon"} src={UTILPATH.localImg.clockIcon} alt=""/>
<span className={"clockTime"}>{this.state.time}s</span>
</div>
)
}
}
\ No newline at end of file
client/components/CommonComponent/ClockComponent/index.css 0 → 100644
.clockComponent{
width: 408px;
height: 80px;
line-height: 80px;
border-radius: 40px;
background-color: #f6d428;
display: inline-block;
border: 2px solid #e5e5e5;
text-align: center;
}
.clockComponent .clockIcon{
vertical-align: middle;
margin-right: 30px;
}
\ No newline at end of file
client/containers/ChooseTaskContainer/ChooseTaskContainer.jsx 0 → 100644
import React from 'react';
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css');
export default class ChooseTaskContainer extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
componentWillMount(){
}
componentWillReceiveProps(nextProps){
}
render(){
return(
<div className={"chooseTaskContainer"}>
<div className={"chooseTaskText font32"}>
<p>请选择一个有权限的任务！</p>
</div>
<div className={"chooseTaskButtons"}>
<Button text={"处理已知故障"} style={{'marginTop':'40px'}}/>
<Button text={"申报新故障"} style={{'marginTop':'20px'}}/>
<Button text={"设备检查"} style={{'marginTop':'20px'}}/>
<Button text={"设备测试"} style={{'marginTop':'20px'}}/>
<Button text={"确认退出，并离店"} style={{'marginTop':'87px'}}/>
</div>
</div>
)
}
}
ChooseTaskContainer.propTypes = {
};
ChooseTaskContainer.defaultProps = {
}
\ No newline at end of file
client/containers/ChooseTaskContainer/index.css 0 → 100644
.chooseTaskContainer{
text-align: center;
}
.chooseTaskContainer .chooseTaskText{
line-height: 40px;
margin-top: 145px;
}
.chooseTaskContainer .chooseTaskButtons{
display: inline-block;
align-items: center;
}
\ No newline at end of file
client/containers/FinishAskContainer/FinishAskContainer.jsx 0 → 100644
import React from 'react';
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import Clock from '../../components/CommonComponent/ClockComponent/ClockComponent'
require('./index.css');
export default class FinishAskContainer extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
componentWillMount(){
}
componentWillReceiveProps(nextProps){
}
render(){
return(
<div className={"finishAskContainer"}>
<div className={"finishAskText font32"}>
<p>感谢您的故障问题处理工作！</p>
<p>您是否有其它任务</p>
</div>
<div className={"finishAskButtons"}>
<Button text={"有"} style={{'marginTop':'120px'}}/>
<Button text={"没有"} style={{'marginTop':'40px'}}/>
<Clock style={{'marginTop':'40px'}}/>
</div>
</div>
)
}
}
FinishAskContainer.propTypes = {
};
FinishAskContainer.defaultProps = {
}
\ No newline at end of file
client/containers/FinishAskContainer/index.css 0 → 100644
.finishAskContainer{
text-align: center;
}
.finishAskContainer .finishAskText{
line-height: 40px;
margin-top: 214px;
}
.finishAskContainer .finishAskButtons{
display: inline-block;
align-items: center;
}
\ No newline at end of file
client/containers/HomeContainer/HomeContainer.jsx
import React from 'react'; import React from 'react';
import Clock from '../../components/CommonComponent/ClockComponent/ClockComponent'
require('./index.css'); require('./index.css');
export default class HomeContainer extends React.Component{ export default class HomeContainer extends React.Component{
...@@ -13,12 +14,23 @@ export default class HomeContainer extends React.Component{ ...@@ -13,12 +14,23 @@ export default class HomeContainer extends React.Component{
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps){
} }
render(){ render(){
return( return(
<div className={"homeContainer"}> <div className={"homeContainer"}>
home <img className={"homeIcon"} src={UTILPATH.localImg.defaultImg} alt=""/>
<div className={"homeText font40"}>感谢您辛勤工作，祝您今天顺利！</div>
<div className={"closeDoorContent"}>
<div className={"closeDoorText font32 colf00"}>
<p>关门倒数，请尽快离开店铺</p>
<p>请在离开前再次确保没有遗留个人物品在设备内</p>
</div>
<Clock />
</div>
</div> </div>
) )
} }
......
client/containers/HomeContainer/index.css
.homeContainer{
text-align: center;
position: relative;
}
.homeContainer .homeIcon{
margin: 134px 0 40px 0;
}
.homeContainer .homeText{
}
.homeContainer .closeDoorContent{
margin-top: 140px;
}
.homeContainer .closeDoorContent .closeDoorText{
margin-bottom: 20px;
line-height: 40px;
}
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
...@@ -8,6 +8,10 @@ import TextAreaContainer from '../TextAreaContainer/TextAreaContainer' ...@@ -8,6 +8,10 @@ import TextAreaContainer from '../TextAreaContainer/TextAreaContainer'
import ScanBarCodeContainer from '../ScanBarCodeContainer/ScanBarCodeContaienr' import ScanBarCodeContainer from '../ScanBarCodeContainer/ScanBarCodeContaienr'
import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDamagesListContainer' import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDamagesListContainer'
import OtherQuestionContainer from '../OtherQuestionContainer/OtherQuestionContainer' import OtherQuestionContainer from '../OtherQuestionContainer/OtherQuestionContainer'
import HomeContainer from '../HomeContainer/HomeContainer'
import FinishAskContainer from '../FinishAskContainer/FinishAskContainer'
import ChooseTaskContainer from '../ChooseTaskContainer/ChooseTaskContainer'
import Qrcode from '../Qrcode/Qrcode'
require('./index.css') require('./index.css')
...@@ -16,7 +20,11 @@ const showPage = { ...@@ -16,7 +20,11 @@ const showPage = {
2 : 'Scan', 2 : 'Scan',
3 : 'DamageProductList', 3 : 'DamageProductList',
4 : 'OtherQuestionUpload', 4 : 'OtherQuestionUpload',
5 : 'TextArea' 5 : 'TextArea',
6 : 'Qrcode',
7 : 'Home',
8 : 'FinishAsk',
9 : 'ChooseTask'
} }
...@@ -33,10 +41,12 @@ class PageContainer extends React.Component { ...@@ -33,10 +41,12 @@ class PageContainer extends React.Component {
super(props); super(props);
// UTILPATH.socket.getIp(); // UTILPATH.socket.getIp();
this.state = { this.state = {
showPage : showPage[4], showPage : showPage[9],
page : null, page : null,
popupInfo : defaultPopupInfo, popupInfo : defaultPopupInfo,
pageStyle : {
// 'backgroundColor' : '#ffffff'
}
}; };
this.getPages = this.getPages.bind(this); this.getPages = this.getPages.bind(this);
this.showPopup = this.showPopup.bind(this); this.showPopup = this.showPopup.bind(this);
...@@ -97,14 +107,25 @@ class PageContainer extends React.Component { ...@@ -97,14 +107,25 @@ class PageContainer extends React.Component {
case showPage[5]: case showPage[5]:
pages = <TextAreaContainer />; pages = <TextAreaContainer />;
break; break;
case showPage[6]:
pages = <Qrcode />;
break;
case showPage[7]:
pages = <HomeContainer />;
break;
case showPage[8]:
pages = <FinishAskContainer />;
break;
case showPage[9]:
pages = <ChooseTaskContainer />;
break;
} }
return pages; return pages;
} }
render() { render() {
return ( return (
<div className={"pageContainer " + "backColfff"}> <div className={"pageContainer "} style={this.state.pageStyle}>
<HeaderComponent /> <HeaderComponent />
<PopupComponent popupInfo={this.state.popupInfo} /> <PopupComponent popupInfo={this.state.popupInfo} />
{this.state.page} {this.state.page}
......
client/containers/Qrcode/Qrcode.jsx 0 → 100644
import React from 'react';
import ReactQrCode from 'qrcode.react'
require('./index.css');
export default class Qrcode extends React.Component{
constructor(props){
super(props);
this.state = {
url : 'http://www.baidu.com'
}
}
render(){
return(
<div className="qrCodeContainer">
<div className={"qrcode"}>
<ReactQrCode value={this.state.url} size={312}/>
</div>
<div className={"qrcodeText font32"}>
请用手机微信扫一扫上方二维码
</div>
</div>
)
}
}
\ No newline at end of file
client/containers/Qrcode/index.css 0 → 100644
.qrCodeContainer{
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.qrcode{
margin: 183px 0 97px 0;
}
\ No newline at end of file
client/containers/TextAreaContainer/index.css
...@@ -17,4 +17,4 @@ ...@@ -17,4 +17,4 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
resize:none; resize:none;
} }
\ No newline at end of file
client/containers/TroubleContainer/TroubleContainer.jsx
import React from 'react'; import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent' import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent' import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css') require('./index.css')
export default class TroubleContainer extends React.Component{ export default class TroubleContainer extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
this.state = {
showTrouble : false
}
} }
dealTrouble(){ dealTrouble(){
this.setState({
showTrouble : false
})
}
haveNext(){
console.log("有")
}
haveNoNext(){
console.log("没有")
} }
render(){ render(){
...@@ -24,21 +38,32 @@ export default class TroubleContainer extends React.Component{ ...@@ -24,21 +38,32 @@ export default class TroubleContainer extends React.Component{
}; };
let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer; let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
let swiperCount = arr.length; let swiperCount = arr.length;
return <div className={"troubleContainer"}> return (
<div className={"troubleText font32"}><span className={"colff7860"}>* </span>必填项</div> <div className={"toubleContainers"}>
<div className={"troubleBox"}> <div className={"troubleContainer " + ( this.state.showTrouble ? '' : 'hide')}>
<SwiperComponent <div className={"troubleText font32"}><span className={"colff7860"}>* </span>必填项</div>
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount} <div className={"troubleBox"}>
> <SwiperComponent
{dom} swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
</SwiperComponent> >
</div> {dom}
<div className={"troubleBtnBox"}> </SwiperComponent>
<div className={"troubleBtn colfff font32"} onClick={()=>this.dealTrouble.bind(this)()}> </div>
处理完毕 <div className={"troubleBtnBox"}>
<div className={"troubleBtn colfff font32"} onClick={()=>this.dealTrouble.bind(this)()}>
处理完毕
</div>
</div>
</div>
<div className={"selectContainer " + ( this.state.showTrouble ? 'hide' : '')}>
<div className={"selectText font40 col333"} style={{"marginTop":"230px"}}>出货板传送区、机械手平台、轨道是否有未出货遗留的货品</div>
<div className={"selectButtons"}>
<Button text={"有"} option={this.haveNext} style={{"marginTop":"128px"}}/>
<Button text={"没有"} option={this.haveNoNext} style={{"marginTop":"49px"}}/>
</div>
</div> </div>
</div> </div>
)
</div>
} }
} }
\ No newline at end of file
client/containers/TroubleContainer/index.css
...@@ -23,4 +23,13 @@ ...@@ -23,4 +23,13 @@
text-align: center; text-align: center;
background-color: #ff7860; background-color: #ff7860;
border-radius: 10px; border-radius: 10px;
}
.selectContainer{
text-align: center;
}
.selectButtons{
display: flex;
flex-direction: column;
align-items:center;
} }
\ No newline at end of file
client/css/color.css
...@@ -21,7 +21,9 @@ ...@@ -21,7 +21,9 @@
.col999{ .col999{
color: #999999!important; color: #999999!important;
} }
.colf00{
color: #ff0000!important;
}
.border-green{ .border-green{
border-color: #26ce61!important; border-color: #26ce61!important;
......
client/image/default.png 100644 → 100755
client/image/default.png

6.63 KB | W: | H:

client/image/default.png

34.5 KB | W: | H:

client/image/default.png
client/image/default.png
client/image/default.png
client/image/default.png
  • 2-up
  • Swipe
  • Onion skin
client/util/image.js
...@@ -3,6 +3,7 @@ import defaultImg from '../image/default.png'; ...@@ -3,6 +3,7 @@ import defaultImg from '../image/default.png';
import addIcon from '../image/addIcon.png'; import addIcon from '../image/addIcon.png';
import refreshIcon from '../image/refresh.png'; import refreshIcon from '../image/refresh.png';
import plusIcon from '../image/plusIcon.png'; import plusIcon from '../image/plusIcon.png';
import clockIcon from '../image/clock.png';
const localHost = 'http://localhost:7788'; const localHost = 'http://localhost:7788';
const devHost = 'http://test.mjitech.com'; const devHost = 'http://test.mjitech.com';
...@@ -76,6 +77,6 @@ const handleImgLoad = (ref)=>{ ...@@ -76,6 +77,6 @@ const handleImgLoad = (ref)=>{
return style; return style;
} }
const localImg = {headlogo,defaultImg,addIcon,refreshIcon,plusIcon} const localImg = {headlogo,defaultImg,addIcon,refreshIcon,plusIcon,clockIcon}
module.exports = {localHost,devHost,masterHost,getPic,handleImgError,handleImgLoad,localImg}; module.exports = {localHost,devHost,masterHost,getPic,handleImgError,handleImgLoad,localImg};
\ No newline at end of file
package.json
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
"minimist": "^1.2.0", "minimist": "^1.2.0",
"postcss-loader": "^2.1.5", "postcss-loader": "^2.1.5",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"qrcode.react": "^0.8.0",
"react-hot-loader": "^4.0.0", "react-hot-loader": "^4.0.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
......
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