add 大屏数据页
This commit is contained in:
204
pages/manage/dpsj.vue
Normal file
204
pages/manage/dpsj.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user