1251 lines
52 KiB
Vue
1251 lines
52 KiB
Vue
<template>
|
||
<vue-scroll style="height: 100%;" :class="{'white_bg': styleType == 1}">
|
||
<div class="operationInfo" :class="{'dark': styleType == 2}">
|
||
<el-row>
|
||
<el-col :span="15">
|
||
<div class="operationInfo_map">
|
||
<div class="operationInfo_select">
|
||
<el-select v-model="selectId" @change="selectTowerCrane" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in towerCraneOptions"
|
||
:key="item.id"
|
||
:label="item.devName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="operationInfo_towercrane">
|
||
<img ref="tower" src="@/assets/images/operationInfo/tower-crane_new.png" />
|
||
<div class="tower-hook-box" ref="tower">
|
||
<div class="hook-move-box" :style="{'left': towerRanger + 'px'}">
|
||
<div class="tower_line" :style="{'height': towerLineHg + 'px'}"></div>
|
||
<div style="width:36px; height: 68px; position: relative">
|
||
<img style="width:36px; height: 68px" src="@/assets/images/operationInfo/tower_hook.png"/>
|
||
<div class="towercrane_info info3" :class="{'show_b': showBottom}">
|
||
<div class="info-box">
|
||
<div class="info-item b-bottom">
|
||
<p>{{realTimeDevData.loading ? realTimeDevData.loading : '0'}}kg</p>
|
||
<p>吊重</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon6.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon6_w.png"/>
|
||
</div>
|
||
<div class="info-item b-bottom">
|
||
<p>{{realTimeDevData.ranger ? realTimeDevData.ranger : '0'}}m</p>
|
||
<p>幅度</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon7.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon7_w.png"/>
|
||
</div>
|
||
<div class="info-item">
|
||
<p>{{realTimeDevData.height ? realTimeDevData.height : '0'}}m</p>
|
||
<p>高度</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon8.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon8_w.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="info-arrow arrow2">
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/arrow1.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/arrow1_w.png"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="towercrane_info info1">
|
||
<div class="info-box">
|
||
<div class="info-item b-right">
|
||
<p>{{realTimeDevData.loadRatio ? realTimeDevData.loadRatio : '0'}}%</p>
|
||
<p>荷载比</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon1.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon1_w.png"/>
|
||
</div>
|
||
<div class="info-item">
|
||
<p>{{realTimeDevData.torqueRatio ? realTimeDevData.torqueRatio : '0'}}%</p>
|
||
<p>力矩</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon2.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon2_w.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="info-arrow arrow1">
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/arrow1.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/arrow1_w.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="towercrane_info info2">
|
||
<div class="info-box">
|
||
<div class="info-item b-right">
|
||
<p>{{towerData.forearmLength ? towerData.forearmLength : '0'}}m</p>
|
||
<p>前臂长</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon3.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon3_w.png"/>
|
||
</div>
|
||
<div class="info-item b-right">
|
||
<p>{{towerData.towerHeight ? towerData.towerHeight : '0'}}m</p>
|
||
<p>塔臂高</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon4.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon4_w.png"/>
|
||
</div>
|
||
<div class="info-item">
|
||
<p>{{towerData.posteriorArmLength ? towerData.posteriorArmLength : '0'}}m</p>
|
||
<p>后臂长</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon5.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon5_w.png"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="towercrane_info info4">
|
||
<div class="info-box">
|
||
<div class="info-item b-right">
|
||
<p>{{realTimeDevData.angle ? realTimeDevData.angle : '0'}}°</p>
|
||
<p>转角</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon9.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon9_w.png"/>
|
||
</div>
|
||
<div class="info-item">
|
||
<p>{{realTimeDevData.biasAngle ? realTimeDevData.biasAngle : '0'}}°</p>
|
||
<p>倾角</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon9.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon9_w.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="info-arrow arrow3">
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/arrow2.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/arrow2_w.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="towercrane_info info5">
|
||
<div class="info-box">
|
||
<div class="info-item">
|
||
<p>{{realTimeDevData.windRatio ? realTimeDevData.windRatio : '0'}}m/s</p>
|
||
<p>风速</p>
|
||
<img v-if="styleType == 2" style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon10.png"/>
|
||
<img v-else style="width:16px; height:16px;" src="@/assets/images/operationInfo/towercrane-icon10_w.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="info-arrow arrow4">
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/arrow1.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/arrow1_w.png"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="operationInfo_code">
|
||
<span :class="{'online': towerData.devOnline == 1, 'leave': towerData.devOnline != 1}"></span>{{towerData.devOnlineName}}
|
||
<p>最后一条数据上传时间：{{towerData.realTime}}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="operationInfo_status_box">
|
||
<el-row type="flex">
|
||
<el-col :span="1">
|
||
<div class="operationInfo-title"><span>报警状态</span></div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div class="operationInfo_status">
|
||
<p><span class="operationInfo_status_normal" :class="{'operationInfo_status_normal2': styleType == 1}"></span>正常</p>
|
||
<p><span class="operationInfo_status_error"></span>报警</p>
|
||
<p><span class="operationInfo_status_danger" :class="{'operationInfo_status_danger2': styleType == 1}"></span>预警</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="6">
|
||
<p>力矩：
|
||
<i>
|
||
<img v-if="alarmsStatusData.momentalStatus == 3 || alarmsStatusData.momentalStatus == 4" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="alarmsStatusData.momentalStatus == 1 || alarmsStatusData.momentalStatus == 2" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="alarmsStatusData.momentalStatus == 3 || alarmsStatusData.momentalStatus == 4" :style="{'width': 100+'%', 'background': styleType == 1 ? '#F7C944' : '#C9A623'}"></b>
|
||
<b v-else-if="alarmsStatusData.momentalStatus == 1 || alarmsStatusData.momentalStatus == 2" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :style="{'width': 100+'%'}" :class="{'operationInfo_status_normal2': styleType == 1}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>限位：
|
||
<i>
|
||
<img v-if="alarmsStatusData.limitStatus == 3 || alarmsStatusData.limitStatus == 4" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="alarmsStatusData.limitStatus == 1 || alarmsStatusData.limitStatus == 2" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="alarmsStatusData.limitStatus == 3 || alarmsStatusData.limitStatus == 4" :style="{'width': 100+'%', 'background': styleType == 1 ? '#F7C944' : '#C9A623'}"></b>
|
||
<b v-else-if="alarmsStatusData.limitStatus == 1 || alarmsStatusData.limitStatus == 2" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :class="{'operationInfo_status_normal2': styleType == 1}" :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>进入禁行区：
|
||
<i>
|
||
<img v-if="alarmsStatusData.nogoStatus == 3 || alarmsStatusData.nogoStatus == 4" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="alarmsStatusData.nogoStatus == 1 || alarmsStatusData.nogoStatus == 2" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="alarmsStatusData.nogoStatus == 3 || alarmsStatusData.nogoStatus == 4" :style="{'width': 100+'%', 'background': styleType == 1 ? '#F7C944' : '#C9A623'}"></b>
|
||
<b v-else-if="alarmsStatusData.nogoStatus == 1 || alarmsStatusData.nogoStatus == 2" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :class="{'operationInfo_status_normal2': styleType == 1}" :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>塔吊间碰撞：
|
||
<i>
|
||
<img v-if="alarmsStatusData.crashStatus == 3 || alarmsStatusData.crashStatus == 4" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="alarmsStatusData.crashStatus == 1 || alarmsStatusData.crashStatus == 2" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="alarmsStatusData.crashStatus == 3 || alarmsStatusData.crashStatus == 4" :style="{'width': 100+'%', 'background': styleType == 1 ? '#F7C944' : '#C9A623'}"></b>
|
||
<b v-else-if="alarmsStatusData.crashStatus == 1 || alarmsStatusData.crashStatus == 2" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :class="{'operationInfo_status_normal2': styleType == 1}" :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<p>风速：
|
||
<i>
|
||
<img v-if="alarmsStatusData.windStatus == 3 || alarmsStatusData.windStatus == 4" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="alarmsStatusData.windStatus == 1 || alarmsStatusData.windStatus == 2" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="alarmsStatusData.windStatus == 3 || alarmsStatusData.windStatus == 4" :style="{'width': 100+'%', 'background': styleType == 1 ? '#F7C944' : '#C9A623'}"></b>
|
||
<b v-else-if="alarmsStatusData.windStatus == 1 || alarmsStatusData.windStatus == 2" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :class="{'operationInfo_status_normal2': styleType == 1}" :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>倾斜：
|
||
<i>
|
||
<img v-if="alarmsStatusData.leanStatus == 3 || alarmsStatusData.leanStatus == 4" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="alarmsStatusData.leanStatus == 1 || alarmsStatusData.leanStatus == 2" 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': styleType == 1 ? '#F7C944' : '#C9A623'}"></b>
|
||
<b v-else-if="alarmsStatusData.leanStatus == 1 || alarmsStatusData.leanStatus == 2" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :class="{'operationInfo_status_normal2': styleType == 1}" :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>障碍物碰撞：
|
||
<i>
|
||
<img v-if="alarmsStatusData.roadblockStatus == 3 || alarmsStatusData.roadblockStatus == 4" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="alarmsStatusData.roadblockStatus == 1 || alarmsStatusData.roadblockStatus == 2" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="alarmsStatusData.roadblockStatus == 3 || alarmsStatusData.roadblockStatus == 4" :style="{'width': 100+'%', 'background': styleType == 1 ? '#F7C944' : '#C9A623'}"></b>
|
||
<b v-else-if="alarmsStatusData.roadblockStatus == 1 || alarmsStatusData.roadblockStatus == 2" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :class="{'operationInfo_status_normal2': styleType == 1}" :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>传感器故障：
|
||
<i>
|
||
<img v-if="alarmsStatusData.sensorStatus == 3 || alarmsStatusData.sensorStatus == 4" src="@/assets/images/operationInfo/danger.png"/>
|
||
<img v-else-if="alarmsStatusData.sensorStatus == 1 || alarmsStatusData.sensorStatus == 2" src="@/assets/images/operationInfo/error.png"/>
|
||
<img v-else src="@/assets/images/operationInfo/normal.png"/>
|
||
</i>
|
||
<span>
|
||
<b v-if="alarmsStatusData.sensorStatus == 3 || alarmsStatusData.sensorStatus == 4" :style="{'width': 100+'%', 'background': styleType == 1 ? '#F7C944' : '#C9A623'}"></b>
|
||
<b v-else-if="alarmsStatusData.sensorStatus == 1 || alarmsStatusData.sensorStatus == 2" :style="{'width': 100+'%', 'background': '#FE6565'}"></b>
|
||
<b v-else :class="{'operationInfo_status_normal2': styleType == 1}" :style="{'width': 100+'%'}"></b>
|
||
</span>
|
||
</p>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="9">
|
||
<el-row>
|
||
<el-col :span="14">
|
||
<div class="driver_info">
|
||
<div class="operationInfo-title">司机信息</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>年龄：{{realTimeDevData.age}}</p>
|
||
<p>工作年限：2年</p>
|
||
<p>身份证号：{{realTimeDevData.driverIdCard}}</p>
|
||
<p>特种资格证书编号：hju67890-9877</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<div class="running_status">
|
||
<div class="operationInfo-title">运行状态</div>
|
||
<div class="running_content">
|
||
<p>工作时长：2小时</p>
|
||
<p>今日吊次：10次</p>
|
||
<p>今日吊重：145kg</p>
|
||
<p>今日功效：1t/min</p>
|
||
<p>今日报警：10次</p>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="14">
|
||
<div class="angle_info">
|
||
<div class="operationInfo-title">运行角度</div>
|
||
<div class="angle_content">
|
||
<div class="angle_wrap" :style="{'transform': 'rotate('+ realTimeDevData.angle +'deg)'}">
|
||
<div class="angle_line">
|
||
<div class="angle_point"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<div class="equipment_info">
|
||
<div class="operationInfo-title">设备信息</div>
|
||
<div class="equipment_content">
|
||
<p>设备备案监督编号：{{towerData.superintendNo ? towerData.superintendNo : " "}}</p>
|
||
<p>结构类型：{{towerData.structureTypeName ? towerData.structureTypeName : " "}}</p>
|
||
<p>设备型号：{{towerData.devModel ? towerData.devModel : ' '}}</p>
|
||
<p>产权单位：{{towerData.propertyUnit ? towerData.propertyUnit : ' '}}</p>
|
||
<p>出租单位：{{towerData.leaseUnit ? towerData.leaseUnit : ' '}}</p>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="viedeo_live">
|
||
<div class="operationInfo-title video_title">
|
||
实时视频
|
||
<div class="viedeo_select">
|
||
<el-select
|
||
v-model="videoId"
|
||
placeholder="请选择"
|
||
@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 {
|
||
getTowerListApi,
|
||
getSelectTowerBySnApi,
|
||
getTowerCurrentDataApi,
|
||
getTowerNewestCurrentDataAndAlarmApi,getTowerAlarmListApi
|
||
} from "@/assets/js/api/towerCrane";
|
||
import {
|
||
hidePluginWindow,
|
||
showPluginWindow,
|
||
} from "@/components/videoModule/isc_plugin/video_isc_plugin.js";
|
||
export default {
|
||
components: { videoModule },
|
||
data() {
|
||
return {
|
||
selectId: "",
|
||
towerCraneOptions:[],
|
||
selectList: [],
|
||
videoList: [],
|
||
projectSn: "",
|
||
devSn: "",
|
||
videoId: "",
|
||
towerData: {},
|
||
interval: null,
|
||
interval2: null,
|
||
realTimeDevData:{
|
||
loadRatio: "",
|
||
loading: "",
|
||
windspeed: "",
|
||
height: "",
|
||
windRatio: "",
|
||
torqueRatio: "",
|
||
angle: "",
|
||
biasAngle: "",
|
||
ranger: "",
|
||
biasAngleRatio: "",
|
||
alarmName: "",
|
||
driverIdCard: "",
|
||
driverName: "",
|
||
age: "",
|
||
sex: ""
|
||
},
|
||
styleType: 1,
|
||
alarmsStatusData: {
|
||
momentalStatus: "", //力矩
|
||
limitStatus: "", //限位
|
||
nogoStatus: "", //禁行区
|
||
crashStatus: "", // 塔吊间碰撞
|
||
windStatus: "", //风速
|
||
leanStatus: "", //倾斜
|
||
roadblockStatus: "", //障碍物碰撞
|
||
sensorStatus: "" //传感器故障
|
||
},
|
||
towerLineHg: 0,
|
||
towerRanger: 0,
|
||
forearmLength: 0,
|
||
towerHeight: 0,
|
||
showBottom: false,
|
||
// alarmList:[]
|
||
};
|
||
},
|
||
created(){
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.styleType = this.$store.state.userInfo.styleType;
|
||
this.fileUrl = this.$store.state.FILEURL;
|
||
this.getTowerList();
|
||
// this.getAlarmList()
|
||
},
|
||
beforeDestroy() {
|
||
clearTimeout(this.interval);
|
||
clearTimeout(this.interval2);
|
||
},
|
||
methods:{
|
||
//获取最新的报警列表
|
||
// getAlarmList(){
|
||
// let data = {
|
||
// projectSn: this.projectSn,
|
||
// pageNo:1,pageSize:10
|
||
// }
|
||
// getTowerAlarmListApi(data).then(res=>{
|
||
// this.alarmList=res.result.records
|
||
// })
|
||
// },
|
||
// 获取报警实时数据
|
||
getTowerNewestCurrentDataAndAlarm(){
|
||
let data = {
|
||
devSn: this.devSn
|
||
}
|
||
getTowerNewestCurrentDataAndAlarmApi(data).then(res=>{
|
||
if(res.code == 200 && res.result.towerAlarmList){
|
||
console.log(res.result.towerAlarmList, "-----实时报警数据")
|
||
this.alarmsStatusData = {
|
||
momentalStatus: "", //力矩
|
||
limitStatus: "", //限位
|
||
nogoStatus: "", //进入禁行区
|
||
crashStatus: "", // 塔吊间碰撞
|
||
windStatus: "", //风速
|
||
leanStatus: "", //倾斜
|
||
roadblockStatus: "", //障碍物碰撞
|
||
sensorStatus: "" //传感器故障
|
||
}
|
||
res.result.towerAlarmList.forEach(item=>{
|
||
if(item.alarmType.indexOf("限位") != -1){
|
||
this.alarmsStatusData.limitStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("力矩") != -1){
|
||
this.alarmsStatusData.momentalStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("进入禁行区") != -1){
|
||
this.alarmsStatusData.nogoStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("塔吊间碰撞") != -1){
|
||
this.alarmsStatusData.crashStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("风速") != -1){
|
||
this.alarmsStatusData.windStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("倾斜") != -1){
|
||
this.alarmsStatusData.leanStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("障碍物碰撞") != -1){
|
||
this.alarmsStatusData.roadblockStatus = item.alarmLevel
|
||
} else if(item.alarmType.indexOf("传感器故障") != -1){
|
||
this.alarmsStatusData.sensorStatus = item.alarmLevel
|
||
}
|
||
})
|
||
this.interval2 = setTimeout(()=>{
|
||
this.getTowerNewestCurrentDataAndAlarm();
|
||
},5000)
|
||
}
|
||
})
|
||
},
|
||
getTowerList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getTowerListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.result.length > 0) {
|
||
console.log(res)
|
||
this.towerCraneOptions = res.result;
|
||
this.selectId = res.result[0].id;
|
||
this.devSn = res.result[0].devSn;
|
||
this.selectTowerCrane(res.result[0].id);
|
||
// this.calculate();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//获取选中的设备信息
|
||
selectTowerCrane(val){
|
||
this.selectId = val
|
||
this.towerCraneOptions.forEach(item=>{
|
||
if(val == item.id){
|
||
this.devSn = item.devSn;
|
||
this.towerHeight = item.towerHeight
|
||
this.forearmLength = item.forearmLength
|
||
return;
|
||
}
|
||
})
|
||
console.log(this.towerCraneOptions,this.towerHeight, this.forearmLength)
|
||
clearTimeout(this.interval);
|
||
clearTimeout(this.interval2);
|
||
this.getTowerPageData();
|
||
this.getTowerNewestCurrentDataAndAlarm()
|
||
// this.getRecentWorkList();
|
||
// this.createdEcharts();
|
||
// console.log(this.selectId,this.devSn)
|
||
},
|
||
//获取当前塔吊的数据 当前塔吊司机 当前塔吊视频 当前设备基本信息
|
||
getTowerPageData() {
|
||
let data = {
|
||
devSn: this.devSn,
|
||
};
|
||
getSelectTowerBySnApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log(res.result)
|
||
// this.driverList = res.result.driverList;
|
||
this.towerData = res.result.tower;
|
||
if(this.towerData.structureType == 1){
|
||
this.towerData.structureTypeName = "尖头塔"
|
||
} else if(this.towerData.structureType == 2){
|
||
this.towerData.structureTypeName = "平头塔"
|
||
} else if(this.towerData.structureType == 3){
|
||
this.towerData.structureTypeName = "动臂塔"
|
||
} else{
|
||
this.towerData.structureTypeName = ""
|
||
}
|
||
if(this.towerData.devOnline == 1){
|
||
this.towerData.devOnlineName = "在线"
|
||
} else {
|
||
this.towerData.devOnlineName = "离线"
|
||
}
|
||
// console.log(this.towerData)
|
||
if(res.result.tower.enableVideoUrl==1){
|
||
this.videoList = res.result.videoList;
|
||
}else{
|
||
if(res.result.tower.videoUrl&&res.result.tower.videoUrl!='null'){
|
||
this.videoList = JSON.parse(res.result.tower.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();
|
||
}
|
||
});
|
||
},
|
||
//转换塔吊小车位置
|
||
getTowerCar(){
|
||
this.$nextTick(()=>{
|
||
let width = this.$refs['tower'].offsetWidth - 40,
|
||
height = this.$refs['tower'].offsetHeight - 60
|
||
let widthRatio = width / this.forearmLength,
|
||
heightRatio = height / this.towerHeight
|
||
let ranger = this.realTimeDevData.ranger ? this.realTimeDevData.ranger : "0",
|
||
currentH = this.realTimeDevData.height ? this.realTimeDevData.height : "0"
|
||
console.log(this.towerHeight, this.realTimeDevData.height, currentH)
|
||
if(!this.realTimeDevData.height || currentH < 0){
|
||
currentH = 0
|
||
}
|
||
// if(!this.realTimeDevData.ranger){
|
||
// ranger = this.forearmLength
|
||
// }
|
||
this.towerLineHg = heightRatio * currentH
|
||
this.towerRanger = widthRatio * ranger
|
||
// this.towerLineHg = Math.round(Math.random()*300)
|
||
// this.towerRanger = Math.round(Math.random()*300)
|
||
// this.realTimeDevData.angle = Math.round(Math.random()*300)
|
||
if(this.towerLineHg > height/2){
|
||
this.showBottom = true
|
||
} else {
|
||
this.showBottom = false
|
||
}
|
||
|
||
// console.log(width, height)
|
||
// console.log(this.forearmLength, this.towerHeight)
|
||
// console.log(this.realTimeDevData)
|
||
// console.log(this.towerLineHg, this.towerRanger)
|
||
})
|
||
},
|
||
//获取实时数据
|
||
getRealTimeData(devSn, index) {
|
||
let data = {
|
||
devSn: devSn ? devSn : this.devSn,
|
||
};
|
||
getTowerCurrentDataApi(data).then((res) => {
|
||
console.log(res.result, '-----实时数据')
|
||
if (res.code == 200) {
|
||
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: ""
|
||
}
|
||
}
|
||
this.getTowerCar();
|
||
}
|
||
});
|
||
},
|
||
//选择的视频
|
||
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: 826px;
|
||
width: 100%;
|
||
padding-top: 19px;
|
||
box-sizing: border-box;
|
||
background: #efefef;
|
||
border-bottom: 1px solid #eee;
|
||
border-right: 1px solid #eee;
|
||
}
|
||
.operationInfo_code{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding-right: 20px;
|
||
margin-top: 94px;
|
||
p{
|
||
margin-left: 10px;
|
||
}
|
||
.online{
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: #67C23A;
|
||
margin-right: 10px;
|
||
}
|
||
.leave{
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: #909399;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.operationInfo_select{
|
||
margin-bottom: 52px;
|
||
/deep/ .el-select{
|
||
width: 156px;
|
||
height: 32px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.operationInfo_towercrane{
|
||
margin: 0 auto;
|
||
width: 550px;
|
||
height: 601px;
|
||
position: relative;
|
||
.tower-hook-box{
|
||
width: 408px;
|
||
height: 416px;
|
||
position: absolute;
|
||
right: -4px;
|
||
top: 170px;
|
||
.hook-move-box{
|
||
position: absolute;
|
||
top: -1px;
|
||
width:36px;
|
||
transition: all 0.5s linear;
|
||
}
|
||
.tower_line{
|
||
width: 4px;
|
||
margin-left: 14px;
|
||
background: #F6BA36;
|
||
transition: all 0.5s linear;
|
||
}
|
||
}
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.towercrane_info{
|
||
display: inline-block;
|
||
}
|
||
.info-box{
|
||
display: flex;
|
||
position: relative;
|
||
padding: 10px 0;
|
||
background: #fff;
|
||
border: 1px solid #ccc;
|
||
.info-item{
|
||
width: 66px;
|
||
text-align: center;
|
||
color: #000;
|
||
p:nth-child(1){
|
||
font-size: 16px;
|
||
margin-bottom: 6px;
|
||
}
|
||
p:nth-child(2){
|
||
font-size: 14px;
|
||
margin-bottom: 6px;
|
||
}
|
||
}
|
||
.b-right{
|
||
border-right: 1px dashed #D6DCE3;
|
||
}
|
||
.b-bottom{
|
||
border-bottom: 1px dashed #D6DCE3;
|
||
}
|
||
}
|
||
.info-arrow{
|
||
position: absolute;
|
||
}
|
||
.info1{
|
||
position: absolute;
|
||
right: 160px;
|
||
top: -84px;
|
||
}
|
||
.info2{
|
||
position: absolute;
|
||
right: -100px;
|
||
top: -84px;
|
||
}
|
||
.info3{
|
||
position: absolute;
|
||
right: -134px;
|
||
top: 0px;
|
||
transition: all 0.3s linear;
|
||
.info-box{
|
||
flex-direction: column;
|
||
padding: 0 3px;
|
||
.info-item{
|
||
padding: 10px 0;
|
||
}
|
||
}
|
||
}
|
||
.info4{
|
||
position: absolute;
|
||
left: -114px;
|
||
bottom: 226px;
|
||
}
|
||
.info5{
|
||
position: absolute;
|
||
left: -72px;
|
||
top: 25px;
|
||
}
|
||
.arrow4{
|
||
right: -42px;
|
||
top: 50%;
|
||
transform: translateY(-50%) rotate(270deg);
|
||
img{
|
||
height: 42px;
|
||
width: 8px;
|
||
}
|
||
}
|
||
.arrow3{
|
||
right: -98px;
|
||
top: -55px;
|
||
img{
|
||
height: 110px;
|
||
width: 46px;
|
||
}
|
||
}
|
||
.arrow2{
|
||
left: -38px;
|
||
top: 0;
|
||
transform: rotate(90deg);
|
||
img{
|
||
height: 30px;
|
||
width: 8px;
|
||
}
|
||
}
|
||
.arrow1{
|
||
left: 50%;
|
||
bottom: -66px;
|
||
transform: translateX(-50%);
|
||
img{
|
||
height: 58px;
|
||
width: 8px;
|
||
}
|
||
}
|
||
.show_b{
|
||
bottom: 0;
|
||
top: initial;
|
||
.arrow2{
|
||
bottom: 0;
|
||
top: initial;
|
||
}
|
||
}
|
||
}
|
||
.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_normal2{
|
||
background: #74E94B;
|
||
}
|
||
.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;
|
||
}
|
||
.operationInfo_status_danger2{
|
||
background: #F7C944;
|
||
}
|
||
}
|
||
.status_list{
|
||
padding-top: 12px;
|
||
p{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
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_status_normal2{
|
||
background: #74E94B;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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: 236px;
|
||
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: 410px;
|
||
.video_box{
|
||
padding-top: 26px;
|
||
// padding-bottom: 43px;
|
||
.playVideoBox{
|
||
width: 80%;
|
||
height: 350px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dark{
|
||
|
||
border-color: #12294F;
|
||
.operationInfo_map{
|
||
height: 700px;
|
||
border-color: #12294F;
|
||
background: #091225;
|
||
}
|
||
.operationInfo_code{
|
||
margin-top: -10px;
|
||
}
|
||
.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{
|
||
width: 450px;
|
||
height: 568px;
|
||
.info-box{
|
||
background: #0D1A34;
|
||
border: 1px solid #70C1D2;
|
||
border-image: linear-gradient(#70C1D2, #0D1A34) 1 10;
|
||
.info-item{
|
||
color: #fff;
|
||
}
|
||
.b-right{
|
||
border-color: #163260;
|
||
}
|
||
.b-bottom{
|
||
border-color: #163260;
|
||
}
|
||
}
|
||
.tower-hook-box{
|
||
width: 334px;
|
||
height: 392px;
|
||
top: 160px;
|
||
}
|
||
.arrow3{
|
||
right: -50px;
|
||
}
|
||
.arrow4{
|
||
right: -32px;
|
||
}
|
||
.info5{
|
||
left: -52px;
|
||
}
|
||
.arrow2{
|
||
img{
|
||
height: 52px;
|
||
}
|
||
}
|
||
}
|
||
.operationInfo_status_box{
|
||
background: #091225;
|
||
}
|
||
|
||
.driver-content h3 .driver-sex{
|
||
right: 40px;
|
||
}
|
||
.viedeo_live{
|
||
height: 360px;
|
||
.video_box{
|
||
padding-top: 0px;
|
||
// padding-bottom: 43px;
|
||
.playVideoBox{
|
||
width: 80%;
|
||
height: 284px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.white_bg{
|
||
background: #fff;
|
||
.operationInfo-title::before{
|
||
display: none;
|
||
}
|
||
.operationInfo_towercrane{
|
||
.info1{
|
||
right: 206px;
|
||
}
|
||
.info4{
|
||
left: -88px;
|
||
}
|
||
.info5{
|
||
left: -36px;
|
||
}
|
||
.arrow3{
|
||
right: -52px;
|
||
}
|
||
.arrow4{
|
||
right: -32px;
|
||
}
|
||
.arrow2{
|
||
img{
|
||
height: 50px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |