1052 lines
44 KiB
Vue
1052 lines
44 KiB
Vue
<template>
|
||
<!-- 预警分析-->
|
||
<vue-scroll style="height: 100%">
|
||
<div class="alarmAnalysis" :class="{'white_bg': styleType != 2 && styleType != 3}" v-if="!showMore">
|
||
<div class="alarmAnalysis_top flex">
|
||
<div class="towercrane_status">
|
||
<div class="alarmAnalysis_title">
|
||
塔吊工作情况
|
||
</div>
|
||
<div class="status_list flex">
|
||
<div class="status_item">
|
||
<div class="status_content">
|
||
<span>{{devData.totalAlarmNum}}</span>
|
||
违章总数
|
||
</div>
|
||
</div>
|
||
<div class="status_item">
|
||
<div class="status_content">
|
||
<span>{{devData.alarmNum}}</span>
|
||
报警总数
|
||
</div>
|
||
</div>
|
||
<div class="status_item">
|
||
<div class="status_content">
|
||
<span>{{devData.warningNum}}</span>
|
||
预警总数
|
||
</div>
|
||
</div>
|
||
<div class="status_item">
|
||
<div class="status_content">
|
||
<span>{{devData.devNum}}/<b>{{devData.devOnline}}</b></span>
|
||
设备总数
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="towerheight_message">
|
||
<div class="alarmAnalysis_title">
|
||
群塔高度信息
|
||
</div>
|
||
<div class="tower_height">
|
||
<ul>
|
||
<li v-for="(item,index) in heightList" :key="index"><span></span></li>
|
||
<div class="tower_list" 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">塔身高度:{{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.nodeCount" style="position: absolute;top: 50%;left: -50px;transform: translateY(-50%);">{{ $t('message.towerCrane.standardSectionNumber') }}:{{item.nodeCount?item.nodeCount:'0'}}</span>
|
||
<!-- 前臂长度 -->
|
||
<span v-if="item.forearmLength" 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.devName" 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': (1/heightList.length)*100 + '%'}">
|
||
<img src="./../../../assets/images/operationInfo/land.png">
|
||
</div>
|
||
</ul>
|
||
<div class="tower_lable"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex">
|
||
<div class="prevent_crash">
|
||
<div class="alarmAnalysis_title">
|
||
群塔防碰撞
|
||
<div class="alarmAnalysis_more" @click="showMoreAlarmAnalysis">
|
||
塔吊场布情况
|
||
<i class="el-icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
<div
|
||
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>
|
||
<div class="crash_message">
|
||
<div class="alarmAnalysis_title">
|
||
防碰撞报警信息
|
||
</div>
|
||
<div class="flex" style="align-items: flex-start">
|
||
<div class="crash_list">
|
||
<h3>报警列表</h3>
|
||
<vue-scroll style="height: 280px">
|
||
<ul class="crash_item_box" v-if="collideAlarmList.length>0">
|
||
<li v-for="(item, index) in collideAlarmList"
|
||
:key="index"
|
||
class="crash_item"
|
||
:class="{'active_crash': selectIndex == 0}"
|
||
@click="checkCrashItem(item, index)">
|
||
<h4>{{item.alarmType}}</h4>
|
||
<p>{{item.alarmTime}}</p>
|
||
<ul>
|
||
<li>载重：<span>{{item.loading ? item.loading : 0}}kg</span></li>
|
||
<li>幅度：<span>{{item.ranger ? item.ranger : 0}}m</span></li>
|
||
<!-- <li>吊重：<span>{{item.loading}}kg</span></li> -->
|
||
<li>角度：<span>{{item.angle ? item.angle : 0}}°</span></li>
|
||
<li>风速：<span>{{item.windspeed ? item.windspeed : 0}}m/s</span></li>
|
||
<li>力矩比：<span>{{item.torqueRatio ? item.torqueRatio : 0}}%</span></li>
|
||
<li>吊钩高度：<span>{{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="crash_info">
|
||
<h3>报警详细</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>前臂长</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>塔壁高</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">
|
||
<p>{{towerDetail1.posteriorArmLength ? towerDetail1.posteriorArmLength : 0}}m</p>
|
||
<span>后壁长</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>前臂长</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>塔壁高</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">
|
||
<p>{{towerDetail2.posteriorArmLength ? towerDetail2.posteriorArmLength : 0}}m</p>
|
||
<span>后壁长</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">
|
||
<img src="@/assets/images/operationInfo/tower-crane.png" />
|
||
<div class="left_card">
|
||
<ul>
|
||
<li class="b-bottom"><span>{{towerDetail1.maxLiftingCapacity ? towerDetail1.maxLiftingCapacity : 0}}kg</span>吊重</li>
|
||
<li class="b-bottom"><span>{{towerDetail1.ranger ? towerDetail1.ranger : 0}}m</span>幅度</li>
|
||
<li><span>{{towerDetail1.referenceHeight ? towerDetail1.referenceHeight : 0}}m</span>高度</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="right_tower tower_item">
|
||
<img src="@/assets/images/operationInfo/tower-crane2.png" />
|
||
<div class="right_card">
|
||
<ul>
|
||
<li class="b-bottom"><span>{{towerDetail2.maxLiftingCapacity ? towerDetail2.maxLiftingCapacity : 0}}kg</span>吊重</li>
|
||
<li class="b-bottom"><span>{{towerDetail2.maxScope ? towerDetail2.maxScope : 0}}m</span>幅度</li>
|
||
<li><span>{{towerDetail2.referenceHeight ? towerDetail2.referenceHeight : 0}}m</span>高度</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
|
||
@back="goBack"
|
||
content="塔吊场布情况"
|
||
class="backText"
|
||
></el-page-header>
|
||
<distributeDatail></distributeDatail>
|
||
</div>
|
||
</vue-scroll>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from "moment";
|
||
import distributeDatail from "./distributeDetail.vue"
|
||
import {
|
||
selectTowerAlarmAndDevCountApi,
|
||
selectCollideAlarmListApi,
|
||
selectCollideDevRunDateApi,
|
||
selectTowerListApi,
|
||
selectProjectTowerNewestCurrentDataListApi,
|
||
editTowerInfoApi
|
||
} from "@/assets/js/api/towerCrane"
|
||
|
||
export default {
|
||
components:{
|
||
distributeDatail
|
||
},
|
||
data(){
|
||
return{
|
||
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: ""
|
||
},
|
||
collideAlarmList:[],
|
||
towerDetail1: {},
|
||
towerDetail2: {},
|
||
heightList:["-30", "0", "30", "60", "90"],
|
||
towerHeightList:[],
|
||
timer: null,
|
||
showMore: false,
|
||
styleType: 1,
|
||
moveData: {}
|
||
}
|
||
},
|
||
created(){
|
||
this.projectSn = 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 > maxHeight){
|
||
maxHeight = item.referenceHeight
|
||
}
|
||
})
|
||
// 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 / maxHeight
|
||
item.coordinateX = item.coordinateX ? item.coordinateX : "0"
|
||
})
|
||
this.towerHeightList = 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.selectIndex = index
|
||
let data = {
|
||
collideDevSn: item.collideDevSn,
|
||
devSn: item.devSn,
|
||
endTime: moment(item.alarmTime).format('YYYY-MM-DD HH:mm:ss'),
|
||
projectSn: this.projectSn,
|
||
}
|
||
let time = new Date(moment(item.alarmTime).format('YYYY-MM-DD HH:mm:ss')).getTime() - 1000*60
|
||
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]
|
||
}
|
||
})
|
||
},
|
||
// 获取塔吊工作情况
|
||
selectTowerAlarmAndDevCount(){
|
||
selectTowerAlarmAndDevCountApi({projectSn: this.projectSn}).then(res=>{
|
||
// console.log(res)
|
||
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
|
||
}
|
||
})
|
||
},
|
||
// 获取防碰撞报警信息
|
||
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){
|
||
this.towerHeightList[i].t2.attr({
|
||
text: 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
|
||
}
|
||
let oldrot = Number(this.towerHeightList[i].oldAngle),
|
||
newrot = Number(res.result[j].currentdata.angle),
|
||
_this = this
|
||
Snap.animate(oldrot, newrot, function(value) {
|
||
// console.log(value)
|
||
oldrot = value;
|
||
// 旋转
|
||
_this.towerHeightList[i].t2.transform(new Snap.Matrix().rotate(value, _this.towerHeightList[i].relatedX, _this.towerHeightList[i].relatedY));
|
||
_this.towerHeightList[i].b.transform(new Snap.Matrix().rotate(value, _this.towerHeightList[i].relatedX, _this.towerHeightList[i].relatedY));
|
||
}, 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=>{
|
||
item.a = this.svgDom.paper.circle(item.relatedX, item.relatedY, item.forearmLength).attr({
|
||
fill: "rgba(255, 87, 94, 0.12)",
|
||
stroke: "#FE6565",
|
||
strokeWidth: 1,
|
||
})
|
||
item.b = this.svgDom.paper.line(item.relatedX, item.relatedY, item.relatedX, item.relatedY-item.forearmLength).attr({
|
||
// fill: "rgba(255, 87, 94, 0.12)",
|
||
stroke: "#FE6565",
|
||
strokeWidth: 1,
|
||
})
|
||
item.c = this.svgDom.paper.circle(item.relatedX, item.relatedY,1).attr({
|
||
fill: "rgba(255, 87, 94, 0.12)",
|
||
stroke: "#FE6565",
|
||
strokeWidth: 1,
|
||
});
|
||
item.t1 = this.svgDom.paper.text(Number(item.relatedX) - 6, Number(item.relatedY) + 6,["#", item.devName?item.devName: ""]).attr({
|
||
fill: "rgba(255, 255, 255, 0.6)",
|
||
fontSize: 4
|
||
})
|
||
|
||
if(this.styleType != 2 && this.styleType != 3){
|
||
item.t1.attr({
|
||
fill: "#2A2E3F"
|
||
})
|
||
}
|
||
item.t2 = this.svgDom.paper.text(Number(item.relatedX)-6, Number(item.relatedY) - item.forearmLength/2,[item.forearmLength?item.forearmLength: "0", "m"]).attr({
|
||
fill: "rgba(255, 255, 255, 0.6)",
|
||
fontSize: 4
|
||
})
|
||
if(this.styleType != 2 && this.styleType != 3){
|
||
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)
|
||
// 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("修改成功！")
|
||
}
|
||
console.log(res)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.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;
|
||
span{
|
||
display: block;
|
||
position: absolute;
|
||
left: 17%;
|
||
top: -16px;
|
||
font-size: 14px;
|
||
}
|
||
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;
|
||
.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: 12px;
|
||
margin: 0;
|
||
// color: #99A2B2;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.crash_item_box{
|
||
// background: #17274A;
|
||
padding-right: 20px;
|
||
border-right: 1px solid #12294F;
|
||
.crash_item{
|
||
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: 12px;
|
||
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: 14px;
|
||
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;
|
||
img{
|
||
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;
|
||
.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;
|
||
}
|
||
.crash_item_box{
|
||
border-right: 0;
|
||
ul{
|
||
li{
|
||
span{
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
}
|
||
.crash_item{
|
||
background: #F2F2F2;
|
||
border: 0;
|
||
}
|
||
}
|
||
.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{
|
||
color: #2A2E3F;
|
||
}
|
||
span{
|
||
color: #93959E;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tower_box{
|
||
.left_tower{
|
||
margin-left: 110px;
|
||
}
|
||
.left_card{
|
||
left: -110px;
|
||
ul{
|
||
padding: 0 14px;
|
||
background: #F3F2F4;
|
||
li{
|
||
padding: 6px 0;
|
||
span{
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right_tower{
|
||
margin-right: 110px;
|
||
}
|
||
.right_card{
|
||
right: -110px;
|
||
ul{
|
||
padding: 0 14px;
|
||
background: #F3F2F4;
|
||
li{
|
||
padding: 6px 0;
|
||
span{
|
||
color: #2A2E3F;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tower_height {
|
||
ul{
|
||
width: calc(100% - 120px);
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|