admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(数字工地)：完成升降机弹框动画

Browse Source
This commit is contained in:
Jack 2022-08-19 10:41:00 +08:00
parent 8b9ba57796
commit dd23115673
1 changed files with 83 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/projectAdmin/jlw/digitalSite/components/ElevatorDialog_.vue
View File

@ -1,46 +1,51 @@
<template>
<el-dialog title="升降机监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="elevatorDialog" @close="close">
<div class="dllm">
<div class="card">
<div class="card-title">实时数据</div>
<div class="environment">
<div class="env-item green" :class="{ red: environmentInfo.heightAlarm != 0 || environmentInfo.heightPreAlarm != 0 }">
<div class="value">{{ environmentInfo.height }}<span>m</span></div>
<div class="label">高度</div>
</div>
<div class="env-item">
<div class="value">{{ environmentInfo.height * 2 }}<span>%</span></div>
<div class="label">高度百分比</div>
</div>
<div class="env-item">
<div class="value">
{{ environmentInfo.floorNum || '--' }}/{{ (environmentInfo.lifter || {}).totalFloor || '--' }}<span>层</span>
<div class="env-animate">
<div class="card">
<div class="card-title">实时数据</div>
<div class="environment">
<div class="env-item green" :class="{ red: environmentInfo.heightAlarm != 0 || environmentInfo.heightPreAlarm != 0 }">
<div class="value">{{ environmentInfo.height }}<span>m</span></div>
<div class="label">高度</div>
</div>
<div class="label">当前楼层/总楼层</div>
</div>
<div class="env-item">
<div class="value">
{{ environmentInfo.runningState === 1 ? '上升' : environmentInfo.runningState === 2 ? '下降' : '停运' }}<span></span>
<div class="env-item">
<div class="value">{{ environmentInfo.height * 2 }}<span>%</span></div>
<div class="label">高度百分比</div>
</div>
<div class="env-item">
<div class="value">
{{ environmentInfo.floorNum || '--' }}/{{ (environmentInfo.lifter || {}).totalFloor || '--' }}<span>层</span>
</div>
<div class="label">当前楼层/总楼层</div>
</div>
<div class="env-item">
<div class="value">
{{ environmentInfo.runningState === 1 ? '上升' : environmentInfo.runningState === 2 ? '下降' : '停运' }}<span></span>
</div>
<div class="label">运行状态</div>
</div>
<div class="env-item green" :class="{ red: environmentInfo.obliguityXAlarm != 0 || environmentInfo.obliguityXPreAlarm != 0 }">
<div class="value">{{ environmentInfo.dipAngleX }}<span>°</span></div>
<div class="label">倾角X</div>
</div>
<div class="env-item green" :class="{ red: environmentInfo.obliguityYAlarm != 0 || environmentInfo.obliguityYPreAlarm != 0 }">
<div class="value">{{ environmentInfo.dipAngleY }}<span>°</span></div>
<div class="label">倾角Y</div>
</div>
<div class="env-item green" :class="{ red: environmentInfo.speedAlarm != 0 || environmentInfo.speedPreAlarm != 0 }">
<div class="value">{{ environmentInfo.speed }}<span>m/s</span></div>
<div class="label">当前速度</div>
</div>
<div class="env-item green" :class="{ red: environmentInfo.windSpeedAlarm != 0 || environmentInfo.windSpeedPreAlarm != 0 }">
<div class="value">{{ environmentInfo.windSpeed }}<span>m/s</span></div>
<div class="label">风速</div>
</div>
<div class="label">运行状态</div>
</div>
<div class="env-item green" :class="{ red: environmentInfo.obliguityXAlarm != 0 || environmentInfo.obliguityXPreAlarm != 0 }">
<div class="value">{{ environmentInfo.dipAngleX }}<span>°</span></div>
<div class="label">倾角X</div>
</div>
<div class="env-item green" :class="{ red: environmentInfo.obliguityYAlarm != 0 || environmentInfo.obliguityYPreAlarm != 0 }">
<div class="value">{{ environmentInfo.dipAngleY }}<span>°</span></div>
<div class="label">倾角Y</div>
</div>
<div class="env-item green" :class="{ red: environmentInfo.speedAlarm != 0 || environmentInfo.speedPreAlarm != 0 }">
<div class="value">{{ environmentInfo.speed }}<span>m/s</span></div>
<div class="label">当前速度</div>
</div>
<div class="env-item green" :class="{ red: environmentInfo.windSpeedAlarm != 0 || environmentInfo.windSpeedPreAlarm != 0 }">
<div class="value">{{ environmentInfo.windSpeed }}<span>m/s</span></div>
<div class="label">风速</div>
</div>
</div>
<div class="animate">
<div class="car"></div>
</div>
</div>
<div class="infos">
@ -169,6 +174,48 @@ export default {
color: #fff;
background-size: 100% 100%;
z-index: 3;
display: flex;
flex-direction: column;
.env-animate {
flex: 1;
display: flex;
> :nth-child(1) {
width: 1000px;
}
.animate {
position: relative;
margin: 60px auto 0;
width: 130px;
height: 420px;
background: url(~@/assets/images/dataBoard/lifter-1.png) no-repeat;
background-position-x: -30px;
.car {
position: absolute;
left: 76px;
bottom: 10px;
width: 38px;
height: 50px;
background: url(~@/assets/images/dataBoard/lifter-2.png);
background-size: 100%;
animation: car 1s forwards;
}
@keyframes car {
0% {
bottom: 10px;
}
100% {
bottom: 200px;
}
}
}
}
.infos {
height: 260px;
display: flex;
> div {
flex: 1;
}
}
.card {
.card-title {
margin-bottom: 20px;
@ -239,14 +286,6 @@ export default {
}
}
}
.infos {
height: 260px;
display: flex;
> div {
flex: 1;
}
}
}
.green {
color: #35d17e;