364 lines
8.9 KiB
Vue
364 lines
8.9 KiB
Vue
<!-- 换电 -->
|
||
<template>
|
||
<div class="b-body-gray">
|
||
<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }">
|
||
<div style="padding-top: 5px">
|
||
<uni-forms :border="true" :label-width="90">
|
||
<uni-card>
|
||
<uni-forms-item label="车辆编号:">
|
||
<bikeCodeScan
|
||
ref="refbikeScan"
|
||
v-model="bikeCode"
|
||
@scan-change="getBikeInfo"
|
||
/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="车辆状态:">
|
||
<div class="divContent divCenter">{{ formdata.online }}</div>
|
||
<div class="divContent">{{ formdata.timestamp }}</div>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="老电池编号:">
|
||
<div class="divContent divCenter">
|
||
{{ formdata.oldBatteryCode }}
|
||
</div>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="电池电量:">
|
||
<div class="divContent divCenter">
|
||
{{ formdata.soc ? formdata.soc : 0 }}%
|
||
</div>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="车辆位置:">
|
||
<uni-list :border="false">
|
||
<uni-list-item
|
||
showArrow
|
||
title="查看地图"
|
||
:note="
|
||
formdata.latitude
|
||
? formdata.latitude + ',' + formdata.longitude
|
||
: ''
|
||
"
|
||
link="navigateTo"
|
||
clickable
|
||
@click="mapClick"
|
||
/>
|
||
<!-- :to=" '/pages/map/map-findbike?longitude=' + formdata.longitude
|
||
+ '&latitude=' + formdata.latitude " -->
|
||
</uni-list>
|
||
</uni-forms-item>
|
||
|
||
<div class="divBtn">
|
||
<text
|
||
:class="formdata.ecuId ? 'b-btn-babyblue' : 'b-btn-gray'"
|
||
v-for="item in arrEcuBtn"
|
||
@click="checkecu(item.url)"
|
||
>{{ item.title }}</text
|
||
>
|
||
</div>
|
||
<uni-forms-item label="新电池编号:">
|
||
<scanCode v-model="newBatteryCode" placeholder="请输入" />
|
||
</uni-forms-item>
|
||
<div
|
||
class="b-btn-blue"
|
||
style="text-align: center"
|
||
@click="checkecu('openBatteryLock')"
|
||
>
|
||
打开电池仓
|
||
</div>
|
||
<div style="text-align: right">
|
||
<text style="margin-right: 5px; margin-top: 5px">
|
||
<uni-icons
|
||
custom-prefix="iconfont"
|
||
type="icon-ebikeguzhangshangbao1"
|
||
size="20"
|
||
color="#999"
|
||
/>
|
||
</text>
|
||
<text class="b-font-gray-sm">电池仓打不开，</text>
|
||
<text
|
||
class="b-font-blue-sm"
|
||
style="font-weight: bold"
|
||
@click="openfaultreport"
|
||
>上报故障</text
|
||
>
|
||
</div>
|
||
</uni-card>
|
||
|
||
<div style="padding: 15px">
|
||
<div
|
||
class="b-font-gray-base"
|
||
style="margin-bottom: 10px; font-weight: bold"
|
||
>
|
||
温馨提示
|
||
</div>
|
||
<div class="b-font-gray-sm">
|
||
1、读取到新电池的电量即视为更换成功新的电池;
|
||
</div>
|
||
<div class="b-font-gray-sm">
|
||
2、电池更换完成自动读取设备状态和电池电量，过程可能需要个 几分钟；
|
||
</div>
|
||
<div class="b-font-gray-sm">
|
||
3、更换完成请点击下面完成换电按钮；
|
||
</div>
|
||
<div class="b-font-gray-sm">
|
||
4、如果直接点击更换完成，电量会暂时变成41%，系统检测到电
|
||
量上报后会自动变成上报的电量；
|
||
</div>
|
||
</div>
|
||
</uni-forms>
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
|
||
<!-- <div class="divBottom">
|
||
<text class="b-btn-white" style="margin-right: 15px;" @click="refresh">刷新</text>
|
||
<text class="b-btn-blue" @click="completebatter">完成换电</text>
|
||
</div> -->
|
||
<view class="nav-panel">
|
||
<c-uni-goods-nav
|
||
:fill="true"
|
||
:options="[]"
|
||
:buttonGroup="navButtonGroup"
|
||
@buttonClick="navButtonClick"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as api from "@/utils/api.js";
|
||
import dayjs from "dayjs";
|
||
import { showModelMessage } from "@/utils/tools.js";
|
||
import { ref, watch, reactive, onMounted } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import navigator from "@/utils/navigator.js";
|
||
//车辆信息
|
||
let bikeCode = ref(null); //车辆编号
|
||
const refbikeScan = ref(null);
|
||
let formdata = ref({
|
||
bikeId: "",
|
||
ecuId: "",
|
||
latitude: null,
|
||
longitude: null,
|
||
oldBatteryCode: "",
|
||
online: null,
|
||
soc: "", //电量
|
||
timestamp: "",
|
||
});
|
||
let newBatteryCode = ref(""); //新电池编号
|
||
|
||
// 获取设备信息
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
// 获取屏幕高度和状态栏高度
|
||
const screenHeight = systemInfo.screenHeight;
|
||
let scrollHeight = screenHeight - 150;
|
||
|
||
//按钮
|
||
let arrEcuBtn = [
|
||
{
|
||
title: "寻车铃声",
|
||
url: "findEbike",
|
||
},
|
||
{
|
||
title: "开锁",
|
||
url: "unlock",
|
||
},
|
||
{
|
||
title: "关锁",
|
||
url: "lock",
|
||
},
|
||
];
|
||
|
||
//加载
|
||
onLoad((option) => {
|
||
const { bikeCode } = option;
|
||
getBikeInfo(bikeCode);
|
||
});
|
||
onMounted(() => {
|
||
if (bikeCode.value != "") {
|
||
if (refbikeScan.value) {
|
||
refbikeScan.value.onSetValue(bikeCode.value); // 调用子组件暴露的方法来更新子组件值
|
||
}
|
||
}
|
||
});
|
||
|
||
//获取车辆信息
|
||
const getBikeInfo = (bikecode) => {
|
||
if (bikecode == bikeCode.value) return;
|
||
const params = {
|
||
bikeCode: bikecode,
|
||
};
|
||
bikeCode.value = bikecode;
|
||
api.callEbikeBatteryApply("getBikeMsg", params, "get").then((res) => {
|
||
const { code, data, message } = res;
|
||
if (code === 500) {
|
||
showModelMessage(message);
|
||
formdata.value = {};
|
||
return;
|
||
}
|
||
if (arrEcuBtn.length < 4) {
|
||
arrEcuBtn.push({
|
||
title: "关电池仓",
|
||
url: "closeBatteryLock",
|
||
});
|
||
}
|
||
const timestamp = data.timestamp;
|
||
let newtime = timestamp
|
||
? dayjs(timestamp * 1000).format("YYYY-MM-DD HH:mm:ss")
|
||
: "";
|
||
const newdata = {
|
||
...data,
|
||
timestamp: newtime,
|
||
};
|
||
formdata.value = {
|
||
...newdata,
|
||
};
|
||
});
|
||
};
|
||
|
||
// 地图点击事件
|
||
const mapClick = (e) => {
|
||
console.log(navigator);
|
||
const { longitude, latitude } = formdata.value;
|
||
if (longitude & latitude) {
|
||
navigator.to("/pages/map/map-findbike", {
|
||
longitude,
|
||
latitude,
|
||
});
|
||
} else {
|
||
showModelMessage("请先扫码车辆编号！");
|
||
}
|
||
};
|
||
|
||
//中控操作
|
||
const checkecu = (url) => {
|
||
const { ecuId, bikeId } = formdata.value;
|
||
if (!ecuId) {
|
||
showModelMessage("请先扫码车辆编号！");
|
||
return;
|
||
}
|
||
api
|
||
.callCoreApi(
|
||
url,
|
||
{
|
||
ecuId,
|
||
bikeId,
|
||
},
|
||
"get"
|
||
)
|
||
.then((res) => {
|
||
const { code, message } = res;
|
||
showModelMessage(message);
|
||
});
|
||
};
|
||
//上报故障
|
||
const openfaultreport = () => {
|
||
const bikecode = bikeCode.value;
|
||
if (!bikecode) {
|
||
showModelMessage("请先扫码车辆编号！");
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: "/pages/devops/faultreport/faultreport?bikeCode=" + bikecode,
|
||
});
|
||
};
|
||
|
||
//刷新
|
||
const refresh = () => {
|
||
const bikecode = bikeCode.value;
|
||
if (!bikecode) {
|
||
showModelMessage("请先扫码车辆编号！");
|
||
return;
|
||
}
|
||
getBikeInfo(bikecode);
|
||
};
|
||
|
||
//完成换电
|
||
const completebatter = () => {
|
||
const bikeId = formdata.value.bikeId;
|
||
const bikecode = bikeCode.value;
|
||
const newbattercode = newBatteryCode.value;
|
||
if (!bikecode) {
|
||
showModelMessage("请先扫码车辆编号！");
|
||
return;
|
||
}
|
||
if (!newbattercode) {
|
||
showModelMessage("请先扫码新电池编号！");
|
||
return;
|
||
}
|
||
//校验新电池
|
||
const params = {
|
||
bikeId,
|
||
newBatteryCode: newbattercode,
|
||
bikeCode: bikecode,
|
||
};
|
||
api.callEbikeBatteryApply("change", params).then((res) => {
|
||
const { code, message } = res;
|
||
showModelMessage(message);
|
||
if (code == 200) {
|
||
uni.navigateBack();
|
||
}
|
||
});
|
||
};
|
||
|
||
const navButtonGroup = reactive([
|
||
{
|
||
text: "刷新",
|
||
backgroundColor: "#0078D4",
|
||
color: "#fff",
|
||
disable: false,
|
||
},
|
||
{
|
||
text: "完成换电",
|
||
backgroundColor: "#0078D4",
|
||
color: "#fff",
|
||
disable: false,
|
||
},
|
||
]);
|
||
|
||
const navButtonClick = (e) => {
|
||
const index = e.index;
|
||
if (index == 0) {
|
||
refresh();
|
||
} else if (index == 1) {
|
||
completebatter();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.divContent {
|
||
}
|
||
|
||
.divBtn {
|
||
height: 35px;
|
||
}
|
||
|
||
.divBtn text {
|
||
margin-right: 5px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.divCenter {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 35px;
|
||
}
|
||
|
||
.divBottom {
|
||
position: absolute;
|
||
bottom: 0px;
|
||
padding: 0px 15px;
|
||
text-align: center;
|
||
background: white;
|
||
width: 100%;
|
||
line-height: 55px;
|
||
}
|
||
|
||
.nav-panel {
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
width: 100%;
|
||
padding-bottom: 10px;
|
||
z-index: 999;
|
||
background-color: #fff;
|
||
}
|
||
</style>
|