ebike-ui/ebike-maintenance/components/devops-home-bikeinfo/devops-home-bikeinfo.vue

<template>
	<div>
		<div class="divRowQC">
			<lable class="lbNoQC">{{data.bikeCode}}</lable>
			<label v-for="(item,index) in data.arrTag" :key="index" :class="getTagClass(item.type)">
				{{item.title}}
			</label>

		</div>
		<div class="divRowQC" style="color:#adb3b3;font-size: 14px;">
			电量刷新时间：{{data.time}}
		</div>
		<div class="divRowQC" style="display:flex;justify-content: space-between;font-size: 14px;">

			<label>
				<label :style="{color:data.color}">
					<uni-icons custom-prefix="iconfont" :type="data.icon" :color="data.color" :size="iconsize" />
					{{data.soc}}%
				</label>
				<lable style="color: #00C57C;margin-left: 10px;">
					(
					<label>
						<uni-icons custom-prefix="iconfont" type="icon-ebikecheliangguanli" color="#00C57C" />
					</label>
					<label>{{data.distance}}</label>
					)

				</lable>
			</label>
			<div style="background-color:#E2F8FF;border-radius:15px;padding: 3px 15px;">
				<label>
					<uni-icons custom-prefix="iconfont" type="icon-ebikeyinlianglabashengyin" color="#0084FF"
						size="16" />
				</label>
				<label style="color: #0084FF;" @click="checkecu('findEbike')">寻车铃</label>
			</div>
		</div>
		<div style="margin-top:15px;display:flex;justify-content:space-between;">
			<label class="divBtnBlue" @click="openBikeInfo">车辆详情</label>
			<label class="divBtnBlue" @click="checkecu('openBatteryLock')">电池开仓</label>
			<label class="divBtnBlue" @click="changeBatteries">完成换电</label>

		</div>
	</div>

</template>

<script setup>
	import * as api from "@/utils/api.js";
	import {
		ref
	} from 'vue';
	const props = defineProps(["data"]);
	//查看车辆信息
	function openBikeInfo() {
		const {
			bikeId,
			ecuId,
			ecuSn
		} = props.data;
		const url = `/pages/devops/ebikeinfo/ebikeinfo?bikeId=${bikeId}&ecuId=${ecuId}&ecuSn=${ecuSn}`;
		uni.navigateTo({
			url: url
		})
	}
	
	function getTagClass(type) {
		let tagclass = "lbTag";
		switch (type) {
			case "red":
				tagclass += " lbTagRed";
				break;
			case "green":
				tagclass += " lbTagGreen";
				break;
		}
		return tagclass;
	}
	
	//中控操作
	function checkecu (url) {
		const {
			ecuId,
			bikeId
		} = props.data;
		if (!ecuId) {
			showModelMessage("请先扫码车辆编号！");
			return;
		}
		api.callCoreApi(url, {
			ecuId,
			bikeId
		}, 'get').then(res => {
			const {
				code,
				message
			} = res;
			showModelMessage(message);
		})
	}

	//完成换电
	function changeBattery() {
		showModelMessage("该功能暂未实现！");
	}
</script>

<style scoped>
	.divBtnBlue {
		background-color: #0084FF;
		color: white;
		border-radius: 5px;
		padding: 5px 15px;
		font-size: 14px;
	}

	.divRowQC {
		line-height: 25px;
	}

	.lbNoQC {
		font-size: 14px;
		color: #000;
		margin-left: 3px;
		font-weight: 600;
	}

	.lbTag {
		padding: 3px 10px;
		font-size: 12px;
		border-radius: 15px;
		margin-left: 5px;

	}

	.lbTagGreen {
		color: #1DD950;
		background-color: #E8F9E6;
	}

	.lbTagRed {
		color: #F98F93;
		background-color: #FFECED;
	}
</style>