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.
 
 
 
 

239 lines
5.1 KiB

<template>
<view class="content" style='background-color:#09154F;height: 784px;'>
<image src="../../static/image/taitou.png" style="width: 100%;height:7%;position: absolute;"></image>
<view class="title">
<text>控制终端</text>
</view>
<view class="optionButton">
<span :class="optionIndex==0?'pitch':''" @click="cutOption(0)">控制面板</span>
<span :class="optionIndex==1?'pitch':''" @click="cutOption(1)">车辆面板</span>
</view>
<view class="outButton">
<span :class="optionIndex==2?'pitch':''" @click="outLogin()">退出</span>
</view>
<controlPage v-if="optionIndex==0" :Data='deviceData' @deviceControl='deviceControl'></controlPage>
<carPage v-if="optionIndex==1" :carData='deviceData'></carPage>
<view class="showToast" v-if="showToastState==1">
<image :src="showToastIcon=='success'?successIcon:errorIcon"></image>
<span>{{showToastTitle}}</span>
</view>
<uni-popup ref="dialogPopup" type="dialog">
<uni-popup-dialog title='提示' type="success" :content='popupContent' @confirm='popupConfirm'></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
import controlPage from '/components/controlPage/index.vue';
import carPage from '/components/carPage/index.vue';
import {httpPost} from '../../utils/requset.js';
import error from '../../static/image/errorToast.png';
import successImage from '@/static/image/successToast.png';
export default {
components: {
controlPage,
carPage,
},
data() {
return {
optionIndex:0,
deviceData:{},
showToastTitle:'',
showToastIcon:'',
showToastState:0,
errorIcon:error,
successIcon:successImage,
popupContent:'',
popupConfirmIndex:-1,
deviceValue:0
}
},
methods: {
cutOption(value){
this.optionIndex=value;
},
outLogin(){
this.popupConfirmIndex=2;
this.popupContent=`是否退出?`;
this.$refs.dialogPopup.open();
},
//控制设备执行
deviceControl(data){
this.popupConfirmIndex=1;
this.deviceValue=data.value;
this.popupContent=`是否执行${data.contents}操作?`;
this.$refs.dialogPopup.open();
},
//对话框确认
popupConfirm(){
if(this.popupConfirmIndex==1){
this.deviceContrlHttp(this.deviceValue)
}else{
plus.runtime.quit(); //直接退出到桌面
}
},
//控制设备执行的http请求
deviceContrlHttp(value){
let that=this;
httpPost({
url:`/zhxx/dt/horizonLoadIControl/${value}`,
data:{}
}).then((res)=>{
console.log(res)
if(res.data.code==200){
this.showToat({
title:res.data.msg,
icon:'success',
duration:1000
})
}else {
console.log(res.data.msg)
this.showToat({
title:res.data.msg?res.data.msg:'请求失败',
icon:'error',
duration:1000
})
}
}).catch((Error)=>{
// console.log(Error)
this.showToat({
title:Error?Error:'请求失败',
icon:'error',
duration:1000
})
})
},
deviceAjax(){
httpPost({
url:'/zhxx/dt/horizonLoadInfo',
data:{}
}).then((res)=>{
if(res.data.code==200){
this.deviceData=res.data.data[0];
}
}).catch((err)=>{
console.log(err)
if(err.errMsg.includes('Failed to connect')){
this.showToat({
title:'请确保成功连接网络',
icon:'error',
duration:1800
})
}
})
},
showToat(value){
this.showToastState=1;
this.showToastTitle=value.title;
this.showToastIcon=value.icon;
setTimeout(()=>{
this.showToastState=0;
},value.duration)
}
},
watch: {
},
onLoad() {
plus.screen.lockOrientation('landscape-primary'); //强制横屏
uni.getSystemInfo({
success: (info) => {
this.screenHeight = info.windowHeight;
}
});
},
mounted() {
this.deviceAjax();
setInterval(()=>{
this.deviceAjax();
},1000)
// ,{title:res.data.msg?res.data.msg:'请求失败',duration:1000,icon:'error'}
this.$eventBus.on('showToast',(data)=>{
console.log(3333333);
this.showToat(data);
})
}
}
</script>
<style scoped>
.pitch {
color: #0372D7;
}
.content {
position: relative;
width: 100%;
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
top: 0;
font-size: 34px;
letter-spacing: 4px;
z-index: 99;
}
.optionButton{
width: 20%;
height: 5%;
position: absolute;
top: 5.6%;
font-size: 24px;
display: flex;
justify-content: space-around;
align-items: center;
color: #ffffff;
}
.outButton{
font-size: 24px;
color: #ffffff;
position: absolute;
top: 5.6%;
right: 2%;
}
.showToast{
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 16px 12px;
background-color: rgb(0,0,0,0.7);
z-index: 2000;
top: 40%;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.showToast>image{
width: 40px;
height: 40px;
margin-bottom: 20px;
}
.showToast>span{
color: #ffffff;
font-size: 18px;
}
</style>