Skip to content

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

Merge branch 'develop_jzl'

parents 88dd393a 998b0682
Hide whitespace changes
Inline Side-by-side
Showing with 286 additions and 98 deletions
gassafety-web/src/components/PopWindow/pipelineView.vue
View file @ 6b7dc12c
......@@ -189,6 +189,7 @@ export default {
pipeName: "",
pipeType: "1",
pipePressure: "1",
pipeLength:"",
iconUrl: "",
},
dialogVisible: false,
......@@ -235,6 +236,7 @@ export default {
},
created() {
console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
this.editForm.pipeLength=parseInt(this.pipeLength);
if (this.lineData?.pipeId) {
this.editForm = { ...this.lineData };
} else {
......
gassafety-web/src/components/PopWindowGis/workerManView.vue
View file @ 6b7dc12c
......@@ -154,10 +154,10 @@ export default {
},
radioChange(e) {
if (e == 1) {
this.formData.beginTime = moment().format("YYYY-MM-DD HH:mm:ss");
this.formData.endTime = moment()
.add(2, "h")
this.formData.beginTime = moment()
.subtract(2, "h")
.format("YYYY-MM-DD HH:mm:ss");
this.formData.endTime = moment().format("YYYY-MM-DD HH:mm:ss");
} else if (e == 2) {
this.formData.beginTime = moment().format("YYYY-MM-DD HH:mm:ss");
this.formData.endTime = moment()
......
gassafety-web/src/utils/gaodeMap.js
View file @ 6b7dc12c
import createPop from "./createPop";
import { lineColor,mapStyle } from "./mapCommon.js";
import { lineColor, mapStyle } from "./mapCommon.js";
import regulatorBox from "../components/PopWindow/regulatorBox.vue";
import valveWell from "../components/PopWindow/valveWell.vue";
import flowMeter from "../components/PopWindow/flowMeter.vue";
......@@ -43,7 +43,7 @@ class gaodeMap {
leftListClick = false;
//构造函数中设置中央点默认值
constructor(center, latlng,containerId) {
constructor(center, latlng, containerId) {
let container = containerId ? containerId : "container";
this.markers = [];
this.center = center ? center : defaultCenter;
......@@ -57,7 +57,7 @@ class gaodeMap {
// labelzIndex: 110,
pitch: 8,
zoom: 12,
mapStyle,
mapStyle
// mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
......@@ -101,6 +101,24 @@ class gaodeMap {
this.closeInfoWindow();
this.polyLinesColorClear();
});
// 鼠标在地图上移动
this.myMap.on("mousemove", e => {
if (this.mouseTool.overlays.polyline.length > 0) {
const arr = this.mouseTool.overlays.polyline;
const length = parseInt(arr[0].getLength());
if (this.lengthMarker) {
this.myMap.remove(this.lengthMarker);
}
const position = e.lnglat;
this.lengthMarker = new AMap.Marker({
map: map,
position,
content: `<div style="color:#000;font-size:14px;display:inline-block;background:#fff;white-space:nowrap;padding:2px 5px;">
管道长度:<span>${length}米</span><div>`,
offset: new AMap.Pixel(20, 20)
});
}
});
this.myMap.on("moveend", () => {
if (this.handleInfoWindowOpenFunc) {
this.handleInfoWindowOpenFunc();
......@@ -351,7 +369,7 @@ class gaodeMap {
//infoWindow.close(map, e.target.getPosition());
}
if (func) {
if(func != "false"){
if (func != "false") {
func();
}
}
......@@ -611,6 +629,26 @@ class gaodeMap {
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 根据压力过滤管道
pipePressureFilter(pipePressureArr, func) {
this.polyLines.forEach(item => {
const ind =
pipePressureArr.indexOf(+item.getExtData().lineData.pipePressure) >= 0;
// 根据压力过滤出来的显示，过滤掉的管道隐藏
if (ind) {
item.show();
} else {
item.hide();
}
});
// 改变数据类型
const newArr = this.polyLines.map(item => {
return item.getExtData().lineData;
});
if (func) {
func(newArr);
}
}
// 鼠标移入管道
polylineMouseOver = e => {
console.log(e.type);
......@@ -731,13 +769,19 @@ class gaodeMap {
createNewLine() {
map.remove(this.markerOverlays);
console.log("创造一条线了啊");
// 线测距
map.plugin(["AMap.MouseTool"], () => {
this.ruler = new AMap.RangingTool(map);
this.ruler.turnOn();
// console.log(this.ruler.)
});
this.mouseTool.polyline({
// bubbles:false,
strokeWeight: 4,
strokeColor: "#80d8ff",
extData: {
type: "newLine",
//当前line状态 0:正常状态 1:正在编辑状态
//当前line状态 0:正常状态 1:正在编辑状态
isState: 0
}
//同Polyline的Option设置
......@@ -750,6 +794,9 @@ class gaodeMap {
this.lineFlag = false;
if (this.mouserTool) {
this.mouseTool.close();
if (this.lengthMarker) {
this.myMap.remove(this.lengthMarker);
}
}
if (this.newLineObj) {
this.newLineObj.polyEditor.close();
......@@ -814,10 +861,15 @@ class gaodeMap {
});
}
// 隐藏所有管道
lineShow(bool) {
lineShow(bool, pipePressureArr) {
const filterArr = this.polyLines.filter(
item =>
pipePressureArr.indexOf(+item.getExtData().lineData.pipePressure) >= 0
);
// 然后过滤出来的管道才会显示隐藏
bool
? this.polyLines.forEach(item => item.show())
: this.polyLines.forEach(item => item.hide());
? filterArr.forEach(item => item.show())
: filterArr.forEach(item => item.hide());
if (this.newLineObj) {
bool ? this.newLineObj.show() : this.newLineObj.hide();
}
......@@ -918,6 +970,7 @@ class gaodeMap {
});
});
}
// 关闭所有已经上传的线的编辑状态
linePolyEditorAllClose() {
this.polyLines.forEach(item => {
......@@ -980,6 +1033,10 @@ class gaodeMap {
let that = this;
this.markerOverlays = [];
this.mouseTool.on("draw", function(e) {
// 如果正在测量就删掉
if (that.lengthMarker) {
that.myMap.remove(that.lengthMarker);
}
if (e.obj.getExtData().type != "newLine") {
map.remove(that.markerOverlays);
const device = that.createInfowindow("新增");
......@@ -1001,17 +1058,21 @@ class gaodeMap {
e.obj.on("mouseover", function() {
that.mouseTool.close();
});
e.obj.on("mouseout", function() {
that.draw(that.deviceType);
});
that.markerOverlays.push(e.obj);
}
if (e.obj && e.obj.getExtData().type == "newLine") {
console.log("挂上事件");
// that.mouseTool.overlays.polyLine = [];
// 清空当前算距离用的内部数组
that.mouseTool.overlays.polyline = [];
that.newLineAddEvent(e.obj);
// 测距结束
that.ruler.turnOff(true);
// console.log(e.obj)
e.obj.on("mouseover", () => {
e.obj.setOptions({ strokeColor: "#F7FE38" });
});
......@@ -1021,9 +1082,11 @@ class gaodeMap {
// 记录这条线
// console.log(e.obj.getPath().length)
// 如果只有一个点，并没有连成线的时候就不close 大于一个点的时候才执行clse
console.log(that.lineType);
// console.log(that.lineType);
if (e.obj.getPath().length > 1) {
that.newLineObj = e.obj;
that.ruler.turnOff(true);
that.mouseTool.close();
} else {
// that.newLineObj = null;
......@@ -1156,6 +1219,9 @@ class gaodeMap {
closeAddMarker() {
this.mouseTool.close();
map.remove(this.markerOverlays);
if (this.lengthMarker) {
this.myMap.remove(this.lengthMarker);
}
}
// 只上图没功能
onlyLine(obj) {
......
gassafety-web/src/utils/gaodeMapView.js
View file @ 6b7dc12c
......@@ -573,7 +573,7 @@ class gaodeMap {
map: map
});
const html = dom.$el;
console.log("html",html)
console.log("html", html);
dom.remove();
return html;
......@@ -943,6 +943,26 @@ class gaodeMap {
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 根据压力过滤管道
pipePressureFilter(pipePressureArr, func) {
this.polyLines.forEach(item => {
const ind =
pipePressureArr.indexOf(+item.getExtData().lineData.pipePressure) >= 0;
// 根据压力过滤出来的显示，过滤掉的管道隐藏
if (ind) {
item.show();
} else {
item.hide();
}
});
// 改变数据类型
const newArr = this.polyLines.map(item => {
return item.getExtData().lineData;
});
if (func) {
func(newArr);
}
}
// 鼠标移入线条执行
polylineMouseOver = e => {
let polyline = e.target;
......@@ -1262,10 +1282,17 @@ class gaodeMap {
});
}
// 隐藏所有管道
lineShow(bool) {
lineShow(bool, pipePressureArr) {
// 把选中的压力过滤出来
const filterArr = this.polyLines.filter(
item =>
pipePressureArr.indexOf(+item.getExtData().lineData.pipePressure) >= 0
);
// 然后过滤出来的管道才会显示隐藏
console.log(filterArr);
bool
? this.polyLines.forEach(item => item.show())
: this.polyLines.forEach(item => item.hide());
? filterArr.forEach(item => item.show())
: filterArr.forEach(item => item.hide());
if (this.newLineObj) {
bool ? this.newLineObj.show() : this.newLineObj.hide();
}
......@@ -1273,7 +1300,6 @@ class gaodeMap {
markerShow(type, bool) {
this.markers.forEach(item => {
const { deviceType, troubleId } = item.getExtData();
if (type == 8 && troubleId) {
bool ? item.show() : item.hide();
} else if (deviceType == type) {
......
gassafety-web/src/views/device/map/index.vue
View file @ 6b7dc12c
......@@ -110,21 +110,19 @@
<div class="pipePressure">
<!-- <div>管道压力</div> -->
<div class="hasColorBox" :style="{ color: lineColor[`1`] }">
<div :style="{ backgroundColor: lineColor[`1`] }"></div>
低压
</div>
<div class="hasColorBox" :style="{ color: lineColor[`2`] }">
<div :style="{ backgroundColor: lineColor[`2`] }"></div>
中压
</div>
<div class="hasColorBox" :style="{ color: lineColor[`3`] }">
<div :style="{ backgroundColor: lineColor[`3`] }"></div>
次高压
</div>
<div class="hasColorBox" :style="{ color: lineColor[`4`] }">
<div :style="{ backgroundColor: lineColor[`4`] }"></div>
高压
<div
v-for="item in pipeColor"
:key="item.value"
class="hasColorBox"
:style="{ color: lineColor[item.value] }"
>
<div :style="{ backgroundColor: lineColor[item.value] }"></div>
<span
:class="{ active: pipePressureArr.indexOf(item.value) >= 0 }"
@click="pipePressureArrAdd(item.value)"
>
{{ item.name }}
</span>
</div>
</div>
......@@ -266,7 +264,15 @@ export default {
// 1新建，2编辑，3删除,点按钮变色
targetNum: 0,
lineColor,
// 管道根据压力值不同的颜色变化
pipeColor: [
{ value: 1, name: "低压" },
{ value: 2, name: "中压" },
{ value: 3, name: "次高压" },
{ value: 4, name: "高压" },
],
// 管道压力过滤
pipePressureArr: [1, 2, 3, 4],
backFlag: true,
// 卫星与全景地图的切换
mapStyle: true,
......@@ -370,9 +376,9 @@ export default {
console.log(this.leftBarNum);
if (this.leftBarNum.includes(1)) {
this.gaoMap.lineShow(true);
this.gaoMap.lineShow(true, this.pipePressureArr);
} else {
this.gaoMap.lineShow(false);
this.gaoMap.lineShow(false, this.pipePressureArr);
}
// console.log("marks",this.gaoMap.markers)
......@@ -563,6 +569,23 @@ export default {
}
});
},
// 管道压力展示选项过滤
pipePressureArrAdd(num) {
const pipePressIndex = this.pipePressureArr.indexOf(num);
if (pipePressIndex >= 0) {
this.pipePressureArr.splice(pipePressIndex, 1);
} else {
this.pipePressureArr.push(num);
}
// console.log(this.pipePressureArr)
// 过滤左侧管道
this.gaoMap.pipePressureFilter(this.pipePressureArr, this.pipeClassify);
// 管道回第一页
this.changeBtnData[0].nowPage = 1;
// 左侧管道列表改变
this.pipeList();
},
searchClear() {
this.iconClass = "icon-create";
this.createValue = 0;
......@@ -659,18 +682,22 @@ 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",
deviceName: item.pipeName,
code: item.pipeCode,
};
});
const pipeArr = pipeData
.filter((item) => {
return this.pipePressureArr.indexOf(+item.pipePressure) >= 0;
})
.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);
},
......@@ -894,8 +921,8 @@ export default {
window.removeEventListener("resize", this.onResize);
// 离开的时候清除创建的元素
let removeElements = document.getElementsByClassName("el-dialog__wrapper");
const arr = [...removeElements]
for(var i =0;i<arr.length;i++){
const arr = [...removeElements];
for (var i = 0; i < arr.length; i++) {
const item = arr[i];
document.body.removeChild(item);
}
......@@ -1208,6 +1235,23 @@ input[type="radio"] {
width: 10px;
height: 10px;
}
& > span {
display: inline-block;
margin-left: 5px;
height: 25px;
cursor: pointer;
box-sizing: border-box;
&:hover {
color: #7fc0f8;
}
&.active {
// text-shadow: 0 0 10px #2ee7e7, 0 0 10px #2ee7e7, 0 0 15px #2ee7e7,
// 0 0 20px #2ee7e7;
// background-color: #053b6a;
// border-radius: 10px;
border-bottom: 1px solid #2ee7e7;
}
}
}
}
.scroll {
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 6b7dc12c
......@@ -108,21 +108,20 @@
<!-- 管道压力 -->
<div class="pipePressure">
<!-- <div>管道压力</div> -->
<div class="hasColorBox" :style="{ color: lineColor[`1`] }">
<div :style="{ backgroundColor: lineColor[`1`] }"></div>
低压
</div>
<div class="hasColorBox" :style="{ color: lineColor[`2`] }">
<div :style="{ backgroundColor: lineColor[`2`] }"></div>
中压
</div>
<div class="hasColorBox" :style="{ color: lineColor[`3`] }">
<div :style="{ backgroundColor: lineColor[`3`] }"></div>
次高压
</div>
<div class="hasColorBox" :style="{ color: lineColor[`4`] }">
<div :style="{ backgroundColor: lineColor[`4`] }"></div>
高压
<!-- pipeColor -->
<div
v-for="item in pipeColor"
:key="item.value"
class="hasColorBox"
:style="{ color: lineColor[item.value] }"
>
<div :style="{ backgroundColor: lineColor[item.value] }"></div>
<span
:class="{ active: pipePressureArr.indexOf(item.value) >= 0 }"
@click="pipePressureArrAdd(item.value)"
>
{{ item.name }}
</span>
</div>
</div>
<div class="switch" @click="backFlag = !backFlag">
......@@ -365,6 +364,15 @@ export default {
value: "",
operateType: "",
radio1: "",
// 管道根据压力值不同的颜色变化
pipeColor: [
{ value: 1, name: "低压" },
{ value: 2, name: "中压" },
{ value: 3, name: "次高压" },
{ value: 4, name: "高压" },
],
// 管道压力过滤
pipePressureArr: [1, 2, 3, 4],
// 1新建，2编辑，3删除,点按钮变色
targetNum: 0,
// 左边的bar的active判定
......@@ -526,6 +534,23 @@ export default {
this.$refs.audio.play();
}
},
// 管道压力展示选项过滤
pipePressureArrAdd(num) {
const pipePressIndex = this.pipePressureArr.indexOf(num);
if (pipePressIndex >= 0) {
this.pipePressureArr.splice(pipePressIndex, 1);
} else {
this.pipePressureArr.push(num);
}
// console.log(this.pipePressureArr)
// 过滤左侧管道
this.gaoMap.pipePressureFilter(this.pipePressureArr, this.pipeClassify);
// 管道回第一页
this.changeBtnData[0].nowPage = 1;
// 左侧管道列表改变
this.pipeList();
},
initMap() {
let gaoMap = new gaodeMap(process.env.VUE_APP_MAP_CENTER);
this.gaoMap = gaoMap;
......@@ -542,16 +567,16 @@ export default {
// this.backFlag = false;
let marker = new AMap.Marker({
position: [124.736810,45.118425],
position: [124.73681, 45.118425],
map: this.gaoMap.myMap,
offset: new AMap.Pixel(5, 19)
offset: new AMap.Pixel(5, 19),
});
let icon = new AMap.Icon({
opacity: 0.1,
image: require("../../../assets/images/tianqi.png")
image: require("../../../assets/images/tianqi.png"),
});
marker.setIcon(icon);
console.log("==========",marker);
console.log("==========", marker);
},
// 更改卫星图
mapChange(num) {
......@@ -637,6 +662,7 @@ export default {
// console.log("管道", res);
if (res.code == 200) {
this.gaoMap.addPolyline(res.data);
// 根据管道压力过滤
this.pipeClassify(res.data);
}
return res.code;
......@@ -703,14 +729,14 @@ export default {
// 过滤报警管道
const polyLineArr = list.filter((item) => {
return item.deviceType == "0" || item.deviceType=="管道";
return item.deviceType == "0" || item.deviceType == "管道";
});
// 过滤报警的其它设备
const deviceArr = list.filter((item) => {
return item.deviceType != "管道" ;
return item.deviceType != "管道";
});
// 管道
console.log("polyLineArr",polyLineArr)
console.log("polyLineArr", polyLineArr);
if (polyLineArr.length > 0) {
polyLineArr.forEach((item) => {
// 获取循报警设备的id
......@@ -739,15 +765,17 @@ export default {
options.lineData.alarmId = alarmId;
options.lineData.orderId = orderId;
// dealStatus==4 就是取消报警状态
if (endTime || dealStatus==4) {
if (endTime || dealStatus == 4) {
// 判断管道颜色
const pipePressureObj = this.gaoMap.polyLines.filter(item=>{
return options.lineData.alarmId == item.getExtData().lineData.alarmId;
const pipePressureObj = this.gaoMap.polyLines.filter((item) => {
return (
options.lineData.alarmId == item.getExtData().lineData.alarmId
);
})[0];
const {pipePressure} = pipePressureObj.getExtData().lineData;
const { pipePressure } = pipePressureObj.getExtData().lineData;
polyline.setOptions({ strokeColor: lineColor[pipePressure] });
options.lineData.alarmState = 0;
options.lineData.dealStatus=4
options.lineData.dealStatus = 4;
// 报警类型
options.lineData.alarmType = null;
// 报警信息
......@@ -765,10 +793,10 @@ export default {
console.log("管道报警");
}
polyline.setExtData(options);
console.log("dealStatus",dealStatus)
console.log("dealStatus", dealStatus);
const myP = this.allList[0].filter((item) => {
console.log(item.selfData.alarmState);
return item.selfData.alarmState || item.selfData.dealStatus ==4;
return item.selfData.alarmState || item.selfData.dealStatus == 4;
})[0];
// console.log("this.allList[0]", this.allList[0]);
......@@ -971,10 +999,11 @@ export default {
// 1,2,3,4,7分别对应数据库type5，1，2，3，4
// console.log(this.leftBarNum);
if (this.leftBarNum.includes(1)) {
this.gaoMap.lineShow(true);
this.gaoMap.lineShow(true, this.pipePressureArr);
//
// this.panTo(item);
} else {
this.gaoMap.lineShow(false);
this.gaoMap.lineShow(false, this.pipePressureArr);
}
// console.log("marks",this.gaoMap.markers)
......@@ -1235,22 +1264,26 @@ 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",
deviceName: item.pipeName,
code: item.pipeCode,
alarmState: item.alarmState ? item.alarmState : "0",
selfData: item,
};
});
// 根据选择的管道压力过滤一下
const pipeArr = pipeData
.filter((item) => {
return this.pipePressureArr.indexOf(+item.pipePressure) >= 0;
})
.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,
alarmState: item.alarmState ? item.alarmState : "0",
selfData: item,
};
});
this.allList[0] = pipeArr;
console.log("管道", pipeArr);
},
// 设备分类存储
deviceClassify(data) {
......@@ -1530,7 +1563,7 @@ export default {
},
// 搜索
async search() {
this.Clear();
this.searchClear();
map.clearMap();
this.gaoMap.placeSearch.clear();
if (!(!this.gaoMap.searchSelectAdcode && !this.gaoMap.searchSelectName)) {
......@@ -1904,6 +1937,23 @@ input[type="radio"] {
width: 10px;
height: 10px;
}
& > span {
display: inline-block;
margin-left: 5px;
height: 25px;
cursor: pointer;
box-sizing: border-box;
&:hover {
color: #7fc0f8;
}
&.active {
// text-shadow: 0 0 10px #2ee7e7, 0 0 10px #2ee7e7, 0 0 15px #2ee7e7,
// 0 0 20px #2ee7e7;
// background-color: #053b6a;
// border-radius: 10px;
border-bottom: 1px solid #2ee7e7;
}
}
}
}
.scroll {
......
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