Skip to content

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

Merge branch 'jzl'

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