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', 'chgState', "sn", "storeState"],
		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()
			},
			//充电、断电操作
			sendCharger() {
				console.log(this.chargerId)
				if (this.buttonState == 1) {
					return
				}
				let params = {}
				if (this.chgState === 0 || this.chgState === 3) {
					params = {
						chargerId: this.chargerCode * 1,
						sn: this.sn
					}
				} else if (this.chgState === 2) {
					params = {
						chargerId: this.chargerCode * 1
					}
				}
				this.loading = true
				let that = this
				uni.showModal({
					title: `确认发起${this.buttonState[1]}`,
					content: '',
					success: function(res) {
						if (res.confirm) { //点击确定
							//充电操作
							if (that.chgState === 0 || that.chgState === 3) {
								that.ExchangeMessage('success','充电指令已下发')
								that.$http.startCharge(params)
									.then(res => {
										that.ExchangeMessage(res.code === 0 ? 'success' : 'error', res.code === 0?'充电成功':'充电失败')
									}).catch(err => {
										console.error(err)
									})
							}
							//断电操作
							else if (that.chgState === 2) {
								that.ExchangeMessage('success','断电指令已下发')
								that.$http.stopCharge(params)
									.then(res => {
										that.ExchangeMessage(res.code === 0 ? 'success' : 'error', res.code === 0?'断电成功':'断电失败')
									}).catch(err => {
										console.error(err)
									})
							}
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
						that.loading = false
					}
				})
			}
		}
	}
</script>

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

		view {
			line-height: 32px;
			font-size: 14px;
			font-weight: 600;
			height: 32px;
			width: 200px;
			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>