Skip to content

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

地图模式infowindow显示逻辑优化

parent bd863e8e
Show whitespace changes
Inline Side-by-side
Showing with 242 additions and 93 deletions
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ e2b35608
......@@ -59,11 +59,7 @@
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{
obj.inspectionTime
? obj.inspectionTime
: "-"
}}</span>
<span>{{ obj.inspectionTime ? obj.inspectionTime : "-" }}</span>
</div>
</el-col>
......@@ -73,7 +69,7 @@
</div>
<div>
<span>备注信息：</span>
<span>{{ obj.remarks }} </span>
<span v-un-content>{{ obj.remarks }}</span>
</div>
</div>
<template v-if="!obj.editorPage">
......@@ -140,6 +136,19 @@ export default {
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
}
.top {
width: 100%;
height: 51px;
......
gassafety-web/src/components/PopWindow/markerInfoWindow.vue
View file @ e2b35608
......@@ -2,19 +2,31 @@
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{data.deviceName}}</div>
<div class="left text">{{ data.deviceName }}</div>
<div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="map.clearInfoWindow()"/>
<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.pipeName}}</span></div>
<div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
<div class="eq-text">
设备类型：<span>{{ title }}</span>
</div>
<div class="eq-text">
设备型号：<span>{{ data.deviceModel }}</span>
</div>
<div class="eq-text">
所属管道：<span>{{ data.pipeName }}</span>
</div>
<div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span>
</div>
</div>
<div class="pic">
<img v-bind:src="data.iconUrl" alt="" />
......@@ -25,18 +37,16 @@
<el-col :span="11">
<div>
<span>安装日期：</span>
<span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</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>
<span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
</div>
</el-col>
......@@ -46,7 +56,7 @@
</div>
<div>
<span>备注信息：</span>
<span>{{ data.remarks }} </span>
<span v-un-content> {{ data.remarks }}</span>
</div>
</div>
<!-- 报警状态 -->
......@@ -55,24 +65,22 @@
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>-->
</div>
</div>
</template>
<script>
import moment from "moment"
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null
map: null,
},
methods:{
methods: {
moment,
}
},
};
</script>
......@@ -88,6 +96,19 @@ export default {
width: 100%;
height: 51px;
background-color: #053b6a;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
}
.text {
font-weight: 600;
font-size: 16px;
......@@ -199,5 +220,4 @@ export default {
display: flex;
justify-content: space-between;
}
</style>
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ e2b35608
......@@ -4,11 +4,7 @@
<div class="top display-default">
<div class="left text">{{ data.deviceName }}</div>
<div class="right text">
<img
src="../../assets/images/closeBtn.png"
alt=""
@click="close"
/>
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
</div>
<!-- 设备信息 -->
......@@ -98,10 +94,10 @@ export default {
},
});
},
close(){
close() {
this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true;
}
},
},
};
</script>
......
gassafety-web/src/components/TopNav/index.vue
View file @ e2b35608
......@@ -235,6 +235,7 @@ export default {
.el-menu--horizontal > .el-submenu .el-submenu__title {
height: 50px !important;
line-height: 50px !important;
border:none !important;
margin-left:15px;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
......
gassafety-web/src/directive/permission/index.js
View file @ e2b35608
import hasRole from './hasRole'
import hasPermi from './hasPermi'
import unContent from './unContent'
const install = function(Vue) {
Vue.directive('hasRole', hasRole)
Vue.directive('hasPermi', hasPermi)
Vue.directive('un-content', unContent)
}
if (window.Vue) {
......
gassafety-web/src/directive/permission/unContent.js 0 → 100644
View file @ e2b35608
/**
* 无内容显示-
* Copyright (c) 2021 gassafety
*/
export default {
inserted(el, binding, vnode) {
el.innerHTML = el.innerHTML.replace(/\s+/g, "") ? el.innerHTML : "-";
}
};
gassafety-web/src/utils/gaodeMap.js
View file @ e2b35608
......@@ -37,6 +37,8 @@ class gaodeMap {
view = null;
// 地图移动结束后出现infowindow用的函数
handleInfoWindowOpenFunc = null;
// 点击左侧抽屉的时候，改变的flag
leftListClick = false;
//构造函数中设置中央点默认值
constructor(center) {
......@@ -59,6 +61,8 @@ class gaodeMap {
this.myMap.on("click", e => {
// if (this.lineType !=1 || this.lineFlag) return;
this.closeInfoWindow();
this.polyLinesColorClear();
if (this.lineType != 1 || this.lineFlag) return;
// 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
......@@ -81,7 +85,10 @@ class gaodeMap {
// 地图开始平移删除infowindow
this.myMap.on("movestart", () => {
// console.log("地图平移");
// 抽屉点击的时候让infowindow隐藏
if (this.leftListClick) {
this.closeInfoWindow();
}
});
// 地图开始缩放删除infowindow
this.myMap.on("zoomstart", () => {
......@@ -92,6 +99,8 @@ class gaodeMap {
if (this.handleInfoWindowOpenFunc) {
this.handleInfoWindowOpenFunc();
this.handleInfoWindowOpenFunc = null;
// 移动结束之后，leftListClick变成false
this.leftListClick = false;
}
// console.log("缩放开始")
if (!this.onceFlag) {
......@@ -198,6 +207,7 @@ class gaodeMap {
) {
marker.content = this.getMarketContent(data);
marker.on("mouseover", this.infoOpen);
marker.on("click", this.infoOpen);
marker.on("mouseout", infoClose);
marker.infoWindow = infoWindow;
marker.setExtData(data);
......@@ -313,6 +323,13 @@ class gaodeMap {
}
// 其他设备
infoOpen = e => {
// 如果是无状态并且鼠标mouseover
if (this.view.targetNum == 0 && e.type == "mouseover") {
return;
}
// 如果是新建状态 不出弹框
if (this.view.targetNum == 1) return;
let options = map.getStatus();
options.scrollWheel = false;
map.setStatus(options);
......@@ -489,11 +506,12 @@ class gaodeMap {
let path = coordinates ? eval(coordinates) : [];
let polyline = new AMap.Polyline({
path,
strokeColor: "#F7FE38",
strokeColor: "#2EE7E7",
strokeWeight: 4,
strokeOpacity: 0.9,
zIndex: 50,
bubble: true,
cursor: "pointer",
bubble: false,
geodesic: true,
extData: {
type: "line",
......@@ -527,7 +545,7 @@ class gaodeMap {
});
let infoWindow = new AMap.InfoWindow({
isCustom: true,
autoMove: false,
autoMove: true,
content: dom.$el,
//信息船体偏移量
offset: new AMap.Pixel(0, 0),
......@@ -538,8 +556,9 @@ class gaodeMap {
polyline.infoWindow = infoWindow;
//添加事件
polyline.on("mouseover", this.polylineMouseOver);
polyline.on("click", this.polylineMouseOver);
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "#F7FE38" });
polyline.setOptions({ strokeColor: "#2EE7E7" });
// infoWindow.close();
});
// 计算info的位置
......@@ -554,8 +573,16 @@ class gaodeMap {
}
// 鼠标移入管道
polylineMouseOver = e => {
console.log(e.type);
let polyline = e.target;
if (this.lineType == 1) return;
// 如果是无状态或者是新建并且是鼠标移入
if (this.view.targetNum == 0 && e.type == "mouseover") {
polyline.setOptions({ strokeColor: "#F7FE38" });
return;
}
// 当选择的是新建的时候，线是点不了的
if (this.lineType == 1 || this.view.targetNum == 1) return;
// 上方导航的高
let X = 20,
Y = -20;
......@@ -599,20 +626,49 @@ class gaodeMap {
console.log("靠下了");
Y = -infoWindowHeight - 20;
}
polyline.setOptions({ strokeColor: "#FF5A67" });
X = 23;
Y = -20;
// polyline.setOptions({ strokeColor: "#FF5A67" });
// 浮动的时候为新建时，不变色
if (this.view.targetNum != 1) {
polyline.setOptions({ strokeColor: "#F7FE38" });
}
}
polyline.infoWindow.setOffset(new AMap.Pixel(X, Y));
// 如果是戍边浮动出现infowindow 就让窗口在固定的位置出现，这样就不显得乱了
if (e.type == "mouseover") {
const { coordinates } = polyline.getExtData().lineData;
// 计算出前两个点的中点
const arr1 = eval(coordinates)[0];
const arr2 = eval(coordinates)[1];
const a = this.centerNum(arr1[0],arr2[0]);
const b= this.centerNum(arr1[1],arr2[1]);
const a2 = this.centerNum(a,arr1[0])
const b2 = this.centerNum(b,arr1[1])
polyline.infoWindow.open(map, [a2, b2]);
} else {
polyline.infoWindow.open(map, e.lnglat);
}
// polyline.infoWindow=infoWindow;
this.showInfoWindow = polyline.infoWindow;
// const
};
polyLinesColorClear() {
this.polyLines.forEach(item => {
item.setOptions({ strokeColor: "#2EE7E7" });
});
}
centerNum(num1,num2){
return (Number(num1)+Number(num2) )/2
}
// 创建一条新的线
createNewLine() {
map.remove(this.markerOverlays);
console.log("创造一条线了啊");
this.mouseTool.polyline({
// bubbles:false,
strokeWeight: 4,
......@@ -650,6 +706,7 @@ class gaodeMap {
// obj.polyEditor.on('adjust',(e)=>{
// console.log("addnode")
// })
obj.on("mousedown", e => {
console.log(e.originEvent);
console.log("lineType", this.lineType);
......@@ -717,28 +774,24 @@ class gaodeMap {
const {
lineData: { pipeName, deviceInfoList }
} = obj.getExtData();
console.log("deviceInfoList", deviceInfoList);
var devices = " ";
let devices = " ";
let content;
if (deviceInfoList) {
for (var i = 0; i < deviceInfoList.length; i++) {
var item = deviceInfoList[i];
devices = devices + item.deviceName + " ";
}
content = `请确认是否删除管道名称为 + ${pipeName} +的数据项，该管道下包含的设备（ ${devices} ）将一并删除`;
} else {
content = `请确认是否删除管道名称为 ${pipeName} 的数据项，该管道下不包含任何设备`;
}
vue
.$confirm(
'请确认是否删除管道名称为"' +
pipeName +
'"的数据项，该管道下包含的设备（' +
devices +
"）将一并删除",
"提示",
{
.$confirm(content, "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
type: "warning"
// center: true
}
)
})
.then(() => {
const { lineData } = obj.getExtData();
// updatePipe
......@@ -751,7 +804,9 @@ class gaodeMap {
// 如果是老线，就要线删除原来的，然后重新包装一遍
if (index >= 0) {
this.polyLines.splice(index, 1);
// 删除管道的时候，与管道管理额的设备也要删除
// 删除管道的时候，与管道管理额的设备也要删除,
// 如果管道存在下级设备,也一并删除
if (deviceInfoList) {
for (var i = 0; i < deviceInfoList.length; i++) {
const item = deviceInfoList[i];
for (let j = 0; j < this.markers.length; j++) {
......@@ -766,15 +821,16 @@ class gaodeMap {
}
}
}
}
map.remove(obj);
// 列表变化
const pipeArr= this.polyLines.map(item=>{
const pipeArr = this.polyLines.map(item => {
return item.getExtData().lineData;
})
});
const markerArr = this.markers.map(item => {
return item.getExtData();
});
this.view.pipeClassify(pipeArr)
this.view.pipeClassify(pipeArr);
this.view.deviceClassify(markerArr);
this.view.pipeList();
}
......@@ -809,7 +865,8 @@ class gaodeMap {
item.setExtData(opstions);
let attr = item.getOptions();
attr.strokeColor = "#F7FE38";
// attr.strokeColor = "#F7FE38";
attr.strokeColor = "#2EE7E7";
item.setOptions(attr);
});
}
......@@ -875,7 +932,6 @@ class gaodeMap {
device.form.longitude = postion.lng;
device.form.latitude = postion.lat;
}
device.show();
});
e.obj.on("mouseover", function() {
......@@ -892,6 +948,12 @@ class gaodeMap {
if (e.obj && e.obj.getExtData().type == "newLine") {
console.log("挂上事件");
that.newLineAddEvent(e.obj);
e.obj.on("mouseover", () => {
e.obj.setOptions({ strokeColor: "#F7FE38" });
});
e.obj.on("mouseout", () => {
e.obj.setOptions({ strokeColor: "#80d8ff" });
});
// 记录这条线
// console.log(e.obj.getPath().length)
// 如果只有一个点，并没有连成线的时候就不close 大于一个点的时候才执行clse
......
gassafety-web/src/utils/gaodeMapView.js
View file @ e2b35608
......@@ -53,9 +53,7 @@ class gaodeMap {
markerPassedPolylineInfoWindow = null;
view = null;
handleInfoWindowOpenFunc = null;
onceFlag = false;
//构造函数中设置中央点默认值
constructor(center) {
this.markers = [];
......@@ -96,7 +94,6 @@ class gaodeMap {
})
.catch(() => {});
}
// //console.log("抬起来了");
});
// 地图开始平移删除infowindow
......
gassafety-web/src/views/device/map/index.vue
View file @ e2b35608
<template>
<div>
<div style="width: 100vw;" :style="{height:`${boxHeight}px`}" id="container"></div>
<div
:style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
id="container"
></div>
<div class="btn-wrapper">
<div class="myBtn">
<div
......@@ -238,6 +241,7 @@ export default {
backFlag: true,
// 抽屉内的滚动条的高需要赋值赋值
boxHeight: "",
boxWidth: "",
drawerOpacity: false,
// 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7],
......@@ -295,14 +299,21 @@ export default {
};
},
mounted() {
this.onResize();
window.removeEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize);
this.initMap();
this.boxHeight = document.body.clientHeight - 81;
},
methods: {
onResize() {
this.boxHeight = document.body.clientHeight - 81;
this.boxWidth = document.body.clientWidth - 100;
},
async initMap() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
this.gaoMap.view = this;
window.removeEventListener("click", this.barClose);
window.addEventListener("click", this.barClose);
gaoMap.addMouseTool();
gaoMap.searchTips("tipinput");
......@@ -392,6 +403,7 @@ export default {
// 0是初始，1是新建 2是编辑 3删除
this.gaoMap.lineType = 1;
if (this.gaoMap.newLineObj == null) {
console.log(this.gaoMap.newLineObj);
this.gaoMap.createNewLine();
}
} else {
......@@ -546,8 +558,12 @@ export default {
console.log("window");
this.deviceType = false;
// 关闭当前线条的infowindow
// 如果当前状态只有是编辑跟删除状态才会关闭
if (this.targetNum == 2 || this.targetNum == 3) {
this.gaoMap.closeInfoWindow();
}
// 如果没有选择的时候点window 则高亮消失
console.log(this.targetNum)
if (this.targetNum == 1 && this.iconClass == "icon-create") {
this.targetNum = 0;
}
......@@ -711,18 +727,35 @@ export default {
panToo(iten, item) {
// 如果没打对勾，就啥也不干
if (!this.leftBarNum.includes(item.value)) return;
// 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
// 所有线条颜色还原
this.gaoMap.leftListClick = true;
this.gaoMap.polyLinesColorClear();
this.gaoMap.myMap.setZoom(11);
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(iten.path);
let path;
if (item.value == 1) {
const a = (Number(iten.lnglat[0]) + Number(iten.path[0])) / 2;
const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
//屏幕移动的位置
path = [a, b - 0.1];
// 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
iten.infoPath = [a.toFixed(6), b.toFixed(6)];
console.log(path);
} else {
path = [iten.path[0], iten.path[1] - 0.1];
}
// const path =
// item.value == 1
// ? [iten.lnglat[0], iten.lnglat[1] - 0.1]
// : [iten.path[0], iten.path[1] - 0.1];
this.gaoMap.panTo(path);
}
}
// 当前地图中心点
const { lat, lng } = this.gaoMap.myMap.getCenter();
// 管道是这个方法，因为管道比较特殊
if (item.value == 1) {
this.polylineInfoWindowShow(iten, lat, lng);
} else if (item.value == 9) {
......@@ -735,6 +768,7 @@ export default {
this.diveceInfoWindowShow(iten, lat, lng);
}
},
// 如果是线条飞过去出现infowindow
polylineInfoWindowShow(iten, lat, lng) {
const target = this.gaoMap.polyLines.filter((item) => {
......@@ -743,16 +777,20 @@ export default {
console.log("target", target);
const e = {
target,
lnglat: iten.lnglat,
lnglat: iten.infoPath,
};
// console.log(target.getOptions());
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
this.gaoMap.polylineMouseOver(e);
target.setOptions({ strokeColor: "#F7FE38" });
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.polylineMouseOver(e);
target.setOptions({ strokeColor: "#F7FE38" });
};
},
// 这个是其他设备的infowindow
......@@ -780,6 +818,7 @@ export default {
beforeDestroy() {
console.log("移除window事件");
window.removeEventListener("click", this.barClose);
window.removeEventListener("resize", this.onResize);
},
};
</script>
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ e2b35608
<template>
<div>
<div style="width: 100vw;" :style="{height:`${boxHeight}px`}" id="container"></div>
<div
:style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
id="container"
></div>
<div v-show="false" class="btn-wrapper">
<div class="myBtn">
<div
......@@ -379,6 +382,7 @@ export default {
// 左边抽屉 内嵌scroll盒子的高
boxHeight: "",
boxWidth:"",
drawerOpacity: false,
//抽屉是否收回
backFlag: true,
......@@ -391,9 +395,11 @@ export default {
},
mounted() {
this.boxHeight = document.body.clientHeight - 81;
// this.$nextTick(() => {
this.onResize();
window.removeEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize);
this.initMap();
// });
},
......@@ -405,6 +411,11 @@ export default {
},
},
methods: {
onResize() {
this.boxHeight = document.body.clientHeight - 81;
this.boxWidth = document.body.clientWidth;
console.log("挂在")
},
initMap() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
......@@ -1364,6 +1375,8 @@ export default {
console.log("移除window事件");
map.clearMap();
window.removeEventListener("mousedown", this.barClose);
window.removeEventListener("resize", this.onResize);
// 关闭scoket
if (this.ws) {
console.log("socket关闭了");
......
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