app-station-control-frontend_v1/pages/equipment-monitoring/components/BatteryCharger.vue

<template>
	<view>
		<view class="communication">
			<view class="battery_title">
				<view class="first">
					<image class="img" src="../../../static/equipment/cangwei.png" />
					</image><text class="p"> {{chargerCode}}号仓位充电机</text>
					<!-- <view :class="[buttonState[0],buttonState === 1?'is-disabled':'']" @click.stop="sendCharger">
						{{buttonState === 1 ?'不可操作':buttonState[1]}}
					</view> -->
				</view>
			</view>
			<view :class="statustext[1]">{{statustext[0]}}</view>
		</view>
		<!-- 顶部公共提示信息 -->
		<uni-popup ref="Exchangepopup" type="message">
			<uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 顶部提示信息结束-->
	</view>
</template>

<script>
	// import {
	// 	startCharge,
	// 	stopCharge
	// } from '@/common/http.js'
	export default {
		name: "BatteryCharger",
		props: ['chargerCode', 'comState'],
		data() {
			return {
				loading: false,
				popupType:'',
				popupMessage:''
			}
		},
		computed: {
			statustext() {
				if (this.comState === 1) {
					return ['通讯正常', 'success']
				} else {
					return ['通讯异常', 'warning']
				}
			},
			// buttonState() {
			// 	if ((this.chgState === 0 || this.chgState === 3)&& this.storeState === 1) {
			// 		return ['btnState', '充电']
			// 	} else if (this.chgState === 2&& this.storeState === 1) {
			// 		return ['purple', '断电']
			// 	} else {
			// 		return 1
			// 	}
			// }
		},
		methods: {
			//顶部公共消息提示
			ExchangeMessage(type, message) {
				this.popupType = type
				this.popupMessage = message?message:'后端接口404错误!'
				this.$refs.Exchangepopup.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.communication {
		display: flex;
		margin-bottom: 10px;

		view {
			line-height: 32px;
			font-size: 18px;
			font-weight: 600;
			height: 32px;
			width: 185px;
			text-align: center;
		}

		.battery_title {
			background-color: #1b263a;
			border: #25334d solid 1px;
			color: white;
			line-height: 32px;
			display: flex;
			justify-content: space-between;
			padding: 0 5px;

			.is-disabled {
				width: 75px;
				height: 24px;
				line-height: 24px;
				padding: 0 0 0 15px;
				border-radius: 15px;
				margin-top: 4px;
				color: #5f6571;
				border-color: #353c4c;
				background: url('@/static/equipment/d3.png') #353c4c no-repeat 6px center;
				position: absolute;
				right: 0px;
			}

			.first {
				display: flex;
				position: relative;

				.p {
					margin: 0;
					padding: 0;
				}

				.img {
					width: 22px;
					height: 22px;
					vertical-align: middle;
					margin-top: 6px;
					margin-right: 5px;
				}
			}

			.btnState {
				width: 45px;
				height: 24px;
				padding: 0 0 0 15px;
				font-size: 14px;
				color: #fff;
				border-radius: 15px;
				margin-top: 4px;
				line-height: 24px;
				cursor: pointer;
				border: none;
				letter-spacing: 1px;
				background: url('@/static/equipment/d1.png') rgb(105, 184, 137) no-repeat 6px center;
				background-position-x: 5px;
				position: absolute;
				right: 0px;
			}

			.purple {
				width: 45px;
				height: 24px;
				padding: 0 0 0 15px;
				font-size: 14px;
				color: #fff;
				line-height: 24px;
				border-radius: 15px;
				margin-top: 4px;
				cursor: pointer;
				border: none;
				letter-spacing: 1px;
				background: url('@/static/equipment/d2.png') rgb(224, 125, 68) no-repeat 6px center;
				background-position-x: 5px;
				position: absolute;
				right: 0px;
			}
		}

		.success {
			color: #92fdb9;
			text-align: right;
		}

		.warning {
			color: #c85e60;
			text-align: right;
		}
	}
</style>