大屏(数字工地):使用 DataCard 组件优化人脸闸机代码

This commit is contained in:
Jack 2022-08-01 17:09:38 +08:00
parent 69a9f39f8f
commit ccfbe831a0
2 changed files with 43 additions and 73 deletions

View File

@ -26,34 +26,31 @@
</div>
<div class="list">
<vue-scroll>
<template v-if="type === 'face'">
<div class="list-item" :class="item.deviceState == 2 ? 'offline' : 'online'" v-for="(item, index) in list" :key="index">
<span class="type" v-if="item.deviceState == 1">在线</span>
<span class="type" v-else>离线</span>
<p>{{ item.devName }}</p>
<span class="alarm">进场人数:{{ item.inTotalNum }}</span>
<span class="alarm">出场人数:{{ item.outTotalNum }}</span>
</div>
</template>
<template v-else>
<div
class="list-item"
:class="
item.devonline !== undefined
? item.devonline == 0
? 'offline'
: 'online'
: item.devOnline == 2
? 'offline'
: 'online'
item.devonline !== undefined ? (item.devonline == 0 ? 'offline' : 'online') : item.devOnline == 2 ? 'offline' : 'online'
"
v-for="(item, index) in list"
:key="index"
>
<span class="type">
{{
item.devonline !== undefined
? item.devonline == 0
? '在线'
: '离线'
: item.devOnline == 2
? '离线'
: '在线'
}}
{{ item.devonline !== undefined ? (item.devonline == 0 ? '在线' : '离线') : item.devOnline == 2 ? '离线' : '在线' }}
</span>
<p>{{ item.devName || item.deviceName }}</p>
<span class="alarm">今日报警:{{ item.alarmNum || 0 }}</span>
</div>
</template>
</vue-scroll>
</div>
</div>
@ -82,6 +79,10 @@ export default {
type: Array,
required: true,
default: () => []
},
type: {
type: String,
default: ''
}
}
}

View File

@ -2241,50 +2241,19 @@
</el-dialog>
</div>
<div v-if="company != 'henan'" class="fullHeight aside">
<div class="blockBox">
<!-- 人脸闸机 -->
<div class="blockTitle">{{ $t('message.companyDiagram.ufaceDev') }}</div>
<div class="blockContent">
<div class="devInfoBox">
<div class="item">
<img src="@/assets/images/dataBoard/uface.png" />
<div>
<p class="num" style="color: #5181f6">{{ ufaceList.length }}</p>
<p>
<!-- 人脸闸机总数 -->
{{ $t('message.dataBoard.ufaceDev') }}
</p>
</div>
</div>
<div class="item">
<img src="@/assets/images/dataBoard/inpeople.png" />
<div>
<p class="num" style="color: #f67f51">{{ ufaceInCount }}</p>
<p>
<!-- 今日进场人数 -->
{{ $t('message.dataBoard.todayInPeople') }}
</p>
</div>
</div>
<div class="list-box">
<vue-scroll>
<div
class="list-item"
:class="item.deviceState == 2 ? 'offline' : 'online'"
v-for="(item, index) in ufaceList"
:key="index"
>
<span class="type" v-if="item.deviceState == 1">在线</span>
<span class="type" v-else>离线</span>
<p>{{ item.devName }}</p>
<span class="inNum">进场人数:{{ item.inTotalNum }}</span>
<span class="outNum">出场人数:{{ item.outTotalNum }}</span>
</div>
</vue-scroll>
</div>
</div>
</div>
</div>
<DataCard
:data="{
title: 'companyDiagram.ufaceDev',
countNum: ufaceList.length,
countLabel: 'ufaceDev',
countImg: require('@/assets/images/dataBoard/uface.png'),
todayNum: ufaceInCount,
todayLabel: 'todayInPeople',
todayImg: require('@/assets/images/dataBoard/inpeople.png')
}"
:list="ufaceList"
type="face"
></DataCard>
<div class="blockBox">
<!-- AI分析 -->
<div class="blockTitle">{{ $t('message.companyDiagram.AIAnalysis') }}</div>