<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="box">
|
<div>
|
<span>系统台站</span>
|
<el-switch
|
v-model="value"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
@change="chang(value, '系统台站')"
|
></el-switch>
|
</div>
|
<div>
|
<span style="letter-spacing: 15px">监测站</span>
|
<el-switch
|
v-model="value1"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
@change="chang(value1, '监测站')"
|
></el-switch>
|
</div>
|
<div>
|
<span>测试台站</span>
|
<el-switch
|
v-model="value2"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
></el-switch>
|
</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,
|
};
|
},
|
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
|
},
|
//显示监测站
|
chang(show, name) {
|
juhe(show, name);
|
},
|
},
|
mounted() {
|
bus.$on("cleartuli", (e) => {
|
this.ishowtuli = false
|
this.showtuli()
|
});
|
bus.$on("ishowtuli", (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: 500px;
|
height: 410px;
|
position: absolute;
|
right: 340px;
|
top: 180px;
|
z-index: 50;
|
background: url(~@/assets/image/test/圆角矩形.png);
|
background-position: center;
|
background-size: 100% 100%;
|
cursor: move;
|
}
|
.box {
|
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;
|
}
|
.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>
|
