Skip to content

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

地图模式调整

parent 30ae471f
Show whitespace changes
Inline Side-by-side
Showing with 373 additions and 142 deletions
gassafety-web/src/components/PopWindow/pipelineView.vue
View file @ 554757ba
......@@ -271,7 +271,14 @@ export default {
if (res.code == 200) {
this.dialogVisible = false;
data.pipeId = data.pipeId ? data.pipeId : res.data;
this.lineOkCallBack.call(this.gaodeMap, this.target, data);
this.lineOkCallBack.call(this.gaodeMap, this.target, data,()=>{
const arr= this.gaodeMap.polyLines.map(item=>{
return item.getExtData().lineData
})
console.log("arr===================",arr)
this.gaodeMap.view.pipeClassify(arr)
this.gaodeMap.view.pipeList();
});
if (!this.editForm.pipeId) {
this.gaodeMap.newLineObj = null;
this.gaodeMap.createNewLine();
......
gassafety-web/src/components/PopWindow/pressureGage.vue
View file @ 554757ba
......@@ -214,10 +214,12 @@ export default {
if (valid) {
if (this.form.deviceId != null) {
updateDeviceInfo(this.form).then((response) => {
if (response.code == 200) {
this.dialogVisible = false;
this.map.remove(this.obj);
this.gaoMap.addMarker(this.gaoMap.deviceType, this.form);
this.msgSuccess("修改成功");
}
});
} else {
addDeviceInfo(this.form).then((response) => {
......
gassafety-web/src/utils/gaodeMap.js
View file @ 554757ba
......@@ -35,6 +35,8 @@ class gaodeMap {
myMap = null;
showInfoWindow = null;
view = null;
// 地图移动结束后出现infowindow用的函数
handleInfoWindowOpenFunc = null;
//构造函数中设置中央点默认值
constructor(center) {
......@@ -88,6 +90,10 @@ class gaodeMap {
this.closeInfoWindow();
});
this.myMap.on("moveend", () => {
if (this.handleInfoWindowOpenFunc) {
this.handleInfoWindowOpenFunc();
this.handleInfoWindowOpenFunc = null;
}
// console.log("缩放开始")
if (!this.onceFlag) {
this.onceFlag = true;
......@@ -101,7 +107,9 @@ class gaodeMap {
this.districtBoundaries();
}
panTo(lnglat) {
this.myMap.panTo(lnglat);
}
/**
* 获取map
* @returns {AMap.Map}
......@@ -160,7 +168,7 @@ class gaodeMap {
* @param markerType
* @param lnglats
*/
addMarker(markerType, data) {
addMarker(markerType, data, func) {
let that = this;
that.markerType = markerType;
let infoWindow = new AMap.InfoWindow({
......@@ -189,8 +197,9 @@ class gaodeMap {
DEVICE_TYPE.INSPECTOR != markerType
) {
marker.content = this.getMarketContent(data);
marker.on("mouseover", infoOpen);
marker.on("mouseover", this.infoOpen);
marker.on("mouseout", infoClose);
marker.infoWindow = infoWindow;
marker.setExtData(data);
that.deviceType = markerType;
let editWindow = that.createInfowindow("编辑");
......@@ -287,17 +296,19 @@ class gaodeMap {
map.setStatus(options);
//infoWindow.close(map, e.target.getPosition());
}
function infoOpen(e) {
if (func) {
func();
}
}
// 其他设备
infoOpen = e => {
let options = map.getStatus();
options.scrollWheel = false;
map.setStatus(options);
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
that.markerInfoWindow = infoWindow;
}
}
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.open(map, e.target.getPosition());
this.markerInfoWindow = e.target.infoWindow;
};
/**
* marker添加拖拽事件
*/
......@@ -454,7 +465,7 @@ class gaodeMap {
* 添加折线
* @param path
*/
addPolyline(arr) {
addPolyline(arr, func) {
// this` polyLines = [];
console.log("包装的数组", arr);
for (let i = 0; i < arr.length; i++) {
......@@ -480,8 +491,13 @@ class gaodeMap {
lineData: item
}
});
// 如果是修改后包装，有记录的index 就在原位置插入，如果没有，就直接在最后插入
if (this.changePolineListNum===null) {
this.polyLines.push(polyline);
}else{
this.polyLines.splice(this.changePolineListNum,0,polyline);
this.changePolineListNum=null;
}
// 信息窗体
const dom = createPop(lineInfoWindow, {
obj: { a: 123, editorPage: true, ...item, polyline }
......@@ -510,9 +526,29 @@ class gaodeMap {
this.newLineAddEvent(polyline);
polyline.infoWindow = infoWindow;
//添加事件
polyline.on("mouseover", e => {
polyline.on("mouseover", this.polylineMouseOver);
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "#F7FE38" });
// infoWindow.close();
});
// 计算info的位置
// function infoPosition() {}
}
map.add(this.polyLines);
if (func) {
func();
}
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 鼠标移入管道
polylineMouseOver = e => {
let polyline = e.target;
if (this.lineType == 1) return;
// 上方导航的高
let X = 20,
Y = -20;
if (e.originEvent) {
const topBar = 81;
// 坐标导航的宽
const leftBar = 100;
......@@ -523,10 +559,10 @@ class gaodeMap {
} = document.body;
// 弹出的信息窗口的宽高
const {
offsetWidth: infoWindowWidth,
offsetHeight: infoWindowHeight
} = { offsetWidth: 406, offsetHeight: 316 };
const { offsetWidth: infoWindowWidth, offsetHeight: infoWindowHeight } = {
offsetWidth: 406,
offsetHeight: 316
};
// 鼠标碰到线后的位置
const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
// 鼠标到左边界的距离
......@@ -537,8 +573,7 @@ class gaodeMap {
const offsetBottomY = windowClientHeight - mouseClientY;
const offsetY = mouseClientY - 80 - infoWindowHeight;
let X = 20,
Y = -20;
if (offsetLeftX <= infoWindowWidth) {
console.log("靠左了");
X = 20;
......@@ -554,24 +589,16 @@ class gaodeMap {
Y = -infoWindowHeight - 20;
}
polyline.setOptions({ strokeColor: "#FF5A67" });
infoWindow.setOffset(new AMap.Pixel(X, Y));
infoWindow.open(map, e.lnglat);
}
polyline.infoWindow.setOffset(new AMap.Pixel(X, Y));
polyline.infoWindow.open(map, e.lnglat);
// polyline.infoWindow=infoWindow;
this.showInfoWindow = infoWindow;
this.showInfoWindow = polyline.infoWindow;
// const
});
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "#F7FE38" });
// infoWindow.close();
});
// 计算info的位置
// function infoPosition() {}
}
map.add(this.polyLines);
// 缩放地图到合适的视野级别
// map.setFitView();
}
};
// 创建一条新的线
createNewLine() {
map.remove(this.markerOverlays);
......@@ -767,20 +794,22 @@ class gaodeMap {
}
// 传进组件的会调 点确认的时候调
lineOkCallBack(target, data) {
lineOkCallBack(target, data, func) {
target.polyEditor.close();
const index = this.polyLines.indexOf(target);
// 如果是老线，就要线删除原来的，然后重新包装一遍
if (index >= 0) {
// 记录当前位置的元素
this.changePolineListNum = index;
this.polyLines.splice(index, 1);
}
console.log("data999-=================>传回来的data", data);
this.addPolyline([data]);
this.addPolyline([data], func);
map.remove(target);
// console.log('polyLines',this.polyLines)
}
// 上传服务器用的组件
infoWindowPipelineView(options) {
// const {} =options;
const notice = createPop(pipelineView, {
......
gassafety-web/src/views/device/map/index.vue
View file @ 554757ba
......@@ -94,7 +94,11 @@
</div>
</div> -->
<div ref="drawer" class="drawer" :class="{ back: backFlag,opacity: drawerOpacity }">
<div
ref="drawer"
class="drawer"
:class="{ back: backFlag, opacity: drawerOpacity }"
>
<div class="switch" @click="backFlag = !backFlag">
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" />
......@@ -169,7 +173,7 @@
:class="{ topActive: index == 0 }"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@mousedown.stop="panToo(iten, item)"
@click.stop="panToo(iten, item)"
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.code" class="code">
......@@ -181,31 +185,7 @@
</div>
</div>
</template>
<!-- 值班人员 展示不太一样-->
<template v-else-if="item.value == 9">
<div class="list-wrapper">
<div class="thead">
<div class="no">序号</div>
<div class="code">人员姓名</div>
<div class="name">联系电话</div>
</div>
<div
class="deviceList"
:class="{ topActive: index == 0 }"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@click.stop="panToo(iten, item)"
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.userName" class="code">
{{ iten.userName }}
</div>
<div :title="iten.userPhone" class="name">
{{ iten.userPhone ? iten.userPhone : "-" }}
</div>
</div>
</div>
</template>
<!-- 翻页 -->
<div class="goback">
<div class="btn-w">
......@@ -258,7 +238,7 @@ export default {
backFlag: true,
// 抽屉内的滚动条的高需要赋值赋值
boxHeight: "",
drawerOpacity:false,
drawerOpacity: false,
// 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7],
// 右转箭头的样式active判定
......@@ -273,33 +253,44 @@ export default {
value: 1,
icon: "icon-gd",
label: "管道",
nowPage: 1,
maxPage: 99,
list: [],
},
{
value: 2,
icon: "icon-tyx",
label: "调压箱",
nowPage: 1,
maxPage: 99,
list: [],
},
{
value: 3,
icon: "icon-fmj",
label: "阀门井",
nowPage: 1,
maxPage: 99,
list: [],
},
{
value: 4,
icon: "icon-llj",
label: "流量计",
nowPage: 1,
maxPage: 99,
list: [],
},
{
value: 7,
icon: "icon-ylb",
label: "压力表",
nowPage: 1,
maxPage: 99,
list: [],
},
],
allList: [[], [], [], [], []],
keyWord: "",
};
},
......@@ -308,15 +299,16 @@ export default {
this.boxHeight = document.body.clientHeight - 81;
},
methods: {
initMap() {
async initMap() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
this.gaoMap.view = this;
window.addEventListener("click", this.barClose);
gaoMap.addMouseTool();
gaoMap.searchTips("tipinput");
this.getDeviceInfo();
this.getPipeList();
await this.getDeviceInfo();
await this.getPipeList();
this.pipeList();
},
// 左边的Bar修改值
leftBarChange(item) {
......@@ -327,6 +319,7 @@ export default {
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);
......@@ -476,8 +469,9 @@ export default {
},
getDeviceInfo(queryParams) {
this.loading = true;
getAllDeviceInfo(queryParams).then((response) => {
return getAllDeviceInfo(queryParams).then((response) => {
if (response.code == 200) {
this.deviceClassify(response.data);
for (var i = 0; i < response.data.length; i++) {
if ("1" == response.data[i].deviceType) {
this.gaoMap.addMarker(
......@@ -500,9 +494,10 @@ export default {
});
},
getPipeList(queryParams) {
pipeAllInfoList(queryParams).then((res) => {
return pipeAllInfoList(queryParams).then((res) => {
console.log("管道", res);
if (res.code == 200) {
this.pipeClassify(res.data);
this.gaoMap.addPolyline(res.data);
}
});
......@@ -576,6 +571,199 @@ export default {
this.arrowRightNum.push(item.value);
}
},
// 管道储存
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",
deviceName: item.pipeName,
code: item.pipeCode,
};
});
this.allList[0] = pipeArr;
console.log("管道管道管道管道", pipeArr);
},
// 设备分类存储
deviceClassify(data) {
// 所有调压箱数据
const tyxArr = data
.filter((item) => {
return item.deviceType == 1;
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
deviceName: item.deviceName,
code: item.iotNo,
};
});
// 所有阀门井数据
const fmjArr = data
.filter((item) => {
return item.deviceType == 2;
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
deviceName: item.deviceName,
code: item.iotNo,
};
});
// 所有流量计数据
const lljArr = data
.filter((item) => {
return item.deviceType == 3;
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
deviceName: item.deviceName,
code: item.iotNo,
};
});
// 所有压力表数据
const ylbArr = data
.filter((item) => {
return item.deviceType == 4;
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
deviceName: item.deviceName,
code: item.iotNo,
};
});
// console.log("设备", tyxArr, fmjArr, lljArr, ylbArr);
this.allList[1] = tyxArr;
this.allList[2] = fmjArr;
this.allList[3] = lljArr;
this.allList[4] = ylbArr;
},
// 左边设备翻页
pipeList(pageNum) {
const num = pageNum ? pageNum : 10;
// const { nowPage } = this.changeBtnData[0];
// this.changeBtnData[0].list = this.allList[0].filter((item, index) => {
// return index >= (nowPage - 1) * num && index < nowPage * num;
// });
// console.log(this.changeBtnData[0], this.allList[0]);
console.log("this.allList[0]", this.allList[0]);
this.changeBtnData.forEach((item, index) => {
// console.log("=======", index, this.allList[index]);
if (this.allList[index]?.length > 0) {
console.log("大于0");
item.list = this.allList[index].filter((item2, index2) => {
return (
index2 >= (item.nowPage - 1) * num && index2 < item.nowPage * num
);
});
item.maxPage = Math.ceil(this.allList[index].length / num);
} else {
// 如果为空，就直接把item.list写成[];
item.list = [];
}
});
},
pageBack(item) {
item.nowPage--;
this.pipeList();
},
pageGo(item) {
item.nowPage++;
this.pipeList();
},
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) {
// 工作人员
// this.workerManInfoWindowShow(iten, lat, lng);
} else if (item.value == 8) {
// this.trouleInfoWindowShow(iten, lat, lng);
} 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);
};
},
},
beforeDestroy() {
......@@ -778,37 +966,37 @@ input[type="radio"] {
padding: 0;
margin: 0 0.5rem 0 0;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
background-color: transparent;
background-image: none;
color: #25a5f7;
border-color: #25a5f7;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 1rem;
-webkit-appearance: button;
cursor: pointer;
width: 6rem;
margin: 0 1rem 0 2rem;
}
// .btn {
// display: inline-block;
// font-weight: 400;
// text-align: center;
// white-space: nowrap;
// vertical-align: middle;
// -webkit-user-select: none;
// -moz-user-select: none;
// -ms-user-select: none;
// user-select: none;
// border: 1px solid transparent;
// transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
// border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
// background-color: transparent;
// background-image: none;
// color: #25a5f7;
// border-color: #25a5f7;
// padding: 0.25rem 0.5rem;
// line-height: 1.5;
// border-radius: 1rem;
// -webkit-appearance: button;
// cursor: pointer;
// width: 6rem;
// margin: 0 1rem 0 2rem;
// }
.btn:hover {
color: #fff;
background-color: #25a5f7;
border-color: #25a5f7;
}
// .btn:hover {
// color: #fff;
// background-color: #25a5f7;
// border-color: #25a5f7;
// }
.input-text {
width: 4rem;
margin-right: 1rem;
......@@ -847,7 +1035,7 @@ input[type="radio"] {
background: #fff;
// background: red;
opacity: 0;
&.opacity{
&.opacity {
opacity: 1;
}
&.back {
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 554757ba
......@@ -506,7 +506,7 @@ export default {
},
// 隐患
getMapHiddenTroublelist(queryParams) {
return getMapHiddenTroublelist().then((res) => {
return getMapHiddenTroublelist(queryParams).then((res) => {
console.log(res);
if (res.code == 200) {
this.troubleClassify(res.data);
......@@ -1206,6 +1206,8 @@ export default {
await this.getPipeList({ pipeName: this.keyWord });
// 值班人员
await this.getInspectorLocations({ userName: this.keyWord });
await this.getMapHiddenTroublelist({ troubleName: this.keyWord });
// 设备报警
this.getSelectAlarmDevice();
......@@ -1242,13 +1244,16 @@ export default {
// this.gaoMap.createNewLine();
},
refreshMap() {
// this.changeBtnDataClear();
this.keyWord="";
this.arrowRightNum=[];
this.iconClass = "icon-create";
this.createValue = 0;
this.createLabel = "新建";
this.targetNum = 0;
map.clearMap();
this.initMap();
this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
this.initMap();
},
// 改变工单弹框状态
// openChange(bool) {
......
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