大屏(数字工地):使用 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>
<div class="list"> <div class="list">
<vue-scroll> <vue-scroll>
<div <template v-if="type === 'face'">
class="list-item" <div class="list-item" :class="item.deviceState == 2 ? 'offline' : 'online'" v-for="(item, index) in list" :key="index">
:class=" <span class="type" v-if="item.deviceState == 1">在线</span>
item.devonline !== undefined <span class="type" v-else>离线</span>
? item.devonline == 0 <p>{{ item.devName }}</p>
? 'offline' <span class="alarm">进场人数:{{ item.inTotalNum }}</span>
: 'online' <span class="alarm">出场人数:{{ item.outTotalNum }}</span>
: item.devOnline == 2 </div>
? 'offline' </template>
: 'online' <template v-else>
" <div
v-for="(item, index) in list" class="list-item"
:key="index" :class="
> item.devonline !== undefined ? (item.devonline == 0 ? 'offline' : 'online') : item.devOnline == 2 ? 'offline' : 'online'
<span class="type"> "
{{ v-for="(item, index) in list"
item.devonline !== undefined :key="index"
? item.devonline == 0 >
? '在线' <span class="type">
: '离线' {{ item.devonline !== undefined ? (item.devonline == 0 ? '在线' : '离线') : item.devOnline == 2 ? '离线' : '在线' }}
: item.devOnline == 2 </span>
? '离线' <p>{{ item.devName || item.deviceName }}</p>
: '在线' <span class="alarm">今日报警:{{ item.alarmNum || 0 }}</span>
}} </div>
</span> </template>
<p>{{ item.devName || item.deviceName }}</p>
<span class="alarm">今日报警:{{ item.alarmNum || 0 }}</span>
</div>
</vue-scroll> </vue-scroll>
</div> </div>
</div> </div>
@ -82,6 +79,10 @@ export default {
type: Array, type: Array,
required: true, required: true,
default: () => [] default: () => []
},
type: {
type: String,
default: ''
} }
} }
} }
@ -179,4 +180,4 @@ export default {
color: #f67f51; color: #f67f51;
} }
} }
</style> </style>

View File

@ -2241,50 +2241,19 @@
</el-dialog> </el-dialog>
</div> </div>
<div v-if="company != 'henan'" class="fullHeight aside"> <div v-if="company != 'henan'" class="fullHeight aside">
<div class="blockBox"> <DataCard
<!-- 人脸闸机 --> :data="{
<div class="blockTitle">{{ $t('message.companyDiagram.ufaceDev') }}</div> title: 'companyDiagram.ufaceDev',
<div class="blockContent"> countNum: ufaceList.length,
<div class="devInfoBox"> countLabel: 'ufaceDev',
<div class="item"> countImg: require('@/assets/images/dataBoard/uface.png'),
<img src="@/assets/images/dataBoard/uface.png" /> todayNum: ufaceInCount,
<div> todayLabel: 'todayInPeople',
<p class="num" style="color: #5181f6">{{ ufaceList.length }}</p> todayImg: require('@/assets/images/dataBoard/inpeople.png')
<p> }"
<!-- 人脸闸机总数 --> :list="ufaceList"
{{ $t('message.dataBoard.ufaceDev') }} type="face"
</p> ></DataCard>
</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>
<div class="blockBox"> <div class="blockBox">
<!-- AI分析 --> <!-- AI分析 -->
<div class="blockTitle">{{ $t('message.companyDiagram.AIAnalysis') }}</div> <div class="blockTitle">{{ $t('message.companyDiagram.AIAnalysis') }}</div>