Skip to content

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

抽屉列表点击infowindow显示

parent 1ad5a4ef
Show whitespace changes
Inline Side-by-side
Showing with 252 additions and 135 deletions
gassafety-web/src/utils/gaodeMapView.js
View file @ eb4de9ef
......@@ -49,6 +49,7 @@ class gaodeMap {
// 工人轨迹用的窗口
markerPassedPolylineInfoWindow = null;
view = null;
handleInfoWindowOpenFunc = null;
//构造函数中设置中央点默认值
constructor(center) {
......@@ -101,8 +102,15 @@ class gaodeMap {
// console.log("缩放开始")
this.closeInfoWindow();
});
this.myMap.on("moveend", () => {
if (this.handleInfoWindowOpenFunc) {
this.handleInfoWindowOpenFunc();
this.handleInfoWindowOpenFunc = null;
}
});
this.districtBoundaries();
}
// 地图移动结束
/**
* 获取map
......@@ -156,7 +164,10 @@ class gaodeMap {
}
});
}
// 地图中点平移
panTo(lnglat) {
this.myMap.panTo(lnglat);
}
/**
* 添加Market
* @param markerType
......@@ -247,10 +258,10 @@ class gaodeMap {
DEVICE_TYPE.SMALLINSPECTOR != markerType
) {
// marker.content = this.getMarketContent(data, markerInfoWindow);
marker.on("mouseover", infoOpen);
marker.infoWindow = infoWindow;
marker.on("mouseover", that.infoOpen);
marker.on("mouseout", infoClose);
marker.setExtData(data);
that.deviceType = markerType;
let editWindow = that.createInfowindow("编辑");
editWindow.fileArr =
......@@ -327,16 +338,21 @@ class gaodeMap {
//infoWindow.close(map, e.target.getPosition());
}
function infoOpen(e) {
// function infoOpen(e) {}
return marker;
}
infoOpen = e => {
if (e.target.getExtData().alarmState == 1) {
if (e.target.getExtData().deviceType == 4) {
that.markerType = "7";
this.markerType = "7";
} else if (e.target.getExtData().deviceType <= 3) {
that.markerType = +e.target.getExtData().deviceType + 1 + "";
this.markerType = +e.target.getExtData().deviceType + 1 + "";
}
console.log("that.markerType", that.markerType);
console.log("that.markerType", this.markerType);
// 警告状态这样就要换infowindow
e.target.content = that.getMarketContent(
e.target.content = this.getMarketContent(
e.target.getExtData(),
markerInfoWindowWarn
);
......@@ -348,12 +364,12 @@ class gaodeMap {
// : e.target.getExtData().deviceType + "";
// 上图状态跟后台状态不统一，所以需要判断一下
if (e.target.getExtData().deviceType == 4) {
that.markerType = "7";
this.markerType = "7";
} else if (e.target.getExtData().deviceType <= 3) {
that.markerType = +e.target.getExtData().deviceType + 1 + "";
this.markerType = +e.target.getExtData().deviceType + 1 + "";
}
console.log("that.markerType");
e.target.content = that.getMarketContent(
console.log("this.markerType");
e.target.content = this.getMarketContent(
e.target.getExtData(),
markerInfoWindow
);
......@@ -362,20 +378,16 @@ class gaodeMap {
let options = map.getStatus();
options.scrollWheel = false;
map.setStatus(options);
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.open(map, e.target.getPosition());
// 检测是否碰到底部的bottomData
that.boxCollision(infoWindow.dom);
this.boxCollision(e.target.infoWindow.dom);
// that.addCloneDome(e.target, infoWindow);
// infoWindow.close();
that.markerInfoWindow = infoWindow;
}
return marker;
}
this.markerInfoWindow = e.target.infoWindow;
};
/**
* marker添加拖拽事件
*/
......@@ -399,7 +411,7 @@ class gaodeMap {
* @returns {string}
*/
getMarketContent(Data, markerInfoWindow) {
let data = {...Data}
let data = { ...Data };
data.class = this;
console.log("this.markerType", this.markerType);
switch (this.markerType) {
......@@ -407,7 +419,7 @@ class gaodeMap {
const dom = createPop(markerInfoWindow, {
title: "调压箱",
data: data,
map: map,
map: map
});
const html = dom.$el;
dom.remove();
......@@ -715,17 +727,41 @@ class gaodeMap {
// 信息窗体
this.newLineAddEvent(polyline);
//添加事件
polyline.on("mouseover", e => {
polyline.on("mouseover", this.polylineMouseOver);
polyline.on("mouseout", e => {
// console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
if (polyline.getExtData().lineData.alarmState == 1) return;
polyline.setOptions({ strokeColor: "#F7FE38" });
// infoWindow.close();
});
// 计算info的位置
// function infoPosition() {}
}
map.add(this.polyLines);
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 鼠标移入线条执行
polylineMouseOver = e => {
let polyline = e.target;
if (this.lineType == 1) return;
// 生成infoWindow
let infoWindow;
// 警告状态时
const item = e.target.getExtData().lineData;
// console.log("item",item)
if (e.target.getExtData().lineData.alarmState == 1) {
infoWindow = this.lineMouseOver(polyline, lineInfoWindowWarn, item);
} else {
infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
}
infoWindow.open(map, e.lnglat);
console.log(infoWindow);
// 如果是鼠标真正移入，则计算位置，如果不是鼠标真正移入，是人为执行出现infowindow，则不计算位置
console.log("e.originEvent", e.originEvent);
if (e.originEvent) {
// 上方导航的高
const topBar = 81;
// 坐标导航的宽
......@@ -772,25 +808,15 @@ class gaodeMap {
} else {
polyline.setOptions({ strokeColor: "#FF5A67" });
}
infoWindow.setOffset(new AMap.Pixel(X, Y));
} else {
infoWindow.setOffset(new AMap.Pixel(20, -20));
}
this.boxCollision(infoWindow.dom);
this.showInfoWindow = infoWindow;
// const
});
polyline.on("mouseout", e => {
// console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
if (polyline.getExtData().lineData.alarmState == 1) return;
polyline.setOptions({ strokeColor: "#F7FE38" });
// infoWindow.close();
});
// 计算info的位置
// function infoPosition() {}
}
map.add(this.polyLines);
// 缩放地图到合适的视野级别
// map.setFitView();
}
};
lineMouseOver(polyline, lineInfoWindow, item) {
let dom = createPop(lineInfoWindow, {
obj: { a: 123, editorPage: true, ...item, polyline }
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ eb4de9ef
......@@ -137,25 +137,26 @@
<div>
<div class="thead">
<div class="no">序号</div>
<div class="name">设备名称</div>
<div class="code">设备编号</div>
<div class="name">设备名称</div>
</div>
<div
class="deviceList"
:class="{ topActive: index == 0 }"
v-for="(item, index) in item.list"
:key="item.deviceId + `` + index"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@mousedown.stop="panToo(iten, item)"
>
<div class="no">{{ item.no + 1 }}</div>
<div :title="item.deviceName" class="name">
{{ item.deviceName }}
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.code" class="code">{{ iten.code }}</div>
<div :title="iten.deviceName" class="name">
{{ iten.deviceName }}
</div>
<div :title="item.code" class="code">{{ item.code }}</div>
</div>
</div>
</template>
<!-- 值班人员 展示不太一样-->
<templage v-else-if="item.value == 9">
<template v-else-if="item.value == 9">
<div>
<div class="thead">
<div class="no">序号</div>
......@@ -164,21 +165,22 @@
<div
class="deviceList"
:class="{ topActive: index == 0 }"
v-for="(item, index) in item.list"
:key="item.deviceId + `` + index"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@click.stop="panToo(iten, item)"
>
<div class="no">{{ item.no + 1 }}</div>
<div :title="item.userName" class="code">
{{ item.userName }}
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.userName" class="code">
{{ iten.userName }}
</div>
</div>
</div>
</templage>
</template>
<div class="goback">
<div class="minMax">
页数
{{item.nowPage}}/{{item.maxPage}}
{{ item.nowPage }}/{{ item.maxPage }}
</div>
<div class="btn">
<el-button
......@@ -349,9 +351,9 @@ export default {
this.getResource();
// 把组件this传入类
this.gaoMap.view = this;
// 右下角数据 跟值班人员
this.rightBottomData();
this.backFlag = false;
},
......@@ -591,6 +593,7 @@ export default {
// 右下角数据
async rightBottomData() {
this.rightBototmData = [];
await countPipeLength().then((res) => {
// console.log("管道管道管道管道管道管道", res);
if (res.code == 200) {
......@@ -639,17 +642,21 @@ export default {
// 左边的Bar修改值 左边抽屉
leftBarChange(item) {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
const index = this.leftBarNum.indexOf(item.value);
if (index >= 0) {
this.leftBarNum.splice(index, 1);
} else {
this.leftBarNum.push(item.value);
this.panTo(item);
}
// 1,2,3,4,7分别对应数据库type5，1，2，3，4
console.log(this.leftBarNum);
// console.log(this.leftBarNum);
if (this.leftBarNum.includes(1)) {
this.gaoMap.lineShow(true);
// this.panTo(item);
} else {
this.gaoMap.lineShow(false);
}
......@@ -658,35 +665,111 @@ export default {
// this.gaoMap.markerShow();
if (this.leftBarNum.includes(2)) {
this.gaoMap.markerShow(1, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(1, false);
}
if (this.leftBarNum.includes(3)) {
this.gaoMap.markerShow(2, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(2, false);
}
if (this.leftBarNum.includes(4)) {
this.gaoMap.markerShow(3, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(3, false);
}
if (this.leftBarNum.includes(7)) {
this.gaoMap.markerShow(4, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(4, false);
}
if (this.leftBarNum.includes(9)) {
this.gaoMap.markerShow(9, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(9, false);
}
},
panTo(item, bool) {
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(item.list[0].path);
}
}
},
panToo(iten, item) {
// 如果没打对勾，就啥也不干
if(!this.leftBarNum.includes(item.value) ) return
// 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
this.gaoMap.myMap.setZoom(11);
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(iten.path);
}
}
// 当前地图中心点
const { lat, lng } = this.gaoMap.myMap.getCenter();
// 管道是这个方法，因为管道比较特殊
if (item.value == 1) {
this.polylineInfoWindowShow(iten, lat, lng);
} else if (item.value == 9) {
// 工作人员
} else {
// 其他设备
this.diveceInfoWindowShow(iten, lat, lng);
}
},
// 如果是线条出现infowindow
polylineInfoWindowShow(iten, lat, lng) {
const target = this.gaoMap.polyLines.filter((item) => {
return item.getExtData().lineData.pipeId == iten.deviceId;
})[0];
console.log("target", target);
const e = {
target,
lnglat: iten.lnglat,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
this.gaoMap.polylineMouseOver(e);
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.polylineMouseOver(e);
};
},
// 这个是其他设备的infowindow
diveceInfoWindowShow(iten, lat, lng) {
const target = this.gaoMap.markers.filter((item) => {
return item.getExtData().deviceId == iten.deviceId;
})[0];
console.log("target", target);
const e = {
target,
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
this.gaoMap.infoOpen(e);
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.infoOpen(e);
};
},
arrowRightChange(item) {
const index = this.arrowRightNum.indexOf(item.value);
if (index >= 0) {
......@@ -699,7 +782,10 @@ export default {
// 管道储存
pipeClassify(pipeData) {
const pipeArr = pipeData.map((item, index) => {
// console.log( '管道路径',eval(item.coordinates )[0])
return {
lnglat: eval(item.coordinates)[0],
path: eval(item.coordinates)[1],
no: index,
deviceId: item.pipeId,
deviceType: "0",
......@@ -719,6 +805,7 @@ export default {
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
......@@ -733,6 +820,7 @@ export default {
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
......@@ -747,6 +835,7 @@ export default {
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
......@@ -761,6 +850,7 @@ export default {
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
......@@ -768,7 +858,7 @@ export default {
code: item.iotNo,
};
});
console.log("设备", tyxArr, fmjArr, lljArr, ylbArr);
// console.log("设备", tyxArr, fmjArr, lljArr, ylbArr);
this.allList[1] = tyxArr;
this.allList[2] = fmjArr;
this.allList[3] = lljArr;
......@@ -777,6 +867,7 @@ export default {
workerManClassify(workManData) {
const workManArr = workManData.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
userId: item.userId,
userName: item.userName,
......@@ -1260,6 +1351,7 @@ input[type="radio"] {
}
}
.deviceList {
cursor: pointer;
&.topActive {
border-top: 1px solid #cccccc;
}
......@@ -1282,11 +1374,11 @@ input[type="radio"] {
width: 50px;
}
.name {
width: 100px;
// border-right: none;
flex: 1;
}
.code {
border-right: none;
flex: 1;
width: 100px;
}
}
.box {
......@@ -1373,14 +1465,13 @@ input[type="radio"] {
}
}
.goback {
display: flex;
justify-content: space-between;
.minMax{
.minMax {
font-size: 14px;
line-height: 28px;
box-sizing: border-box;
padding-left:3px;
padding-left: 3px;
}
.btn {
text-align: right;
......
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