大屏(数字工地):使用 DataCard 组件优化升降机设备代码

This commit is contained in:
Jack 2022-08-01 15:25:28 +08:00
parent faa99bb12d
commit 32fed83838

View File

@ -50,6 +50,7 @@
<div class="digitalSitePage fullHeight" v-if="bgUrl">
<!-- 侧边栏 -->
<div class="fullHeight aside">
<!-- 塔吊设备 -->
<DataCard
:data="{
title: 'companyDiagram.towerDev',
@ -62,105 +63,19 @@
}"
:list="towerList"
></DataCard>
<!-- 塔吊设备 -->
<div class="blockBox">
<div class="blockTitle">
{{ $t('message.companyDiagram.towerDev') }}
</div>
<div class="blockContent">
<div class="devInfoBox">
<div class="item">
<img src="@/assets/images/dataBoard/tower.png" alt="" />
<div>
<p class="num" style="color: #5181f6">{{ totalTowerDev }}</p>
<p>
<!-- 塔吊总数 -->
{{ $t('message.dataBoard.totalTowerDev') }}
</p>
</div>
</div>
<div class="item">
<img src="@/assets/images/dataBoard/alarmcount.png" alt="" />
<div>
<p class="num" style="color: #f67f51">
{{ totalDangerTowerDev }}
</p>
<p>
<!-- 今日报警总数 -->
{{ $t('message.dataBoard.todayAlarmCount') }}
</p>
</div>
</div>
<div class="list-box">
<vue-scroll>
<div
class="list-item"
:class="item.devonline == 0 ? 'offline' : 'online'"
v-for="(item, index) in towerList"
:key="index"
>
<span class="type" v-if="item.devonline != 0">在线</span>
<span class="type" v-else>离线</span>
<p>{{ item.devName }}</p>
<span v-if="item.alarmNum == ''" class="alarm"
>今日报警:0</span
>
<span v-else class="alarm"
>今日报警:{{ item.alarmNum }}</span
>
</div>
</vue-scroll>
</div>
</div>
</div>
</div>
<!-- 升降机设备 -->
<div class="blockBox" v-if="false">
<div class="blockTitle">
{{ $t('message.companyDiagram.lifterDev') }}
</div>
<div class="blockContent dataBoxContent">
<div class="devInfoBox">
<div class="item">
<img src="@/assets/images/dataBoard/lifter.png" alt="" />
<div>
<p class="num" style="color: #5181f6">{{ totalLifterDev }}</p>
<p>
<!-- 升降机总数 -->
{{ $t('message.dataBoard.totalLifterDev') }}
</p>
</div>
</div>
<div class="item">
<img src="@/assets/images/dataBoard/alarmcount.png" alt="" />
<div>
<p class="num" style="color: #f67f51">
{{ totalDangerLifterDev }}
</p>
<p>
<!-- 今日报警总数 -->
{{ $t('message.dataBoard.todayAlarmCount') }}
</p>
</div>
</div>
<div class="list-box">
<vue-scroll>
<div
class="list-item"
:class="item.devonline == 0 ? 'offline' : 'online'"
v-for="(item, index) in lifterList"
:key="index"
>
<span class="type" v-if="!item.devonline">在线</span>
<span class="type" v-else>离线</span>
<p>{{ item.devName }}</p>
<span class="alarm">今日报警:{{ item.alarmNum }}</span>
</div>
</vue-scroll>
</div>
</div>
</div>
</div>
<DataCard
:data="{
title: 'companyDiagram.lifterDev',
countNum: totalLifterDev,
countLabel: 'totalLifterDev',
countImg: require('@/assets/images/dataBoard/lifter.png'),
todayNum: totalDangerLifterDev,
todayLabel: 'todayAlarmCount',
todayImg: require('@/assets/images/dataBoard/alarmcount.png')
}"
:list="lifterList"
></DataCard>
<!-- 视频设备 -->
<div class="blockBox">
<div class="blockTitle">