zx_flk_app/pages/batteryDetail/batteryDetail.vue

<template>
	<view class="battery-detail-main">
		<navBar name="电池信息"  bgColor="#CFD1DE"></navBar>
		<view class=" quantity-count">{{electricQuantity || 0}}<text class="quantity-text">%</text></view>
		<view v-for="(item,index) of list" :key="index" class="battery-list-view">
			<view class="battery-list flex-row flex-between">
				<view class="battery-name">No.{{index + 1}}电池</view>
				<view class="battery-id">MAC ID:{{item.battery_sn}}</view>
			</view>
			<view class="flex-row flex-around">
				<view class="battery-device-info">
					<view class="quantity-info">{{item.electric_quantity || 0}} <text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">剩余电量</view>
				</view>
				<view class="battery-device-info">
					<view class="quantity-info">{{item.voltage || 0}}<text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">电压</view>
				</view>
				<view class="battery-device-info">
					<view class="quantity-info">{{item.battery_temp || 0}} <text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">温度</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const http = require('../../common/request.js');
	const config = require('../../common/config_gyq.js');
	export default {
		data() {
			return {
				electricQuantity:0,
				car_sn:'',
				list:[]
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.car_sn = uni.getStorageSync('car_info').car_sn || '';
			this.batteryListFn()
		},
		methods: {
			async batteryListFn(){
				let {data} = await http.postApi(config.API_CAR_BATTERY_LIST,{car_sn:this.car_sn})
				let electric_quantity = 0
				data.data.list.map(item=>{
					electric_quantity += Number(item.electric_quantity)
				})
				console.log((electric_quantity / data.data.list.length).toFixed(0))
				this.electricQuantity = (electric_quantity / data.data.list.length).toFixed(0) || 0
				this.electricQuantity = this.electricQuantity != 'NaN' ? this.electricQuantity : 0
				this.list = data.data.list
			}
		}
	};
</script>
<style>
	@import './batteryDetail.css';
</style>