湖里大屏(数字工地):完成塔吊弹框设备信息布局

This commit is contained in:
Jack 2022-08-19 11:48:35 +08:00
parent 079900b924
commit 4367edeb08
2 changed files with 60 additions and 78 deletions

View File

@ -391,34 +391,33 @@
<div class="dialogBlockContent"> <div class="dialogBlockContent">
<div class="blockTitle blockTitle2" :class="company == 'longguang' ? 'blockTitle3' : ''"> <div class="blockTitle blockTitle2" :class="company == 'longguang' ? 'blockTitle3' : ''">
<i v-if="company != 'longguang'"></i> <i v-if="company != 'longguang'"></i>
<!-- 设备信息 --> <!-- 设备信息 -->{{ $t('message.dataBoard.devInfo') }}
{{ $t('message.dataBoard.devInfo') }}
</div> </div>
<div class="deviceInfo"> <div class="deviceInfo">
<!-- 设备名称 --> <!-- 设备名称 -->
<p> <p>
{{ $t('message.dataBoard.devName2') + ':' }} {{ $t('message.dataBoard.devName2') + ':' }}
{{ towerBasicInfo.tower ? towerBasicInfo.tower.devName : '--' }} {{ (towerBasicInfo.tower || {}).devName || '--' }}
</p> </p>
<!-- 设备编号 --> <!-- 设备编号 -->
<p> <p>
{{ $t('message.dataBoard.devCode') + ':' }} {{ $t('message.dataBoard.devCode') + ':' }}
{{ towerBasicInfo.tower ? towerBasicInfo.tower.devSn : '--' }} {{ (towerBasicInfo.tower || {}).devSn || '--' }}
</p> </p>
<!-- 设备备案号 --> <!-- 设备备案号 -->
<p> <p>
{{ $t('message.dataBoard.devAQ') + ':' }} {{ $t('message.dataBoard.devAQ') + ':' }}
{{ towerBasicInfo.tower ? towerBasicInfo.tower.registNo : '--' }} {{ (towerBasicInfo.tower || {}).registNo || '--' }}
</p> </p>
<!-- 生产厂家 --> <!-- 生产厂家 -->
<p> <p>
{{ $t('message.dataBoard.manufacturer') + ':' }} {{ $t('message.dataBoard.manufacturer') + ':' }}
{{ towerBasicInfo.tower ? towerBasicInfo.tower.factoryName : '--' }} {{ (towerBasicInfo.tower || {}).factoryName || '--' }}
</p> </p>
<p v-if="company == 'longguang'"> <p v-if="company == 'longguang'">
<!-- 总包单位 --> <!-- 总包单位 -->
{{ $t('message.dataBoard.mainContractor') + ':' }} {{ $t('message.dataBoard.mainContractor') + ':' }}
{{ towerBasicInfo.tower ? towerBasicInfo.tower.generalContractorsName : '--' }} {{ (towerBasicInfo.tower || {}).generalContractorsName || '--' }}
</p> </p>
</div> </div>
<!-- '塔吊操作人员':'驾驶员信息' --> <!-- '塔吊操作人员':'驾驶员信息' -->
@ -429,12 +428,7 @@
<!-- 驾驶员信息 --> <!-- 驾驶员信息 -->
<vue-scroll v-if="towerBasicInfoDriverList.length > 0" style="height: 130px; margin-bottom: 10px"> <vue-scroll v-if="towerBasicInfoDriverList.length > 0" style="height: 130px; margin-bottom: 10px">
<!-- driverIdCardidCard--> <!-- driverIdCardidCard-->
<div <div class="driverInfo" v-for="(item, index) in towerBasicInfo.driverList" :key="index">
class="driverInfo"
v-for="(item, index) in towerBasicInfo.driverList"
v-if="company == 'longguang' || item.idCard == towerCurrentInfo.driverIdCard"
:key="index"
>
<img <img
@click="openImg(fileUrl + item.fieldAcquisitionUrl)" @click="openImg(fileUrl + item.fieldAcquisitionUrl)"
v-if="item.fieldAcquisitionUrl" v-if="item.fieldAcquisitionUrl"
@ -551,11 +545,7 @@
<div class="boltDetailsRight"> <div class="boltDetailsRight">
<div class="boltDetailsRight_top"> <div class="boltDetailsRight_top">
<div class="boltDetailsRight_top_item"> <div class="boltDetailsRight_top_item">
<p <p :class="{ alarmNumber: afterAnalysisDataInfo.alarmNum > 0 }">
:class="{
alarmNumber: afterAnalysisDataInfo.alarmNum > 0
}"
>
{{ afterAnalysisDataInfo.alarmNum }} {{ afterAnalysisDataInfo.alarmNum }}
</p> </p>
<p class="itemTitle"> <p class="itemTitle">
@ -581,12 +571,7 @@
<div class="boltDetailsRight_bottom"> <div class="boltDetailsRight_bottom">
<vue-scroll style="width: 100%; height: 130px"> <vue-scroll style="width: 100%; height: 130px">
<div class="bottom_list"> <div class="bottom_list">
<div <div v-for="(item, index) in afterAnalysisDataInfo.list" :key="index" class="listItem">
v-for="(item, index) in afterAnalysisDataInfo.list"
v-if="item.alarm == 1 || item.offLine == 1"
:key="index"
class="listItem"
>
<!-- 螺栓监测-螺栓 --> <!-- 螺栓监测-螺栓 -->
<div class="listItemName"> <div class="listItemName">
{{ $t('message.dataBoard.boltMonitoring') + '-' + $t('message.dataBoard.bolt') }}{{ item.nutNo }} {{ $t('message.dataBoard.boltMonitoring') + '-' + $t('message.dataBoard.bolt') }}{{ item.nutNo }}
@ -688,7 +673,7 @@
<p <p
id="arrow" id="arrow"
:style="{ :style="{
transform: `rotate(${towerCurrentInfo ? towerCurrentInfo.angle : ''}deg)` transform: `rotate(${(towerCurrentInfo || {}).angle || ''}deg)`
}" }"
> >
<span></span> <span></span>
@ -723,7 +708,7 @@
{{ $t('message.dataBoard.forearmLong') + ':' + $t('message.dataBoard.forearmInfo') }} {{ $t('message.dataBoard.forearmLong') + ':' + $t('message.dataBoard.forearmInfo') }}
</div> </div>
</span> </span>
{{ towerBasicInfo.tower ? towerBasicInfo.tower.forearmLength : '--' }} {{ (towerBasicInfo.tower || {}).forearmLength || '--' }}
m m
</p> </p>
<p> <p>
@ -741,7 +726,7 @@
<!-- 塔吊高塔吊基础表面到吊钩下端的垂直距离 --> <!-- 塔吊高塔吊基础表面到吊钩下端的垂直距离 -->
</div> </div>
</span> </span>
{{ towerBasicInfo.tower ? towerBasicInfo.tower.towerHeight : '--' }} {{ (towerBasicInfo.tower || {}).towerHeight || '--' }}
m m
</p> </p>
<p v-if="weightSet == 1"> <p v-if="weightSet == 1">
@ -759,7 +744,7 @@
<!-- 载重塔吊工作实时吊装重量 --> <!-- 载重塔吊工作实时吊装重量 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.loading : '--' }} kg {{ (towerCurrentInfo || {}).loading || '--' }} kg
</p> </p>
<p <p
:class="{ :class="{
@ -780,7 +765,7 @@
<!-- 幅度塔吊的回转中心到吊钩之间的水平距离 --> <!-- 幅度塔吊的回转中心到吊钩之间的水平距离 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.ranger : '--' }} m {{ (towerCurrentInfo || {}).ranger || '--' }} m
</p> </p>
<p :class="{ red: towerCurrentInfo.heightAlarm != 0 }" style="white-space: nowrap"> <p :class="{ red: towerCurrentInfo.heightAlarm != 0 }" style="white-space: nowrap">
<!-- '吊钩与大臂的垂直距离' --> <!-- '吊钩与大臂的垂直距离' -->
@ -798,13 +783,9 @@
<!-- 高度吊钩与大臂的垂直距离 --> <!-- 高度吊钩与大臂的垂直距离 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.height : '--' }} m {{ (towerCurrentInfo || {}).height || '--' }} m
</p> </p>
<p <p :class="{ red: towerCurrentInfo.obliguityXAlarm != 0 || towerCurrentInfo.obliguityYAlarm != 0 }">
:class="{
red: towerCurrentInfo.obliguityXAlarm != 0 || towerCurrentInfo.obliguityYAlarm != 0
}"
>
<span> <span>
<i <i
@mouseenter="showTitle6 = true" @mouseenter="showTitle6 = true"
@ -819,7 +800,7 @@
<!-- 角度塔吊大臂正北方的相对于水平夹角 --> <!-- 角度塔吊大臂正北方的相对于水平夹角 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.angle : '--' }} ° {{ (towerCurrentInfo || {}).angle || '--' }} °
</p> </p>
<p v-if="weightSet == 1" :class="{ red: towerCurrentInfo.momentAlarm != 0 }"> <p v-if="weightSet == 1" :class="{ red: towerCurrentInfo.momentAlarm != 0 }">
<span> <span>
@ -836,8 +817,7 @@
<!-- 力矩比起重机的起重能力是指起重量载荷与相应工作幅度的乘积 --> <!-- 力矩比起重机的起重能力是指起重量载荷与相应工作幅度的乘积 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.torqueRatio : '--' }} {{ (towerCurrentInfo || {}).torqueRatio || '--' }}%
%
</p> </p>
<p v-if="weightSet == 1"> <p v-if="weightSet == 1">
<span> <span>
@ -854,7 +834,7 @@
<!-- 载重比塔吊吊装的物体重量与此时小车幅度对应最大起重量的百分比 --> <!-- 载重比塔吊吊装的物体重量与此时小车幅度对应最大起重量的百分比 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.loadRatio : '--' }}% {{ (towerCurrentInfo || {}).loadRatio || '--' }}%
</p> </p>
</div> </div>
</div> </div>
@ -887,7 +867,7 @@
{{ $t('message.dataBoard.forearmLong') + ':' + $t('message.dataBoard.forearmInfo') }} {{ $t('message.dataBoard.forearmLong') + ':' + $t('message.dataBoard.forearmInfo') }}
</div> </div>
</span> </span>
{{ towerBasicInfo.tower ? towerBasicInfo.tower.forearmLength : '--' }} {{ (towerBasicInfo.tower || {}).forearmLength || '--' }}
m m
</p> </p>
<p> <p>
@ -905,7 +885,7 @@
<!-- 塔吊高塔吊基础表面到吊钩下端的垂直距离 --> <!-- 塔吊高塔吊基础表面到吊钩下端的垂直距离 -->
</div> </div>
</span> </span>
{{ towerBasicInfo.tower ? towerBasicInfo.tower.towerHeight : '--' }} {{ (towerBasicInfo.tower || {}).towerHeight || '--' }}
m m
</p> </p>
<p v-if="weightSet == 1"> <p v-if="weightSet == 1">
@ -923,7 +903,7 @@
<!-- 载重塔吊工作实时吊装重量 --> <!-- 载重塔吊工作实时吊装重量 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.loading : '--' }} {{ (towerCurrentInfo || {}).loading || '--' }}
kg kg
</p> </p>
<p <p
@ -945,7 +925,7 @@
<!-- 幅度塔吊的回转中心到吊钩之间的水平距离 --> <!-- 幅度塔吊的回转中心到吊钩之间的水平距离 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.ranger : '--' }} m {{ (towerCurrentInfo || {}).ranger || '--' }} m
</p> </p>
<p :class="{ red: towerCurrentInfo.heightAlarm != 0 }" style="white-space: nowrap"> <p :class="{ red: towerCurrentInfo.heightAlarm != 0 }" style="white-space: nowrap">
<span> <span>
@ -961,7 +941,7 @@
<!-- 高度吊钩与大臂的垂直距离 --> <!-- 高度吊钩与大臂的垂直距离 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.height : '--' }} m {{ (towerCurrentInfo || {}).height || '--' }} m
</p> </p>
<p <p
:class="{ :class="{
@ -982,7 +962,7 @@
<!-- 角度塔吊大臂正北方的相对于水平夹角 --> <!-- 角度塔吊大臂正北方的相对于水平夹角 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.angle : '--' }} ° {{ (towerCurrentInfo || {}).angle || '--' }} °
</p> </p>
<p v-if="weightSet == 1" :class="{ red: towerCurrentInfo.momentAlarm != 0 }"> <p v-if="weightSet == 1" :class="{ red: towerCurrentInfo.momentAlarm != 0 }">
<span> <span>
@ -999,7 +979,7 @@
<!-- 力矩比起重机的起重能力是指起重量载荷与相应工作幅度的乘积 --> <!-- 力矩比起重机的起重能力是指起重量载荷与相应工作幅度的乘积 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.torqueRatio : '--' }} {{ (towerCurrentInfo || {}).torqueRatio || '--' }}
% %
</p> </p>
<p v-if="weightSet == 1"> <p v-if="weightSet == 1">
@ -1017,18 +997,11 @@
<!-- 载重比塔吊吊装的物体重量与此时小车幅度对应最大起重量的百分比 --> <!-- 载重比塔吊吊装的物体重量与此时小车幅度对应最大起重量的百分比 -->
</div> </div>
</span> </span>
{{ towerCurrentInfo ? towerCurrentInfo.loadRatio : '--' }}% {{ (towerCurrentInfo || {}).loadRatio || '--' }}%
</p> </p>
</div> </div>
<div> <div>
<div <div style="margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;">
style="
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div class="blockTitle blockTitle2" :class="company == 'longguang' ? 'blockTitle3' : ''"> <div class="blockTitle blockTitle2" :class="company == 'longguang' ? 'blockTitle3' : ''">
<i v-if="company != 'longguang'"></i> <i v-if="company != 'longguang'"></i>
<!-- 塔吊视频 --> <!-- 塔吊视频 -->
@ -1067,15 +1040,10 @@
></videoModule> ></videoModule>
</div> </div>
</div> </div>
<div <div class="dialogDataBox2" :style="{ 'margin-top': company == 'longguang' ? '24px' : '100px' }">
class="dialogDataBox2"
:style="{
'margin-top': company == 'longguang' ? '24px' : '100px'
}"
>
<p> <p>
<span>{{ countDown }}</span <span>{{ countDown }}</span>
>s s
</p> </p>
<p> <p>
<!-- 倒计时刷新 --> <!-- 倒计时刷新 -->
@ -1364,22 +1332,13 @@
<vue-scroll style="width: 100%; height: 236px"> <vue-scroll style="width: 100%; height: 236px">
<template v-if="company == 'longguang' || item.idCard == lifterCurrentData.driverIdCard"> <template v-if="company == 'longguang' || item.idCard == lifterCurrentData.driverIdCard">
<div v-for="(item, index) in lifterInfo.driverList" :key="index" style="margin: 5px 0"> <div v-for="(item, index) in lifterInfo.driverList" :key="index" style="margin: 5px 0">
<div <div class="deviceInfo" style="display: inline-block; width: 50%; vertical-align: middle;">
class="deviceInfo" <p><!-- 姓名 -->{{ $t('message.dataBoard.name') + ':' }}{{ item.workerName }}</p>
style="display: inline-block; width: 50%; vertical-align: middle;" <p><!-- 年龄 -->{{ $t('message.dataBoard.age') + ':' }}{{ item.age }}</p>
>
<p>
<!-- 姓名 -->{{ $t('message.dataBoard.name') + ':' }}{{ item.workerName }}
</p>
<p>
<!-- 年龄 -->{{ $t('message.dataBoard.age') + ':' }}{{ item.age }}
</p>
<p> <p>
<!-- 特种证书编号 -->{{ $t('message.dataBoard.certificateNumber') + ':' }}{{ item.certificateNumber }} <!-- 特种证书编号 -->{{ $t('message.dataBoard.certificateNumber') + ':' }}{{ item.certificateNumber }}
</p> </p>
<p> <p><!-- 上岗时间 -->{{ $t('message.dataBoard.workTime') + ':' }}{{ item.enterDate }}</p>
<!-- 上岗时间 -->{{ $t('message.dataBoard.workTime') + ':' }}{{ item.enterDate }}
</p>
</div> </div>
<img <img
width="80" width="80"

View File

@ -1,6 +1,20 @@
<template> <template>
<el-dialog title="塔吊监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="elevatorDialog" @close="close"> <el-dialog title="塔吊监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="elevatorDialog" @close="close">
<div class="dllm"></div> <div class="dllm">
<div class="left">
<div class="card">
<div class="card-title">设备信息</div>
<div class="device">
<div class="info-item">设备名称</div>
<div class="info-item">设备编号</div>
<div class="info-item">设备备案号</div>
<div class="info-item">生产厂家</div>
</div>
</div>
</div>
<div class="center"></div>
<div class="right"></div>
</div>
</el-dialog> </el-dialog>
</template> </template>
@ -81,7 +95,9 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
z-index: 3; z-index: 3;
display: flex; display: flex;
flex-direction: column; .left {
width: 440px;
}
.card { .card {
.card-title { .card-title {
margin-bottom: 20px; margin-bottom: 20px;
@ -99,6 +115,13 @@ export default {
background-color: #6ce9f0; background-color: #6ce9f0;
} }
} }
.device {
padding-left: 14px;
height: 100px;
.info-item {
margin-bottom: 10px;
}
}
} }
} }
} }