hht-fujia-uni/pages/manage/dpsj.vue

<template>
	<view class="zd_container">
		<!-- 出库分拣 -->
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd-row">
				<view class="zd-col-12 stats_wrap">
					<view class="zd-row">
						<view class="stats_tip_nums">
							<view class="stats_tip">{{$t('label.NumJobsExecution')}}</view>
							<view class="stats_num">{{currentData.executingTasks}}</view>
						</view>
						<view class="stats_icon"></view>
					</view>
				</view>
				<view class="zd-col-12 stats_wrap">
					<view class="zd-row">
						<view class="stats_tip_nums">
							<view class="stats_tip">{{$t('label.NumJobsToday')}}</view>
							<view class="stats_num">{{currentData.todayTasks}}</view>
						</view>
						<view class="stats_icon"></view>
					</view>
				</view>
			</view>
			<view class="astats_wrap" v-for="(e, i) in currentList" :key="i">
				<view class="zd-row mgb10">
					<view class="hr_1">
						<text class="text-1">{{e.device_name}}</text>
						<text class="text-3" :style="{ backgroundColor: getStatusColor(e.status) }">{{e.status_name}}</text>
					</view>
					<!-- <uni-icons type="forward" size="26" color="#4e6ef2"></uni-icons> -->
				</view>
				<view class="text-2 mgb10">
					<text>{{e.start_point}}</text>
					<uni-icons type="arrow-right" size="26" color="#ff6a00"></uni-icons>
					<text>{{e.end_point}}</text>
				</view>
				<view v-show="e.fault" class="text-4 mgb10"><uni-icons type="info-filled" size="26" color="#ff6a00"></uni-icons>{{e.fault}}</view>
				<view class="zd-row hr_2">
					<view class="text-5">{{e.vehicle_code}}</view>
					<view class="elec-icon" :class="{'elec-icon_red': e.status === '7'}">
						<view class="elec-num" :style="{'width': e.electricity + '%'}"></view>
					</view>
					<view class="text-6" :class="{'text-6_red': e.status === '7'}">{{e.electricity}}%</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {bigscreenGetData} from '@/utils/getData.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				title: '',
				currentData: {},
				currentList: [],
				refreshTimer: null
			};
		},
		onLoad (options) {
			this.title = options.title
			this._bigscreenGetData()
			this.refreshTimer = setInterval(() => {
				this._bigscreenGetData()
			}, 30000)
		},
		onUnload() {
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
				this.refreshTimer = null
			}
		},
		methods: {
			getStatusColor(status) {
			  const colorMap = {
			    0: '#4e6ef2', // 正常
			    1: '#888888', // 关机
			    2: '#00c853', // 工作中
			    3: '#ffab00', // 交通管制
			    4: '#2196f3', // 任务等待
			    5: '#ff9800', // 充电中
			    6: '#f44336', // 故障中
			    7: '#ff5722'  // 电量低
			  };
			  return colorMap[status] || '#4e6ef2';
			},
			async _bigscreenGetData () {
				try {
					let res = await bigscreenGetData()
					if (res && res.data) {
						this.currentData = res.data.stats
						this.currentList = [...res.data.agvStatus]
					} else {
						this.currentData = {}
						this.currentList = []
					}
				} catch (e) {
					this.currentData = {}
					this.currentList = []
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.zd_content
	padding-bottom 20rpx
.stats_wrap
	background-color: #fff;
	border-radius: 10rpx;
	padding: 22rpx 0 22rpx 22rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 10rpx 2rpx rgba(0,0,0,.1);
	.stats_icon
		width 100rpx
		height 100rpx
		_bis('../../static/image/menu/RF10.png',auto,100%,center,center)
	&:last-child
		margin-left 20rpx
		.stats_icon
			_bis('../../static/image/menu/RF11.png',auto,100%,center,center)
.stats_tip_nums
	width calc(100% - 100rpx)
.stats_tip
	_font(34rpx, 40rpx, #333, 700,)
	white-space nowrap
	margin-bottom 20rpx
.stats_num
	_font(40rpx, 40rpx, #4e6ef2, 700,)
	white-space nowrap
.astats_wrap
	background-color: #fff;
	border-radius: 10rpx;
	padding: 22rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 10rpx 2rpx rgba(0,0,0,.1);
.hr_1
	display flex
	align-items center
	// width calc(100% - 30px)
.text-1
	_font(40rpx, 1, #333, 700,)
	padding-right 20rpx
.text-2
	display flex
	align-items center
	_font(34rpx,1, #666,,)
.text-3
	_font(34rpx,1, #fff,,)
	padding 6rpx 10rpx
	border-radius 10rpx
	background-color #4e6ef2
.text-4
	display flex
	align-items center
	_font(34rpx,1, #ff6a00,,)
.hr_2
	align-items center
.text-5
	min-width calc(100% - 160rpx)
	_font(34rpx,1, #666,,)
.text-6
	max-width 80rpx
	_font(30rpx,1, #666,,right)
	white-space nowrap
.elec-icon
	position relative
	width 70rpx
	height 36rpx
	border 2rpx solid #666
	border-radius 10rpx
	padding 6rpx
	&:after
		content ''
		position absolute
		right -10rpx
		top 50%
		transform translateY(-50%)
		width 10rpx
		height 14rpx
		background-color #666
.elec-num
	height 100%
	background-color #666
.elec-icon_red
	&.elec-icon
		border-color #ff5722
		&:after
			background-color #ff5722
		.elec-num
			background-color #ff5722
.text-6_red
	&.text-6
		color #ff5722
</style>