zk-driver-wechat-applet/pages/monitoring/index.vue

<template>
	<view>
		<power-change-header></power-change-header>
		<view class="changeCurrent">
			<view class="info">
				<view><image src="../../static/icon7.png"></image></view>
				<view>{{currentDescript || '-'}}</view>
			</view>
			<view class="times">
				{{currentTime || '-'}} | {{plate || '-'}}
			</view>
		</view>
		<view class="timeline">
			<view class="timeinfo">
				<view class="list" v-for="(item,index) in swapStepList" :key="index">
					<view>{{$moment(item.seqTime).format("YYYY-MM-DD")}}</view>
					<view>{{$moment(item.seqTime).format("HH:mm:ss")}}</view>
				</view>
			</view>
			<view class="line">
				<uni-steps :options="swapStepList" :active="step" direction="column"></uni-steps>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swapStepList:this.$scan.swapStepList,
				step:this.$scan.swapStepList.length-1,
				currentDescript:'',
				currentTime:'',
				plate:'',
			}
		},

		methods: {
			InitWs(){
				console.log(this.$scan,8989)
				this.$scan.InitWs()
				setTimeout(()=>{
					this.swapStepList=this.$scan.swapStepList
					this.step=this.$scan.swapStepList.length-1
					this.currentDescript=this.$scan.swapStepList.slice(-1)[0].description,
					this.currentTime=this.$scan.swapStepList.slice(-1)[0].seqTime,
					this.plate=this.$scan.swapConfirmDTO.plate
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
.timeline{
	padding:0 58rpx;
	display: flex;
	margin-top: 60rpx;
	.timeinfo{
		display: flex;
		flex-direction: column;
		text-align: right;
		.list{
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 102rpx;
			color: #c9cdd4;
			font-size: 28rpx;
			view:first-child{
				color:#86909c;
			}
		}
	}
	.line{
		flex: 1;
	}
}
.changeCurrent{
	width: 690rpx;
	margin: 30rpx auto;
	height: 180rpx;
	background-image: url('@/static/change-bg.png');
	background-size: 100% 100%;
	padding: 25rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction:column;
	justify-content: space-around;
	.info{
		display: flex;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 36rpx;
		
		image{
			width: 60rpx;
			height: 60rpx;
			padding-right: 25rpx;
		}
		view:last-child{
			padding-top: 12rpx;
		}
	}
	.times{
		color:#ededed;
		text-indent: 10rpx;
	}
}
</style>