Skip to content

M
max_android_panel
Commit ecfdaeb0 by Zhang Xin
Options

清冲突

parents 89b8b7af b3eb18e0
Showing with 501 additions and 94 deletions
client/components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer.jsx 0 → 100644
import React from 'react';
require('./index.css');
let addIconSrc = UTILPATH.localImg.plusIcon;
let refreshIconSrc = UTILPATH.localImg.refreshIcon;
/**
* 组件说明 需要props type 与imgSrc
* type == custom 为要显示的图片
* type == add 为添加图片的icon 不需要传入imgSrc
* type == refresh 为刷新的icon 不需要传入imgSrc
*/
export default class ImgToolComponent extends React.Component{
constructor(props){
super(props);
}
render(){
let props = this.props;
let type = props.type;
console.log(type)
let imgSrc = '';
switch(type){
case "custom":
imgSrc = props.imgSrc;
break;
case "add":
imgSrc = addIconSrc;
break;
case "refresh":
imgSrc = refreshIconSrc;
break;
}
console.log(imgSrc)
return(
<div className={"ImgToolComponent"}>
<div className={"imgItem"}>
<img src={imgSrc} alt=""/>
<span className={"closeBtn"}>×</span>
</div>
</div>
)
}
}
\ No newline at end of file
client/components/CommonComponent/CommonSmallComponent/ImgToolComponent/index.css 0 → 100644
.ImgToolComponent {
display: inline-block;
}
.ImgToolComponent .imgItem {
width: 90px;
height: 90px;
display: inline-block;
box-sizing: border-box;
margin-right: 30px;
position: relative;
border: 1px solid #e5e5e5;
}
.ImgToolComponent .uploadImgRight{
float: left;
}
.ImgToolComponent .imgItem img{
width: 90px;
height: 90px;
border-radius: 10px;
}
.ImgToolComponent .imgItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
}
\ No newline at end of file
client/containers/OtherQuestionContainer/OtherQuestionContainer.jsx 0 → 100644
'use strict';
import React from 'react';
import { connect } from 'react-redux';
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
require('./index.css');
class OtherQuestionContainer extends React.Component{
constructor(props){
super(props)
this.state = {
showCategoryElement:false,
showDetailElement:false,
currentLiIndex:0
}
}
handleShowElement(value){
console.log(value);
console.log(this.state[value])
this.setState(
{
[value]:!this.state[value]
}
)
}
handleDetailProblem(event){
this.setState({
currentLiIndex: parseInt(event.currentTarget.getAttribute('date-index'))
})
}
render(){
let detailData1 = ["机器故障","机器故障","机器故障","机器故障","机器故障","机器故障","机器故障"];
let detailData2 = ["机器故障","机器故障","机器故障","机器故障","机器故障","机器故障","机器故障"];
let categoryProblemUi = detailData1.map((item,index)=>{
return <li key={index}
date-index={index}
className={this.state.currentLiIndex == index ? 'active_li':''}
onClick={(e)=>(this.handleDetailProblem.bind(this,e))()}>{item}</li>
})
let detailCategoryProblemUi = detailData2.map((item,index)=>{
return <li key={'detailProblem'+index}
date-index={index}
className={this.state.currentLiIndex == index ? 'active_li':''}
onClick={(e)=>(this.handleDetailProblem.bind(this,e))()}>{item}</li>
})
return (
<div className={"OtherQuestionContainer"}>
<div className={"otherQuestionTitleContainer"}>你是否有其他问题希望反馈(<i>*</i>必填项)</div>
<div className={"editOtherQuestionContainer clearfix"}>
<div className={"editUploadItem clearfix"}>
<span className={"closeBtn"}>×</span>
<div className={"newTroubleTitle"}>
新故障问题：故障 <span>SD568844</span>
</div>
<div className={"newTroubleContent clearfix"}>
<span className={"startIcon"}>*</span>
<div className={"fakeSelect"}>
<div className={"problemCategoryTitle"} onClick={this.handleShowElement.bind(this,"showCategoryElement")} >分类问题</div>
{
this.state.showCategoryElement?(
<ul className={"problemCategory"} name="" id="">
{
categoryProblemUi
}
</ul>
):""
}
</div>
<div className={"fakeSelect"}>
<div className={"problemCategoryTitle"} onClick={this.handleShowElement.bind(this,"showDetailElement")}>具体问题</div>
{
this.state.showDetailElement?(
<ul className={"DetailProblem"} name="" id="">
{
detailCategoryProblemUi
}
</ul>
):""
}
</div>
</div>
<div className={"newTroubleRemark clearfix"}>
<span className={"startIcon"}>*</span>
<div className={"remarkContent"}>
<div className={"editIcon"}>编辑</div>
<div className={"remarkText"}>编辑检查结果</div>
</div>
</div>
<div className={"damageImgs clearfix"}>
<div className={"uploadImgRight"}>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
</div>
<div className={"operationLeft"}>
<ImgToolComponent type={"refresh"}></ImgToolComponent>
<ImgToolComponent type={"add"}></ImgToolComponent>
</div>
</div>
</div>
</div>
<div className={"opeationContainer clearfix"}>
<button className={"addMoreBtn"}><span>+</span>录入更多</button>
<button className={"noMoreBtn"}>没有更多</button>
</div>
</div>
)
}
}
function select(store) {
return Object.assign({}, {state: store})
}
export default connect(select)(OtherQuestionContainer)
\ No newline at end of file
client/containers/OtherQuestionContainer/index.css 0 → 100644
.OtherQuestionContainer{
height: 856px;
width: 100%;
background-color: #f5f5f5;
padding-left: 30px;
}
.OtherQuestionContainer .otherQuestionTitleContainer{
padding: 56px 0 34px 38px;
line-height: 25px;
font-size: 25px;
}
.OtherQuestionContainer .editOtherQuestionContainer{}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem{
border: 2px solid #e5e5e5;
padding: 40px 40px 40px 40px;
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleTitle{
font-size: 43px;
font-weight: 700;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent{
margin-top: 36px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .startIcon{
height: 80px;
line-height: 80px;
color: #ff7860;
font-size: 15px;
float: left;
display: inline-block;
margin-right: 15px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .fakeSelect{
float: left;
display: inline-block;
width: 320px;
position: relative;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .fakeSelect ul{
position: absolute;
width: 320px;
left: 0;
top: 80px;
z-index: 50;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent li,.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .problemCategoryTitle{
height: 80px;
text-align: center;
box-sizing: border-box;
line-height:80px;
border: 1px solid #e5e5e5;
background-color: #fff;
color: #333333;
font-size: 32px;
margin: 0 15px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent li{
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
background-color: #fff;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent li.active_li{
background-color: #474950;
color: #ffffff;
}
.OtherQuestionContainer .problemCategory,.OtherQuestionContainer .DetailProblem{
}
/*.OtherQuestionContainer .problemCategory li,.OtherQuestionContainer .DetailProblem li{
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
background-color: #fff;
}
.OtherQuestionContainer .problemCategory li:hover,.OtherQuestionContainer .DetailProblem li:hover{
background-color: #474950;
color: #ffffff;
}*/
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .problemCategory{
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .DetailProblem{}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark{
margin-top: 4px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark .startIcon{
float: left;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark .remarkContent{
float: left;
width: 1250px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark .remarkContent .editIcon{
text-align: right;
padding: 13px 10px;
font-size: 24px;
color: #ff7860;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark .remarkContent .remarkText{
height: 198px;
border: 1px solid #e5e5e5;
border-radius: 10px;
background-color: #f2f2f2;
line-height: 198px;
text-align: center;
font-size: 24px;
color: #999999;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .damageImgs .uploadImgRight{
float: left;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .damageImgs .operationLeft{
float: left;
}
.OtherQuestionContainer .opeationContainer{
margin-top: 20px;
text-align: left;
padding-left: 995px;
}
.OtherQuestionContainer .opeationContainer button{
width: 413px;
text-align: center;
line-height: 80px;
height: 80px;
font-size: 32px;
color: #000000;
background-color:#ffffff;
float: left;
border: 1px solid #e5e5e5;
margin: 0 10px;
border-radius: 10px;
}
.OtherQuestionContainer .opeationContainer .addMoreBtn{
color: #ffffff;
background-color: #25ce60;
}
.OtherQuestionContainer .opeationContainer .addMoreBtn span{}
.OtherQuestionContainer .opeationContainer .noMoreBtn{}
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
......@@ -7,12 +7,18 @@ import TroubleContainer from '../TroubleContainer/TroubleContainer'
import TextAreaContainer from '../TextAreaContainer/TextAreaContainer'
import ScanBarCodeContainer from '../ScanBarCodeContainer/ScanBarCodeContaienr'
import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDamagesListContainer'
import OtherQuestionContainer from '../OtherQuestionContainer/OtherQuestionContainer'
require('./index.css')
const showPage = {
1 : 'Trouble',
2 : 'Scan',
4 : 'TextArea'
};
3 : 'DamageProductList',
4 : 'OtherQuestionUpload',
5 : 'TextArea'
}
const defaultPopupInfo = {
showPopup : false, //是否显示弹窗
......@@ -82,8 +88,16 @@ class PageContainer extends React.Component {
case showPage[2]:
pages = <ScanBarCodeContainer />;
break;
case showPage[3]:
pages = <ReportDamagesListContainer />;
break;
case showPage[4]:
pages = <TextAreaContainer />
pages = <OtherQuestionContainer />;
break;
case showPage[5]:
pages = <TextAreaContainer />;
break;
}
return pages;
}
......
client/containers/ReportDamagesListContainer/index.css
.ReportDamagesListContainer{
height: 856px;
width: 100%;
background-color: darkcyan;
background-color: f5f5f5;
padding-left: 30px;
}
.ReportDamagesListContainer .damageTitleContainer{
padding: 56px 0 34px 38px;
line-height: 25px;
font-size: 25px;
background-color: orangered;
}
.ReportDamagesListContainer .damageProductList{}
.ReportDamagesListContainer .damageProductList .damageProductItem{
border: 1px solid #f2f2f2;
border: 2px solid #e5e5e5;
padding: 60px;
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo{
border-bottom: 1px dashed #f2f2f2;
border-bottom: 1px dashed #e5e5e5;
padding-bottom: 30px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .productImg{
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid #f2f2f2;
background-color: darkgoldenrod;
border: 1px solid #e5e5e5;
/*background-color: darkgoldenrod;*/
float: left;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber{
......@@ -69,5 +86,76 @@
font-size: 40px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo{
margin-top: 16px;
}
\ No newline at end of file
margin-top: 16px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .locationAndStatusInfo{
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .locationAndStatusInfo p{
color: #333333;
font-size: 30px;
margin-right: 80px;
padding: 8px 0;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .locationAndStatusInfo p span{
display: inline;
margin-left: 15px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .damageImgs{
margin-top: 40px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .damageImgs .imgItem {
width: 90px;
height: 90px;
display: inline-block;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #e5e5e5;
margin-right: 30px;
position: relative;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .damageImgs .imgItem img{
width: 90px;
height: 90px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .damageImgs .imgItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
}
.ReportDamagesListContainer .opeationContainer{
margin-top: 20px;
text-align: left;
padding-left: 995px;
}
.ReportDamagesListContainer .opeationContainer button{
width: 413px;
text-align: center;
line-height: 80px;
height: 80px;
font-size: 32px;
color: #000000;
background-color:#ffffff;
float: left;
border-bottom: 1px solid #e5e5e5;
margin: 0 10px;
border-radius: 10px;
}
.ReportDamagesListContainer .opeationContainer .addMoreBtn{
color: #ffffff;
background-color: #25ce60;
}
.ReportDamagesListContainer .opeationContainer .addMoreBtn span{}
.ReportDamagesListContainer .opeationContainer .noMoreBtn{}
\ No newline at end of file
client/containers/ScanBarCodeContainer/ScanBarCodeContaienr.jsx
......@@ -2,6 +2,8 @@
import React from 'react';
import { connect } from 'react-redux';
import { scanBarCodeGetProductInfo } from '../../actions/ScanBarCodeContainer'
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
require('./index.css');
class ScanBarCodeContainer extends React.Component{
constructor(props) {
......@@ -93,52 +95,19 @@ class ScanBarCodeContainer extends React.Component{
</div>
<div className={"uploadContainer clearfix"}>
<div className={"uploadImgRight"}>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
</div>
<div className={"operationLeft"}>
<div className={"imgItem"}>
<img src={UTILPATH.localImg.plusIcon} alt=""/>
</div>
<div className={"imgItem"}>
<img src={UTILPATH.localImg.refreshIcon} alt=""/>
</div>
<ImgToolComponent type={"refresh"}></ImgToolComponent>
<ImgToolComponent type={"add"}></ImgToolComponent>
</div>
</div>
......
client/containers/ScanBarCodeContainer/index.css
......@@ -3,7 +3,6 @@
}
.scanBarCodeContainer .container{
height: 856px;
background-color:darkmagenta;
padding-left: 600px;
padding-top: 197px;
padding-right: 75px ;
......@@ -177,44 +176,9 @@ input:-ms-input-placeholder, textarea:-ms-input-placeholder {
float: left;
display: inline-block;
}
.scanBarCodeContainer .productContainer .uploadContainer .imgItem{
width: 90px;
height: 90px;
display: inline-block;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #f2f2f2;
margin-right: 30px;
position: relative;
}
/*.productContainer .uploadContainer .imgItem:nth-last-child(1){
margin-right: 0;
}*/
.scanBarCodeContainer .productContainer .uploadContainer .imgItem img{
width: 90px;
height: 90px;
}
.scanBarCodeContainer .productContainer .uploadContainer .imgItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
}
.scanBarCodeContainer .productContainer .uploadContainer .uploadImgRight{}
.scanBarCodeContainer .productContainer .uploadContainer .operationLeft{
float: right;
display: inline-block;
}
.scanBarCodeContainer .productContainer .uploadContainer .operationLeft .imgItem{
border: none;
}
\ No newline at end of file
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