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

<template>
	<view class="content">
		<view class="Dataview">
			<SubTitle title="数据概览" titleEng="DATA OVERVIEW"></SubTitle>
			<view class="datalist">
				<view class="datablcok">
					<view>今日换电次数</view>
					<view class="icon-data">
						<view>
							<image src="/static/index/icon1.png"></image>
						</view>
						<view class="number">{{dataView.todaySwap ||'0'}}</view>
					</view>
					<view class="positon p-left"></view>
				</view>
				<view class="datablcok">
					<view>累计换电次数</view>
					<view class="icon-data">
						<view>
							<image src="/static/index/icon2.png"></image>
						</view>
						<view class="number">{{dataView.totalSwap ||'0'}}</view>
					</view>
					<view class="positon p-left"></view>
				</view>
				<view class="datablcok">
					<view>今日告警次数</view>
					<view class="icon-data">
						<view>
							<image src="/static/index/icon3.png"></image>
						</view>
						<view class="number">{{dataView.todayAlarm ||'0'}}</view>
					</view>
					<view class="positon p-left"></view>
				</view>
				<view class="datablcok">
					<view>告警总数(次)</view>
					<view class="icon-data">
						<view>
							<image src="/static/index/icon4.png"></image>
						</view>
						<view class="number">{{dataView.totalAlarm ||'0'}}</view>
					</view>
					<view class="positon p-left"></view>
				</view>
				<view class="datablcok">
					<view>消防告警(次)</view>
					<view class="icon-data">
						<view>
							<image src="/static/index/icon5.png"></image>
						</view>
						<view class="number">{{dataView.fireAlarm ||'0'}}</view>
					</view>
					<view class="positon p-left"></view>
				</view>
			</view>
		</view>
		<view class="equipment">
			<SubTitle title="设备状态" titleEng="DEVICE STATUS"></SubTitle>
			<view class="statusShow">
				<template v-if="stateList.length>0">
					<view class="status-top">
						<view class="positon p-left"></view>
						<view class="positon p-right"></view>
						<view class="positon p-b-left"></view>
						<view class="positon p-b-right"></view>
						<view class="title">
							<view class="first">
								<image src="/static/index/title-left.png"></image>
							</view>
							<view class="second">智能换电站</view>
							<view class="last">
								<image src="/static/index/title-right.png">
							</view>
						</view>
						<view class="line">
							<!-- <image src="/static/index/line.png"></image> -->
							<view class="sx"></view>
						</view>
					</view>
					<view class="stateList">
					<scroll-view scroll-x="true" class="scroll_x">
						<view>
							<view class="lineBox">
								<view class="line-child"  v-for="(item, index) in stateList.length"></view>
							</view>
							<view class="changeList">
								<view>
									<image :src="robotResult"></image>
								</view>
								<ChargerState v-for="(item,index) in stateList" :key="item.code" :chargerState="item.chargerState"></ChargerState>
							</view>
							<view class="borderList">
								<view></view>
								<view v-for="(item, index) in stateList.length"></view>
							</view>
							<view class="batteryList">
								<view></view>
								<BatteryState v-for="(item, index) in stateList" :key="item.code" :batteryState="item.batteryState"></BatteryState>
							</view>
						</view>
					</scroll-view>
				</view>
				</template>
			</view>
			<view class="status-description">
				<view class="positon p-left"></view>
				<view class="positon p-right"></view>
				<view class="positon p-b-left"></view>
				<view class="positon p-b-right"></view>
				<view class="status-list">
					<view class="plc-row">
						<view class="plc-status">
							<view>
								<image src="/static/index/status1.png"></image>
							</view>
							<view>机器人状态</view>
						</view>
						<IndexStatus text="未就绪" color="default"></IndexStatus>
						<IndexStatus text="就绪" color="green"></IndexStatus>
						<IndexStatus text="运行中" color="orange"></IndexStatus>
						<IndexStatus text="完成" color="orange"></IndexStatus>
						<IndexStatus text="故障" color="yellow"></IndexStatus>
						<IndexStatus text="中止" color="pink"></IndexStatus>
						<IndexStatus text="离线" color="default"></IndexStatus>
					</view>
					<view class="plc-row">
						<view class="plc-status">
							<view>
								<image src="/static/index/status2.png"></image>
							</view>
							<view>充电机状态</view>
						</view>
						<IndexStatus text="空闲" color="green"></IndexStatus>
						<IndexStatus text="准备充电" color="orange"></IndexStatus>
						<IndexStatus text="充电中" color="orange"></IndexStatus>
						<IndexStatus text="充电结束" color="green"></IndexStatus>
						<IndexStatus text="充电失败" color="yellow"></IndexStatus>
						<IndexStatus text="故障" color="yellow"></IndexStatus>
						<IndexStatus text="离线" color="default"></IndexStatus>
					</view>
					<view class="plc-row">
						<view class="plc-status">
							<view>
								<image src="/static/index/status1.png"></image>
							</view>
							<view>电池状态</view>
						</view>
						<IndexStatus text="故障" color="yellow"></IndexStatus>
						<IndexStatus text="有电池" color="green"></IndexStatus>
						<IndexStatus text="无电池" color="default"></IndexStatus>
					</view>
				</view>
				<view class="status-img">
					<image src="/static/index/status-bg.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ChargerState from './components/ChargerState'
	import BatteryState from './components/BatteryState'
	export default {
		components:{ChargerState,BatteryState},
		data() {
			return {
				dataView: {},
				robotState: 0,
				stateList: [],
				heartbeatTimer:null,
				onMessageTime:null,
				ws: null, //websuokit 链接器
			}
		},
		mounted() {
			this.onMessageTime = new Date();
			this.InitWs()
			this.heartbeatTimer = setInterval(()=>{
				let newDate = new Date();
				if(newDate-this.onMessageTime>8000){
					if(this.ws!=null){
						this.ws.close()
						this.ws=null
					}
				}
			},8000)
			this.getDataView()
		},
		destroyed(){
			clearInterval(this.timer)
			if(this.ws){
				this.ws.close()
			}
		},
		computed: {
			robotResult() {
				switch (this.robotState) {
					case 0:
						return '/static/index/plc-null.png'
					case 1:
						return '/static/index/plc-has.png'
					case 2:
						return '/static/index/plc-doing.png'
					case 3:
						return '/static/index/plc-doing.png'
					case 4:
						return '/static/index/plc-warn.png'
					case 5:
						return '/static/index/plc-over.png'
				}
			}
		},
		methods: {
			//数据概览
			getDataView() {
				this.$http.getoverview().then(res => {
					this.dataView = res.data
				})
			},
			InitWs() {
				uni.showLoading({
					title:'数据加载中...'
				})
				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('websocket连接成功')
					const wsMessage = {
						type: 'page',
						payload: 'PageIndex'
					}
					this.ws.send({
						data: JSON.stringify(wsMessage)
					})
				})
				this.ws.onMessage((res) => {
					this.onMessageTime = new Date();
					let d = JSON.parse(res.data)
					console.log(d)
					this.stateList = d.stateList
					this.robotState = d.robotState
					uni.hideLoading()
				})
				// 监听WebSocket关闭事件
				this.ws.onClose(() => {
					console.log('WebSocket连接已关闭！');
				})
				this.ws.onError(() => {
					console.log("WebSocket连接错误")
				})
				if(this.timer == null){
					//检查断开重连
					this.timer = setInterval(() => {
						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)
				}
			},
		},
		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
			}
		},
	}
</script>

<style lang="scss" scoped>
	.positon {
		position: absolute;
		width: 1px;
		height: 1px;
		background: #FFFFFF;

	}

	.p-left {
		left: -1px;
		top: -1px;
	}

	.p-right {
		right: -1px;
		top: -1px;
	}

	.p-b-left {
		left: -1px;
		bottom: -1px;
	}

	.p-b-right {
		right: -1px;
		bottom: -1px;
	}

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

		.Dataview {
			background-color: #111827;
			height: 129px;

			.datalist {
				margin: 20px;
				display: flex;
				justify-content: space-between;

				.datablcok {
					width: 180px;
					height: 60px;
					border: 1px solid #334568;
					color: rgba(153, 174, 197, 0.65);
					font-size: 12px;
					font-weight: 400;
					padding: 8px 12px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					position: relative;

					.icon-data {
						display: flex;
						margin-top: 6px;

						.number {
							font-size: 18px;
							font-weight: 600;
							color: #C7D2DF;
							line-height: 20px;
							text-indent: 5px;
						}

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

		.equipment {
			display: flex;
			flex-direction: column;
			margin-top: 16px;
			height: 567px;
			overflow: hidden;
			background-color: #111827;

			.statusShow {
				margin: 16px 20px;
				height: 386px;
				border: 1px solid #334568;
				box-sizing: border-box;
				padding: 20px 0px;
				position: relative;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.first {
						image {
							width: 304px;
							height: 70px;
						}
					}

					.second {
						width: 320px;
						height: 70px;
						background-image: url('/static/index/title.png');
						background-position: bottom;
						background-size: 100% 68px;
						font-weight: 600;
						color: #C7D2DF;
						font-size: 32px;
						letter-spacing: 1px;
						text-align: center;
						line-height: 70px;
					}

					.last {
						image {
							width: 305px;
							height: 70px;
						}
					}
				}

				.line {
					display: flex;
					justify-content: center;
					width: 100%;
					.sx{
						width: 1px;
						height: 28px;
						background-color: #334568;
					}
					image {
						width: 889px;
						height: 56px;
					}
				}
				.status-top{
					padding: 0px 20px;
				}
				.stateList{
					width: 980px;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					padding-left:20px;
					.scroll_x {
						width: 980px;
						height: 100%;
						// border: 1px solid red;
					
						::v-deep .uni-scroll-view-content {
							display: flex;
							view:first-child {
								.battery-info {
									margin-left: 0px;
								}
							}
						}
					}
					.lineBox{
						height: 28px;
						border-left: #334568 solid 1px;
						display: flex;
						margin-left: 36px;
						box-sizing: border-box;
						.line-child{
							width: 110px;
							height: 28px;
							border-top:#334568 solid 1px;
							border-right:#334568 solid 1px;
						}
					}
				}
				.changeList {
					display: flex;
					margin-top: 8px;
					image {
						width: 70px;
						height: 70px;
						padding-right: 41px;
					}
				}

				.batteryList {
					display: flex;
					justify-content: space-between;

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

					view {
						width: 70px;
						height: 70px;
					}

					view:first-child {
						visibility: hidden;
					}
				}

				.borderList {
					margin: 16px 0px;
					display: flex;
					justify-content: space-between;

					view {
						width: 70px;
						height: 28px;
						position: relative;
					}

					view:before {
						content: "";
						width: 0px;
						height: 28px;
						opacity: 1;
						border: 1px solid #334568;
						position: absolute;
						left: 50%;
					}

					view:first-child {
						visibility: hidden;
					}
				}
			}

			.status-description {
				border: 1px solid #334568;
				box-sizing: border-box;
				text-align: center;
				margin: 0px 20px;
				padding: 12px 16px;
				display: flex;
				justify-content: space-between;
				position: relative;

				.status-list {
					flex: 1;
					font-size: 12px;
					font-weight: 400;
					color: #7681AD;
					display: flex;
					height: 75px;
					justify-content: space-between;
					flex-direction: column;

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

					.plc-row {
						flex: 1;
						display: flex;
					}

					.plc-status {
						display: flex;
						height: 20px;
						line-height: 16px;
						align-items: center;
						width: 80px;

						image {
							margin-right: 4px;
							margin-top: 4px;
						}

						margin-right: 15px;
					}
				}

				.status-img {
					margin-top: 9px;

					image {
						width: 245px;
						height: 56px;
					}
				}
			}
		}
	}
</style>