546 lines
12 KiB
Vue
546 lines
12 KiB
Vue
<template>
|
|
<view class="container">
|
|
<scroll-view scroll-y :style="{ height: scrollHeight + 'px' }">
|
|
|
|
<uni-card>
|
|
<uni-section>
|
|
<uni-forms-item label="车辆编号" label-s name="bikeCode">
|
|
<bikeCodeScan @scan-change="bikeCodeScanChange" :codeValue="ebikeInfo.bikeCode" />
|
|
</uni-forms-item>
|
|
<view class="flex justify-start ">
|
|
<uni-forms-item label="在线状态" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.zxstate}}
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="实时电量" class="with50">
|
|
<view class="flex justify-between">
|
|
<view class="lengthwz" style="color: red; width: auto;">
|
|
{{ebikeInfo.soc}}
|
|
</view>
|
|
<view v-if="ebikeInfo.soc !=null && ebikeInfo.soc != ''" class="hdcclass"
|
|
@click="gotohdInfo">
|
|
换电池>
|
|
</view>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="flex justify-start">
|
|
<uni-forms-item label="车辆状态" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.stateName}}
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="实时电压" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.voltage}}
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="flex justify-start">
|
|
<uni-forms-item label="离线前电量" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.soc}}
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="离线前电压" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.voltage}}
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="flex justify-start">
|
|
<uni-forms-item label="电门状态" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.accOn}}
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="轮锁状态" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.wheelLocked}}
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="flex justify-start">
|
|
<uni-forms-item label="电池仓状态" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.seatLocked}}
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="GPS信号强度" class="with50">
|
|
<view class="lengthwz">
|
|
{{ebikeInfo.gsm}}
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<uni-forms-item label="所处站点">
|
|
<view class="lengthwz1">
|
|
{{ebikeInfo.positionNow}}
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="最新定位">
|
|
<view class="flex flex-wrap justify-between">
|
|
<view class="lengthwz1">
|
|
{{ebikeInfo.position}}
|
|
</view>
|
|
<view v-if="ebikeInfo.position != null && ebikeInfo.position != ''" class="zxdwclass"
|
|
@click="gotoMapsInfo">
|
|
<uni-icons custom-prefix="iconfont" color="#1488f5" type="icon-ebikeditu1"
|
|
size="15"></uni-icons>
|
|
地图找车
|
|
</view>
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="最后的骑行时间">
|
|
<view class="lengthwz1">
|
|
{{ebikeInfo.lastRideTime}}
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="最后的骑行人">
|
|
<view class="lengthwz1">
|
|
{{ebikeInfo.lastRideUser}}
|
|
</view>
|
|
</uni-forms-item>
|
|
</uni-section>
|
|
|
|
</uni-card>
|
|
<uni-card>
|
|
<uni-section title="标签" type="line">
|
|
<view class="example-body flex flex-wrap">
|
|
<view v-for="(item,index) in bqlist" class="tag-view bqboxclass" :key="index">
|
|
<uni-tag :text="item.name" :type="item.type" />
|
|
</view>
|
|
</view>
|
|
</uni-section>
|
|
</uni-card>
|
|
<uni-card>
|
|
<uni-section title="操作" type="line">
|
|
<view class="czclass flex flex-wrap">
|
|
<view v-for="(item,index) in ebikeczList" class="classbut" @click="clickUseEbike(item,index)"
|
|
:key="index" :class="item.click?'classbutsele':''">
|
|
<span class="czwz">
|
|
{{item.name}}
|
|
</span>
|
|
</view>
|
|
</view>
|
|
</uni-section>
|
|
</uni-card>
|
|
<uni-card>
|
|
<uni-section title="转工单" type="line">
|
|
<view class="czclass flex flex-wrap">
|
|
<view v-for="(item,index) in gdlist" :key="index" class="classgd">
|
|
<view @click="clickzgd(item,index)" :class="item.click?'select':''">
|
|
<uni-icons custom-prefix="iconfont" color="rgb(255,129,0)" :type="item.icon"
|
|
size="25"></uni-icons>
|
|
<view class="zgdclaswz">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-section>
|
|
</uni-card>
|
|
<view style="height: 5px;">
|
|
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="nav-panel">
|
|
<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from 'dayjs';
|
|
import {
|
|
reactive,
|
|
ref,
|
|
onMounted
|
|
} from 'vue';
|
|
import * as api from '@/utils/api.js';
|
|
import {
|
|
showModelMessage
|
|
} from '@/utils/tools.js';
|
|
const ebikeInfo = ref({
|
|
bikeId: '',
|
|
bikeCode: '',
|
|
ecuId: '',
|
|
ecuSn: '',
|
|
position: '',
|
|
stateName:''
|
|
});
|
|
const position = ref({
|
|
longitude: "",
|
|
latitude: ""
|
|
});
|
|
const navButtonGroup = [{
|
|
text: '车辆详情',
|
|
backgroundColor: '#0078D4',
|
|
color: "#fff"
|
|
}];
|
|
|
|
const DmSeleList = ref([{
|
|
value: 0,
|
|
text: "关闭"
|
|
},
|
|
{
|
|
value: 1,
|
|
text: "打开"
|
|
}
|
|
])
|
|
|
|
const bqlist = ref(
|
|
[{
|
|
name: "乐摇摇",
|
|
type: "primary"
|
|
}, {
|
|
name: "离线",
|
|
type: "success"
|
|
}, {
|
|
name: "低电量",
|
|
type: "warning"
|
|
}, {
|
|
name: "未投放",
|
|
type: "error"
|
|
}, {
|
|
name: "超出运营区",
|
|
type: "error"
|
|
}, {
|
|
name: "电量无更新",
|
|
type: "error"
|
|
}, {
|
|
name: "120H无单",
|
|
type: "error"
|
|
}, {
|
|
name: "72H调度无单",
|
|
type: "error"
|
|
}, {
|
|
name: "换电中",
|
|
type: "warning"
|
|
}, {
|
|
name: "已巡检",
|
|
type: "primary"
|
|
}])
|
|
|
|
const gdlist = ref(
|
|
[{
|
|
name: "调度",
|
|
icon: "icon-ebikehaocai",
|
|
url: ''
|
|
}, {
|
|
name: "换电",
|
|
icon: "icon-ebikedianchi",
|
|
url: '/pages/devops/changebatteries/changebatteries'
|
|
}, {
|
|
name: "维修",
|
|
icon: "icon-ebikeweixiuoff",
|
|
url: '/pages/devops/maintenancepage/maintenancepage'
|
|
}, {
|
|
name: "故障上报",
|
|
icon: "icon-ebikeguzhangshangbao1",
|
|
url: '/pages/devops/faultreport/faultreport'
|
|
}])
|
|
|
|
const ebikeczList = ref(
|
|
[{
|
|
name: "开锁",
|
|
click: false,
|
|
enabled: true,
|
|
url: "unlock"
|
|
}, {
|
|
name: "关锁",
|
|
click: false,
|
|
enabled: true,
|
|
url: "lock"
|
|
}, {
|
|
name: "开电池锁",
|
|
click: false,
|
|
enabled: true,
|
|
url: "openBatteryLock"
|
|
}, {
|
|
name: "还车",
|
|
click: false,
|
|
enabled: false,
|
|
url: "lock"
|
|
}, {
|
|
name: "开头盔锁",
|
|
click: false,
|
|
enabled: true,
|
|
url: "openHelmet"
|
|
}, {
|
|
name: "寻车铃",
|
|
click: false,
|
|
enabled: true,
|
|
url: "findEbike"
|
|
} , {
|
|
name: "重启",
|
|
click: false,
|
|
enabled: false,
|
|
url: "restart"
|
|
}, {
|
|
name: "临时停车",
|
|
click: false,
|
|
enabled: true,
|
|
url: "tempLock"
|
|
}, {
|
|
name: "重新定位",
|
|
click: false,
|
|
enabled: true,
|
|
url: ""
|
|
}])
|
|
|
|
|
|
|
|
const bikeCodeScanChange = (bikeCode) => {
|
|
ebikeInfo.value.bikeCode = bikeCode;
|
|
api.callEbikeInfo("getBikeINfoData?bikeCode=" + bikeCode).then((res) => {
|
|
if (res.code == 200) {
|
|
ebikeInfo.value.bikeId = res.data.bikeId;
|
|
//获取车辆经纬度
|
|
api.callCoreApi("gps?ecuId=" + res.data.ecuId + "&bikeId=" + res.data.bikeId, {}, 'get').then((
|
|
res) => {
|
|
});
|
|
ebikeInfo.value.ecuId = res.data.ecuId;
|
|
ebikeInfo.value.ecuSn = res.data.ecuSn;
|
|
const ecuSn = res.data.ecuSn;
|
|
navButtonGroup[0].disable = false
|
|
ebikeInfo.value.position = res.data.resGPSDto.chineseLocation;
|
|
ebikeInfo.value.stateName = res.data.stateName;
|
|
position.value.longitude = res.data.resGPSDto.longitude
|
|
position.value.latitude = res.data.resGPSDto.latitude
|
|
ebikeInfo.value.accOn = res.data.resGPSDto.accOn == 0 ? "电门关闭" : "电门打开";
|
|
ebikeInfo.value.gsm = res.data.resGPSDto.gsm;
|
|
ebikeInfo.value.helmentExit = res.data.resGPSDto.helmentExit;
|
|
ebikeInfo.value.seatLocked = res.data.resGPSDto.seatLocked = res.data.resGPSDto.accOn ==
|
|
0 ? "未锁" : "已锁";
|
|
ebikeInfo.value.soc = res.data.resGPSDto.soc + '%';
|
|
ebikeInfo.value.timestamp = dayjs(res.data.resGPSDto.timestamp * 1000).format(
|
|
'YYYY-MM-DD HH:mm:ss');
|
|
ebikeInfo.value.voltage = res.data.resGPSDto.voltage * 0.001 + "V";
|
|
ebikeInfo.value.wheelLocked = res.data.resGPSDto.wheelLocked == 0 ? "未锁" : "已锁";
|
|
|
|
api.callCoreApi("online?ecuId=" + ebikeInfo.value.ecuId + "&bikeId=" + res.data.bikeId, {},
|
|
'get')
|
|
.then((ecudata) => {
|
|
ebikeInfo.value.zxstate = ecudata.data.message;
|
|
});
|
|
|
|
} else {
|
|
showModelMessage(res.message)
|
|
}
|
|
});
|
|
};
|
|
|
|
const clickUseEbike = (item, index) => {
|
|
if (!checkscan()) {
|
|
return
|
|
}
|
|
ebikeczList.value[index].click = true;
|
|
setTimeout(() => {
|
|
ebikeczList.value[index].click = false;
|
|
}, 100);
|
|
uni.showLoading({
|
|
title: "指令下发中...",
|
|
mask: true
|
|
})
|
|
var paramName = "ecuId";
|
|
var data = ebikeInfo.value.ecuId
|
|
var bikeId = ebikeInfo.value.bikeId
|
|
api.callCoreApi(item['url'] + "?ecuId=" + data + "&bikeId=" + bikeId, {}, 'get').then((res) => {
|
|
uni.hideLoading();
|
|
var title = res.data.message;
|
|
var icon = "";
|
|
if (res.data.code == 200) {
|
|
icon = "success"
|
|
} else {
|
|
icon = "error"
|
|
}
|
|
uni.showToast({
|
|
title: title,
|
|
icon: icon,
|
|
duration: 2000,
|
|
mask: true
|
|
});
|
|
});
|
|
}
|
|
|
|
const clickzgd = (item, index) => {
|
|
if (!checkscan()) {
|
|
return
|
|
}
|
|
gdlist.value[index].click = true;
|
|
setTimeout(() => {
|
|
gdlist.value[index].click = false;
|
|
uni.navigateTo({
|
|
url: item['url'] + "?bikeCode=" + ebikeInfo.value.bikeCode,
|
|
});
|
|
}, 100);
|
|
|
|
}
|
|
|
|
const gotoMapsInfo = () => {
|
|
uni.navigateTo({
|
|
url: "/pages/map/map-findbike?longitude=" + position.value.longitude + "&latitude=" + position
|
|
.value.latitude,
|
|
});
|
|
}
|
|
const gotohdInfo = () => {
|
|
uni.navigateTo({
|
|
url: "/pages/devops/changebatteries/changebatteries?bikeCode=" + ebikeInfo.value.bikeCode,
|
|
});
|
|
}
|
|
|
|
const navButtonClick = (index, content) => {
|
|
if (!checkscan()) {
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: "/pages/devops/ebikeinfo/ebikeinfo?bikeId=" + ebikeInfo.value.bikeId + "&ecuId=" + ebikeInfo
|
|
.value.ecuId + "&ecuSn=" + ebikeInfo.value.ecuSn,
|
|
});
|
|
}
|
|
|
|
const checkscan = () => {
|
|
if (!ebikeInfo.value.bikeCode) {
|
|
showModelMessage("请先扫车辆码或输入车辆码");
|
|
return false;
|
|
}
|
|
if (!ebikeInfo.value.bikeId) {
|
|
showModelMessage("车辆信息不存在");
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
const scrollHeight = ref(0);
|
|
onMounted(() => {
|
|
// 获取设备信息
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
// 获取屏幕高度和状态栏高度
|
|
const screenHeight = systemInfo.screenHeight;
|
|
const statusBarHeight = systemInfo.statusBarHeight;
|
|
// 计算去掉状态栏后的可用区域高度
|
|
scrollHeight.value = screenHeight - statusBarHeight - 113;
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
padding: 0px 0px;
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.with20 {
|
|
width: 20px;
|
|
}
|
|
|
|
.nav-panel {
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
width: 100%;
|
|
padding-bottom: 20px;
|
|
background-color: #fff;
|
|
z-index: 105;
|
|
}
|
|
|
|
.czclass {
|
|
width: 100%;
|
|
padding: 5px 0px;
|
|
}
|
|
|
|
.classbut {
|
|
width: 21%;
|
|
text-align: center;
|
|
height: 30px;
|
|
background: rgb(243, 249, 255);
|
|
margin-left: 3%;
|
|
border: solid 1px rgb(104, 176, 255);
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.czwz {
|
|
color: rgb(104, 176, 255);
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.classbutsele {
|
|
background: rgba(121, 184, 255, 0.6);
|
|
|
|
|
|
}
|
|
|
|
.classgd {
|
|
width: 21%;
|
|
height: 80px;
|
|
margin-left: 3%;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.zgdclaswz {
|
|
|
|
font-size: 14px;
|
|
}
|
|
|
|
.select {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.bqboxclass {
|
|
margin: 8px 3px;
|
|
}
|
|
|
|
.with50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.lengthwz {
|
|
width: 80px;
|
|
line-height: 36px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.lengthwz1 {
|
|
line-height: 36px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
|
|
uni-text {
|
|
color: rgb(140, 140, 140);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.zxdwclass {
|
|
border: solid 1px rgb(75, 161, 255);
|
|
padding: 5px;
|
|
font-size: 12px;
|
|
color: rgb(56, 151, 255);
|
|
border-radius: 15px;
|
|
height: 28px;
|
|
line-height: 16px;
|
|
background-color: rgba(243, 249, 255, 0.8);
|
|
}
|
|
|
|
.hdcclass {
|
|
line-height: 36px;
|
|
font-size: 12px;
|
|
margin-left: 10px;
|
|
color: rgb(45, 145, 255);
|
|
}
|
|
|
|
.uni-card {
|
|
border-radius: 15px !important;
|
|
}
|
|
|
|
.uni-card .uni-card__content[data-v-81f163d7] {
|
|
padding: 0px !important;
|
|
}
|
|
</style> |