1240 lines
57 KiB
Vue
1240 lines
57 KiB
Vue
<template>
|
||
<!-- 防碰撞-->
|
||
<vue-scroll style="height: 100%">
|
||
<div class="alarmAnalysis" :class="{'white_bg': styleType == 1 || isDockingToWoer}" v-if="!showMore">
|
||
<div class="alarmAnalysis_top flex">
|
||
<div class="towercrane_status">
|
||
<div class="alarmAnalysis_title">
|
||
<!-- 塔吊工作情况 -->
|
||
{{ $t('message.towerCrane.towerWorkCrane') }}
|
||
</div>
|
||
<div class="status_list flex">
|
||
<div class="status_item">
|
||
<div class="status_content">
|
||
<span>{{devData.faultNum}}</span>
|
||
<!-- 故障总数 -->
|
||
{{ $t('message.towerCrane.totalNumberOfFaults') }}
|
||
</div>
|
||
</div>
|
||
<div class="status_item">
|
||
<div class="status_content">
|
||
<span>{{devData.alarmNum}}</span>
|
||
<!-- 报警总数 -->
|
||
{{ $t('message.towerCrane.totalNumberOfAlarms') }}
|
||
</div>
|
||
</div>
|
||
<div class="status_item">
|
||
<div class="status_content">
|
||
<span>{{devData.warningNum}}</span>
|
||
<!-- 预警总数 -->
|
||
{{ $t('message.towerCrane.totalEarlyWarning') }}
|
||
</div>
|
||
</div>
|
||
<div class="status_item">
|
||
<div class="status_content">
|
||
<span>{{devData.devOnline}}/<b>{{devData.devNum}}</b></span>
|
||
<!-- 设备总数 -->
|
||
{{ $t('message.towerCrane.totalEquipment') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="towerheight_message">
|
||
<div class="alarmAnalysis_title">
|
||
<!-- 群塔高度信息 -->
|
||
{{ $t('message.towerCrane.towerHeightInformation') }}
|
||
</div>
|
||
<div class="tower_height">
|
||
<vue-scroll style="height: 100%;width: 100%">
|
||
<ul>
|
||
<li v-for="(item,index) in heightList" :key="index"><span></span></li>
|
||
<div class="tower_list" :style="{width: towerHeightList.length > 6 ?1290 + 200*(towerHeightList.length-6) + 'px' :1290 + 'px'}" ref="moveBox">
|
||
<div v-for="(item, index) in towerHeightList"
|
||
:key="index"
|
||
class="tower_item"
|
||
@mousedown="move($event,item)"
|
||
@mouseup="up"
|
||
:style="{'left': item.coordinateX + 'px','bottom': '0', 'height':item.heightRatio*100 > 100 ?100 + '%':item.heightRatio*100 + '%', 'width':item.heightRatio*179 > 300 ? 300 + 'px':item.heightRatio*179 + 'px'}">
|
||
<!-- 塔尖高 -->
|
||
<span class="span1" v-if="item.referenceHeight" style="white-space:nowrap">{{ $t('message.towerCrane.spireHeight') }}:{{item.referenceHeight}}</span>
|
||
<!-- 大臂高 -->
|
||
<span class="span2" v-if="item.towerHeight" style="white-space:nowrap">{{ $t('message.towerCrane.boomHeight') }}:{{item.towerHeight}}</span>
|
||
<img v-if="styleType == 2" src="./../../../assets/images/operationInfo/tower-crane3.png">
|
||
<img v-else src="./../../../assets/images/operationInfo/tower-crane3_w.png"/>
|
||
<!-- 标准节数量 -->
|
||
<span v-if="item.heightRatio" style="position: absolute;top: 50%;left: -50px;transform: translateY(-50%);">{{ $t('message.towerCrane.standardSectionNumber') }}:{{item.nodeCount?item.nodeCount:'0'}}</span>
|
||
<!-- 前臂长度 -->
|
||
<span v-if="item.heightRatio" style="position: absolute;top: 30%;left: 50px;white-space:nowrap">{{ $t('message.towerCrane.forearmLength') }}:{{item.forearmLength?item.forearmLength:'0'}}</span>
|
||
<!-- <i style="height: 30%"></i> -->
|
||
<div style="width: 100%;height:100%; z-index: 2; position: absolute; top: 0; left: 0;"></div>
|
||
<span v-if="item.heightRatio" style="position: absolute;top:100%;left: 20px;white-space:nowrap;line-height:30px;color:#2A2E3F">{{item.devName?item.devName:''}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="icon_land" :style="{'height': '10%'}">
|
||
<img :style="{width: towerHeightList.length > 6 ?1290 + 200*(towerHeightList.length-6) + 'px' :1290 + 'px'}" src="./../../../assets/images/operationInfo/land.png">
|
||
</div>
|
||
</ul>
|
||
<div class="tower_lable"></div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex">
|
||
<div class="prevent_crash">
|
||
<div class="alarmAnalysis_title">
|
||
<!-- 群塔防碰撞 -->
|
||
{{ $t('message.towerCrane.antiCollision') }}
|
||
<div class="alarmAnalysis_more" @click="showMoreAlarmAnalysis">
|
||
<!-- 塔吊场布情况 -->
|
||
{{ $t('message.towerCrane.siteLayout') }}
|
||
<i class="el-icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
<div v-if="towerHeightList.length > 0"
|
||
class="svg_box"
|
||
id="svg_box"
|
||
>
|
||
<svg id="svg" ref="svg" class="svg-pan-zoom_viewport" style="width: 100%; height: 100%;">
|
||
<!-- <g v-for="(item, index) in towerList" :key="index" @click="checkItem(index)">
|
||
<circle :cx="item.cx" :cy="item.cy" :r="item.r" stroke="#FE6565" stroke-width="1" fill="rgba(255, 87, 94, 0.12)" />
|
||
<path stroke="#FE6565" :d="item.d">
|
||
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="2s" type="rotate" :from="item.from" :to="item.to" fill="freeze"/>
|
||
</path>
|
||
</g> -->
|
||
</svg>
|
||
</div>
|
||
<div v-else>
|
||
<img style="display:block;margin: 153px auto;border: none" src="./../../../assets/images/noData2.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="crash_message">
|
||
<div class="alarmAnalysis_title">
|
||
<!-- 防碰撞报警信息 -->
|
||
{{ $t('message.towerCrane.antiCollisionAlarmInfo') }}
|
||
</div>
|
||
<div class="flex" style="align-items: flex-start">
|
||
<div class="crash_list">
|
||
<!-- 报警列表 -->
|
||
<h3>{{ $t('message.towerCrane.alarmList') }}</h3>
|
||
<vue-scroll style="height: 280px">
|
||
<ul class="crash_item_box" v-if="collideAlarmList.length > 0">
|
||
<li @mouseenter="selectCollideAlarmListShow = index" @mouseleave="selectCollideAlarmListShow = ''" v-for="(item, index) in collideAlarmList"
|
||
:key="index"
|
||
class="crash_item"
|
||
:class="{'active_crash': selectIndex == 0,selectShow:selectCollideAlarmListShow === index || selectCollideAlarmListShow2 === index}"
|
||
@click="checkCrashItem(item, index)">
|
||
<!-- 设备名称 -->
|
||
<h4>{{ $t('message.towerCrane.equipmentName') }}：{{item.devName ? item.devName : 0}}</h4>
|
||
<h4>{{item.alarmType}}</h4>
|
||
<p>{{item.alarmTime}}</p>
|
||
<!-- 报警类型:防碰撞报警 -->
|
||
<p style="font-size: 16px;">{{ $t('message.towerCrane.alarmType') }}</p>
|
||
<!-- <ul>-->
|
||
<!-- <li>载重：<span style="font-size: 16px">{{item.loading ? item.loading : 0}}kg</span></li>-->
|
||
<!-- <li>幅度：<span style="font-size: 16px">{{item.ranger ? item.ranger : 0}}m</span></li>-->
|
||
<!-- <!– <li>吊重：<span>{{item.loading}}kg</span></li> –>-->
|
||
<!-- <li>角度：<span style="font-size: 16px">{{item.angle ? item.angle : 0}}°</span></li>-->
|
||
<!-- <li>风速：<span style="font-size: 16px">{{item.windspeed ? item.windspeed : 0}}m/s</span></li>-->
|
||
<!-- <li>力矩比：<span style="font-size: 16px">{{item.torqueRatio ? item.torqueRatio : 0}}%</span></li>-->
|
||
<!-- <li>吊钩高度：<span style="font-size: 16px">{{item.height ? item.height : 0}}m</span></li>-->
|
||
<!-- </ul>-->
|
||
</li>
|
||
</ul>
|
||
<div v-else style="padding-top: 20px;">
|
||
<img style="display:block;margin: 0px auto;" src="./../../../assets/images/noData2.png"/>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="crash_info">
|
||
<!-- 报警详细 -->
|
||
<h3>{{ $t('message.towerCrane.alarmDetails') }}</h3>
|
||
<div class="crash_info_box flex" v-if="towerDetail1.forearmLength">
|
||
<div class="crash_info_item">
|
||
<h4>{{towerDetail1.devName}}</h4>
|
||
<div class="crash_info_card flex">
|
||
<div class="info_item b-right">
|
||
<p>{{towerDetail1.forearmLength ? towerDetail1.forearmLength : 0}}m</p>
|
||
<!-- 前臂长 -->
|
||
<span>{{ $t('message.towerCrane.forearmLength') }}</span>
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon3.png" />
|
||
<img v-else src="@/assets/images/operationInfo/towercrane-icon3_w.png" />
|
||
</div>
|
||
<div class="info_item b-right">
|
||
<p>{{towerDetail1.towerHeight ? towerDetail1.towerHeight : 0}}m</p>
|
||
<!-- 大臂高 -->
|
||
<span>{{ $t('message.towerCrane.boomHeight') }}</span>
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon4.png" />
|
||
<img v-else src="@/assets/images/operationInfo/towercrane-icon4_w.png" />
|
||
</div>
|
||
<div class="info_item b-right">
|
||
<p>{{towerDetail1.posteriorArmLength ? towerDetail1.posteriorArmLength : 0}}m</p>
|
||
<!-- 后臂长 -->
|
||
<span>{{ $t('message.towerCrane.rearArmLength') }}</span>
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon5.png" />
|
||
<img v-else src="@/assets/images/operationInfo/towercrane-icon5_w.png" />
|
||
</div>
|
||
<div class="info_item">
|
||
<p>{{towerDetail1.referenceHeight ? towerDetail1.referenceHeight : 0}}m</p>
|
||
<!-- 塔尖高度 -->
|
||
<span>{{ $t('message.towerCrane.spireHeight') }}</span>
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon5.png" />
|
||
<img v-else src="@/assets/images/operationInfo/towercrane-icon5_w.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="crash_info_item">
|
||
<h4>{{towerDetail2.devName}}</h4>
|
||
<div class="crash_info_card flex">
|
||
<div class="info_item b-right">
|
||
<p>{{towerDetail2.forearmLength ? towerDetail2.forearmLength : 0}}m</p>
|
||
<!-- 前臂长 -->
|
||
<span>{{ $t('message.towerCrane.forearmLength') }}</span>
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon3.png" />
|
||
<img v-else src="@/assets/images/operationInfo/towercrane-icon3_w.png" />
|
||
</div>
|
||
<div class="info_item b-right">
|
||
<p>{{towerDetail2.towerHeight ? towerDetail2.towerHeight : 0}}m</p>
|
||
<!-- 大臂高 -->
|
||
<span>{{ $t('message.towerCrane.boomHeight') }}</span>
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon4.png" />
|
||
<img v-else src="@/assets/images/operationInfo/towercrane-icon4_w.png" />
|
||
</div>
|
||
<div class="info_item b-right">
|
||
<p>{{towerDetail2.posteriorArmLength ? towerDetail2.posteriorArmLength : 0}}m</p>
|
||
<!-- 后臂长 -->
|
||
<span>{{ $t('message.towerCrane.rearArmLength') }}</span>
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon5.png" />
|
||
<img v-else src="@/assets/images/operationInfo/towercrane-icon5_w.png" />
|
||
</div>
|
||
<div class="info_item">
|
||
<p>{{towerDetail2.referenceHeight ? towerDetail2.referenceHeight : 0}}m</p>
|
||
<!-- 塔尖高度 -->
|
||
<span>{{ $t('message.towerCrane.spireHeight') }}</span>
|
||
<img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon5.png" />
|
||
<img v-else src="@/assets/images/operationInfo/towercrane-icon5_w.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tower_box flex" v-if="towerDetail2.forearmLength">
|
||
<div class="left_tower tower_item">
|
||
<div class="imgBox">
|
||
<img class="tower-crane" :style="{width: 144*proportion + 'px',height: 139*proportion + 'px'}" src="@/assets/images/operationInfo/tower-crane_new.png"/>
|
||
<div :style="{left:64 * xImg1 + 26 + '%'}" style="left: 26%;top: 28%;height: 100%;transition: all 1s" class="moveBox">
|
||
<div style="transition: all 1s" :style="{height:40*yImg1 + '%'}" class="rope"></div>
|
||
<img style="transition: all 1s" class="tower_hook" :style="{height: 40*proportion + 'px'}" src="@/assets/images/operationInfo/tower_hook.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="left_card">
|
||
<ul>
|
||
<!-- 吊重 -->
|
||
<li v-if="towerDetail1.weightSet == 1" class="b-bottom"><span>{{runList1.loading ? runList1.loading : 0}}kg</span>{{ $t('message.towerCrane.liftingWeight') }}</li>
|
||
<!-- 幅度 -->
|
||
<li class="b-bottom"><span>{{runList1.ranger ? runList1.ranger : 0}}m</span>{{ $t('message.towerCrane.range') }}</li>
|
||
<!-- runList1.height-->
|
||
<!-- 吊钩高度 -->
|
||
<li><span>{{runList1.height ? runList1.height : 0}}m</span>{{ $t('message.towerCrane.hookHeight') }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="right_tower tower_item">
|
||
<div style="transform: rotateY(180deg);" class="imgBox">
|
||
<img class="tower-crane" :style="{width: 144*proportion2 + 'px',height: 139*proportion2 + 'px'}" src="@/assets/images/operationInfo/tower-crane_new.png"/>
|
||
<div :style="{left:64 * xImg2 + 26 + '%'}" style="left: 26%;top: 28%;height: 100%;transition: all 1s" class="moveBox">
|
||
<div style="transition: all 1s" :style="{height:40*yImg2 + '%'}" class="rope"></div>
|
||
<img style="transition: all 1s" class="tower_hook" :style="{height: 40*proportion2 + 'px'}" src="@/assets/images/operationInfo/tower_hook.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="right_card">
|
||
<ul>
|
||
<li v-if="towerDetail2.weightSet == 1" class="b-bottom"><span>{{runList2.loading ? runList2.loading : 0}}kg</span>{{ $t('message.towerCrane.liftingWeight') }}</li>
|
||
<li class="b-bottom"><span>{{runList2.ranger ? runList2.ranger : 0}}m</span>{{ $t('message.towerCrane.range') }}</li>
|
||
<!-- runList2.height-->
|
||
<li><span>{{runList2.height ? runList2.height : 0}}m</span>{{ $t('message.towerCrane.hookHeight') }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else style="padding-top: 20px;">
|
||
<img style="display:block;margin: 0px auto;" src="./../../../assets/images/noData2.png"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height: 100%" v-else>
|
||
<!-- 塔吊场布情况 -->
|
||
<el-page-header
|
||
style="padding-bottom: 10px"
|
||
@back="goBack"
|
||
:content="$t('message.towerCrane.LayoutOfTowerCraneYard')"
|
||
class="backText"
|
||
></el-page-header>
|
||
<distributeDatail :sn="projectSn"></distributeDatail>
|
||
</div>
|
||
</vue-scroll>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from "moment";
|
||
import distributeDatail from "./distributeDetail.vue"
|
||
import {
|
||
selectTowerAlarmAndDevCountApi,
|
||
selectCollideAlarmListApi,
|
||
selectCollideDevRunDateApi,
|
||
selectTowerListApi,
|
||
selectProjectTowerNewestCurrentDataListApi,
|
||
editTowerInfoApi,
|
||
selectTowerNumAndAlarmCountApi//查询塔吊设备数量统计和当日报警、预数量统计
|
||
} from "@/assets/js/api/towerCrane"
|
||
|
||
export default {
|
||
components:{
|
||
distributeDatail
|
||
},
|
||
props:['sn'],
|
||
data(){
|
||
return{
|
||
selectCollideAlarmListShow:"",//移动样式
|
||
selectCollideAlarmListShow2:"",//移动样式选中样式
|
||
deg: '60 100 50',
|
||
upDate: true,
|
||
selectIndex: 0,
|
||
svgDom: Object,
|
||
svgpanzoom: null,
|
||
towerList: [{
|
||
cx: "100",
|
||
cy: "50",
|
||
r: "60",
|
||
d: "M100 50 l0 -60",
|
||
from: "0 100 50",
|
||
deg: "90 100 50"
|
||
}],
|
||
projectSn: "",
|
||
devData:{
|
||
devNum: "",
|
||
devOnline: "",
|
||
warningNum: "",
|
||
totalAlarmNum: "",
|
||
alarmNum: "",
|
||
faultNum:''//故障数
|
||
},
|
||
collideAlarmList:[],
|
||
towerDetail1: {},
|
||
towerDetail2: {},
|
||
heightList:["-30", "0", "30", "60", "90"],
|
||
towerHeightList:[],
|
||
timer: null,
|
||
showMore: false,
|
||
styleType: 1,
|
||
moveData: {},
|
||
heightRatio: "",//比例
|
||
runList1:"",//塔吊一运行数据
|
||
runList2:"",//塔吊二运行数据
|
||
proportion:"",//比例,
|
||
proportion2:"",//比例2
|
||
xImg1:"",
|
||
yImg1:"",
|
||
xImg2:"",
|
||
yImg2:"",
|
||
minX:"",//最小x
|
||
minY:"",//最小x的y轴
|
||
isDockingToWoer: ""
|
||
}
|
||
},
|
||
created(){
|
||
this.isDockingToWoer = isDockingToWoer
|
||
this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
|
||
this.styleType = this.$store.state.userInfo.styleType;
|
||
this.selectTowerAlarmAndDevCount();
|
||
this.selectCollideAlarmList();
|
||
this.selectTowerHeight();
|
||
},
|
||
mounted(){
|
||
|
||
},
|
||
beforeDestroy(){
|
||
clearTimeout(this.timer)
|
||
},
|
||
methods:{
|
||
showMoreAlarmAnalysis(){
|
||
console.log(1);
|
||
clearTimeout(this.timer)
|
||
this.showMore = true
|
||
},
|
||
goBack(){
|
||
this.showMore = false;
|
||
this.selectTowerAlarmAndDevCount();
|
||
this.selectCollideAlarmList();
|
||
this.selectTowerHeight();
|
||
},
|
||
// 获取塔群高度
|
||
selectTowerHeight(){
|
||
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
|
||
}
|
||
})
|
||
// if(maxHeight > 90){
|
||
// let a = Math.ceil((maxHeight - 30) / 30)
|
||
// for(let i = 0; i<a; i++){
|
||
// this.heightList.push((this.heightList.length-1)*30)
|
||
// }
|
||
// }
|
||
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.$nextTick(()=>{
|
||
this.createSvg()
|
||
var panZoomTiger = svgPanZoom('#svg');
|
||
})
|
||
}
|
||
})
|
||
// let data = this.towerHeightList,
|
||
// maxHeight = 0
|
||
// data.forEach( item => {
|
||
// if (item.height > maxHeight){
|
||
// maxHeight = item.height
|
||
// }
|
||
// })
|
||
},
|
||
// 切换防碰撞报警信息
|
||
checkCrashItem(item, index){
|
||
this.selectCollideAlarmListShow2 = index
|
||
console.log(item);
|
||
this.selectIndex = index
|
||
let data = {
|
||
collideDevSn: item.collideDevSn,
|
||
devSn: item.devSn,
|
||
endTime: moment(item.alarmTime).format('YYYY-MM-DD HH:mm:ss'),
|
||
// endTime:"2021-09-11 13:09:01",
|
||
projectSn: this.projectSn,
|
||
}
|
||
let time = new Date(moment(item.alarmTime).format('YYYY-MM-DD HH:mm:ss')).getTime() - 1000*60
|
||
// data.startTime = "2021-09-10"
|
||
data.startTime = moment(time).format('YYYY-MM-DD HH:mm:ss')
|
||
// console.log( data.startTime)
|
||
selectCollideDevRunDateApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code==200 && res.result.length > 0){
|
||
this.towerDetail1 = res.result[0]
|
||
this.towerDetail2 = res.result[1]
|
||
console.log(this.towerDetail2);
|
||
console.log(this.runList1);
|
||
if(res.result[0].runlist && res.result[1].runlist){
|
||
this.runList1 = res.result[0].runlist[0]
|
||
this.runList2 = res.result[1].runlist[0]
|
||
this.xImg1 = this.runList1.ranger/this.towerDetail1.forearmLength > 1?1:this.runList1.ranger/this.towerDetail1.forearmLength//X轴偏移
|
||
this.yImg1 = this.runList1.height/this.towerDetail1.towerHeight > 1?1:this.runList1.height/this.towerDetail1.towerHeight//Y轴偏移towerHeight
|
||
this.xImg2 = this.runList2.ranger/this.towerDetail2.forearmLength > 1 ? 1:this.runList2.ranger/this.towerDetail2.forearmLength//X轴偏移
|
||
this.yImg2 = this.runList2.height/this.towerDetail2.towerHeight > 1? 1:this.runList2.height/this.towerDetail2.towerHeight//Y轴偏移
|
||
|
||
}else {
|
||
this.xImg1 = 0
|
||
this.yImg1 = 0
|
||
this.xImg2 = 0
|
||
this.yImg2 = 0
|
||
}
|
||
let maxHeight = 0
|
||
if ((res.result[0].referenceHeight + res.result[0].towerHeight) > (res.result[1].referenceHeight + res.result[1].towerHeight)){
|
||
maxHeight = res.result[0].referenceHeight + res.result[0].towerHeight
|
||
this.proportion = (res.result[0].referenceHeight + res.result[0].towerHeight) /maxHeight
|
||
this.proportion2 = (res.result[1].referenceHeight + res.result[1].towerHeight) /maxHeight
|
||
}else {
|
||
maxHeight = res.result[1].referenceHeight + res.result[1].towerHeight
|
||
this.proportion = (res.result[0].referenceHeight + res.result[0].towerHeight) /maxHeight
|
||
this.proportion2 = (res.result[1].referenceHeight + res.result[1].towerHeight) /maxHeight
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
// 获取塔吊工作情况
|
||
selectTowerAlarmAndDevCount(){
|
||
selectTowerNumAndAlarmCountApi({projectSn: this.projectSn}).then(res=>{
|
||
console.log(res.result)
|
||
if(res.code == 200 && res.result){
|
||
this.devData.devNum = res.result.devCount.devNum
|
||
this.devData.devOnline = res.result.devCount.devOnline
|
||
this.devData.alarmNum = res.result.alarmCount.alarmNum
|
||
this.devData.totalAlarmNum = res.result.alarmCount.totalAlarmNum
|
||
this.devData.warningNum = res.result.alarmCount.warningNum
|
||
this.devData.faultNum = res.result.faultNum
|
||
}
|
||
})
|
||
},
|
||
// 获取防碰撞报警信息
|
||
selectCollideAlarmList(){
|
||
selectCollideAlarmListApi({projectSn: this.projectSn, opType: "1"}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
console.log('-----防碰撞报警信息', res)
|
||
res.result.forEach(item=>{
|
||
item.alarmTime = moment(item.alarmTime).format('YYYY.MM.DD HH:mm:ss');
|
||
})
|
||
this.collideAlarmList = res.result
|
||
if(res.result.length>0){
|
||
this.checkCrashItem(res.result[0], 0)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 实时获取塔吊回转角度
|
||
selectTowerCurrentData(){
|
||
selectProjectTowerNewestCurrentDataListApi({projectSn:this.projectSn}).then(res=>{
|
||
if(res.code == 200){
|
||
if(this.timer){
|
||
clearTimeout(this.timer)
|
||
}
|
||
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){
|
||
// forearmLength 前臂长
|
||
this.towerHeightList[i].t2.attr({
|
||
text:this.$t('message.towerCrane.forearmLength')+':' + 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.timer = setTimeout(()=>{
|
||
this.selectTowerCurrentData();
|
||
},5000)
|
||
}
|
||
// console.log(res, '-----实时回转角度')
|
||
})
|
||
},
|
||
// 绘制塔群
|
||
createSvg(){
|
||
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){
|
||
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: "rgba(255, 87, 94, 0.12)",
|
||
stroke: "#FE6565",
|
||
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: "#FE6565",
|
||
strokeWidth: 1,
|
||
})
|
||
item.c = this.svgDom.paper.circle((item.relatedX - this.minX).toFixed(2), (item.relatedY - this.minY).toFixed(2),2).attr({
|
||
fill: "#FE6565",
|
||
stroke: "#FE6565",
|
||
strokeWidth: item.forearmLength/8,
|
||
});
|
||
// item.d = this.svgDom.paper.circle((item.relatedX - this.minX).toFixed(2), (item.relatedY - this.minY).toFixed(2),item.forearmLength/16).attr({
|
||
// fill: "#fff",
|
||
// stroke: "#fff",
|
||
// strokeWidth: 0.2,
|
||
// });
|
||
// item.d = this.svgDom.paper.circle(item.relatedX, Number(item.relatedY)-50,item.forearmLength/8).attr({
|
||
// fill: "#fff",
|
||
// stroke: "#fff",
|
||
// strokeWidth: 0.2,
|
||
// });
|
||
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.6)",
|
||
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,['前臂长:',item.forearmLength?item.forearmLength : "0", "m"]).attr({
|
||
fill: "rgba(255, 255, 255, 0.6)",
|
||
fontSize: 9
|
||
})
|
||
if(this.styleType == 1 || isDockingToWoer){
|
||
item.t2.attr({
|
||
fill: "#2A2E3F"
|
||
})
|
||
}
|
||
// item.t3 = this.svgDom.paper.text(item.relatedX, item.relatedY,["回转：", item.angle?item.angle: "0°"]).attr({
|
||
// fill: "rgba(255, 255, 255, 0.6)",
|
||
// fontSize: 4
|
||
// })
|
||
// let rot = 0
|
||
// Snap.animate(rot, rot + 45, function(value) {
|
||
// rot = value;
|
||
// // 旋转
|
||
// item.b.transform(new Snap.Matrix().rotate(value, item.relatedX, item.relatedY));
|
||
// }, 500);
|
||
}
|
||
})
|
||
// let a = this.svgDom.paper.circle(100,100,60),
|
||
// b =this.svgDom.paper.line(100, 100, 100, 40),
|
||
// c = this.svgDom.paper.circle(100, 100,4);
|
||
// this.svgDom.attr({
|
||
// fill: "rgba(255, 87, 94, 0.12)",
|
||
// stroke: "#FE6565",
|
||
// strokeWidth: 1,
|
||
// })
|
||
this.selectTowerCurrentData();
|
||
// c.attr({
|
||
// fill: "rgba(255, 87, 94, 0.12)",
|
||
// stroke: "#FE6565",
|
||
// strokeWidth: 3,
|
||
// })
|
||
// let rot = 0
|
||
// Snap.animate(rot, rot + 45, function(value) {
|
||
// rot = value;
|
||
// // 旋转
|
||
// b.transform(new Snap.Matrix().rotate(value, 100, 100));
|
||
// }, 500);
|
||
|
||
// console.log(svgPanZoom,panZoomTiger)
|
||
},
|
||
move(e, val){
|
||
this.moveData = val
|
||
let odiv = e.target,
|
||
targetWidth = e.target.offsetWidth,
|
||
width = this.$refs["moveBox"].offsetWidth
|
||
let disX = e.clientX - odiv.offsetLeft;
|
||
let x = Number(val.coordinateX)
|
||
console.log(width,targetWidth);
|
||
// e.target.addEventListener('mousemove', this.moveDom(e,val,disX, x))
|
||
document.onmousemove = (e)=>{
|
||
let left = (e.clientX - disX) + x;
|
||
if(left < 0){
|
||
return;
|
||
} else if(left > (width-targetWidth)){
|
||
return;
|
||
}
|
||
//移动当前元素
|
||
val.coordinateX = left
|
||
|
||
};
|
||
document.onmouseup = (e) => {
|
||
this.changeX()
|
||
console.log('--------鼠标抬起')
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
};
|
||
},
|
||
up(e){
|
||
this.changeX()
|
||
console.log('--------鼠标抬起')
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
},
|
||
changeX(){
|
||
console.log(this.moveData)
|
||
let data = {
|
||
id: this.moveData.id,
|
||
coordinateX: this.moveData.coordinateX
|
||
}
|
||
editTowerInfoApi(data).then((res)=>{
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.towerCrane.modifySuccess')) // 修改成功！
|
||
}
|
||
console.log(res)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.imgBox{
|
||
position: relative;
|
||
.moveBox{
|
||
position: absolute;
|
||
.rope{
|
||
width: 3px;
|
||
background: yellow;
|
||
margin: 0 auto
|
||
}
|
||
}
|
||
}
|
||
.alarmAnalysis{
|
||
background: #091225;
|
||
height: 100%;
|
||
padding: 25px;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
.alarmAnalysis_top{
|
||
margin-bottom: 25px;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.towercrane_status{
|
||
width: 400px;
|
||
height: 360px;
|
||
margin-right: 20px;
|
||
background: #0D1A34;
|
||
border: 1px solid rgba(18, 41, 79, 1);
|
||
}
|
||
.towerheight_message{
|
||
flex: 1;
|
||
height: 360px;
|
||
background: #0D1A34;
|
||
border: 1px solid rgba(18, 41, 79, 1);
|
||
}
|
||
.tower_height{
|
||
height: calc(100% - 56px);
|
||
ul{
|
||
position: relative;
|
||
width: calc(100% - 60px);
|
||
height: calc(100% - 50px);
|
||
margin-left: 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
li{
|
||
flex: 1;
|
||
// border-bottom: 1px dashed #212C45;
|
||
position: relative;
|
||
span{
|
||
display: block;
|
||
width: 36px;
|
||
position: absolute;
|
||
left: -48px;
|
||
text-align: right;
|
||
bottom: -6px;
|
||
font-size: 12px;
|
||
color: #79808E;
|
||
}
|
||
}
|
||
.tower_list{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
.tower_item{
|
||
width: 179px;
|
||
position: absolute;
|
||
z-index: 3;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.span1{
|
||
display: block;
|
||
position: absolute;
|
||
left: 24%;
|
||
top: 5px;
|
||
font-size: 16px;
|
||
}
|
||
.span2{
|
||
display: block;
|
||
position: absolute;
|
||
left: 28%;
|
||
top: 50%;
|
||
font-size: 16px;
|
||
}
|
||
img{
|
||
height: calc(100% - 18px);
|
||
width: 100%;
|
||
}
|
||
i{
|
||
display: block;
|
||
position: absolute;
|
||
width: 80px;
|
||
background: #0D1A34;
|
||
left: 0;
|
||
z-index: -1;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
.icon_land{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.alarmAnalysis_title{
|
||
position: relative;
|
||
padding-left: 18px;
|
||
line-height: 31px;
|
||
margin-bottom: 16px;
|
||
font-size: 18px;
|
||
padding-top: 10px;
|
||
color: #7CD3DE;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: 900;
|
||
.alarmAnalysis_more{
|
||
font-size: 14px;
|
||
color: #EEEFF0;
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
i{
|
||
color: #7CD3DE;
|
||
}
|
||
}
|
||
}
|
||
.alarmAnalysis_title::before{
|
||
content: "";
|
||
width: 2px;
|
||
height: 31px;
|
||
background: linear-gradient(to bottom, #88E7F0, #15315F);
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
}
|
||
.status_list{
|
||
flex-wrap: wrap;
|
||
.status_item{
|
||
flex: 50%;
|
||
text-align: center;
|
||
height: 150px;
|
||
.status_content{
|
||
width: 100px;
|
||
height: 90px;
|
||
background: url("./../../projectLevel/assets/images/menuBG_active.gif") no-repeat center;
|
||
background-size: 100%;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
// justify-content: center;
|
||
font-size: 14px;
|
||
color: #9EA6B0;
|
||
span{
|
||
margin-bottom: 3px;
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
b{
|
||
color: #88E7F0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.prevent_crash{
|
||
width: 578px;
|
||
height: 370px;
|
||
background: #0D1A34;
|
||
border: 1px solid rgba(18, 41, 79, 1);
|
||
margin-right: 20px;
|
||
}
|
||
.crash_message{
|
||
flex: 1;
|
||
height: 370px;
|
||
background: #0D1A34;
|
||
border: 1px solid rgba(18, 41, 79, 1);
|
||
}
|
||
.crash_list{
|
||
color: #99A2B2;
|
||
width: 356px;
|
||
margin: 0 24px;
|
||
h3{
|
||
font-size: 14px;
|
||
margin: 0;
|
||
// color: #99A2B2;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.crash_item_box{
|
||
// background: #17274A;
|
||
padding-right: 20px;
|
||
border-right: 1px solid #12294F;
|
||
.crash_item{
|
||
opacity: 0.5;
|
||
background: #17274A;
|
||
border-radius: 8px;
|
||
margin-bottom: 14px;
|
||
padding: 20px 20px;
|
||
box-sizing: border-box;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
.active_crash{
|
||
border: 1px solid #75C7D3;
|
||
}
|
||
h4{
|
||
color: #FE6565;
|
||
margin: 0;
|
||
margin-bottom: 3px;
|
||
font-size: 16px;
|
||
}
|
||
p{
|
||
margin-bottom: 14px;
|
||
}
|
||
ul{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
li{
|
||
width: 33%;
|
||
margin-bottom: 6px;
|
||
cursor: pointer;
|
||
span{
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.crash_info{
|
||
flex: 1;
|
||
padding-right: 24px;
|
||
box-sizing: border-box;
|
||
h3{
|
||
font-size: 14px;
|
||
margin: 0;
|
||
color: #99A2B2;
|
||
margin-bottom: 6px;
|
||
}
|
||
}
|
||
.crash_info_box{
|
||
justify-content: space-between;
|
||
// padding-right: 24px;
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
box-sizing: border-box;
|
||
.crash_info_item{
|
||
font-size: 14px;
|
||
// margin-right: 30px;
|
||
h4{
|
||
color: #7CD3DE;
|
||
margin: 0;
|
||
margin-bottom: 6px;
|
||
}
|
||
}
|
||
.crash_info_card{
|
||
border: 1px solid;
|
||
border-image: linear-gradient(to bottom, #70C1D2, #0D1A34) 10 10;
|
||
.info_item{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 9px 13px;
|
||
font-size: 16px;
|
||
p{
|
||
font-size: 16px;
|
||
margin-bottom: 6px;
|
||
}
|
||
span{
|
||
margin-bottom: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
img{
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.b-right{
|
||
border-right: 1px dashed #163260;
|
||
}
|
||
.b-bottom{
|
||
border-bottom: 1px dashed #163260;
|
||
}
|
||
.tower_box{
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
.tower_item{
|
||
position: relative;
|
||
}
|
||
.left_card{
|
||
position: absolute;
|
||
bottom: -18px;
|
||
left: -71px;
|
||
ul{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-items: center;
|
||
li{
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #A0A6AF;
|
||
width: 60px;
|
||
padding: 3px 0;
|
||
span{
|
||
display: block;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right_card{
|
||
position: absolute;
|
||
bottom: -18px;
|
||
right: -71px;
|
||
ul{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-items: center;
|
||
li{
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #A0A6AF;
|
||
width: 60px;
|
||
padding: 3px 0;
|
||
span{
|
||
display: block;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.left_tower{
|
||
margin-left: 73px;
|
||
.tower-crane{
|
||
width: 144px;
|
||
height: 139px;
|
||
}
|
||
}
|
||
.right_tower{
|
||
margin-right: 73px;
|
||
}
|
||
}
|
||
.svg_box{
|
||
width: calc(100% - 20px);
|
||
height: calc(100% - 66px);
|
||
margin: 0 auto;
|
||
// border:1px solid red;
|
||
}
|
||
}
|
||
.backText {
|
||
|
||
font-size: 16px;
|
||
}
|
||
.jyjzPage .backText{
|
||
margin: -10px 0 14px 0;
|
||
padding: 15px 15px 0;
|
||
/deep/.el-page-header__content{
|
||
color: white;
|
||
font-size: 16px;
|
||
}
|
||
/deep/.el-page-header__title{
|
||
font-size: 16px;
|
||
}
|
||
/deep/.el-page-header__left::after{
|
||
background-color:#7CD3DE
|
||
}
|
||
}
|
||
.white_bg{
|
||
background: #F3F5FD;
|
||
.towercrane_status{
|
||
height: 392px;
|
||
background: #fff;
|
||
border: 0;
|
||
border-radius: 3px;
|
||
}
|
||
.status_list{
|
||
.status_item {
|
||
.status_content{
|
||
height: 100px;
|
||
color: #2A2E3F;
|
||
background: url('./../../../assets/images/operationInfo/white_bg.png') no-repeat center;
|
||
span{
|
||
color: #2A2E3F;
|
||
b{
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.alarmAnalysis_title{
|
||
margin-bottom: 20px;
|
||
color: #2A2E3F;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
.alarmAnalysis_more{
|
||
color: #2A2E3F;
|
||
i{
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
}
|
||
.alarmAnalysis_title::before{
|
||
display: none;
|
||
}
|
||
.towerheight_message{
|
||
background: #fff;
|
||
height: 392px;
|
||
border: 0;
|
||
border-radius: 3px;
|
||
}
|
||
.tower_height ul .tower_list .tower_item span{
|
||
color: #2A2E3F;
|
||
}
|
||
.prevent_crash{
|
||
background: #fff;
|
||
height: 440px;
|
||
border: 0;
|
||
border-radius: 3px;
|
||
}
|
||
.crash_message{
|
||
background: #fff;
|
||
height: 440px;
|
||
border: 0;
|
||
border-radius: 3px;
|
||
.line{
|
||
border-right: 1px solid rgba(42, 46, 63, 0.2);;
|
||
height: 280px;
|
||
}
|
||
}
|
||
.crash_item_box{
|
||
border-right: 0;
|
||
ul{
|
||
li{
|
||
span{
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
}
|
||
.crash_item{
|
||
background: #F2F2F2;
|
||
}
|
||
.selectShow{
|
||
opacity: 1;
|
||
border: 1px solid;
|
||
}
|
||
}
|
||
.crash_info{
|
||
padding-left: 30px;
|
||
}
|
||
.crash_info_box {
|
||
margin-bottom: 40px;
|
||
.crash_info_item{
|
||
h4{
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
.crash_info_card {
|
||
padding: 9px 0;
|
||
border: 0;
|
||
background: #F3F2F4;
|
||
.info_item{
|
||
padding-top: 0;
|
||
border-color: #163260;
|
||
p{
|
||
font-size: 16px;
|
||
font-weight: 900;
|
||
color: #2A2E3F;
|
||
}
|
||
span{
|
||
font-size: 16px;
|
||
font-weight: 900;
|
||
color: #93959E;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tower_box{
|
||
.left_tower{
|
||
margin-left: 110px;
|
||
}
|
||
.left_card{
|
||
left: -110px;
|
||
ul{
|
||
padding: 0 14px;
|
||
background: #F3F2F4;
|
||
li{
|
||
padding: 6px 0;
|
||
span{
|
||
font-weight: 900;
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right_tower{
|
||
margin-right: 110px;
|
||
}
|
||
.right_card{
|
||
right: -110px;
|
||
ul{
|
||
padding: 0 14px;
|
||
background: #F3F2F4;
|
||
li{
|
||
padding: 6px 0;
|
||
span{
|
||
font-weight: 900;
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tower_height {
|
||
ul{
|
||
width: calc(100% - 120px);
|
||
}
|
||
}
|
||
}
|
||
</style>
|