1495 lines
66 KiB
Vue
1495 lines
66 KiB
Vue
<template>
|
||
<div class="distributeDetail">
|
||
<div class="distributeDetail_box">
|
||
<div class="distributeDetail_left" :class="{distributeDetail_left2:styleType == 1 || isDockingToWoer}">
|
||
<div
|
||
v-if="towerData.length > 0"
|
||
class="svg_box"
|
||
:class="{svg_box2:styleType == 1 || isDockingToWoer}"
|
||
id="svg_box"
|
||
ref="svg_box"
|
||
>
|
||
<svg id="svg" ref="svg" style="width: 100%; height: 100%;">
|
||
</svg>
|
||
|
||
</div>
|
||
<div v-else>
|
||
<img style="display:block;margin: 307px auto;border: none" src="./../../../assets/images/noData2.png"/>
|
||
</div>
|
||
</div>
|
||
<img style="display: none;width: auto;height: auto" ref="svgImg" :src="bgUrl">
|
||
<div class="distributeDetail_right" :class="{distributeDetail_right2:styleType == 1 || isDockingToWoer}">
|
||
<!-- <h3 class="tower_title">{{activeTower.devName}}塔吊防碰撞信息</h3> -->
|
||
<div class="distributeDetail_tower" :class="{distributeDetail_tower2:styleType == 1 || isDockingToWoer}">
|
||
<div class="distributeDetail_title">
|
||
<!-- 塔吊间防碰撞信息 -->
|
||
{{ $t('message.towerCrane.info1') }}
|
||
<div class="add_btn" @click="show2">
|
||
<!-- 配置防碰撞 -->
|
||
{{ $t('message.towerCrane.configureAntiCollision') }}
|
||
</div>
|
||
</div>
|
||
<el-carousel v-if="towerCollideData.length > 0" :autoplay="false" :arrow="towerCollideData.length > 1 ? 'hover': 'never'" indicator-position="none">
|
||
<el-carousel-item v-for="(item, index) in towerCollideData" :key="index">
|
||
<div class="crash_detail" :class="{crash_detail2:styleType == 1 || isDockingToWoer}">
|
||
<!-- 与 防碰撞 -->
|
||
<div style="color:rgb(81,129,246,0.5);transform: translateY(-30px)" class="item_title">{{item.devName}}{{ $t('message.towerCrane.and') }} {{item.collideDevName}} {{ $t('message.towerCrane.antiCollisionTwo') }}</div>
|
||
<!-- 塔间距 -->
|
||
<div class="tower_gap">{{ $t('message.towerCrane.towerSpacing') }}：{{item.towerSpacing}}m </div>
|
||
<div class="crash_tower" :class="{'normal': item.status2 == 0}" style="top: 95px; left: 38px" :style="{ 'transform': 'rotate(' + item.angle2 + 'deg)'}">
|
||
<div class="crash_line"></div>
|
||
<!-- 前臂长 -->
|
||
<span>{{ $t('message.towerCrane.forearmLength') }}:{{item.forearmLength2}}m</span>
|
||
</div>
|
||
<div class="tower_info1">
|
||
<span>{{item.devName}}</span>
|
||
<!-- 大臂高 -->
|
||
{{ $t('message.towerCrane.boomHeight') }}：{{item.towerHeight2}}m
|
||
</div>
|
||
<div class="crash_tower" :class="{'normal': item.status == 0}" style="top: 30px; right: 38px" :style="{ 'transform': 'rotate(' + item.angle + 'deg)'}">
|
||
<div class="crash_line"></div>
|
||
<!-- 前臂长 -->
|
||
<span>{{ $t('message.towerCrane.forearmLength') }}:{{item.forearmLength}}m</span>
|
||
</div>
|
||
<div class="tower_info2">
|
||
<span>{{item.collideDevName}}</span>
|
||
<!-- 大臂高 -->
|
||
{{ $t('message.towerCrane.boomHeight') }}：{{item.towerHeight}}m
|
||
</div>
|
||
<div class="info_arrow">
|
||
<span></span>
|
||
<!-- 碰撞距离 -->
|
||
{{ $t('message.towerCrane.collisionDistance') }}：{{item.collideDistance}}m
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<div v-else style="padding: 70px 0 0 0">
|
||
<img style="margin: 0 auto;display: block" src="./../../../assets/images/noData2.png" />
|
||
</div>
|
||
</div>
|
||
<div class="distributeDetail_building" :class="{distributeDetail_building2:styleType == 1 || isDockingToWoer}">
|
||
<div class="distributeDetail_title">
|
||
<!-- 塔吊与建筑物防碰撞信息 -->
|
||
{{ $t('message.towerCrane.info2') }}
|
||
<!-- 配置楼房 -->
|
||
<div class="add_btn" @click="show">{{ $t('message.towerCrane.configBuilding') }}</div>
|
||
</div>
|
||
<el-carousel style="margin-top: 35px" v-if="tableData.length>0" :autoplay="false" :arrow="tableData.length > 1 ? 'hover': 'never'" indicator-position="none">
|
||
<el-carousel-item v-for="(item,index) in tableData" :key="index">
|
||
<div class="distributeDetail_building_box" :class="{distributeDetail_building_box2:styleType == 1 || isDockingToWoer}">
|
||
<div style="color:rgb(81,129,246,0.5);transform: translateY(-30px)" class="item_title">{{activeTower.devName}}与{{item.name}}防碰撞</div>
|
||
<div class="tower_info">
|
||
<!-- 大臂与楼距离 -->
|
||
<div class="info1">{{ $t('message.towerCrane.boomDistanceFloor') }}：{{item.distance}}m</div>
|
||
<!-- 前臂长 -->
|
||
<div class="info2">{{ $t('message.towerCrane.forearmLength') }}：{{activeTower.forearmLength}}m</div>
|
||
<img src="./../../../assets/images/operationInfo/tower-crane.png" />
|
||
<div class="info3">
|
||
<span>{{activeTower.devName}}</span>
|
||
<!-- 大臂高 -->
|
||
{{ $t('message.towerCrane.boomHeight') }}：{{activeTower.towerHeight}}m
|
||
</div>
|
||
</div>
|
||
<div class="building_info">
|
||
<div class="info4">
|
||
<div class="line_top"></div>
|
||
<!-- 塔吊与楼高度间距 -->
|
||
{{ $t('message.towerCrane.boomDistanceFloorHei') }}：{{item.gap}}m
|
||
<div class="line_bottom"></div>
|
||
</div>
|
||
<img src="./../../../assets/images/operationInfo/building.png"/>
|
||
<div class="info5">
|
||
<span style="overflow: hidden;text-overflow:ellipsis; white-space: nowrap;" :title="item.name">{{item.name}}</span>
|
||
<!-- 楼高 -->
|
||
{{ $t('message.towerCrane.buildingHeight') }}：{{item.height}}m
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<div v-else style="padding: 70px 0 0 0">
|
||
<img style="margin: 0 auto;display: block" src="./../../../assets/images/noData2.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<formDialog v-if="showDialog" :title="dialogTitle" @closeDialog="close">
|
||
<div slot="content" class="dialog-content">
|
||
<el-button
|
||
class="add_btn"
|
||
type="primary"
|
||
size="mini"
|
||
@click="handleAdd">
|
||
<!-- 添加 -->
|
||
{{ $t('message.towerCrane.addTo') }}
|
||
</el-button>
|
||
<el-table
|
||
class="tables"
|
||
:data="tableData"
|
||
height="386"
|
||
style="width: 90%; margin: 0 auto;border: 1px solid rgb(243, 245, 220)">
|
||
<!-- 楼房名称 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.buildingName') "
|
||
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input size="mini" v-model="scope.row.name" :placeholder="$t('message.towerCrane.placeholder1')" :disabled="scope.row.isDisabled"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 大臂与楼距离 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.boomDistanceFloor')+'(m)'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input size="mini" v-model="scope.row.distance" :placeholder="$t('message.towerCrane.placeholder2')" :disabled="scope.row.isDisabled"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 塔吊与楼高度间距 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.boomDistanceFloorHei')+'(m)'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input size="mini" v-model="scope.row.gap" :placeholder="$t('message.towerCrane.placeholder3')" :disabled="scope.row.isDisabled"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 楼高 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.buildingHeight')+'(m)'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input size="mini" v-model="scope.row.height" :placeholder="$t('message.towerCrane.placeholder4')" :disabled="scope.row.isDisabled"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column :label="$t('message.towerCrane.operation')">
|
||
<template slot-scope="scope">
|
||
<!-- <el-button
|
||
type="text"
|
||
size="mini"
|
||
@click="handleAdd(scope.$index, scope.row)">添加</el-button> -->
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-if="scope.row.isDisabled"
|
||
@click="handleEdit(scope.$index, scope.row)">
|
||
<!-- 编辑 -->
|
||
{{ $t('message.towerCrane.edit') }}
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-if="!scope.row.isDisabled"
|
||
@click="handleSave(scope.$index, scope.row)">
|
||
<!-- 保存 -->
|
||
{{ $t('message.towerCrane.preservation') }}
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-if="!scope.row.isDisabled"
|
||
@click="handleCancle(scope.$index, scope.row)">
|
||
<!-- 取消 -->
|
||
{{ $t('message.towerCrane.cancel') }}
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
class="delete_btn"
|
||
@click="handleDelete(scope.$index, scope.row)">
|
||
<!-- 删除 -->
|
||
{{ $t('message.towerCrane.delete') }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!-- <div slot="bottom">
|
||
<div class="btn_box">
|
||
<el-button class="cancel_btn" size="small" icon="el-icon-circle-close" @click="close">取消</el-button>
|
||
<el-button size="small" icon="el-icon-circle-check" type="primary" @click="close">确定</el-button>
|
||
</div>
|
||
</div> -->
|
||
</formDialog>
|
||
<formDialog v-if="showDialog2" :title="dialogTitle2" @closeDialog="close2">
|
||
<div slot="content" class="dialog-content">
|
||
<el-button
|
||
class="add_btn"
|
||
type="primary"
|
||
size="mini"
|
||
@click="handleAdd2">
|
||
<!-- 添加 -->
|
||
{{ $t('message.towerCrane.addTo') }}
|
||
</el-button>
|
||
<el-table
|
||
class="tables"
|
||
:data="tableData2"
|
||
height="386"
|
||
style="width: 90%; margin: 0 auto;border: 1px solid rgb(243, 245, 220)">
|
||
<!-- 关联设备1 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.associatedEquipment')+'1'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select size="mini" v-model="scope.row.devSn" :placeholder="$t('message.towerCrane.pleaseSelect')" :disabled="scope.row.isDisabled">
|
||
<el-option
|
||
v-for="item in towerData"
|
||
:key="item.id"
|
||
:label="item.devName"
|
||
:value="item.devSn"
|
||
:disabled="item.devSn == scope.row.collideDevSn"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 关联设备2 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.associatedEquipment')+'2'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select size="mini" v-model="scope.row.collideDevSn" :placeholder="$t('message.towerCrane.pleaseSelect')" :disabled="scope.row.isDisabled">
|
||
<el-option
|
||
v-for="item in towerData"
|
||
:key="item.id"
|
||
:label="item.devName"
|
||
:value="item.devSn"
|
||
:disabled="item.devSn == scope.row.devSn"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 碰撞距离 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.collisionDistance')+'(m)'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input size="mini" v-model="scope.row.distance" :placeholder="$t('message.towerCrane.placeholder2')" :disabled="scope.row.isDisabled"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 塔吊间距 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.towerCraneSpacing')+'(m)'"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input size="mini" v-model="scope.row.gap" :placeholder="$t('message.towerCrane.placeholder3')" :disabled="scope.row.isDisabled"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column :label="$t('message.towerCrane.operation')">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-if="scope.row.isDisabled"
|
||
@click="handleEdit2(scope.$index, scope.row)">
|
||
<!-- 编辑 -->
|
||
{{ $t('message.towerCrane.edit') }}
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-if="!scope.row.isDisabled"
|
||
@click="handleSave2(scope.$index, scope.row)">
|
||
<!-- 保存 -->
|
||
{{ $t('message.towerCrane.preservation') }}
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
v-if="!scope.row.isDisabled"
|
||
@click="handleCancle2(scope.$index, scope.row)">
|
||
<!-- 取消 -->
|
||
{{ $t('message.towerCrane.cancel') }}
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
class="delete_btn"
|
||
@click="handleDelete2(scope.$index, scope.row)">
|
||
<!-- 删除 -->
|
||
{{ $t('message.towerCrane.delete') }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</formDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import formDialog from './../../projectLevel/workstation/compontents/formDialog.vue'
|
||
import {
|
||
setUpdateTowerCoordinateApi,
|
||
selectTowerListApi,
|
||
selectProjectTowerNewestCurrentDataListApi,
|
||
selectTowerDevBuildDistanceApi,
|
||
addTowerDevBuildDistanceApi,
|
||
deleteTowerDevBuildDistanceApi,
|
||
editTowerDevBuildDistanceApi,
|
||
addTowerDevCollideParameterApi,
|
||
editTowerDevCollideParameterApi,
|
||
selectTowerDevCollideParameterApi,
|
||
deleteTowerDevCollideParameterApi
|
||
} from "@/assets/js/api/towerCrane"
|
||
import {
|
||
getProjectDetail
|
||
} from "@/assets/js/api/baseInfo"
|
||
export default {
|
||
props:['sn'],
|
||
components:{
|
||
formDialog
|
||
},
|
||
data(){
|
||
return{
|
||
svgDom: Object,
|
||
towerHeightList:[{
|
||
relatedX: 68,
|
||
relatedY: 100,
|
||
forearmLength: 15,
|
||
devName: "12",
|
||
status: 1,
|
||
isActive: false
|
||
},{
|
||
relatedX: 108,
|
||
relatedY: 80,
|
||
forearmLength: 10,
|
||
devName: "13",
|
||
status: 1,
|
||
isActive: false
|
||
},{
|
||
relatedX: 88,
|
||
relatedY: 76,
|
||
forearmLength: 18,
|
||
devName: "14",
|
||
status: 1,
|
||
isActive: false
|
||
},{
|
||
relatedX: 69,
|
||
relatedY: 38,
|
||
forearmLength: 20,
|
||
devName: "15",
|
||
status: 0,
|
||
isActive: false
|
||
}],
|
||
towerData:[],
|
||
panZoomTiger: Object,
|
||
isDragDown: false,
|
||
imgData: {},
|
||
timer: null,
|
||
showDialog: false,
|
||
dialogTitle: this.$t('message.towerCrane.configInfo1'), // 配置楼房信息
|
||
tableData:[],
|
||
activeTower:{},
|
||
bgUrl: "",
|
||
showDialog2: false,
|
||
dialogTitle2: this.$t('message.towerCrane.configInfo2'), // 配置防碰撞信息
|
||
tableData2:[],
|
||
towerCollideData: [],
|
||
styleType:1,
|
||
isDockingToWoer: ""
|
||
}
|
||
},
|
||
created(){
|
||
this.isDockingToWoer = isDockingToWoer
|
||
this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
|
||
this.styleType = this.$store.state.userInfo.styleType
|
||
// this.bgUrl = this.$store.state.currentProDetail.constructionMapUrl;
|
||
if(this.$store.state.currentProDetail){
|
||
this.bgUrl = this.$store.state.currentProDetail.constructionMapUrl;
|
||
this.selectTowerData()
|
||
}else{
|
||
this.getImgUrl()
|
||
}
|
||
|
||
},
|
||
mounted(){
|
||
|
||
// console.log(this.panZoomTiger.getZoom())
|
||
},
|
||
beforeDestroy(){
|
||
clearTimeout(this.timer)
|
||
},
|
||
methods:{
|
||
getImgUrl(){
|
||
getProjectDetail({projectSn: this.projectSn}).then(res=>{
|
||
console.log(res.result)
|
||
this.bgUrl = res.result.constructionMapUrl
|
||
this.selectTowerData()
|
||
})
|
||
},
|
||
createSvg(){
|
||
// 绘制塔群
|
||
// console.log(this.towerHeightList)
|
||
this.svgDom = Snap("#svg");
|
||
let _this = this;
|
||
this.getNaturalSize((data)=>{
|
||
_this.imgData = data
|
||
console.log(data);
|
||
_this.svgDom.paper.image(this.bgUrl, 0, 0, data.width, data.height)
|
||
console.log(_this.towerData);
|
||
console.log(_this.panZoomTiger, _this.towerData)
|
||
_this.towerData.forEach((item,index)=>{
|
||
if (item.multiple == ''){
|
||
item.multiple = 1
|
||
}
|
||
if (item.forearmLength > item.mapX || item.forearmLength*item.multiple > item.mapY){
|
||
item.mapX = item.forearmLength
|
||
item.mapY = item.forearmLength
|
||
}
|
||
console.log(item, item.mapY, item.forearmLength * item.multiple);
|
||
item.a = _this.svgDom.paper.circle(item.mapX, item.mapY, item.forearmLength*item.multiple).attr({
|
||
fill: "rgba(101, 254, 162, 0.22)",
|
||
stroke: "#65FEA2",
|
||
strokeWidth: 0.5,
|
||
})
|
||
item.b = _this.svgDom.paper.line(item.mapX, (Number(item.mapY) + item.posteriorArmLength*item.multiple), item.mapX, (item.mapY-item.forearmLength*item.multiple)).attr({
|
||
// fill: "rgba(255, 87, 94, 0.12)",
|
||
stroke: "#65FEA2",
|
||
strokeWidth: 2,
|
||
})
|
||
item.c = _this.svgDom.paper.circle(item.mapX, (item.mapY),(item.forearmLength/16)).attr({
|
||
fill: "#fff",
|
||
stroke: "#65FEA2",
|
||
strokeWidth: 0.2,
|
||
});
|
||
item.d = _this.svgDom.paper.circle(item.mapX, item.mapY,(item.forearmLength/16)).attr({
|
||
fill: "#65FEA2",
|
||
stroke: "#65FEA2",
|
||
strokeWidth: 0.5,
|
||
});
|
||
item.t1 = _this.svgDom.paper.text((Number(item.mapX) - 3*item.multiple), (Number(item.mapY) + 6*item.multiple),[item.devName?item.devName: ""]).attr({
|
||
fill: "#000",
|
||
fontSize: 6*item.multiple
|
||
})
|
||
item.t2 = _this.svgDom.paper.text((Number(item.mapX)-6*item.multiple),( Number(item.mapY) - (item.forearmLength*item.multiple)/6),['前臂长:',item.forearmLength?item.forearmLength: "0", "m"]).attr({
|
||
fill: "#000",
|
||
fontSize: 6*item.multiple
|
||
})
|
||
|
||
// let oldrot = 0
|
||
// Snap.animate(oldrot, oldrot + 45, function(value) {
|
||
// // console.log(item.c)
|
||
// oldrot = value;
|
||
// // 旋转
|
||
// item.t2.transform(new Snap.Matrix().rotate(value, item.relatedX, item.relatedY));
|
||
// item.b.transform(new Snap.Matrix().rotate(value, item.relatedX, item.relatedY));
|
||
// // item.c.transform(new Snap.Matrix().rotate(value, item.relatedX, item.relatedY));
|
||
// }, 500);
|
||
// let old2 = 0,
|
||
// old3 = 0
|
||
// Snap.animate([old2, old3], [45, 10], function(value) {
|
||
// // console.log(value)
|
||
// old2 = value;
|
||
// // 旋转
|
||
// item.c.transform(new Snap.Matrix().rotate(value[0], item.relatedX, item.relatedY).translate(0, -value[1]));
|
||
// }, 500);
|
||
item.g = _this.svgDom.paper.g(item.a, item.b, item.c, item.d, item.t1, item.t2).click(function(val){
|
||
// console.log(item.c.transform)
|
||
_this.selectSvg(index)
|
||
console.log(item)
|
||
}).mousedown(function(val){
|
||
console.log(val);
|
||
// item.g.addClass("active_g")
|
||
// console.log(item.a.attr("cx"))
|
||
// _this.panZoomTiger.center()
|
||
_this.panZoomTiger.disablePan()
|
||
// _this.panZoomTiger.zoom(1)
|
||
// _this.panZoomTiger.disableZoom()
|
||
// let x = val.clientX,
|
||
// y = val.clientY
|
||
item.g.mousemove(function(val){
|
||
// console.dir(val.path[1])
|
||
// let dom = document.querySelector(".active_g")
|
||
if(item.panX && item.panY){
|
||
// let newPanX = item.panX + (val.clientX - x) / _this.panZoomTiger.getZoom();
|
||
// let newPanY = item.panY+ (val.clientY - y) / _this.panZoomTiger.getZoom();
|
||
// dom.style.transform = "translate(" + newPanX + "px,"+ newPanY + "px)"
|
||
|
||
// item.panX = newPanX
|
||
// item.panY = newPanY
|
||
} else {
|
||
|
||
}
|
||
// item.panX = (val.clientX - x) / _this.panZoomTiger.getZoom()
|
||
// item.panY = (val.clientY - y) / _this.panZoomTiger.getZoom()
|
||
// dom.style.transform = "translate(" + item.panX + "px,"+ item.panY + "px)"
|
||
// item.relatedX = Number(item.relatedX) + panX
|
||
// item.relatedY = Number(item.relatedY) + panY
|
||
// _this.createSvg()
|
||
// _this.panZoomTiger.enablePan()
|
||
// console.log(val.clientX,x, val.clientY ,y)
|
||
});
|
||
// console.log(_this.panZoomTiger)
|
||
// console.log(val)
|
||
}).mouseup(function(val){
|
||
// console.log(val)
|
||
// item.g.removeClass("active_g")
|
||
_this.panZoomTiger.enablePan()
|
||
item.g.unmousemove()
|
||
// console.log(_this.panZoomTiger)
|
||
}).mouseout(function(val){
|
||
// _this.panZoomTiger.enablePan()
|
||
// item.g.unmousemove()
|
||
})
|
||
item.g.addClass("rotate")
|
||
|
||
// document.querySelector(".rotate").style.transform = "rotateX(45deg)"
|
||
var startX = 0;
|
||
var startY = 0;
|
||
function dragStart(x, y, evt) {
|
||
// figure out where the circle currently is
|
||
startX = parseInt(item.a.attr("cx"), 10);
|
||
startY = parseInt(item.a.attr("cy"), 10);
|
||
}
|
||
|
||
function dragMove(dx, dy, x, y, evt) {
|
||
let width = _this.imgData.width,
|
||
height = _this.imgData.height,
|
||
x1 = startX + dx,
|
||
y1 = startY + dy
|
||
console.log(width, height,dx,dy);
|
||
let maxTop = height - item.forearmLength,
|
||
maxLeft = width - item.forearmLength,
|
||
isMove = true
|
||
if(y1 > maxTop){
|
||
isMove = false
|
||
} else if(x1 > maxLeft){
|
||
isMove = false
|
||
} else if(x1 < item.forearmLength){
|
||
isMove = false
|
||
} else if(y1 < item.forearmLength){
|
||
isMove = false
|
||
}
|
||
if(isMove){
|
||
_this.isDragDown = true
|
||
item.a.attr({cx: (startX + dx), cy: (startY + dy)});
|
||
item.c.transform(new Snap.Matrix().translate(dx, dy));
|
||
// item.c.attr({cx: (startX + dx), cy: (startY + dy)});
|
||
item.d.attr({cx: (startX + dx), cy: (startY + dy)});
|
||
item.b.transform(new Snap.Matrix().translate( dx, dy))
|
||
item.t1.transform(new Snap.Matrix().translate( dx, dy));
|
||
item.t2.transform(new Snap.Matrix().translate( dx, dy));
|
||
item.mapX = startX + dx;
|
||
item.mapY = startY + dy;
|
||
}
|
||
// item.relatedX = startX + dx
|
||
// item.relatedY = startY + dy
|
||
// console.log(item.relatedX, item.relatedY)
|
||
// console.log(_this.panZoomTiger.getZoom())
|
||
// console.log(item.relatedX, item.relatedY)
|
||
}
|
||
|
||
function dragEnd(evt) {
|
||
if(_this.isDragDown){
|
||
_this.setUpdateTowerCoordinate(item)
|
||
_this.svgDom.clear()
|
||
_this.panZoomTiger.destroy()
|
||
_this.createSvg()
|
||
_this.isDragDown = false
|
||
}
|
||
// console.log(_this.panZoomTiger.reset())
|
||
// no action required
|
||
}
|
||
item.a.drag(dragMove, dragStart, dragEnd)
|
||
|
||
|
||
})
|
||
if(this.towerData.length > 0){
|
||
this.selectSvg(0)
|
||
}
|
||
// document.querySelectorAll(".rotate").forEach(item=>{
|
||
// item.style.transform = "rotateX(45deg)"
|
||
// })
|
||
// console.log(document.querySelectorAll(".rotate"))
|
||
this.panZoomTiger = svgPanZoom('#svg');
|
||
|
||
})
|
||
this.selectTowerCurrentData();
|
||
},
|
||
// 获取塔吊与楼栋之间信息
|
||
selectTowerDevBuildDistance(){
|
||
selectTowerDevBuildDistanceApi({projectSn: this.projectSn, devSn: this.activeTower.devSn}).then(res=>{
|
||
if(res.code == 200){
|
||
this.tableData = []
|
||
res.result.forEach(item=>{
|
||
let obj = {
|
||
name: item.buildingName,
|
||
distance: item.forearmBuildDistance,
|
||
gap: item.towerBuildHeightSpacing,
|
||
height: item.buildingHeight,
|
||
isDisabled: true,
|
||
id: item.id,
|
||
type: 1
|
||
}
|
||
this.tableData.push(obj)
|
||
})
|
||
}
|
||
console.log(res.result,"-----楼栋信息")
|
||
})
|
||
},
|
||
// 选择塔吊
|
||
selectSvg(index){
|
||
this.towerData.forEach(item=>{
|
||
if(item.isActive){
|
||
item.isActive = false
|
||
}
|
||
if(item.status == 1){
|
||
item.a.attr({
|
||
fill: "rgba(255, 87, 94, 0.3)",
|
||
})
|
||
item.d.attr({
|
||
fill: "rgba(255, 87, 94, 0.3)",
|
||
})
|
||
} else {
|
||
item.a.attr({
|
||
fill: "rgba(101, 254, 162, 0.22)",
|
||
})
|
||
item.d.attr({
|
||
fill: "rgba(101, 254, 162, 0.22)",
|
||
})
|
||
}
|
||
})
|
||
this.towerData[index].isActive = true
|
||
this.activeTower = this.towerData[index]
|
||
if(this.towerData[index].status == 1){
|
||
this.towerData[index].a.attr({
|
||
fill: "rgba(255, 87, 94, 0.6)",
|
||
})
|
||
this.towerData[index].d.attr({
|
||
fill: "rgba(255, 87, 94, 1)",
|
||
})
|
||
} else {
|
||
this.towerData[index].a.attr({
|
||
fill: "rgba(101, 254, 162, 0.6)",
|
||
})
|
||
this.towerData[index].d.attr({
|
||
fill: "rgba(101, 254, 162, 1)",
|
||
})
|
||
}
|
||
this.selectTowerDevBuildDistance();
|
||
this.selectTowerDevCollideParameter();
|
||
},
|
||
// 获取图片原始宽高
|
||
getNaturalSize (callback) {
|
||
// console.dir(Domlement)
|
||
let Domlement = this.$refs['svgImg']
|
||
let Domlement2 = this.$refs['svg_box']
|
||
var natureSize = {};
|
||
if(window.naturalWidth && window.naturalHeight) {
|
||
natureSize.width = Domlement.naturalWidth;
|
||
natureSize.height = Domlement.naturalHeight;
|
||
} else {
|
||
console.log(213)
|
||
var img = new Image();
|
||
img.src = Domlement.src;
|
||
img.onload = function(){
|
||
natureSize.width = img.width;
|
||
natureSize.height = img.height;
|
||
// let heightRatio = img.width
|
||
// let widthRatio = img.height
|
||
// let bili
|
||
// if(heightRatio < widthRatio){
|
||
// this.bili = heightRatio
|
||
// bili = heightRatio
|
||
// natureSize.width = img.width*heightRatio;
|
||
// natureSize.height = img.height*heightRatio;
|
||
// } else {
|
||
// this.bili = widthRatio
|
||
// bili = widthRatio
|
||
// natureSize.width = img.width*widthRatio;
|
||
// natureSize.height = img.height*widthRatio;
|
||
// }
|
||
console.log('------', natureSize)
|
||
console.log(Domlement2.clientHeight/img.width);
|
||
return callback(natureSize)
|
||
// natureSize.width = 1200;
|
||
// natureSize.height = 880;
|
||
// console.log('------', natureSize)
|
||
// return callback(natureSize)
|
||
}
|
||
|
||
}
|
||
return natureSize;
|
||
},
|
||
// 获取实时数据
|
||
selectTowerCurrentData(){
|
||
selectProjectTowerNewestCurrentDataListApi({projectSn:this.projectSn}).then(res=>{
|
||
if(res.code == 200){
|
||
if(this.timer){
|
||
clearTimeout(this.timer)
|
||
}
|
||
for(let i = 0; i<this.towerData.length; i++){
|
||
let id = this.towerData[i].devSn
|
||
for(let j = 0; j<res.result.length; j++){
|
||
if(id == res.result[j].devSn){
|
||
// res.result[j].currentdata.angle = Math.round(Math.random()*300)
|
||
this.towerData[i].angle = res.result[j].currentdata.angle
|
||
// this.towerData[i].ranger = res.result[j].currentdata.ranger
|
||
if(!this.towerData[i].oldAngle){
|
||
this.towerData[i].oldAngle = 0
|
||
}
|
||
if(!this.towerData[i].oldranger){
|
||
this.towerData[i].oldranger = 0
|
||
}
|
||
let oldrot = Number(this.towerData[i].oldAngle),
|
||
newrot = Number(res.result[j].currentdata.angle),
|
||
_this = this,
|
||
oldranger = Number(this.towerData[i].oldranger),
|
||
newranger = Number(res.result[j].currentdata.ranger);
|
||
|
||
Snap.animate([oldrot, oldranger], [newrot, newranger], function(value) {
|
||
// console.log( _this.towerData[i].t2)
|
||
// 旋转
|
||
if(_this.towerData[i].t2 && _this.towerData[i].b && _this.towerData[i].c){
|
||
_this.towerData[i].t2.transform(new Snap.Matrix().rotate(value[0], _this.towerData[i].mapX, _this.towerData[i].mapY));
|
||
_this.towerData[i].b.transform(new Snap.Matrix().rotate(value[0], _this.towerData[i].mapX, _this.towerData[i].mapY));
|
||
_this.towerData[i].c.transform(new Snap.Matrix().rotate(value[0], _this.towerData[i].mapX, _this.towerData[i].mapY).translate(0, -value[1]));
|
||
}
|
||
}, 500);
|
||
this.towerData[i].oldAngle = newrot;
|
||
this.towerData[i].oldranger = newranger;
|
||
if(res.result[j].currentdata.isAlarm == 1){
|
||
this.towerData[i].status = 1
|
||
} else {
|
||
this.towerData[i].status = 0
|
||
}
|
||
if(this.towerData[i].status == 1){
|
||
this.towerData[i].a.attr({
|
||
fill: "rgba(255, 87, 94, 0.3)",
|
||
stroke: "#FE6565",
|
||
})
|
||
this.towerData[i].b.attr({
|
||
fill: "rgba(255, 87, 94, 0.3)",
|
||
stroke: "#FE6565",
|
||
})
|
||
this.towerData[i].c.attr({
|
||
stroke: "#FE6565",
|
||
})
|
||
this.towerData[i].d.attr({
|
||
fill: "rgba(255, 87, 94, 0.3)",
|
||
stroke: "#FE6565",
|
||
})
|
||
}
|
||
if(this.towerData[i].isActive){
|
||
if(this.towerData[i].status == 1){
|
||
this.towerData[i].a.attr({
|
||
fill: "rgba(255, 87, 94, 0.6)",
|
||
})
|
||
this.towerData[i].d.attr({
|
||
fill: "rgba(255, 87, 94, 1)",
|
||
})
|
||
} else {
|
||
this.towerData[i].a.attr({
|
||
fill: "rgba(101, 254, 162, 0.6)",
|
||
})
|
||
this.towerData[i].d.attr({
|
||
fill: "rgba(101, 254, 162, 1)",
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
this.selectTowerDevCollideParameter()
|
||
this.timer = setTimeout(()=>{
|
||
this.selectTowerCurrentData();
|
||
},5000)
|
||
}
|
||
console.log(res)
|
||
})
|
||
},
|
||
// 获取所有塔吊基本数据
|
||
selectTowerData(){
|
||
selectTowerListApi({projectSn: this.projectSn}).then(res=>{
|
||
if(res.code == 200){
|
||
console.log(res.result)
|
||
this.towerData = res.result
|
||
this.$nextTick(()=>{
|
||
this.createSvg()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 保存点位
|
||
setUpdateTowerCoordinate(val){
|
||
let data = [{
|
||
projectSn: this.projectSn,
|
||
id: val.id,
|
||
mapX: val.mapX.toString(),
|
||
mapY: val.mapY.toString(),
|
||
devSn: val.devSn
|
||
}]
|
||
setUpdateTowerCoordinateApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.towerCrane.successTips1')) // 点位保存成功！
|
||
}
|
||
})
|
||
},
|
||
show(){
|
||
this.showDialog = true
|
||
},
|
||
close(){
|
||
this.showDialog = false
|
||
this.selectTowerDevBuildDistance()
|
||
},
|
||
handleEdit(index, val){
|
||
val.isDisabled = !val.isDisabled
|
||
},
|
||
handleSave(index, val){
|
||
// val.isDisabled = !val.isDisabled
|
||
console.log(val)
|
||
let reg = new RegExp("^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$");
|
||
if(!val.name){
|
||
this.$message.error(this.$t('message.towerCrane.errorTips1')) // 请填写楼房名称
|
||
return;
|
||
}
|
||
if(val.distance && !reg.test(val.distance)){
|
||
this.$message.error(this.$t('message.towerCrane.errorTips2')) // 请填写大于0的数字
|
||
return;
|
||
}
|
||
if(val.gap && !reg.test(val.gap)){
|
||
this.$message.error(this.$t('message.towerCrane.errorTips2')) // 请填写大于0的数字
|
||
return;
|
||
}
|
||
if(val.height && !reg.test(val.height)){
|
||
this.$message.error(this.$t('message.towerCrane.errorTips2')) // 请填写大于0的数字
|
||
return;
|
||
}
|
||
let data = {
|
||
buildingName: val.name,
|
||
buildingHeight: val.height ? Number(val.height).toString() : "0",
|
||
forearmBuildDistance: val.distance ? Number(val.distance).toString() : "0",
|
||
towerBuildHeightSpacing: val.gap ? Number(val.gap) : "0",
|
||
devSn: this.activeTower.devSn,
|
||
projectSn: this.projectSn
|
||
}
|
||
if(val.type == 0){
|
||
addTowerDevBuildDistanceApi(data).then(res=>{
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.towerCrane.successTips2')) // 保存成功！
|
||
this.selectTowerDevBuildDistance()
|
||
}
|
||
console.log(res.result,"-----添加楼房")
|
||
})
|
||
} else if (val.type == 1){
|
||
data.id = val.id
|
||
editTowerDevBuildDistanceApi(data).then(res=>{
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.towerCrane.successTips2')) // 保存成功！
|
||
this.selectTowerDevBuildDistance()
|
||
}
|
||
console.log(res.result,"-----编辑保存楼房")
|
||
})
|
||
}
|
||
},
|
||
handleCancle(index, val){
|
||
// val.isDisabled = !val.isDisabled
|
||
this.selectTowerDevBuildDistance()
|
||
},
|
||
handleAdd(index,val){
|
||
this.tableData.push({
|
||
name: "",
|
||
distance: "",
|
||
gap: "",
|
||
height: "",
|
||
isDisabled: false,
|
||
type: 0
|
||
})
|
||
},
|
||
handleDelete(index, val){
|
||
// '此操作将永久删除该条信息, 是否继续?', '提示'
|
||
this.$confirm(this.$t('message.towerCrane.delTips1'), this.$t('message.towerCrane.tips'), {
|
||
confirmButtonText: this.$t('message.towerCrane.determine'), // 确定
|
||
cancelButtonText: this.$t('message.towerCrane.cancel'), // 取消
|
||
type: 'warning'
|
||
}).then(() => {
|
||
console.log(val)
|
||
if(val.id){
|
||
deleteTowerDevBuildDistanceApi({id: val.id}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message({
|
||
type: 'success',
|
||
message: this.$t('message.towerCrane.deleteSucceeded') // 删除成功!
|
||
});
|
||
this.selectTowerDevBuildDistance()
|
||
}
|
||
})
|
||
} else {
|
||
this.tableData.splice(index, 1)
|
||
}
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: this.$t('message.towerCrane.deletionCancelled') // 已取消删除
|
||
});
|
||
});
|
||
},
|
||
show2(){
|
||
clearTimeout(this.timer)
|
||
this.showDialog2 = true
|
||
},
|
||
close2(){
|
||
this.selectTowerCurrentData();
|
||
this.timer = setTimeout(()=>{
|
||
this.selectTowerCurrentData();
|
||
},5000)
|
||
this.showDialog2 = false
|
||
// this.selectTowerDevCollideParameter()
|
||
},
|
||
selectTowerDevCollideParameter(){
|
||
selectTowerDevCollideParameterApi({projectSn: this.projectSn, devSn: this.activeTower.devSn}).then(res=>{
|
||
console.log(res,"-----获取防碰撞数据")
|
||
if(res.code == 200){
|
||
this.tableData2 = []
|
||
// console.log(this.towerData, "----所有设备")
|
||
res.result.forEach(item=>{
|
||
let obj = {
|
||
id: item.id,
|
||
collideDevSn: item.collideDevSn,
|
||
distance: item.collideDistance,
|
||
gap: item.towerSpacing,
|
||
isDisabled: true,
|
||
devSn: item.devSn,
|
||
type: 1
|
||
}
|
||
for(let i = 0; i<this.towerData.length; i++){
|
||
if(item.collideDevSn == this.towerData[i].devSn){
|
||
item.angle = this.towerData[i].angle
|
||
item.towerHeight = this.towerData[i].towerHeight
|
||
item.forearmLength = this.towerData[i].forearmLength
|
||
item.status = this.towerData[i].status
|
||
}
|
||
if(item.devSn == this.towerData[i].devSn){
|
||
item.devName = this.towerData[i].devName
|
||
item.angle2 = this.towerData[i].angle
|
||
item.towerHeight2 = this.towerData[i].towerHeight
|
||
item.forearmLength2 = this.towerData[i].forearmLength
|
||
item.status2 = this.towerData[i].status
|
||
}
|
||
}
|
||
this.tableData2.push(obj)
|
||
})
|
||
this.towerCollideData = res.result
|
||
}
|
||
})
|
||
},
|
||
handleAdd2(){
|
||
this.tableData2.push({
|
||
collideDevSn: "",
|
||
distance: "",
|
||
gap: "",
|
||
isDisabled: false,
|
||
type: 0
|
||
})
|
||
},
|
||
handleDelete2(index,val){
|
||
// '此操作将永久删除该条信息, 是否继续?', '提示'
|
||
this.$confirm(this.$t('message.towerCrane.delTips1'), this.$t('message.towerCrane.tips'), {
|
||
confirmButtonText: this.$t('message.towerCrane.determine'), // 确定
|
||
cancelButtonText: this.$t('message.towerCrane.cancel'), // 取消
|
||
type: 'warning'
|
||
}).then(() => {
|
||
// console.log(val)
|
||
if(val.id){
|
||
deleteTowerDevCollideParameterApi({id: val.id}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message({
|
||
type: 'success',
|
||
message: this.$t('message.towerCrane.deleteSucceeded') // 删除成功!
|
||
});
|
||
this.selectTowerDevCollideParameter()
|
||
}
|
||
})
|
||
} else {
|
||
this.tableData2.splice(index, 1)
|
||
}
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: this.$t('message.towerCrane.deletionCancelled') // 已取消删除
|
||
});
|
||
});
|
||
},
|
||
handleSave2(index, val){
|
||
// val.isDisabled = !val.isDisabled
|
||
// console.log(val,"-----表格单条数据")
|
||
let reg = new RegExp("^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$");
|
||
if(!val.collideDevSn){
|
||
this.$message.error(this.$t('message.towerCrane.errorTips3')) // 请选择防碰撞设备
|
||
return;
|
||
}
|
||
if(val.distance && !reg.test(val.distance)){
|
||
this.$message.error(this.$t('message.towerCrane.errorTips2')) // 请填写大于0的数字
|
||
return;
|
||
}
|
||
if(val.gap && !reg.test(val.gap)){
|
||
this.$message.error(this.$t('message.towerCrane.errorTips2')) // 请填写大于0的数字
|
||
return;
|
||
}
|
||
let data = {
|
||
collideDevSn: val.collideDevSn,
|
||
collideDistance: val.distance ? Number(val.distance).toString() : "0",
|
||
towerSpacing: val.gap ? Number(val.gap) : "0",
|
||
devSn: val.devSn,
|
||
projectSn: this.projectSn
|
||
}
|
||
// console.log(data, "----提交表单数据")
|
||
if(val.type == 0){
|
||
addTowerDevCollideParameterApi(data).then(res=>{
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.towerCrane.successTips2')) // 保存成功！
|
||
this.selectTowerDevCollideParameter()
|
||
}
|
||
console.log(res.result,"-----添加塔吊防碰撞")
|
||
})
|
||
} else if (val.type == 1){
|
||
data.id = val.id
|
||
editTowerDevCollideParameterApi(data).then(res=>{
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.towerCrane.successTips2')) // 保存成功！
|
||
this.selectTowerDevCollideParameter()
|
||
}
|
||
console.log(res.result,"-----编辑塔吊防碰撞")
|
||
})
|
||
}
|
||
},
|
||
handleCancle2(index,val){
|
||
this.selectTowerDevCollideParameter()
|
||
},
|
||
handleEdit2(index, val){
|
||
val.isDisabled = !val.isDisabled
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
|
||
.distributeDetail{
|
||
width: 100%;
|
||
height: calc(100% - 54px);
|
||
color: #fff;
|
||
background: #0D1A34;
|
||
.distributeDetail_box{
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
.distributeDetail_left{
|
||
width: 80%;
|
||
height: 100%;
|
||
background: #091225;
|
||
.svg_box{
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.svg_box2{
|
||
background: #fff;
|
||
color:#091225;
|
||
}
|
||
}
|
||
.distributeDetail_left2{
|
||
background: white;
|
||
}
|
||
.distributeDetail_right{
|
||
width: 374px;
|
||
height: 100%;
|
||
.distributeDetail_tower{
|
||
height: calc(50% - 17px);
|
||
/deep/ .el-carousel{
|
||
height: calc(100% - 51px);
|
||
}
|
||
/deep/.el-carousel__container{
|
||
height: 100%;
|
||
}
|
||
/deep/.el-carousel__arrow{
|
||
background: #122951;
|
||
}
|
||
/deep/.el-carousel__arrow{
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.crash_detail{
|
||
margin-top: 35px;
|
||
position: relative;
|
||
width: 100%;
|
||
background: #091225;
|
||
height: 100%;
|
||
text-align: center;
|
||
.item_title{
|
||
text-align: center;
|
||
font-size: 16px;
|
||
line-height: 28px;
|
||
display: inline-block;
|
||
padding: 0 30px;
|
||
background: url('./../../projectLevel/assets/images/dialog-title.png') no-repeat center;
|
||
background-size: 100%;
|
||
}
|
||
.tower_gap{
|
||
position: absolute;
|
||
top: 60px;
|
||
left: 30px;
|
||
}
|
||
.crash_tower{
|
||
position: absolute;
|
||
width: 160px;
|
||
height: 160px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 87, 94, 0.12);
|
||
border: 2px solid #FE6565;
|
||
transition: all 1s linear;
|
||
span{
|
||
position: absolute;
|
||
top: 40%;
|
||
left: 40%;
|
||
transform: translate(-50%, -50%) rotate(-90deg);
|
||
}
|
||
}
|
||
.normal{
|
||
border: 2px solid rgb(101, 254, 162);
|
||
background: rgba(101, 254, 162, 0.12);
|
||
.crash_line{
|
||
background: rgb(101, 254, 162);
|
||
}
|
||
}
|
||
.crash_tower::before{
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 2px;
|
||
height: 2px;
|
||
border-radius: 50%;
|
||
border: 3px solid #FE6565;
|
||
}
|
||
.normal::before{
|
||
border: 3px solid rgb(101, 254, 162);
|
||
}
|
||
.crash_line{
|
||
height: 1px;
|
||
background: #FE6565;
|
||
width: 80px;
|
||
position: absolute;
|
||
top: 25%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) rotate(-90deg);
|
||
}
|
||
|
||
.tower_info1{
|
||
position: absolute;
|
||
left: 70px;
|
||
top: 189px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
width: 100px;
|
||
opacity: 0.8;
|
||
span{
|
||
display: block;
|
||
font-size: 18px;
|
||
margin-bottom: 3px;
|
||
}
|
||
}
|
||
.tower_info2{
|
||
position: absolute;
|
||
right: 70px;
|
||
top: 116px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
width: 100px;
|
||
opacity: 0.8;
|
||
span{
|
||
display: block;
|
||
font-size: 18px;
|
||
margin-bottom: 3px;
|
||
}
|
||
}
|
||
.info_arrow{
|
||
position: absolute;
|
||
top: 280px;
|
||
left: 138px;
|
||
span{
|
||
position: absolute;
|
||
width: 110px;
|
||
height: 1px;
|
||
display: block;
|
||
background: #F0E788;
|
||
top: -70px;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) rotate(-90deg);
|
||
}
|
||
span::before{
|
||
content: "";
|
||
display: block;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #F0E788;
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -5px;
|
||
border-radius: 50%;
|
||
}
|
||
span::after{
|
||
content: "";
|
||
display: block;
|
||
border-top: 6px solid transparent;
|
||
border-left: 6px solid transparent;
|
||
border-right: 6px solid #F0E788;
|
||
border-bottom: 6px solid transparent;
|
||
position: absolute;
|
||
left: -12px;
|
||
top: -6px;
|
||
}
|
||
}
|
||
}
|
||
.crash_detail2{
|
||
background: white;
|
||
.item_title{
|
||
/*background: url('./../../projectLevel/assets/images/titleBG.png') no-repeat center;*/
|
||
/*background-size: 100%;*/
|
||
background: white;
|
||
}
|
||
}
|
||
}
|
||
.distributeDetail_tower2{
|
||
background: white;
|
||
color: #262D47;
|
||
border: 1px solid rgb(243, 245, 220);
|
||
.add_btn{
|
||
background: white;
|
||
color:#5181F6;
|
||
}
|
||
}
|
||
.distributeDetail_building{
|
||
height: calc(50% - 17px);
|
||
/deep/.el-carousel{
|
||
height: calc(100% - 37px);
|
||
}
|
||
/deep/.el-carousel__container{
|
||
height: 100%;
|
||
}
|
||
/deep/.el-carousel__arrow{
|
||
background: #122951;
|
||
}
|
||
/deep/.el-carousel__arrow{
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.distributeDetail_building_box{
|
||
margin-top: 25px;
|
||
height: 100%;
|
||
position: relative;
|
||
font-size: 12px;
|
||
background: #091225;
|
||
text-align: center;
|
||
.item_title{
|
||
text-align: center;
|
||
font-size: 16px;
|
||
line-height: 28px;
|
||
display: inline-block;
|
||
padding: 0 30px;
|
||
background: url('./../../projectLevel/assets/images/dialog-title.png') no-repeat center;
|
||
background-size: 100%;
|
||
}
|
||
.tower_info{
|
||
width: 210px;
|
||
height: 236px;
|
||
position: absolute;
|
||
left: 62px;
|
||
top: 38px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.info1{
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 0px;
|
||
}
|
||
.info2{
|
||
position: absolute;
|
||
right: 56px;
|
||
top: 76px;
|
||
}
|
||
.info3{
|
||
position: absolute;
|
||
left: 20px;
|
||
bottom: -40px;
|
||
width: 60px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
span{
|
||
display: block;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
.building_info{
|
||
position: absolute;
|
||
left: 214px;
|
||
top: 190px;
|
||
.info4{
|
||
position: absolute;
|
||
left: -38px;
|
||
top: -45px;
|
||
white-space: nowrap;
|
||
.line_top{
|
||
height: 35px;
|
||
width: 1px;
|
||
background: #3B455B;
|
||
position: absolute;
|
||
top: -38px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.line_top::before{
|
||
content: "";
|
||
position: absolute;
|
||
height: 1px;
|
||
width: 8px;
|
||
background: #3B455B;
|
||
bottom: 0px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.line_bottom{
|
||
height: 25px;
|
||
width: 1px;
|
||
background: #3B455B;
|
||
position: absolute;
|
||
bottom: -30px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.line_bottom::before{
|
||
content: "";
|
||
position: absolute;
|
||
height: 1px;
|
||
width: 8px;
|
||
background: #3B455B;
|
||
top: 0px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
.info5{
|
||
position: absolute;
|
||
left: 6px;
|
||
bottom: -32px;
|
||
width: 60px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
span{
|
||
display: block;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.distributeDetail_building_box2{
|
||
background: white;
|
||
color: #262D47;
|
||
.item_title{
|
||
background: white;
|
||
/*background: url('./../../projectLevel/assets/images/titleBG.png') no-repeat center;*/
|
||
/*background-size: 100%;*/
|
||
color:#262D47;
|
||
}
|
||
}
|
||
}
|
||
.distributeDetail_building2{
|
||
background: white;
|
||
.add_btn{
|
||
background: white;
|
||
color:#5181F6;
|
||
}
|
||
}
|
||
}
|
||
.distributeDetail_right2{
|
||
background: white;
|
||
width: 376px;
|
||
}
|
||
}
|
||
.distributeDetail_title{
|
||
font-weight: 900;
|
||
border-left: 4px solid #5181F6;
|
||
position: relative;
|
||
padding-left: 18px;
|
||
padding-top: 5px;
|
||
/*line-height: 31px;*/
|
||
margin-bottom: 6px;
|
||
font-size: 18px;
|
||
color: #262D48;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
/*line-height: 24px;*/
|
||
.add_btn{
|
||
// width: 60px;
|
||
padding: 0 8px;
|
||
height: 24px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
line-height: 24px;
|
||
color: #eee;
|
||
background: #0D2C54;
|
||
border-radius: 3px;
|
||
border: 1px solid rgba(0, 128, 243, 1);
|
||
margin-right: 6px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.distributeDetail_title::before{
|
||
content: "";
|
||
width: 2px;
|
||
/*height: 31px;*/
|
||
/*background: linear-gradient(to bottom, #88E7F0, #15315F);*/
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
}
|
||
.tower_title{
|
||
height: 33px;
|
||
font-size: 18px;
|
||
margin: 0;
|
||
line-height: 33px;
|
||
text-align: center;
|
||
}
|
||
/deep/.dialog-title{
|
||
width: auto;
|
||
}
|
||
.dialog-content{
|
||
width: 760px;
|
||
height: 480px;
|
||
padding-top: 20px;
|
||
/deep/.el-button + .el-button{
|
||
margin-left: 10px;
|
||
}
|
||
.delete_btn{
|
||
color: #FE6565;
|
||
}
|
||
.tables{
|
||
min-height: 320px;
|
||
}
|
||
.add_btn{
|
||
margin-left: 60px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.btn_box{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding-bottom: 20px;
|
||
}
|
||
}
|
||
</style>
|