312 lines
6.2 KiB
Vue
312 lines
6.2 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="left">
|
||
<view class="top">
|
||
<view class="logo">
|
||
<image src="/static/logo.png"></image>
|
||
区间测速
|
||
</view>
|
||
<view class="tabnav">
|
||
<view class="li" :class="{on:selectindex==0}" @click="settab(0)">
|
||
<view class="l">
|
||
<image src="/static/tab/1.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/2.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/3.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/4.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/5.png"></image>
|
||
</view>
|
||
<view class="text">预警设置</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="title">设备：</view>
|
||
<view class="item on" :class="{on1:selectindex==5}" @click="settab(5)">
|
||
<view class="l">
|
||
<image src="/static/equipmenton.png"></image>
|
||
<view class="name">设备001</view>
|
||
</view>
|
||
<view class="r"></view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="l">
|
||
<image src="/static/equipmentno.png"></image>
|
||
<view class="name">设备001</view>
|
||
</view>
|
||
<view class="r"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<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 class="subpage" v-show="state[5]==1">
|
||
<qjcamera ref="refcamera" />
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import setmapidimg from "/utils/base64ToFile.js"
|
||
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 qjcamera from "./pages/camera.vue"
|
||
|
||
import {
|
||
nextTick,
|
||
ref,
|
||
watch
|
||
} from "vue"
|
||
const refhistory = ref()
|
||
const refsetUp = ref()
|
||
const refcamera = ref()
|
||
const refstatistics = ref()
|
||
const refpassingTheCar = ref()
|
||
const refwarningInformation = ref()
|
||
const selectindex = ref("")
|
||
// 子页面状态管理
|
||
const state = ref([0, 0, 0, 0, 0, 0]) //0表示页面为加载 1 表示页面已加载并显示 2页面隐藏
|
||
nextTick(() => {
|
||
settab(0)
|
||
|
||
})
|
||
|
||
|
||
function settab(index) {
|
||
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')
|
||
|
||
}
|
||
if (r == 2 && subindex == index) {
|
||
r = 1;
|
||
// 掉用页面show；
|
||
switchfn(subindex, 'show')
|
||
}
|
||
return r;
|
||
})
|
||
|
||
}
|
||
|
||
function switchfn(index, fn) {
|
||
switch (index) {
|
||
case 0:
|
||
refwarningInformation.value[fn]()
|
||
break;
|
||
case 1:
|
||
refpassingTheCar.value[fn]()
|
||
break;
|
||
case 2:
|
||
|
||
refhistory.value[fn]()
|
||
break;
|
||
case 3:
|
||
refstatistics.value[fn]()
|
||
break;
|
||
case 4:
|
||
refsetUp.value[fn]()
|
||
break;
|
||
case 5:
|
||
refcamera.value[fn]()
|
||
break;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.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;
|
||
|
||
.tabnav {
|
||
margin-top: 35rpx;
|
||
|
||
.li {
|
||
margin-bottom: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&.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;
|
||
}
|
||
|
||
display: flex;
|
||
align-items: camera;
|
||
color: #fff;
|
||
font-size: 16rpx;
|
||
}
|
||
|
||
.bottom {
|
||
.title {
|
||
color: #fff;
|
||
}
|
||
|
||
.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: 9rpx;
|
||
margin: 0rpx 4rpx;
|
||
}
|
||
|
||
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;
|
||
}
|
||
}
|
||
</style> |