Skip to content

G
gassafety
Commit 43eb8e46 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

检测盒子是否碰撞到底部的bottomData

parent dbaa9ea0
Show whitespace changes
Inline Side-by-side
Showing with 428 additions and 185 deletions
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ 43eb8e46
......@@ -36,22 +36,40 @@
</div>
<div class="pic">
<img :src="obj.iconUrl" alt="" />
<img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" />
<el-image
v-show="false"
id="img"
ref="previewImg"
:src="obj.iconUrl"
:preview-src-list="bigImageArr"
:z-index="9999999"
></el-image>
</div>
</div>
<div class="maintain-content">
<div>
<span>管道所在地址：</span>
<span>{{ obj.pipeAddr }}</span>
</div>
<el-col :span="11">
<div>
<span>安装日期：</span>
<span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
</div>
</el-col>
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{ obj.inspectionTime }}</span>
<span>{{
obj.inspectionTime
? obj.inspectionTime
: "-"
}}</span>
</div>
</el-col>
<div>
<span>管道所在地址：</span>
<span>{{ obj.pipeAddr }}</span>
</div>
<div>
<span>备注信息：</span>
......@@ -83,8 +101,30 @@ export default {
created() {
console.log("created", this.obj);
},
mounted() {},
computed: {
bigImageArr() {
return [this.obj.iconUrl];
},
},
methods: {
moment,
mousedown(e) {
return;
// console.log(this.$refs.previewImg)
this.$refs.previewImg.showViewer = true;
console.log(this.$refs.previewImg.showViewer);
// 加载出来的dom给个事件阻止冒泡
setTimeout(() => {
const dom = document.getElementsByClassName(
"el-image-viewer__wrapper"
)[0];
dom.addEventListener("mousedown", (e) => {
e.stopPropagation();
console.log("?");
});
});
},
close() {
this.obj.polyline.infoWindow.close();
},
......@@ -115,7 +155,7 @@ export default {
}
.right {
padding-right: 22px;
img{
img {
cursor: pointer;
}
}
......@@ -126,7 +166,7 @@ export default {
overflow: hidden;
overflow-y: auto;
.eq-content {
min-height: 156px;
// min-height: 156px;
box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
......@@ -152,12 +192,13 @@ export default {
}
}
.pic {
width: 177px;
height: 129px;
width: 180px;
height: 103px;
// background-color: black;
img {
width: 100%;
height: 100%;
// cursor: pointer;
}
}
}
......@@ -165,9 +206,9 @@ export default {
.maintain-content {
width: 100%;
height: 119px;
max-height: 119px;
padding-left: 22px;
padding-right: 22px;
// padding-right: 22px;
padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
......@@ -180,7 +221,7 @@ export default {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 250px;
max-width: 280px;
}
}
}
......
gassafety-web/src/components/PopWindow/markerInfoWindow.vue
View file @ 43eb8e46
......@@ -22,10 +22,32 @@
</div>
<!-- 维修人员 -->
<div class="maintain-content">
<div>管道所在地址：<span>{{data.deviceAddr}}</span></div>
<div>安装日期：<span>{{data.installationTime}}</span></div>
<div>最后巡检日期：<span></span></div>
<div>备注信息：<span>{{data.remarks}}</span></div>
<el-col :span="11">
<div>
<span>安装日期：</span>
<span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</span>
</div>
</el-col>
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{
data.inspectionTime
? data.inspectionTime
: "-"
}}</span>
</div>
</el-col>
<div>
<span>管道所在地址：</span>
<span>{{ data.pipeAddr }}</span>
</div>
<div>
<span>备注信息：</span>
<span>{{ data.remarks }} </span>
</div>
</div>
<!-- 报警状态 -->
<!--<div class="warn-content">
......@@ -38,6 +60,7 @@
</template>
<script>
import moment from "moment"
//line移入时的的infowindow
export default {
props: {
......@@ -45,21 +68,26 @@ export default {
title: "",
data: {},
map: null
},
methods:{
moment,
}
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 406px;
// height: 488px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #053B6A;
background-color: #053b6a;
.text {
font-weight: 600;
font-size: 16px;
......@@ -70,15 +98,22 @@ export default {
padding-left: 22px;
}
.right {
padding-right: 16px;
padding-right: 22px;
img {
cursor: pointer;
}
}
}
.content {
position: relative;
max-height: 400px;
overflow: hidden;
overflow-y: auto;
.eq-content {
height: 156px;
// min-height: 156px;
box-sizing: border-box;
padding: 13px 16px 13px 22px;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
......@@ -89,25 +124,39 @@ export default {
font-weight: 400;
color: #1d1d1d;
opacity: 1;
& > span {
vertical-align: top;
display: inline-block;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
word-break: break-all;
max-width: 100px;
}
}
}
.pic {
width: 177px;
height: 129px;
width: 180px;
height: 103px;
// background-color: black;
img {
width: 100%;
height: 100%;
// cursor: pointer;
}
}
}
}
.maintain-content {
width: 100%;
height: 130px;
max-height: 119px;
padding-left: 22px;
padding-top: 16px;
// padding-right: 22px;
padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2;
& > div {
margin-bottom: 8px;
font-size: 14px;
......@@ -116,7 +165,7 @@ export default {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 250px;
max-width: 280px;
}
}
}
......@@ -143,102 +192,12 @@ export default {
}
}
}
.wrapperEditorPage {
}
.display-default {
display: flex;
justify-content: space-between;
}
.dot-top {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: #053B6A;
border-top-width: 0;
border-style: dashed;
border-bottom-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 向右的箭头 */
.dot-right {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: #053B6A;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
/* 向下的箭头 */
.dot-bottom {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: #053B6A;
border-bottom-width: 0;
border-style: dashed;
border-top-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 向左的箭头 */
.dot-left {
position: absolute;
left: -12px;
top: 8px;
font-size: 0;
line-height: 0;
border-width: 13px;
border-color: #053B6A;
border-left-width: 0;
border-style: dashed;
border-right-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
.content {
max-height: 480px;
overflow: hidden;
overflow-y: auto;
.eq-content {
min-height: 156px;
box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
margin-bottom: 6px;
}
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
opacity: 1;
& > span {
vertical-align: top;
display: inline-block;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
word-break: break-all;
max-width: 88px;
}
}
}
.pic {
width: 177px;
height: 129px;
// background-color: black;
img {
width: 100%;
height: 100%;
}
}
}
}
</style>
gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue
View file @ 43eb8e46
......@@ -36,9 +36,9 @@
</div>
<div class="pic">
<!-- <img :src="obj.iconUrl" alt="" /> -->
<img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" />
<el-image
@mouseover="mousedown"
v-show="false"
id="img"
ref="previewImg"
:src="obj.iconUrl"
......@@ -49,17 +49,27 @@
</div>
<div class="maintain-content">
<div>
<span>管道所在地址：</span>
<span>{{ obj.pipeAddr }}</span>
</div>
<el-col :span="11">
<div>
<span>安装日期：</span>
<span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
</div>
</el-col>
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{ obj.inspectionTime }}</span>
<span>{{
obj.inspectionTime
? obj.inspectionTime
: "-"
}}</span>
</div>
</el-col>
<div>
<span>管道所在地址：</span>
<span>{{ obj.pipeAddr }}</span>
</div>
<div>
<span>备注信息：</span>
......@@ -91,34 +101,33 @@ export default {
created() {
console.log("created", this.obj);
},
mounted() {
console.log("stopWindow");
this.$refs.previewImg.$el.addEventListener("mouseover", (e) => {
console.log("11", e);
// e.stopPropagation();
console.log("stopWindow");
});
},
mounted() {},
computed: {
bigImageArr() {
return [this.dialogImageUrl];
return [this.obj.iconUrl];
},
},
methods: {
moment,
mousedown() {
mousedown(e) {
return;
// console.log(this.$refs.previewImg)
this.$refs.previewImg.showViewer = true;
console.log(this.$refs.previewImg.showViewer);
// 加载出来的dom给个事件阻止冒泡
setTimeout(() => {
const dom = document.getElementsByClassName(
"el-image-viewer__wrapper"
)[0];
dom.addEventListener("mousedown", (e) => {
e.stopPropagation();
console.log("?");
});
});
},
close() {
this.obj.polyline.infoWindow.close();
},
stopWindow() {
console.log("阻止window冒泡的图片");
},
stopw() {
console.log("stopwindow");
},
},
};
</script>
......@@ -130,7 +139,7 @@ export default {
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden;
overflow: hidden;
.top {
width: 100%;
height: 51px;
......@@ -157,7 +166,7 @@ export default {
overflow: hidden;
overflow-y: auto;
.eq-content {
min-height: 156px;
// min-height: 156px;
box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
......@@ -183,12 +192,13 @@ export default {
}
}
.pic {
width: 177px;
height: 129px;
width: 180px;
height: 103px;
// background-color: black;
#img {
img {
width: 100%;
height: 100%;
// cursor: pointer;
}
}
}
......@@ -196,9 +206,9 @@ export default {
.maintain-content {
width: 100%;
height: 119px;
max-height: 119px;
padding-left: 22px;
padding-right: 22px;
// padding-right: 22px;
padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
......@@ -211,7 +221,7 @@ export default {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 250px;
max-width: 280px;
}
}
}
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue 0 → 100644
View file @ 43eb8e46
<template>
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{data.deviceName}}</div>
<div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="map.clearInfoWindow()"/>
</div>
</div>
<!-- 设备信息 -->
<div class="content">
<div class="eq-content display-default">
<div class="text-wrapper">
<div class="eq-text">设备类型：<span>{{title}}</span></div>
<div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div>
<div class="eq-text">所属管道：<span>{{data.pipeCode}}</span></div>
<div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
</div>
<div class="pic">
<img v-bind:src="data.iconUrl" alt="" />
</div>
</div>
<!-- 维修人员 -->
<div class="maintain-content">
<el-col :span="11">
<div>
<span>安装日期：</span>
<span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</span>
</div>
</el-col>
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{
data.inspectionTime
? data.inspectionTime
: "-"
}}</span>
</div>
</el-col>
<div>
<span>管道所在地址：</span>
<span>{{ data.pipeAddr }}</span>
</div>
<div>
<span>备注信息：</span>
<span>{{ data.remarks }} </span>
</div>
</div>
<!-- 报警状态 -->
<!--<div class="warn-content">
<div>报警状态 <span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>-->
</div>
</div>
</template>
<script>
import moment from "moment"
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null
},
methods:{
moment,
}
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 406px;
// height: 488px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
.text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.left {
padding-left: 22px;
}
.right {
padding-right: 22px;
img {
cursor: pointer;
}
}
}
.content {
position: relative;
max-height: 400px;
overflow: hidden;
overflow-y: auto;
.eq-content {
// min-height: 156px;
box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
margin-bottom: 6px;
}
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
opacity: 1;
& > span {
vertical-align: top;
display: inline-block;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
word-break: break-all;
max-width: 100px;
}
}
}
.pic {
width: 180px;
height: 103px;
// background-color: black;
img {
width: 100%;
height: 100%;
// cursor: pointer;
}
}
}
}
.maintain-content {
width: 100%;
max-height: 119px;
padding-left: 22px;
// padding-right: 22px;
padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2;
& > div {
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
span {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 280px;
}
}
}
.warn-content {
height: 82px;
box-sizing: border-box;
padding: 8px 0 0 22px;
border-bottom: 1px solid #e2e2e2;
& > div {
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
}
}
.btn {
padding-top: 32px;
text-align: center;
.elbtn {
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
}
}
}
.wrapperEditorPage {
}
.display-default {
display: flex;
justify-content: space-between;
}
</style>
gassafety-web/src/utils/gaodeMapView.js
View file @ 43eb8e46
......@@ -5,7 +5,7 @@ import flowMeter from "../components/PopWindow/flowMeter.vue";
import pipelineView from "../components/PopWindow/pipelineView.vue";
import lineInfoWindow from "../components/PopWindowGis/lineInfoWindow.vue";
import { delDeviceInfo } from "@/api/device/deviceInfo";
import markerInfoWindow from "../components/PopWindow/markerInfoWindow.vue";
import markerInfoWindow from "../components/PopWindowGis/markerInfoWindow.vue";
import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.vue";
import workerManView from "../components/PopWindowGis/workerManView.vue";
......@@ -307,6 +307,9 @@ class gaodeMap {
map.setStatus(options);
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
// 检测是否碰到底部的bottomData
that.boxCollision(infoWindow.dom)
// that.addCloneDome(e.target, infoWindow);
// infoWindow.close();
......@@ -606,6 +609,7 @@ class gaodeMap {
//添加事件
polyline.on("mouseover", e => {
if (this.lineType == 1) return;
infoWindow.open(map, e.lnglat);
// 上方导航的高
const topBar = 81;
// 坐标导航的宽
......@@ -620,7 +624,7 @@ class gaodeMap {
const {
offsetWidth: infoWindowWidth,
offsetHeight: infoWindowHeight
} = { offsetWidth: 406, offsetHeight: 316 };
} = infoWindow.dom;
// 鼠标碰到线后的位置
const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
// 鼠标到左边界的距离
......@@ -649,7 +653,6 @@ class gaodeMap {
}
polyline.setOptions({ strokeColor: "#FF5A67" });
infoWindow.setOffset(new AMap.Pixel(X, Y));
infoWindow.open(map, e.lnglat);
// 这个是为了盖住vue里的东西
// polyline.cloneDom = infoWindow.dom.cloneNode(true);
// polyline.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
......@@ -660,6 +663,8 @@ class gaodeMap {
// infoWindow.close();
// this.addCloneDome(polyline, infoWindow);
// infoWindow.close();
// 检测是否与底部bottondata碰撞
this.boxCollision(infoWindow.dom);
this.showInfoWindow = infoWindow;
// const
});
......@@ -673,6 +678,23 @@ class gaodeMap {
map.add(this.polyLines);
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 碰撞检测
boxCollision(infowindowDom){
// gis地图页面的bottomdata组件
const { RightBototmData:{$el:pageDom} } = this.view.$refs;
let {offsetTop:ay,offsetLeft:ax,offsetWidth:aw,offsetHeight:ah} = pageDom;
let {y:by,x:bx,width:bw,height:bh} = infowindowDom.getBoundingClientRect();
if(by+bh>=ay){
console.log("隐藏")
this.view.bottomDataShow = false;
}else{
console.log("显示")
this.view.bottomDataShow = true;
}
// if((by+bh) -ay <0)
}
// 把map里的in佛window转化成vue里的dom
addCloneDome(target, infoWindow) {
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 43eb8e46
......@@ -94,7 +94,7 @@
</div>
</div>
<RightBototmData :list="rightBototmData" />
<RightBototmData :class="{classShow:!bottomDataShow}" ref="RightBototmData" :list="rightBototmData" />
</div>
</template>
<script>
......@@ -168,6 +168,7 @@ export default {
keyWord: "",
// 右下角的数据data
rightBototmData: [],
bottomDataShow:true,
};
},
mounted() {
......@@ -184,9 +185,11 @@ export default {
this.getPipeList();
// 右下角数据
this.rightBottomData();
},
// 右下角数据
async rightBottomData() {
this.gaoMap.view = this;
await countPipeLength().then((res) => {
// console.log("管道管道管道管道管道管道", res);
const obj = { number: res.data, type: "99" };
......@@ -443,6 +446,8 @@ export default {
},
// 新建下拉列表关闭 window点击事件
barClose() {
// 一点windowbottomData显示
this.bottomDataShow=true;
// return;
console.log("window");
this.deviceType = false;
......@@ -725,5 +730,8 @@ input[type="radio"] {
color: white;
background-color: #053b6a;
}
.classShow{
opacity: 0;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment