315 lines
6.4 KiB
Vue
315 lines
6.4 KiB
Vue
<template>
|
|
<view class="subpage">
|
|
<view class="top">
|
|
<view class="left">
|
|
<view v-for="item in devices" :class="{on:deviceId==item.encoding}" @click="setdeviceid(item.encoding)">
|
|
设备{{item.encoding}}</view>
|
|
</view>
|
|
<view class="r">
|
|
{{timeFormat(getdata,"yyyy年mm月dd日hh时MM分ss秒")}}
|
|
<view v-if="type==2">区间测速实时监测中</view>
|
|
<view v-if="type==1" class="no">测速未启动</view>
|
|
</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="item">
|
|
<view class="num">{{infodata.todayCount || 0}}</view>
|
|
<view class="title">当天过车数量</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="num" v-if="list.length">{{showday}}</view>
|
|
<view class="num" v-if="!list.length">-</view>
|
|
<view class="title">距离最后一次监测，已过去：</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view :scroll-y="true" @scrolltolower='bottomingOut'>
|
|
<view class="li" v-for="item in list">
|
|
<view class="l">
|
|
车牌号码
|
|
<view class="color1" :class="`numcolor${item.vehicleNumberColor}`">
|
|
{{item.vehicleNumber}}
|
|
</view>
|
|
</view>
|
|
<view class="r">{{item.queryTime}}</view>
|
|
</view>
|
|
<view style="height: 10rpx;"></view>
|
|
<nynull txt='暂无过车数据' v-if="!list.length"></nynull>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
import {
|
|
getequipment,
|
|
getpassingTheCar
|
|
} from "/appapi/index.js"
|
|
|
|
const deviceId = ref("")
|
|
const devices = ref([]);
|
|
const infodata = ref({})
|
|
const list = ref([])
|
|
import {
|
|
timeFormat
|
|
} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
|
|
// 分页相关
|
|
const pageSize = ref(40);
|
|
const pageNum = ref(1);
|
|
const hasNextPage = ref(true)
|
|
const getdata = ref(new Date().getTime())
|
|
const type=ref(1); //设备状态
|
|
|
|
function load() {
|
|
console.log('过车信息load')
|
|
}
|
|
|
|
function hide() {
|
|
clearInterval(_getequipment)
|
|
}
|
|
let _getequipment;
|
|
|
|
function show() {
|
|
|
|
|
|
getequipmentinfo()
|
|
|
|
// 定时刷新设备状态
|
|
clearInterval(_getequipment)
|
|
function getinfo(){
|
|
getequipment().then(r => {
|
|
try{
|
|
if(r.data.allDevices[0].status==2 && r.data.allDevices[1].status==2){
|
|
type.value=2;
|
|
}else{
|
|
type.value=1;
|
|
}
|
|
} catch{
|
|
type.value=1;
|
|
}
|
|
})
|
|
}
|
|
getinfo()
|
|
_getequipment = setInterval(() => {
|
|
getinfo()
|
|
}, 10000)
|
|
|
|
console.log('过车信息show')
|
|
}
|
|
// 设置设备ID
|
|
function setdeviceid(id) {
|
|
deviceId.value = id;
|
|
reset()
|
|
getinfo()
|
|
}
|
|
// 获取设备信息
|
|
function getequipmentinfo() {
|
|
reset()
|
|
getequipment().then(r => {
|
|
devices.value = r.data.allDevices;
|
|
deviceId.value = devices.value[0].encoding
|
|
getinfo()
|
|
})
|
|
}
|
|
// 获取过车信息
|
|
const daytiem = ref(new Date().getTime());
|
|
const showday = ref("")
|
|
let _eliminate;
|
|
|
|
function getinfo() {
|
|
clearInterval(_eliminate)
|
|
getpassingTheCar({
|
|
deviceId: deviceId.value,
|
|
pageNum: pageNum.value,
|
|
pageSize: pageSize.value
|
|
}).then(r => {
|
|
infodata.value = r.data;
|
|
daytiem.value = r.data.vehicleList[0] ? new Date(r.data.vehicleList[0].queryTime).getTime() :
|
|
new Date().getTime();
|
|
list.value = list.value.concat(r.data.vehicleList)
|
|
hasNextPage.value = r.data.hasNextPage;
|
|
settiem()
|
|
})
|
|
}
|
|
// 触底
|
|
function bottomingOut() {
|
|
// if(hasNextPage.value){
|
|
// pageNum.value=pageNum.value+1;
|
|
// getinfo()
|
|
// }
|
|
}
|
|
|
|
// 监听推送数据
|
|
uni.onSkt("SERCHNEWDATA", (res) => {
|
|
if (res.deviceId == deviceId.value) {
|
|
list.value = [...res.viewList, ...list.value]
|
|
infodata.value.todayCount = infodata.value.todayCount + res.viewList.length;
|
|
daytiem.value = new Date().getTime();
|
|
clearInterval(_eliminate)
|
|
settiem()
|
|
}
|
|
|
|
// 预警列表接收推送数据
|
|
})
|
|
|
|
function timeAgo() {
|
|
const now = new Date();
|
|
const past = new Date(daytiem.value);
|
|
const seconds = Math.floor((now - past) / 1000);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const hours = Math.floor(minutes / 60);
|
|
const days = Math.floor(hours / 24);
|
|
const years = Math.floor(days / 365);
|
|
if (years > 0) return `${years}年前`;
|
|
if (days > 0) return `${days}天前`;
|
|
if (hours > 0) return `${hours}小时前`;
|
|
if (minutes > 0) return `${minutes}分钟前`;
|
|
return `${seconds>=0?seconds:0}秒前`;
|
|
}
|
|
|
|
function settiem() {
|
|
_eliminate = setInterval(() => {
|
|
getdata.value = new Date().getTime()
|
|
showday.value = timeAgo()
|
|
}, 500)
|
|
}
|
|
|
|
|
|
// 重置
|
|
function reset() {
|
|
hasNextPage.value = true;
|
|
pageNum.value = 1;
|
|
list.value = [];
|
|
}
|
|
defineExpose({
|
|
load,
|
|
hide,
|
|
show
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.subpage {
|
|
padding: 15rpx;
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
border-radius: 3rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
|
|
view {
|
|
width: 90rpx;
|
|
text-align: center;
|
|
line-height: 33rpx;
|
|
color: #4D7BFF;
|
|
font-size: 11rpx;
|
|
|
|
&.on {
|
|
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
|
color: #fff;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.r {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-size: 11rpx;
|
|
|
|
view {
|
|
font-size: 11rpx;
|
|
color: #06765A;
|
|
background: linear-gradient(173deg, #FFFFFF 0%, #C6FDDE 100%);
|
|
border-radius: 50rpx;
|
|
padding: 3rpx 10rpx;
|
|
margin-left: 15rpx;
|
|
&.no{
|
|
background: linear-gradient( 168deg, #FFFDFD 0%, #FFD9D2 100%);
|
|
color: #EA1313;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
gap: 15rpx;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
border-radius: 3rpx;
|
|
text-align: center;
|
|
margin: 15rpx 0;
|
|
flex: 1;
|
|
padding: 18rpx 0;
|
|
|
|
.num {
|
|
font-size: 22rpx;
|
|
color: #4D7BFF;
|
|
|
|
}
|
|
|
|
.title {
|
|
margin-top: 5rpx;
|
|
font-size: 11rpx;
|
|
}
|
|
|
|
&:nth-of-type(1) {
|
|
background: linear-gradient(177deg, #D6E4FA 0%, #FFFFFF 100%);
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
background: linear-gradient(178deg, #D6FAE4 0%, #FFFFFF 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
scroll-view {
|
|
box-sizing: border-box;
|
|
height: calc(100vh - 160rpx);
|
|
|
|
.li {
|
|
display: flex;
|
|
padding: 14rpx 15rpx;
|
|
background: #fff;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 3rpx;
|
|
margin-bottom: 9rpx;
|
|
|
|
.l {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #000;
|
|
font-size: 11rpx;
|
|
|
|
view {
|
|
|
|
text-align: center;
|
|
padding: 3rpx 10rpx;
|
|
border-radius: 3rpx;
|
|
margin-left: 15rpx;
|
|
|
|
|
|
font-size: 11rpx;
|
|
}
|
|
}
|
|
|
|
.r {
|
|
font-size: 11rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |