pika_shangjia/machineAndCell/BMS/BMS.vue

<template>
	<view style="padding-bottom: 30rpx;">
		<!-- tab -->
		<view class="tab-box ddflex">
			<view class="fflex ddflex">
				<view :class="'tab-item fflex '+(queryType==1?'tab-item-active':'')" @click="queryTypeChange(1)">
					<view>实时状态</view>
					<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
				</view>
				<view :class="'tab-item fflex '+(queryType==2?'tab-item-active':'')" @click="queryTypeChange(2)">
					<view>BMS控制</view>
					<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
				</view>
			</view>
		</view>
		<view style="height: 110rpx;"></view>
		
		<block v-if="queryType==1">
			<view class="option-box">
				<view class="option-time ddflex">
					<view>更新时间: 2023-04-03 11:09:08</view>
					<view class="refresh ddflex">
						<image src="../../static/pages/images/refresh.png"></image>
						<text>刷新</text>
					</view>
				</view>
				<view style="position: relative;">
					<view style="height: 130rpx;"></view>
					<view style="margin-top: 40rpx;justify-content: center;position: absolute;left: 50%;transform: translateX(-50%);top: -50%;" class="ddflex">
						<cell :width="99" :height="197" :soc="6*10" :showsoc="true" :rotate="90"></cell>
					</view>
				</view>
			</view>
			
			<view class="bms-info">
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>电池数量：</text>
						<text class="bms-row-data">17 串</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>剩余容量：</text>
						<text class="bms-row-data">31.6 AH</text>
					</view>
				</view>
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>总电压：</text>
						<text class="bms-row-data">66.99V</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>电流数据：</text>
						<text class="bms-row-data">0A</text>
					</view>
				</view>
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>最低电压：</text>
						<text class="bms-row-data">3.934 V</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>最高电压：</text>
						<text class="bms-row-data">3.946V</text>
					</view>
				</view>
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>相差电压：</text>
						<text class="bms-row-data">0.012V</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>平均电压：</text>
						<text class="bms-row-data">3.94V</text>
					</view>
				</view>
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>温度数量：</text>
						<text class="bms-row-data">2个</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>校准容量：</text>
						<text class="bms-row-data">36.1AH</text>
					</view>
				</view>
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>温度：</text>
						<text class="bms-row-data"> [20°C][20°C]</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>功率：</text>
						<text class="bms-row-data">0KW</text>
					</view>
				</view>
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>充电状态：</text>
						<text class="bms-row-data">静止</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>均衡开闭：</text>
						<text class="bms-row-data">关闭</text>
					</view>
				</view>
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>循环摞碍次数：</text>
						<text class="bms-row-data">216次</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>固件版本：</text>
						<text class="bms-row-data">0KW</text>
					</view>
				</view>
				<view class="bms-row ddflex">
					<view class="fflex ddflex">
						<text>连接状态：</text>
						<text class="bms-row-data">已连接</text>
					</view>
					<view class="fflex ddflex bms-row-right">
						<text>设备编码：</text>
						<text class="bms-row-data">613880983244</text>
					</view>
				</view>
			</view>
		</block>
		
		<block v-if="queryType==2">
			<view class="option-box">
				<view class="option-time ddflex">
					<view>更新时间: 2023-04-03 11:09:08</view>
					<view class="refresh ddflex">
						<image src="../../static/pages/images/refresh.png"></image>
						<text>刷新</text>
					</view>
				</view>
				<view class="ddflex state">
					<view class="ddflex">
						<view>充电开关：</view>
						<view style="color: #A8A5A5;">开启</view>
					</view>
					<switch style="transform: scale(0.6);" color="#FF753A"></switch>
				</view>
				<view class="ddflex state">
					<view class="ddflex">
						<view>放电开关：</view>
						<view style="color: #A8A5A5;">关闭</view>
					</view>
					<switch style="transform: scale(0.6);" color="#FF753A"></switch>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import cell from "../../components/cell/index";

	export default {
		components: {
			cell
		},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				
				queryType: 1,
			}
		},
		onLoad(options) {

		},
		onShow() {
			
		},
		methods: {
			jumpUrl(url) {
				if (req.isLogins(true)) {
					uni.navigateTo({
						url: url
					})
				}
			},
			queryTypeChange(val) {
				if (this.queryType == val) return false
				this.queryType = val
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./BMS.css";
</style>