app-station-control-frontend_v1/pages/power-changer/index.vue

<template>
	<view class="content">
		<!-- 第一排盒子开始 -->
		<view class="box-first">
			<view class="machineStatus">
				<SubTitle title="机器人状态" titleEng="ROBOT STATUS"></SubTitle>
				<view class="bottom">
					<view class="list">
						<view class="plcConnect">
							<PannelItem show="true" words="PLC通讯" :status="robotInfoVo.plcState ? '正常' : '异常'"
								:flag="robotInfoVo.plcState" />
						</view>
						<view class="plcModel">
							<PannelItem show="true" words="机器人模式" :status="PlcMode" :flag="robotInfoVo.exchangeMode" />
						</view>
					</view>
					<view class="status-only">
						<view class="circle">
							<image :src="PlcState[0]"></image>
						</view>
						<view class="descript">机器人状态</view>
						<view class="frame">
							<span :class="PlcState[1]">{{PlcState[2] || '—'}}</span>
							<view class="shinning"></view>
						</view>
					</view>
					<PannelItem show="true" words="急停状态" :status="robotInfoVo.emergencyMode == 1 ? '急停' : robotInfoVo.emergencyMode == 0 ?'未急停' :'—'"
						:flag="robotInfoVo.emergencyMode == 0" />
					<PannelItem show="true" words="暂停状态" :status="robotInfoVo.pause == 1 ? '暂停' : robotInfoVo.pause == 0?'未暂停':'—' " handle="true"
						@ExchangeMessage='ExchangeMessage' :flag="robotInfoVo.pause == 0" />
				</view>
			</view>

			<view class="machineStatus carInfo">
				<SubTitle title="车辆信息" titleEng="VEHICLE INFORMATION"></SubTitle>
				<view class="bottom">
					<view class="list">
						<view class="carLeft">
							<PannelTitle words="车牌号" :value="vehicleInfo.plate" Isblue="true" :circle="true"
								:flag="vehicleInfo.plateState" @ShowCarline="ShowCarline" />
						</view>
						<view class="carRight">
							<PannelTitle words="在线车辆" circle="false" :value="vehicleInfo.onlineNum" flag="true"
								@ShowCarline="ShowCarline" />
						</view>
					</view>
					<view class="list">
						<view class="carLeft">
							<PannelTitle words="车牌识别器" :value="vehicleInfo.plateComState ? '正常' : '异常'"
								:flag="vehicleInfo.plateComState" />
						</view>
						<view class="carRight">
							<PannelTitle words="车牌识别" :value="vehicleInfo.plateState ? '成功' : '未识别'"
								:flag="vehicleInfo.plateComState" />
						</view>

					</view>
					<view class="list">
						<view class="carLeft">
							<PannelTitle words="车辆到位" :value="vehicleInfo.sensorState ? '已到位' : '未到位'"
								:flag="vehicleInfo.sensorState" />
						</view>
						<view class="carRight">
							<PannelTitle words="连接状态" :value="vehicleInfo.conState == 1 ? '已连接' : vehicleInfo.conState == 0 ?'未连接':'—'"
								:flag="vehicleInfo.conState == 1" />
						</view>

					</view>
					<view class="list">
						<view class="carLeft">
							<PannelTitle words="鉴权状态" :value="vehicleInfo.authState ? '已通过' : '未通过'"
								:flag="vehicleInfo.authState" />
						</view>
						<view class="carRight">
							<PannelTitle circle="false" words="解锁状态"
								:value="vehicleInfo.lockState==null ? '—': vehicleInfo.lockState?'已上锁' : '已解锁'"
								@ExchangeMessage="ExchangeMessage" :flag="vehicleInfo.lockState == 0" />
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 第一排盒子结束-->
		<!-- 选电模式开始 -->
		<view class="getModel">
			<view class="subtilte-only">
				<view class="title">
					<view class="icon"></view>
					<view class="name">选电模式</view>
					<view class="letter">POWER SELECTION MODE</view>
					<view class="handle-model">
						<view class="leftBtn" :class="[pamars.batChooseMode===0 ? 'active' : '']"
							@click="ChangeModel(0)">自动选电</view>
						<view class="leftBtn Rbtn" :class="[pamars.batChooseMode===1 ? 'active' : '']"
							@click="ChangeModel(1)">手动选电</view>
					</view>
				</view>
			</view>
			<view class="storeList">
				<!-- 电池列表信息 -->
				<BatteryInfo v-for="(item, index) in storeInfoList" :soc="item.soc"
					:chgState="item.chargerInfoVo.chgState" :chgEstimatedTime="item.chargerInfoVo.chgEstimatedTime"
					:key="index" :storeState="item.storeState" :storeCode="item.storeCode"
					:freezeState="item.freezeState" :comState="item.comState"
					:chargerComState="item.chargerInfoVo.comState" :BatterySelectAllArr="BatterySelectAllArr"
					:BatterySelected="BatterySelected" :IsSelect="BatteryIsSelectArr[index]" />
				<!-- 电池信息结束 -->
			</view>
		</view>
		<!-- 选电模式结束-->
		<!-- 底部开始 -->
		<view class="box-last">
			<view class="Exchange-done">
				<view class="subtilte-only">
					<view class="title">
						<view class="icon"></view>
						<view class="name">换电操作</view>
						<view class="letter">POWER EXCHANGE OPERATION</view>
						<view class="switch">
							<view class="uni-list-cell-db">{{powerChangeStatus?'开启中':'已关闭'}}</view>
							<switch color="#91FDB9" style="transform:scale(0.6)" @change="switchChange" checked />
						</view>
					</view>
				</view>
				<view class="Exchange-bottom">
					<view class="Exchange-times">
						<view class="Progress-btn" :class='!powerChangeStatus?"isshowactive":""' @click="BeginChangePower">开始换电</view>
						<view class="Exchange-status" v-if="showStore == 0">
							<view class="lock">
								<span>{{ swapProcess.forbidLockState ? '锁止已屏蔽' : ''}}</span>
								<span class="time">换电时长：<font>{{PlcChangerTime || '—'}}</font></span>
							</view>
							<view class="percent">
								<view class="percent-bar">
									<view class="bar">
										<view class="bar-green" :style="{ 'width': swapPercent + '%' }">
											<view class="bar-percent" :class="[swapPercent <15 ? 'bar-ten' : '']">
												{{ swapPercent }}%
											</view>
										</view>
									</view>
								</view>
								<view class="count-step">
									<font>{{swapProcess.step || 0}}</font>/{{swapProcess.plcStep || 0}}
								</view>
							</view>
							<view class="lock">
								<span></span>
								<span class="time">机器人工作时长：<font>{{PlcWorkTime || '—'}}</font></span>
							</view>
						</view>
						<view class="Exchange-status" v-if="showStore == 1">
							<view class="Exchange-status-left">
								<view class="Exchange-status-left-box">
									<text class="text1">仓位</text><text
										class="text2">{{TcInfoVoData.sourceCode}}—>{{TcInfoVoData.targetCode}}号仓位</text>
								</view>
								<view class="Exchange-status-left-box">
									<text class="text1">电池状态</text><text
										class="text2">{{TcInfoVoData.chargerState?'充电中':'未充电'}}</text>
								</view>
							</view>
							<view class="Exchange-status-left">
								<view class="Exchange-status-left-box">
									<text class="text1">动作流程</text><text
										class="text2">{{TcInfoVoData.actionFlow || '-'}}</text>
								</view>
								<view class="Exchange-status-left-box">
									<text class="text1">工作时长</text><text class="text2">{{warehouse || '-'}}</text>
								</view>
							</view>
						</view>

						<view class="Exchange-status" v-if="showStore == 2">
							<view class="Exchange-status-left">
								<view class="Exchange-status-left-box change-store">
									<text class="text1">仓位</text><text
										class="text2">{{xfTargetCodeData.xfTargetCode}}号仓位</text>
								</view>
								<view class="Exchange-status-left-box">
									<text class="text1">电池状态</text><text
										class="text2">{{xfTargetCodeData.chargerState?'充电中':'未充电'}}</text>
								</view>
							</view>
							<view class="Exchange-status-left">
								<view class="Exchange-status-left-box">
									<text class="text1">动作流程</text><text
										class="text2">{{xfTargetCodeData.actionFlow || '-'}}</text>
								</view>
								<view class="Exchange-status-left-box">
									<text class="text1">工作时长</text><text class="text2">{{changeWareHouse || '-'}}</text>
								</view>
							</view>
						</view>








					</view>
					<view class="Exchange-handle">
						<view class="handle" :class='!powerChangeStatus?"isshowactive":""' @click="HandleIsLock(1)">锁止屏蔽</view>
						<view class="handle" :class='!powerChangeStatus?"isshowactive":""' @click="HandleChangeStore">调仓</view>
						<view class="handle" :class='!powerChangeStatus?"isshowactive":""' @click="PausePLC(1)">急停</view>
						<view class="handle" :class='!powerChangeStatus?"isshowactive":""' @click="HandleFireStore">消防换仓</view>
						<view class="handle" :class='!powerChangeStatus?"isshowactive":""' @click="HandleIsLock(0)">锁止放开</view>
						<view class="handle" :class='!powerChangeStatus?"isshowactive":""' @click="PausePLC(6)">中止</view>
					</view>
				</view>
			</view>
			<view class="Exchange-log">
				<view class="subtilte-only">
					<view class="title">
						<view class="icon"></view>
						<view class="name">换电日志</view>
						<view class="letter">POWER EXCHANGE OPERATION</view>
						<!-- <view class="log-descript">支持手动急停充电机，倒计时1分钟</view> -->
					</view>
				</view>
				<view class="log_bottom">
					<scroll-view scroll-y="true" class="scroll_x">
						<view class="log-list" v-for="item in logList" :key="item.id">
							<view class="log-times" :class="[item.remark=='error'?'logRed':'']">{{item.createTime}}</view>
							<view class="log-info" :class="[item.remark=='error'?'logRed':'']">{{item.content}}</view>
						</view>
					</scroll-view>

				</view>
			</view>

		</view>
		<!-- 底部结束 -->
		<!-- 顶部公共提示信息 -->
		<uni-popup ref="Exchangepopup" type="message">
			<uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 顶部提示信息结束-->
		<!--在线、编辑车辆抽屉 -->
		<uni-drawer ref="carlineDrawer" mode="right" :width="400" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<PublicDrawer :flag="isDrawer" title="在线车辆" @closeDrawer="closeDrawer" v-if="isDrawer">
					<view class="carPosition">
						<view class="CarnoData" v-if="CarlineList.length==0"></view>
						<view class="Carlist" v-for="item in CarlineList" :key="item.id">
							<view class="carDetail">
								<view class="plateNumber">
									<view class="icon">
										<image src="/static/change/car.png"></image>
									</view>
									<view class="pNumber">{{item.vehiclePlate}}</view>
								</view>
								<view class="vinMa">
									<view>VIN码</view>
									<view>{{item.vehicleVin}}</view>
								</view>
								<view class="vinMa">
									<view>熄火状态</view>
									<view>{{item.keyState}}</view>
								</view>

								<view class="vinMa">
									<view>解锁状态</view>
									<view>{{item.lockState?'已上锁':'已解锁'}}</view>
								</view>

							</view>
						</view>
					</view>
				</PublicDrawer>
				<PublicDrawer :flag="isDrawer" title="编辑车牌" @HandleEditPlate="HandleEditPlate"
					:plate="vehicleInfo.plate" @closeDrawer="closeDrawer" v-if="!isDrawer">
					<view class="carPosition">
						<view class="carForm">
							<view>编辑车牌号：</view>
							<input class="uni-input" type="text" v-model="plate" placeholder="请输入车牌号" />
						</view>
					</view>
				</PublicDrawer>
			</scroll-view>
		</uni-drawer>
		<!-- 在线、编辑车辆抽屉结束-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupMessage: '成功消息',
				popupType: 'success',
				robotInfoVo: {}, //机器人状态对象
				vehicleInfo: {}, //车辆信息对象
				batteryInfo: {}, //电池信息对象
				swapProcess: {}, //换电进度对象
				storeInfoList: [], //电池仓列表数组
				logList: [], //日志列表
				BatteryIsSelectArr: [false, false, false, false, false, false, false, false], //存储电池的选中状态
				BatteryFullStatus: true, //切换满电、亏点电池状态
				BatterySelectAllArr: [], //存储所有选中的电池仓位号
				CarlineList: [], //在线车辆列表
				pamars: {
					batChooseMode: 0,
					batChosenIndex: 0,
					startMode: 0,
					userId: 1,
					userName: 'admin'
				}, //开始换电参数
				ws: null, //ws连接对象
				timer: null, //ws连接
				isDrawer: true, //切换抽屉显示内容
				plate: '—', //弹窗车牌号
				powerChangeStatus: true,
				isSelectstoreState: [], //选择的仓位存储电池状态
				showStore: 0, //0换电展示 1调仓展示  2换仓展示
				TcInfoVoData: {}, //调仓信息对象
				xfTargetCodeData: {}, //消防换仓对象
				heartbeatTimer:null,
				onMessageTime:null,
			}
		},
		mounted() {
			this.onMessageTime = new Date();
			this.InitWs()
			this.heartbeatTimer = setInterval(()=>{
				let newDate = new Date();
				if(newDate-this.onMessageTime>3000){
					if(this.ws!=null){
						this.ws.close()
						this.ws=null
					}
				}
			},3000)
		},
		onUnload() {
			console.log('onUnload')
			if(this.timer!=null){
				clearInterval(this.timer)
				this.timer = null
			}
			if(this.ws!=null){
				this.ws.close()
				this.ws=null
			}
			if(this.heartbeatTimer!=null){
				this.heartbeatTimer.close()
				this.heartbeatTimer=null
			}
		},
		computed: {
			//换电时长
			PlcChangerTime() {
				if (this.swapProcess.swapStartTime) {
					let end_time = this.$moment()
					let seconds = end_time.diff(this.swapProcess.swapStartTime, "seconds")
					return parseInt(seconds / 60) + '分' + (seconds % 60) + '秒'
				}
			},
			//机器人工作时长
			PlcWorkTime() {
				if (this.swapProcess.plcStartTime) {
					let end_time = this.$moment()
					let seconds = end_time.diff(this.swapProcess.plcStartTime, "seconds")
					return parseInt(seconds / 60) + '分' + (seconds % 60) + '秒'
				}
			},
			//调仓工作时长
			warehouse() {
				if (this.TcInfoVoData.startTime) {
					let end_time = this.$moment()
					let seconds = end_time.diff(this.TcInfoVoData.startTime, "seconds")
					return parseInt(seconds / 60) + '分' + (seconds % 60) + '秒'
				}
			},
			//消防换仓工作时长
			changeWareHouse() {
				if (this.xfTargetCodeData.startTime) {
					let end_time = this.$moment()
					let seconds = end_time.diff(this.xfTargetCodeData.startTime, "seconds")
					return parseInt(seconds / 60) + '分' + (seconds % 60) + '秒'
				}
			},
			//换电百分比
			swapPercent() {
				if (this.swapProcess.plcPercentage) {
					return this.swapProcess.plcPercentage
				} else {
					return 0
				}
			},
			//换电解锁状态
			swapIsLock() {
				switch (this.swapProcess.lockState) {
					case true:
						return '已上锁'
					case false:
						return '已解锁'
					default:
						return '—'
				}
			},
			//机器人状态
			PlcState() {
				switch (this.robotInfoVo.robotState) {
					case 1:
						return ['/static/change/green.png', '', '就绪']
					case 2:
						return ['/static/change/blue.png', 'isblue', '运行']
					case 3:
						return ['/static/change/yellow.png', 'isflag', '完成']
					case 4:
						return ['/static/change/yellow.png', 'isflag', '故障']
					case 5:
						return ['/static/change/yellow.png', 'isflag', '中止']
					default:
						return ['/static/change/yellow.png', 'isflag', '未就绪']
				}
			},
			//机器人模式
			PlcMode() {
				switch (this.robotInfoVo.exchangeMode) {
					case 0:
						return '无效';
					case 1:
						return '手动模式';
					case 2:
						return '自动模式';
					case 3:
						return '单步模式';
				}
			},
		},
		methods: {

			//修改车牌号提交
			HandleEditPlate(plate) {
				let that = this
				if (this.$checks.validateLicensePlateNumber(this.plate)) {
					this.$http.EditPlate(this.plate)
						.then(res => {
							if (res.code === 0) {
								that.ExchangeMessage('success', '修改成功!')
								that.closeDrawer()
							} else {
								that.ExchangeMessage('error', '修改失败!')
							}
						}).catch(err => {
							console.error(err)
						})
				} else {
					that.ExchangeMessage('warn', '请填写新能源车牌号！')
				}

			},
			closeDrawer() {
				this.$refs.carlineDrawer.close();
			},
			//顶部公共消息提示
			ExchangeMessage(type, message) {
				this.popupType = type
				this.popupMessage = message ? message : '后端接口404错误!'
				this.$refs.Exchangepopup.open()
			},
			//切换换电模式(0自动、1手动)
			ChangeModel(id) {
				let that = this
				let modelText = id === 1 ? '手动' : '自动'
				uni.showModal({
					title: `请确认选电模式切换为${modelText}?`,
					content: '',
					success: function(res) {
						if (res.confirm) {
							that.$http.setMode(id + '').then(res => {
								if (res.code === 0) {
									that.pamars.batChooseMode = id === 1 ? 1 : 0
								}
								that.ExchangeMessage(res.code === 0 ? 'success' : 'error',
									res.code === 0 ? '选电模式切换成功!' : '选电模式切换失败!')
							})
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})
			},
			//开始换电
			BeginChangePower() {
				if (this.powerChangeStatus) {
					if (this.pamars.batChooseMode === 1) {
						//手动模式下传仓位号参数

						if (this.BatterySelectAllArr.length !== 1 || this.BatterySelectAllArr[0].storeState !== 1) {
							this.ExchangeMessage('warn', '请手动选择一个电池进行换电!')
							return
						} else {
							this.pamars.batChosenIndex = this.BatterySelectAllArr[0].storeCode
						}
					} else {
						this.pamars.batChosenIndex = 0
						if (this.BatterySelectAllArr.length !== 0) {
							this.ExchangeMessage('warn', '自动换电不用选择电池,请取消选中的电池!')
							return
						}
					}
					const pamars = this.pamars
					let that = this
					uni.showModal({
						title: '请确认站控发起换电?',
						content: '',
						success: function(res) {
							if (res.confirm) {
								// that.ExchangeMessage('success', '换电指令已下发，请等待!')
								that.$http.beginSwap(pamars)
									.then(res => {
										that.clearStore()
										that.ExchangeMessage(res.code === 0 ? 'success' : 'error',
											res.code === 0 ? '发起换电成功!' : '发起换电失败!')
									})
									.catch(err => {
										console.error(err)
									})
							} else if (res.cancel) {
								return false
								//用户点击取消按钮触发
							}
						}
					})
				} else {
					this.PowerChangeStatusTips()
				}
			},
			//switch开关
			switchChange(e) {
				this.powerChangeStatus = e.detail.value
			},
			//实时车辆弹窗
			ShowCarline(pamars) {
				this.$refs.carlineDrawer.open();
				if (pamars == 'line') {
					this.getCarOnline()
					this.isDrawer = true
				} else {
					this.isDrawer = false
					this.plate = pamars
				}
			},
			//已连接站控车辆列表
			getCarOnline() {
				this.$http.CarOnline().then(res => {
					console.log(res, 'pppres')
					this.CarlineList = res.data; //[{vehicleVin:123,keyState:2,vehiclePlate:"渝AFB3182"}]
					this.CarlineList.forEach(item => {
						if (item.keyState == 0) {
							item.keyState = '熄火'
						} else if (item.keyState == 1) {
							item.keyState = '未点火'
						} else if (item.keyState == 2) {
							item.keyState = '启动'
						} else {
							item.keyState = '-'
						}
					})
				})
			},
			//切换满电、亏电电池信息
			ChangeBattery(id) {
				this.BatteryFullStatus = id === 1 ? true : false
			},
			//锁止屏蔽、放开
			HandleIsLock(islock) {
				if (this.powerChangeStatus) {
					let that = this
					let lockTest = islock ? '锁止屏蔽' : '锁止放开'
					uni.showModal({
						title: `请确认${lockTest}`,
						content: '',
						success: function(res) {
							if (res.confirm) {
								that.$http.EditforbidLock(islock + '')
									.then(res => {
										if (res.code === 0) {
											that.ExchangeMessage('success', islock ? '屏蔽成功' : '放开成功')
										} else {
											that.ExchangeMessage('error', islock ? '屏蔽失败' : '放开失败')
										}
									}).catch(err => {
										console.error(err)
									})
							} else if (res.cancel) {
								return false
								//用户点击取消按钮触发
							}
						}
					})
				} else {
					this.PowerChangeStatusTips()
				}
			},
			//急停、中止
			PausePLC(isStop) {
				if (this.powerChangeStatus) {
					let that = this
					const text = isStop == 1 ? '急停机器人' : '中止机器人'
					uni.showModal({
						title: `请确认${text}?`,
						content: '',
						success: function(res) {
							if (res.confirm) {
								that.$http.plcStop(isStop + '')
									.then(res => {
										if (res.code === 0) {
											that.ExchangeMessage('success', isStop == 1 ? '急停成功' : '中止成功')
										} else {
											that.ExchangeMessage('error', isStop == 1 ? '急停失败' : '中止失败')
										}
									}).catch(err => {
										console.error(err)
									})
							} else if (res.cancel) {
								return false
								//用户点击取消按钮触发
							}
						}
					})
				} else {
					this.PowerChangeStatusTips()
				}

			},
			//选择电池仓位数
			BatterySelected(CurrentStore) {
				this.$set(this.BatteryIsSelectArr, CurrentStore.storeCode - 1, !this.BatteryIsSelectArr[CurrentStore
					.storeCode - 1]) //选中电池取反
				if (this.BatteryIsSelectArr[CurrentStore.storeCode - 1]) {
					this.BatterySelectAllArr = [...this.BatterySelectAllArr, CurrentStore] //将选中的电池放入数组中
				} else {
					this.BatterySelectAllArr = this.BatterySelectAllArr.filter(item => item.storeCode != CurrentStore
						.storeCode) //将取消选中的电池从数组中移除
				}
				if (this.BatterySelectAllArr.length === 3) {
					this.$set(this.BatteryIsSelectArr, this.BatterySelectAllArr[0].storeCode - 1, false)
					this.BatterySelectAllArr.shift() //删除第一个元素
				}
				// console.log(this.BatterySelectAllArr)
			},
			//开始调仓
			HandleChangeStore() {
				let that = this
				if (this.powerChangeStatus) {
					let source = 0
					let target = 0
					if (this.BatterySelectAllArr.length === 2) {
						source = this.BatterySelectAllArr[0].storeState ? 1 : 0
						target = this.BatterySelectAllArr[1].storeState ? 1 : 0
					}
					if (this.BatterySelectAllArr.length !== 2 || source == target) {
						that.ExchangeMessage('warn', '请选择一个电池和一个空仓位!')
						return
					} else if (this.BatterySelectAllArr[0].getChgState == 2 || this.BatterySelectAllArr[1].getChgState ==
						2) {
						that.ExchangeMessage('warn',
							`【${this.BatterySelectAllArr[0].storeState===1?this.BatterySelectAllArr[0].storeCode:this.BatterySelectAllArr[1].storeCode}】号仓位电池未断电,请断电后在进行调仓!`
						)
					} else {
						const params = {
							sourceCode: this.BatterySelectAllArr[0].storeState === 1 ? this.BatterySelectAllArr[0]
								.storeCode : this.BatterySelectAllArr[1].storeCode, //选有电池的仓位号
							targetCode: this.BatterySelectAllArr[1].storeState !== 1 ? this.BatterySelectAllArr[1]
								.storeCode : this.BatterySelectAllArr[0].storeCode //选空仓的仓位号
						}
						uni.showModal({
							title: '',
							content: `请确认将【${params.sourceCode}】号仓位电池移至【${params.targetCode}号】仓位?`,
							success: function(res) {
								if (res.confirm) {
									// that.ExchangeMessage('success', '调仓指令已下发，请等待!')
									that.$http.RuleChangestorage(params)
										.then(res => {
											if (res.code === 0) {
												that.clearStore()
											}
											that.ExchangeMessage(res.code === 0 ? 'success' : 'error', res
												.code === 0 ? '发起调仓成功!' : '发起调仓失败!')
										}).catch(err => {
											console.error(err)
										})
								} else if (res.cancel) {
									return false
									//用户点击取消按钮触发
								}
							}
						})
					}
				} else {
					this.PowerChangeStatusTips()
				}
			},
			//消防换仓
			HandleFireStore() {
				let that = this
				if (this.powerChangeStatus) {
					if (this.BatterySelectAllArr.length !== 1 || this.BatterySelectAllArr[0].storeState !== 1) {
						this.ExchangeMessage('warn', '请选择一个电池操作消防换仓!')
					} else if (this.BatterySelectAllArr[0].getChgState == 2) {
						that.ExchangeMessage('warn', `【${this.BatterySelectAllArr[0].storeCode}】号仓位电池未断电,请断电后在进行消防换仓!`)
					} else {
						const params = {
							targetCode: this.BatterySelectAllArr[0].storeCode
						}
						uni.showModal({
							title: '',
							content: `请确认消防换仓,将【${that.BatterySelectAllArr[0].storeCode}】号仓位电池移至消防仓?`,
							success: function(res) {
								if (res.confirm) {
									// that.ExchangeMessage('success', '消防换仓指令已下发，请等待!')
									that.$http.FireChangestorage(params)
										.then(res => {
											if (res.code === 0) {
												that.clearStore()
											}
											that.ExchangeMessage(res.code === 0 ? 'success' : 'error',
												res.code === 0 ? '发起消防换仓成功!' : '发起消防换仓失败!')
										}).catch(err => {
											console.error(err)
										})
								} else if (res.cancel) {
									return false
									//用户点击取消按钮触发
								}
							}
						})
					}
				} else {
					this.PowerChangeStatusTips()
				}
			},
			//换电操作开关提示公用方法
			PowerChangeStatusTips() {
				this.ExchangeMessage('warn', '请先开启换电操作!')
			},
			//清空选择的仓位
			clearStore() {
				this.BatterySelectAllArr = []
				this.BatteryIsSelectArr = [false, false, false, false, false, false, false, false]
			},
			//websocket连接函数
			InitWs() {
				if (this.ws != null) {
					this.ws.close()
					this.ws = null
				}
				if (this.timer != null) {
					clearInterval(this.timer)
					this.timer = null
				}
				let token = this.$storage.getJson('token');
				if (token == null) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
					return false;
				}
				this.ws = uni.connectSocket({
					url: this.$config.web_socket_url + token,
					header: {
						'content-type': 'application/json'
					},
					complete: () => {}
				})
				this.ws.onOpen(() => {
					console.log('socket连接成功')
					let msg = {
						type: "page",
						payload: "power-change-monitoring"
					}
					this.ws.send({
						data: JSON.stringify(msg)
					})
				})
				this.ws.onMessage((res) => {
					this.onMessageTime = new Date();
					
					let d = JSON.parse(res.data)
					console.log(d)
					// uni.hideLoading()
					//电池仓位列表
					if (d.storeInfoList) {
						this.storeInfoList = d.storeInfoList
					}
					//日志列表
					if (d.logList) {
						this.logList = d.logList.reverse()
					}
					// 车辆信息
					if (d.vehicleInfo) {
						this.vehicleInfo = d.vehicleInfo
					}
					// 电池信息
					if (d.batteryInfo) {
						this.batteryInfo = d.batteryInfo
					}
					//机器人状态
					if (d.robotInfoVo) {
						this.robotInfoVo = d.robotInfoVo
					}
					//换电进度
					if (d.swapProcess) {
						this.swapProcess = d.swapProcess
					}
					//选电模式
					if (d.batChooseMode >= 0) {
						this.pamars.batChooseMode = d.batChooseMode
					}
					//调仓
					if (d.sourceCode && d.targetCode) {
						this.TcInfoVoData = {
							sourceCode: d.sourceCode,
							targetCode: d.targetCode,
							actionFlow: d.actionFlow,
							startTime: d.startTime,
							chargerState: d.chargerState,
						}
						this.showStore = 1;
					} else {
						this.showStore = 0
					}
					//消防换仓
					if (d.xfTargetCode) {
						this.xfTargetCodeData = {
							xfTargetCode: d.xfTargetCode,
							chargerState: d.chargerState,
							startTime: d.startTime,
							actionFlow: d.actionFlow,
						}
						this.showStore = 2;
					} else {
						this.showStore = 0
					}
				})
				// 监听WebSocket关闭事件
				this.ws.onClose(() => {
					console.log('WebSocket连接已关闭！')
				})
				this.ws.onError(() => {
					console.log("WebSocket连接错误")
				})
				if(this.timer == null){
					//检查断开重连
					this.timer = setInterval(() => {
						// if (this.ws==null || this.ws.readyState != 1) {
						// 	this.ws.close()
						// 	this.ws = null
						// 	console.log('检查断开重连')
						// 	this.InitWs()
						// }
						if(this.ws==null){
							console.log('ws为null,检查断开重连')
							this.InitWs()
						}else if(this.ws.readyState != 1){
							this.ws.close()
							this.ws = null
							console.log('未连接成功，检查断开重连')
							this.InitWs()
						}
					}, 2000)
				}
				
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import './index.scss';

	.carPosition {
		// margin-top: 76px;

		.carForm {
			display: flex;
			justify-items: flex-end;

			view:first-child {
				font-weight: 400;
				color: rgba(153, 174, 197, 0.65);
				font-size: 14px;
				flex: 1;
				text-align: right;
				line-height: 34px;
			}

			.uni-input {
				width: 245px;
				height: 34px;
				background: rgba(255, 255, 255, 0);
				border-radius: 2px;
				border: 1px solid #263042;
				text-indent: 15px;
				font-size: 14px;
				font-weight: 400;
				color: #FFFFFF;
			}

		}

		.CarnoData {
			width: 274px;
			height: 227px;
			background-image: url('/static/change/noData.png');
			background-size: 100% 100%;
			margin: 20px 43px;
		}

		.Carlist {
			display: flex;
			flex-direction: column;
			width: 100%;

			.carDetail {
				width: 360px;
				height: 169px;
				border-radius: 8px;
				margin-bottom: 16px;
				background-image: url('/static/change/car-bg.png');
				background-size: 100% 100%;
				box-sizing: border-box;
				padding: 20px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.plateNumber {
					display: flex;
					align-items: center;
					height: 24px;
					line-height: 24px;

					.icon {
						margin-right: 8px;
					}

					.pNumber {
						font-size: 16px;
						font-weight: 600;
						color: #FFFFFF;
					}

					image {
						width: 18px;
						height: 18px;
						vertical-align: middle;
						margin-bottom: 3px;
					}
				}

				.vinMa {
					display: flex;

					view:first-child {
						width: 60px;
						font-size: 14px;
						font-weight: 400;
						color: rgba(153, 174, 197, 0.65);
					}

					view:last-child {
						flex: 1;
						font-size: 14px;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.85);
					}
				}
			}
		}
	}

	.status-only {
		display: flex;
		width: 100%;
		align-items: center;

		.circle {
			width: 24px;
			height: 24px;
			margin-right: 4px;

			image {
				width: 24px;
				height: 24px;
			}
		}

		.descript {
			font-size: 14px;
			font-weight: 500;
			width: 78px;
			color: rgba(153, 174, 197, 0.65);
			text-shadow: 0px 0px 4px rgba(39, 69, 201, 0.5);
		}

		.carTitle {
			width: 68px !important;
		}

		.frameText {
			color: #C7D2DF;
			text-shadow: 0px 0px 4px #0027D8;
		}

		.frame {
			flex: 1;
			position: relative;
			height: 32px;
			text-indent: 15px;
			font-size: 14px;
			font-weight: 500;
			color: #91FDB9;
			line-height: 32px;
			text-shadow: 0px 0px 4px #0027D8;
			border: 1px solid #334568;
			box-sizing: border-box;

			.shinning {
				position: absolute;
				border: 1px solid #c9f8ff;
				border-radius: 1px;
				left: -1px;
				top: -1px;
			}

			.editCar {
				cursor: pointer;
				position: absolute;
				right: 20px;
				top: 3px;
				width: 18px;
				height: 18px;

				img {
					width: 18px;
					height: 18px;
				}
			}

			.isflag {
				color: #ED7735;
				text-shadow: 0px 0px 4px rgba(39, 69, 201, 0.5);
			}

			.isblue {
				color: #148CFA;
			}

			.btn {
				display: flex;
				position: absolute;
				right: 15px;
				top: 5px;

				button {
					width: 48px;
					height: 28px;
					background: #91FDB9;
					border-radius: 2px 2px 2px 2px;
					font-size: 16px;
					font-weight: 400;
					line-height: 28px;
					text-align: center;
					border: none;
					padding: 0;
					color: black;
				}

				button:hover {
					background: #69b889;
				}
			}
		}
	}

	.subtilte-only {
		display: flex;
		flex-direction: column;
		border-top: $lineColor solid 1px;
		border-bottom: $lineColor solid 1px;
		width: 100%;

		.title {
			width: 100%;
			background-color: $titColor;
			margin: 1px 0px;
			height: 24px;
			display: flex;

			.icon {
				width: 17px;
				height: 10px;
				background-image: url('/static/public/ico2.png');
				background-size: 100% 100%;
				margin-left: 2px;
			}

			.name {
				font-size: 16px;
				margin-left: -5px;
				height: 24px;
				line-height: 22px;
				font-weight: 600;
				letter-spacing: 1px;
				text-shadow: 0 0 2px #1753ce, 0 0 2px #1753ce, 0 0 2px #1753ce, 0 0 2px #1753ce;
				color: white;
			}

			.letter {
				color: #2A3855;
				font-size: 10px;
				margin-left: 5px;
				padding-top: 5px;
				font-weight: 600;
			}

			.switch {
				margin-left: auto;
				color: white;
				height: 20px;
				font-size: 12px;
				width: 100px;
				display: flex;
				align-items: center;

				uni-switch {
					margin-top: 3px;
				}
			}

			.log-descript {
				margin-left: auto;
				font-size: 12px;
				font-weight: 400;
				color: rgba(153, 174, 197, 0.65);
				line-height: 22px;
				padding-right: 26px;
			}
		}
	}
	.carLeft{
		color: #fff !important;
	}
	.carRight{
		color: #fff !important;
	}
	.isshowactive{
		color: rgba(153, 174, 197, 0.65) !important;
	}
	
</style>