11
This commit is contained in:
parent
21df16f0c0
commit
008dbe0408
101
package-lock.json
generated
101
package-lock.json
generated
|
|
@ -1,107 +1,8 @@
|
|||
{
|
||||
"name": "dianbiao",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "dianbiao",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"crypto-js": "^4.1.1",
|
||||
"echarts": "^5.4.0",
|
||||
"fast-xml-parser": "^4.0.12",
|
||||
"js-base64": "^3.7.3",
|
||||
"js-md5": "^0.7.3",
|
||||
"mp-html": "^2.4.2",
|
||||
"mpvue-echarts": "^0.3.2",
|
||||
"uview-ui": "^1.8.8",
|
||||
"weapp-cookie": "^1.4.8"
|
||||
}
|
||||
},
|
||||
"node_modules/crypto-js": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
|
||||
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
|
||||
"integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.4"
|
||||
}
|
||||
},
|
||||
"node_modules/fast-xml-parser": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.2.tgz",
|
||||
"integrity": "sha512-rmrXUXwbJedoXkStenj1kkljNF7ugn5ZjR9FJcwmCfcCbtOMDghPajbc+Tck6vE6F5XsDmx+Pr2le9fw8+pXBg==",
|
||||
"dependencies": {
|
||||
"strnum": "^1.0.5"
|
||||
},
|
||||
"bin": {
|
||||
"fxparser": "src/cli/cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/js-base64": {
|
||||
"version": "3.7.5",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
|
||||
"integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
|
||||
},
|
||||
"node_modules/js-md5": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
|
||||
"integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
|
||||
},
|
||||
"node_modules/mp-html": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/mp-html/-/mp-html-2.4.2.tgz",
|
||||
"integrity": "sha512-MSfJh5ckuaI2uibeO4qiUl2e/j5fpXy6cmW/ZzSkb+U3rTJfMSNzODqrDwG0YWOd8BVI+tD9/jLZiBhJbMupUg=="
|
||||
},
|
||||
"node_modules/mpvue-echarts": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/mpvue-echarts/-/mpvue-echarts-0.3.2.tgz",
|
||||
"integrity": "sha512-KULGS1DOMNhXu3nBkBv6BtmnqjyHLc+2Dur7eW+2s2aic1NCOygglCMmAmMEU6/TGSR67ttFA2NYxXPUYbNhWQ=="
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
|
||||
"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
|
||||
},
|
||||
"node_modules/strnum": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
|
||||
"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/uview-ui": {
|
||||
"version": "1.8.8",
|
||||
"resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.8.8.tgz",
|
||||
"integrity": "sha512-Osal3yzXiHor0In9OPTZuXTaqTbDglMZ9RGK/MPYDoQQs+y0hrBCUD0Xp5T70C8i2lLu2X6Z11zJhmsQWMR7Jg=="
|
||||
},
|
||||
"node_modules/weapp-cookie": {
|
||||
"version": "1.4.8",
|
||||
"resolved": "https://registry.npmjs.org/weapp-cookie/-/weapp-cookie-1.4.8.tgz",
|
||||
"integrity": "sha512-YksOnCI4mM+MAlAf/5iL0aSzwfePHZTUS9NorL0RerAxJMOpzzrEZrMBF+wKS1usH/UQqkZTMSxjiWs0ZcAE9g==",
|
||||
"dependencies": {
|
||||
"set-cookie-parser": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
|
||||
"integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"crypto-js": {
|
||||
"version": "4.2.0",
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@
|
|||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,163 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<view class="page">
|
||||
<u-navbar title="设备详情" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||
:show-location='true' :polygons='polygons' :markers="markers" :polyline="polyline"></map>
|
||||
<view class="info_card">
|
||||
<view class="info_tit">
|
||||
设备信息
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="cont">
|
||||
|
||||
|
||||
<view class="info_li">
|
||||
<view class="half_infoli">
|
||||
车牌号：<input type="text" v-model="searchKeyword" placeholder="" class="input"
|
||||
placeholder-style="color:#C7CDD3">
|
||||
</view>
|
||||
<view class="half_infoli">
|
||||
MAC：<span>1Km</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="half_infoli">
|
||||
SN：<span>6分钟</span>
|
||||
</view>
|
||||
<view class="half_infoli">
|
||||
车辆型号：<span>1Km</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
运营区域：<span>已完成</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="cont">
|
||||
|
||||
<view class="info_li">
|
||||
<view class="half_infoli">
|
||||
车辆状态：<span>6分钟</span>
|
||||
</view>
|
||||
<view class="half_infoli">
|
||||
续航里程：<span>1Km</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
异常原因：<span>已完成</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="cont">
|
||||
|
||||
<view class="info_li">
|
||||
<view class="half_infoli">
|
||||
电池编号：<span>6分钟</span>
|
||||
</view>
|
||||
<view class="half_infoli">
|
||||
GPRS信号：<span>1Km</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
电池电量：<span>已完成</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="cont">
|
||||
|
||||
|
||||
<view class="info_li">
|
||||
最后定位坐标：<span>120.257015;27.10556</span>
|
||||
</view>
|
||||
<view class="info_li" style="flex-wrap: wrap;display: inline-block;">
|
||||
最后定位地址：<span>福建省宁德市福鼎市秦晖路附近久久红农 家乐（朝阳路店）</span>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
最后定位时间：<span>2024-04-25 15:22:36</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_card" style="margin-top: 20rpx;">
|
||||
<view class="info_tit">
|
||||
订单信息
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="cont">
|
||||
|
||||
|
||||
<view class="info_li">
|
||||
当前用户：<span>13365492512</span>
|
||||
</view>
|
||||
<view class="info_li" style="flex-wrap: wrap;display: inline-block;">
|
||||
当前订单编号：<span>2169987651526787</span>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
最后定位时间：<span>2024-04-25 15:22:36</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot_btn">
|
||||
<view class="btn">
|
||||
开锁
|
||||
</view>
|
||||
<view class="btn">
|
||||
关锁
|
||||
</view>
|
||||
<view class="btn">
|
||||
车辆禁用
|
||||
</view>
|
||||
<view class="btn">
|
||||
车辆解禁
|
||||
</view>
|
||||
<view class="btn">
|
||||
响铃寻车
|
||||
</view>
|
||||
<view class="btn" @click="tipshow=true" v-if="info.type==1">
|
||||
维修处理
|
||||
</view>
|
||||
<view class="btn" @click="tipshow=true" v-if="info.type==2">
|
||||
换电处理
|
||||
</view>
|
||||
</view>
|
||||
<u-mask :show="show" @click="show = false" :z-index='100' />
|
||||
<view class="tip_box" v-if="showgj">
|
||||
<view class="top">
|
||||
<view class="tip">
|
||||
修改车牌号
|
||||
</view>
|
||||
|
||||
<view class="ipt_box">
|
||||
<view class="text">
|
||||
车牌号
|
||||
</view>
|
||||
<view class="ipt">
|
||||
<input type="text"
|
||||
v-model="searchKeyword"
|
||||
placeholder="0.00"
|
||||
class="input"
|
||||
placeholder-style="color:#C7CDD3"
|
||||
>
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="bot">
|
||||
<view class="bot_left" @click="show=false">
|
||||
取消
|
||||
</view>
|
||||
<view class="bot_right">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="bot">
|
||||
<view class="btn">
|
||||
退款
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,15 +165,278 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
show:true,
|
||||
showgj:true,
|
||||
searchKeyword: '11',
|
||||
latitude: 39.916527,
|
||||
longitude: 116.397128,
|
||||
isMap: false,
|
||||
zoomSize: 15,
|
||||
markers: [{
|
||||
id: 1,
|
||||
latitude: 39.90469,
|
||||
longitude: 116.40717,
|
||||
title: 'Marker1'
|
||||
}, {
|
||||
id: 2,
|
||||
latitude: 39.90969,
|
||||
longitude: 116.41217,
|
||||
title: 'Marker2'
|
||||
}],
|
||||
polyline: [{
|
||||
points: [{
|
||||
latitude: 39.916527,
|
||||
longitude: 116.397128
|
||||
}, {
|
||||
latitude: 39.926527,
|
||||
longitude: 116.397128
|
||||
}, {
|
||||
latitude: 39.926527,
|
||||
longitude: 116.407128
|
||||
}, {
|
||||
latitude: 39.916527,
|
||||
longitude: 116.407128
|
||||
}],
|
||||
width: 8,
|
||||
arrowLine: true,
|
||||
color: '#00AF99'
|
||||
// strokeWidth: 2,
|
||||
// strokeColor: '#00AF99',
|
||||
// fillColor: '#00AF99'
|
||||
}, ],
|
||||
polygons: [{
|
||||
points: [{
|
||||
latitude: 39.918527,
|
||||
longitude: 116.400128
|
||||
},
|
||||
{
|
||||
latitude: 39.922527,
|
||||
longitude: 116.400128
|
||||
},
|
||||
{
|
||||
latitude: 39.924527,
|
||||
longitude: 116.405128
|
||||
},
|
||||
{
|
||||
latitude: 39.912527,
|
||||
longitude: 116.402128
|
||||
}
|
||||
],
|
||||
strokeColor: '#00FF00DD', // 使用不同的颜色来区分第二个区域
|
||||
strokeWidth: 2,
|
||||
fillColor: '#00FF00DD'
|
||||
}],
|
||||
cardId: '001区域'
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
|
||||
</style>
|
||||
.page {
|
||||
padding-bottom: 250rpx;
|
||||
width: 750rpx;
|
||||
|
||||
.map {
|
||||
width: 750rpx;
|
||||
height: 752rpx;
|
||||
}
|
||||
.tip_box {
|
||||
position: fixed;
|
||||
left: 72rpx;
|
||||
top: 628rpx;
|
||||
width: 610rpx;
|
||||
// height: 282rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
z-index: 110;
|
||||
padding-bottom: 100rpx;
|
||||
.top {
|
||||
padding: 52rpx 38rpx 42rpx 36rpx;
|
||||
.ipt_box{
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.text{
|
||||
width: 96rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.ipt{
|
||||
padding: 10rpx 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-left: 26rpx;
|
||||
width: 420rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
border: 2rpx solid #979797;
|
||||
.input{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tip{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.txt {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
|
||||
.bot {
|
||||
position: absolute;
|
||||
|
||||
width: 610rpx;
|
||||
// border-top: 2rpx solid #D8D8D8;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
// height: 100%;
|
||||
bottom: -20rpx;
|
||||
.bot_left {
|
||||
border-radius: 0rpx 0rpx 0rpx 30rpx;
|
||||
width: 50%;
|
||||
height: 86rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
.bot_right {
|
||||
border-radius: 0rpx 0rpx 30rpx 0rpx;
|
||||
width: 50%;
|
||||
height: 86rpx;
|
||||
background: #4C97E7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
// border-left: 2rpx solid #D8D8D8;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
// color: #4C97E7;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.bot_btn{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 40rpx 18rpx;
|
||||
width: 750rpx;
|
||||
height: 230rpx;
|
||||
background: #fff;
|
||||
// background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
||||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
.btn:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.btn{
|
||||
margin-right: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 164rpx;
|
||||
height: 66rpx;
|
||||
background: #E2F2FF;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
border: 2rpx solid #4C97E7;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
.info_card {
|
||||
background: #FFFFFF;
|
||||
|
||||
.info_tit {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 22rpx 28rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
|
||||
.money {
|
||||
margin-left: auto;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #4C97E7;
|
||||
}
|
||||
}
|
||||
|
||||
.lines {
|
||||
width: 750rpx;
|
||||
height: 2rpx;
|
||||
border: 2rpx solid #ccc;
|
||||
}
|
||||
|
||||
.cont {
|
||||
padding: 26rpx 28rpx;
|
||||
|
||||
.info_li {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #808080;
|
||||
|
||||
span {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
line-height: 48rpx;
|
||||
|
||||
.half_infoli {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 50%;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #808080;
|
||||
|
||||
span {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.input{
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user