<template>
|
<div class="container"
|
v-if="ishowtuli"
|
id="moved2"
|
@mousedown="moved">
|
<div class="top">
|
<span style="font-weight: bold">态势标绘</span>
|
<span class="close"
|
@click="showtuli">X</span>
|
</div>
|
<div class="boxMenu">
|
<div class="menu">
|
|
<div class="menuContent">
|
<div class="menuItem"
|
@click="setMenuClick(item)"
|
v-for="(item,index) in Option"
|
:key="index">
|
<button>{{ item.name}}</button>
|
</div>
|
</div>
|
|
</div>
|
<!-- <div class="menu">
|
<p>三维标绘</p>
|
<div>
|
<div v-for="(item,index) in Option1"
|
:key="index">
|
</div>
|
</div>
|
</div> -->
|
|
</div>
|
</div>
|
</template>
|
<script>
|
import bus from "../../utils/bus";
|
import { juhe } from "../../utils/work";
|
export default {
|
data () {
|
return {
|
value: false,
|
value1: true,
|
value2: false,
|
ishowtuli: false,
|
scale: 2.13,
|
Option: [
|
{
|
name: '粗直箭头',
|
type: 'StraightArrow',
|
value: 'polygon',
|
},
|
{
|
name: '燕尾直箭头',
|
type: 'SwallowtailArrow',
|
value: 'polygon',
|
},{
|
name: '钳击箭头',
|
type: 'PincerArrow',
|
value: 'polygon',
|
},{
|
name: '集结地',
|
type: 'GatheringPlace',
|
value: 'polygon',
|
},{
|
name: '圆角矩形',
|
type: 'RoundedRectangle',
|
value: 'polygon',
|
},
|
{
|
name: '扇形',
|
type: 'Sector',
|
value: 'polygon',
|
},{
|
name: '弓形',
|
type: 'Bow',
|
value: 'polygon',
|
},{
|
name: '攻击箭头',
|
type: 'AttackArrow',
|
value: 'polygon',
|
},{
|
name: '清除',
|
type: 'Clear',
|
}
|
],
|
|
};
|
|
},
|
methods: {
|
moved (event) {
|
var drag=document.getElementById("moved2");
|
// //点击某物体时，用drag对象即可，move和up是全局区域，
|
// 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
|
var event=event||window.event; //兼容IE浏览器
|
// 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
|
var diffX=event.clientX*this.scale-drag.offsetLeft;
|
var diffY=event.clientY*this.scale-drag.offsetTop;
|
document.onmousemove=(event) => {
|
var event=event||window.event;
|
var moveX=event.clientX*this.scale-diffX;
|
var moveY=event.clientY*this.scale-diffY;
|
if(moveX<0) {
|
moveX=0;
|
} else if(moveX>2304*this.scale-drag.offsetWidth) {
|
moveX=2304*this.scale-drag.offsetWidth;
|
}
|
if(moveY<0) {
|
moveY=0;
|
} else if(moveY>4096*this.scale-drag.offsetHeight) {
|
moveY=4096*this.scale-drag.offsetHeight;
|
}
|
drag.style.left=moveX+"px";
|
drag.style.top=moveY+"px";
|
};
|
document.onmouseup=function(event) {
|
document.onmousemove=null;
|
document.onmouseup=null;
|
};
|
},
|
//边框的显示隐藏
|
showtuli () {
|
this.ishowtuli=false;
|
//清除系统台站，监测站，gb
|
},
|
setMenuClick (res) {
|
if(res.type=='Clear') {
|
sgworld.Creator.ClearMilitaryStandard();
|
return
|
}
|
|
sgworld.Creator.militaryPlotting(res.type,res.value,(entity) => {
|
});
|
}
|
},
|
mounted () {
|
bus.$on("clearMilitaryPlot",(e) => {
|
this.ishowtuli=false
|
this.showtuli()
|
});
|
bus.$on("ishowMilitaryPlot",(e) => {
|
if(this.ishowtuli) {
|
this.ishowtuli=false
|
this.showtuli()
|
} else {
|
this.ishowtuli=true
|
}
|
});
|
},
|
watch: {
|
value (e) {
|
if(e) {
|
if(document.getElementsByClassName("tableContain")[0]) {
|
document.getElementsByClassName("tableContain")[0].style.display=
|
"none";
|
}
|
}
|
},
|
value1 (e) {
|
if(e) {
|
this.showbuild()
|
if(document.getElementsByClassName("tableContain")[0]) {
|
document.getElementsByClassName("tableContain")[0].style.display=
|
"none";
|
}
|
} else {
|
mode1.deleteObject()
|
mode1=null
|
}
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.top {
|
width: 94%;
|
height: 20%;
|
margin: 0 auto;
|
border-bottom: 2px solid #fff;
|
color: #fff;
|
}
|
.top > span {
|
display: inline-block;
|
margin: 10px 20px;
|
font-size: 40px;
|
letter-spacing: 5px;
|
font-weight: 300;
|
line-height: 80px;
|
margin-left: 40px;
|
}
|
.container {
|
width: 800px;
|
height: 500px;
|
position: absolute;
|
right: 340px;
|
top: 180px;
|
z-index: 50;
|
background: url(~@/assets/image/test/圆角矩形.png) no-repeat;
|
background-position: center;
|
background-size: 100% 100%;
|
cursor: move;
|
}
|
.boxMenu {
|
width: 100%;
|
height: 70%;
|
|
/* font-weight: bold;
|
display: flex;
|
-ms-flex-wrap: wrap;
|
flex-wrap: wrap;
|
flex-direction: column;
|
justify-content: center;
|
-ms-flex-pack: distribute;
|
align-items: center; */
|
}
|
.menuTitle {
|
font-size: 36px;
|
color: white;
|
margin: 10px 40px;
|
}
|
.menuItem {
|
margin: 20px 10px;
|
/* background: #409eff !important; */
|
}
|
.menuItem button {
|
width: 200px;
|
}
|
.menuItem :hover {
|
/* color: #409eff !important; */
|
/* background: #409eff !important; */
|
}
|
.menuContent {
|
/* display: flex; */
|
cursor: pointer;
|
display: grid;
|
grid-template-columns: auto auto auto;
|
text-align: center;
|
font-size: 32px;
|
color: white;
|
margin: 10px 40px;
|
}
|
.box .menu {
|
width: 100%;
|
height: auto;
|
}
|
.box >>> .el-switch__core {
|
width: 140px !important;
|
height: 50px;
|
margin-left: 30px;
|
border-radius: 28px;
|
}
|
.box >>> .el-switch__core:after {
|
width: 48px;
|
height: 48px;
|
margin-left: 0px;
|
top: 0px;
|
}
|
.box >>> .el-switch.is-checked .el-switch__core::after {
|
margin-left: -50px !important;
|
}
|
.box > div {
|
width: 70%;
|
height: 70px;
|
font-size: 40px;
|
line-height: 70px;
|
margin-top: 20px;
|
color: #fff;
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-around;
|
align-items: center;
|
}
|
.close {
|
position: absolute;
|
right: 20px;
|
top: 0px;
|
cursor: pointer;
|
}
|
/* .container>div{
|
width: 100%;
|
height: 20%;
|
border: 1px solid #000;
|
} */
|
</style>
|
