Skip to content

W
wx-app-hairDryer
Commit b50e5b48 by yemin
Options

增加鼓风机运维界面

parent 5827952b
Showing with 473 additions and 0 deletions
src/api/index.js
......@@ -90,3 +90,31 @@ export const getUnbindKeyboardResult = entity =>
url: `/devices/${entity.deviceCode}/keyboard/unbinding`,
params: entity,
});
// 获取鼓风机到期时间
export const getDuration = entity =>
fetch({
url: `/devices/${entity.deviceCode}/duration`,
params: entity,
});
// 清楚鼓风机剩余时长
export const cleanDuration = entity =>
fetch({
url: `/devices/${entity.deviceCode}/${entity.side}/duration/clean`,
method: 'post',
params: entity,
});
// 延长剩余时长
export const delayedDuration = entity =>
fetch({
url: `/devices/${entity.deviceCode}/${entity.side}/duration/add/${entity.day}`,
method: 'post',
params: entity,
});
// 缩短剩余时长
export const reduceDuration = entity =>
fetch({
url: `/devices/${entity.deviceCode}/${entity.side}/duration/reduce/${entity.day}`,
method: 'post',
params: entity,
});
src/config/index.js
export const APP_ID = 'wxf5912b79bba23663';
export const SERVER_URL = 'http://ex-dev-blower-manager.168cad.top';
//export const SERVER_URL = 'http://127.0.0.1:8080';
export default {
APP_ID,
......
src/containers/App.js
......@@ -8,6 +8,7 @@ import Login from './Login/index';
import Equipment from './EquipmentContent/index';
import EquipmentTest from './Equipment/EquipmentTest';
import BindEquipment from './BindEquipment';
import EquipmentSpecialArea from './Equipment/EquipmentSpecialArea';
import NoMatch from './NoMatch';
function App() {
......@@ -38,6 +39,10 @@ function App() {
path='/EquipmentTest'
render={props => <EquipmentTest {...props} setTitle={setTitle} />}
/>
<Route
path='/EquipmentSpecialArea'
render={props => <EquipmentSpecialArea {...props} setTitle={setTitle} />}
/>
<Route component={NoMatch} />
</Switch>
</UserProvider>
......
src/containers/Equipment/EquipmentSpecialArea.js 0 → 100644
import React, { Component } from 'react';
import { Toast, Button, Radio, Flex, WingBlank, Modal } from 'antd-mobile';
import './EquipmentSpecialArea.scss';
import eqIcon from '../../images/Equipment/equip_number_icon@2x.png';
//import testIcon from '../../images/Equipment/test_water_icon@2x.png';
import scanImg from '../../images/Equipment/scan.png';
import WxWrap from '../../HOC/wx';
import {getDuration, cleanDuration, delayedDuration, reduceDuration } from '../../api';
//import rateIcon from '../../images/Equipment/rate_active_icon@2x.png';
const alert = Modal.alert;
let DeviceCode = '';
class EquipmentSpecialArea extends Component {
state = {
deviceCode: DeviceCode,
getTime: 0,
timer: null,
sideValue: 0,
typeValue: 0,
leftExpireDate: null,
rightExpireDate: null,
duration: null
};
componentWillMount() {
const { setTitle } = this.props;
setTitle('功能页');
}
changeHandle = e => {
this.setState({
deviceCode: e.target.value.trim(),
});
DeviceCode = e.target.value.trim();
};
validateDeviceCode = () => {
const { deviceCode } = this.state;
return deviceCode ? true : false;
};
goPage = path => {
if (this.validateDeviceCode()) {
const { history } = this.props;
const { deviceCode } = this.state;
history.push(`/Equipment/${deviceCode}` + path);
} else {
Toast.fail('请输入设备编号');
}
};
scanEquipment = () => {
const { wxDone, wxConfigHandle } = this.props;
console.log('wxDone', wxDone);
if (wxDone) {
this.scanHandle();
} else {
wxConfigHandle()
.then(() => {
console.log('in res');
this.scanHandle();
})
.catch(() => {
console.log('in error');
Toast.fail('启用微信失败！');
});
}
};
scanHandle = () => {
const { wxConfigHandle } = this.props;
const wx = window.wx;
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
success: res => {
const result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
this.setState({
// deviceCode: result,
deviceCode: result.indexOf('www.dcrym.com?code=')<0?result:result.substring(29,37),
});
},
fail: err => {
console.log(err);
Toast.info(err.errMsg || '调用扫一扫失败！');
wxConfigHandle();
},
});
};
changeSides = (sideValue) => {
this.setState({
sideValue,
});
};
chanageTypes = (typeValue) => {
this.setState({
typeValue,
});
};
changeDuration = (e) => {
this.setState({
duration: e.target.value,
});
};
clickFecth = () => {
const { deviceCode } = this.state;
if (!deviceCode) {
Toast.fail('请输入设备编号或扫设备二维码');
return;
}
Toast.loading('请等待...', 99);
getDuration({deviceCode: deviceCode}).then(res => {
console.log(res);
this.setState({
leftExpireDate: res.data[0],
rightExpireDate: res.data[1]
});
Toast.success(res.msg);
}).catch(err => {
Toast.fail('请求失败：'||err.msg);
});
};
clickModify = () => {
const { deviceCode,sideValue,typeValue,duration } = this.state;
console.log('sideValue == '+sideValue);
console.log('typeValue == '+typeValue);
console.log('duration == '+duration);
if (!deviceCode) {
Toast.fail('请输入设备编号或扫设备二维码');
return;
}
if(sideValue === null){
Toast.fail('请选择本次操作的通道');
return;
}
if(!typeValue){
Toast.fail('请选择本次操作的动作');
return;
}
if(typeValue !== 3){
if(!duration || duration === 0){
Toast.fail('请输入延长/缩减天数');
return;
}
}
let msg = '本次操作将';
if(typeValue===1){
msg += '延长'+(sideValue===0?'左侧':'右侧')+'使用时长'+duration+'天。';
}
if(typeValue===2){
msg += '缩减'+(sideValue===0?'左侧':'右侧')+'使用时长'+duration+'天。';
}
if(typeValue===3){
msg += '清零'+(sideValue===0?'左侧':'右侧')+'使用时长。';
}
alert('确认提示', msg, [
{ text: '取消', onPress: () => console.log('cancel') },
{ text: '确认', onPress: () => {
Toast.loading('请等待...', 99);
if(typeValue===1){// 延长
delayedDuration({deviceCode: deviceCode, side: sideValue, day: duration}).then(res => {
console.log(res);
this.setState({
leftExpireDate: res.data[0],
rightExpireDate: res.data[1]
});
Toast.success(res.msg);
}).catch(err => {
Toast.fail('请求失败：'||err.msg);
});
} else if(typeValue===2){// 缩减
reduceDuration({deviceCode: deviceCode, side: sideValue, day: duration}).then(res => {
console.log(res);
this.setState({
leftExpireDate: res.data[0],
rightExpireDate: res.data[1]
});
Toast.success(res.msg);
}).catch(err => {
Toast.fail('请求失败：'||err.msg);
});
} else if(typeValue===3){// 清零
cleanDuration({deviceCode: deviceCode, side: sideValue}).then(res => {
console.log(res);
this.setState({
leftExpireDate: res.data[0],
rightExpireDate: res.data[1]
});
Toast.success(res.msg);
}).catch(err => {
Toast.fail('请求失败：'||err.msg);
});
}
}},
])
};
render() {
const { deviceCode, sideValue, typeValue, leftExpireDate, rightExpireDate} = this.state;
// const RadioItem = Radio.RadioItem;
// const RadioGroup = Radio.Group;
const sideData = [
{ value: 0, label: '左侧' },
{ value: 1, label: '右侧' },
];
const typeData = [
{ value: 1, label: '延长' },
{ value: 2, label: '缩减' },
{ value: 3, label: '清零' },
];
return (
<div className='appContent Equipment'>
<div className='inputBox'>
<div className='listItem'>
<i className='inputIcon'>
<img src={eqIcon} alt='' />
</i>
{/* <span className='ellipsis inputText'>
设备编号：
</span> */}
<input
className='br8 listInput'
onChange={this.changeHandle}
type='text'
placeholder='请输入设备编号'
maxLength='8'
value={deviceCode}
/>
</div>
<Button type='primary' className='scan' onClick={this.scanEquipment}>
<div className='scanicon'>
<img src={scanImg} alt='' />
</div>
</Button>
</div>
<div className='scontent'>
<div className='scontentCol'>
<Flex style={{ paddingLeft: '15px' , paddingRight: '15px' }}>
<Flex.Item style={{ padding: '5px 0', color: '#888', flex: 'none' }}>左侧到期时间：</Flex.Item>
<Flex.Item>
<div>{leftExpireDate}</div>
</Flex.Item>
</Flex>
</div>
<div className='scontentCol'>
<Flex style={{ paddingLeft: '15px' , paddingRight: '15px' }}>
<Flex.Item style={{ padding: '5px 0', color: '#888', flex: 'none' }}>右侧到期时间：</Flex.Item>
<Flex.Item>
<div>{rightExpireDate}</div>
</Flex.Item>
</Flex>
</div>
<div className='scontentCol button button1'>
<WingBlank>
<Button type='primary' className='btn' onClick={this.clickFecth}>查询</Button>
</WingBlank>
</div>
<div className='scontentCol'>
<Flex style={{ paddingLeft: '15px' , paddingRight: '15px' }}>
<Flex.Item style={{ padding: '10px 0', color: '#888', flex: 'none' }}>通道：</Flex.Item>
{sideData.map(i => (
<Flex.Item key={i.value}>
<Radio className="my-radio" key={i.value} checked={sideValue === i.value} onChange={() => this.changeSides(i.value)}>{i.label}</Radio>
</Flex.Item>
))}
</Flex>
</div>
<div className='scontentCol'>
<Flex style={{ paddingLeft: '15px' , paddingRight: '15px'}}>
<Flex.Item style={{ padding: '10px 0', color: '#888', flex: 'none' }}>动作：</Flex.Item>
{typeData.map(i => (
<Flex.Item key={i.value}>
<Radio className="my-radio" key={i.value} checked={typeValue === i.value} onChange={() => this.chanageTypes(i.value)}>{i.label}</Radio>
</Flex.Item>
))}
</Flex>
</div>
<div className='scontentCol'>
<Flex style={{ paddingLeft: '15px' , paddingRight: '15px' }}>
<Flex.Item style={{ padding: '10px 0', color: '#888', flex: 'none' }}>延长/缩减：</Flex.Item>
<Flex.Item>
<input type='number' placeholder='请录入天数' style={{width:'80%'}} onChange ={event => this.changeDuration(event)}></input>
</Flex.Item>
</Flex>
</div>
<div className='scontentCol button button2'>
<WingBlank>
<Button type='primary' className='btn' onClick={this.clickModify}>设置</Button>
</WingBlank>
</div>
</div>
</div>
);
}
}
export default props => (
<WxWrap render={state => <EquipmentSpecialArea {...props} {...state} />} />
);
src/containers/Equipment/EquipmentSpecialArea.scss 0 → 100644
.Equipment {
flex: 1;
background:rgba(255, 255, 255, 1) url('../../images/Login/login_bg@2x.png') no-repeat;
background-size: contain;
background-position-y: -750px;
overflow-y: auto;
.inputBox {
display: flex;
width: 500px;
margin: 45px auto 0;
}
/* .inputInner {
composes: listItem from '../Login/style.css';
} */
/* .input {
composes: listInput from '../Login/style.css';
} */
.inputIcon {
width: 24px;
height: 28px;
margin: 26px 10px 0 20px;
}
.inputText {
font-size: 26px;
color: #444;
flex: 1;
line-height: 80px;
}
.btnBox {
width: 500px;
margin: 86px auto 0;
background-color: #fff;
box-shadow: 0 0 5px rgba(43, 43, 43, 0.3);
display: flex;
flex-wrap: wrap;
position: relative;
}
.testBtnBox {
height: 250px;
justify-content: center;
}
.boxB,
.boxBv,
.testBoxBs {
position: absolute;
background-color: #ebebeb;
}
.boxBs,
.testBoxBs {
width: 2px;
height: 440px;
left: 249px;
top: 30px;
}
.testBoxBs {
height: 190px;
}
.boxBv {
width: 440px;
height: 2px;
left: 30px;
top: 249px;
}
.linkItem {
box-sizing: border-box;
width: 250px;
height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #444;
font-size: 26px;
position: relative;
}
.linkItem:nth-child(odd),
.linkItem:nth-child(even) {
border-bottom: 1px solid #ebebeb;
}
.linkItem:nth-child(odd) {
border-right: 1px solid #ebebeb;
}
.linkIcon {
width: 60px;
height: 60px;
margin-bottom: 20px;
}
.scan {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
line-height: 80px;
margin-left: 10px;
font-size: 24px;
padding: 0 24px;
}
.scanicon {
width: 45px;
height: 45px;
}
.scontent {
width: 100%;
margin-top: 70px;
// padding-left: 10px;
// padding-right: 10px;
}
.scontentCol {
// width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.button{
margin-left: 10px;
margin-right: 10px;
}
.button1{
margin-top: 20px;
margin-bottom: 60px;
}
.button2{
margin-top: 40px;
}
.my-radio .am-radio {
padding: 2.5px;
border: 1px solid #ccc;
border-radius: 50%;
margin-right: 5px;
}
}
\ No newline at end of file
src/containers/Login/index.js
......@@ -85,6 +85,7 @@ export class Index extends React.Component {
// console.log(res);
const data = res.data;
const { accountCategory } = data;
const { isSpecialArea } = data;
const { history } = this.props;
updateUserInfo({
...data,
......@@ -97,6 +98,15 @@ export class Index extends React.Component {
},
});
const location =
// {
// pathname: '/EquipmentSpecialArea',
// state: data,
// };
isSpecialArea === 1
? {
pathname: '/EquipmentSpecialArea',
state: data,
} :
accountCategory === 1
? {
pathname: '/BindEquipment',
......
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