admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
zhgdyun/src/views/projectAdmin/dataBoard/digitalSite/index.vue
Vce 545c8333d8 把临时车替换为长期车
2024-05-09 14:02:14 +08:00

5122 lines
173 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="fullHeight" style="position: relative">
<div
v-if="company != 'henan'"
class="floatBtn"
@click="showVideoDialog2 = true"
>
<img src="@/assets/images/bao.png" />
</div>
<div class="alarmList" v-show="showVideoDialog2">
<div class="alarmTitle">
<!-- 视频报警 -->
{{ $t('message.dataBoard.videoAlarm') }}
<i class="el-icon-minus" @click="showVideoDialog2 = false"></i>
</div>
<div class="transdata1">
<ul class="tody-table-header2">
<li>
<!-- 报警设备 -->
{{ $t('message.dataBoard.alarmDev') }}
</li>
<li>
<!-- 报警类型 -->
{{ $t('message.dataBoard.alarmType') }}
</li>
<li>
<!-- 报警时间 -->
{{ $t('message.dataBoard.alarmTime') }}
</li>
</ul>
<div id="detetion-box2" @mouseover="clearTimer" @mouseout="ScrollUp2">
<div id="detetion-con1">
<ul v-for="(item, index) in videoAlarmList" :key="index">
<li>{{ item.videoName }}</li>
<li>{{ item.eventName }}</li>
<li>{{ item.alarmTime }}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="digitalSitePage fullHeight" v-if="bgUrl">
<!-- 侧边栏 -->
<div class="fullHeight aside">
<!-- 塔吊设备 -->
<DataCard
:data="{
title: 'companyDiagram.towerDev',
countNum: totalTowerDev,
countLabel: 'totalTowerDev',
countImg: require('@/assets/images/dataBoard/tower.png'),
todayNum: totalDangerTowerDev,
todayLabel: 'todayAlarmCount',
todayImg: require('@/assets/images/dataBoard/alarmcount.png'),
}"
:list="towerList"
></DataCard>
<!-- 升降机设备 -->
<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">
{{ $t('message.companyDiagram.videoDev') }}
</div>
<div class="blockContent">
<div class="devInfoBox">
<div class="item">
<div class="videoCount">
<p>
<!-- 视频总数 -->
{{ $t('message.dataBoard.videoTotalCount') }}：
</p>
<p class="num" style="margin-left: 5px">
{{ videoCountList.totalDevNum }}
</p>
</div>
</div>
<div class="item">
<div class="onlineVideoCount">
<p>
<!-- 在线视频数 -->
{{ $t('message.dataBoard.onlineVideoCount') }}：
</p>
<p class="num" style="margin-left: 5px">
{{ videoCountList.onlineNum }}
</p>
</div>
</div>
<div class="list-box video">
<vue-scroll>
<div
style="
display: flex;
overflow: hidden;
flex-wrap: wrap;
justify-content: space-between;
"
>
<div
class="list-item"
:class="item.deviceState == 2 ? 'offline' : 'online'"
v-for="(item, index) in videoCountList.videoList"
:key="index"
style="width: 160px; margin-right: 15px"
>
<span class="type" v-if="item.deviceState == 1"
>在线</span
>
<span class="type" v-else>离线</span>
<p>{{ item.name }}</p>
</div>
</div>
</vue-scroll>
</div>
</div>
</div>
</div>
</div>
<div
class="mapContent"
:class="company == 'longguang' ? 'lgMapContent' : ''"
>
<vue-scroll v-show="!showVideoDialog">
<div class="mapUrl">
<img
:src="bgUrl"
style="width: 100%; height: auto; position: absolute; top: 0px; left: 0px;"
class="bgPackImg"
ref="bgPackImg"
@load="countBoxSize"
/>
<div
v-for="(item, index) in pointList"
class="point"
:key="index"
:style="{
top: item.mapY / imgHeightScale + 'px',
left: item.mapX / imgWidthScale + 'px',
}"
@click="clickPoint(item)"
>
<img :src="getDevIcon(item.devType)" />
<div class="devName">{{ item.name }}</div>
</div>
<!-- 人脸闸机弹框 -->
<FaceGate
v-if="showFaceDevDialog"
:close="() => (showFaceDevDialog = false)"
:data="{ ...faceDevDialogData }"
></FaceGate>
<!-- 环境设备弹框 -->
<div class="environBox pointDialog_s" v-show="showEnvironDialog">
<!-- 实时数据 -->
<div class="title">
{{ environDevDetail.name }} -
{{ $t('message.dataBoard.realData') }}
<span class="closeBtn" @click="closeInterval()">
<i class="el-icon-close"></i>
</span>
</div>
<div class="pointDialogContent">
<div class="dialogDataBox">
<p>
<span>{{ plantCap.pm10 }}</span> ug/m³
</p>
<p>PM10</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ plantCap.pm25 }}</span> ug/m³
</p>
<p>PM2.5</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ plantCap.windspeed }}</span> m/s
</p>
<p>
<!-- 风速 -->
{{ $t('message.dataBoard.windSpeed') }}
</p>
</div>
<br />
<div class="dialogDataBox">
<p>
<span>{{ plantCap.winddirectionName }}</span>
</p>
<p>
<!-- 风向 -->
{{ $t('message.dataBoard.winddirection') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ plantCap.noise }}</span> db
</p>
<p>
<!-- 噪音 -->
{{ $t('message.dataBoard.noise') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ plantCap.temperature }}</span> ℃
</p>
<p>
<!-- 温度 -->
{{ $t('message.dataBoard.temperature') }}
</p>
</div>
<br />
<div class="dialogDataBox">
<p>
<span>{{ plantCap.humidity }}</span> %
</p>
<p>
<!-- 湿度 -->
{{ $t('message.dataBoard.humidity') }}
</p>
</div>
</div>
</div>
<!-- 电箱设备弹框 -->
<div
class="environBox pointDialog_s"
v-show="showEletricDialog"
>
<!-- 实时数据 -->
<div class="title">
{{ electricDevDetail.name }} -
{{ $t('message.dataBoard.realData') }}
<span class="closeBtn" @click="showEletricDialog = false">
<i class="el-icon-close"></i>
</span>
</div>
<div class="pointDialogContent">
<!-- 数据上传时间： -->
<p class="uploadTime">
{{ $t('message.dataBoard.dataUpdateTime') }}
{{ realTimeData ? realTimeData.uploadTime : '- -' }}
</p>
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.voltageA : '--'
}}</span>
V
</p>
<p>
<!-- A相电压 -->
{{ $t('message.dataBoard.voltageA') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.phaseCurrentA : '--'
}}</span>
A
</p>
<p>
<!-- A相电流 -->
{{ $t('message.dataBoard.phaseCurrentA') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.voltageB : '--'
}}</span>
V
</p>
<p>
<!-- B相电压 -->
{{ $t('message.dataBoard.voltageB') }}
</p>
</div>
<br />
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.phaseCurrentB : '--'
}}</span>
A
</p>
<p>
<!-- B相电流 -->
{{ $t('message.dataBoard.phaseCurrentB') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.voltageC : '--'
}}</span>
V
</p>
<p>
<!-- C相电压 -->
{{ $t('message.dataBoard.voltageC') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.phaseCurrentC : '--'
}}</span>
A
</p>
<p>
<!-- C相电流 -->
{{ $t('message.dataBoard.phaseCurrentC') }}
</p>
</div>
<br />
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.cableTemperatureA : '--'
}}</span>
℃
</p>
<p>
<!-- A线缆温度 -->
{{ $t('message.dataBoard.cableTemperatureA') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.cableTemperatureB : '--'
}}</span>
℃
</p>
<p>
<!-- B线缆温度 -->
{{ $t('message.dataBoard.cableTemperatureB') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.cableTemperatureC : '--'
}}</span>
℃
</p>
<p>
<!-- C线缆温度 -->
{{ $t('message.dataBoard.cableTemperatureC') }}
</p>
</div>
<br />
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.electricLeakage : '--'
}}</span>
mA
</p>
<p>
<!-- 漏电流 -->
{{ $t('message.dataBoard.electricLeakage') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
realTimeData ? realTimeData.ambientTemperature : '--'
}}</span>
℃
</p>
<p>
<!-- 环境温度 -->
{{ $t('message.dataBoard.ambientTemperature') }}
</p>
</div>
</div>
</div>
</div>
</vue-scroll>
<!-- 视频监测弹框 -->
<!-- 视频监测 -->
<el-dialog
@close="closeMap"
:title="$t('message.dataBoard.videoMontor')"
:visible.sync="showVideoDialog"
:modal-append-to-body="false"
width="95%"
top="0vh"
class="dialog_box"
>
<div class="pointDialog_l" v-if="showVideoDialog">
<i class="closeBtn el-icon-error" @click="closeVideoDialog"></i>
<div class="pointDialogContent">
<areaTree
@playParams="getPlayParams"
:activeLive="activeLiveData"
:videoType="1"
></areaTree>
<videoModule
class="playVideoBox playVideoBox2"
:class="{ isIframe: isIframe }"
:value="playList"
:type="'1x1'"
:displayBottomMod="true"
:winNumBer="9"
:autoplay="false"
:showCaptrue="false"
:showControl="false"
:showPlayback="false"
:hiddenSelectBox="true"
:scrrenPosition="0"
></videoModule>
</div>
</div>
</el-dialog>
<!-- 升降机监测弹框 -->
<!-- 升降机监测 -->
<el-dialog
class="dialog-wrapper"
@close="closeMap"
:title="$t('message.dataBoard.devTypeList')[3].name"
:visible.sync="showLifterDialog"
:modal-append-to-body="false"
width="95%"
top="0vh"
>
<div class="liferDialog pointDialog_l" v-if="showLifterDialog">
<i class="closeBtn el-icon-error" @click="closeTowerDialog"></i>
<div class="pointDialogContent">
<div class="left fullHeight">
<div class="dialogBlock leftTop">
<div class="dialogBlockContent">
<div class="blockTitle blockTitle2">
<i></i>
<!-- 实时数据 -->
{{ $t('message.dataBoard.realData') }}
</div>
<div class="leftTopInner">
<div class="realTimeInfo2 fullHeight">
<div
class="dialogDataBox"
:class="[
'normal',
{
alert:
lifterCurrentData.heightAlarm != 0 ||
lifterCurrentData.heightPreAlarm != 0,
},
]"
>
<p>
<span>{{ lifterCurrentData.height || '--' }}</span>
m
</p>
<p>
<!-- 高度 -->
{{ $t('message.dataBoard.height') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ floorNum || '--' }}</span> %
</p>
<!-- <p>速度</p> -->
<p>
<!-- 高度百分比 -->
{{ $t('message.dataBoard.heightPercentage') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>
{{ lifterCurrentData.floorNum || '--' }}/{{
(lifterInfo.lifter || {}).totalFloor || '--'
}}
</span>
{{ $t('message.dataBoard.floor') }}
<!-- 层 -->
</p>
<p>
<!-- 当前楼层/总楼层 -->
{{ $t('message.dataBoard.nowFloorOrAllFloor') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<!-- "上升" "下降" "停运"-->
<span>
{{
lifterCurrentData.runningState == 1
? $t('message.dataBoard.rise')
: lifterCurrentData.runningState == 2
? $t('message.dataBoard.decline')
: $t('message.dataBoard.Outage')
}}
</span>
</p>
<p>
<!-- 运行状态 -->
{{ $t('message.dataBoard.runningStatus') }}
</p>
</div>
<div
class="dialogDataBox"
:class="[
'normal',
{
alert:
lifterCurrentData.obliguityXAlarm != 0 ||
lifterCurrentData.obliguityXPreAlarm != 0,
},
]"
>
<p>
<span>{{
lifterCurrentData.dipAngleX || '--'
}}</span
>°
</p>
<p>
<!-- 倾角 -->
{{ $t('message.dataBoard.dip') }}X
</p>
</div>
<div
class="dialogDataBox"
:class="[
'normal',
{
alert:
lifterCurrentData.obliguityYAlarm != 0 ||
lifterCurrentData.obliguityYPreAlarm != 0,
},
]"
>
<p>
<span>{{
lifterCurrentData.dipAngleY || '--'
}}</span
>°
</p>
<p>
<!-- 倾角 -->
{{ $t('message.dataBoard.dip') }}Y
</p>
</div>
<div
class="dialogDataBox"
:class="[
'normal',
{
alert:
lifterCurrentData.speedAlarm != 0 ||
lifterCurrentData.speedPreAlarm != 0,
},
]"
>
<p>
<span>{{ lifterCurrentData.speed || '--' }}</span
>m/s
</p>
<p>
<!-- 当前速度 -->
{{ $t('message.dataBoard.nowSpeed') }}
</p>
</div>
<div
v-if="company != 'longguang'"
class="dialogDataBox"
:class="[
'normal',
{
alert:
lifterCurrentData.windSpeedAlarm != 0 ||
lifterCurrentData.windSpeedPreAlarm != 0,
},
]"
>
<p>
<span>{{
lifterCurrentData.windSpeed || '--'
}}</span>
m/s
</p>
<p>
<!-- 风速 -->
{{ $t('message.dataBoard.windSpeed') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ countDown }}</span> s
</p>
<p>
<!-- 倒计时刷新 -->
{{ $t('message.dataBoard.countDownFresh') }}
</p>
</div>
</div>
<div class="lifterRunBox fullHeight">
<img
src="@/assets/images/dataBoard/lifter-1.png"
ref="lifterHeight"
style="
width: 130px;
height: 417px;
position: relative;
bottom: 42px;
"
/>
<img
src="@/assets/images/dataBoard/lifter-2.png"
class="lifter2"
:style="{ bottom: showHeight + 'px' }"
style="width: 38px; height: 50px"
/>
</div>
</div>
</div>
</div>
<div class="leftBottom">
<div class="dialogBlock">
<div class="dialogBlockContent">
<div class="blockTitle blockTitle2">
<i></i>
<!-- 设备信息 -->
{{ $t('message.dataBoard.devInfo') }}
</div>
<div class="deviceInfo">
<p>
<!-- 设备名称： -->{{
$t('message.dataBoard.devName2') + ':'
}}{{ (lifterInfo.lifter || {}).devName || '--' }}
</p>
<p>
<!-- 设备编号： -->{{
$t('message.dataBoard.devCode') + ':'
}}{{ (lifterInfo.lifter || {}).devSn || '--' }}
</p>
<p>
<!-- 设备备案号： -->{{
$t('message.dataBoard.devAQ') + ':'
}}{{ (lifterInfo.lifter || {}).registNo || '--' }}
</p>
<p>
<!-- 设备最大载重： -->
{{ $t('message.dataBoard.devMaxLoad') + ':'
}}{{ (lifterInfo.lifter || {}).maxLoad || '--' }}kg
</p>
<p v-if="company == 'longguang'">
<!-- 总包单位： -->
{{ $t('message.dataBoard.mainContractor') + ':'
}}{{
(lifterInfo.lifter || {}).generalContractorsName ||
'--'
}}
</p>
</div>
</div>
</div>
<div class="dialogBlock">
<div class="dialogBlockContent">
<!-- '升降机操作人员':'司机信息' -->
<div class="blockTitle blockTitle2">
<i></i>
{{
company == 'longguang'
? $t('message.dataBoard.lifterPlayer')
: $t('message.dataBoard.driverInfo2')
}}
</div>
<template v-if="lifterInfoDriverList.length">
<vue-scroll style="width: 100%; height: 236px">
<template
v-if="
company == 'longguang' ||
item.idCard == lifterCurrentData.driverIdCard
"
>
<div
v-for="(item, index) in lifterInfo.driverList"
:key="index"
style="margin: 5px 0"
>
<div
class="deviceInfo"
style="
display: inline-block;
width: 50%;
vertical-align: middle;
"
>
<p>
<!-- 姓名： -->{{
$t('message.dataBoard.name') + ':'
}}{{ item.workerName }}
</p>
<p>
<!-- 年龄： -->{{
$t('message.dataBoard.age') + ':'
}}{{ item.age }}
</p>
<p>
<!-- 特种证书编号： -->{{
$t('message.dataBoard.certificateNumber') +
':'
}}{{ item.certificateNumber }}
</p>
<p>
<!-- 上岗时间： -->{{
$t('message.dataBoard.workTime') + ':'
}}{{ item.enterDate }}
</p>
</div>
<img
width="80"
height="90"
:src="fileUrl + item.fieldAcquisitionUrl"
@click="
openImg(fileUrl + item.fieldAcquisitionUrl)
"
style="
display: inline-block;
vertical-align: middle;
"
/>
</div>
</template>
</vue-scroll>
</template>
<div v-else style="text-align: center">
<img
style="height: 150px; margin-top: 40px"
src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
/>
<p>
<!-- 暂无数据 -->
{{ $t('message.dataBoard.nodata') }}
</p>
</div>
</div>
</div>
<div class="dialogBlock">
<div class="dialogBlockContent">
<div class="blockTitle blockTitle2">
<i></i>
<!-- 报警信息 -->
{{ $t('message.dataBoard.alarmInfo') }}
</div>
<div style="margin: 0px !important" class="deviceInfo">
<vue-scroll
v-if="lifterAlarmList.length != 0"
style="height: 200px"
>
<div
class="driverInfo"
v-for="(item, index) in lifterAlarmList"
:key="index"
>
<div class="TowerAlarm_item">
<p>
<!-- 设备名称: -->
{{ $t('message.dataBoard.devName2') + ':'
}}{{ item.devName }}
</p>
<p>
<!-- 报警时间： -->
{{ $t('message.dataBoard.alarmTime') + ':'
}}{{ transformTimestamp(item.addTime) }}
</p>
<p v-if="item.bottomAlarm" class="p1">
<!-- 下限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray3')[0] }}
</p>
<!-- <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>-->
<p v-if="item.fallAlarm">
{{ $t('message.dataBoard.alarmTypeArray3')[1] }}
<!-- 防坠器报警 -->
</p>
<p v-if="item.heightAlarm">
{{ $t('message.dataBoard.alarmTypeArray3')[2] }}
<!-- 高度报警 -->
</p>
<p v-if="item.motor1Alarm">
{{ $t('message.dataBoard.alarmTypeArray3')[3] }}
<!-- 1号电机报警 -->
</p>
<p v-if="item.motor2Alarm">
{{ $t('message.dataBoard.alarmTypeArray3')[4] }}
<!-- 2号电机报警 -->
</p>
<p v-if="item.motor3Alarm">
{{ $t('message.dataBoard.alarmTypeArray3')[5] }}
<!-- 3号电机报警 -->
</p>
<p v-if="item.obliguityXAlarm">
{{ $t('message.dataBoard.alarmTypeArray3')[6] }}
<!-- 倾角X报警 -->
</p>
<p v-if="item.obliguityYAlarm">
{{ $t('message.dataBoard.alarmTypeArray3')[7] }}
<!-- 倾角Y报警 -->
</p>
<p v-if="item.peopleCntAlarm">
{{ $t('message.dataBoard.alarmTypeArray3')[8] }}
<!-- 人数报警 -->
</p>
<p v-if="item.speedAlarm">
{{ $t('message.dataBoard.alarmTypeArray3')[9] }}
<!-- 速度报警 -->
</p>
<p v-if="item.topAlarm">
{{
$t('message.dataBoard.alarmTypeArray3')[10]
}}
<!-- 防冲顶报警 -->
</p>
<p v-if="item.weightAlarm">
{{
$t('message.dataBoard.alarmTypeArray3')[11]
}}
<!-- 载重报警 -->
</p>
<p v-if="item.windSpeedAlarm">
{{
$t('message.dataBoard.alarmTypeArray3')[12]
}}
<!-- 风速报警 -->
</p>
</div>
</div>
</vue-scroll>
<div v-else style="text-align: center">
<img
style="height: 150px; margin-top: 40px"
src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
/>
<p>
<!-- 暂无数据 -->
{{ $t('message.dataBoard.nodata') }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
<!-- 塔吊监测弹框 -->
<!-- 塔吊监测 -->
<el-dialog
id="lgStyle"
@close="closeMap"
:title="$t('message.dataBoard.towerMontor')"
:visible.sync="showTowerDialog"
:modal-append-to-body="false"
width="95%"
top="0vh"
>
<div class="towerDialog pointDialog_l" v-if="showTowerDialog">
<i
class="closeBtn"
:class="company == 'longguang' ? '' : 'el-icon-error'"
@click="closeTowerDialog"
></i>
<div
class="pointDialogContent"
:style="{
margin: company == 'longguang' ? '0 70px' : '40px 70px',
height: company == 'longguang' ? '100%' : 'calc(100% - 80px)',
}"
>
<div class="dialogBlock left">
<div class="dialogBlockContent">
<div
class="blockTitle blockTitle2"
:class="company == 'longguang' ? 'blockTitle3' : ''"
>
<i v-if="company != 'longguang'"></i>
<!-- 设备信息 -->{{ $t('message.dataBoard.devInfo') }}
</div>
<div class="deviceInfo">
<!-- 设备名称： -->
<p>
{{ $t('message.dataBoard.devName2') + ':' }}
{{ (towerBasicInfo.tower || {}).devName || '--' }}
</p>
<!-- 设备编号： -->
<p>
{{ $t('message.dataBoard.devCode') + ':' }}
{{ (towerBasicInfo.tower || {}).devSn || '--' }}
</p>
<!-- 设备备案号： -->
<p>
{{ $t('message.dataBoard.devAQ') + ':' }}
{{ (towerBasicInfo.tower || {}).registNo || '--' }}
</p>
<!-- 生产厂家： -->
<p>
{{ $t('message.dataBoard.manufacturer') + ':' }}
{{ (towerBasicInfo.tower || {}).factoryName || '--' }}
</p>
<p v-if="company == 'longguang'">
<!-- 总包单位： -->
{{ $t('message.dataBoard.mainContractor') + ':' }}
{{
(towerBasicInfo.tower || {}).generalContractorsName ||
'--'
}}
</p>
</div>
<!-- '塔吊操作人员':'驾驶员信息' -->
<div
class="blockTitle blockTitle2"
:class="company == 'longguang' ? 'blockTitle3' : ''"
>
<i v-if="company != 'longguang'"></i>
{{
company == 'longguang'
? $t('message.dataBoard.towerPlayer')
: $t('message.dataBoard.driverInfo')
}}
</div>
<!-- 驾驶员信息 -->
<vue-scroll
v-if="towerBasicInfo.driverList.length"
style="height: 130px; margin-bottom: 10px"
>
<div
class="driverInfo"
v-for="(item, index) in towerBasicInfo.driverList"
:key="index"
>
<img
@click="openImg(fileUrl + item.fieldAcquisitionUrl)"
v-if="item.fieldAcquisitionUrl"
:src="fileUrl + item.fieldAcquisitionUrl"
/>
<img v-else src="@/assets/images/profile_photo.png" />
<div>
<!-- 姓名： -->
<p>
{{ $t('message.dataBoard.name') + ':'
}}{{ item.workerName }}
</p>
<!-- 年龄： -->
<p>
{{ $t('message.dataBoard.age') + ':' }}{{ item.age }}
</p>
<!-- 特种证书编号： -->
<p>
{{ $t('message.dataBoard.certificateNumber') + ':'
}}{{ item.certificateNumber }}
</p>
<!-- 证件： -->
<p>
{{ $t('message.dataBoard.idCard') + ':'
}}{{ item.idCard }}
</p>
</div>
</div>
</vue-scroll>
<div v-else style="text-align: center">
<img
style="height: 130px; margin-bottom: 10px"
src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
/>
<p>
<!-- 暂无数据 -->
{{ $t('message.dataBoard.nodata') }}
</p>
</div>
<div
class="blockTitle blockTitle2"
v-if="company != 'longguang'"
>
<i></i>
<!-- 报警信息 -->
{{ $t('message.dataBoard.alarmInfo') }}
</div>
<div class="deviceInfo" v-if="company != 'longguang'">
<vue-scroll
v-if="TowerAlarmList.length"
style="height: 350px; margin-bottom: 10px"
>
<div
class="driverInfo"
v-for="(item, index) in TowerAlarmList"
:key="index"
>
<div class="TowerAlarm_item">
<p class="p1">
{{ $t('message.dataBoard.devName2') + ':'
}}{{ item.devName }}
</p>
<p class="p2">
{{ $t('message.dataBoard.alarmTime') + ':'
}}{{ transformTimestamp(item.alarmTime) }}
</p>
<p v-if="item.windSpeedAlarm" class="p1">
<!-- 风速报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[0] }}
</p>
<p v-if="item.environmentAlarm" class="p2">
<!-- 环境防撞报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[1] }}
</p>
<p v-if="item.heightAlarm" class="p1">
<!-- 高度上限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[2] }}
</p>
<p v-if="item.maxRangeAlarm" class="p2">
<!-- 幅度外限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[3] }}
</p>
<p v-if="item.minRangeAlarm" class="p1">
<!-- 幅度内限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[4] }}
</p>
<p v-if="item.momentAlarm" class="p2">
<!-- 力矩报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[5] }}
</p>
<p v-if="item.multiAlarm" class="p1">
<!-- 多机防撞报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[6] }}
</p>
<p v-if="item.negAngleAlarm" class="p2">
<!-- 逆时针回转限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[7] }}
</p>
<p v-if="item.posAngleAlarm" class="p1">
<!-- 顺时针回转限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[8] }}
</p>
</div>
</div>
</vue-scroll>
<div v-else style="text-align: center">
<img
style="height: 150px; margin-top: 100px"
src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
/>
<p>
<!-- 暂无数据 -->
{{ $t('message.dataBoard.nodata') }}
</p>
</div>
</div>
<div
class="blockTitle blockTitle2"
v-if="company == 'longguang'"
:class="company == 'longguang' ? 'blockTitle3' : ''"
>
<i v-if="company != 'longguang'"></i>
<!-- 群塔防碰撞 -->
{{ $t('message.dataBoard.groupOfTowersAgainstCollision') }}
</div>
<div
class="svg-box"
id="svg_box"
v-if="company == 'longguang'"
>
<svg
id="svg"
ref="svg"
class="svg-pan-zoom_viewport"
style="width: 100%; height: 100%"
/>
</div>
</div>
</div>
<div class="towerBox center2">
<div class="towerRunBox">
<img
v-if="nutHostId"
class="pointImg"
src="@/assets/images/operationInfo/arrow2.png"
/>
<div v-if="nutHostId" class="nutBox">
<img
class="nut"
@click="nutDetails"
src="@/assets/images/towericon/dff5abfe994eea124e60ef732de8e89.png"
/>
<span>
<!-- 螺栓检测 -->
{{ $t('message.dataBoard.boltDetection') }}
</span>
</div>
<div v-if="showBoltDetails" class="boltDetails">
<div class="boltDetailsTitle">
<!-- 螺栓监测 -->
{{ $t('message.dataBoard.boltMonitoring') }}
<i
class="closeBoltDetails el-icon-error"
@click="closeBoltDetails"
></i>
</div>
<div class="boltDetailsImg">
<img
src="@/assets/images/towericon/dff5abfe994eea124e60ef732de8e89.png"
/>
</div>
<div class="boltDetailsRight">
<div class="boltDetailsRight_top">
<div class="boltDetailsRight_top_item">
<p
:class="{
alarmNumber: afterAnalysisDataInfo.alarmNum > 0,
}"
>
{{ afterAnalysisDataInfo.alarmNum }}
</p>
<p class="itemTitle">
<!-- 报警数 -->
{{ $t('message.dataBoard.alarmNum') }}
</p>
</div>
<div class="boltDetailsRight_top_item">
<p>{{ afterAnalysisDataInfo.nutNum }}</p>
<p class="itemTitle">
<!-- 螺栓数 -->
{{ $t('message.dataBoard.boltNum') }}
</p>
</div>
<div class="boltDetailsRight_top_item">
<p>
{{
afterAnalysisDataInfo.nutNum -
afterAnalysisDataInfo.offLineNum
}}/{{ afterAnalysisDataInfo.nutNum }}
</p>
<p class="itemTitle">
<!-- 在线数 -->
{{ $t('message.dataBoard.onlineNum') }}
</p>
</div>
</div>
<div class="boltDetailsRight_bottom">
<vue-scroll style="width: 100%; height: 130px">
<div class="bottom_list">
<div
v-for="(
item, index
) in afterAnalysisDataInfo.list"
:key="index"
class="listItem"
>
<!-- 螺栓监测-螺栓 -->
<div class="listItemName">
{{
$t('message.dataBoard.boltMonitoring') +
'-' +
$t('message.dataBoard.bolt')
}}{{ item.nutNo }}
</div>
<!-- 安装位置: -->
<div class="listItemPosition">
<span>{{
$t('message.dataBoard.installLocation')
}}</span>
{{
$t('message.dataBoard.th') +
nutPosition(item.nutNo) +
$t('message.dataBoard.standardKnot')
}}
</div>
<div
v-if="afterAnalysisDataInfo.alarmNum"
class="listItemAlarm"
>
<span>
<!-- 报警时间: -->
{{ $t('message.dataBoard.alarmTime') + ':' }}
</span>
{{ item.alarmTime ? item.alarmTime : '--' }}
</div>
<div class="listItemOffLine">
<span>
<!-- 离线时间: -->
{{
$t('message.dataBoard.notOnlineTime') + ':'
}}
</span>
{{ item.offLineTime ? item.offLineTime : '--' }}
</div>
</div>
</div>
</vue-scroll>
</div>
</div>
</div>
<template v-if="company != 'longguang'">
<img
src="@/assets/images/towericon/towerBG.png"
ref="towerBG"
/>
<img
src="@/assets/images/towericon/1.png"
v-show="hideGoods"
class="xMove"
id="xMove"
:style="{ top: '70px', left: coordData.coordX + 'px' }"
/>
<img
src="@/assets/images/towericon/line.png"
class="lines"
id="line"
v-show="hideGoods"
:style="{
left: coordData.coordX + 8 + 'px',
height: coordData.lineLength + 'px',
top: '78px',
}"
/>
<div
class="moveBox"
id="moveBox"
v-show="hideGoods"
:style="{
top: coordData.coordY + 'px',
left: coordData.coordX - 6 + 'px',
}"
>
<img src="@/assets/images/towericon/hock.png" />
</div>
</template>
<!-- 龙光样式 -->
<img
src="@/assets/images/towericon/towerBG2.png"
ref="towerBG"
v-if="company == 'longguang'"
style="width: 496px; height: 484px"
/>
<!-- 龙光样式 -->
<img
src="@/assets/images/towericon/line2.png"
class="lines"
id="line2"
v-show="hideGoods && company == 'longguang'"
:style="{
left: coordData.coordX + 8 + 'px',
height: coordData.lineLength + 'px',
width: '5px',
top: '126px',
}"
/>
<!-- 龙光样式 -->
<div
class="moveBox"
id="moveBox2"
v-show="hideGoods && company == 'longguang'"
:style="{
top: coordData.coordY + 'px',
left: coordData.coordX - 10 + 'px',
}"
>
<img
style="width: 67px; height: 90px"
src="@/assets/images/towericon/hock2.png"
/>
</div>
</div>
<div
class="allTowerTrack flex"
ref="allTowerTrack"
:style="{ height: company == 'longguang' ? '16%' : '20%' }"
>
<div class="cycle cycle_border1">
<img src="@/assets/images/towericon/tower.png" />
<p
id="arrow"
:style="{
transform: `rotate(${
(towerCurrentInfo || {}).angle || ''
}deg)`,
}"
>
<span></span>
<span></span>
</p>
</div>
</div>
<div
class="blockTitle blockTitle2 blockTitle3"
v-if="company == 'longguang'"
>
<!-- 塔吊运行信息 -->
{{ $t('message.dataBoard.towerRunInfo') }}
<span class="tower-time">
<!-- 当前上传时间： -->
{{ $t('message.dataBoard.nowUpdateTime') + ':'
}}{{
((towerBasicInfo || {}).tower || {}).realTime || '--'
}}
</span>
</div>
<div
class="realTimeInfo towerCrane"
v-if="company == 'longguang'"
>
<!-- <p><span>安全吊重：</span> t</p> -->
<p>
<span>
<i
@mouseenter="showTitle1 = true"
@mouseleave="showTitle1 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 前臂长： -->
{{ $t('message.dataBoard.forearmLong') + ':' }}
<div v-if="showTitle1" class="showTitle1">
<!-- 前臂长：塔吊回转中心到大臂最前端的水平距离 -->
{{
$t('message.dataBoard.forearmLong') +
':' +
$t('message.dataBoard.forearmInfo')
}}
</div>
</span>
{{ (towerBasicInfo.tower || {}).forearmLength || '--' }} m
</p>
<p>
<span>
<i
@mouseenter="showTitle2 = true"
@mouseleave="showTitle2 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
{{ $t('message.dataBoard.towerHeight') + ':' }}
<!-- 塔吊高： -->
<div v-if="showTitle2" class="showTitle2">
{{
$t('message.dataBoard.towerHeight') +
':' +
$t('message.dataBoard.towerInfo')
}}
<!-- 塔吊高：塔吊基础表面到吊钩下端的垂直距离。 -->
</div>
</span>
{{ (towerBasicInfo.tower || {}).towerHeight || '--' }} m
</p>
<p v-if="weightSet == 1">
<span>
<i
@mouseenter="showTitle3 = true"
@mouseleave="showTitle3 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 载重： -->
{{ $t('message.dataBoard.load') + ':' }}
<div v-if="showTitle3" class="showTitle3">
{{
$t('message.dataBoard.load') +
':' +
$t('message.dataBoard.loadInfo')
}}
<!-- 载重：塔吊工作实时吊装重量 -->
</div>
</span>
{{ (towerCurrentInfo || {}).loading || '--' }} kg
</p>
<p
:class="{
red:
towerCurrentInfo.maxRangeAlarm != 0 ||
towerCurrentInfo.minRangeAlarm != 0,
}"
>
<span>
<i
@mouseenter="showTitle4 = true"
@mouseleave="showTitle4 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 幅度： -->
{{ $t('message.dataBoard.range') + ':' }}
<div v-if="showTitle4" class="showTitle4">
{{
$t('message.dataBoard.range') +
':' +
$t('message.dataBoard.rangeInfo')
}}
<!-- 幅度：塔吊的回转中心到吊钩之间的水平距离 -->
</div>
</span>
{{ (towerCurrentInfo || {}).ranger || '--' }} m
</p>
<p
:class="{ red: towerCurrentInfo.heightAlarm != 0 }"
style="white-space: nowrap"
>
<!-- '吊钩与大臂的垂直距离' -->
<!-- '高度' -->
<span>
<i
@mouseenter="showTitle5 = true"
@mouseleave="showTitle5 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
{{
company != 'longguang'
? $t('message.dataBoard.height')
: $t('message.dataBoard.heightInfo')
}}：
<div v-if="showTitle5" class="showTitle5">
{{
$t('message.dataBoard.height') +
':' +
$t('message.dataBoard.heightInfo')
}}
<!-- 高度：吊钩与大臂的垂直距离 -->
</div>
</span>
{{ (towerCurrentInfo || {}).height || '--' }} m
</p>
<p
:class="{
red:
towerCurrentInfo.obliguityXAlarm != 0 ||
towerCurrentInfo.obliguityYAlarm != 0,
}"
>
<span>
<i
@mouseenter="showTitle6 = true"
@mouseleave="showTitle6 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 角度： -->
{{ $t('message.dataBoard.angle') + ':' }}
<div v-if="showTitle6" class="showTitle6">
{{
$t('message.dataBoard.angle') +
':' +
$t('message.dataBoard.angleInfo')
}}
<!-- 角度：塔吊大臂正北方的相对于水平夹角 -->
</div>
</span>
{{ (towerCurrentInfo || {}).angle || '--' }} °
</p>
<p
v-if="weightSet == 1"
:class="{ red: towerCurrentInfo.momentAlarm != 0 }"
>
<span>
<i
@mouseenter="showTitle7 = true"
@mouseleave="showTitle7 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 力矩比： -->
{{ $t('message.dataBoard.torqueRatio') + ':' }}
<div v-if="showTitle7" class="showTitle7">
{{
$t('message.dataBoard.torqueRatio') +
':' +
$t('message.dataBoard.torqueRatioInfo')
}}
<!-- 力矩比：起重机的起重能力。是指起重量载荷与相应工作幅度的乘积 -->
</div>
</span>
{{ (towerCurrentInfo || {}).torqueRatio || '--' }}%
</p>
<p v-if="weightSet == 1">
<span>
<i
@mouseenter="showTitle8 = true"
@mouseleave="showTitle8 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 载重比： -->
{{ $t('message.dataBoard.loadRatio') + ':' }}
<div v-if="showTitle8" class="showTitle8">
{{
$t('message.dataBoard.loadRatio') +
':' +
$t('message.dataBoard.loadRatioInfo')
}}
<!-- 载重比：塔吊吊装的物体重量与此时小车幅度对应最大起重量的百分比 -->
</div>
</span>
{{ (towerCurrentInfo || {}).loadRatio || '--' }}%
</p>
</div>
</div>
<div class="dialogBlock right">
<div class="dialogBlockContent">
<div
class="blockTitle blockTitle2"
v-if="company != 'longguang'"
>
<i></i>
<!-- 塔吊运行信息 -->
{{ $t('message.dataBoard.towerRunInfo') }}
<span class="tower-time">
<!-- 当前上传时间： -->
{{ $t('message.dataBoard.nowUpdateTime') + ':'
}}{{
((towerBasicInfo || {}).tower || {}).realTime || '--'
}}
</span>
</div>
<div
class="realTimeInfo towerCrane"
v-if="company != 'longguang'"
>
<!-- <p><span>安全吊重：</span> t</p> -->
<p>
<span>
<i
@mouseenter="showTitle1 = true"
@mouseleave="showTitle1 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 前臂长： -->
{{ $t('message.dataBoard.forearmLong') + ':' }}
<div v-if="showTitle1" class="showTitle1">
<!-- 前臂长：塔吊回转中心到大臂最前端的水平距离 -->
{{
$t('message.dataBoard.forearmLong') +
':' +
$t('message.dataBoard.forearmInfo')
}}
</div>
</span>
{{ (towerBasicInfo.tower || {}).forearmLength || '--' }}m
</p>
<p>
<span>
<i
@mouseenter="showTitle2 = true"
@mouseleave="showTitle2 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 塔吊高： -->
{{ $t('message.dataBoard.towerHeight') + ':' }}
<div v-if="showTitle2" class="showTitle2">
{{
$t('message.dataBoard.towerHeight') +
':' +
$t('message.dataBoard.towerInfo')
}}
<!-- 塔吊高：塔吊基础表面到吊钩下端的垂直距离。 -->
</div>
</span>
{{ (towerBasicInfo.tower || {}).towerHeight || '--' }}m
</p>
<p v-if="weightSet == 1">
<span>
<i
@mouseenter="showTitle3 = true"
@mouseleave="showTitle3 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
<!-- 载重： -->
{{ $t('message.dataBoard.load') + ':' }}
<div v-if="showTitle3" class="showTitle3">
{{
$t('message.dataBoard.load') +
':' +
$t('message.dataBoard.loadInfo')
}}
<!-- 载重：塔吊工作实时吊装重量 -->
</div>
</span>
{{ (towerCurrentInfo || {}).loading || '--' }}kg
</p>
<p
:class="{
red:
towerCurrentInfo.maxRangeAlarm != 0 ||
towerCurrentInfo.minRangeAlarm != 0,
}"
>
<span>
<i
@mouseenter="showTitle4 = true"
@mouseleave="showTitle4 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
{{ $t('message.dataBoard.range') + ':' }}
<!-- 幅度： -->
<div v-if="showTitle4" class="showTitle4">
{{
$t('message.dataBoard.range') +
':' +
$t('message.dataBoard.rangeInfo')
}}
<!-- 幅度：塔吊的回转中心到吊钩之间的水平距离 -->
</div>
</span>
{{ (towerCurrentInfo || {}).ranger || '--' }} m
</p>
<p
:class="{ red: towerCurrentInfo.heightAlarm != 0 }"
style="white-space: nowrap"
>
<span>
<i
@mouseenter="showTitle5 = true"
@mouseleave="showTitle5 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
{{
company != 'longguang'
? $t('message.dataBoard.height')
: $t('message.dataBoard.heightInfo')
}}：
<div v-if="showTitle5" class="showTitle5">
{{
$t('message.dataBoard.height') +
':' +
$t('message.dataBoard.heightInfo')
}}
<!-- 高度：吊钩与大臂的垂直距离 -->
</div>
</span>
{{ (towerCurrentInfo || {}).height || '--' }} m
</p>
<p
:class="{
red:
towerCurrentInfo.obliguityXAlarm != 0 ||
towerCurrentInfo.obliguityYAlarm != 0,
}"
>
<span>
<i
@mouseenter="showTitle6 = true"
@mouseleave="showTitle6 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
{{ $t('message.dataBoard.angle') + ':' }}
<!-- 角度： -->
<div v-if="showTitle6" class="showTitle6">
{{
$t('message.dataBoard.angle') +
':' +
$t('message.dataBoard.angleInfo')
}}
<!-- 角度：塔吊大臂正北方的相对于水平夹角 -->
</div>
</span>
{{ (towerCurrentInfo || {}).angle || '--' }} °
</p>
<p
v-if="weightSet == 1"
:class="{ red: towerCurrentInfo.momentAlarm != 0 }"
>
<span>
<i
@mouseenter="showTitle7 = true"
@mouseleave="showTitle7 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
{{ $t('message.dataBoard.torqueRatio') + ':' }}
<!-- 力矩比： -->
<div v-if="showTitle7" class="showTitle7">
{{
$t('message.dataBoard.torqueRatio') +
':' +
$t('message.dataBoard.torqueRatioInfo')
}}
<!-- 力矩比：起重机的起重能力。是指起重量载荷与相应工作幅度的乘积 -->
</div>
</span>
{{ (towerCurrentInfo || {}).torqueRatio || '--' }}
%
</p>
<p v-if="weightSet == 1">
<span>
<i
@mouseenter="showTitle8 = true"
@mouseleave="showTitle8 = false"
style="color: #5ec6d0"
class="el-icon-question"
></i>
{{ $t('message.dataBoard.loadRatio') + ':' }}
<!-- 载重比： -->
<div v-if="showTitle8" class="showTitle8">
{{
$t('message.dataBoard.loadRatio') +
':' +
$t('message.dataBoard.loadRatioInfo')
}}
<!-- 载重比：塔吊吊装的物体重量与此时小车幅度对应最大起重量的百分比 -->
</div>
</span>
{{ (towerCurrentInfo || {}).loadRatio || '--' }}%
</p>
</div>
<div>
<div
style="
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div
class="blockTitle blockTitle2"
:class="company == 'longguang' ? 'blockTitle3' : ''"
>
<i v-if="company != 'longguang'"></i>
<!-- 塔吊视频 -->
{{ $t('message.dataBoard.towerVideo') }}
</div>
<!-- 请选择视频 -->
<el-select
class="selectVideoBox"
size="medium"
v-model="videoId"
:placeholder="$t('message.dataBoard.pleaseChooseVideo')"
@change="getVideo"
@visible-change="visibleChange"
>
<el-option
v-for="item in towerBasicInfo.videoList"
:key="item.id"
:label="item.videoName"
:value="item.id"
></el-option>
</el-select>
</div>
<div style="width: 100%; height: 300px">
<!-- <div>推出全屏</div> -->
<videoModule
class="playVideoBox"
style="width: 100%; height: 100%"
:type="'1x1'"
:value="selectList"
:displayBottomMod="false"
:winNumBer="1"
:autoplay="false"
:showCaptrue="false"
:showControl="false"
:showPlayback="false"
></videoModule>
</div>
</div>
<div
class="dialogDataBox2"
:style="{
'margin-top': company == 'longguang' ? '24px' : '100px',
}"
>
<p>
<span>{{ countDown }}</span>
s
</p>
<p>
<!-- 倒计时刷新 -->
{{ $t('message.dataBoard.countDownFresh') }}
</p>
</div>
<div
class="blockTitle blockTitle2"
v-if="company == 'longguang'"
:class="company == 'longguang' ? 'blockTitle3' : ''"
>
<i v-if="company != 'longguang'"></i>
<!-- 报警信息 -->
{{ $t('message.dataBoard.alarmInfo') }}
</div>
<div
class="deviceInfo"
style="background: #061125"
v-if="company == 'longguang'"
>
<vue-scroll
v-if="TowerAlarmList.length"
style="height: 300px; margin-bottom: 10px"
>
<div
class="driverInfo"
v-for="(item, index) in TowerAlarmList"
:key="index"
>
<div class="TowerAlarm_item">
<p
v-if="item.windSpeedAlarm"
class="p1"
style="width: 100%; font-size: 15px"
>
<!-- 风速报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[0] }}
</p>
<!-- <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>-->
<p
v-if="item.environmentAlarm"
class="p2"
style="width: 100%; font-size: 15px"
>
<!-- 环境防撞报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[1] }}
</p>
<p
v-if="item.heightAlarm"
class="p1"
style="width: 100%; font-size: 15px"
>
<!-- 高度上限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[2] }}
</p>
<p
v-if="item.maxRangeAlarm"
class="p2"
style="width: 100%; font-size: 15px"
>
<!-- 幅度外限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[3] }}
</p>
<p
v-if="item.minRangeAlarm"
class="p1"
style="width: 100%; font-size: 15px"
>
<!-- 幅度内限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[4] }}
</p>
<p
v-if="item.momentAlarm"
class="p2"
style="width: 100%; font-size: 15px"
>
<!-- 力矩报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[5] }}
</p>
<p
v-if="item.multiAlarm"
class="p1"
style="width: 100%; font-size: 15px"
>
<!-- 多机防撞报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[6] }}
</p>
<p
v-if="item.negAngleAlarm"
class="p2"
style="width: 100%; font-size: 15px"
>
<!-- 逆时针回转限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[7] }}
</p>
<p
v-if="item.posAngleAlarm"
class="p1"
style="width: 100%; font-size: 15px"
>
<!-- 顺时针回转限位报警 -->
{{ $t('message.dataBoard.alarmTypeArray2')[8] }}
</p>
<p class="p1" style="width: 35%; opacity: 0.8">
<!-- 设备名称: -->
{{ $t('message.dataBoard.devName2') + ':'
}}{{ item.devName }}
</p>
<p class="p2" style="width: 65%; opacity: 0.8">
<!-- 报警时间： -->
{{ $t('message.dataBoard.alarmTime') + ':'
}}{{ transformTimestamp(item.alarmTime) }}
</p>
</div>
</div>
</vue-scroll>
<div v-else style="text-align: center; padding: 20px">
<img
style="height: 150px; margin-top: 100px"
src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
/>
<p>
<!-- 暂无数据 -->
{{ $t('message.dataBoard.nodata') }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
<!-- 车辆监测弹框 -->
<div class="carDialog pointDialog_l" v-show="showCarDialog">
<i class="closeBtn el-icon-error" @click="showCarDialog = false"></i>
<div class="pointDialogContent">
<div class="fullHeight">
<div class="top">
<div class="dialogBlock">
<div class="dialogBlockContent">
<div class="blockTitle blockTitle2">
<i></i>
<!-- 实时数据 -->
{{ $t('message.dataBoard.realData') }}
</div>
<div class="leftTopInner">
<div class="realTimeInfo2 fullHeight">
<div class="dialogDataBox">
<p>
<span>{{ plantCap.pm10 }}</span>
{{ $t('message.dataBoard.onces') }}
<!-- 次 -->
</p>
<p>
<!-- 今日进场车次 -->
{{ $t('message.dataBoard.todayInCarOnces') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ plantCap.pm25 }}</span>
{{ $t('message.dataBoard.onces') }}
<!-- 次 -->
</p>
<p>
<!-- 今日出场车次 -->
{{ $t('message.dataBoard.todayOutCarOnces') }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ plantCap.pm10 }}</span>
{{ $t('message.dataBoard.onces') }}
<!-- 次 -->
</p>
<p>
<!-- 白名单车辆数 -->
{{
$t(
'message.dataBoard.numberOfVehiclesWhitelisted'
)
}}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ plantCap.pm25 }}</span>
{{ $t('message.dataBoard.onces') }}
<!-- 次 -->
</p>
<p>
<!-- 长期车辆数 -->
{{
$t('message.dataBoard.numberOfTemporaryVehicles')
}}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="dialogBlock">
<div class="dialogBlockContent">
<div class="blockTitle blockTitle2">
<i></i>
<!-- 车种进出统计 -->
{{ $t('message.dataBoard.carTypeInAndOutTotal') }}
</div>
<div class="chart"></div>
</div>
</div>
</div>
<div class="bottom">
<div class="dialogBlock">
<div class="dialogBlockContent">
<div class="blockTitle blockTitle2">
<i></i>
<!-- 进出记录 -->
{{ $t('message.dataBoard.inAndOutRecords') }}
</div>
<table class="dialogTable">
<thead>
<tr>
<th>
<!-- 车牌号 -->
{{ $t('message.dataBoard.carNo') }}
</th>
<th>
<!-- 进出时间 -->
{{ $t('message.dataBoard.inOrOutTime') }}
</th>
<th>
<!-- 进出标识 -->
{{ $t('message.dataBoard.inOrOutMark') }}
</th>
<th>
<!-- 车牌颜色 -->
{{ $t('message.dataBoard.plateColor') }}
</th>
<th>
<!-- 抓拍照片 -->
{{ $t('message.dataBoard.paparazziPhotos') }}
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="environBox pointDialog_s"
v-show="showCarDialog2"
>
<div class="title">
{{ carDetail.name }} -
<!-- 实时数据 -->
{{ $t('message.dataBoard.realData') }}
<span class="closeBtn" @click="showCarDialog2 = false">
<i class="el-icon-close"></i>
</span>
</div>
<vue-scroll>
<div style="width: 330px; height: 230px">
<div
class="carData"
v-for="(item, index) in carList"
:key="index"
>
<img
:src="$store.state.FILEURL + item.imageUrl"
style="width: 65px; height: 65px"
/>
<div class="carInfo">
<div v-show="item.type === 0">
{{ $t('message.dataBoard.inOrOutType')[0] }}
<!-- 进出类型:进 -->
</div>
<!-- //进出类型 -->
<div v-show="item.type === 1">
{{ $t('message.dataBoard.inOrOutType')[1] }}
<!-- 进出类型:出 -->
</div>
<!-- //进出类型 -->
<div>
{{ $t('message.dataBoard.carNo') + ':'
}}{{ item.carNumber }}
</div>
<!-- //车牌号 -->
<div>
<!-- 通过时间: -->
{{ $t('message.dataBoard.passTime') + ':'
}}{{ item.passTime }}
</div>
<!-- //时间 -->
</div>
</div>
</div>
</vue-scroll>
</div>
<!--龙门吊-->
<!-- 龙门吊监测 -->
<el-dialog
class="dialog-wrapper"
@close="closeMap"
:title="$t('message.dataBoard.devTypeList')[8].name"
:visible.sync="showGantryCrane"
:modal-append-to-body="false"
width="95%"
top="0vh"
>
<div class="towerDialog pointDialog_l">
<i class="closeBtn el-icon-error" @click="closeTowerDialog"></i>
<div class="pointDialogContent">
<div class="showGantryCrane_top">
<div class="showGantryCrane_top_left">
<div class="operationInfo_towercrane">
<img
class="imgGantry"
src="~@/views/projectLevel/assets/images/gantryCrane/gantry2.png"
/>
<div ref="hookBox" class="hookBox">
<div class="hook" :style="{ left: hookLeft + 'px' }">
<img
class="imgHead"
ref="imgHead"
src="~@/views/projectLevel/assets/images/gantryCrane/head.png"
/>
<img
:style="{ height: imgHeight + 45 + 'px' }"
class="imgMid"
src="~@/views/projectLevel/assets/images/gantryCrane/mid.png"
/>
<img
class="imgBottom"
src="~@/views/projectLevel/assets/images/gantryCrane/bottom.png"
/>
</div>
</div>
</div>
</div>
<div class="showGantryCrane_top_right">
<div class="driverInformationBox">
<div class="driverInformationTitle">
<!-- 司机信息 -->
{{ $t('message.dataBoard.driverInfo2') }}
</div>
<div class="driverInformation">
<div class="driverInformationName">
{{ $t('message.dataBoard.name') + ':' }}
<!-- 姓名： -->
{{ gantryCraneOperationInfo.driverName }}
</div>
<div class="driverInformationIDCard">
{{ $t('message.dataBoard.gender') + ':' }}
<!-- 性别： -->
{{
getInfo(gantryCraneOperationInfo.driverIdCard).sex ==
'- -'
? '- -'
: getInfo(gantryCraneOperationInfo.driverIdCard)
.sex == 1
? '男'
: '女'
}}
</div>
<div class="driverInformationName">
{{ $t('message.dataBoard.idCardNo') + ':' }}
<!-- 身份证号： -->
{{
gantryCraneOperationInfo.driverIdCard
? gantryCraneOperationInfo.driverIdCard
: '- -'
}}
</div>
<div class="driverInformationAge">
{{ $t('message.dataBoard.age') + ':' }}
<!-- 年龄： -->
{{ getInfo(gantryCraneOperationInfo.driverIdCard).age }}
</div>
</div>
</div>
<div class="equipmentInformationBox">
<div class="equipmentInformationTitle">
<!-- 设备信息 -->
{{ $t('message.dataBoard.devInfo') }}
</div>
<div class="equipmentInformation">
<div class="equipmentInformationName">
<!-- 设备名称： -->
{{ $t('message.dataBoard.devName2') + ':'
}}{{ gantryCraneInfo.devName }}
</div>
<div class="equipmentInformationQualified">
<!-- 出厂日期： -->
{{ $t('message.dataBoard.dateOfProduction') + ':' }}
{{ transformTimestamp(gantryCraneInfo.factoryTime) }}
</div>
<div class="equipmentInformationRegister">
<!-- 安装时间： -->
{{ $t('message.dataBoard.installTime') + ':' }}
{{
transformTimestamp(gantryCraneInfo.installationTime)
}}
</div>
<div class="equipmentInformationWidth">
<!-- 额定跨度： -->
{{ $t('message.dataBoard.ratedSpan') + ':' }}
{{ gantryCraneInfo.ratedSpan }},
</div>
<div class="equipmentInformationHeight">
<!-- 额定高度： -->
{{ $t('message.dataBoard.rateHeight') + ':' }}
{{ gantryCraneInfo.ratedHeight }}m
</div>
<div class="equipmentInformationWeight">
<!-- 额定吊重 -->
{{ $t('message.dataBoard.rateWeight') + ':' }}
</div>
<div class="liftingWeight">
<div class="MainHook1">
<!-- 小车1主钩： -->
{{ $t('message.dataBoard.smallCarList')[0] + ':'
}}{{ gantryCraneInfo.mainHangerRatedLoad }}t
</div>
<div class="AuxiliaryHook1">
{{ $t('message.dataBoard.smallCarList')[1] + ':' }}
<!-- 小车1副钩： -->
{{
gantryCraneInfo.auxiliaryHangerRatedLoad
? gantryCraneInfo.auxiliaryHangerRatedLoad
: '- -'
}}t
</div>
<div class="MainHook2">
{{ $t('message.dataBoard.smallCarList')[2] + ':' }}
<!-- 小车2主钩： -->
{{
gantryCraneInfo.secondMainHangerRatedLoad
? gantryCraneInfo.secondMainHangerRatedLoad
: '- -'
}}t
</div>
<div class="AuxiliaryHook2">
{{ $t('message.dataBoard.smallCarList')[3] + ':' }}
<!-- 小车2副钩： -->
{{
gantryCraneInfo.secondAuxiliaryHangerRatedLoad
? gantryCraneInfo.secondAuxiliaryHangerRatedLoad
: '- -'
}}t
</div>
</div>
</div>
</div>
</div>
</div>
<div class="showGantryCrane_bottom">
<div class="operationData">
<div class="operationData_item">
<p>
<!-- 风速 -->
{{ $t('message.dataBoard.windSpeed') }}
</p>
<p>
{{
gantryCraneOperationInfo.windSpeed
? gantryCraneOperationInfo.windSpeed
: '- -'
}}m/s
</p>
</div>
<div class="operationData_item">
<p>
<!-- 倾斜 -->
{{ $t('message.dataBoard.incline') }}X
</p>
<p>
{{
gantryCraneOperationInfo.angleXAxis !== ''
? gantryCraneOperationInfo.angleXAxis
: '- -'
}}°
</p>
</div>
<div class="operationData_item">
<p>
<!-- 倾斜 -->
{{ $t('message.dataBoard.incline') }}Y
</p>
<p>
{{
gantryCraneOperationInfo.angleYAxis !== ''
? gantryCraneOperationInfo.angleYAxis
: '- -'
}}°
</p>
</div>
<div class="operationData_item">
<p>
<!-- 小车位置 -->
{{ $t('message.dataBoard.smallCarLocation') }}
</p>
<p>
{{
gantryCraneOperationInfo.smallCraneRange
? gantryCraneOperationInfo.smallCraneRange
: '- -'
}}m
</p>
</div>
<div class="operationData_item">
<p>
<!-- 小车1主钩位置 -->
{{ $t('message.dataBoard.smallCarList')[4] }}
</p>
<p>
{{
gantryCraneOperationInfo.smallCraneMainHookHeight
? gantryCraneOperationInfo.smallCraneMainHookHeight
: '- -'
}}m
</p>
</div>
<div class="operationData_item">
<p>
<!-- 小车1主钩吊重 -->
{{ $t('message.dataBoard.smallCarList')[5] }}
</p>
<p>
{{
gantryCraneOperationInfo.smallCraneMainHookLoad
? gantryCraneOperationInfo.smallCraneMainHookLoad
: '- -'
}}t
</p>
</div>
</div>
<div class="alarmData">
<div class="alarmData_item">
<p>
<!-- 大车行程超限 -->
{{ $t('message.dataBoard.smallCarList')[6] }}
</p>
<p
v-if="
gantryCraneOperationInfo.largeCraneDistanceState == 0
"
class="alarmNormal alarmP"
></p>
<p
v-if="
gantryCraneOperationInfo.largeCraneDistanceState == 1 ||
gantryCraneOperationInfo.largeCraneDistanceState == 2
"
class="alarmWarning alarmP"
></p>
<p
v-if="
gantryCraneOperationInfo.largeCraneDistanceState == 3 ||
gantryCraneOperationInfo.largeCraneDistanceState == 4
"
class="alarmPolice alarmP"
></p>
</div>
<div class="alarmData_item">
<p>
<!-- 小车行程超限 -->
{{ $t('message.dataBoard.smallCarList')[7] }}
</p>
<p
v-if="
gantryCraneOperationInfo.smallCraneRangeState == 0 ||
gantryCraneOperationInfo.secondSmallCraneRangeState == 0
"
class="alarmNormal alarmP"
></p>
<!-- <p class="alarmWarning alarmP"></p>-->
<p
v-if="
gantryCraneOperationInfo.smallCraneRangeState == 1 ||
gantryCraneOperationInfo.smallCraneRangeState == 2 ||
gantryCraneOperationInfo.secondSmallCraneRangeState ==
1 ||
gantryCraneOperationInfo.secondSmallCraneRangeState == 2
"
class="alarmPolice alarmP"
></p>
</div>
<div class="alarmData_item">
<p>
<!-- 风速 -->
{{ $t('message.dataBoard.windSpeed') }}
</p>
<p
v-if="gantryCraneOperationInfo.windSpeedState == 0"
class="alarmNormal alarmP"
></p>
<p
v-if="gantryCraneOperationInfo.windSpeedState == 1"
class="alarmWarning alarmP"
></p>
<p
v-if="gantryCraneOperationInfo.windSpeedState == 2"
class="alarmPolice alarmP"
></p>
</div>
<div class="alarmData_item">
<p>
<!-- 大车倾斜 -->
{{ $t('message.dataBoard.smallCarList')[8] }}
</p>
<p
v-if="
gantryCraneOperationInfo.angleXState == 0 ||
gantryCraneOperationInfo.angleYState == 0
"
class="alarmNormal alarmP"
></p>
<p
v-if="
gantryCraneOperationInfo.angleXState == 1 ||
gantryCraneOperationInfo.angleYState == 2
"
class="alarmWarning alarmP"
></p>
<p
v-if="
gantryCraneOperationInfo.angleXState == 2 ||
gantryCraneOperationInfo.angleYState == 2
"
class="alarmPolice alarmP"
></p>
</div>
<div class="alarmData_item">
<p>
<!-- 起吊超重 -->
{{ $t('message.dataBoard.smallCarList')[9] }}
</p>
<p
v-if="
gantryCraneOperationInfo.mainHookWeightState == 0 ||
gantryCraneOperationInfo.mainHookWeightState == 1 ||
gantryCraneOperationInfo.mainHookWeightState == 2 ||
gantryCraneOperationInfo.auxiliaryHookWeightState ==
0 ||
gantryCraneOperationInfo.auxiliaryHookWeightState ==
1 ||
gantryCraneOperationInfo.auxiliaryHookWeightState ==
2 ||
gantryCraneOperationInfo.secondMainHookWeightState ==
0 ||
gantryCraneOperationInfo.secondMainHookWeightState ==
1 ||
gantryCraneOperationInfo.secondMainHookWeightState ==
2 ||
gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
0 ||
gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
1 ||
gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
2
"
class="alarmNormal alarmP"
></p>
<p
v-if="
gantryCraneOperationInfo.mainHookWeightState == 3 ||
gantryCraneOperationInfo.mainHookWeightState == 4 ||
gantryCraneOperationInfo.auxiliaryHookWeightState ==
3 ||
gantryCraneOperationInfo.auxiliaryHookWeightState ==
4 ||
gantryCraneOperationInfo.secondMainHookWeightState ==
3 ||
gantryCraneOperationInfo.secondMainHookWeightState ==
4 ||
gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
3 ||
gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
4
"
class="alarmWarning alarmP"
></p>
<p
v-if="
gantryCraneOperationInfo.mainHookWeightState == 5 ||
gantryCraneOperationInfo.mainHookWeightState == 6 ||
gantryCraneOperationInfo.auxiliaryHookWeightState ==
5 ||
gantryCraneOperationInfo.auxiliaryHookWeightState ==
6 ||
gantryCraneOperationInfo.secondMainHookWeightState ==
5 ||
gantryCraneOperationInfo.secondMainHookWeightState ==
6 ||
gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
5 ||
gantryCraneOperationInfo.secondAuxiliaryHookWeightState ==
6
"
class="alarmPolice alarmP"
></p>
</div>
<div class="alarmData_item">
<p>
<!-- 起吊高度超限 -->
{{ $t('message.dataBoard.smallCarList')[10] }}
</p>
<p
v-if="
gantryCraneOperationInfo.mainHookHeightState == 0 ||
gantryCraneOperationInfo.auxiliaryHookHeightState ==
0 ||
gantryCraneOperationInfo.secondMainHookHeightState ==
0 ||
gantryCraneOperationInfo.secondAuxiliaryHookHeightState ==
0
"
class="alarmNormal alarmP"
></p>
<!-- <p class="alarmWarning alarmP"></p>-->
<p
v-if="
gantryCraneOperationInfo.mainHookHeightState == 1 ||
gantryCraneOperationInfo.auxiliaryHookHeightState ==
1 ||
gantryCraneOperationInfo.secondMainHookHeightState ==
1 ||
gantryCraneOperationInfo.secondAuxiliaryHookHeightState ==
1
"
class="alarmPolice alarmP"
></p>
</div>
<div class="alarmData_item">
<p>
<!-- 机构碰撞 -->
{{ $t('message.dataBoard.smallCarList')[11] }}
</p>
<p
v-if="gantryCraneOperationInfo.largeCarSafeStatus == 0"
class="alarmNormal alarmP"
></p>
<!-- <p class="alarmWarning alarmP"></p>-->
<p
v-if="
gantryCraneOperationInfo.largeCarSafeStatus == 1 ||
gantryCraneOperationInfo.largeCarSafeStatus == 2
"
class="alarmPolice alarmP"
></p>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
<div v-if="company != 'henan'" class="fullHeight aside">
<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>
<div class="blockContent dataBoxContent">
<div
class="pieAnalyse2"
ref="pieAnalyse"
style="width: 100%; height: 60%"
></div>
<img
class="image"
src="~@/assets/images/longguang/cutimage/AI_empty.png"
v-show="!dangerAlarmTypeList.length"
/>
</div>
</div>
<!-- 环境监测 -->
<DataCard
:data="{
title: 'companyDiagram.environmentMonitor',
countNum: onlineDevNum,
countLabel: 'onlineDev',
countImg: require('@/assets/images/dataBoard/online.jpg'),
todayNum: offlineDevNum,
todayLabel: 'notOnlineDev',
todayImg: require('@/assets/images/dataBoard/offline.jpg'),
}"
:list="environmentDevList"
></DataCard>
</div>
<!-- 设备类型切换 -->
<div class="pointTabBox">
<vue-scroll ref="stageScroll">
<ul v-if="company=='shzj'">
<li
@click="
devType = item.id
devTypeIndex = index
showCarDialog2 = false
getAllDevPointList()
"
v-for="(item, index) in devTypeListShzj"
:key="index"
:class="{ active: devTypeIndex == index }"
>
{{ item.name }}
</li>
</ul>
<ul v-else>
<li
@click="
devType = item.id
devTypeIndex = index
showCarDialog2 = false
getAllDevPointList()
"
v-for="(item, index) in devTypeList"
:key="index"
:class="{ active: devTypeIndex == index }"
>
{{ item.name }}
</li>
</ul>
</vue-scroll>
</div>
</div>
<div class="placeholderBox placeholderBox2" v-else>
<img src="@/assets/images/noData3.png" srcset />
<p>
<!-- 暂无数据，请去项目基本信息上传图纸 -->
{{ $t('message.dataBoard.smallCarList')[12] }}
</p>
</div>
</div>
</template>
<script>
import {
getRealTimeDustNoiseDataApi,
environmentDevList
} from '@/assets/js/api/environmentManage'
import echarts from 'echarts4'
import {
selectDevCoordinateListApi,
selectWorkerAttendanceByDevApi,
selectVideoAlarmPageListApi,
selectProjectDevCountListApi,
selectTowerDevAlarmCountList,
selectLifterDevAlarmCountList,
selectVideoCountList,
selectUfaceDevStatisticsList,
selectEnvironmentDevAlaramCountList,
getAllTowerDangerInfo,
getAllLifterDangerInfo,
getEnvironmentInfo
} from '@/assets/js/api/dataBoard'
import { selectCarTotal } from '@/assets/js/api/carManage.js'
import {
getSelectTowerBySnApi,
getTowerCurrentDataApi,
selectTowerListApi,
selectProjectTowerNewestCurrentDataListApi,
getTowerAlarmListApi, //报警信息
selectTowerNutByNutHostIdApi //通过id查询螺母信息
} from '@/assets/js/api/towerCrane' //塔吊
import {
getSelectLifterBySnApi,
getLifterCurrentDataApi,
getSelectLifterWorkCycleListApi,
getLifterAlarmApi
} from '@/assets/js/api/lifter' //升降机
import {
getGantryCraneBySnApi, //通过设备devsn(设备编号)查询设备详情
getNewestGantryCraneCurrentDataApi //查询龙门吊设备最新一条实时数据
} from '@/assets/js/api/gantryCrane' //龙门吊
import { getRealTimeDataApi } from '@/assets/js/api/electricBox' //电箱
import {
hidePluginWindow,
showPluginWindow,
unInitObjPlugin
} from '@/components/videoModule/isc_plugin/video_isc_plugin.js'
import areaTree from '@/components/areaTree'
import videoModule from '@/components/videoModule/videoModule'
import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
var frontArmLength = 496 //图片塔吊臂长px
var height = 484 //图片塔吊高度px
var imgLeftWidth = 115 //塔吊图片司机距离左边距离px
var imgLeftHeight = 70 //塔吊图片司机距离上边距离px
var realWidth = 0 //实际塔吊臂长m
var realHeight = 0 //实际塔吊高度m
var $moveBox
var $moveBox2
var $xMove
var $line
var $line2
import DataCard from './DataCard.vue'
import FaceGate from './center/FaceGate.vue'
export default {
components: { areaTree, videoModule, DataCard, FaceGate },
data() {
return {
countDownTime: null,
countDown: 5, //倒计时
company: '',
videoList: [],
playList: [],
svgTimer: null,
devTypeList: this.$t('message.dataBoard.devTypeList'),
devTypeListShzj:[
{name:'全部',id:""},
{ name: "塔吊监测", id: 2 },
{ name: "升降机监测", id: 3 },
{ name: "视频监控", id: 4 },
{ name: "环境监测", id: 6 },
],
realTimeData: {},
devTypeIndex: 0,
imgWidthScale: 0, //工地图片与容器宽度的比例
imgHeightScale: 0, //工地图片与容器高度的比例
bgUrl: '', //施工图
projectSn: '',
fileUrl: '',
devType: '',
pointList: [],
towerList: [], // 塔吊设备列表
lifterList: [], // 升降机设备列表
videoCountList: [], // 视频设备列表
ufaceList: [], // 人脸闸机列表
ufaceInCount: 0, //人脸闸机今日进场人数
environmentDevList: [], //环境设备列表
plantCapInterval: null,
plantCap: {
crc: '--',
humidity: '--',
noise: '--',
plateHumidity: '--',
plateTemperature: '--',
pm10: '--',
pm25: '--',
pressure: '--',
temperature: '--',
tsp: '--',
voltage: '--',
winddirectionName: '--',
windspeed: '--'
},
showEnvironDialog: false,
environDevDetail: { name: '' },
showVideoDialog: false,
showVideoDialog2: false,
showFaceDevDialog: false,
faceDevDialogData: {
list: [],
totalAttendance: { inTotalNum: 0, outTotalNum: 0 },
ufaceDev: { deviceState: 1 }
},
showTowerDialog: false,
showLifterDialog: false,
showEletricDialog: false,
electricRealTimeData: {
phaseCurrentA: '--',
voltageB: '--',
phaseCurrentB: '--',
voltageC: '--',
phaseCurrentC: '--',
cableTemperatureA: '--',
cableTemperatureB: '--',
cableTemperatureC: '--',
ambientTemperature: '--',
electricLeakage: '--',
voltageA: '--',
uploadTime: '--'
},
electricBoxPos: { x: 0, y: 0 },
carBoxPos: { x: 0, y: 0 },
carList: [],
carDetail: { name: '' },
electricDevDetail: { name: 'ddd', devSn: '' },
showCarDialog: false,
showCarDialog2: false,
towerBasicInfo: {}, //塔吊基本信息,
nutHostId: '', //螺母主机id
towerCurrentInfo: {}, //塔吊实时信息
coordData: { coordX: 0, coordY: 0, lineLength: 0 },
hideGoods: false,
selectList: [], //视频数据源
videoId: '',
towerInterval: null, // 塔吊定时器
lifterInfo: {}, //升降机基本信息,
lifterInfoDriverList: [],
lifterWorkCycleList: [], //升降机循环工作列表
lifterCurrentData: {}, //升降机实时数据
showHeight: 0,
lifterInterval: null, //升降机定时器
videoAlarmList: [],
timer1: null,
lifterAlarmList: [],
activeLiveData: '',
videoAlarmTimer: null,
getTowerDriverInfoTimer: null, //实时获取塔吊信息,
TowerAlarmList: [], //报警信息
TowerWarningList: [], //预警信息
floorNum: '', //高度百分比
onece: false,
showGantryCrane: false, //龙门吊
imgHeight: 0, //照片升降高度
hookLeft: 0, //divhook向左移动距离
showBoltDetails: false, //显示隐藏螺母
afterAnalysisDataInfo: '', //螺母信息
gantryCraneInfo: '', //龙门吊信息
gantryCraneOperationInfo: '', //运行数据
gantryCraneInterval: null, //龙门吊实时数据计时器
showTitle1: false,
showTitle2: false,
showTitle3: false,
showTitle4: false,
showTitle5: false,
showTitle6: false,
showTitle7: false,
showTitle8: false,
weightSet: '',
towerHeightList: '',
svgDom: Object,
styleType: '',
isDockingToWoer: '',
isIframe: false,
boxSize: '',
totalTowerDev: 0, //塔吊数量
totalDangerTowerDev: 0, // 塔吊报警数量
totalLifterDev: 0, //升降机数量
totalDangerLifterDev: 0, //升降机报警数量
environmentDevNum: 0, //环境设备数量
environmentTotalAlarm: 0, // 环境设备报警数量
videoDevNum: 0, // 视频设备数量
mapContentHeight: 0, // mapContent与屏幕高度的比例
mapContentWidth: 0, // mapContent与屏幕宽度的比例
dangerAlarmTypeList: [], // 预警类型列表
totalDangerAlarmType: 0,
onlineDevNum: 0,
offlineDevNum: 0
}
},
created() {
this.company = COMPANY
},
mounted() {
this.isDockingToWoer = isDockingToWoer
this.styleType = this.$store.state.userInfo.styleType
console.log(this.company)
this.projectSn = this.$store.state.projectSn
this.fileUrl = this.$store.state.FILEURL
this.bgUrl = this.$store.state.currentProDetail.constructionMapUrl
this.getAlarmInfor()
this.getAllDev()
if (window.localStorage.getItem('isIframe')) {
if (window.localStorage.getItem('isIframe') == '1') {
this.isIframe = true
}
console.log(window.localStorage.getItem('isIframe'))
}
if (this.bgUrl) {
this.countBoxSize() //计算缩放比
this.getAllDevPointList()
}
this.getDevTypeFn()
this.getDevList()
this.pieAnalyse()
this.countBoxSize()
},
computed: {
changVideoSize() { },
closeVideo() { },
transformTimestamp() {
return function (timestamp) {
let a = new Date(timestamp).getTime()
const date = new Date(a)
const Y = date.getFullYear() + '-'
const M =
(date.getMonth() + 1 < 10
? '0' + (date.getMonth() + 1)
: date.getMonth() + 1) + '-'
const D =
(date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
const h =
(date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
const m =
(date.getMinutes() < 10
? '0' + date.getMinutes()
: date.getMinutes()) + ':'
const s =
date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() // 秒
const dateString = Y + M + D + h + m + s
return dateString
}
},
nutPosition() {
return function (num) {
let a = num / this.towerBasicInfo.tower.nodeCount
return Math.ceil(a)
}
},
getInfo() {
return function (idCard) {
if (idCard) {
let sex = null
let birth = null
let myDate = new Date()
let month = myDate.getMonth() + 1
let day = myDate.getDate()
let age = 0
if (idCard.length === 18) {
age = myDate.getFullYear() - idCard.substring(6, 10) - 1
sex = idCard.substring(16, 17)
birth =
idCard.substring(6, 10) +
'-' +
idCard.substring(10, 12) +
'-' +
idCard.substring(12, 14)
if (
idCard.substring(10, 12) < month ||
(idCard.substring(10, 12) === month &&
idCard.substring(12, 14) <= day)
)
age++
}
if (idCard.length === 15) {
age = myDate.getFullYear() - idCard.substring(6, 8) - 1901
sex = idCard.substring(13, 14)
birth =
'19' +
idCard.substring(6, 8) +
'-' +
idCard.substring(8, 10) +
'-' +
idCard.substring(10, 12)
if (
idCard.substring(8, 10) < month ||
(idCard.substring(8, 10) === month &&
idCard.substring(10, 12) <= day)
)
age++
}
if (sex % 2 === 0) sex = '0'
// 性别代码 1代表男，0代表女，暂时不涉及其他类型性别
else sex = '1'
return { age, sex, birth }
} else {
return { age: '- -', sex: '- -' }
}
}
},
imgHeightWidth() {
return this.$refs.bgPackImg.height / this.$refs.bgPackImg.width
}
},
beforeDestroy() {
//清除实时获取塔吊信息
clearInterval(this.gantryCraneInterval)
clearInterval(this.countDownTime)
if (this.getTowerDriverInfoTimer) {
clearInterval(this.getTowerDriverInfoTimer)
}
if (this.towerInterval) {
clearInterval(this.towerInterval)
}
//环境监测
clearInterval(this.plantCapInterval)
if (this.lifterInterval) {
clearInterval(this.lifterInterval)
}
if (this.videoAlarmTimer) {
clearInterval(this.videoAlarmTimer)
}
clearInterval(this.timer1)
},
methods: {
// 计算点位的缩小比
countBoxSize() {
this.$nextTick(() => {
setTimeout(() => {
let el = document.querySelector('.mapContent')
let imgDom = document.querySelector('.bgPackImg')
this.imgWidthScale = imgDom.naturalWidth / imgDom.width
this.imgHeightScale = imgDom.naturalHeight / imgDom.height
let boxWidthHalf = el.offsetWidth / 2
let imgWidthHalf = imgDom.width / 2
let leftMove = imgWidthHalf - boxWidthHalf
console.log(this.imgWidthScale, this.imgHeightScale)
imgDom.style.top = 0
imgDom.style.left = -leftMove + 'px'
}, 200)
})
},
// 实时获取塔吊回转角度
selectTowerCurrentData() {
selectProjectTowerNewestCurrentDataListApi({
projectSn: this.projectSn
}).then((res) => {
if (res.code == 200) {
if (this.svgTimer) {
clearTimeout(this.svgTimer)
}
console.log(res.result)
for (let i = 0; i < this.towerHeightList.length; i++) {
let id = this.towerHeightList[i].devSn
for (let j = 0; j < res.result.length; j++) {
if (id == res.result[j].devSn) {
this.towerHeightList[i].t2.attr({
// 前臂长
text:
this.$t('message.dataBoard.forearmLong') +
':' +
res.result[j].forearmLength +
'm'
})
if (!this.towerHeightList[i].oldAngle) {
this.towerHeightList[i].oldAngle = 0
}
let oldrot = Number(this.towerHeightList[i].oldAngle),
newrot = Number(res.result[j].currentdata.angle),
_this = this
Snap.animate(
oldrot,
newrot,
function (value) {
oldrot = value
if (!isNaN(value)) {
// 旋转
_this.towerHeightList[i].t2.transform(
new Snap.Matrix().rotate(
value,
_this.towerHeightList[i].relatedX - _this.minX,
_this.towerHeightList[i].relatedY - _this.minY
)
)
_this.towerHeightList[i].b.transform(
new Snap.Matrix().rotate(
value,
_this.towerHeightList[i].relatedX - _this.minX,
_this.towerHeightList[i].relatedY - _this.minY
)
)
}
},
500
)
this.towerHeightList[i].oldAngle = newrot
}
}
}
this.svgTimer = setTimeout(() => {
this.selectTowerCurrentData()
}, 5000)
}
})
},
// 获取塔群高度
selectTowerHeight(val) {
console.log(val.devSn)
selectTowerListApi({ projectSn: this.projectSn }).then((res) => {
console.log(res.result)
if (res.code == 200) {
let maxHeight = 0
res.result.forEach((item) => {
if (item.referenceHeight + item.towerHeight > maxHeight) {
maxHeight = item.referenceHeight + item.towerHeight
}
})
res.result.forEach((item) => {
item.heightRatio =
(item.referenceHeight + item.towerHeight) / maxHeight
item.coordinateX = item.coordinateX ? item.coordinateX : '0'
})
this.towerHeightList = res.result
// 塔吊
console.log(res.result, '-----' + this.$t('message.dataBoard.tower'))
this.$nextTick(() => {
this.createSvg(val.devSn)
var panZoomTiger = svgPanZoom('#svg')
})
}
})
},
// 绘制塔群
createSvg(val) {
console.log(this.towerHeightList)
this.svgDom = Snap('#svg')
this.towerHeightList.forEach((item) => {
if (item.relatedX) {
this.minX = item.relatedX
this.minY = item.relatedY
}
})
console.log(
this.towerHeightList[0].relatedX,
this.towerHeightList[0].relatedY
)
this.towerHeightList.forEach((item) => {
console.log(item.relatedX < this.minX && item.relatedX != '')
if (item.relatedX < this.minX && item.relatedX != '') {
this.minX = item.relatedX
this.minY = item.relatedY
}
})
this.towerHeightList.forEach((item) => {
if (item.relatedX || item.relatedY) {
let color = ''
let color2 = ''
if (val == item.devSn) {
color = '#C9A623'
color2 = 'rgba(201, 166, 35, 0.14)'
} else {
color = '#FE6565'
color2 = 'rgba(255, 87, 94, 0.12)'
}
console.log(
item.relatedX - this.minX,
item.relatedY - this.minY,
item.devName
)
item.a = this.svgDom.paper
.circle(
(item.relatedX - this.minX).toFixed(2),
(item.relatedY - this.minY).toFixed(2),
item.forearmLength
)
.attr({
fill: color2,
stroke: color,
strokeWidth: 1
})
item.b = this.svgDom.paper
.line(
(item.relatedX - this.minX).toFixed(2),
Number((Number(item.relatedY) - this.minY).toFixed(2)) +
Number(item.posteriorArmLength),
(item.relatedX - this.minX).toFixed(2),
(item.relatedY - this.minY - item.forearmLength).toFixed(2)
)
.attr({
stroke: color,
strokeWidth: 1
})
item.c = this.svgDom.paper
.circle(
(item.relatedX - this.minX).toFixed(2),
(item.relatedY - this.minY).toFixed(2),
2
)
.attr({
fill: color,
stroke: color,
strokeWidth: item.forearmLength / 8
})
item.t1 = this.svgDom.paper
.text(
(Number(item.relatedX) - this.minX).toFixed(2) - 6,
(Number(item.relatedY) - this.minY).toFixed(2) + 6,
[item.devName ? item.devName : '']
)
.attr({
fill: 'rgba(255, 255, 255, 0.8)',
fontSize: 9
})
item.t2 = this.svgDom.paper
.text(
(Number(item.relatedX) - this.minX).toFixed(2) - 6,
(Number(item.relatedY) - this.minY).toFixed(2) -
item.forearmLength / 2,
[
this.$t('message.dataBoard.forearmLong') + ':',
item.forearmLength ? item.forearmLength : '0',
'm'
]
)
.attr({
fill: 'rgba(255, 255, 255, 0.8)',
fontSize: 9
})
}
})
this.selectTowerCurrentData()
},
openImg(src) {
window.open(src)
},
closeInterval() {
this.showEnvironDialog = false
clearInterval(this.plantCapInterval)
},
closeBoltDetails() {
this.showBoltDetails = false
},
nutDetails() {
this.showBoltDetails = true
selectTowerNutByNutHostIdApi({
nutHostId: this.towerBasicInfo.tower.nutHostId
}).then((res) => {
if (res.code == 200) {
this.afterAnalysisDataInfo = JSON.parse(res.result.afterAnalysisData)
console.log(JSON.parse(res.result.afterAnalysisData))
} else {
this.$message.error(res.message)
}
})
},
closeMap() {
this.showTowerDialog = false
clearTimeout(this.svgTimer)
this.afterAnalysisDataInfo = ''
this.showBoltDetails = false
this.showVideoDialog = false
this.playList = []
this.selectList = []
console.log(this.playList)
if (this.getTowerDriverInfoTimer) {
clearInterval(this.getTowerDriverInfoTimer)
}
if (this.towerInterval) {
clearInterval(this.towerInterval)
}
if (this.lifterInterval) {
clearInterval(this.lifterInterval)
}
clearInterval(this.countDownTime)
this.countDown = 5
// unInitObjPlugin()
},
closeTowerDialog() {
this.showLifterDialog = false
this.showTowerDialog = false
clearTimeout(this.svgTimer)
this.showGantryCrane = false
//清除实时获取塔吊信息
this.gantryCraneInfo = ''
this.gantryCraneOperationInfo = ''
this.totalDangerLifterDev = ''
clearInterval(this.gantryCraneInterval)
if (this.getTowerDriverInfoTimer) {
clearInterval(this.getTowerDriverInfoTimer)
}
if (this.towerInterval) {
clearInterval(this.towerInterval)
}
if (this.lifterInterval) {
clearInterval(this.lifterInterval)
}
clearInterval(this.countDownTime)
this.countDown = 5
},
move(x, y) {
var xImg, yImg
if (x <= realWidth) {
xImg = (x / realWidth) * (frontArmLength - imgLeftWidth) + imgLeftWidth
this.warningText = ''
} else {
xImg = frontArmLength - imgLeftWidth
this.warningText = /* "当前设备前臂长参数错误"; */ this.$t(
'message.dataBoard.errMessage4'
)
}
console.log(
realHeight,
y,
realHeight,
height,
imgLeftHeight,
imgLeftHeight
)
if (y <= realHeight) {
yImg = (y / realHeight) * (height - imgLeftHeight) + imgLeftHeight
// this.warningText = "";
} else {
yImg = height - imgLeftHeight
this.warningText = /* "当前设备高度参数错误"; */ this.$t(
'message.dataBoard.errMessage'
)
}
console.log(yImg)
if (yImg > 380) {
yImg = 380
}
if (xImg < 90) {
xImg = 90
}
$moveBox.style.left = xImg - 6 + 'px'
$moveBox.style.top = yImg + 'px'
$moveBox2.style.left = xImg - 23 + 'px'
$moveBox2.style.top = yImg + 'px'
$xMove.style.left = xImg + 'px'
$line.style.left = xImg + 8 + 'px'
$line.style.height = yImg - 74 < 0 ? 0 : yImg - 74 + 'px'
$line2.style.left = xImg + 8 + 'px'
$line2.style.height = yImg - 122 < 0 ? 0 : yImg - 122 + 'px'
},
// 获取所有设备信息
getAllDev() {
let data = {
projectSn: this.$store.state.projectSn
}
//获取塔吊设备信息
selectTowerDevAlarmCountList(data).then((res) => {
if (res.code === 200) {
this.towerList = res.result.devList
console.log(this.towerList)
}
})
// 获取升降机设备信息
selectLifterDevAlarmCountList(data).then((res) => {
if (res.code === 200) {
this.lifterList = res.result.devList
console.log(res)
}
})
// 获取人脸闸机设备信息
selectUfaceDevStatisticsList(data).then((res) => {
if (res.code === 200) {
this.ufaceList = res.result.devList
this.ufaceList.forEach((item) => {
this.ufaceInCount += item.inTotalNum
})
}
})
// 获取环境监测信息
selectEnvironmentDevAlaramCountList(data).then((res) => {
if (res.code === 200) {
console.log(res.result.devList)
this.environmentDevList = res.result.devList
}
})
let data2 = {
sn: this.$store.state.projectSn
}
// AI分析
getAITypeStatistics(data2).then((res) => {
if (res.code === 200) {
let { result } = res
console.log(result)
this.dangerAlarmTypeList = result.alarmList
this.totalDangerAlarmType = result.totalAlarmNum
}
this.pieAnalyse()
})
// 视频设备数量
selectVideoCountList(data).then((res) => {
console.log('视频设备数量', res)
if (res.code === 200) {
this.videoCountList = res.result
}
})
},
// AI分析
pieAnalyse() {
console.log(this.$refs.pieAnalyse)
let pieAnalyse = echarts.init(this.$refs.pieAnalyse, 'dark')
let total = this.totalDangerAlarmType
let dataArray = this.dangerAlarmTypeList.map((x) => {
return {
value: x.alarmNum,
name: x.alarmTypeName
}
})
console.log(dataArray)
pieAnalyse.setOption({
color: [
'#49B6A0',
'#C16C28',
'#F4A968',
'#4378D8',
'#D94916',
'#9FD6F4',
'#24A79A',
'#786FF0'
],
animation: false,
legend: {
show: true,
orient: 'vertical',
icon: 'circle',
itemWidth: 5,
itemHeight: 5,
right: 60,
itemGap: 20,
formatter: function (params) {
var tagvalue
for (var i = 0; i < dataArray.length; i++) {
if (dataArray[i].name === params) {
tagvalue = dataArray[i].value ? dataArray[i].value : '0'
}
}
return `${params} ${tagvalue}`
}
},
tooltip: {
show: true
},
backgroundColor: 'rgba(3,6,9,0)',
series: [
{
// name: '总数',
type: 'pie',
center: ['25%', '50%'],
radius: ['70%', '95%'],
label: {
normal: {
show: true,
position: 'center',
color: 'white',
formatter:
'{total|' + total + '}' + '\n\n' + '{active|预警总数}',
rich: {
total: {
fontSize: 17
},
active: {
fontSize: 14,
itemHeight: 15,
itemWidth: 50,
color: 'rgba(254,254,254,0.3)'
}
}
}
},
data: dataArray
}
]
})
},
//获取设备类型
getDevTypeFn() {
selectProjectDevCountListApi({ projectSn: this.projectSn }).then(
(res) => {
let arr = res.result
// "全部"
var arr2 = [{ name: this.$t('message.dataBoard.all'), id: '' }]
arr.forEach((element) => {
if (element.num !== 0) {
arr2.push({
name: element.dev_name,
id: element.dev_type
})
}
})
if (this.company == 'nanchang') {
// 应急管理
arr2.push({
name: this.$t('message.dataBoard.emergencyManage'),
id: 99
})
}
this.devTypeList = arr2
}
)
},
clearTimer() {
clearInterval(this.timer1)
},
//获取AI报警
getVideoAlarm() {
selectVideoAlarmPageListApi({
projectSn: this.projectSn,
pageNo: 1,
pageSize: 50
}).then((res) => {
this.videoAlarmList = res.result.records
if (this.videoAlarmList.length > 6) {
this.$nextTick(() => {
this.ScrollUp2()
})
}
})
},
ScrollUp2() {
var box = document.getElementById('detetion-box2')
var con1 = document.getElementById('detetion-con1')
var con2 = document.getElementById('detetion-con2')
this.speed = 50
if (con1.offsetHeight >= box.offsetHeight) {
con2.innerHTML = con1.innerHTML
this.timer1 = setInterval(scrol, this.speed)
function scrol() {
/*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到0，否则就每个30默秒向上滚动1px */
if (box.scrollTop >= con1.scrollHeight) {
box.scrollTop = 0
} else {
box.scrollTop++
}
}
}
},
closeVideoDialog() {
this.showVideoDialog = false
this.playList = []
},
getPlayParams(data) {
console.log(1)
if (!this.showVideoDialog) {
this.videoList = data
} else {
this.playList = data
}
},
clickPoint(item) {
//升降机
this.lifterInfo = {}
this.lifterWorkCycleList = []
this.lifterCurrentData = {}
this.lifterAlarmList = []
this.floorNum = ''
//塔吊
this.towerCurrentInfo = {}
console.log(this.towerCurrentInfo)
this.towerBasicInfo = []
this.TowerAlarmList = []
this.TowerWarningList = []
console.log(item.devType)
switch (Number(item.devType)) {
case 1:
console.log(item)
this.carBoxPos.x = parseFloat(item.mapX) - 320 + 'px'
this.carBoxPos.y =
parseFloat(item.mapY) / this.imgWidthScale - 280 + 'px'
this.carDetail.name = item.name
this.getCarTotalList(item)
this.showCarDialog2 = true
break
case 2:
//塔吊
this.showTowerDialog = true
if (this.company == 'longguang') {
this.selectTowerHeight(item)
}
this.$nextTick(async () => {
//实时获取塔吊运行信息
this.onece = true
this.getTowerDriverInfo(item.devSn)
})
break
case 3:
//升降机
this.showLifterDialog = true
this.getLifterDriverInfo(item.devSn)
this.showHeight = 0
break
case 4:
console.log(item, '老子操')
this.activeLiveData = item
this.showVideoDialog = true
console.log(this.videoList, 'video')
this.videoList.forEach((element) => {
if (element.devSn == item.devSn) {
this.playList = [element]
}
})
console.log(this.playList, 'playlist')
break
case 5:
//电箱
this.electricDevDetail = item
this.electricBoxPos.y = parseFloat(item.mapY) + 0 + 'px'
this.electricBoxPos.x =
parseFloat(item.mapX) / this.imgWidthScale + 50 + 'px'
this.showEletricDialog = true
this.getElectricRealTimeData()
break
case 6:
this.environDevDetail = item
this.showEnvironDialog = true
this.getRealTimeDustNoiseData(item.devSn)
break
case 7:
this.showFaceDevDialog = true
this.selectWorkerAttendanceByDev(item)
break
//龙门吊
case 9:
console.log(item)
this.showGantryCrane = true
this.getGantryCraneBySn(item)
}
},
getCarTotalList(item) {
console.log(this.projectSn)
let data = {
cameraId: item.devSn,
projectSn: this.projectSn
}
selectCarTotal(data).then((res) => {
console.log(res)
if (res.code === 200) {
let { result } = res
this.carList = result
}
})
},
//获取当前龙门吊的数据 当前龙门吊司机 当前龙门吊视频 当前设备基本信息
getGantryCraneBySn(item) {
let data = {
devSn: item.devSn
}
getGantryCraneBySnApi(data).then((res) => {
if (res.code == 200) {
console.log(res)
this.gantryCraneInfo = res.result.lifter
//获取设备的实时数据
this.getRealTimeData(item.devSn)
}
})
},
//获取实时数据
getRealTimeData(devSn) {
let data = {
devSn: devSn
}
getNewestGantryCraneCurrentDataApi(data).then((res) => {
console.log(res)
if (res.code == 200) {
if (res.result) {
this.gantryCraneOperationInfo = res.result
//动画
console.log(
this.gantryCraneInfo.ratedSpan,
res.result.smallCraneMainHookHeight
)
if (
this.gantryCraneInfo.ratedSpan <
res.result.smallCraneMainHookHeight ||
res.result.smallCraneMainHookHeight < 0
) {
// 当前高度参数错误
this.$message.error(this.$t('message.dataBoard.errMessage3'))
} else {
//照片升降高度
this.imgHeight =
(260 * res.result.smallCraneMainHookHeight) /
this.gantryCraneInfo.ratedHeight
//divhook向左移动距离
this.hookLeft =
(this.$refs.hookBox.offsetWidth * res.result.smallCraneRange) /
this.gantryCraneInfo.ratedSpan
}
this.gantryCraneInterval = setTimeout(() => {
this.getRealTimeData(devSn)
}, 5000)
} else {
this.imgHeight = 0
this.hookLeft = 0
}
}
})
},
getDevIcon(type) {
switch (Number(type)) {
case 1:
return require('@/assets/images/dataBoard/devIcon-car.png')
break
case 2:
return require('@/assets/images/dataBoard/devIcon-tower.png')
break
case 3:
return require('@/assets/images/dataBoard/devIcon-lifter.png')
break
case 4:
return require('@/assets/images/dataBoard/devIcon-camera.png')
break
case 5:
return require('@/assets/images/dataBoard/devIcon-electric.png')
break
case 6:
return require('@/assets/images/dataBoard/devIcon-green.png')
break
case 7:
return require('@/assets/images/dataBoard/devIcon-face.png')
break
case 8:
return require('@/assets/images/dataBoard/devIcon-chamber.png')
break
case 9:
return require('@/assets/images/dataBoard/devIcon-gantryCrane.png')
break
case 10:
return require('@/assets/images/dataBoard/devIcon-camera.png')
break
}
},
// 获取所有点位
getAllDevPointList() {
console.log('看数据',this.devType)
if (this.lifterInterval) {
clearInterval(this.lifterInterval)
}
if (this.towerInterval) {
clearInterval(this.towerInterval)
}
clearInterval(this.countDownTime)
let data = {
projectSn: this.projectSn,
devType: this.devType
}
// 获取设备信息
selectDevCoordinateListApi(data).then((res) => {
this.pointList = res.result
console.log("获取设备信息",res.result)
})
},
//获取环境设备列表--环境监测实时数据--下拉
getDevList() {
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
(result) => {
// console.log('列表', result)
this.devList = result.result
console.log(this.devList)
if (result.result.length > 0) {
this.offlineDevNum = 0
this.onlineDevNum = 0
this.devList.forEach((element) => {
if (element.isClosed == 2) {
this.offlineDevNum++
} else {
this.onlineDevNum++
}
})
this.getRealTimeDustNoiseData()
this.realTimeDustNoiseDataTime = setInterval(() => {
this.getRealTimeDustNoiseData()
}, 5000)
this.selectDustNoiseData()
} else {
// this.createCenterChart();
}
}
)
},
// 获取设备数量
getAlarmInfor() {
let data = {
sn: this.$store.state.projectSn
}
// 获取塔吊数量
getAllTowerDangerInfo(data).then((res) => {
if (res.code === 200) {
let { result } = res
this.totalTowerDev = result.devCount.devNum
this.totalDangerTowerDev = result.towerAlarmCount
console.log(result)
}
})
// getAiVideoInfo
// 获取升降机数量
getAllLifterDangerInfo(data).then((res) => {
if (res.code === 200) {
let { result } = res
this.totalLifterDev = result.devCount.devNum
this.totalDangerLifterDev = result.lifterAlarmCount
}
})
// 获取环境监测数量
getEnvironmentInfo(data).then((res) => {
if (res.code === 200) {
let { result } = res
this.environmentDevNum = result.devTotal.devNum
this.environmentTotalAlarm = result.alarmTotal.totalAlarm
}
})
},
//获取环境设备详情数据
getRealTimeDustNoiseData(deviceId) {
getRealTimeDustNoiseDataApi({ deviceId, projectSn: this.projectSn }).then(
(res) => {
if (res.code == 200) {
if (res.result) {
this.plantCap = res.result
this.plantCapInterval = setTimeout(() => {
this.getRealTimeDustNoiseData(deviceId)
}, 5000)
} else {
this.plantCap = {
crc: '--',
humidity: '--',
noise: '--',
plateHumidity: '--',
plateTemperature: '--',
pm10: '--',
pm25: '--',
pressure: '--',
temperature: '--',
tsp: '--',
voltage: '--',
winddirectionName: '--',
windspeed: '--'
}
}
}
}
)
},
//获取人脸闸机数据
selectWorkerAttendanceByDev({ devSn, name }) {
selectWorkerAttendanceByDevApi({
projectSn: this.projectSn,
devSn
}).then((res) => {
this.faceDevDialogData = { ...res.result, name }
})
},
//获取电箱设备的实时数据
getElectricRealTimeData() {
let data = {
devSn: this.electricDevDetail.devSn,
projectSn: this.projectSn
}
getRealTimeDataApi(data).then((res) => {
if (res.code == 200) {
console.log(res)
if (res.result) {
this.realTimeData = res.result
} else {
this.electricRealTimeData = {
phaseCurrentA: '--',
voltageB: '--',
phaseCurrentB: '--',
voltageC: '--',
phaseCurrentC: '--',
cableTemperatureA: '--',
cableTemperatureB: '--',
cableTemperatureC: '--',
ambientTemperature: '--',
electricLeakage: '--',
voltageA: '--',
uploadTime: '--'
}
}
console.log(this.realTimeData)
}
})
},
//获取单个塔吊预警信息
getTowerWarningList(devSn) {
let data = {
devSn,
projectSn: this.projectSn,
alarmType: '2'
}
getTowerAlarmListApi(data).then((res) => {
console.log(res.result)
this.TowerWarningList = res.result.records
})
},
//获取单个塔吊设备信息
getTowerDriverInfo(devSn) {
getTowerAlarmListApi({ devSn, projectSn: this.projectSn }).then((res) => {
console.log(res.result)
this.TowerAlarmList = res.result.records
})
this.getTowerWarningList(devSn)
getSelectTowerBySnApi({ devSn }).then((res) => {
console.log(1)
if (res.code == 200) {
console.log(res.result)
this.towerBasicInfo = res.result
this.weightSet = res.result.tower.weightSet
this.nutHostId = res.result.tower.nutHostId
realWidth = this.towerBasicInfo.tower.forearmLength
realHeight = this.towerBasicInfo.tower.towerHeight
if (res.result.tower.enableVideoUrl == 1) {
} else {
if (
res.result.tower.videoUrl &&
res.result.tower.videoUrl != 'null'
) {
this.towerBasicInfo.videoList = JSON.parse(
res.result.tower.videoUrl
)
} else {
this.towerBasicInfo.videoList = []
}
}
if (this.onece) {
if (this.towerBasicInfo.videoList.length > 0) {
this.getVideo(this.towerBasicInfo.videoList[0].id)
this.videoId = this.towerBasicInfo.videoList[0].id
} else {
this.videoId = ''
this.selectList = []
}
this.onece = false
}
//先清除在创建
this.getTowerCurrentData(devSn, res.result.tower)
} else {
this.$message.error(res.message)
}
})
},
//获取单个塔吊实时数据
getTowerCurrentData(devSn, tower) {
let data = {
devSn
}
getTowerCurrentDataApi(data).then((res) => {
clearInterval(this.countDownTime)
this.countDown = 5
this.countDownTime = setInterval(() => {
this.countDown--
if (this.countDown === 0) {
clearInterval(this.countDownTime)
this.countDown = 5
}
}, 1000)
clearInterval(this.towerInterval)
this.towerInterval = setInterval(() => {
this.getTowerCurrentData(devSn, this.towerBasicInfo.tower)
}, 5000)
console.log(res.result)
if (res.code == 200) {
if (res.result) {
this.towerCurrentInfo = res.result
? res.result
: this.towerCurrentInfo
var y = parseFloat(res.result.height)
var x = parseFloat(res.result.ranger)
$moveBox = document.getElementById('moveBox')
$moveBox2 = document.getElementById('moveBox2')
$xMove = document.getElementById('xMove')
$line = document.getElementById('line')
$line2 = document.getElementById('line2')
this.move(x, y)
this.hideGoods = true
} else {
this.hideGoods = false
}
} else {
this.$message.error(res.message)
}
})
},
//塔吊 下拉框聚焦
visibleChange(val) {
if (val) {
hidePluginWindow()
} else {
showPluginWindow()
}
},
//塔吊 选择的视频
getVideo(val) {
for (let i = 0; i < this.towerBasicInfo.videoList.length; i++) {
if (val == this.towerBasicInfo.videoList[i].id) {
console.log(this.towerBasicInfo.videoList[i])
this.selectList = [this.towerBasicInfo.videoList[i]]
return
}
}
},
// 获取单个升降机报警信息
getLifterAlarm(devSn) {
getLifterAlarmApi({
devSn,
projectSn: this.projectSn
}).then((res) => {
if (res.code == 200) {
console.log(res)
this.lifterAlarmList = res.result.records
}
})
},
//获取单个升降机设备信息
getLifterDriverInfo(devSn) {
console.log(devSn)
this.getLifterAlarm(devSn)
getSelectLifterBySnApi({ devSn }).then((res) => {
if (res.code == 200) {
console.log(res)
this.lifterInfo = res.result
this.lifterInfoDriverList = res.result.driverList
// this.getLifterWorkCycleList(devSn);
this.getLifterCurrentDataList(devSn, res.result)
} else {
this.$message.error(res.message)
}
})
},
//获取升降机 循环列表
getLifterWorkCycleList(devSn) {
getSelectLifterWorkCycleListApi({ devSn }).then((res) => {
if (res.code == 200) {
this.lifterWorkCycleList = res.result
} else {
this.$message.error(res.message)
}
})
},
//获取升降机实时数据
getLifterCurrentDataList(devSn, devData) {
let data = {
devSn
}
console.log(devData)
getLifterCurrentDataApi(data).then((res) => {
if (res.code == 200) {
clearInterval(this.countDownTime)
this.countDown = 5
this.countDownTime = setInterval(() => {
this.countDown--
if (this.countDown === 0) {
clearInterval(this.countDownTime)
this.countDown = 5
}
}, 1000)
clearInterval(this.lifterInterval)
this.lifterInterval = setInterval(() => {
this.getLifterCurrentDataList(devSn, this.lifterInfo)
}, 5000)
if (res.result) {
this.lifterCurrentData = res.result
let height = devData.lifter.maxHeight
? Number(devData.lifter.maxHeight)
: 0 //实际升降机高度
let nowHeight = res.result.height //当前升降机所在高度
if (!height) {
// 当前设备高度为零
this.$message.error(this.$t('message.dataBoard.errMessage2'))
return
}
if (nowHeight > height || nowHeight < 0) {
// 当前设备高度参数错误
this.$message.error(this.$t('message.dataBoard.errMessage'))
this.floorNum = ''
return
}
let Num = (nowHeight / height) * 100
console.log(Num)
this.floorNum = Num.toFixed(2)
console.log('return')
// let height = 100; //实际升降机高度 测试数据
// let nowHeight = 100; //当前升降机所在高度 测试数据
let moveMod = 56.5 //升降机移动模块高度 px
let lifterBottom = 5 //塔底部红色高度 px
let lifterHeight =
this.$refs.lifterHeight.clientHeight - lifterBottom //升降机塔高图片高 px
console.log(lifterHeight)
let ratio = (lifterHeight - 42) / height
let showHeight = ratio * nowHeight + lifterBottom
this.showHeight = showHeight
// this.showHeight = this.showHeight
console.log(this.showHeight, 1623)
}
} else {
this.$message.error(res.message)
}
})
}
}
}
</script>
<style lang="less" scoped>
img {
object-fit: cover;
}
.carData {
display: flex;
margin: 7px;
.carInfo {
text-align: start;
margin-left: 10px;
div {
margin: 8px;
}
}
}
.red {
color: red !important;
}
.dialogDataBox2 {
box-sizing: border-box;
width: 100%;
text-align: center;
margin-top: 100px;
}
.nutBox {
cursor: pointer;
position: absolute;
top: 250px;
left: -80px;
width: 110px;
height: 120px;
padding: 13px;
box-sizing: border-box;
.nut {
width: 80px;
}
span {
color: #ffffff;
}
}
.boltDetails {
background: #142834;
position: absolute;
left: 30px;
top: 140px;
width: 484px;
height: 280px;
box-sizing: border-box;
opacity: 0.8;
.boltDetailsTitle {
padding: 10px;
box-sizing: border-box;
color: #fff;
height: 35px;
border-bottom: 2px solid #234269;
.closeBoltDetails {
cursor: pointer;
color: #5ce2f6;
float: right;
}
}
.boltDetailsImg {
overflow: hidden;
box-sizing: border-box;
width: 184px;
padding-top: 30px;
display: inline-block;
img {
width: 184px;
}
}
.boltDetailsRight {
padding-right: 25px;
overflow: hidden;
display: inline-block;
width: 275px;
height: 220px;
color: #fff;
border-bottom: 2px solid #234269;
.boltDetailsRight_top {
display: flex;
justify-content: space-between;
box-sizing: border-box;
height: 90px;
border-bottom: 2px solid #234269;
.boltDetailsRight_top_item {
box-sizing: border-box;
padding-top: 20px;
height: 90px;
p {
font-size: 16px;
color: #c5cacf;
}
.alarmNumber {
color: red;
}
.itemTitle {
margin-top: 10px;
width: 90px;
font-size: 20px;
color: #9099a6;
}
}
}
.boltDetailsRight_bottom {
.bottom_list {
height: 130px;
.listItem {
padding-top: 20px;
padding-left: 10px;
text-align: left;
height: 130px;
div {
font-size: 16px;
margin-bottom: 10px;
}
span {
color: #9099a6;
}
}
}
}
}
}
.pointImg {
position: absolute;
left: 10px;
top: 200px;
width: 40px;
height: 100px;
}
.showGantryCrane_top_left {
margin-right: 50px;
display: inline-block;
width: 1100px;
.operationInfo_towercrane {
height: 450px;
width: 100%;
position: relative;
margin-bottom: 20px;
border: 1px solid #1a4c5a;
.imgGantry {
width: 100%;
height: 100%;
}
}
.hookBox {
position: absolute;
height: 402px;
width: 64.5%;
right: 13.5%;
top: 35px;
}
.hook {
position: absolute;
width: 40px;
text-align: center;
transition: all 0.5s;
img {
width: 40px;
}
.imgMid {
width: 20px;
height: 50px;
transition: all 0.5s;
}
}
}
.showGantryCrane_top_right {
overflow: hidden;
height: 450px;
width: 400px;
color: #fbfbfe;
display: inline-block;
.driverInformationBox {
margin-bottom: 20px;
text-align: left;
.driverInformationTitle {
box-sizing: border-box;
padding: 6px;
font-size: 24px;
background: linear-gradient(to right, #3786d6, #182a3c);
}
.driverInformation {
padding-top: 20px;
font-size: 16px;
}
}
.equipmentInformationBox {
text-align: left;
.equipmentInformationTitle {
box-sizing: border-box;
padding: 6px;
font-size: 24px;
background: linear-gradient(to right, #3786d6, #182a3c);
}
.equipmentInformation {
padding-top: 20px;
font-size: 16px;
.liftingWeight {
padding-left: 25px;
}
}
}
}
.showGantryCrane_bottom {
padding: 0px 40px;
color: #fbfbfe;
.operationData {
padding: 10px;
display: flex;
justify-content: space-between;
.operationData_item {
box-sizing: border-box;
padding-top: 20px;
font-size: 24px;
text-align: center;
height: 95px;
width: 220px;
border-right: 2px solid #0f1b30;
border-bottom: 2px solid #0f1b30;
}
}
.alarmData {
display: flex;
justify-content: space-between;
padding: 10px;
.alarmData_item {
box-sizing: border-box;
padding-top: 20px;
font-size: 24px;
text-align: center;
height: 95px;
width: 200px;
border-right: 2px solid #0f1b30;
border-bottom: 2px solid #0f1b30;
.alarmP {
height: 4px;
display: inline-block;
width: 140px;
border-radius: 4px;
background: #9acd32;
}
.alarmWarning {
background: #c9a623;
}
.alarmPolice {
background: #fe6565;
}
}
}
}
.el-dialog__wrapper {
/deep/ .el-dialog {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
.el-dialog__body {
background: #262d47;
}
.el-dialog__header {
background: #262d47;
.el-dialog__title {
color: #6ce9f0;
font-size: 17px;
font-weight: 900;
.el-dialog__headerbtn {
.el-dialog__close {
color: #262d47;
}
}
}
.el-dialog__title::before {
background: #262d47;
}
}
}
}
.normal {
color: #35d17e;
}
.alert {
color: #e54948;
}
.TowerAlarm_item {
width: 90%;
padding: 10px;
font-size: 14px;
display: flex;
flex-wrap: wrap;
p {
width: 50%;
}
.p1 {
width: 43%;
}
.p2 {
width: 47%;
}
}
.digitalSitePage {
position: relative;
width: 100%;
}
.mapContent {
width: calc(54% - 60px);
height: calc(100% - 100px);
text-align: center;
float: left;
position: relative;
margin: 0 30px;
.mapUrl {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
}
.lgMapContent {
text-align: left !important;
}
::-webkit-scrollbar {
width: 2px;
height: 4px;
margin-top: 3px;
color: #636364;
}
.pointTabBox {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
position: absolute;
width: 900px;
height: 44px;
overflow-x: auto;
white-space: nowrap;
top: 90%;
left: 25%;
li {
margin-right: 35px;
width: 120px;
height: 39px;
background-image: url('~@/assets/images/dataBoard/tabBG.png');
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&.active {
background-image: url('~@/assets/images/dataBoard/tabBG-active.png');
color: #f7d300;
}
}
}
.point {
position: absolute;
align-items: center;
z-index: 2;
cursor: pointer;
user-select: none;
img {
width: 52px;
height: 58px;
}
.devName {
color: #fff;
font-size: 13px;
}
}
.pointDialog_s {
position: absolute;
left: 240px;
top: 90px;
background-color: #000;
padding: 15px 15px 10px;
z-index: 3;
box-shadow: 0 2px 4px 0 #1a4c5a;
border: 1px solid #1a4c5a;
.title {
padding-bottom: 6px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(20, 83, 72, 0.4);
text-align: left;
font-size: 15px;
.closeBtn {
float: right;
font-size: 20px;
cursor: pointer;
&:hover {
color: #5ce2f6;
}
}
}
.pointDialogContent {
margin-top: 20px;
}
}
.dialogDataBox {
float: left;
width: 100px;
border: 1px solid rgba(255, 255, 255, 0.2);
margin: 0 5px 10px 5px;
padding: 10px 0;
text-align: center;
height: 45px;
p {
font-size: 12px;
&:first-child {
margin-bottom: 3px;
span {
font-size: 18px;
}
}
}
}
.pointDialog_l {
width: 100%;
height: 800px;
padding-top: 1px;
background-size: 100% 100%;
z-index: 3;
.closeBtn {
position: absolute;
right: 22px;
top: 21px;
font-size: 23px;
color: #5ce2f6;
cursor: pointer;
}
.pointDialogContent {
margin: 40px 70px;
height: calc(100% - 80px);
/deep/.areaTreeInner {
background-color: transparent;
text-align: left;
padding: 0;
height: 100%;
width: 224px;
margin-right: 25px;
border: 1px solid rgba(26, 76, 90, 1);
.pageTitle {
display: none;
}
.treeBox {
background-color: transparent;
height: 100%;
}
.el-tree {
color: white;
}
}
/deep/.el-tree-node {
width: 80%;
white-space: normal;
}
}
}
.dialogBlock {
color: #fff;
.dialogBlockContent {
margin: 20px;
text-align: left;
.deviceInfo,
.driverInfo,
.realTimeInfo {
margin: 20px 0px 20px 10px;
p {
margin-bottom: 10px;
span {
position: relative;
div {
position: absolute;
background: #091936;
border-radius: 5px;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
width: 190px;
box-sizing: border-box;
left: -200px;
z-index: 10;
top: -25px;
}
.showTitle1 {
top: -25px;
}
.showTitle2 {
top: -25px;
}
}
}
}
}
}
.towerCrane {
display: flex;
align-items: center;
flex-wrap: wrap;
p {
width: 50%;
margin-bottom: 10px;
}
}
.towerDialog {
.dialogBlock {
float: left;
}
.left {
width: 28%;
height: 100%;
}
.right {
width: 28%;
height: 100%;
}
.center2 {
float: left;
height: 100%;
width: calc(44% - 4px - 50px);
.realTimeInfo {
margin: 20px 0px 20px 10px;
text-align: left;
p {
margin-bottom: 10px;
color: #fff;
span {
position: relative;
div {
position: absolute;
background: #091936;
border-radius: 5px;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
width: 190px;
box-sizing: border-box;
left: -200px;
z-index: 10;
top: -25px;
}
.showTitle1 {
top: -25px;
}
.showTitle2 {
top: -25px;
}
}
}
}
.towerCrane {
display: flex;
align-items: center;
flex-wrap: wrap;
p {
width: 50%;
margin-bottom: 10px;
}
}
}
.driverInfo {
margin-left: 10px;
display: flex;
align-items: center;
img {
width: 100px;
height: 100px;
margin-right: 20px;
}
}
}
.liferDialog {
.left {
width: 100%;
}
.leftTop {
height: 60%;
.dialogBlockContent {
height: calc(100% - 40px);
}
.leftTopInner {
height: calc(100% - 24px);
}
}
.realTimeInfo2 {
float: left;
width: calc(60% - 10px);
margin: 20px 0 0 10px;
}
.lifterRunBox {
float: left;
width: 40%;
text-align: center;
position: relative;
.lifter2 {
position: absolute;
left: calc(50% + 8px);
transition: all 0.5s;
}
}
.leftBottom {
margin-top: 10px;
overflow: hidden;
display: flex;
justify-content: space-between;
height: calc(40% - 10px);
.dialogBlock {
float: left;
width: 33%;
height: calc(100% - 2px);
}
}
}
.dialogTable {
width: 100%;
border-spacing: 0;
text-align: center;
margin-top: 20px;
thead {
background-color: rgba(7, 56, 56, 0.6);
font-size: 13px;
}
td,
th {
padding: 5px;
font-weight: normal;
}
}
.lifterRunBox {
img {
display: inline-block;
}
}
.uploadTime {
text-align: left;
font-size: 13px;
margin-bottom: 10px;
}
.carDialog {
.top {
overflow: hidden;
height: 40%;
margin-bottom: 10px;
.dialogBlock {
float: left;
width: calc(50% - 7px);
height: calc(100% - 2px);
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
}
.bottom {
height: calc(60% - 10px);
.dialogBlock {
height: calc(100% - 2px);
}
}
}
.allTowerTrack {
width: 100%;
height: 20%;
flex-wrap: wrap;
position: relative;
text-align: right;
.cycle_border1 {
border: #f5a623 3px solid;
}
.cycle_border2 {
border: #f5a623 3px dashed;
}
.cycle {
cursor: pointer;
width: 75px;
height: 75px;
border-radius: 50%;
padding: 0 !important;
position: absolute;
right: 10px;
top: 0px;
}
.cycle img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -15px;
z-index: 100;
}
.cycle p {
position: absolute;
width: 2px;
left: 50%;
top: 0;
height: 100%;
transform: rotate(0deg);
margin-left: -1px;
padding: 0;
transition: all 0.5s;
}
.cycle p span {
display: block;
height: 50%;
}
.cycle p span:first-child {
background-color: #f5a623;
}
.cycle p span:last-child {
background-color: transparent;
}
}
.tower_wrap {
position: relative;
.rings,
.line,
.hock {
position: absolute;
}
}
/deep/.selectVideoBox {
.el-input__inner {
background-color: transparent;
color: #fff;
}
}
.alarmList {
position: absolute;
right: 10px;
bottom: 15px;
background-color: #193b43;
border-radius: 3px;
text-align: center;
z-index: 2;
.alarmTitle {
padding-top: 10px;
}
}
.transdata1 {
height: 220px;
padding: 15px 20px 15px 20px;
box-sizing: border-box;
}
.tody-table-header2 {
overflow: hidden;
}
.tody-table-header2 li {
height: 24px;
width: 82px;
line-height: 24px;
list-style: none;
float: left;
font-size: 13px;
margin-right: 20px;
font-family: MicrosoftYaHei;
color: rgba(127, 250, 255, 1);
text-align: center;
background-size: 100% 100%;
&:last-child {
width: 160px;
}
}
.tody-table-header2 li:last-child {
margin-right: 0;
}
#detetion-box2 {
margin-top: 5px;
height: 150px;
overflow: hidden;
}
#detetion-box2 ul {
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#detetion-box2 li {
width: 82px;
height: 24px;
line-height: 24px;
float: left;
margin-right: 20px;
font-size: 12px;
color: #fff;
&:last-child {
width: 160px;
}
}
#detetion-box2 ul li:last-child {
margin-right: 0;
}
.floatBtn {
position: absolute;
right: 10px;
bottom: 50px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #193b43;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 2;
}
.el-icon-minus {
position: absolute;
right: 20px;
top: 10px;
font-size: 20px;
cursor: pointer;
}
.gray {
-webkit-filter: grayscale(90%);
-moz-filter: grayscale(90%);
-ms-filter: grayscale(90%);
-o-filter: grayscale(90%);
filter: grayscale(90%);
filter: gray;
}
.towerRunBox {
margin: 0 auto;
position: relative;
display: inline-block;
}
.moveBox,
.xMove,
.lines {
position: absolute;
left: 0;
top: 0;
transition: all 1s;
}
.lines,
.xMove {
top: 82px;
}
.lines {
width: 10px;
max-height: 340px;
}
.playVideoBox2 {
width: calc(100% - 240px);
margin-left: 240px;
}
.tower-time {
position: absolute;
right: 0;
top: 0;
font-size: 12px;
line-height: 20px;
color: #fff;
}
.svg-box {
margin-top: 20px;
width: 100%;
height: 320px;
}
.dialog_box {
overflow: inherit;
}
.isIframe {
/deep/.isLongguangIframe {
left: 1730px !important;
}
}
/deep/.blockBox {
height: calc(33.33% - 25px);
margin-bottom: 25px;
width: 100%;
position: relative;
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: url('~@/assets/images/dataBoard/blockBG.png');
background-position: bottom center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.8;
top: 0;
z-index: 1;
}
.blockContent {
padding: 10px 20px;
height: calc(100% - 20px - 24px);
position: relative;
z-index: 2;
.pieAnalyse2 {
position: absolute;
top: 20%;
left: 4%;
}
.image {
position: absolute;
top: 15%;
left: 30%;
}
.devInfoBox {
display: flex;
margin-bottom: 20px;
flex-wrap: wrap;
overflow: hidden;
.item {
display: inline-flex;
align-items: center;
flex: 1;
img {
margin-right: 7px;
margin-left: 20px;
}
p {
opacity: 0.8;
font-size: 14px;
}
.num {
opacity: 1;
font-size: 20px;
}
}
.videoCount,
.onlineVideoCount {
display: flex;
height: 45px;
line-height: 45px;
flex: 1;
color: #fff !important;
}
.videoCount {
margin-left: 27px;
padding-left: 10px;
box-sizing: border-box;
background-image: linear-gradient(
to right,
rgba(92, 226, 246, 0),
rgba(92, 226, 246, 0.2)
);
}
.onlineVideoCount {
margin-right: 27px;
background-image: linear-gradient(
to left,
rgba(92, 226, 246, 0),
rgba(92, 226, 246, 0.2)
);
padding-left: 15px;
}
.list-box {
overflow: hidden;
height: 140px;
box-sizing: border-box;
margin-top: 15px;
width: 370px;
.list-item {
height: 37px;
width: 370px;
line-height: 37px;
display: flex;
margin-top: 8px;
p {
text-overflow: ellipsis;
white-space: nowrap;
height: 37px;
overflow: hidden;
line-height: 37px;
flex: 2;
padding: 0 10px;
}
.inNum {
margin-right: 17px;
}
.outNum {
margin-right: 17px;
}
}
.online {
background-color: #0a2124;
.type {
display: inline-block;
width: 50px;
border-radius: 10px;
text-align: center;
height: 18px;
line-height: 18px;
margin-top: 10px;
margin-left: 10px;
font-size: 15px;
background-color: #298372;
}
.alarm {
margin-right: 41px;
}
}
.offline {
background-color: #121a21;
.type {
display: inline-block;
width: 50px;
border-radius: 10px;
text-align: center;
height: 18px;
line-height: 18px;
margin-top: 10px;
margin-left: 10px;
font-size: 15px;
background-color: #949494;
}
.alarm {
margin-right: 41px;
}
}
}
.video {
width: 370px;
padding-left: 13px;
box-sizing: border-box;
}
}
}
}
.blockTitle3 {
padding-left: 10px;
color: #ffffff !important;
font-weight: normal !important;
&::before {
content: '';
display: inline-block;
background-color: #fff;
width: 3px;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-image: linear-gradient(#0054dd, #27a3e2);
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink