You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
208 lines
4.1 KiB
208 lines
4.1 KiB
<template>
|
|
<view id="warp">
|
|
<view class="list">
|
|
<view class="list_lef">
|
|
<view class="l_l_top">超速报警</view>
|
|
<view class="l_l_bot">{{overspeed}}km/h</view>
|
|
</view>
|
|
<view class="list_rig">
|
|
<switch color="#1B64F8" :checked="isOverspeedAlarm"/>
|
|
<view class="switch_shade" @tap='handleAwitch'></view>
|
|
</view>
|
|
</view>
|
|
<view class="overspeedMask" v-if="showOverspeedMask">
|
|
<view class="overspeedContainer">
|
|
<view class="header">
|
|
<text>超速设置</text>
|
|
</view>
|
|
<view class="middle">
|
|
<text>限速(km/h)：</text>
|
|
<input v-model="speedValue" type="number" />
|
|
</view>
|
|
<view class="footer">
|
|
<text @tap="showOverspeedMask=false">取消</text>
|
|
<text @tap="setOverspeed(true)">确定</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const {urlList,https} = require('@/static/api');
|
|
export default {
|
|
data() {
|
|
return {
|
|
vehicleId:'',
|
|
isOverspeedAlarm:false,
|
|
overspeed:0,
|
|
|
|
showOverspeedMask:false,
|
|
speedValue:80,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.vehicleId = options.id;
|
|
this.getCarInfo(options.id);
|
|
},
|
|
methods:{
|
|
handleAwitch(){
|
|
const that = this;
|
|
let value = this.isOverspeedAlarm;
|
|
if(value){
|
|
uni.showModal({
|
|
title: '确定关闭?',
|
|
content: '是否关闭该车超速报警设置',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.setOverspeed(false);
|
|
}
|
|
}
|
|
})
|
|
return
|
|
}else{
|
|
this.showOverspeedMask = true;
|
|
}
|
|
},
|
|
getCarInfo(id){
|
|
const that = this;
|
|
https(urlList.getCarInfo+'/'+id,'GET','','').then(data => {
|
|
that.isOverspeedAlarm = data.data.isOverspeedAlarm;
|
|
that.overspeed = data.data.overspeed;
|
|
that.speedValue = data.data.overspeed;
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title:err,
|
|
icon:'none',
|
|
duration:1500
|
|
})
|
|
})
|
|
},
|
|
// 确定
|
|
setOverspeed(type){
|
|
const that = this;
|
|
const speedValue = this.speedValue;
|
|
if(speedValue < 80){
|
|
uni.showToast({
|
|
title: '最低不能低于80哦',
|
|
icon: 'none'
|
|
});
|
|
that.speedValue = 80;
|
|
return
|
|
}
|
|
let vehicleId = that.vehicleId;
|
|
https(urlList.setOverSpeed+'/'+vehicleId+'/'+type+'/'+speedValue,'PUT','','').then(data => {
|
|
uni.showToast({
|
|
title:'设置成功',
|
|
icon:'none',
|
|
duration:1500
|
|
})
|
|
that.overspeed = speedValue;
|
|
that.isOverspeedAlarm = type;
|
|
that.showOverspeedMask = false;
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title:err,
|
|
icon:'none',
|
|
duration:1500
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#warp{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.list{
|
|
width: 700rpx;
|
|
height: 150rpx;
|
|
border-bottom: 1rpx solid #e6e6e6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.list_lef{
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #737373;
|
|
.l_l_top{
|
|
font-size: 37rpx;
|
|
}
|
|
.l_l_bot{
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
.list_rig{
|
|
position: relative;
|
|
display: inline-block;
|
|
.switch_shade{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index:11;
|
|
}
|
|
}
|
|
}
|
|
.overspeedMask{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.overspeedContainer{
|
|
width: 650rpx;
|
|
height: 400rpx;
|
|
z-index: 999;
|
|
background: white;
|
|
padding: 40rpx 60rpx 10rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
view{
|
|
flex: 1;
|
|
}
|
|
.header{
|
|
font-size: 40rpx;
|
|
color: #282828;
|
|
font-weight: bold;
|
|
}
|
|
.middle{
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
text{
|
|
color: #6A6A6A;
|
|
}
|
|
input{
|
|
width: 318rpx;
|
|
border-bottom: 4rpx solid #1B64F8;
|
|
padding-bottom: 4rpx;
|
|
}
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
font-size: 30rpx;
|
|
color: #1B64F8;
|
|
text{
|
|
padding: 20rpx;
|
|
}
|
|
text:nth-child(1){
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|