ebike-ui/ebike-maintenance/pages/devops/changebatteries/changebatteries.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"
									: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";
	//车辆信息
	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 openMap = () => {
		const {
			longitude,
			latitude
		} = formdata.value;
		uni.navigateTo({
			url: "./map-findebike"
		})
	}
	//中控操作
	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>