521 lines
10 KiB
Vue
521 lines
10 KiB
Vue
<template>
|
||
<view class="page" @click.stop="hidesub()">
|
||
<view class="left">
|
||
<view class="top">
|
||
<view class="logo" @click.stop="showsignOut=true">
|
||
<image src="/static/logo.png"></image>
|
||
区间测速
|
||
<view class="signOut" @click.stop="logOut" v-if="showsignOut">
|
||
<view class="icon"><uni-icons type="upload" size="20rpx" color="#fff"></uni-icons></view>
|
||
退出登录
|
||
</view>
|
||
</view>
|
||
<view class="tabnav">
|
||
<view class="li" :class="{on:selectindex==0}" @click="settab(0)">
|
||
<view class="l">
|
||
<image :src="`/static/tab/${selectindex==0?1:11}.png`"></image>
|
||
</view>
|
||
<view class="text">预警信息</view>
|
||
</view>
|
||
<view class="li" :class="{on:selectindex==1}" @click="settab(1)">
|
||
<view class="l">
|
||
<image :src="`/static/tab/${selectindex==1?2:22}.png`"></image>
|
||
</view>
|
||
<view class="text">过车信息</view>
|
||
</view>
|
||
<view class="li" :class="{on:selectindex==2}" @click="settab(2)">
|
||
<view class="l">
|
||
<image :src="`/static/tab/${selectindex==2?3:33}.png`"></image>
|
||
</view>
|
||
<view class="text">历史记录</view>
|
||
</view>
|
||
<view class="li" :class="{on:selectindex==3}" @click="settab(3)">
|
||
<view class="l">
|
||
<image :src="`/static/tab/${selectindex==3?4:44}.png`"></image>
|
||
</view>
|
||
<view class="text">统计数据</view>
|
||
</view>
|
||
<view class="li" :class="{on:selectindex==4}" @click="settab(4)">
|
||
<view class="l">
|
||
<image :src="`/static/tab/${selectindex==4?5:55}.png`"></image>
|
||
</view>
|
||
<view class="text">预警设置</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="title">设备：</view>
|
||
<view class="item" v-for="item in allDevices"
|
||
:class="{on1:(selectindex==5 && Devicesid==item.encoding),on:item.status==2}"
|
||
@click.stop="setshowDevices(item)">
|
||
<view class="l">
|
||
<image v-if="item.status==2 " src="/static/equipmenton.png"></image>
|
||
<image v-else src="/static/equipmentno.png"></image>
|
||
<view class="name">设备{{item.encoding}}</view>
|
||
</view>
|
||
<view class="r"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right" id="rightbox">
|
||
<view class="subpage" v-show="state[0]==1">
|
||
<warningInformation ref="refwarningInformation" />
|
||
</view>
|
||
<view class="subpage" v-show="state[1]==1">
|
||
<passingTheCar ref="refpassingTheCar" />
|
||
</view>
|
||
<view class="subpage" v-show="state[2]==1">
|
||
<history ref="refhistory" />
|
||
</view>
|
||
<view class="subpage" v-show="state[3]==1">
|
||
<statistics ref="refstatistics" />
|
||
</view>
|
||
<view class="subpage" v-show="state[4]==1">
|
||
<setUp ref="refsetUp" />
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
</view>
|
||
<view class="popUpNotificationout" v-if="showout">
|
||
<view class="box">
|
||
<view class="title">提示</view>
|
||
<view class="desc">账号已在其他设备登录</view>
|
||
<view class="yes" @click="outsignOut">确定</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import history from "./pages/history.vue"
|
||
import setUp from "./pages/setUp.vue"
|
||
import statistics from "./pages/statistics.vue"
|
||
import passingTheCar from "./pages/passingTheCar.vue"
|
||
import warningInformation from "./pages/warningInformation.vue"
|
||
|
||
import {
|
||
nextTick,
|
||
ref,
|
||
watch
|
||
} from "vue"
|
||
|
||
import {
|
||
getequipment
|
||
} from "/appapi/index.js"
|
||
|
||
import {
|
||
onBackPress,
|
||
onShow,
|
||
onUnload
|
||
} from "@dcloudio/uni-app"
|
||
|
||
// 页面管理
|
||
const refhistory = ref()
|
||
const refsetUp = ref()
|
||
const refcamera = ref()
|
||
const refstatistics = ref()
|
||
const refpassingTheCar = ref()
|
||
const refwarningInformation = ref()
|
||
const selectindex = ref("")
|
||
const showout = ref(false);
|
||
const showsignOut = ref(false);
|
||
// 结束
|
||
// 设备
|
||
const allDevices = ref([])
|
||
const Devicesid = ref('')
|
||
// 子页面状态管理
|
||
const state = ref([0, 0, 0, 0, 0, 0]) //0表示页面为加载 1 表示页面已加载并显示 2页面隐藏
|
||
nextTick(() => {
|
||
settab(0);
|
||
})
|
||
// 处理子页面弹窗 和详情页面打开 返回关闭详情页面不关闭应用
|
||
let _isback = false;
|
||
uni.$on('back', (e) => {
|
||
_isback = e;
|
||
})
|
||
onBackPress(() => {
|
||
uni.$emit('close')
|
||
return _isback
|
||
})
|
||
uni.$on('LOGOUT', () => {
|
||
// 清除token
|
||
// 断WebSocket
|
||
uni.removeStorageSync("token");
|
||
uni.removeStorageSync("USERID")
|
||
uni.$emit('Socketclose')
|
||
|
||
// h5 弹窗
|
||
// #ifdef H5
|
||
showout.value = true;
|
||
// #endif
|
||
// APP 透明窗口
|
||
// #ifdef APP
|
||
uni.navigateTo({
|
||
url: '/pages/signOut'
|
||
});
|
||
// #endif
|
||
|
||
})
|
||
let _getequipment;
|
||
onShow(() => {
|
||
// 获取设备信息
|
||
clearInterval(_getequipment)
|
||
getequipmentinfo()
|
||
_getequipment=setInterval(()=>{
|
||
getequipmentinfo()
|
||
},10000)
|
||
|
||
})
|
||
|
||
onUnload(()=>{
|
||
clearInterval(_getequipment)
|
||
})
|
||
//定时获取设备信息
|
||
function getequipmentinfo(){
|
||
getequipment().then(r => {
|
||
allDevices.value = r.data ? r.data.allDevices : []
|
||
})
|
||
}
|
||
// 退出登录
|
||
function outsignOut() {
|
||
showout.value = false;
|
||
uni.$emit('Socketclose')
|
||
uni.removeStorageSync("token");
|
||
uni.removeStorageSync("USERID")
|
||
// 跳转登录页
|
||
uni.reLaunch({
|
||
url: "/pages/signIn"
|
||
})
|
||
|
||
}
|
||
let _is = true;
|
||
|
||
function hidesub() {
|
||
_is = true;
|
||
|
||
showsignOut.value = false;
|
||
uni.$emit("camerahide")
|
||
|
||
}
|
||
// 打开设备页面l
|
||
function setshowDevices(item) {
|
||
// Devicesid.value=item.encoding;
|
||
// // 防止多次点击
|
||
// if (!_is ) {
|
||
// return
|
||
// }
|
||
// _is = false;
|
||
// selectindex.value=5;
|
||
|
||
}
|
||
|
||
// 查看网络状态
|
||
uni.getNetworkType({
|
||
success: function(res) {
|
||
console.log(res.networkType);
|
||
},
|
||
fail(e) {
|
||
console.log(e, 8888);
|
||
}
|
||
});
|
||
// 监听网络状态
|
||
uni.onNetworkStatusChange(function(res) {
|
||
console.log(res.isConnected);
|
||
console.log(res.networkType);
|
||
});
|
||
// 切换页面显示
|
||
function settab(index, data = {}) {
|
||
if (index === selectindex.value) {
|
||
return
|
||
}
|
||
selectindex.value = index;
|
||
state.value = state.value.map((r, subindex) => {
|
||
if (r == 1) {
|
||
r = 2;
|
||
// 掉用页面隐藏
|
||
switchfn(subindex, 'hide')
|
||
}
|
||
if (r == 0 && subindex == index) {
|
||
r = 1;
|
||
// 掉用页面load；
|
||
switchfn(subindex, 'load')
|
||
switchfn(subindex, 'show', data)
|
||
|
||
}
|
||
if (r == 2 && subindex == index) {
|
||
r = 1;
|
||
// 掉用页面show；
|
||
switchfn(subindex, 'show', data)
|
||
}
|
||
return r;
|
||
})
|
||
|
||
}
|
||
|
||
function switchfn(index, fn, data = {}) {
|
||
switch (index) {
|
||
case 0:
|
||
refwarningInformation.value[fn](data)
|
||
break;
|
||
case 1:
|
||
refpassingTheCar.value[fn](data)
|
||
break;
|
||
case 2:
|
||
|
||
refhistory.value[fn](data)
|
||
break;
|
||
case 3:
|
||
refstatistics.value[fn](data)
|
||
break;
|
||
case 4:
|
||
refsetUp.value[fn](data)
|
||
break;
|
||
case 5:
|
||
refcamera.value[fn](data)
|
||
break;
|
||
}
|
||
}
|
||
|
||
function logOut() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认退出登录？',
|
||
success: function(res) {
|
||
showsignOut.value = false;
|
||
if (res.confirm) {
|
||
outsignOut()
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.popUpNotificationout {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0px;
|
||
left: 0px;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
z-index: 999999;
|
||
|
||
.box {
|
||
position: absolute;
|
||
width: 300rpx;
|
||
background: #fff;
|
||
border-radius: 5rpx;
|
||
text-align: center;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 25rpx;
|
||
font-size: 11rpx;
|
||
|
||
.desc {
|
||
margin: 15rpx 0;
|
||
}
|
||
|
||
.yes {
|
||
background: #4B5EFF;
|
||
color: #fff;
|
||
line-height: 35rpx;
|
||
border-radius: 50rpx;
|
||
width: 150rpx;
|
||
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.subpage {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
.page {
|
||
width: 100vw;
|
||
|
||
.left {
|
||
width: 150rpx;
|
||
background: #222653;
|
||
position: fixed;
|
||
left: 0px;
|
||
top: 0px;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 15rpx;
|
||
z-index: 9999;
|
||
|
||
.tabnav {
|
||
margin-top: 24rpx;
|
||
|
||
.li {
|
||
margin-bottom: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.text {
|
||
color: #B9BAC9;
|
||
|
||
}
|
||
&.on {
|
||
.l {
|
||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||
|
||
}
|
||
|
||
.text {
|
||
color: #fff;
|
||
font-size: 11rpx;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
|
||
font-size: 11rpx;
|
||
}
|
||
|
||
.l {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
width: 27rpx;
|
||
height: 27rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 15rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 13rpx;
|
||
height: 13rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.logo {
|
||
image {
|
||
width: 25rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
position: relative;
|
||
display: flex;
|
||
align-items: camera;
|
||
color: #fff;
|
||
font-size: 16rpx;
|
||
|
||
.signOut {
|
||
position: absolute;
|
||
left: 100%;
|
||
top: 50%;
|
||
transform: translate(0, -50%);
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
border-radius: 3rpx;
|
||
font-size: 11rpx;
|
||
flex-wrap: nowrap;
|
||
width: 100rpx;
|
||
color: #fff;
|
||
padding: 3rpx 10rpx;
|
||
justify-content: center;
|
||
|
||
.icon {
|
||
transform: rotate(-90deg);
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
&::after {
|
||
content: "";
|
||
width: 0rpx;
|
||
height: 0rpx;
|
||
|
||
position: absolute;
|
||
left: -6rpx;
|
||
border-left: 0rpx solid transparent;
|
||
border-right: 7rpx solid rgba(0, 0, 0, 0.4);
|
||
border-top: 7rpx solid transparent;
|
||
border-bottom: 7rpx solid transparent;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
.title {
|
||
color: #fff;
|
||
font-size: 12rpx;
|
||
}
|
||
|
||
.item {
|
||
margin-top: 8rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 8rpx;
|
||
padding: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.15);
|
||
|
||
.l {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.name {
|
||
color: rgba(255, 255, 255, 0.4);
|
||
font-size: 11rpx;
|
||
margin: 0rpx 8rpx;
|
||
}
|
||
|
||
image {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
}
|
||
}
|
||
|
||
.r {
|
||
border: 1rpx solid rgba(255, 255, 255, 0.34);
|
||
border-radius: 50rpx;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
}
|
||
|
||
&.on {
|
||
border: 1rpx solid #4D7BFF;
|
||
|
||
.name {
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
.r {
|
||
background: #37FFAC;
|
||
}
|
||
}
|
||
|
||
&.on1 {
|
||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.right {
|
||
width: 600rpx;
|
||
margin-left: 150rpx;
|
||
background: #E7E7ED;
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
}
|
||
}
|
||
</style> |