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 Clock from '../../components/CommonComponent/ClockComponent/ClockComponent'
require('./index.css');
export default class HomeContainer extends React.Component{
......@@ -13,12 +14,23 @@ export default class HomeContainer extends React.Component{
}
componentWillReceiveProps(nextProps){
}
render(){
return(
<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>
)
}
......
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'
import ScanBarCodeContainer from '../ScanBarCodeContainer/ScanBarCodeContaienr'
import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDamagesListContainer'
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')
......@@ -16,7 +20,11 @@ const showPage = {
2 : 'Scan',
3 : 'DamageProductList',
4 : 'OtherQuestionUpload',
5 : 'TextArea'
5 : 'TextArea',
6 : 'Qrcode',
7 : 'Home',
8 : 'FinishAsk',
9 : 'ChooseTask'
}
......@@ -33,10 +41,12 @@ class PageContainer extends React.Component {
super(props);
// UTILPATH.socket.getIp();
this.state = {
showPage : showPage[4],
showPage : showPage[9],
page : null,
popupInfo : defaultPopupInfo,
pageStyle : {
// 'backgroundColor' : '#ffffff'
}
};
this.getPages = this.getPages.bind(this);
this.showPopup = this.showPopup.bind(this);
......@@ -97,14 +107,25 @@ class PageContainer extends React.Component {
case showPage[5]:
pages = <TextAreaContainer />;
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;
}
render() {
return (
<div className={"pageContainer " + "backColfff"}>
<div className={"pageContainer "} style={this.state.pageStyle}>
<HeaderComponent />
<PopupComponent popupInfo={this.state.popupInfo} />
{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 @@
background-color: transparent;
border: none;
resize:none;
}
\ No newline at end of file
}
client/containers/TroubleContainer/TroubleContainer.jsx
import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
export default class TroubleContainer extends React.Component{
constructor(props){
super(props);
this.state = {
showTrouble : false
}
}
dealTrouble(){
this.setState({
showTrouble : false
})
}
haveNext(){
console.log("有")
}
haveNoNext(){
console.log("没有")
}
render(){
......@@ -24,21 +38,32 @@ export default class TroubleContainer extends React.Component{
};
let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
let swiperCount = arr.length;
return <div className={"troubleContainer"}>
<div className={"troubleText font32"}><span className={"colff7860"}>* </span>必填项</div>
<div className={"troubleBox"}>
<SwiperComponent
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
>
{dom}
</SwiperComponent>
</div>
<div className={"troubleBtnBox"}>
<div className={"troubleBtn colfff font32"} onClick={()=>this.dealTrouble.bind(this)()}>
处理完毕
return (
<div className={"toubleContainers"}>
<div className={"troubleContainer " + ( this.state.showTrouble ? '' : 'hide')}>
<div className={"troubleText font32"}><span className={"colff7860"}>* </span>必填项</div>
<div className={"troubleBox"}>
<SwiperComponent
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
>
{dom}
</SwiperComponent>
</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>
)
}
}
\ No newline at end of file
client/containers/TroubleContainer/index.css
......@@ -23,4 +23,13 @@
text-align: center;
background-color: #ff7860;
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 @@
.col999{
color: #999999!important;
}
.colf00{
color: #ff0000!important;
}
.border-green{
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';
import addIcon from '../image/addIcon.png';
import refreshIcon from '../image/refresh.png';
import plusIcon from '../image/plusIcon.png';
import clockIcon from '../image/clock.png';
const localHost = 'http://localhost:7788';
const devHost = 'http://test.mjitech.com';
......@@ -76,6 +77,6 @@ const handleImgLoad = (ref)=>{
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};
\ No newline at end of file
package.json
......@@ -28,6 +28,7 @@
"minimist": "^1.2.0",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.2",
"qrcode.react": "^0.8.0",
"react-hot-loader": "^4.0.0",
"redux-logger": "^3.0.6",
"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