1123 lines
45 KiB
Vue
1123 lines
45 KiB
Vue
<template>
|
||
<vue-scroll style="height: 100%;">
|
||
<div class="operationInfo" :class="{'dark': styleType == 2}">
|
||
<el-row>
|
||
<el-col :span="17">
|
||
<div class="operationInfo_map">
|
||
<div class="operationInfo_select">
|
||
<el-select v-model="selectId" @change="selectTowerCrane" :placeholder="$t('message.lifter.pleaseSelect')">
|
||
<el-option
|
||
v-for="item in lifterOptions"
|
||
:key="item.id"
|
||
:label="item.devName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="operationInfo_towercrane">
|
||
<div class="lifter_box" ref="lifterBox">
|
||
<img class="lifter_icon" src="@/assets/images/operationInfo/lifter.png" />
|
||
<div class="lifter-car-box" :style="{'bottom': lifterCarHeight + 'px'}">
|
||
<img src="@/assets/images/operationInfo/lifter_car.png" />
|
||
</div>
|
||
<div class="lifter_bot"></div>
|
||
<!-- <div class="lifter-car-box left_box" :style="{'bottom': lifterCarHeight + 'px'}">
|
||
<img src="@/assets/images/operationInfo/lifter_car.png" />
|
||
</div> -->
|
||
</div>
|
||
<div class="lifter_detail" :style="{'bottom': (lifterCarHeight+20) + 'px'}">
|
||
<div class="arrow">
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lifter_info">
|
||
|
||
<p>
|
||
<!-- 额定重量 -->
|
||
{{$t('message.lifter.ratedWeight')}}:
|
||
{{lifterData.maxLoad ? lifterData.maxLoad : "0"}}kg</p>
|
||
<p>
|
||
<!-- 额定人数 -->
|
||
{{$t('message.lifter.ratedPeopleTwo')}}:
|
||
{{lifterData.ratedPeopleNum ? lifterData.ratedPeopleNum : '0'}}
|
||
<!-- 人 -->
|
||
{{$t('message.lifter.people')}}
|
||
</p>
|
||
</div>
|
||
<div class="lifter_detail_list" :style="{'bottom': lifterCarHeight > (maxMoveHeight*0.5) ? '220px' : '43px'}">
|
||
<ul>
|
||
<li>
|
||
<span>{{realTimeDevData.loading ? realTimeDevData.loading : "0"}}kg</span>
|
||
<p>
|
||
<!-- 重量 -->
|
||
{{$t('message.lifter.weight')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/weight.png" />
|
||
</li>
|
||
<li>
|
||
<span>{{realTimeDevData.loadRatio ? realTimeDevData.loadRatio : "0"}}%</span>
|
||
<p>
|
||
<!-- 重量百分百 -->
|
||
{{$t('message.lifter.weightPercent')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/incline.png" />
|
||
</li>
|
||
<li>
|
||
<span>{{realTimeDevData.speed ? realTimeDevData.speed : "0"}}m/s</span>
|
||
<p>
|
||
<!-- 速度 -->
|
||
{{$t('message.lifter.speed')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/speed.png" />
|
||
</li>
|
||
<li>
|
||
<span>{{realTimeDevData.height ? realTimeDevData.height : "0"}}m</span>
|
||
<p>
|
||
<!-- 高度 -->
|
||
{{$t('message.lifter.altitude')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/towercrane-icon8.png" />
|
||
</li>
|
||
<li>
|
||
<span>{{realTimeDevData.dipAngleX ? realTimeDevData.dipAngleX : "0"}}°</span>
|
||
<p>
|
||
<!-- X倾角 -->
|
||
X{{$t('message.lifter.dipAngle')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/towercrane-icon9.png" />
|
||
</li>
|
||
<li>
|
||
<span>{{realTimeDevData.dipAngleY ? realTimeDevData.dipAngleY : "0"}}°</span>
|
||
<p>
|
||
<!-- Y倾角 -->
|
||
Y{{$t('message.lifter.dipAngle')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/towercrane-icon9.png" />
|
||
</li>
|
||
<li>
|
||
<span>{{realTimeDevData.floorNum ? realTimeDevData.floorNum : "0"}}
|
||
<!-- 层 -->
|
||
{{$t('message.lifter.layer')}}</span>
|
||
<p>
|
||
<!-- 楼层数 -->
|
||
{{$t('message.lifter.numberOfFloors')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/incline.png" />
|
||
</li>
|
||
<li>
|
||
<span>{{realTimeDevData.windSpeed ? realTimeDevData.windSpeed : "0"}}m/s</span>
|
||
<p>
|
||
<!-- 风速 -->
|
||
{{$t('message.lifter.airSpeed')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/incline.png" />
|
||
</li>
|
||
<li>
|
||
<!-- "开" : "关" -->
|
||
<span>{{realTimeDevData.frontDoorState==2 ? $t('message.lifter.open') : $t('message.lifter.shut')}}</span>
|
||
<p>
|
||
<!-- 前门锁状态 -->
|
||
{{$t('message.lifter.frontDoorLockStatus')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/lock.png" />
|
||
</li>
|
||
<li>
|
||
<!-- "开" : "关" -->
|
||
<span>{{realTimeDevData.backDoorState==2 ? $t('message.lifter.open') : $t('message.lifter.shut')}}</span>
|
||
<p>
|
||
<!-- 后门锁状态 -->
|
||
{{$t('message.lifter.rearDoorLockStatus')}}
|
||
</p>
|
||
<img src="@/assets/images/operationInfo/lock.png" />
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="operationInfo_status_box">
|
||
<el-row type="flex">
|
||
<el-col :span="1">
|
||
<div class="operationInfo-title"><span>
|
||
<!-- 报警状态 -->
|
||
{{$t('message.lifter.alarmStatus')}}
|
||
</span></div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div class="operationInfo_status">
|
||
<p><span class="operationInfo_status_normal"></span>
|
||
<!-- 正常 -->
|
||
{{$t('message.lifter.normal')}}
|
||
</p>
|
||
<p><span class="operationInfo_status_error"></span>
|
||
<!-- 报警 -->
|
||
{{$t('message.lifter.alarm')}}
|
||
</p>
|
||
<p><span class="operationInfo_status_danger"></span>
|
||
<!-- 预警 -->
|
||
{{$t('message.lifter.earlyWarning')}}
|
||
</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="20" style="margin-top: 10px;">
|
||
<div class="status_list">
|
||
<el-row style="margin-bottom: 8px">
|
||
<el-col :span="8">
|
||
<p>
|
||
<!-- 重量 -->
|
||
{{$t('message.lifter.weight')}}：
|
||
<i>
|
||
<img v-if="realTimeDevData.weightPreAlarm == 1" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="realTimeDevData.weightAlarm == 1" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="realTimeDevData.weightPreAlarm == 1" :style="{'width': 100+'%', 'background': '#C9A623'}"></b>
|
||
<b v-else-if="realTimeDevData.weightAlarm == 1" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<p>
|
||
<!-- 上限位 -->
|
||
{{$t('message.lifter.upperLimit')}}：
|
||
<i>
|
||
<!-- <img v-if="alarmsStatusData.upLimitStatus == 3 || alarmsStatusData.upLimitStatus == 4" src="@/assets/images/operationInfo/danger.png"/> -->
|
||
<img v-if="realTimeDevData.topAlarm == 1" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<!-- <b v-if="alarmsStatusData.upLimitStatus == 3 || alarmsStatusData.upLimitStatus == 4" :style="{'width': 100+'%', 'background': '#C9A623'}"></b> -->
|
||
<b v-if="realTimeDevData.topAlarm == 1" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<p>
|
||
<!-- 倾角X -->
|
||
{{$t('message.lifter.dipAngle')}}X：
|
||
<i>
|
||
<img v-if="realTimeDevData.obliguityXPreAlarm == 1" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="realTimeDevData.obliguityXAlarm == 1" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="realTimeDevData.obliguityXPreAlarm == 1" :style="{'width': 100+'%', 'background': '#C9A623'}"></b>
|
||
<b v-else-if="realTimeDevData.obliguityXAlarm == 1" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<p>
|
||
<!-- 防坠器 -->
|
||
{{$t('message.lifter.antiFallingDevice')}}：
|
||
<i>
|
||
<!-- <img v-if="alarmsStatusData.leanStatus == 3 || alarmsStatusData.leanStatus == 4" src="@/assets/images/operationInfo/danger.png"/> -->
|
||
<img v-if="realTimeDevData.fallAlarm == 1" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<!-- <b v-if="alarmsStatusData.leanStatus == 3 || alarmsStatusData.leanStatus == 4" :style="{'width': 100+'%', 'background': '#C9A623'}"></b> -->
|
||
<b v-if="realTimeDevData.fallAlarm == 1" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<p>
|
||
<!-- 下限位 -->
|
||
{{$t('message.lifter.lowerLimit')}}：
|
||
<i>
|
||
<!-- <img v-if="alarmsStatusData.downLimitStatus == 3 || alarmsStatusData.downLimitStatus == 4" src="@/assets/images/operationInfo/danger.png"/> -->
|
||
<img v-if="realTimeDevData.bottomAlarm == 1" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<!-- <b v-if="alarmsStatusData.downLimitStatus == 3 || alarmsStatusData.downLimitStatus == 4" :style="{'width': 100+'%', 'background': '#C9A623'}"></b> -->
|
||
<b v-if="realTimeDevData.bottomAlarm == 1" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<p>
|
||
<!-- 倾角Y -->
|
||
{{$t('message.lifter.dipAngle')}}Y：
|
||
<i>
|
||
<img v-if="realTimeDevData.obliguityYPreAlarm == 1" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="realTimeDevData.obliguityYAlarm == 1" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="realTimeDevData.obliguityYPreAlarm == 1" :style="{'width': 100+'%', 'background': '#C9A623'}"></b>
|
||
<b v-else-if="realTimeDevData.obliguityYAlarm == 1" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-row>
|
||
<el-col>
|
||
<div class="driver_info">
|
||
<!-- 司机信息 -->
|
||
<div class="operationInfo-title">{{$t('message.lifter.driverInfo')}}</div>
|
||
<div class="driver_box">
|
||
<el-row type="flex" align="center" justify="space-around">
|
||
<el-col style="width: 96px; height: 123px; margin: 0 15px">
|
||
<img style="width: 96px; height: 123px;" :src="realTimeDevData.fieldAcquisitionUrl"/>
|
||
</el-col>
|
||
<el-col>
|
||
<div class="driver-content">
|
||
<h3>
|
||
<!-- {{realTimeDevData.driverName ? realTimeDevData.driverName : " "}} -->
|
||
|
||
<div class="driver-sex">
|
||
<img v-if="realTimeDevData.sex == '男'" src="./../../projectLevel/assets/images/gantryCrane/man.png">
|
||
<img v-else src="./../../projectLevel/assets/images/gantryCrane/woman.png">
|
||
<span>{{realTimeDevData.sex}}</span>
|
||
</div>
|
||
</h3>
|
||
<p>
|
||
<!-- 年龄 -->
|
||
{{$t('message.lifter.age')}}
|
||
：{{realTimeDevData.age}}</p>
|
||
<p>
|
||
<!-- 工作年限 -->
|
||
{{$t('message.lifter.workingYears')}}
|
||
：2
|
||
<!-- 年 -->
|
||
{{$t('message.lifter.year')}}
|
||
</p>
|
||
<p>
|
||
<!-- 身份证号 -->
|
||
{{$t('message.lifter.idNumber')}}
|
||
：{{realTimeDevData.driverIdCard}}</p>
|
||
<p>
|
||
<!-- 特种资格证书编号 -->
|
||
{{$t('message.lifter.specialNumber')}}
|
||
：hju67890-9877</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col>
|
||
<div class="equipment_info">
|
||
<div class="operationInfo-title">
|
||
<!-- 设备信息 -->
|
||
{{$t('message.lifter.equipmentInfo')}}
|
||
</div>
|
||
<div class="equipment_content">
|
||
<p>
|
||
<!-- 设备备案编号： -->
|
||
{{$t('message.lifter.equipmentRecordNo')}}：{{lifterData.filingNo}}</p>
|
||
<p>
|
||
<!-- 设备型号： -->
|
||
{{$t('message.lifter.equipmentModel')}}：{{lifterData.devModel}}</p>
|
||
<p>
|
||
<!-- 产权单位： -->
|
||
{{$t('message.lifter.propertyRightUnit')}}：{{lifterData.propertyUnit}}</p>
|
||
<p>
|
||
<!-- 安装单位： -->
|
||
{{$t('message.lifter.installUnit')}}：{{lifterData.installationUnit}}</p>
|
||
<p>
|
||
<!-- 制造单位： -->
|
||
{{$t('message.lifter.manufacturingUnit')}}：{{lifterData.factoryName}}</p>
|
||
<p>
|
||
<!-- 拆除单位： -->
|
||
{{$t('message.lifter.demolitionUnit')}}：{{lifterData.demolitionUnit}}</p>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="viedeo_live">
|
||
<div class="operationInfo-title video_title">
|
||
<!-- 实时视频 -->
|
||
{{$t('message.lifter.realTimeVideo')}}
|
||
<div class="viedeo_select">
|
||
<el-select
|
||
v-model="videoId"
|
||
:placeholder="$t('message.lifter.pleaseSelect')"
|
||
@change="getVideo"
|
||
@visible-change="visibleChange">
|
||
<el-option
|
||
v-for="item in videoList"
|
||
:key="item.id"
|
||
:label="item.videoName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="video_box">
|
||
<videoModule
|
||
class="playVideoBox"
|
||
:type="'1x1'"
|
||
:value="selectList"
|
||
:displayBottomMod="false"
|
||
:winNumBer="1"
|
||
:autoplay="false"
|
||
:showCaptrue="false"
|
||
:showControl="false"
|
||
:showPlayback="false"
|
||
></videoModule>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</vue-scroll>
|
||
</template>
|
||
|
||
<script>
|
||
import videoModule from "@/components/videoModule/videoModule.vue";
|
||
import {
|
||
getLifterListApi,
|
||
getLifterDetailApi,
|
||
getLifterNewestCurrentDataAndAlarmApi,
|
||
getLifterCurrentDataApi,
|
||
getSelectLifterBySnApi,
|
||
getSelectLifterWorkCycleListApi,
|
||
getTodayLifterCurrentDataListApi
|
||
} from "@/assets/js/api/lifter";
|
||
import {
|
||
getSelectTowerBySnApi,
|
||
getTowerCurrentDataApi,
|
||
getTowerNewestCurrentDataAndAlarmApi,
|
||
} from "@/assets/js/api/towerCrane";
|
||
import {
|
||
hidePluginWindow,
|
||
showPluginWindow,
|
||
} from "@/components/videoModule/isc_plugin/video_isc_plugin.js";
|
||
export default {
|
||
components: { videoModule },
|
||
data() {
|
||
return {
|
||
selectId: "",
|
||
lifterOptions:[],
|
||
selectList: [],
|
||
videoList: [],
|
||
projectSn: "",
|
||
devSn: "",
|
||
videoId: "",
|
||
lifterData: {},
|
||
interval: null,
|
||
interval2: null,
|
||
realTimeDevData:{},
|
||
styleType: 1,
|
||
alarmsStatusData: {
|
||
loadStatus: "", //重量
|
||
upLimitStatus: "", //上限位
|
||
downLimitStatus: "",//下限位
|
||
frontDoorLockStatus: "", //前门锁
|
||
leanStatus: "", //倾斜
|
||
aftreLockStatus: "", //后门锁
|
||
},
|
||
lifterCarHeight: 0,
|
||
lifterHeight: 0,
|
||
maxMoveHeight: 0
|
||
};
|
||
},
|
||
created(){
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.styleType = this.$store.state.userInfo.styleType;
|
||
this.fileUrl = this.$store.state.FILEURL;
|
||
this.selectlifterData();
|
||
},
|
||
beforeDestroy() {
|
||
// clearTimeout(this.interval);
|
||
// this.interval = null
|
||
clearTimeout(this.interval2);
|
||
this.interval2 = null
|
||
},
|
||
methods:{
|
||
// 获取升降机设备列表
|
||
selectlifterData(){
|
||
getLifterListApi({projectSn: this.projectSn}).then(res=>{
|
||
if(res.code == 200 && res.result){
|
||
this.lifterOptions = res.result
|
||
if(this.lifterOptions.length>0){
|
||
this.selectTowerCrane(this.lifterOptions[0].id)
|
||
}
|
||
console.log(res.result)
|
||
}
|
||
})
|
||
},
|
||
// 获取升降机实时数据及实时报警数据
|
||
getLifterNewestCurrentDataAndAlarm(){
|
||
let data = {
|
||
devSn: this.devSn
|
||
}
|
||
getLifterNewestCurrentDataAndAlarmApi(data).then(res=>{
|
||
if(res.code == 200){
|
||
if(this.interval2){
|
||
clearTimeout(this.interval2);
|
||
}
|
||
console.log(res.result, "------实时报警信息")
|
||
this.alarmsStatusData = {
|
||
loadStatus: "", //重量
|
||
upLimitStatus: "", //上限位
|
||
downLimitStatus: "",//下限位
|
||
frontDoorLockStatus: "", //前门锁
|
||
leanStatus: "", //倾斜
|
||
aftreLockStatus: "", //后门锁
|
||
}
|
||
if(res.result.lifterAlarmList && res.result.lifterAlarmList.length > 0){
|
||
res.result.towerAlarmList.forEach(item=>{
|
||
if(item.alarmType.indexOf("上限位") != -1){
|
||
this.alarmsStatusData.upLimitStatus = item.alarmLevel
|
||
}else if(item.alarmType.indexOf("下限位") != -1){
|
||
this.alarmsStatusData.downLimitStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("重量") != -1){
|
||
this.alarmsStatusData.loadStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("前门锁") != -1){
|
||
this.alarmsStatusData.frontDoorLockStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("倾斜") != -1){
|
||
this.alarmsStatusData.leanStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("后门锁") != -1){
|
||
this.alarmsStatusData.aftreLockStatus = item.alarmLevel
|
||
}
|
||
})
|
||
}
|
||
if(res.result.lifterCurrentData){
|
||
this.realTimeDevData = res.result.lifterCurrentData
|
||
if(this.realTimeDevData.driverIdCard){
|
||
let peopleData = this.analyzeIDCard(this.realTimeDevData.driverIdCard)
|
||
this.realTimeDevData.age = peopleData.age
|
||
this.realTimeDevData.sex = peopleData.sex
|
||
} else{
|
||
this.realTimeDevData.age = 0
|
||
}
|
||
this.moveLifterCar()
|
||
} else{
|
||
this.realTimeDevData = {}
|
||
this.lifterCarHeight = 0
|
||
this.maxMoveHeight = 0
|
||
}
|
||
this.interval2 = setTimeout(()=>{
|
||
this.getLifterNewestCurrentDataAndAlarm();
|
||
},5000)
|
||
}
|
||
})
|
||
},
|
||
// 升降机运动
|
||
moveLifterCar(){
|
||
console.log(this.realTimeDevData.height)
|
||
console.dir(this.$refs["lifterBox"])
|
||
console.log(this.lifterHeight)
|
||
let boxHeight = this.$refs["lifterBox"].offsetHeight,
|
||
heightRatio = boxHeight / this.lifterHeight
|
||
this.maxMoveHeight = boxHeight - 146
|
||
this.lifterCarHeight = this.realTimeDevData.height * heightRatio
|
||
if(this.lifterCarHeight > this.maxMoveHeight){
|
||
this.lifterCarHeight = this.maxMoveHeight
|
||
} else if(this.lifterCarHeight < 0 || !this.lifterCarHeight){
|
||
this.lifterCarHeight = 0
|
||
}
|
||
// this.lifterCarHeight = Math.round(Math.random()*500)
|
||
// console.log()
|
||
|
||
},
|
||
//获取选中升降机的设备信息
|
||
selectTowerCrane(val){
|
||
this.selectId = val
|
||
this.lifterOptions.forEach(item=>{
|
||
if(val == item.id){
|
||
this.devSn = item.devSn;
|
||
this.lifterHeight = item.maxHeight
|
||
return;
|
||
}
|
||
})
|
||
clearTimeout(this.interval);
|
||
clearTimeout(this.interval2);
|
||
this.interval = null
|
||
this.interval2 = null
|
||
this.getLifterDetail();
|
||
this.getLifterNewestCurrentDataAndAlarm()
|
||
// this.getRealTimeData()
|
||
// this.getRecentWorkList();
|
||
// this.createdEcharts();
|
||
// console.log(this.selectId,this.devSn)
|
||
},
|
||
//获取当前升降机的详情数据 当前塔吊司机 当前塔吊视频 当前设备基本信息
|
||
getLifterDetail() {
|
||
let data = {
|
||
id: this.selectId,
|
||
};
|
||
getLifterDetailApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log(res.result, '----基本信息详情')
|
||
// this.driverList = res.result.driverList;
|
||
this.lifterData = res.result;
|
||
// console.log(this.towerData)
|
||
if(res.result.enableVideoUrl==1){
|
||
this.videoList = res.result.videoList;
|
||
}else{
|
||
if(res.result.videoUrl&&res.result.videoUrl!='null'){
|
||
this.videoList = JSON.parse(res.result.videoUrl);
|
||
}else{
|
||
this.videoList = []
|
||
}
|
||
}
|
||
if (this.videoList.length > 0) {
|
||
this.videoId = this.videoList[0].id;
|
||
this.getVideo(this.videoList[0].id);
|
||
}else{
|
||
this.videoId=''
|
||
this.selectList=[]
|
||
}
|
||
// realWidth = this.towerData.forearmLength;
|
||
// realHeight = this.towerData.towerHeight;
|
||
//获取设备的实时数据
|
||
// this.getRealTimeData();
|
||
}
|
||
});
|
||
},
|
||
//获取实时数据
|
||
getRealTimeData(devSn, index) {
|
||
let data = {
|
||
devSn: devSn ? devSn : this.devSn,
|
||
};
|
||
getLifterCurrentDataApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log(res.result)
|
||
if (res.result) {
|
||
console.log(res.result)
|
||
// this.realTimeDevData = res.result;
|
||
// if(!this.realTimeDevData.angle){
|
||
// this.realTimeDevData.angle = 0
|
||
// }
|
||
// if(this.realTimeDevData.driverIdCard){
|
||
// let peopleData = this.analyzeIDCard(this.realTimeDevData.driverIdCard)
|
||
// this.realTimeDevData.age = peopleData.age
|
||
// this.realTimeDevData.sex = peopleData.sex
|
||
// }
|
||
this.interval=setTimeout(() => {
|
||
this.getRealTimeData();
|
||
}, 5000);
|
||
|
||
// if (devSn) {
|
||
// this.towerList[index].angle = res.result ? res.result.angle : 0;
|
||
// return;
|
||
// } else{
|
||
// console.log('000')
|
||
// this.realTimeDevData = res.result;
|
||
// this.interval=setTimeout(() => {
|
||
// this.getRealTimeData(devSn, index);
|
||
// }, 5000);
|
||
// }
|
||
// var y = parseFloat(res.result.height);
|
||
// var x = parseFloat(res.result.ranger);
|
||
// this.move(x, y);
|
||
// // this.move(150,250)
|
||
// this.hideGoods = true;
|
||
}else{
|
||
this.realTimeDevData={
|
||
loading: "",
|
||
windspeed: "",
|
||
height: "",
|
||
windRatio: "",
|
||
torqueRatio: "",
|
||
angle: 0,
|
||
biasAngle: "",
|
||
ranger: "",
|
||
biasAngleRatio: "",
|
||
alarmName: "",
|
||
loadRatio: "",
|
||
driverIdCard: "",
|
||
driverName: "",
|
||
age: "",
|
||
sex: ""
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//选择的视频
|
||
getVideo(val) {
|
||
for (let i = 0; i < this.videoList.length; i++) {
|
||
if (val == this.videoList[i].id) {
|
||
this.selectList = [this.videoList[i]];
|
||
}
|
||
}
|
||
},
|
||
//下拉框聚焦
|
||
visibleChange(val) {
|
||
if(this.videoList.length>0&&this.videoList[0].videoType==3){
|
||
if (val) {
|
||
hidePluginWindow();
|
||
} else {
|
||
showPluginWindow();
|
||
}
|
||
}
|
||
},
|
||
// 根据身份证号计算年龄
|
||
analyzeIDCard(IDCard){
|
||
var sexAndAge = {};
|
||
//获取用户身份证号码
|
||
var userCard = IDCard;
|
||
//如果身份证号码为undefind则返回空
|
||
if(!userCard){
|
||
return sexAndAge;
|
||
}
|
||
//获取性别
|
||
if(parseInt(userCard.substr(16,1)) % 2 == 1){
|
||
sexAndAge.sex = '1（男）'
|
||
}else{
|
||
sexAndAge.sex = '0（女）'
|
||
}
|
||
//获取出生年月日
|
||
//userCard.substring(6,10) + "-" + userCard.substring(10,12) + "-" + userCard.substring(12,14);
|
||
var yearBirth = userCard.substring(6,10);
|
||
var monthBirth = userCard.substring(10,12);
|
||
var dayBirth = userCard.substring(12,14);
|
||
//获取当前年月日并计算年龄
|
||
var myDate = new Date();
|
||
var monthNow = myDate.getMonth() + 1;
|
||
var dayNow = myDate.getDay();
|
||
var age = myDate.getFullYear() - yearBirth;
|
||
if(monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)){
|
||
age--;
|
||
}
|
||
//得到年龄
|
||
sexAndAge.age = age;
|
||
//返回性别和年龄
|
||
return sexAndAge;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.operationInfo {
|
||
border: 1px solid #eee;
|
||
.operationInfo_map{
|
||
position: relative;
|
||
height: 750px;
|
||
width: 100%;
|
||
padding-top: 19px;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #eee;
|
||
border-right: 1px solid #eee;
|
||
.lifter_info{
|
||
position: absolute;
|
||
bottom: 43px;
|
||
left: 55px;
|
||
color: #CDCFD3;
|
||
font-size: 16px;
|
||
p{
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.lifter_detail_list{
|
||
position: absolute;
|
||
right: 0px;
|
||
transition: all 0.3 linear;
|
||
ul{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 240px;
|
||
li:nth-child(2n-1){
|
||
border-right: 1px dashed #163260;
|
||
}
|
||
li{
|
||
width: 50%;
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
flex-direction: column;
|
||
color: #DEE0E2;
|
||
box-sizing: border-box;
|
||
img{
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
span{
|
||
margin-bottom: 3px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
p{
|
||
margin-bottom: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.operationInfo_select{
|
||
// margin-bottom: 52px;
|
||
/deep/ .el-select{
|
||
width: 156px;
|
||
height: 32px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.operationInfo_towercrane{
|
||
margin: 0 auto;
|
||
width: 338px;
|
||
height: calc(100% - 43px);
|
||
// background: #121E37;
|
||
position: relative;
|
||
margin-top: -32px;
|
||
// img{
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// }
|
||
.lifter_box{
|
||
height: 100%;
|
||
width: 100%;
|
||
position: relative;
|
||
.lifter_icon{
|
||
height: 100%;
|
||
width: 68px;
|
||
position: absolute;
|
||
left: 72px;
|
||
top: 0;
|
||
}
|
||
.lifter-car-box{
|
||
position: absolute;
|
||
left: 140px;
|
||
transition: all 0.3s linear;
|
||
img{
|
||
width: 106px;
|
||
height: 146px;
|
||
}
|
||
}
|
||
.lifter_bot{
|
||
display: block;
|
||
width: 166px;
|
||
height: 12px;
|
||
background: #B98326;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 82px;
|
||
}
|
||
}
|
||
.lifter_detail{
|
||
position: absolute;
|
||
right: -88px;
|
||
transition: all 0.3s linear;
|
||
.arrow{
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 88px;
|
||
height: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
span{
|
||
display: block;
|
||
width: 80px;
|
||
margin: 0 auto;
|
||
border-bottom: 2px dashed #88E7F0;
|
||
position: relative;
|
||
}
|
||
span::after{
|
||
content: "";
|
||
display: block;
|
||
width: 8px;
|
||
height: 8px;
|
||
border: 2px solid #88E7F0;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: -15px;
|
||
bottom: -7px;
|
||
}
|
||
span::before{
|
||
content: "";
|
||
display: block;
|
||
border: 8px solid #88E7F0;
|
||
border-bottom: 8px solid transparent;
|
||
border-right: 8px solid transparent;
|
||
border-top: 8px solid transparent;
|
||
position: absolute;
|
||
right: -20px;
|
||
bottom: -9px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.operationInfo_status_box{
|
||
height: 100px;
|
||
// border-bottom: 1px solid #eee;
|
||
border-right: 1px solid #eee;
|
||
.operationInfo-title{
|
||
line-height: 22px;
|
||
}
|
||
.operationInfo_status{
|
||
margin-left: 30px;
|
||
margin-top: 12px;
|
||
font-size: 14px;
|
||
p{
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 24px;
|
||
}
|
||
.operationInfo_status_normal{
|
||
width: 10px;
|
||
height: 3px;
|
||
display: inline-block;
|
||
background: #88E7F0;
|
||
margin-right: 6px;
|
||
}
|
||
.operationInfo_status_error{
|
||
width: 10px;
|
||
height: 3px;
|
||
display: inline-block;
|
||
background: #FE6565;
|
||
margin-right: 6px;
|
||
}
|
||
.operationInfo_status_danger{
|
||
width: 10px;
|
||
height: 3px;
|
||
display: inline-block;
|
||
background: #C9A623;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
.status_list{
|
||
padding-top: 12px;
|
||
p{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
justify-content: center;
|
||
i{
|
||
margin-right: 6px;
|
||
img{
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
span{
|
||
height: 5px;
|
||
width: 50px;
|
||
background: #ccc;
|
||
position: relative;
|
||
b{
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 5px;
|
||
background: #88E7F0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.operationInfo-title{
|
||
position: relative;
|
||
padding-left: 18px;
|
||
line-height: 31px;
|
||
margin-bottom: 10px;
|
||
font-size: 18px;
|
||
padding-top: 6px;
|
||
}
|
||
.video_title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-right: 30px;
|
||
}
|
||
.operationInfo-title::before{
|
||
content: "";
|
||
width: 2px;
|
||
height: 31px;
|
||
background: #409eff;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
}
|
||
.driver_info{
|
||
height: 200px;
|
||
border: 1px solid #eee;
|
||
border-left: 0;
|
||
border-top: 0;
|
||
}
|
||
.running_status{
|
||
height: 200px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.driver-content{
|
||
position: relative;
|
||
// padding-bottom: 40px;
|
||
h3{
|
||
height: 20px;
|
||
font-weight: normal;
|
||
font-size: 20px;
|
||
margin: 6px 0;
|
||
display: flex;
|
||
.driver-sex{
|
||
display: flex;
|
||
// margin-left: 20px;
|
||
position: absolute;
|
||
right: 95px;
|
||
top: 0;
|
||
}
|
||
img{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
span{
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
p{
|
||
font-size: 13px;
|
||
line-height: 18px;
|
||
margin-bottom: 3px;
|
||
}
|
||
}
|
||
.running_content{
|
||
margin-left: 18px;
|
||
// padding-top: 10px;
|
||
p{
|
||
font-size: 14px;
|
||
line-height: 28px;
|
||
}
|
||
}
|
||
.angle_info{
|
||
height: 236px;
|
||
// padding-bottom: 22px;
|
||
border-right: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.angle_content{
|
||
.angle_wrap{
|
||
margin: 0 auto;
|
||
width: 176px;
|
||
height: 176px;
|
||
border-radius: 50%;
|
||
border: 2px solid #C9A623;
|
||
position: relative;
|
||
transition: all 1s linear;
|
||
.angle_line{
|
||
height: 88px;
|
||
width: 1px;
|
||
background: #C9A623;
|
||
position: absolute;
|
||
bottom: 50%;
|
||
left: 50%;
|
||
.angle_point{
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
border: 3px solid #C9A623;
|
||
position: absolute;
|
||
left: -5px;
|
||
top: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.equipment_info{
|
||
height: 296px;
|
||
border-bottom: 1px solid #eee;
|
||
// padding-bottom: 22px;
|
||
}
|
||
.equipment_content{
|
||
p{
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
margin-bottom: 10px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
.viedeo_live{
|
||
height: 300px;
|
||
.video_box{
|
||
// padding-top: 16px;
|
||
// padding-bottom: 43px;
|
||
.playVideoBox{
|
||
width: 80%;
|
||
height: 220px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dark{
|
||
border-color: #12294F;
|
||
.operationInfo_map{
|
||
height: 700px;
|
||
border-color: #12294F;
|
||
background: #091225;
|
||
}
|
||
.operationInfo_status_box{
|
||
border-color: #12294F;
|
||
}
|
||
.driver_info{
|
||
border-color: #12294F;
|
||
}
|
||
.angle_info{
|
||
border-color: #12294F;
|
||
}
|
||
.running_status{
|
||
border-color: #12294F;
|
||
}
|
||
.equipment_info{
|
||
border-color: #12294F;
|
||
}
|
||
.operationInfo-title{
|
||
color: #7CD3DE;
|
||
}
|
||
.operationInfo-title::before{
|
||
background:linear-gradient(to bottom,#88E7F0, #15315F)
|
||
}
|
||
.operationInfo_towercrane{
|
||
height: calc(100% - 43px);
|
||
margin-top: -32px;
|
||
.info-box{
|
||
background: #0D1A34;
|
||
border: 1px solid #70C1D2;
|
||
border-image: linear-gradient(#70C1D2, #0D1A34) 1 10;
|
||
.b-right{
|
||
border-color: #163260;
|
||
}
|
||
.b-bottom{
|
||
border-color: #163260;
|
||
}
|
||
}
|
||
}
|
||
.operationInfo_status_box{
|
||
background: #091225;
|
||
}
|
||
.operationInfo {
|
||
.viedeo_live{
|
||
height: 346px;
|
||
.video_box{
|
||
// padding-top: 16px;
|
||
// padding-bottom: 43px;
|
||
.playVideoBox{
|
||
width: 80%;
|
||
height: 276px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.driver-content h3 .driver-sex{
|
||
right: 40px;
|
||
}
|
||
}
|
||
</style> |