admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
zhgdyun/src/views/projectAdmin/dataBoardTwo/digitalSite.vue
骆乐 3aa15ac249 更改了全局样式
2022-06-15 17:25:37 +08:00

6059 lines
212 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" alt="" />
</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 id="detetion-con2">
<!-- <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">
<!-- 塔吊设备 -->
<div class="blockBox">
<div class="blockTitle">
{{ $t("message.companyDiagram.towerDev") }}
</div>
<div class="blockContent">
<div class="devInfoBox">
<div class="item">
<img src="@/assets/images/dataBoard/tower.png" alt="" />
<div>
<p class="num" style="color: #5181f6">{{ totalTowerDev }}</p>
<p>
<!-- 塔吊总数 -->
{{ $t("message.dataBoard.totalTowerDev") }}
</p>
</div>
</div>
<div class="item">
<img src="@/assets/images/dataBoard/alarmcount.png" alt="" />
<div>
<p class="num" style="color: #f67f51">
{{ totalDangerTowerDev }}
</p>
<p>
<!-- 今日报警总数 -->
{{ $t("message.dataBoard.todayAlarmCount") }}
</p>
</div>
</div>
<div class="list-box">
<vue-scroll>
<div
class="list-item"
:class="item.devonline == 0 ? 'offline' : 'online'"
v-for="(item, index) in towerList"
:key="index"
>
<span class="type" v-if="item.devonline != 0">在线</span>
<span class="type" v-else>离线</span>
<p>{{ item.devName }}</p>
<span v-if="item.alarmNum == ''" class="alarm"
>今日报警:0</span
>
<span v-else class="alarm"
>今日报警:{{ item.alarmNum }}</span
>
</div>
</vue-scroll>
</div>
</div>
</div>
</div>
<!-- 升降机设备 -->
<div class="blockBox">
<div class="blockTitle">
{{ $t("message.companyDiagram.lifterDev") }}
</div>
<div class="blockContent dataBoxContent">
<div class="devInfoBox">
<div class="item">
<img src="@/assets/images/dataBoard/lifter.png" alt="" />
<div>
<p class="num" style="color: #5181f6">{{ totalLifterDev }}</p>
<p>
<!-- 升降机总数 -->
{{ $t("message.dataBoard.totalLifterDev") }}
</p>
</div>
</div>
<div class="item">
<img src="@/assets/images/dataBoard/alarmcount.png" alt="" />
<div>
<p class="num" style="color: #f67f51">
{{ totalDangerLifterDev }}
</p>
<p>
<!-- 今日报警总数 -->
{{ $t("message.dataBoard.todayAlarmCount") }}
</p>
</div>
</div>
<div class="list-box">
<vue-scroll>
<div
class="list-item"
:class="item.devonline == 0 ? 'offline' : 'online'"
v-for="(item, index) in lifterList"
:key="index"
>
<span class="type" v-if="!item.devonline">在线</span>
<span class="type" v-else>离线</span>
<p>{{ item.devName }}</p>
<span class="alarm">今日报警:{{ item.alarmNum }}</span>
</div>
</vue-scroll>
</div>
</div>
</div>
</div>
<!-- 视频设备 -->
<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"
style="width: 100%; height: 100%; overflow: hidden;"
>
<img
:src="bgUrl"
style="width: 100%; height: auto; position: relative;"
class="bgPackImg"
ref="bgPackImg"
@load="countBoxSize"
/>
<!-- <el-image
style="width: 100%; height: auto;position: relative;"
:src="bgUrl"
class="bgPackImg"
ref="bgPackImg"
></el-image> -->
<!-- <img class="bgPackImg" src="@/assets/images/longguang2/bg.jpg" alt="" style="width: auto; height: auto;position:absolute"
ref="bgPackImg">
点位 -->
<div
v-for="(item, index) in pointList"
class="point"
:key="index"
:style="{
top: (item.mapY / imgHeightScale - 36) + 'px',
left: (item.mapX / imgWidthScale - 22) + 'px',
}"
@click="clickPoint(item)"
>
<img :src="getDevIcon(item.devType)" alt="" />
<div class="devName">{{ item.name }}</div>
</div>
<!-- 人脸闸机弹框 -->
<div
class="faceDevBox pointDialog_s"
v-show="showFaceDevDialog"
:style="{ left: faceDevDetail.x, top: faceDevDetail.y }"
>
<div class="title">
{{ faceDevDetail.name }}
<span class="closeBtn" @click="showFaceDevDialog = false">
<i class="el-icon-close"></i>
</span>
<!-- "在线" "离线"-->
<span
class="devStatus"
:class="{
red:
!faceDevDialogData.ufaceDev ||
faceDevDialogData.ufaceDev.deviceState != 1,
}"
>{{
faceDevDialogData.ufaceDev &&
faceDevDialogData.ufaceDev.deviceState == 1
? $t("message.dataBoard.online")
: $t("message.dataBoard.notOnline")
}}</span
>
</div>
<div class="blockTitle blockTitle2" style="margin-bottom: 10px">
<i></i
><!-- 进出统计 -->{{
$t("message.dataBoard.inAndOutStatistics")
}}
</div>
<div class="timeInner">
<p>
<!-- 今日进场人次 -->
{{ $t("message.dataBoard.todayInPeople") }}
</p>
<div class="bg1 small">
<span class="num">{{
faceDevDialogData.totalAttendance.inTotalNum
}}</span>
</div>
</div>
<div class="timeInner">
<p>
<!-- 今日出场人次 -->
{{ $t("message.dataBoard.todayOutPeople") }}
</p>
<div class="bg1 small">
<span class="num">{{
faceDevDialogData.totalAttendance.outTotalNum
}}</span>
</div>
</div>
<div
v-if="faceDevDialogData.list.length > 0"
class="blockTitle blockTitle2"
style="margin-bottom: 10px"
>
<i></i
><!-- 进出记录 -->{{ $t("message.dataBoard.inAndOutRecords") }}
</div>
<div
class="inOutListBox"
:style="{
height: faceDevDialogData.list.length > 0 ? '170px' : '',
}"
>
<vue-scroll>
<ul>
<li
v-for="(item, index) in faceDevDialogData.list"
:key="index"
>
<img
:src="$store.state.FILEURL + item.imageUrl"
alt=""
width="20"
height="30"
/>
<span class="workerName">{{ item.workerName }}</span>
<span class="time">{{ item.createTime }}</span>
<span
class="type"
:class="{ type2: item.passType == 1 }"
>{{
item.passType == 1
? $t("message.dataBoard.in")
: $t("message.dataBoard.out")
}}</span
>
</li>
</ul>
</vue-scroll>
</div>
</div>
<!-- 环境设备弹框 -->
<div
class="environBox pointDialog_s"
v-show="showEnvironDialog"
:style="{ left: environBoxPos.x, top: environBoxPos.y }"
>
<!-- 实时数据 -->
<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"
:style="{ left: electricBoxPos.x, top: electricBoxPos.y }"
>
<!-- 实时数据 -->
<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">
<!-- <div class="videoListBox">
<ul>
<li></li>
</ul>
</div> -->
<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
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
? towerBasicInfo.tower.devName
: "--"
}}
</p>
<!-- 设备编号： -->
<p>
{{ $t("message.dataBoard.devCode") + ":" }}
{{
towerBasicInfo.tower ? towerBasicInfo.tower.devSn : "--"
}}
</p>
<!-- 设备备案号： -->
<p>
{{ $t("message.dataBoard.devAQ") + ":" }}
{{
towerBasicInfo.tower
? towerBasicInfo.tower.registNo
: "--"
}}
</p>
<!-- 生产厂家： -->
<p>
{{ $t("message.dataBoard.manufacturer") + ":" }}
{{
towerBasicInfo.tower
? towerBasicInfo.tower.factoryName
: "--"
}}
</p>
<p v-if="company == 'longguang'">
<!-- 总包单位： -->
{{ $t("message.dataBoard.mainContractor") + ":" }}
{{
towerBasicInfo.tower
? 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="towerBasicInfoDriverList.length != 0"
style="height: 130px; margin-bottom: 10px"
>
<!-- driverIdCard，idCard-->
<div
class="driverInfo"
v-for="(item, index) in towerBasicInfo.driverList"
v-if="
company == 'longguang' ||
item.idCard == towerCurrentInfo.driverIdCard
"
:key="index"
>
<img
@click="openImg(fileUrl + item.fieldAcquisitionUrl)"
v-if="item.fieldAcquisitionUrl"
:src="fileUrl + item.fieldAcquisitionUrl"
alt=""
/>
<img
v-else
src="@/assets/images/profile_photo.png"
alt=""
/>
<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"
alt=""
/>
<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 != 0"
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 class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</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>
<!-- <p v-if="item.windSpeedAlarm" class="p1">风速报警:{{item.windSpeedAlarm == 0?'正常':item.windSpeedAlarm == 1?'报警':'预警'}}</p>-->
<!--&lt;!&ndash; <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>&ndash;&gt;-->
<!-- <p v-if="item.environmentAlarm" class="p2">环境防撞报警:{{item.environmentAlarm == 0?'正常':item.environmentAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.heightAlarm" class="p1">高度上限位报警:{{item.heightAlarm == 0?'正常':item.heightAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.maxRangeAlarm" class="p2">幅度外限位报警:{{item.maxRangeAlarm == 0?'正常':item.maxRangeAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.minRangeAlarm" class="p1">幅度内限位报警:{{item.minRangeAlarm == 0?'正常':item.minRangeAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.momentAlarm" class="p2">力矩报警:{{item.momentAlarm == 0?'正常':item.momentAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.multiAlarm" class="p1">多机防撞报警:{{item.multiAlarm == 0?'正常':item.multiAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.negAngleAlarm" class="p2">逆时针回转限位报警:{{item.negAngleAlarm == 0?'正常':item.negAngleAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.posAngleAlarm" class="p1">顺时针回转限位报警 :{{item.posAngleAlarm == 0?'正常':item.posAngleAlarm == 1?'报警':'预警'}}</p>-->
</div>
</div>
</vue-scroll>
<div v-else style="text-align: center">
<img
style="height: 150px; margin-top: 100px"
src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
alt=""
/>
<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%"
></svg>
</div>
<!-- <div class="blockTitle blockTitle2"><i></i>预警信息</div>-->
<!-- <div class="deviceInfo">-->
<!-- <vue-scroll v-if="TowerWarningList" style="height: 145px; margin-bottom: 10px">-->
<!-- <div-->
<!-- class="driverInfo"-->
<!-- v-for="(item, index) in TowerWarningList"-->
<!-- :key="index"-->
<!-- >-->
<!-- <div class="TowerAlarm_item">-->
<!-- <p class="p1">设备名称:{{item.devName}}</p>-->
<!-- <p class="p2">预警时间：{{ transformTimestamp(item.alarmTime) }}</p>-->
<!-- <p class="p1">报警类别：{{ item.alarmType == 1?'报警':'预警' }}</p>-->
<!-- <p class="p2">角度:{{item.angle}}°</p>-->
<!-- <p class="p1">高度:{{item.height}}m</p>-->
<!-- <p class="p2">载重:{{item.loading}}kg</p>-->
<!-- <p class="p1">载重量比:{{item.loadRatio}}%</p>-->
<!-- <p class="p2">风速:{{item.windspeed}}m/s</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </vue-scroll>-->
<!-- </div>-->
</div>
</div>
<div class="towerBox center2">
<div class="towerRunBox">
<img
v-if="nutHostId"
class="pointImg"
src="@/assets/images/operationInfo/arrow2.png"
alt=""
/>
<div v-if="nutHostId" class="nutBox">
<img
class="nut"
@click="nutDetails"
src="@/assets/images/towericon/dff5abfe994eea124e60ef732de8e89.png"
alt=""
/>
<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"
alt=""
/>
</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"
v-if="item.alarm == 1 || item.offLine == 1"
: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>
<img
src="@/assets/images/towericon/towerBG.png"
alt=""
ref="towerBG"
v-if="company != 'longguang'"
/>
<!-- 龙光样式 -->
<img
src="@/assets/images/towericon/towerBG2.png"
alt=""
ref="towerBG"
v-if="company == 'longguang'"
style="width: 496px; height: 484px"
/>
<img
src="@/assets/images/towericon/1.png"
alt=""
v-show="hideGoods && company != 'longguang'"
class="xMove"
id="xMove"
:style="{ top: '70px', left: coordData.coordX + 'px' }"
/>
<img
src="@/assets/images/towericon/line.png"
alt=""
class="lines"
id="line"
v-show="hideGoods && company != 'longguang'"
:style="{
left: coordData.coordX + 8 + 'px',
height: coordData.lineLength + 'px',
top: '78px',
}"
/>
<!-- 龙光样式 -->
<img
src="@/assets/images/towericon/line2.png"
alt=""
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="moveBox"
v-show="hideGoods && company != 'longguang'"
:style="{
top: coordData.coordY + 'px',
left: coordData.coordX - 6 + 'px',
}"
>
<img src="@/assets/images/towericon/hock.png" alt="" />
</div>
<!-- 龙光样式 -->
<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"
alt=""
/>
</div>
<!-- <img
src="@/assets/images/towericon/towerBG.png"
alt=""
class="towerImg"
ref="towerBG"
/>
<img id="xMove"
v-show="hideGoods"
src="@/assets/images/towericon/1.png"
alt=""
class="rings"
/>
<img
v-show="hideGoods"
src="@/assets/images/towericon/line.png" id="line"
alt=""
class="line"
/>
<img id="moveBox"
v-show="hideGoods"
src="@/assets/images/towericon/hock.png"
alt=""
class="hock"
/> -->
</div>
<div
class="allTowerTrack flex"
ref="allTowerTrack"
:style="{ height: company == 'longguang' ? '16%' : '20%' }"
>
<div class="cycle cycle_border1">
<!-- :style="{ top: item.mapY + 'px', left: item.mapX + 'px' }" -->
<!-- @click="getDevData(item)" -->
<!-- checkedIndex == item.id ? 'cycle_border1' : 'cycle_border2' -->
<img src="@/assets/images/towericon/tower.png" />
<!-- <p id="arrow" :style="{ transform: `rotate(${angle}deg)` }"> -->
<p
id="arrow"
:style="{
transform: `rotate(${
towerCurrentInfo ? towerCurrentInfo.angle : ''
}deg)`,
}"
>
<span></span><span></span>
</p>
</div>
</div>
<div
class="blockTitle blockTitle2"
v-if="company == 'longguang'"
:class="company == 'longguang' ? 'blockTitle3' : ''"
>
<i v-if="company != 'longguang'"></i>
<!-- 塔吊运行信息 -->{{
$t("message.dataBoard.towerRunInfo")
}}
<span class="tower-time"
><!-- 当前上传时间： -->{{
$t("message.dataBoard.nowUpdateTime") + ":"
}}{{
towerBasicInfo.tower && towerBasicInfo.tower.realTime
? 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
? 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
? 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 ? 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 ? 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 ? 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 ? 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 ? 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 ? 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 && towerBasicInfo.tower.realTime
? 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
? 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
? 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 ? 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 ? 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 ? 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 ? 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 ? 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 ? 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>
<!-- <el-button
type="primary"
style="margin-left: 10px"
size="medium"
@click="changVideoSize"
>全屏播放</el-button> -->
<!-- <el-button
type="primary"
style="margin-left: 10px"
size="medium"
>查询</el-button
> -->
</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 != 0"
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>
<!-- <p v-if="item.windSpeedAlarm" class="p1">风速报警:{{item.windSpeedAlarm == 0?'正常':item.windSpeedAlarm == 1?'报警':'预警'}}</p>-->
<!--&lt;!&ndash; <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>&ndash;&gt;-->
<!-- <p v-if="item.environmentAlarm" class="p2">环境防撞报警:{{item.environmentAlarm == 0?'正常':item.environmentAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.heightAlarm" class="p1">高度上限位报警:{{item.heightAlarm == 0?'正常':item.heightAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.maxRangeAlarm" class="p2">幅度外限位报警:{{item.maxRangeAlarm == 0?'正常':item.maxRangeAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.minRangeAlarm" class="p1">幅度内限位报警:{{item.minRangeAlarm == 0?'正常':item.minRangeAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.momentAlarm" class="p2">力矩报警:{{item.momentAlarm == 0?'正常':item.momentAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.multiAlarm" class="p1">多机防撞报警:{{item.multiAlarm == 0?'正常':item.multiAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.negAngleAlarm" class="p2">逆时针回转限位报警:{{item.negAngleAlarm == 0?'正常':item.negAngleAlarm == 1?'报警':'预警'}}</p>-->
<!-- <p v-if="item.posAngleAlarm" class="p1">顺时针回转限位报警 :{{item.posAngleAlarm == 0?'正常':item.posAngleAlarm == 1?'报警':'预警'}}</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"
alt=""
/>
<p>
<!-- 暂无数据 -->
{{ $t("message.dataBoard.nodata") }}
</p>
</div>
</div>
</div>
</div>
</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">
<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">-->
<!-- <p>-->
<!-- <span>{{-->
<!-- lifterCurrentData.loading-->
<!-- ? lifterCurrentData.loading-->
<!-- : "&#45;&#45;"-->
<!-- }}</span>-->
<!-- kg-->
<!-- </p>-->
<!-- <p>重量</p>-->
<!-- </div>-->
<div
class="dialogDataBox"
:class="[
'normal',
{
alert:
lifterCurrentData.heightAlarm != 0 ||
lifterCurrentData.heightPreAlarm != 0,
},
]"
>
<p>
<span>{{
lifterCurrentData.height
? lifterCurrentData.height
: "--"
}}</span>
m
</p>
<p>
<!-- 高度 -->
{{ $t("message.dataBoard.height") }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{ floorNum ? floorNum : "--" }}</span>
%
</p>
<!-- <p>速度</p> -->
<p>
<!-- 高度百分比 -->
{{ $t("message.dataBoard.heightPercentage") }}
</p>
</div>
<div class="dialogDataBox">
<p>
<span
>{{
lifterCurrentData.floorNum
? lifterCurrentData.floorNum
: "--"
}}/{{
lifterInfo.lifter
? lifterInfo.lifter.totalFloor
? 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></div> -->
<div
class="dialogDataBox"
:class="[
'normal',
{
alert:
lifterCurrentData.obliguityXAlarm != 0 ||
lifterCurrentData.obliguityXPreAlarm != 0,
},
]"
>
<p>
<!-- lifterCurrentData.obliguityXAlarm-->
<span>{{
lifterCurrentData.dipAngleX
? 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
? 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
? 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
? 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 class="dialogDataBox">
<p>
<span>{{
lifterCurrentData.peopleNumber
? lifterCurrentData.peopleNumber
: "--"
}}</span>
人
</p>
<p>当前人数</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
lifterCurrentData.loadRatio
? lifterCurrentData.loadRatio
: "--"
}}</span>
%
</p>
<p>重量百分比</p>
</div> -->
</div>
<div class="lifterRunBox fullHeight">
<img
src="@/assets/images/dataBoard/lifter-1.png"
ref="lifterHeight"
alt=""
style="
width: 130px;
height: 417px;
position: relative;
bottom: 42px;
"
/>
<img
src="@/assets/images/dataBoard/lifter-2.png"
alt=""
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 ? lifterInfo.lifter.devName : "--"
}}
</p>
<p>
<!-- 设备编号： -->{{
$t("message.dataBoard.devCode") + ":"
}}{{
lifterInfo.lifter ? lifterInfo.lifter.devSn : "--"
}}
</p>
<p>
<!-- 设备备案号： -->{{
$t("message.dataBoard.devAQ") + ":"
}}{{
lifterInfo.lifter
? lifterInfo.lifter.registNo
: "--"
}}
</p>
<p>
<!-- 设备最大载重： -->{{
$t("message.dataBoard.devMaxLoad") + ":"
}}{{
lifterInfo.lifter
? lifterInfo.lifter.maxLoad
: "--"
}}kg
</p>
<p v-if="company == 'longguang'">
<!-- 总包单位： -->
{{ $t("message.dataBoard.mainContractor") + ":"
}}{{
lifterInfo.lifter
? 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>
<vue-scroll
v-if="lifterInfoDriverList.length"
style="width: 100%; height: 236px"
>
<div
v-for="(item, index) in lifterInfo.driverList"
:key="index"
v-if="
company == 'longguang' ||
item.idCard == lifterCurrentData.driverIdCard
"
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)"
alt=""
style="
display: inline-block;
vertical-align: middle;
"
/>
</div>
</vue-scroll>
<div v-else style="text-align: center">
<img
style="height: 150px; margin-top: 40px"
src="@/assets/images/09b108269bb2491369b67686bd74c6a.png"
alt=""
/>
<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"
alt=""
/>
<p>
<!-- 暂无数据 -->
{{ $t("message.dataBoard.nodata") }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="right fullHeight">
<div class="dialogBlock fullHeight">
<div class="dialogBlockContent">
<div class="blockTitle blockTitle2"><i></i>循环记录</div>
<table class="dialogTable">
<thead>
<tr>
<th>开始时间</th>
<th>结束时间</th>
<th>工作时长</th>
<th>载重(kg)</th>
<th>司机</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in lifterWorkCycleList"
:key="index"
>
<td>{{ item.startTime }}</td>
<td>{{ item.endTime }}</td>
<td>{{ item.workTime }}</td>
<td>{{ item.loading }}</td>
<td>{{ item.driverName }}</td>
</tr>
</tbody>
</table>
</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>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>
<img src="" alt="" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="environBox pointDialog_s"
v-show="showCarDialog2"
:style="{ position: 'absolute', left: carBoxPos.x, top: carBoxPos.y }"
>
<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"
alt=""
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="../../projectLevel/assets/images/gantryCrane/gantry2.png"
/>
<div ref="hookBox" class="hookBox">
<!-- imgHeight:0,//照片升降高度-->
<!-- hookLeft:0//divhook向左移动距离-->
<div class="hook" :style="{ left: hookLeft + 'px' }">
<img
class="imgHead"
ref="imgHead"
src="../../projectLevel/assets/images/gantryCrane/head.png"
alt=""
/>
<img
:style="{ height: imgHeight + 45 + 'px' }"
class="imgMid"
src="../../projectLevel/assets/images/gantryCrane/mid.png"
alt=""
/>
<img
class="imgBottom"
src="../../projectLevel/assets/images/gantryCrane/bottom.png"
alt=""
/>
</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 class="driverInformationWorkingYears">工作年限：3</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">
<div class="blockBox">
<!-- 人脸闸机 -->
<div class="blockTitle">
{{ $t("message.companyDiagram.ufaceDev") }}
</div>
<div class="blockContent">
<div class="devInfoBox">
<div class="item">
<img src="@/assets/images/dataBoard/uface.png" alt="" />
<div>
<p class="num" style="color: #5181f6">
{{ ufaceList.length }}
</p>
<p>
<!-- 人脸闸机总数 -->
{{ $t("message.dataBoard.ufaceDev") }}
</p>
</div>
</div>
<div class="item">
<img src="@/assets/images/dataBoard/inpeople.png" alt="" />
<div>
<p class="num" style="color: #f67f51">{{ ufaceInCount }}</p>
<p>
<!-- 今日进场人数 -->
{{ $t("message.dataBoard.todayInPeople") }}
</p>
</div>
</div>
<div class="list-box">
<vue-scroll>
<div
class="list-item"
:class="item.deviceState == 2 ? 'offline' : 'online'"
v-for="(item, index) in ufaceList"
:key="index"
>
<span class="type" v-if="item.deviceState == 1">在线</span>
<span class="type" v-else>离线</span>
<p>{{ item.devName }}</p>
<span class="inNum">进场人数:{{ item.inTotalNum }}</span>
<span class="outNum">出场人数:{{ item.outTotalNum }}</span>
</div>
</vue-scroll>
</div>
</div>
</div>
</div>
<div class="blockBox">
<!-- 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"
alt=""
v-show="!dangerAlarmTypeList.length"
/>
</div>
</div>
<div class="blockBox">
<!-- 环境监测 -->
<div class="blockTitle">
{{ $t("message.companyDiagram.environmentMonitor") }}
</div>
<div class="blockContent">
<div class="devInfoBox">
<div class="item">
<img src="@/assets/images/dataBoard/online.jpg" alt="" />
<div>
<p class="num" style="color: #5181f6">{{ onlineDevNum }}</p>
<p>
<!-- 在线设备 -->
{{ $t("message.dataBoard.onlineDev") }}
</p>
</div>
</div>
<div class="item">
<img src="@/assets/images/dataBoard/offline.jpg" alt="" />
<div>
<p class="num" style="color: #f67f51">{{ offlineDevNum }}</p>
<p>
<!-- 离线设备 -->
{{ $t("message.dataBoard.notOnlineDev") }}
</p>
</div>
</div>
<div class="list-box">
<vue-scroll>
<div
class="list-item"
:class="item.devOnline == 2 ? 'offline' : 'online'"
v-for="(item, index) in environmentDevList"
:key="index"
>
<span class="type" v-if="item.devOnline != 2">在线</span>
<span class="type" v-else>离线</span>
<p>{{ item.deviceName }}</p>
<span class="alarm" v-if="item.alarmNum"
>今日报警:{{ item.alarmNum }}</span
>
<span class="alarm" v-else>今日报警:0</span>
</div>
</vue-scroll>
</div>
</div>
</div>
</div>
</div>
<!-- 设备类型切换 -->
<div class="pointTabBox">
<ul>
<li
@click="
devType = item.id;
devTypeIndex = index;
showCarDialog2 = false;
getAllDevPointList();
"
v-for="(item, index) in devTypeList"
:key="index"
:class="{ active: devTypeIndex == index }"
v-if="
company == 'nanchang' || (company != 'nanchang' && item.id != 99)
"
>
{{ item.name }}
</li>
</ul>
</div>
</div>
<div class="placeholderBox placeholderBox2" v-else>
<img src="@/assets/images/noData3.png" alt="" 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,
getAiVideoInfo,
getAIDangerList,
} 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 {
getGantryCranelistApi, //查询设备列表
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 frontArmLength = 332; //图片塔吊臂长px
// var height = 324; //图片塔吊高度px
var imgLeftWidth = 115; //塔吊图片司机距离左边距离px
var imgLeftHeight = 70; //塔吊图片司机距离上边距离px
// var imgLeftWidth = 76; //塔吊图片司机距离左边距离px
// var imgLeftHeight = 45; //塔吊图片司机距离上边距离px
var realWidth = 0; //实际塔吊臂长m
var realHeight = 0; //实际塔吊高度m
var $moveBox;
var $moveBox2;
var $xMove;
var $line;
var $line2;
export default {
components: { areaTree, videoModule },
data() {
return {
countDownTime: null,
countDown: 5, //倒计时
company: "",
videoList: [],
playList: [],
svgTimer: null,
// [
// { name: "全部", id: "" },
// { name: "视频监控", id: 4 },
// { name: "塔吊监测", id: 2 },
// { name: "升降机监测", id: 3 },
// { name: "车辆监测", id: 1 },
// { name: "用电监测", id: 5 },
// { name: "环境监测", id: 6 },
// { name: "人脸闸机", id: 7 },
// { name: "龙门吊监测", id: 9 },
// { name: "应急管理", id: 99 },
// ],
devTypeList: this.$t("message.dataBoard.devTypeList"),
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: "" },
environBoxPos: {
x: 0,
y: 0,
},
showVideoDialog: false,
showVideoDialog2: false,
faceDevDetail: { name: "", devSn: "", x: 0, y: 0 },
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: {}, //塔吊基本信息,
towerBasicInfoDriverList: [],
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.pieAnalyse2();
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;
// this.$nextTick(()=>{
// setOffset(2180,360)
// })
}
console.log(window.localStorage.getItem("isIframe"));
}
// this.getVideoAlarm()
// this.videoAlarmTimer=setInterval(()=>{
// this.getVideoAlarm()
// },5000)
if (this.bgUrl) {
this.countBoxSize(); //计算缩放比
this.getAllDevPointList();
}
this.getDevTypeFn();
this.getDevList();
this.selectWorkerAttendanceByDev();
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");
console.log(el);
console.log(this.$refs.bgPackImg);
let boxwidth = el.offsetWidth;
let boxHeight = el.offsetHeight;
// let boxHeightWidth = boxHeight / boxwidth;
// let mapContentHeight = window.screen.height / boxHeight;
// let mapContentWidth = window.screen.width / boxwidth;
// console.log(mapContentHeight)
// this.mapContentHeight = mapContentHeight;
// this.mapContentWidth = mapContentWidth;
// imgDom.height = boxHeight;
// imgDom.width = imgDom.height / this.imgHeightWidth;
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 flag = false
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",
});
// res.result[j].currentdata.angle = Math.round(Math.random()*300)
// this.towerHeightList[i].t3.attr({
// text: "回转：" + res.result[j].currentdata.angle + "°"
// })
// flag = true
// console.log(this.towerHeightList[i].oldAngle)
if (!this.towerHeightList[i].oldAngle) {
this.towerHeightList[i].oldAngle = 0;
}
// console.log(this.towerHeightList[i]);
let oldrot = Number(this.towerHeightList[i].oldAngle),
newrot = Number(res.result[j].currentdata.angle),
_this = this;
// console.log(newrot,oldrot)
Snap.animate(
oldrot,
newrot,
function (value) {
// console.log(_this.towerHeightList[i].relatedX - _this.minX,_this.towerHeightList[i].relatedY,_this.minY);
oldrot = value;
// console.log(_this.towerHeightList[i])
if (!isNaN(value)) {
// 旋转
// console.log(_this.towerHeightList[i].relatedX - this.minX,_this.towerHeightList[i].relatedY- this.minY);
_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
)
);
// _this.towerHeightList[i].d.transform(new Snap.Matrix().rotate(value[0], _this.towerHeightList[i].relatedX - _this.minX, (_this.towerHeightList[i].relatedY - _this.minY)).translate(0, -value[1]));
}
},
500
);
this.towerHeightList[i].oldAngle = newrot;
// console.log(this.towerHeightList[i].t2)
}
}
}
this.svgTimer = setTimeout(() => {
this.selectTowerCurrentData();
}, 5000);
}
// console.log(res, '-----实时回转角度')
});
},
// 获取塔群高度
selectTowerHeight(val) {
console.log(val.devSn);
// this.heightList = this.heightList.reverse()
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
);
// console.log(this.minX);
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;
}
});
// console.log(this.minX,this.minY);
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({
// fill: "rgba(255, 87, 94, 0.12)",
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,
});
// if(this.styleType == 1 || isDockingToWoer){
// item.t1.attr({
// fill: "#2A2E3F"
// })
// }
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,
});
// if(this.styleType == 1 || isDockingToWoer){
// item.t2.attr({
// fill: "#2A2E3F"
// })
// }
}
});
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);
}
});
console.log(this.towerBasicInfo.tower.nutHostId);
console.log(this.towerBasicInfo.tower.nodeCount);
},
closeMap() {
this.showTowerDialog = false;
clearTimeout(this.svgTimer);
this.afterAnalysisDataInfo = "";
this.showBoltDetails = false;
this.showVideoDialog = false;
// this.activeLiveData = ""
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.showTowerDialog = false;
clearTimeout(this.svgTimer);
this.showLifterDialog = false;
this.showGantryCrane = false;
//清除实时获取塔吊信息
this.gantryCraneInfo = "";
this.gantryCraneOperationInfo = "";
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 x = randomNum(0,realWidth)
// var y = randomNum(0,realHeight)
var xImg, yImg;
// if (x <= realWidth) {
// xImg = (x / realWidth) * frontArmLength + imgLeftWidth
// this.warningText=''
// if (y <= realHeight) {
// yImg = (y / realHeight) * height + imgLeftHeight
// this.warningText=''
// } else {
// yImg = height + imgLeftHeight
// this.warningText='当前设备高度参数错误'
// }
// } else {
// xImg = frontArmLength + imgLeftWidth;
// this.warningText='当前设备前臂长参数错误'
// if (y <= realHeight) {
// yImg = (y / realHeight) * height + imgLeftHeight
// } else {
// yImg = height + imgLeftHeight
// this.warningText='当前设备前臂长,高度参数错误'
// }
// }
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;
// console.log(result.alarmList)
// console.log(this.dangerAlarmTypeList)
}
this.pieAnalyse();
});
// 视频设备数量
selectVideoCountList(data).then((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++;
}
/*判断滚动的距离刚好为一条公告的高度时停掉定时器，隔1s之后重新启动计时器即可实现公告滚动停留效果 */
// if (box.scrollTop % 25 == 0) {
// clearInterval(timer1);
// setTimeout(() => {
// timer1 = setInterval(scrol, 30);
// }, 2000);
// }
}
}
},
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) + 50 + "px";
this.carBoxPos.y =
parseFloat(item.mapY) / this.imgWidthScale - 20 + "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:
// this.activeLiveData = {}
console.log(item);
this.activeLiveData = item;
this.showVideoDialog = true;
// this.playList = []
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;
if (parseFloat(item.mapY) > 500) {
this.environBoxPos.y = parseFloat(item.mapY) - 200 + "px";
} else {
this.environBoxPos.y = parseFloat(item.mapY) + 0 + "px";
}
if (parseFloat(item.mapX / this.imgWidthScale) > 510) {
this.environBoxPos.x =
parseFloat(item.mapX) / this.imgWidthScale - 350 + "px";
} else {
this.environBoxPos.x =
parseFloat(item.mapX) / this.imgWidthScale + 50 + "px";
}
this.showEnvironDialog = true;
this.getRealTimeDustNoiseData(item.devSn);
break;
case 7:
this.faceDevDetail = item;
if (parseFloat(item.mapY) > 650) {
this.faceDevDetail.y = parseFloat(item.mapY) - 100 + "px";
} else {
this.faceDevDetail.y = parseFloat(item.mapY) + 0 + "px";
}
if (parseFloat(item.mapX) / this.imgWidthScale > 630) {
this.faceDevDetail.x =
parseFloat(item.mapX) / this.imgWidthScale - 150 + "px";
} else {
this.faceDevDetail.x =
parseFloat(item.mapX) / this.imgWidthScale + 50 + "px";
}
this.showFaceDevDialog = true;
this.selectWorkerAttendanceByDev();
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 {
// imgHeight:0,//照片升降高度
// hookLeft:0//divhook向左移动距离
//照片升降高度
this.imgHeight =
(260 * res.result.smallCraneMainHookHeight) /
this.gantryCraneInfo.ratedHeight;
// console.log(this.imgHeight);
//divhook向左移动距离
// console.log(this.$refs.hookBox.offsetWidth,res.result.smallCraneMainHookHeight);
this.hookLeft =
(this.$refs.hookBox.offsetWidth * res.result.smallCraneRange) /
this.gantryCraneInfo.ratedSpan;
console.log(this.hookLeft);
// //额定跨度
// this.lifter.ratedSpan
// //额定高度
// this.lifter.ratedHeight
// //div高380px
// //div宽
// this.$refs.hookBox.offsetWidth
}
this.gantryCraneInterval = setTimeout(() => {
this.getRealTimeData(devSn);
}, 5000);
} else {
this.imgHeight = 0;
this.hookLeft = 0;
}
}
});
},
//判断弹框位置
// getPosition(x){
// if(x<185){
// return 0
// }else{
// return x
// }
// },
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 9:
return require("@/assets/images/dataBoard/devIcon-gantryCrane.png");
break;
}
},
// 获取所有点位
getAllDevPointList() {
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) => {
console.log('res: ', res);
this.pointList = res.result;
console.log(res.result);
// [
// { name: "全部", id: "" },
// { name: "视频监控", id: 4 },
// { name: "塔吊监测", id: 2 },
// { name: "升降机监测", id: 3 },
// { name: "车辆监测", id: 1 },
// { name: "用电监测", id: 5 },
// { name: "环境监测", id: 6 },
// { name: "人脸闸机", id: 7 },
// { name: "龙门吊监测", id: 9 },
// { name: "应急管理", id: 99 },
// ],
});
},
//获取环境设备列表--环境监测实时数据--下拉
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.currentDevDetail = result.result[0];
this.offlineDevNum = 0;
this.onlineDevNum = 0;
this.devList.forEach((element) => {
if (element.isClosed == 2) {
this.offlineDevNum++;
} else {
this.onlineDevNum++;
}
});
// console.log('645');
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;
}
});
// // 获取报警列表数据
// getAIDangerList(data).then((res) => {
// if (res.code === 200) {
// let { result } = res;
// console.log(result);
// let type = [
// "烟感",
// "明火",
// "人员倒地",
// "未戴安全帽",
// "区域入侵",
// "越界入侵",
// "人员聚集衣",
// "反光衣",
// "裸土覆盖",
// ];
// this.AIDangerAlarmList = result.slice(0, 6).map((x) => {
// return {
// createTime: x.createTime,
// hardwareName: x.hardwareName,
// id: x.id,
// imageUrl: x.imageUrl,
// location: x.location,
// projectName: x.projectName,
// alarmType: type[x.alarmType - 1],
// };
// });
// }
// this.pieAnalyse()
// });
},
//获取环境设备详情数据
getRealTimeDustNoiseData(deviceId) {
let Id = deviceId;
let data = {
deviceId: deviceId,
projectSn: this.projectSn,
};
getRealTimeDustNoiseDataApi(data).then((res) => {
if (res.code == 200) {
if (res.result) {
this.plantCap = res.result;
this.plantCapInterval = setTimeout(() => {
this.getRealTimeDustNoiseData(Id);
}, 5000);
} else {
this.plantCap = {
crc: "--",
humidity: "--",
noise: "--",
plateHumidity: "--",
plateTemperature: "--",
pm10: "--",
pm25: "--",
pressure: "--",
temperature: "--",
tsp: "--",
voltage: "--",
winddirectionName: "--",
windspeed: "--",
};
}
}
});
},
//获取人脸闸机数据
selectWorkerAttendanceByDev() {
selectWorkerAttendanceByDevApi({
projectSn: this.projectSn,
devSn: this.faceDevDetail.devSn,
}).then((res) => {
this.faceDevDialogData = res.result;
console.log(this.faceDevDialogData);
});
},
//获取电箱设备的实时数据
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) {
let data = {
devSn,
};
let getTowerAlarmListApiData = {
devSn,
projectSn: this.projectSn,
};
getTowerAlarmListApi(getTowerAlarmListApiData).then((res) => {
console.log(res.result);
this.TowerAlarmList = res.result.records;
});
this.getTowerWarningList(devSn);
getSelectTowerBySnApi(data).then((res) => {
console.log(1);
if (res.code == 200) {
console.log(res.result);
this.towerBasicInfo = res.result;
this.weightSet = res.result.tower.weightSet;
this.towerBasicInfoDriverList = res.result.driverList;
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,
};
// console.log(111);
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);
// this.$nextTick(() => {
$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;
// let forearmLength = Number(tower.forearmLength); //实际臂长
// let towerHeight = tower.towerHeight
// ? Number(tower.towerHeight)
// : ""; //实际塔高
// let realityX = res.result ? Number(res.result.xValue) : ""; //实际吊钩x位置
// let realityY = res.result ? Number(res.result.yValue) : ""; //实际吊钩y位置
// //没有实时数据
// if (realityX == "" || realityY == "") {
// this.hideGoods = false;
// return;
// }
// // let forearmLength = 186; //实际臂长
// // let towerHeight = 120; //实际塔高
// // let realityX = 86; //实际吊钩x位置
// // let realityY = 0; //实际吊钩y位置
// let clientWidth = this.$refs.towerBG.clientWidth; //图片塔吊的宽度
// let clientHeight = this.$refs.towerBG.clientHeight; //图片塔吊的高度
// let imgLeftWidth = 52; //塔吊图片司机距离左边距离px
// let imgLeftHeight = 48; //塔吊图片司机距离上边距离px
// let slideWidth = 26; //图片滑动组件直径px
// let cargoHeight = 74; //图片货物高度px
// //实际吊钩x位置> 实际臂长
// if (forearmLength < realityX || realityX < 0) {
// this.hideGoods = false;
// // this.$message.error("当前设备前臂长参数错误");
// // console.log("当前设备前臂长参数错误")
// return;
// //实际塔高 < 实际吊钩Y位置
// } else if (towerHeight < realityY || realityY < 0) {
// this.hideGoods = false;
// // this.$message.error("当前设备高度参数错误");
// return;
// } else {
// this.hideGoods = true;
// let imgFl = clientWidth - imgLeftWidth - slideWidth; //图片臂长px
// let ratioX = imgFl / forearmLength; //计算臂长比例
// let coordX = ratioX * realityX + imgLeftWidth; //滑动组件位置
// let imgFh = clientHeight - imgLeftHeight - cargoHeight; //图片高度px 图片总高-司机距离上边距离-吊物高度
// let ratioY = imgFh / towerHeight; //计算塔吊高度比例 吊物可移动高度 - 实际塔高度
// let coordY = ratioY * realityY - imgLeftHeight; //获取 吊物当前位置
// let showHeight = imgFh - coordY; //获取到货物的高度位置
// let lineLength = showHeight - cargoHeight / 2; //获取线的长度
// // 赋值
// this.coordData = {
// coordX: coordX,
// coordY: showHeight,
// lineLength: lineLength,
// };
// }
} 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; //当前升降机所在高度
console.log(res.result);
console.log(nowHeight, height);
console.log(nowHeight);
console.log(this.floorNum);
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 = "";
// this.showHeight = 90;
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;
/*background: #121E37;*/
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;
}
/*display: flex;*/
/*justify-content: center;*/
}
}
.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 {
// border:1px #5ce2f6 solid;
// border-radius: 5px;
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;
}
}
.lgMapContent {
text-align: left !important;
}
.pointTabBox {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
position: absolute;
top: 90%;
left: 25%;
li {
margin-right: 35px;
width: 120px;
height: 39px;
background-image: url("../../../assets/images/dataBoard/box.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;
// display: inline-flex;
align-items: center;
// border-radius: 50%;
// background: rgb(236, 126, 46);
// text-align: center;
// line-height: 30px;
z-index: 2;
cursor: pointer;
user-select: none;
img {
width: 52px;
height: 58px;
}
.devName {
color: #fff;
font-size: 13px;
// margin-left: 10px;
}
}
.pointDialog_s {
position: absolute;
left: 0px;
top: 0px;
background-color: #000;
padding: 15px 15px 10px;
// width: 400px;
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: calc(25% - 12px);
width: 100px;
border: 1px solid rgba(255, 255, 255, 0.2);
// height: 50px;
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;
/*position: absolute;*/
/*left: 0;*/
/*top: 0;*/
/*background-image: url("../../../assets/images/dataBoard/pointDialog_l_BG.png");*/
background-size: 100% 100%;
z-index: 3;
/*background-color: #040d15;*/
.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;
/*background-color: rgba(0, 0, 0, 1);*/
border: 1px solid rgba(26, 76, 90, 1);
.pageTitle {
display: none;
}
.treeBox {
background-color: transparent;
height: 100%;
}
.el-tree {
color: white;
}
}
}
}
.faceDevBox {
text-align: left;
.blockTitle2 {
font-size: 14px;
}
.timeInner {
margin-bottom: 10px;
display: flex;
p {
font-size: 12px;
}
.num {
font-size: 16px;
}
}
}
.inOutListBox {
li {
font-size: 12px;
display: flex;
align-items: center;
margin-top: 5px;
.workerName {
width: 50px;
}
img {
margin-right: 10px;
}
.time {
margin-right: 20px;
}
.type {
width: 30px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 3px;
border: 1px solid rgba(81, 129, 246, 0.42);
color: #5181f6;
&.type2 {
border: 1px solid rgba(68, 215, 182, 0.42);
color: #44d7b6;
}
}
}
}
.devStatus {
background-color: #279e83;
font-size: 12px;
width: 40px;
height: 22px;
text-align: center;
line-height: 22px;
color: white;
float: right;
margin-right: 10px;
border-radius: 3px;
margin-left: 10px;
&.red {
background-color: #fe6c7f;
}
}
.dialogBlock {
/*border: 1px solid #1a4c5a;*/
/*background-color: #000;*/
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;
}
.showTitle3 {
}
.showTitle4 {
}
.showTitle5 {
}
.showTitle6 {
}
.showTitle7 {
}
.showTitle8 {
}
}
}
}
}
}
.towerCrane {
display: flex;
align-items: center;
flex-wrap: wrap;
p {
width: 50%;
margin-bottom: 10px;
}
}
.towerDialog {
.dialogBlock {
float: left;
}
.pointDialogContent {
/*background-color: #000;*/
}
.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%;
// width: calc(75% - 0px);
// float: left;
// margin-right: 0;
// .dialogBlock {
// margin-right: 10px;
// }
}
.leftTop {
height: 60%;
.dialogBlockContent {
height: calc(100% - 40px);
}
.leftTopInner {
height: calc(100% - 24px);
}
}
// .right {
// width: 25%;
// float: left;
// margin-left: 0;
// }
.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%;
// margin-right: 10px;
// width: calc(50% - 12px);
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 {
// max-height: 100%;
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;
// margin: 30px auto 0;
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%;
/* background-color: #F5A623; */
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 {
// width: 332px;
// height: 324px;
position: relative;
// margin: 100px auto 0;
// margin: 50px auto 0;
.rings,
.line,
.hock {
position: absolute;
// top: 0;
// left: 0;
}
}
/deep/.selectVideoBox {
.el-input__inner {
background-color: transparent;
color: #fff;
}
}
.alarmList {
position: absolute;
right: 10px;
bottom: 100px;
background-color: #193b43;
border-radius: 3px;
text-align: center;
z-index: 2;
.alarmTitle {
padding-top: 10px;
}
}
.transdata1 {
// background: url("../../../static/img/transdata_bg.png") no-repeat center/100%
// 100%;
height: 220px;
padding: 15px 20px 15px 20px;
box-sizing: border-box;
// transform: translateY(-12px);
}
.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: url("../../../static/img/thead_bg.png") no-repeat center/100%;
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: 100px;
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 {
// width: 50%;
margin: 0 auto;
position: relative;
display: inline-block;
// text-align: center;
}
.moveBox,
.xMove,
.lines {
position: absolute;
left: 0;
top: 0;
transition: all 1s;
// display: none;
}
.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;
}
//蓝色风格
.dataBoardPage_blue {
.pointTabBox {
li {
background-image: url("../../../assets/images/dataBoard/blueTheme/tabBG.png");
color: white;
&.active {
background-image: url("../../../assets/images/dataBoard/blueTheme/tabBG-active.png");
color: #ffffff;
}
}
}
.pointDialog_l {
background-image: none;
}
.dialogBlock {
// background-color: #03032D;
background-color: #262d47;
}
.pointDialog_s {
background-color: #091750;
}
}
// 湛蓝色
.dataBoardPage_blue2 {
.pointTabBox {
li {
background-image: url("../../../assets/images/dataBoard/blueTheme2/tabBG.png");
color: rgba(255, 255, 254, 0.8);
&.active {
background-image: url("../../../assets/images/dataBoard/blueTheme2/tabBG-active.png");
color: #ffffff;
}
}
}
.pointDialog_l {
background-image: none;
}
.dialogBlock {
// background-color: #03032D;
background-color: #262d47;
}
.pointDialog_s {
background-color: #091750;
}
}
.svg-box {
margin-top: 20px;
width: 100%;
height: 320px;
// border: 1px solid red;
}
.dialog_box {
overflow: inherit;
// /deep/.el-dialog__wrapper{
// 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