This commit is contained in:
parent
f6c8141d88
commit
0c5d6bb6bc
62
App.vue
62
App.vue
|
|
@ -1,15 +1,36 @@
|
|||
<script>
|
||||
import soket from "/utils/soket.js"
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
setTimeout(()=>{
|
||||
plus.navigator.setFullscreen(true)
|
||||
},500)
|
||||
// #endif
|
||||
|
||||
|
||||
|
||||
// 生成设备唯一码
|
||||
let _Android =uni.getStorageSync('cid') || new Date().getTime()
|
||||
// #ifdef APP
|
||||
// 获取设备码
|
||||
function getAndroidId() {
|
||||
plus.android.importClass("android.provider.Settings");
|
||||
const context = plus.android.runtimeMainActivity().getApplicationContext();
|
||||
const androidId = plus.android.invoke("android.provider.Settings$Secure", "getString",
|
||||
context.getContentResolver(), "android_id");
|
||||
return androidId;
|
||||
}
|
||||
_Android = getAndroidId() || plus.device.getOAID() || uni.getSystemInfoSync().deviceId;
|
||||
// #endif
|
||||
uni.setStorageSync('cid', _Android)
|
||||
if (uni.getStorageSync('token')) {
|
||||
soket()
|
||||
uni.reLaunch({
|
||||
url: "/pages/index"
|
||||
})
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: "/pages/signIn"
|
||||
})
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
setTimeout(() => {
|
||||
plus.navigator.setFullscreen(true)
|
||||
}, 500)
|
||||
// #endif
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
|
|
@ -21,14 +42,31 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
view{
|
||||
|
||||
view {
|
||||
|
||||
box-sizing: border-box;
|
||||
color: #667085;
|
||||
font-size: 14rpx;
|
||||
}
|
||||
|
||||
.numcolor1{
|
||||
background: #3336E0;
|
||||
color: #fff;
|
||||
}
|
||||
.numcolor2{
|
||||
background: #07C688;
|
||||
color: #fff;
|
||||
}
|
||||
.numcolor3{
|
||||
background: #FF9521;
|
||||
color: #fff;
|
||||
}
|
||||
.numcolor4{
|
||||
background: #333333;
|
||||
color: #fff;
|
||||
}
|
||||
/* :root{
|
||||
|
||||
font-size: calc(100vw / 960px * 32px) !important;
|
||||
} */
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<view>日</view>
|
||||
</view>
|
||||
<view class="form">
|
||||
<view v-for="item in daydata.monthGroups[dayindex].days" @click.stop="settime(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`)" :class="{del:!daydata.day.includes(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`),on:chooseday==`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`}">{{item}}</view>
|
||||
<view v-for="item in daydata.monthGroups[dayindex].days" @click.stop="settime(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`,!daydata.day.includes(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`))" :class="{del:!daydata.day.includes(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`),on:chooseday==`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`}">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -84,11 +84,14 @@
|
|||
Props.modelValue=false;
|
||||
adssEmits("update:modelValue",false)
|
||||
}
|
||||
function settime(time){
|
||||
chooseday.value=time;
|
||||
adssEmits("change",time)
|
||||
Props.modelValue=false;
|
||||
adssEmits("update:modelValue",false)
|
||||
function settime(time,type){
|
||||
if(!type){
|
||||
chooseday.value=time;
|
||||
adssEmits("change",time)
|
||||
Props.modelValue=false;
|
||||
adssEmits("update:modelValue",false)
|
||||
}
|
||||
|
||||
}
|
||||
function reset(){
|
||||
// chooseday.value=daydata.value.day[0];
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@
|
|||
left: 100%;
|
||||
background: #E7E7ED;
|
||||
transition:0.3s;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 1rpx;
|
||||
&.showon{
|
||||
left: 0%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div>设备001</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
background: #4D7BFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
<img src="/map.png"/>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
<img src="/map.png" crossorigin="anonymous" />
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
<img src="/map.png" crossorigin="anonymous" />
|
||||
</div>
|
||||
<img src="" id="img" />
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
document.getElementById('img').src=dataUrl
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
<img src="./map.png" crossorigin="anonymous" />
|
||||
</div>
|
||||
<img src="" id="img" />
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
document.getElementById('img').src=dataUrl
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
|
|
@ -71,6 +71,54 @@
|
|||
}
|
||||
},
|
||||
"statics" : {}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"nativePlugins" : {
|
||||
"hk-preview" : {
|
||||
"__plugin_info__" : {
|
||||
"name" : "海康视频实时预览插件",
|
||||
"description" : "海康摄像头录像机直连插件，实现设备视频预览和云台控制",
|
||||
"platforms" : "Android",
|
||||
"url" : "https://ext.dcloud.net.cn/plugin?id=1981",
|
||||
"android_package_name" : "blyc.qjcs.com",
|
||||
"ios_bundle_id" : "",
|
||||
"isCloud" : true,
|
||||
"bought" : 1,
|
||||
"pid" : "1981",
|
||||
"parameters" : {}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -98,6 +146,16 @@
|
|||
},
|
||||
"vueVersion" : "3",
|
||||
"h5" : {
|
||||
"devServer" : {
|
||||
//配置跨域
|
||||
"proxy" : {
|
||||
"/api" : {
|
||||
"target" : "http://192.168.1.7:8566",
|
||||
"changeOrigin" : true,
|
||||
"secure" : false
|
||||
}
|
||||
}
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"maps" : {}
|
||||
}
|
||||
|
|
|
|||
22
pages/go.vue
22
pages/go.vue
|
|
@ -1,9 +1,14 @@
|
|||
<template>
|
||||
<navigator url="/pages/index">进入</navigator>
|
||||
<view class="page">
|
||||
<image src="/static/signIn/go.jpg" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onShow,onLoad} from "@dcloudio/uni-app"
|
||||
// const hk = uni.requireNativePlugin('hk-preview');
|
||||
onShow(()=>{
|
||||
// setTimeout(()=>{
|
||||
// uni.reLaunch({
|
||||
|
|
@ -15,5 +20,18 @@
|
|||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped lang="scss">
|
||||
image{
|
||||
position: absolute;
|
||||
width: 700rpx;
|
||||
}
|
||||
.page{
|
||||
background: #f1f5fe;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
204
pages/index.vue
204
pages/index.vue
|
|
@ -1,10 +1,14 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<view class="page" @click.stop="showsignOut=false">
|
||||
<view class="left">
|
||||
<view class="top">
|
||||
<view class="logo">
|
||||
<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)">
|
||||
|
|
@ -42,17 +46,19 @@
|
|||
</view>
|
||||
<view class="bottom">
|
||||
<view class="title">设备：</view>
|
||||
<view class="item on" :class="{on1:selectindex==5}" @click="settab(5)">
|
||||
<!-- <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> -->
|
||||
<view class="item" v-for="item in allDevices"
|
||||
:class="{on1:(selectindex==5 && Devicesid==item.id),on:item.status==2}"
|
||||
@click="setshowDevices(item)">
|
||||
<view class="l">
|
||||
<image src="/static/equipmentno.png"></image>
|
||||
<view class="name">设备001</view>
|
||||
<view class="name">设备{{item.encoding}}</view>
|
||||
</view>
|
||||
<view class="r"></view>
|
||||
</view>
|
||||
|
|
@ -81,22 +87,34 @@
|
|||
|
||||
</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 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"
|
||||
|
||||
import {
|
||||
getequipment
|
||||
} from "/appapi/index.js"
|
||||
|
||||
import {
|
||||
onShow
|
||||
} from "@dcloudio/uni-app"
|
||||
const refhistory = ref()
|
||||
const refsetUp = ref()
|
||||
const refcamera = ref()
|
||||
|
|
@ -104,20 +122,67 @@
|
|||
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)
|
||||
|
||||
})
|
||||
|
||||
|
||||
function settab(index) {
|
||||
uni.$on('LOGOUT', () => {
|
||||
showout.value = true;
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
// 获取设备信息
|
||||
getequipment().then(r => {
|
||||
allDevices.value =r.data?r.data.allDevices:[]
|
||||
})
|
||||
})
|
||||
|
||||
// 退出登录
|
||||
function outsignOut() {
|
||||
showout.value = false;
|
||||
// 清除token
|
||||
uni.removeStorageSync("token");
|
||||
// 断WebSocket
|
||||
uni.$emit('Socketclose')
|
||||
// 跳转登录页
|
||||
uni.reLaunch({
|
||||
url: "/pages/signIn"
|
||||
})
|
||||
|
||||
}
|
||||
// 打开设备页面
|
||||
function setshowDevices(item) {
|
||||
if (item.status == 2) {
|
||||
Devicesid.value = item.id;
|
||||
settab(5, {
|
||||
id: Devicesid.value
|
||||
})
|
||||
}
|
||||
}
|
||||
// 查看网络状态
|
||||
uni.getNetworkType({
|
||||
success: function(res) {
|
||||
console.log(res.networkType);
|
||||
}
|
||||
});
|
||||
// 监听网络状态
|
||||
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;
|
||||
|
|
@ -128,45 +193,95 @@
|
|||
r = 1;
|
||||
// 掉用页面load；
|
||||
switchfn(subindex, 'load')
|
||||
switchfn(subindex, 'show')
|
||||
switchfn(subindex, 'show', data)
|
||||
|
||||
}
|
||||
if (r == 2 && subindex == index) {
|
||||
r = 1;
|
||||
// 掉用页面show；
|
||||
switchfn(subindex, 'show')
|
||||
switchfn(subindex, 'show', data)
|
||||
}
|
||||
return r;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function switchfn(index, fn) {
|
||||
function switchfn(index, fn, data = {}) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
refwarningInformation.value[fn]()
|
||||
refwarningInformation.value[fn](data)
|
||||
break;
|
||||
case 1:
|
||||
refpassingTheCar.value[fn]()
|
||||
refpassingTheCar.value[fn](data)
|
||||
break;
|
||||
case 2:
|
||||
|
||||
refhistory.value[fn]()
|
||||
refhistory.value[fn](data)
|
||||
break;
|
||||
case 3:
|
||||
refstatistics.value[fn]()
|
||||
refstatistics.value[fn](data)
|
||||
break;
|
||||
case 4:
|
||||
refsetUp.value[fn]()
|
||||
refsetUp.value[fn](data)
|
||||
break;
|
||||
case 5:
|
||||
refcamera.value[fn]()
|
||||
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;
|
||||
|
|
@ -187,6 +302,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 15rpx;
|
||||
z-index: 9999;
|
||||
|
||||
.tabnav {
|
||||
margin-top: 35rpx;
|
||||
|
|
@ -207,7 +323,7 @@
|
|||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
|
||||
font-size: 11rpx;
|
||||
|
|
@ -239,10 +355,47 @@
|
|||
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 {
|
||||
|
|
@ -295,8 +448,9 @@
|
|||
background: #37FFAC;
|
||||
}
|
||||
}
|
||||
&.on1{
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
|
||||
&.on1 {
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,30 +2,34 @@
|
|||
<view class="camerapage">
|
||||
<view class="title">摄像头设置</view>
|
||||
<view class="box">
|
||||
<video class="video"></video>
|
||||
<video class="video" object-fit='contain' src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
|
||||
<!-- <sjy-vidbr :option="hp1option" bColor="#ffffff"></sjy-vidbr> -->
|
||||
|
||||
<view class="workbench">
|
||||
<view class="direction">
|
||||
<view class="item" v-for="(item,index) in 4" :class="{on:keyindex==index+1}" @touchstart="press(index+1)" @touchend="release()">
|
||||
<view class="item" v-for="(item,index) in 4" :class="{on:keyindex==index+1}"
|
||||
@touchstart="press(index+1)" @touchend="release()">
|
||||
<view class="icon">
|
||||
<uv-icon name="arrow-up-fill" :color="keyindex==index+1?'#fff':'#4D7BFF'" size="20rpx"></uv-icon>
|
||||
<uv-icon name="arrow-up-fill" :color="keyindex==index+1?'#fff':'#4D7BFF'"
|
||||
size="20rpx"></uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="key">
|
||||
<view class="item" :class="{on:keyindex==5}" @touchstart="press(5)" @touchend="release()">
|
||||
<image :src="`/static/camera/${keyindex==5?11:1}.png`"></image>
|
||||
调焦 -
|
||||
</view>
|
||||
<view class="item" :class="{on:keyindex==6}" @touchstart="press(6)" @touchend="release()">
|
||||
<view class="item" :class="{on:keyindex==6}" @touchstart="press(6)" @touchend="release()">
|
||||
<image :src="`/static/camera/${keyindex==6?22:2}.png`"></image>
|
||||
调焦 +
|
||||
</view>
|
||||
<view class="item" :class="{on:keyindex==7}" @touchstart="press(7)" @touchend="release()">
|
||||
<view class="item" :class="{on:keyindex==7}" @touchstart="press(7)" @touchend="release()">
|
||||
<image :src="`/static/camera/${keyindex==7?33:3}.png`"></image>
|
||||
聚焦 -
|
||||
</view>
|
||||
<view class="item" :class="{on:keyindex==8}" @touchstart="press(8)" @touchend="release()">
|
||||
<view class="item" :class="{on:keyindex==8}" @touchstart="press(8)" @touchend="release()">
|
||||
<image :src="`/static/camera/${keyindex==8?44:4}.png`"></image>
|
||||
聚焦 +
|
||||
</view>
|
||||
|
|
@ -38,9 +42,16 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
|
||||
const keyindex = ref("")
|
||||
const hp1option = ref({
|
||||
width: 426 * 1.5,
|
||||
height: 240 * 1.5,
|
||||
})
|
||||
|
||||
const keyindex=ref("")
|
||||
function load() {
|
||||
console.log('预警信息load')
|
||||
}
|
||||
|
|
@ -52,12 +63,13 @@ import { ref } from 'vue'
|
|||
function show() {
|
||||
console.log('预警信息show')
|
||||
}
|
||||
|
||||
function press(index){
|
||||
keyindex.value=index;
|
||||
|
||||
function press(index) {
|
||||
keyindex.value = index;
|
||||
}
|
||||
function release(){
|
||||
keyindex.value="";
|
||||
|
||||
function release() {
|
||||
keyindex.value = "";
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
|
@ -84,46 +96,50 @@ import { ref } from 'vue'
|
|||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.key{
|
||||
|
||||
|
||||
|
||||
.key {
|
||||
|
||||
display: flex;
|
||||
gap:20rpx 15rpx;
|
||||
gap: 20rpx 15rpx;
|
||||
width: 265rpx;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
|
||||
|
||||
background: linear-gradient( 180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
|
||||
box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0,0,0,0.21), inset 0rpx 1rpx 1rpx 0rpx #FFFFFF;
|
||||
|
||||
.item {
|
||||
|
||||
|
||||
background: linear-gradient(180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
|
||||
box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0, 0, 0, 0.21), inset 0rpx 1rpx 1rpx 0rpx #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 125rpx;
|
||||
padding:10rpx 15rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
justify-content: center;
|
||||
border-radius: 100rpx;
|
||||
font-weight: 500;
|
||||
font-size: 11rpx;
|
||||
color: #223457;
|
||||
&.on{
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0,0,0,0.33);
|
||||
|
||||
&.on {
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.33);
|
||||
color: #fff;
|
||||
}
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
margin-right: 15rpx;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direction {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
|
||||
|
||||
|
||||
|
||||
background: linear-gradient(180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
|
||||
border: 1rpx solid #d2d2d2;
|
||||
border-radius: 139rpx;
|
||||
|
|
@ -131,38 +147,42 @@ import { ref } from 'vue'
|
|||
overflow: hidden;
|
||||
transform: rotate(45deg);
|
||||
position: relative;
|
||||
&::after{
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 54rpx;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0,0,0,0.21), inset 0rpx 1rpx 15rpx 0rpx rgba(0,0,0,0.21);
|
||||
box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0, 0, 0, 0.21), inset 0rpx 1rpx 15rpx 0rpx rgba(0, 0, 0, 0.21);
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
|
||||
position: absolute;
|
||||
transform-origin: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.on{
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0,0,0,0.33);
|
||||
|
||||
&.on {
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.33);
|
||||
}
|
||||
.icon{
|
||||
|
||||
.icon {
|
||||
transform: rotate(-45deg);
|
||||
// margin-left: 10rpx;
|
||||
// margin-top: 10rpx;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
@ -185,10 +205,15 @@ import { ref } from 'vue'
|
|||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 15rpx;
|
||||
position: relative;
|
||||
|
||||
._video_r1 {}
|
||||
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="detailstop">
|
||||
<view class="detailstop" @click="tips=false">
|
||||
<view class="back" @click="back()">
|
||||
<image src="/static/back.png"></image>
|
||||
返回
|
||||
|
|
@ -7,10 +7,28 @@
|
|||
<view class="title">
|
||||
超速车辆详情
|
||||
</view>
|
||||
<view class="fn" @click="showupimg=true">暂扣</view>
|
||||
<view class="rbox">
|
||||
<block v-if="type==1">
|
||||
<view class="fn" v-if="!yesok" @click="showupimg=true">暂扣</view>
|
||||
<view class="fn red " :class="{aft:tips}" v-if="yesok" @click="showupimg=true">
|
||||
确认暂扣
|
||||
<view class="tc" v-if="tips">
|
||||
是否确定暂时扣行该车辆，请点击此按钮。
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="type==2">
|
||||
<view class="fn fx" v-if="!yesok" @click="showupimg=true">放行</view>
|
||||
<view class="fn yfx" :class="{aft:tips}" v-if="yesok" @click="showupimg=true">
|
||||
确认放行
|
||||
<view class="tc" v-if="tips">
|
||||
是否确定放行该车辆，请点击此按钮。
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detailspage">
|
||||
|
||||
<view class="detailspage" @click="tips=false">
|
||||
<view class="time">
|
||||
<view class="l">超速信息</view>
|
||||
<view class="r">放行时间：2025-08-13 18:0</view>
|
||||
|
|
@ -130,121 +148,177 @@
|
|||
</view>
|
||||
<view class="ul">
|
||||
<view class="title">暂扣照片</view>
|
||||
<view class="txt img" >
|
||||
<view class="txt img">
|
||||
<image src="/static/tjbj.png"></image>
|
||||
</view>
|
||||
<view class="title">放行照片</view>
|
||||
<view class="txt img">
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 20rpx;"></view>
|
||||
<view class="okfication" v-if="showupimg" @click.stop="showupimg=false">
|
||||
<view class="box" @click.stop="showupimg=true">
|
||||
<view class="close" @click.stop="showupimg=false"> <uni-icons type="closeempty" color="#585757" size="20rpx"></uni-icons>
|
||||
<view class="box" @click.stop="showupimg=true">
|
||||
<view class="close" @click.stop="showupimg=false"> <uni-icons type="closeempty" color="#585757"
|
||||
size="20rpx"></uni-icons>
|
||||
</view>
|
||||
<view class="title">
|
||||
<image src="/static/f.png" mode=""></image>
|
||||
<view class="txt">
|
||||
<view class="typename">车辆放行</view>
|
||||
<view class="time">放行时间：2025-08-13 15:0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upimg" @click="getimg">
|
||||
<view class="icon">
|
||||
<uni-icons color="#4D7BFF" type="plusempty" size="30rpx"></uni-icons>
|
||||
<view class="h3">上传照片</view>
|
||||
<view class="desc">请上传车辆的行驶证或现场车辆照片</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fn">
|
||||
<view @click.stop="showupimg=false">取消</view>
|
||||
<view>确定</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<image src="/static/f.png" v-if="type==2" mode=""></image>
|
||||
<image src="/static/k.png" v-if="type==1" mode=""></image>
|
||||
<view class="txt">
|
||||
<view class="typename">{{type==1?"车辆暂扣":'车辆放行'}}</view>
|
||||
<view class="time" v-if="type==2">放行时间：2025-08-13 15:0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upimg" @click="upimg">
|
||||
<image :src="imgs" v-if="imgs"></image>
|
||||
<view class="icon" v-else>
|
||||
<uni-icons color="#4D7BFF" type="plusempty" size="30rpx"></uni-icons>
|
||||
<view class="h3">上传照片</view>
|
||||
<view class="desc">请上传车辆的行驶证或现场车辆照片</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fn">
|
||||
<view @click.stop="showupimg=false">取消</view>
|
||||
<view @click.stop="yesupimg">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import evn from "/evn.js";
|
||||
import {
|
||||
ref
|
||||
} from "vue";
|
||||
const showupimg=ref(false)
|
||||
|
||||
const type = ref("");
|
||||
const showupimg = ref(false)
|
||||
const yesok = ref(false);
|
||||
const tips = ref(false)
|
||||
const Emits = defineEmits(["opneinfo"])
|
||||
const imgs = ref("")
|
||||
|
||||
function load() {
|
||||
console.log('预警信息load')
|
||||
}
|
||||
|
||||
function hide() {
|
||||
|
||||
showupimg.value=false;
|
||||
reset()
|
||||
}
|
||||
|
||||
function show() {
|
||||
console.log('预警信息show')
|
||||
function reset() {
|
||||
type.value = "";
|
||||
showupimg.value = false;
|
||||
yesok.value = false;
|
||||
tips.value = false;
|
||||
}
|
||||
|
||||
function show(id, indextype) {
|
||||
reset()
|
||||
type.value = indextype;
|
||||
|
||||
}
|
||||
|
||||
function yesupimg() {
|
||||
if(!imgs.value){
|
||||
uni.showToast({
|
||||
title:"请上传图片",
|
||||
icon:"none"
|
||||
})
|
||||
return
|
||||
}
|
||||
Emits("opneinfo")
|
||||
showupimg.value = false;
|
||||
yesok.value = true;
|
||||
tips.value = true;
|
||||
}
|
||||
|
||||
function back() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
function getimg(){
|
||||
|
||||
function upimg() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: function (res) {
|
||||
console.log(JSON.stringify(res.tempFilePaths));
|
||||
count: 1,
|
||||
success: function(res) {
|
||||
uni.uploadFile({
|
||||
url: evn.SERVERUL + '/file/upload', //仅为示例，非真实的接口地址
|
||||
filePath: res.tempFilePaths[0],
|
||||
name: 'file',
|
||||
success: (uploadFileRes) => {
|
||||
imgs.value=JSON.parse(uploadFileRes.data).url
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function opneshowupimg(id, indextype) {
|
||||
reset()
|
||||
type.value = indextype
|
||||
showupimg.value = true;
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
show
|
||||
show,
|
||||
opneshowupimg
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.okfication{
|
||||
<style scoped lang="scss">
|
||||
.okfication {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
.box{
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width:340rpx;
|
||||
width: 340rpx;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
padding: 15rpx 30rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
.close{
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
right: 15rpx;
|
||||
}
|
||||
.title{
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.typename{
|
||||
|
||||
.typename {
|
||||
font-weight: 800;
|
||||
font-size: 13rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.time{
|
||||
|
||||
.time {
|
||||
font-size: 11rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
.upimg{
|
||||
border: 1px dashed #4D7BFF;
|
||||
|
||||
.upimg {
|
||||
border: 1px dashed #4D7BFF;
|
||||
border-radius: 5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -252,24 +326,32 @@
|
|||
margin: 15rpx 0;
|
||||
text-align: center;
|
||||
height: 140rpx;
|
||||
.icon{
|
||||
.h3{
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
.h3 {
|
||||
font-weight: 800;
|
||||
color: #4D7BFF;
|
||||
font-size: 11rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 7rpx;
|
||||
}
|
||||
.desc{
|
||||
|
||||
.desc {
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.fn{
|
||||
|
||||
.fn {
|
||||
display: flex;
|
||||
gap:15rpx;
|
||||
view{
|
||||
gap: 15rpx;
|
||||
|
||||
view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
border-radius: 100rpx;
|
||||
|
|
@ -277,16 +359,18 @@
|
|||
font-size: 11rpx;
|
||||
font-weight: 800;
|
||||
background: #E8EEF5;
|
||||
&:nth-of-type(2){
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
|
||||
&:nth-of-type(2) {
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailstop{
|
||||
|
||||
.detailstop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -294,80 +378,142 @@
|
|||
background: #E7E7ED;
|
||||
position: sticky;
|
||||
top: 0rpx;
|
||||
.back{
|
||||
|
||||
.back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 14rpx;
|
||||
height: 10rpx;
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #4D7BFF;
|
||||
}
|
||||
.title{
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.fn{
|
||||
|
||||
.fn {
|
||||
font-weight: 800;
|
||||
background: #FE5F13;
|
||||
color: #fff;
|
||||
padding: 7rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 11rpx;
|
||||
position: relative;
|
||||
|
||||
.tc {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
right: 0px;
|
||||
font-size: 11rpx;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 5rpx;
|
||||
padding: 10rpx 10rpx;
|
||||
top: 100%;
|
||||
margin-top: 14rpx;
|
||||
box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.22);
|
||||
|
||||
}
|
||||
|
||||
&.aft {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
top: 100%;
|
||||
width: 0rpx;
|
||||
height: 0rpx;
|
||||
margin-top: 5rpx;
|
||||
border-bottom: 10rpx solid rgba(0, 0, 0, 0.7);
|
||||
border-top: 0rpx solid transparent;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.red {
|
||||
background: #D10B0B;
|
||||
}
|
||||
|
||||
&.fx {
|
||||
background: #08A05F;
|
||||
}
|
||||
|
||||
&.yfx {
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailspage{
|
||||
|
||||
.detailspage {
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin:0 15rpx;
|
||||
margin: 1rpx 15rpx;
|
||||
padding: 15rpx;
|
||||
.time{
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.l{
|
||||
|
||||
.l {
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.r{
|
||||
|
||||
.r {
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #4D7BFF;
|
||||
}
|
||||
}
|
||||
.form{
|
||||
|
||||
.form {
|
||||
margin: 15rpx 0;
|
||||
border-radius: 3rpx;
|
||||
overflow: hidden;
|
||||
border: 1px solid #979797;
|
||||
.item{
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #979797;
|
||||
&>view{
|
||||
&:nth-last-of-type(1){
|
||||
|
||||
&>view {
|
||||
&:nth-last-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
border-right: 1px solid #979797;
|
||||
}
|
||||
&:nth-last-of-type(1){
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
.title{
|
||||
|
||||
background:#F3F5F8;
|
||||
|
||||
.title {
|
||||
|
||||
background: #F3F5F8;
|
||||
font-size: 9rpx;
|
||||
padding:7rpx;
|
||||
padding: 7rpx;
|
||||
width: 90rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.txt{
|
||||
|
||||
.txt {
|
||||
flex: 1;
|
||||
font-size: 9rpx;
|
||||
text-align: left;
|
||||
|
|
@ -375,35 +521,42 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
view{
|
||||
|
||||
view {
|
||||
font-size: 9rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.imgs{
|
||||
|
||||
.imgs {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
.item{
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
.title{
|
||||
|
||||
.title {
|
||||
margin: 7rpx 0;
|
||||
font-size: 11rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
.img{
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 135rpx;
|
||||
position: relative;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.time{
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
padding: 10rpx;
|
||||
color: #fff;
|
||||
|
|
@ -414,24 +567,30 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.info{
|
||||
&>.title{
|
||||
|
||||
.info {
|
||||
&>.title {
|
||||
margin: 7rpx 0;
|
||||
font-size: 11rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tbody{
|
||||
|
||||
.tbody {
|
||||
border: 1px solid #979797;
|
||||
border-radius: 3rpx;
|
||||
overflow: hidden;
|
||||
.ul{
|
||||
|
||||
.ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&:nth-last-of-type(1){
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid #979797;
|
||||
.title{
|
||||
|
||||
.title {
|
||||
font-size: 9rpx;
|
||||
width: 55rpx;
|
||||
text-align: center;
|
||||
|
|
@ -439,15 +598,18 @@
|
|||
padding: 7rpx;
|
||||
border-left: 1px solid #979797;
|
||||
border-right: 1px solid #979797;
|
||||
&:nth-of-type(1){
|
||||
border-left:none;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
.txt{
|
||||
|
||||
.txt {
|
||||
font-size: 9rpx;
|
||||
padding: 7rpx;
|
||||
width: calc((100% - 110rpx) / 2);
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 94rpx;
|
||||
margin: 0rpx;
|
||||
|
|
|
|||
|
|
@ -5,23 +5,23 @@
|
|||
|
||||
<view class="tabs">
|
||||
<view class="left" @click="showdate=true">
|
||||
<view class="time" >{{chooseday || '选择日期'}}</view>
|
||||
<view class="time" >{{queryDate || '选择日期'}}</view>
|
||||
<image src="/static/time.png"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<input placeholder="搜索超速车辆" />
|
||||
<input placeholder="搜索超速车辆" v-model="vehicleNumber" @confirm='confirm(e)' />
|
||||
<uni-icons type="search" size="16rpx"></uni-icons>
|
||||
</view>
|
||||
<view class="reset" @click="reset()">重置</view>
|
||||
<view class="reset" @click="emptydata">重置</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true" class="scroll-view">
|
||||
<view v-for="item in 10" class="item">
|
||||
<scroll-view :scroll-y="true" class="scroll-view" @scrolltolower='bottomingOut'>
|
||||
<view v-for="item in list" class="item">
|
||||
<view class="left">
|
||||
<view class="t">
|
||||
<image src="/static/err.png"></image>
|
||||
<!-- <image src="/static/err.png"></image> -->
|
||||
车牌号码
|
||||
</view>
|
||||
<view class="num">晋MP6400</view>
|
||||
<view class="num" :class="`numcolor${item.vehicleNumberColor}`">{{item.vehicleNumber}}</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="thead">
|
||||
|
|
@ -31,14 +31,15 @@
|
|||
<view>待休息时长</view>
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<view>100km/h</view>
|
||||
<view>10%-20%</view>
|
||||
<view>4小时02分钟</view>
|
||||
<view>15分钟</view>
|
||||
<view>{{item.averageSpeedText}}</view>
|
||||
<view>{{item.overspeedLevelInformation}}</view>
|
||||
<view>{{item.exerciseDurationText}}</view>
|
||||
<view>{{item.restDurationText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right ">已放行</view>
|
||||
<view class="right " :class="{red:item.status==2}">{{item.statusText}}</view>
|
||||
</view>
|
||||
<nynull txt="暂无历史数据" v-if="!list.length"></nynull>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
|
|
@ -46,11 +47,19 @@
|
|||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
|
||||
import {
|
||||
gethistory
|
||||
} from "/appapi/index.js"
|
||||
const showdate=ref(false)
|
||||
const chooseday=ref("")
|
||||
const queryDate=ref("")
|
||||
const Selectiondate=ref()
|
||||
const vehicleNumber=ref("")
|
||||
const list=ref([])
|
||||
// 分页相关
|
||||
const pageSize=ref(40);
|
||||
const pageNum=ref(1);
|
||||
const hasNextPage=ref(true)
|
||||
|
||||
function load() {
|
||||
console.log('预警信息load')
|
||||
}
|
||||
|
|
@ -60,15 +69,54 @@
|
|||
}
|
||||
|
||||
function show() {
|
||||
console.log('预警信息show')
|
||||
reset()
|
||||
getlist()
|
||||
}
|
||||
function change(e){
|
||||
chooseday.value=e;
|
||||
hasNextPage.value=true;
|
||||
pageNum.value=1;
|
||||
list.value=[];
|
||||
queryDate.value=e;
|
||||
getlist()
|
||||
|
||||
}
|
||||
|
||||
function confirm(e){
|
||||
hasNextPage.value=true;
|
||||
pageNum.value=1;
|
||||
list.value=[];
|
||||
getlist()
|
||||
}
|
||||
function emptydata(){
|
||||
reset()
|
||||
getlist()
|
||||
}
|
||||
function getlist(){
|
||||
gethistory({
|
||||
pageNum:pageNum.value,
|
||||
pageSize:pageSize.value,
|
||||
queryDate:queryDate.value,
|
||||
vehicleNumber:vehicleNumber.value
|
||||
}).then(r=>{
|
||||
list.value=list.value.concat(r.data.data);
|
||||
hasNextPage.value=r.data.hasNextPage;
|
||||
})
|
||||
}
|
||||
// 重置
|
||||
function reset(){
|
||||
Selectiondate.value.reset();
|
||||
chooseday.value="";
|
||||
queryDate.value="";
|
||||
vehicleNumber.value=""
|
||||
showdate.value=false;
|
||||
hasNextPage.value=true;
|
||||
pageNum.value=1;
|
||||
list.value=[];
|
||||
}
|
||||
// 触底
|
||||
function bottomingOut(){
|
||||
if(hasNextPage.value){
|
||||
pageNum.value=pageNum.value+1;
|
||||
getlist()
|
||||
}
|
||||
}
|
||||
defineExpose({
|
||||
load,
|
||||
|
|
@ -115,10 +163,10 @@
|
|||
line-height: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
background: #FF9521;
|
||||
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -173,11 +221,14 @@
|
|||
}
|
||||
|
||||
.right {
|
||||
color: #D10B0B;
|
||||
|
||||
font-size: 11rpx;
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
padding: 5rpx 0;
|
||||
&.red{
|
||||
color: #D10B0B;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,50 +1,107 @@
|
|||
<template>
|
||||
<view class="subpage">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<view class="on">设备001</view>
|
||||
<view>设备002</view>
|
||||
<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">
|
||||
2025年08月13日 14:34:00
|
||||
{{infodata.queryTime}}
|
||||
<view>区间测速实时监测中</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="item">
|
||||
<view class="num">333421</view>
|
||||
<view class="num">{{infodata.todayCount}}</view>
|
||||
<view class="title">当天过车数量</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="num">5分17秒</view>
|
||||
<view class="num">{{infodata.lastMonitoringTime}}</view>
|
||||
<view class="title">距离最后一次监测，已过去：</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true">
|
||||
<view class="li" v-for="item in 10">
|
||||
<scroll-view :scroll-y="true" @scrolltolower='bottomingOut'>
|
||||
<view class="li" v-for="item in list">
|
||||
<view class="l">
|
||||
车牌号码
|
||||
<view class="color1">
|
||||
晋MP6400
|
||||
<view class="color1" :class="`numcolor${item.vehicleNumberColor}`">
|
||||
{{item.vehicleNumber}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="r">2025-08-13 15:56:00</view>
|
||||
<view class="r">{{item.queryTime}}</view>
|
||||
</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([])
|
||||
|
||||
function load(){
|
||||
// 分页相关
|
||||
const pageSize=ref(40);
|
||||
const pageNum=ref(1);
|
||||
const hasNextPage=ref(true)
|
||||
|
||||
function load() {
|
||||
console.log('过车信息load')
|
||||
}
|
||||
function hide(){
|
||||
|
||||
function hide() {
|
||||
console.log('过车信息hide')
|
||||
}
|
||||
function show(){
|
||||
|
||||
function show() {
|
||||
getequipmentinfo()
|
||||
|
||||
|
||||
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()
|
||||
})
|
||||
}
|
||||
// 获取过车信息
|
||||
function getinfo() {
|
||||
getpassingTheCar({deviceId:deviceId.value,pageNum:pageNum.value,pageSize:pageSize.value}).then(r=>{
|
||||
infodata.value=r.data;
|
||||
list.value=list.value.concat(r.data.vehicleList)
|
||||
hasNextPage.value=r.data.hasNextPage
|
||||
})
|
||||
}
|
||||
// 触底
|
||||
function bottomingOut(){
|
||||
if(hasNextPage.value){
|
||||
pageNum.value=pageNum.value+1;
|
||||
getinfo()
|
||||
}
|
||||
}
|
||||
// 重置
|
||||
function reset(){
|
||||
hasNextPage.value=true;
|
||||
pageNum.value=1;
|
||||
list.value=[];
|
||||
}
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
|
|
@ -53,77 +110,91 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.subpage{
|
||||
.subpage {
|
||||
padding: 15rpx;
|
||||
.top{
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
border-radius:3rpx;
|
||||
|
||||
.left {
|
||||
border-radius: 3rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
view{
|
||||
|
||||
view {
|
||||
width: 90rpx;
|
||||
text-align: center;
|
||||
line-height: 33rpx;
|
||||
color: #4D7BFF;
|
||||
font-size: 11rpx;
|
||||
&.on{
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
|
||||
&.on {
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
color: #fff;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.r{
|
||||
|
||||
.r {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
view{
|
||||
|
||||
view {
|
||||
font-size: 11rpx;
|
||||
color: #06765A;
|
||||
background: linear-gradient( 173deg, #FFFFFF 0%, #C6FDDE 100%);
|
||||
background: linear-gradient(173deg, #FFFFFF 0%, #C6FDDE 100%);
|
||||
border-radius: 50rpx;
|
||||
padding: 3rpx 10rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.center{
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
justify-content: space-between;
|
||||
.item{
|
||||
|
||||
.item {
|
||||
border-radius: 3rpx;
|
||||
text-align: center;
|
||||
margin: 15rpx 0;
|
||||
flex: 1;
|
||||
padding: 18rpx 0;
|
||||
.num{
|
||||
|
||||
.num {
|
||||
font-size: 22rpx;
|
||||
color: #4D7BFF;
|
||||
font-weight: 800;
|
||||
}
|
||||
.title{
|
||||
|
||||
.title {
|
||||
margin-top: 5rpx;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
background: linear-gradient( 177deg, #D6E4FA 0%, #FFFFFF 100%);
|
||||
|
||||
&:nth-of-type(1) {
|
||||
background: linear-gradient(177deg, #D6E4FA 0%, #FFFFFF 100%);
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
background: linear-gradient( 178deg, #D6FAE4 0%, #FFFFFF 100%);
|
||||
|
||||
&:nth-of-type(2) {
|
||||
background: linear-gradient(178deg, #D6FAE4 0%, #FFFFFF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
scroll-view{
|
||||
|
||||
scroll-view {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 175rpx);
|
||||
.li{
|
||||
height: calc(100vh - 175rpx);
|
||||
|
||||
.li {
|
||||
display: flex;
|
||||
padding: 15rpx;
|
||||
background: #fff;
|
||||
|
|
@ -131,23 +202,26 @@
|
|||
align-items: center;
|
||||
border-radius: 3rpx;
|
||||
margin-bottom: 15rpx;
|
||||
.l{
|
||||
|
||||
.l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
font-size: 11rpx;
|
||||
view{
|
||||
background:#FF9521 ;
|
||||
|
||||
view {
|
||||
|
||||
text-align: center;
|
||||
padding: 3rpx 10rpx;
|
||||
border-radius: 3rpx;
|
||||
margin-left: 15rpx;
|
||||
color: #fff;
|
||||
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
.r{
|
||||
|
||||
.r {
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,96 +4,194 @@
|
|||
|
||||
<view class="tabs">
|
||||
<view class="left" @click="showdate=true">
|
||||
<view class="time" :class="{on:chooseday}">
|
||||
<view class="time" :class="{on:queryDate}">
|
||||
|
||||
<block v-if="chooseday">{{chooseday}}{{getDateDescription(chooseday)}}</block>
|
||||
<block v-if="!chooseday">选择日期</block>
|
||||
<block v-if="queryDate">{{queryDate}}{{getDateDescription(queryDate)}}</block>
|
||||
<block v-if="!queryDate">选择日期</block>
|
||||
</view>
|
||||
<image src="/static/time.png"></image>
|
||||
</view>
|
||||
<view class="reset" @click="reset()">重置</view>
|
||||
</view>
|
||||
<view class="totalTime">
|
||||
<view class="name">281 - 内蒙古锡盟交管支队二连浩特市</view>
|
||||
<view class="time">16小时19分35秒</view>
|
||||
<view class="name">{{info.unitName}}</view>
|
||||
<view class="time">{{info.monitoringDuration}}</view>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li">
|
||||
<view class="num">295</view>
|
||||
<view class="num">{{info.totalVehicles}}</view>
|
||||
<view class="title">过车数量</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">295</view>
|
||||
<view class="num">{{info.warningCount}}</view>
|
||||
<view class="title">预警数量</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">295</view>
|
||||
<view class="num">{{info.warningRatio}}</view>
|
||||
<view class="title">预警比例</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">295</view>
|
||||
<view class="num">{{info.seizureRatio}}</view>
|
||||
<view class="title">查扣比例</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="statistics">
|
||||
<view class="title">各超速类型数量对比</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
|
||||
<view class="charts-box" id="echart" :info='info' :change:info='echart.updata' :init="charts"
|
||||
:change:init="echart.init">
|
||||
<!-- <qiun-data-charts type="bar" :opts="opts" :chartData="chartData" /> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script module="mapbaidu" lang="renderjs">
|
||||
<script module="echart" lang="renderjs">
|
||||
let myChart
|
||||
export default {
|
||||
mounted() {
|
||||
// 加载echart图表
|
||||
if (typeof window.echarts === 'function') {
|
||||
this.init()
|
||||
} else {
|
||||
// 动态引入较大类库避免影响页面展示
|
||||
const script = document.createElement('script')
|
||||
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
||||
script.src = 'static/echarts.min.js'
|
||||
document.head.appendChild(script)
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
init(e) {
|
||||
if (!window.echarts) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
updata(r) {
|
||||
|
||||
if (window.echarts) {
|
||||
let allnum=r.overspeedStatistics.overspeed50Plus+r.overspeedStatistics.overspeed20To50+r.overspeedStatistics.overspeed10To20+r.overspeedStatistics.overspeedUnder10
|
||||
myChart = echarts.init(document.getElementById("echart"))
|
||||
myChart.setOption({
|
||||
|
||||
grid: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 15,
|
||||
left: 0,
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ["超速50%以上", "超速20%-50%", "超速10%-20%", "超速10%以下"]
|
||||
},
|
||||
series: [{
|
||||
barWidth: 20,
|
||||
type: 'bar',
|
||||
color: "#4D7BFF",
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
width:100,
|
||||
formatter:function(a){
|
||||
return Number(a.value/allnum*100).toFixed(2)+'%';
|
||||
}
|
||||
},
|
||||
emphasis:{
|
||||
disabled:true
|
||||
},
|
||||
data: [
|
||||
r.overspeedStatistics.overspeed50Plus,
|
||||
r.overspeedStatistics.overspeed20To50,
|
||||
r.overspeedStatistics.overspeed10To20,
|
||||
r.overspeedStatistics.overspeedUnder10,
|
||||
],
|
||||
},
|
||||
{
|
||||
barGap: "-100%",
|
||||
silent: true,
|
||||
barWidth: 20,
|
||||
type: 'bar',
|
||||
color: "#4D7BFF",
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideTopRight',
|
||||
color: "#fff"
|
||||
},
|
||||
emphasis:{
|
||||
disabled:true
|
||||
},
|
||||
data: [
|
||||
r.overspeedStatistics.overspeed50Plus,
|
||||
r.overspeedStatistics.overspeed20To50,
|
||||
r.overspeedStatistics.overspeed10To20,
|
||||
r.overspeedStatistics.overspeedUnder10,
|
||||
],
|
||||
},
|
||||
{
|
||||
barGap: "-100%",
|
||||
silent: true,
|
||||
barWidth: 20,
|
||||
type: 'bar',
|
||||
|
||||
itemStyle:{
|
||||
color: "rgba(255,255,255,0)",
|
||||
},
|
||||
emphasis:{
|
||||
disabled:true
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideTopRight',
|
||||
color: "#fff"
|
||||
},
|
||||
data: [
|
||||
r.overspeedStatistics.overspeed50Plus+10,
|
||||
r.overspeedStatistics.overspeed20To50+10,
|
||||
r.overspeedStatistics.overspeed10To20+10,
|
||||
r.overspeedStatistics.overspeedUnder10+10,
|
||||
],
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import {
|
||||
getmonitorStatistics
|
||||
} from "/appapi/index.js"
|
||||
const showdate = ref(false)
|
||||
const Selectiondate = ref();
|
||||
const chooseday = ref("")
|
||||
const opts = {
|
||||
color: ["#4D7BFF"],
|
||||
padding: [15, 30, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
showBox: false,
|
||||
xAxis: {
|
||||
boundaryGap: "justify",
|
||||
disableGrid: false,
|
||||
min: 0,
|
||||
axisLine: false,
|
||||
max: 40
|
||||
},
|
||||
yAxis: {},
|
||||
extra: {
|
||||
bar: {
|
||||
type: "group",
|
||||
width: 20,
|
||||
meterBorde: 1,
|
||||
meterFillColor: "#FFFFFF",
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
barBorderRadius: [6, 6, 0, 0],
|
||||
seriesGap: 2,
|
||||
categoryGap: 2,
|
||||
labelPosition: "center"
|
||||
},
|
||||
const queryDate = ref("")
|
||||
const info = ref({})
|
||||
|
||||
}
|
||||
}
|
||||
const chartData =ref({})
|
||||
const chartData = ref({})
|
||||
const charts = ref(false);
|
||||
|
||||
function change(e) {
|
||||
chooseday.value = e;
|
||||
queryDate.value = e;
|
||||
getinfo()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Selectiondate.value.reset();
|
||||
chooseday.value = "";
|
||||
queryDate.value = "";
|
||||
getinfo()
|
||||
}
|
||||
|
||||
function getDateDescription(dateString) {
|
||||
|
|
@ -119,7 +217,7 @@
|
|||
|
||||
|
||||
|
||||
// 示例使用
|
||||
|
||||
|
||||
function load() {
|
||||
console.log('统计load')
|
||||
|
|
@ -127,18 +225,22 @@
|
|||
|
||||
function hide() {
|
||||
console.log('统计hide')
|
||||
charts.value = false;
|
||||
}
|
||||
|
||||
function show() {
|
||||
chartData.value={
|
||||
categories: ["超速50%以上", "超速20%-50%", "超速10%-20%", "超速10%以下"],
|
||||
series: [{
|
||||
name: "",
|
||||
data: [35, 36, 31, 33]
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
getinfo()
|
||||
|
||||
|
||||
}
|
||||
|
||||
function getinfo() {
|
||||
getmonitorStatistics({
|
||||
queryDate: queryDate.value
|
||||
}).then(r => {
|
||||
info.value = r.data;
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
load,
|
||||
|
|
@ -151,54 +253,64 @@
|
|||
.charts-box {
|
||||
height: 150rpx;
|
||||
}
|
||||
.totalTime{
|
||||
background:url("/static/tjbj.png");
|
||||
|
||||
.totalTime {
|
||||
background: url("/static/tjbj.png");
|
||||
background-size: 100% 100%;
|
||||
margin:0 15rpx;
|
||||
margin: 0 15rpx;
|
||||
padding: 15rpx;
|
||||
.name{
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 13rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.time{
|
||||
|
||||
.time {
|
||||
font-weight: 700;
|
||||
font-size: 17rpx;
|
||||
color: #4D7BFF;
|
||||
margin-top: 11rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.ul{
|
||||
|
||||
.ul {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
margin: 15rpx;
|
||||
.li{
|
||||
|
||||
.li {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
padding: 17rpx 0;
|
||||
.num{
|
||||
|
||||
.num {
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #4D7BFF;
|
||||
}
|
||||
.title{
|
||||
|
||||
.title {
|
||||
font-size: 11rpx;
|
||||
margin-top: 9rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statistics{
|
||||
|
||||
.statistics {
|
||||
background: #fff;
|
||||
margin: 15rpx;
|
||||
border-radius: 3rpx;
|
||||
padding: 15rpx;
|
||||
.title{
|
||||
|
||||
.title {
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,49 +1,51 @@
|
|||
<template>
|
||||
<view class="topstatistics">
|
||||
<view class="li">
|
||||
<view class="num">超速20%以上</view>
|
||||
<view class="num">{{info.statistics?.warningLevel || '暂无'}}</view>
|
||||
<view class="title">预警级别</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">438公里</view>
|
||||
<view class="num">{{info.statistics?.regionalNetworkDistance || '暂无'}}</view>
|
||||
<view class="title">区间距离</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">80km/h</view>
|
||||
<view class="num">{{info.statistics?.intervalSpeedLimit || '暂无'}}</view>
|
||||
<view class="title">区间限速</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">4小时38分钟</view>
|
||||
<view class="num">{{info.statistics?.longestDrivingDuration || '暂无'}}</view>
|
||||
<view class="title">最短行驶时长</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<view class="left">
|
||||
<view class="nav on">
|
||||
<view class="nav" :class="{on:status==2}" @click="setstatus(2)">
|
||||
超速车辆
|
||||
</view>
|
||||
<view class="nav">
|
||||
<view class="nav" :class="{on:status==3}" @click="setstatus(3)">
|
||||
暂扣车辆
|
||||
</view>
|
||||
<view class="nav">
|
||||
<view class="nav" :class="{on:status==4}" @click="setstatus(4)">
|
||||
放行车辆
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<input placeholder="搜索超速车辆" />
|
||||
<uni-icons type="search" size="16rpx"></uni-icons>
|
||||
<input placeholder="搜索超速车辆" @confirm="getinfo" v-model="keyword" />
|
||||
<uni-icons type="search" size="16rpx" @click="getinfo"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true" class="scroll-view">
|
||||
<view v-for="item in 10" class="item">
|
||||
<view v-for="item in info.data" class="item" @click.stop="listwithhold(item.id,status==2?1:2)">
|
||||
<view class="left">
|
||||
<view class="t">
|
||||
<image src="/static/err.png"></image>
|
||||
<image v-if="status==2" src="/static/err.png"></image>
|
||||
车牌号码
|
||||
</view>
|
||||
<view class="num">晋MP6400</view>
|
||||
<view class="num" :class="`numcolor${item.vehicleNumberColor}`">
|
||||
{{item.vehicleNumber}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="center" v-if="status==2">
|
||||
<view class="thead">
|
||||
<view>平均车速</view>
|
||||
<view>超速比例</view>
|
||||
|
|
@ -51,17 +53,45 @@
|
|||
<view>待休息时长</view>
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<view>100km/h</view>
|
||||
<view>10%-20%</view>
|
||||
<view>4小时02分钟</view>
|
||||
<view>15分钟</view>
|
||||
<view>{{item.averageSpeed}}</view>
|
||||
<view>{{item.overspeedRatio}}</view>
|
||||
<view>{{item.actualDrivingDuration}}</view>
|
||||
<view>{{item.restDuration}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click="showdetails=true">暂扣</view>
|
||||
<view class="center center2" v-if="status==3">
|
||||
<view class="thead">
|
||||
<view>待休息时长</view>
|
||||
<view>待放行时间</view>
|
||||
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<view>{{item.restDuration}}</view>
|
||||
<view>{{item.overspeedRatio}}</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="center center3" v-if="status==4">
|
||||
<view class="thead">
|
||||
<view>平均车速</view>
|
||||
<view>超速比例</view>
|
||||
<view>休息时长</view>
|
||||
<view>放行时间</view>
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<view>{{item.averageSpeed}}</view>
|
||||
<view>{{item.overspeedRatio}}</view>
|
||||
<view>{{item.restDuration}}</view>
|
||||
<view>{{item.restDuration}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right red" v-if="status==2" @click.stop="withhold(item.id,1)">暂扣</view>
|
||||
<view class="right green" v-if="status==3" @click.stop="withhold(item.id,2)">放行</view>
|
||||
</view>
|
||||
<nynull v-if="!info.data?.length"></nynull>
|
||||
</scroll-view>
|
||||
<pageanimation v-model="showdetails" @close="refdetails.hide()">
|
||||
<pagedetails ref="refdetails" />
|
||||
<pagedetails ref="refdetails" @opneinfo='opneshowdetails' />
|
||||
</pageanimation>
|
||||
|
||||
</template>
|
||||
|
|
@ -70,22 +100,57 @@
|
|||
import {
|
||||
ref
|
||||
} from "vue";
|
||||
import {
|
||||
getwarningList
|
||||
} from "/appapi/index.js"
|
||||
import pagedetails from "./details.vue";
|
||||
const refdetails = ref()
|
||||
const showdetails=ref(false)
|
||||
const showdetails=ref(false)
|
||||
const status =ref(2)
|
||||
const pageSize=ref(999)
|
||||
const info=ref({
|
||||
data:[]
|
||||
});
|
||||
const keyword=ref("")
|
||||
|
||||
function load() {
|
||||
console.log('预警信息load')
|
||||
}
|
||||
|
||||
function opneshowdetails(){
|
||||
showdetails.value=true;
|
||||
}
|
||||
function hide() {
|
||||
console.log('预警信息hide')
|
||||
|
||||
showdetails.value=false;
|
||||
refdetails.value.hide()
|
||||
}
|
||||
function getinfo(){
|
||||
info.value.data=[];
|
||||
getwarningList({status:status.value,keyword:keyword.value,pageSize:pageSize.value}).then(r=>{
|
||||
info.value=r.data;
|
||||
})
|
||||
}
|
||||
function setstatus(type){
|
||||
status.value=type;
|
||||
getinfo()
|
||||
}
|
||||
|
||||
function show() {
|
||||
console.log('预警信息show')
|
||||
getinfo()
|
||||
}
|
||||
|
||||
// 点击暂扣
|
||||
|
||||
// 打开详情页面
|
||||
function listwithhold(id,type){
|
||||
showdetails.value=true;
|
||||
refdetails.value.show(id,type)
|
||||
}
|
||||
|
||||
function withhold(id,type){
|
||||
// 打开详情弹窗
|
||||
refdetails.value.opneshowupimg(id,type)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
|
|
@ -129,10 +194,10 @@
|
|||
line-height: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
background: #FF9521;
|
||||
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -184,18 +249,42 @@
|
|||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.center2{
|
||||
.thead {
|
||||
view{
|
||||
width: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.center3{
|
||||
.thead {
|
||||
view{
|
||||
width: 110rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
border-radius: 15rpx;
|
||||
border: 1rpx solid #D10B0B;
|
||||
color: #D10B0B;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 11rpx;
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
padding: 5rpx 0;
|
||||
&.green{
|
||||
border: 1rpx solid #4D7BFF;
|
||||
color: #4D7BFF;
|
||||
}
|
||||
&.red{
|
||||
border: 1rpx solid #D10B0B;
|
||||
color: #D10B0B;
|
||||
}
|
||||
&.grey{
|
||||
border: 1rpx solid #666666;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
121
pages/signIn.vue
121
pages/signIn.vue
|
|
@ -7,96 +7,159 @@
|
|||
<view class="from">
|
||||
<view class="input" :class="{on:isname}">
|
||||
<image src="/static/signIn/2.png"></image>
|
||||
<input cursor-spacing='15' @focus="isname=true" @blur="isname=false" placeholder="请填写账号"/>
|
||||
<input cursor-spacing='15' v-model="name" @focus="isname=true" @blur="isname=false" placeholder="请填写账号" />
|
||||
</view>
|
||||
<view class="input" :class="{on:ispassword}">
|
||||
<image src="/static/signIn/1.png"></image>
|
||||
<input cursor-spacing='15' v-model="password" @focus="ispassword=true" @blur="ispassword=false" :type="!showpassword?'password':'text'" placeholder="请填密码"/>
|
||||
<input cursor-spacing='15' v-model="password" @focus="ispassword=true" @blur="ispassword=false"
|
||||
:type="!showpassword?'password':'text'" placeholder="请填密码" />
|
||||
<view @click="showpassword=!showpassword" v-if="password.length">
|
||||
<uni-icons type="eye-slash-filled" v-if="!showpassword" size="16rpx"></uni-icons>
|
||||
<uni-icons type="eye-filled" v-else size="16rpx"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkbox">
|
||||
<checkbox value="cb" activeBackgroundColor='#4D7BFF' :checked="true" color="#ffffff" style="transform:scale(0.7)" />
|
||||
<view class="checkbox" @click.stop="memory=!memory">
|
||||
<checkbox @click.stop="memory=!memory" activeBackgroundColor='#4D7BFF' :checked="memory" color="#ffffff"
|
||||
style="transform:scale(0.7)" />
|
||||
记住密码
|
||||
</view>
|
||||
<view class="submit">登录</view>
|
||||
|
||||
<view class="submit" @click="submit">登录</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
applogin
|
||||
} from "/appapi/index.js"
|
||||
import soket from "/utils/soket.js"
|
||||
import {onShow} from "@dcloudio/uni-app"
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
const isname = ref(false);
|
||||
const ispassword = ref(false);
|
||||
const showpassword = ref(false)
|
||||
const name = ref(uni.getStorageSync('name'));
|
||||
const password = ref(uni.getStorageSync('password'))
|
||||
const memory=ref(true)
|
||||
onShow(()=>{
|
||||
// 登录页面 关闭Socket
|
||||
uni.closeSocket()
|
||||
})
|
||||
function submit(){
|
||||
if(!name.value){
|
||||
uni.showToast({
|
||||
title:"请填写账号",
|
||||
icon:"none"
|
||||
})
|
||||
return
|
||||
}
|
||||
if(!password.value){
|
||||
uni.showToast({
|
||||
title:"请填写密码",
|
||||
icon:"none"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const isname=ref(false);
|
||||
const ispassword=ref(false);
|
||||
const showpassword=ref(false)
|
||||
const name=ref("");
|
||||
const password=ref("")
|
||||
applogin({
|
||||
username:name.value,
|
||||
password:password.value,
|
||||
deviceType:" android"
|
||||
}).then(r=>{
|
||||
// 创建soket连接
|
||||
uni.setStorageSync('USERID',r.data.user.userId)
|
||||
soket()
|
||||
uni.reLaunch({
|
||||
url:"/pages/index"
|
||||
})
|
||||
if(memory.value){
|
||||
uni.setStorageSync('name',name.value);
|
||||
uni.setStorageSync('password',password.value);
|
||||
}else{
|
||||
uni.removeStorageSync('name')
|
||||
uni.removeStorageSync('password')
|
||||
}
|
||||
})
|
||||
}
|
||||
function ccc(e){
|
||||
console.log(e)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page{
|
||||
.page {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.bj{
|
||||
|
||||
.bj {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box{
|
||||
|
||||
.box {
|
||||
position: fixed;
|
||||
|
||||
|
||||
top: 50%;
|
||||
right: 110rpx;
|
||||
transform: translate(0%,-50%);
|
||||
.title{
|
||||
transform: translate(0%, -50%);
|
||||
|
||||
.title {
|
||||
height: 40rpx;
|
||||
width: 230rpx;
|
||||
}
|
||||
.desc{
|
||||
|
||||
.desc {
|
||||
text-align: center;
|
||||
color: #667085;
|
||||
font-size: 15rpx;
|
||||
margin: 0rpx 0 20rpx 0;
|
||||
margin: 0rpx 0 20rpx 0;
|
||||
}
|
||||
.from{
|
||||
|
||||
.from {
|
||||
margin-top: 34rpx;
|
||||
.input{
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #D0D5DD;
|
||||
padding:7rpx 10rpx;
|
||||
padding: 7rpx 10rpx;
|
||||
border-radius: 5rpx;
|
||||
margin-bottom: 9rpx;
|
||||
background: #fff;
|
||||
&.on{
|
||||
|
||||
&.on {
|
||||
border: 1px solid #4D7BFF;
|
||||
}
|
||||
input{
|
||||
|
||||
input {
|
||||
font-size: 12rpx;
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 10rpx;
|
||||
height: 13rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.checkbox{
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #667085;
|
||||
margin: 15rpx 0;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
.submit{
|
||||
|
||||
.submit {
|
||||
text-align: center;
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
|
|
@ -57,6 +57,9 @@ const cfe = {
|
|||
yAxisFormatDemo:function (value, index) {
|
||||
return value + '元';
|
||||
},
|
||||
"percentage":function(val, index, series, opts){
|
||||
return val+'%'
|
||||
},
|
||||
seriesFormatDemo:function(res){
|
||||
return res.name + '年' + res.value + '元';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@ const cfu = {
|
|||
"xAxisDemo1":function(val, index, opts){return val+'年';},
|
||||
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
|
||||
"seriesDemo1":function(val, index, series, opts){return val+'元'},
|
||||
|
||||
"percentage":function(val, index, series, opts){
|
||||
return val+'%'
|
||||
},
|
||||
"tooltipDemo1":function(item, category, index, opts){
|
||||
if(index==0){
|
||||
return '随便用'+item.data+'年'
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
export default function lzFileWriter(id, fn) {
|
||||
|
||||
plus.io.resolveLocalFileSystemURL('/static/html/index.html', function(entry) {
|
||||
let _we = plus.webview.create(entry.toLocalURL());
|
||||
_we.evalJS(`settitle("${id}");`)
|
||||
plus.globalEvent.addEventListener('plusMessage', (e) => {
|
||||
if(e.data.id==id){
|
||||
geturl(e.data.img, e.data.id + ".png",e.data.id)
|
||||
_we.close()
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
function geturl(base64, fileName,imgid) {
|
||||
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
|
||||
fs.root.getFile(fileName, {
|
||||
create: true
|
||||
}, function(fileEntry) {
|
||||
// 获得平台绝对路径
|
||||
var fullPath = fileEntry.fullPath;
|
||||
|
||||
// 引入安卓原生类
|
||||
var Base64 = plus.android.importClass("android.util.Base64");
|
||||
var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
|
||||
//如果文件不存在则创建文件，如果文件存在则删除文件后重新创建文件
|
||||
var out = new FileOutputStream(fullPath);
|
||||
/**
|
||||
* 此处需要把base64前缀去除，在写入字节流数组
|
||||
* 去除头部data:image/jpg;base64,留下base64编码后的字符串
|
||||
**/
|
||||
let index = base64.indexOf(',')
|
||||
let base64Str = base64.slice(index + 1, base64.length)
|
||||
//base64解密得到字节流bytes；
|
||||
var bytes = Base64.decode(base64Str, 0);
|
||||
try {
|
||||
out.write(bytes); // byte 数组写入此文件输出流中。
|
||||
out.flush(); //刷新写入文件中去。
|
||||
out.close(); //关闭此文件输出流并释放与此流有关的所有系统资源。
|
||||
uni.setStorageSync(imgid,fullPath)
|
||||
fn(fullPath)
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
export default function(url,data,method="get"){
|
||||
return new Promise((resolve, reject)=>{
|
||||
uni.request({
|
||||
url: 'https://api.map.baidu.com/direction/v2/'+url, //仅为示例，并非真实接口地址。
|
||||
data: {
|
||||
ak:"23rLBU4tBLeNEMsxCCnXXw6aYyuOJCwY",
|
||||
...data
|
||||
},
|
||||
method:method,
|
||||
success: (res) => {
|
||||
console.log(res.data)
|
||||
if(res.data.status==0){
|
||||
resolve(res.data.result)
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue