Skip to content

Z
zh-baseversion-project
Commit 949e3e79 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

设备搜索上图功能完成

parent 74e71829
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 91 deletions
zh-baseversion-web/src/components/bigWindow/PipeColor.vue
View file @ 949e3e79
<!--
* @Author: your name
* @Date: 2022-01-26 10:52:10
* @LastEditTime: 2024-07-25 17:33:10
* @LastEditTime: 2024-07-26 10:07:16
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/components/PipeColor.vue
-->
<template>
<div>
<!-- <div class="pipePressure"> -->
<div class="pipePressure">
<!--
<div style="float: left;margin-right: 5px;">
<div class="hasColorBox">
......@@ -32,25 +32,25 @@
监控
</div>
</div> -->
<!-- <div>
<div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
<div :style="{ backgroundColor: pipeColor[`1`] }"></div>
低压管线
</div>
<div class="hasColorBox" :style="{ color: pipeColor[`2`] }">
<div :style="{ backgroundColor: pipeColor[`2`] }"></div>
中压管线
</div>
<div class="hasColorBox" :style="{ color: pipeColor[`3`] }">
<div :style="{ backgroundColor: pipeColor[`3`] }"></div>
次高压管线
</div>
<div class="hasColorBox" :style="{ color: pipeColor[`4`] }">
<div :style="{ backgroundColor: pipeColor[`4`] }"></div>
高压管线
</div>
<div class="">
<div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
<div :style="{ backgroundColor: pipeColor[`1`] }"></div>
低压管线
</div>
</div> -->
<div class="hasColorBox" :style="{ color: pipeColor[`2`] }">
<div :style="{ backgroundColor: pipeColor[`2`] }"></div>
中压管线
</div>
<div class="hasColorBox" :style="{ color: pipeColor[`3`] }">
<div :style="{ backgroundColor: pipeColor[`3`] }"></div>
次高压管线
</div>
<div class="hasColorBox" :style="{ color: pipeColor[`4`] }">
<div :style="{ backgroundColor: pipeColor[`4`] }"></div>
高压管线
</div>
</div>
</div>
<div class="mapChange">
<div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
......@@ -87,11 +87,11 @@ export default {
.pipePressure {
width: 130px;
height: auto;
border: 1px solid #a5a5a5;
// border: 1px solid #a5a5a5;
background-color: #112238b3;
position: fixed;
color: rgb(205, 219, 228);
left: 530px;
right: 400px;
bottom: 50px;
padding: 5px;
font-size: 14px;
......@@ -103,8 +103,9 @@ export default {
margin-bottom: 5px;
& > div {
display: inline-block;
width: 10px;
width: 20px;
height: 10px;
margin-right: 10px;
}
}
}
......
zh-baseversion-web/src/utils/mapClass/config.js
View file @ 949e3e79
/*
* @Author: your name
* @Date: 2022-01-26 10:47:44
* @LastEditTime: 2024-07-19 10:38:10
* @LastEditTime: 2024-07-26 09:54:06
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/config.js
......@@ -9,12 +9,12 @@
import store from "@/store";
export const pipeColor = {
1: "#18FF0F",
2: "#2EE7E7",
3: "#DE67FA",
1: "#179CB7",
2: "#20B156",
3: "#FF9939",
4: "#FF0000",
// 运行监控-巡检巡查的线条颜色
5: "#1890FF",
5: "#AB2A23",
};
export const pipePressure = {
1: "低压",
......
zh-baseversion-web/src/utils/mapClass/map.js
View file @ 949e3e79
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2024-07-25 16:20:02
* @LastEditTime: 2024-07-26 17:12:04
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
......@@ -122,6 +122,7 @@ export class EditorMap {
map: this.map,
strokeWeight: 4,
strokeColor: "#09f",
strokeStyle: "dashed",
path: bounds[i],
});
// polygons.push(polygon);
......@@ -132,6 +133,8 @@ export class EditorMap {
path: bounds[0], // 边界坐标点集合
// fillColor: "#000000", // 填充色
// fillOpacity: 0.8, // 填充透明度
strokeStyle: "dashed",
strokeWeight: 0, // 边框宽度，设为 0 表示没有边框
zIndex: 100, // 显示优先级，越大越靠上层
});
......@@ -476,15 +479,16 @@ export class EditorMap {
// }
});
if (!showBool) {
device.hide();
}
// if (!showBool) {
// device.hide();
// }
// 如果没有有这个公司的数组，就创建，有就直接push
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(device);
// if (!Array.isArray(this.allDevice[iconType])) {
// this.allDevice[iconType] = [];
// }
// this.allDevice[iconType].push(device);
this.searchDevice = device;
// 设备的事件函数
this.deviceEvent(device, compontent);
}
......@@ -500,23 +504,23 @@ export class EditorMap {
// 3是删除操作
}
});
device.on("mouseover", (e) => {
const target = e.target;
const data = target.getExtData();
console.log(data);
const name =
data.nickName ||
data.deviceName ||
data.videoName ||
data.stationName ||
data.time;
target.setLabel({ content: name, direction: "top" });
});
device.on("mouseout", (e) => {
const target = e.target;
const data = target.getExtData();
target.setLabel({ content: "" });
});
// device.on("mouseover", (e) => {
// const target = e.target;
// const data = target.getExtData();
// console.log(data);
// const name =
// data.nickName ||
// data.deviceName ||
// data.videoName ||
// data.stationName ||
// data.time;
// target.setLabel({ content: name, direction: "top" });
// });
// device.on("mouseout", (e) => {
// const target = e.target;
// const data = target.getExtData();
// target.setLabel({ content: "" });
// });
}
/** 点击marker出现infowindow
......@@ -526,6 +530,9 @@ export class EditorMap {
* @return {*}
*/
markerClick(target, compontent) {
// 为了删除搜索上图对象
// this.infowindowClose();
const deviceExtData = target.getExtData();
const { longitude: lng, latitude: lat } = deviceExtData;
......@@ -554,10 +561,10 @@ export class EditorMap {
isCustom: true,
content: this.infowindowComponent.$el,
position: [lng, lat],
// anchor: "top-left",
// offset: [20, -45],
anchor: "middle-left",
offset: [20, -10],
offset: [30, -45],
// anchor: "middle-left",
// offset: [40, -10],
});
this.infowindow.open(this.map);
......@@ -1177,6 +1184,8 @@ export class EditorMap {
* @return {*}
*/
massMarksMarkerClick(data, compontent) {
// 通过搜索上图的数据
this.infowindowClose();
// var detectorUserVO = data.tdetectorUserVO;
// var lng = lnglatArray[0];
// var lat = lnglatArray[1];
......@@ -1198,7 +1207,9 @@ export class EditorMap {
content: this.infowindowComponent.$el,
position: [lng, lat],
anchor: "middle-left",
offset: [20, -10],
// offset: [20, -10],
offset: [20, 0],
});
this.infowindow.open(this.map);
......@@ -1224,12 +1235,16 @@ export class EditorMap {
this.pipeArr[iconType] = [];
}
this.pipeArr[iconType].push(pipe);
this.searchDevice = pipe;
if (pipePressure == 1) {
this.searchDevice.com = mediumConponent;
this.pipeEvent(pipe, mediumConponent);
} else {
this.searchDevice.com = component;
this.pipeEvent(pipe, component);
}
}
// 地图上add管道
addPipeLine(objData, component) {
const { path, pipePressure, iconType } = objData;
......@@ -1293,6 +1308,8 @@ export class EditorMap {
target.setOptions(options);
});
pipe.on("click", (e) => {
// 通过搜索上图的数据
this.infowindowClose();
const target = e.target;
target.lnglat = e.lnglat;
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
......@@ -1308,7 +1325,9 @@ export class EditorMap {
pipeClick(target, compontent) {
const deviceExtData = target.getExtData();
const { lng, lat } = target.lnglat;
console.log(target);
// 创建一个可以控制的组件，将其dom插入infowindow
this.infowindowComponent = this.createInfowindowDom(
this.vue,
......@@ -1352,6 +1371,7 @@ export class EditorMap {
this.pipeArr[1].forEach((pipe) => {
const deviceExtData = pipe.getExtData();
if (deviceExtData.pipeId === id) {
console.log("改");
//设置颜色
const options = pipe.getOptions();
options.strokeColor = color;
......@@ -1361,16 +1381,20 @@ export class EditorMap {
});
this.infowindow.close();
// 通过搜索上图的数据
this.clearSearchDevice();
}
// 设备以及公司过滤
allfilter(companyArr, typeArr) {
console.log(typeArr,this.pipeArr)
console.log(typeArr, this.pipeArr);
for (let pipeItem in this.pipeArr) {
this.pipeArr[pipeItem].forEach((pipe) => {
const data = pipe.getExtData();
console.log(typeArr.indexOf(1))
if (companyArr.indexOf(data.companyType + "") >= 0 && typeArr.indexOf(1)>=0 ) {
console.log(typeArr.indexOf(1));
if (
companyArr.indexOf(data.companyType + "") >= 0 &&
typeArr.indexOf(1) >= 0
) {
pipe.show();
} else {
pipe.hide();
......@@ -1718,4 +1742,37 @@ export class EditorMap {
this.allDevice["14"] = [];
this.infowindowClose();
}
// 搜索的管道被点击
pipeClicked(lnglat) {
this.searchDevice.lnglat = lnglat;
this.map.panTo([lnglat.lng, lnglat.lat]);
this.searchDevice.iconType == 1;
this.pipeClick(this.searchDevice, this.searchDevice.com);
const options = this.searchDevice.getOptions();
options.strokeColor = "blue";
// options.strokeWeight =4;
this.searchDevice.setOptions(options);
}
markerClicked(lnglat,com) {
console.log(this.searchDevice.getExtData())
this.markerClick(this.searchDevice, com);
this.map.panTo(lnglat);
}
clearSearchDevice() {
if (this.searchDevice) {
this.map.remove(this.searchDevice);
this.searchDevice = null;
}
}
// searchPipeClear() {
// const { pipePressure } = this.searchDevice.getExtData();
// const color = pipeColor[pipePressure];
// // 获取当前颜色
// const options = this.searchDevice.getOptions();
// options.strokeColor = color;
// // options.strokeWeight =2;
// this.searchDevice.setOptions(options);
// }
}
zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
View file @ 949e3e79
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2024-07-15 10:26:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2024-07-16 17:33:46
* @LastEditTime: 2024-07-26 09:37:20
* @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -198,7 +198,7 @@ export default {
width: 810px;
height: 50px;
position: fixed;
bottom: 38px;
bottom: 5px;
left: 50%;
margin-left: -405px;
background: url("~@/assets/firstimage/btmA.png") no-repeat bottom center,
......
zh-baseversion-web/src/views/bigWindow/components/Top.vue
View file @ 949e3e79
......@@ -155,27 +155,53 @@ export default {
deviceItemClick(item) {
searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
if (res.code == 200) {
let dataArr = null;
console.log(res);
// 1.阀井
// 2.调压箱
// 3.场站
// 4.居民用户
// 5.商业用户
let data = null;
// console.log(res);
// console.log(item);
// 1.阀井 iconType=3
// 2.调压箱 iconType=2
// 3.场站 iconType=4
// 4.居民用户 6
// 5.商业用户 61
// 6.工业用户
// 7.监控
// 8.餐饮单位液化气用户
// 9.管道
// 7.监控 5
// 8.餐饮单位液化气用户 conType=18
// 9.管道 1
// 1,2,3的时候 是res.data.data才能获取数据，结构为数组。
// 4，5 是 res.data就能获取数据，结构为数组
// 7,8，9的时候，res.data能获取数据，结构为对象
// if (item.type == 1 || item.type == 2 || item.type == 3) {
// dataArr = res.data.data;
// }else if(item.type == 4 || item.type == 5 || item.type == 6){
const type = item.type;
if (type < 4) {
data = res.data.data[0];
// }
// if (dataArr.length == 0) return;
// this.$emit("deviceSearchClick", item, res);
if (type == 1) {
data.iconType = 3;
} else if (type == 2) {
data.iconType = 2;
} else {
data.iconType = 4;
}
} else if (type < 7) {
data = res.data[0];
if (type == 4) {
data.iconType = 6;
} else if (type == 5) {
data.iconType = 61;
} else {
data.iconType = 62;
}
} else {
data = res.data;
if (type == 7) {
data.iconType = 5;
} else if (type == 8) {
data.iconType = 18;
} else {
data.iconType = 1;
}
}
this.$emit("deviceSearchClick", item, data);
}
});
},
......
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ 949e3e79
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2024-07-25 17:36:25
* @LastEditTime: 2024-07-26 17:02:45
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
......@@ -399,13 +399,46 @@ export default {
}),
// 搜索设备上图功能
deviceSearchClick(device, deviceDetail) {
console.log(device, deviceDetail);
// let Company =null;
// if(){
// }
console.log(deviceDetail);
this.map.infowindowClose();
if (deviceDetail.iconType == 1) {
// 管道
const path = eval(deviceDetail.path)[0];
if (path.length == 0) {
this.msgError("经纬度不全，无法展示");
return;
}
const lnglat = { lng: path[0], lat: path[1] };
// this.goMap(getEnterprise, this.addDevice, Company, true);
this.map.addMediumPipeLine(deviceDetail, Line, MediumPressureLineVue);
this.map.pipeClicked(lnglat);
} else {
// 1.阀井 iconType=3
// 2.调压箱 iconType=2
// 3.场站 iconType=4
// 4.居民用户 6
// 5.商业用户 61
// 6.工业用户 62
// 7.监控 5
// 8.餐饮单位液化气用户 conType=18
if (!deviceDetail.longitude || !deviceDetail.latitude) {
this.msgError("经纬度不全，无法展示");
return;
}
const lnglat = [deviceDetail.longitude, deviceDetail.latitude];
const deviceCom = {
2: Device,
3: Device,
4: Cz,
6: User,
61: User,
62: User,
5: VideoView,
18: yhqUser,
};
this.map.addDevice(deviceDetail, deviceCom[deviceDetail.iconType],true);
this.map.markerClicked(lnglat,deviceCom[deviceDetail.iconType]);
}
},
leftRightBarChange() {
const scale = window.innerHeight / 1080;
......@@ -773,7 +806,7 @@ export default {
height: 28px;
line-height: 28px;
text-align: center;
transition: all 0.2s linear;
transition: all 0.2s linear;
&:hover {
background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom
......@@ -816,7 +849,7 @@ export default {
// width: 585px;
// height: 93%;
// height: 1010px;
height: 933px;
height: 970px;
width: 482px;
position: fixed;
......@@ -834,7 +867,9 @@ export default {
.rightbar {
// width: 585px;
// height: 1010px;
height: 933px;
// height: 933px;
height: 970px;
width: 482px;
position: fixed;
top: 50%;
......
zh-baseversion-web/vue.config.js
View file @ 949e3e79
......@@ -36,8 +36,8 @@ module.exports = {
[process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:8905/gassafety`,
target: `http://192.168.2.59:8905/gassafety`,
// target: ` http://36.138.180.82:8905/gassafety`,
// target: `http://192.168.2.59:8905/gassafety`,
target: ` http://36.138.180.82:8905/gassafety`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
......
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