Skip to content

G
gassafety
Commit b897d39d authored by 王晓倩's avatar 王晓倩
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 8baa5dad e78898a0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 541 additions and 177 deletions
gassafety-web/src/assets/styles/transition.scss
View file @ b897d39d
......@@ -19,12 +19,12 @@
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
// transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
// transform: translateX(30px);
}
/* breadcrumb transition */
......@@ -36,7 +36,7 @@
.breadcrumb-enter,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
// transform: translateX(20px);
}
.breadcrumb-move {
......@@ -44,5 +44,5 @@
}
.breadcrumb-leave-active {
position: absolute;
// position: absolute;
}
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ b897d39d
......@@ -59,11 +59,7 @@
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{
obj.inspectionTime
? obj.inspectionTime
: "-"
}}</span>
<span>{{ obj.inspectionTime ? obj.inspectionTime : "-" }}</span>
</div>
</el-col>
......@@ -73,7 +69,7 @@
</div>
<div>
<span>备注信息：</span>
<span>{{ obj.remarks }} </span>
<span v-un-content>{{ obj.remarks }}</span>
</div>
</div>
<template v-if="!obj.editorPage">
......@@ -140,6 +136,19 @@ export default {
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
}
.top {
width: 100%;
height: 51px;
......
gassafety-web/src/components/PopWindow/markerInfoWindow.vue
View file @ b897d39d
......@@ -2,41 +2,51 @@
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{data.deviceName}}</div>
<div class="left text">{{ data.deviceName }}</div>
<div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="map.clearInfoWindow()"/>
<img
src="../../assets/images/closeBtn.png"
alt=""
@click="map.clearInfoWindow()"
/>
</div>
</div>
<!-- 设备信息 -->
<div class="content">
<div class="eq-content display-default">
<div class="text-wrapper">
<div class="eq-text">设备类型：<span>{{title}}</span></div>
<div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div>
<div class="eq-text">所属管道：<span>{{data.pipeName}}</span></div>
<div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
<div class="eq-text">
设备类型：<span>{{ title }}</span>
</div>
<div class="eq-text">
设备型号：<span>{{ data.deviceModel }}</span>
</div>
<div class="eq-text">
所属管道：<span>{{ data.pipeName }}</span>
</div>
<div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span>
</div>
</div>
<div class="pic">
<img v-bind:src="data.iconUrl" alt="" />
</div>
</div>
<!-- 维修人员 -->
<div class="maintain-content">
<div class="maintain-content">
<el-col :span="11">
<div>
<span>安装日期：</span>
<span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</span>
<span>{{
moment(data.installationTime).format("YYYY-MM-DD")
}}</span>
</div>
</el-col>
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{
data.inspectionTime
? data.inspectionTime
: "-"
}}</span>
<span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
</div>
</el-col>
......@@ -46,7 +56,7 @@
</div>
<div>
<span>备注信息：</span>
<span>{{ data.remarks }} </span>
<span v-un-content> {{ data.remarks }}</span>
</div>
</div>
<!-- 报警状态 -->
......@@ -55,24 +65,22 @@
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>-->
</div>
</div>
</template>
<script>
import moment from "moment"
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null
map: null,
},
methods:{
methods: {
moment,
}
},
};
</script>
......@@ -88,6 +96,19 @@ export default {
width: 100%;
height: 51px;
background-color: #053b6a;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
}
.text {
font-weight: 600;
font-size: 16px;
......@@ -199,5 +220,4 @@ export default {
display: flex;
justify-content: space-between;
}
</style>
gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue
View file @ b897d39d
......@@ -128,15 +128,17 @@ export default {
},
close() {
this.obj.polyline.infoWindow.close();
// window底部的数据拦
this.obj.polyline.getExtData().class.view.bottomDataShow = true;
},
deviceMore() {
console.log(this.obj.polyline.getExtData().lineData)
console.log(this.obj.polyline.getExtData().lineData);
this.obj.polyline.getExtData().class.view.$router.push({
path: "/dataMonitoring/realtimedetail",
query: {
deviceId: this.obj.polyline.getExtData().lineData.pipeId,
//这里是传数字
deviceType:"0",
deviceType: "0",
},
});
},
......@@ -151,11 +153,25 @@ export default {
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
position: relative;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
}
.text {
font-weight: 600;
font-size: 16px;
......
gassafety-web/src/components/PopWindowGis/lineInfoWindowWarn.vue
View file @ b897d39d
......@@ -194,12 +194,13 @@ export default {
path: "/dataMonitoring/alarmdetail",
query: {
alarmId: this.obj.polyline.getExtData().lineData.alarmId,
deviceType:"管道"
deviceType: "管道",
},
});
},
close() {
this.obj.polyline.infoWindow.close();
this.obj.polyline.getExtData().class.view.bottomDataShow = true;
},
},
};
......@@ -212,11 +213,24 @@ export default {
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #ff5a67;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #ff5a67;
}
.text {
font-weight: 600;
font-size: 16px;
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ b897d39d
......@@ -4,11 +4,7 @@
<div class="top display-default">
<div class="left text">{{ data.deviceName }}</div>
<div class="right text">
<img
src="../../assets/images/closeBtn.png"
alt=""
@click="map.clearInfoWindow()"
/>
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
</div>
<!-- 设备信息 -->
......@@ -98,6 +94,10 @@ export default {
},
});
},
close() {
this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true;
},
},
};
</script>
......@@ -109,11 +109,24 @@ export default {
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
}
.text {
font-weight: 600;
font-size: 16px;
......
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ b897d39d
......@@ -7,7 +7,7 @@
<img
src="../../assets/images/closeBtn.png"
alt=""
@click="map.clearInfoWindow()"
@click="close"
/>
</div>
</div>
......@@ -137,6 +137,10 @@ export default {
type: "device",
});
},
close(){
this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true;
},
// CreateWorkCallBack(e) {
// // console.log("生成工单后传过来的参数", e);
// // console.log("markerCallBack");
......@@ -181,11 +185,24 @@ export default {
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #ff5a67;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #ff5a67;
}
.text {
font-weight: 600;
font-size: 16px;
......
gassafety-web/src/components/PopWindowGis/troubleInfoWindowWarn.vue
View file @ b897d39d
......@@ -4,11 +4,7 @@
<div class="top display-default">
<div class="left text">{{ data.troubleName }}</div>
<div class="right text">
<img
src="../../assets/images/closeBtn.png"
alt=""
@click="map.clearInfoWindow()"
/>
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
</div>
<!-- 设备信息 -->
......@@ -72,7 +68,9 @@
关联设备：<span>{{ data.deviceName ? data.deviceName : "-" }}</span>
</div>
<div>
设备类型：<span>{{ data.deviceType ? this.deviceType[data.deviceType] : "-" }}</span>
设备类型：<span>{{
data.deviceType ? this.deviceType[data.deviceType] : "-"
}}</span>
</div>
<div v-if="!orderId">
工单编号：<span>{{ data.orderId }}</span>
......@@ -83,11 +81,7 @@
<el-button class="elbtn" type="primary">隐患详情</el-button>
</span>
<span v-if="orderId" @mousedown.stop="createWork">
<el-button
class="elbtn"
type="primary"
>生成工单</el-button
>
<el-button class="elbtn" type="primary">生成工单</el-button>
</span>
<span v-else @mousedown.stop="checkWork">
<el-button class="elbtn" type="primary">查看工单</el-button>
......@@ -121,7 +115,7 @@ export default {
computed: {
orderId() {
// 如果已经生成过工单，就不能再次生成了
console.log("orderId",this.data.orderId)
console.log("orderId", this.data.orderId);
// return this.data.orderId ? false : true;
return this.data.orderId ? false : true;
},
......@@ -131,15 +125,20 @@ export default {
createWork() {
// 控制外层弹框
// console.log(this.data.view.$refs.CreateWork);
this.data.class.view.$refs.CreateWorkTrouble.form.troubleId = this.data.troubleId;
this.data.class.view.$refs.CreateWorkTrouble.form.troubleName = this.data.troubleName;
this.data.class.view.$refs.CreateWorkTrouble.form.troubleType = this.data.troubleType;
this.data.class.view.$refs.CreateWorkTrouble.form.troubleLevel = this.data.troubleLevel;
this.data.class.view.$refs.CreateWorkTrouble.form.troubleId =
this.data.troubleId;
this.data.class.view.$refs.CreateWorkTrouble.form.troubleName =
this.data.troubleName;
this.data.class.view.$refs.CreateWorkTrouble.form.troubleType =
this.data.troubleType;
this.data.class.view.$refs.CreateWorkTrouble.form.troubleLevel =
this.data.troubleLevel;
this.data.class.view.$refs.CreateWorkTrouble.open = true;
this.data.class.view.$refs.CreateWorkTrouble.gaoMap = this.data.class.view.gaoMap;
this.data.class.view.$refs.CreateWorkTrouble.gaoMap =
this.data.class.view.gaoMap;
// 改变外层回调
// this.data.view.CreateWorkCallBack = this.CreateWorkCallBack;
this.data.class.view.troubleObjChange({troubleId:this.data.troubleId});
this.data.class.view.troubleObjChange({ troubleId: this.data.troubleId });
},
// CreateWorkCallBack(e) {
// // console.log("生成工单后传过来的参数", e);
......@@ -153,6 +152,10 @@ export default {
// options.orderId = e;
// marker.setExtData(options);
// },
close() {
this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true;
},
deviceMore() {
this.data.class.view.$router.push({
path: "/riskManagement/hiddenTroubleDetail",
......@@ -185,11 +188,24 @@ export default {
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #e6a23c;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #e6a23c;
}
.text {
font-weight: 600;
font-size: 16px;
......
gassafety-web/src/components/PopWindowGis/workerManInfowindow.vue
View file @ b897d39d
<template>
<div class="wrapper">
<span class="left">姓名: {{ data.userName }}</span>
<span class="right">时间: {{ data.createTime }}</span>
<div class="content">
<span class="left">姓名: {{ data.userName }}</span>
<span class="right">时间: {{ data.createTime }}</span>
</div>
<div class=""></div>
</div>
</template>
......@@ -29,14 +33,26 @@ export default {
padding: 7px 7px 7px 8px;
box-shadow: 0 0 20px -5px #0d4f88;
border-radius: 4px;
span {
word-break: break-all;
display: block;
// vertical-align: top;
// &.right {
// width: 90px;
// padding-left: 4px;
// }
position: relative;
&:before {
content: "";
position: absolute;
left: -10px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #0d4f88;
z-index: -1;
}
.content {
span {
word-break: break-all;
display: block;
}
}
}
</style>
\ No newline at end of file
gassafety-web/src/components/TopNav/index.vue
View file @ b897d39d
......@@ -235,6 +235,7 @@ export default {
.el-menu--horizontal > .el-submenu .el-submenu__title {
height: 50px !important;
line-height: 50px !important;
border:none !important;
margin-left:15px;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
......
gassafety-web/src/directive/permission/index.js
View file @ b897d39d
import hasRole from './hasRole'
import hasPermi from './hasPermi'
import unContent from './unContent'
const install = function(Vue) {
Vue.directive('hasRole', hasRole)
Vue.directive('hasPermi', hasPermi)
Vue.directive('un-content', unContent)
}
if (window.Vue) {
......
gassafety-web/src/directive/permission/unContent.js 0 → 100644
View file @ b897d39d
/**
* 无内容显示-
* Copyright (c) 2021 gassafety
*/
export default {
inserted(el, binding, vnode) {
el.innerHTML = el.innerHTML.replace(/\s+/g, "") ? el.innerHTML : "-";
}
};
gassafety-web/src/utils/gaodeMap.js
View file @ b897d39d
This diff is collapsed.
gassafety-web/src/utils/gaodeMapView.js
View file @ b897d39d
......@@ -53,9 +53,9 @@ class gaodeMap {
markerPassedPolylineInfoWindow = null;
view = null;
handleInfoWindowOpenFunc = null;
onceFlag = false;
用来判断点击左边抽屉列表的时候移动才消失
leftListClick=false;
//构造函数中设置中央点默认值
constructor(center) {
this.markers = [];
......@@ -74,11 +74,14 @@ class gaodeMap {
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
this.myMap = map;
this.myMap.on("click", e => {
this.myMap.on("mousedown", e => {
console.log(e);
// if (this.lineType !=1 || this.lineFlag) return;
if (this.lineType != 1 || this.lineFlag) return;
this.closeInfoWindow();
this.polyLinesColorClear();
this.view.bottomDataShow = true;
if (this.lineType != 1 || this.lineFlag) return;
// 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
if (this.newLineObj) {
vue
......@@ -89,19 +92,22 @@ class gaodeMap {
this.newLineObj = null;
this.lineFlag = false;
this.createNewLine();
//console.log("map点击事件新建");
})
.catch(() => {});
}
// //console.log("抬起来了");
});
// 地图开始平移删除infowindow
this.myMap.on("movestart", () => {
// console.log("地图平移");
this.closeInfoWindow();
if (this.leftListClick) {
console.log("moveStart");
this.closeInfoWindow();
}
// this.closeInfoWindow();
});
// 地图开始缩放删除infowindow
this.myMap.on("zoomstart", () => {
// console.log("缩放开始")
......@@ -259,6 +265,10 @@ class gaodeMap {
marker.data = data;
marker.infoWindow = infoWindow;
marker.on("mouseover", this.wokerManOpen);
marker.on("mouseout", e => {
e.target.infoWindow.close();
});
marker.on("mousedown", e => {
// console.log(data);
that.closeInfoWindow();
......@@ -279,7 +289,7 @@ class gaodeMap {
marker.markerType = markerType;
marker.data = data;
marker.infoWindow = infoWindow;
marker.on("mouseover", this.troubleOpen);
marker.on("mousedown", this.troubleOpen);
marker.setExtData(data);
this.troubles.push(marker);
}
......@@ -292,7 +302,7 @@ class gaodeMap {
) {
// marker.content = this.getMarketContent(data, markerInfoWindow);
marker.infoWindow = infoWindow;
marker.on("mouseover", that.infoOpen);
marker.on("mousedown", that.infoOpen);
marker.on("mouseout", infoClose);
marker.setExtData(data);
that.deviceType = markerType;
......@@ -380,8 +390,10 @@ class gaodeMap {
this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data);
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.open(map, e.target.getPosition());
console.log("e.target.getPosition()", e.target.getExtData());
e.target.infoWindow.setOffset(new AMap.Pixel(24, -38));
e.target.infoWindow.open(map, e.target.getExtData().pos);
console.log("e.target.getPosition()", e.target.getExtData().pos);
console.log("offset", e.target.infoWindow.getOffset());
this.boxCollision(e.target.infoWindow.dom);
// that.addCloneDome(e.target, infoWindow);
// infoWindow.close();
......@@ -699,12 +711,13 @@ class gaodeMap {
marker.passedPolyline = new AMap.Polyline({
map: map,
strokeColor: "#AF5", //线颜色
cursor: "pointer",
strokeWeight: 6 //线宽
});
// removeLineInfoWindow
marker.passedPolyline.on("mouseover", e => {
marker.passedPolyline.on("mousedown", e => {
const dom = createPop(removeLineInfoWindow, {
map: this,
marker
......@@ -717,13 +730,13 @@ class gaodeMap {
// offset: new AMap.Pixel(20, 20),
anchor: "left-top"
});
marker.infoWindow.setOffset(new AMap.Pixel(10, -20));
marker.infoWindow.open(map, e.lnglat);
// infoWindow.on("mousedown",(e)=>{
// e.stopPropagation();
// })
this.markerPassedPolylineInfoWindow = marker.infoWindow;
console.log(e.lnglat);
});
marker.moveMarker.on("moving", function(e) {
......@@ -778,7 +791,6 @@ class gaodeMap {
// //console.log("coordinates",coordinates)
// let path = coordinates ? getArray(coordinates) :[];
// 字符串转二维数组
let path = coordinates ? eval(coordinates) : [];
let polyline = new AMap.Polyline({
path,
......@@ -786,8 +798,9 @@ class gaodeMap {
strokeWeight: 4,
strokeOpacity: 0.9,
zIndex: 50,
bubble: true,
bubble: false,
geodesic: true,
cursor: "pointer",
extData: {
type: "line",
//当前line状态 0:正常状态 1:正在编辑状态
......@@ -801,12 +814,17 @@ class gaodeMap {
// 信息窗体
this.newLineAddEvent(polyline);
//添加事件
polyline.on("mouseover", this.polylineMouseOver);
polyline.on("mousedown", this.polylineMouseOver);
polyline.on("mouseover", () => {
polyline.setOptions({ strokeColor: "#F7FE38" });
});
polyline.on("mouseout", e => {
// console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
if (polyline.getExtData().lineData.alarmState == 1) return;
polyline.setOptions({ strokeColor: "#2EE7E7" });
if (polyline.getExtData().lineData.alarmState == 1) {
polyline.setOptions({ strokeColor: "#ff0000" });
} else {
polyline.setOptions({ strokeColor: "#2EE7E7" });
}
// infoWindow.close();
});
// 计算info的位置
......@@ -830,11 +848,11 @@ class gaodeMap {
} 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) {
if (e.originEvent && 0) {
// 上方导航的高
const topBar = 81;
// 坐标导航的宽
......@@ -889,6 +907,16 @@ class gaodeMap {
this.showInfoWindow = infoWindow;
// const
};
// 所有的线的颜色归位，如果是报警的，就红色，不是就蓝色
polyLinesColorClear() {
this.polyLines.forEach(item => {
if (item.getExtData().lineData.alarmState == 1) {
item.setOptions({ strokeColor: "#ff0000" });
} else {
item.setOptions({ strokeColor: "#2EE7E7" });
}
});
}
lineMouseOver(polyline, lineInfoWindow, item) {
let dom = createPop(lineInfoWindow, {
......@@ -906,11 +934,11 @@ class gaodeMap {
});
let infoWindow = new AMap.InfoWindow({
isCustom: true,
autoMove: false,
autoMove: true,
content: dom.$el,
//信息船体偏移量
offset: new AMap.Pixel(0, 0),
anchor: "left-top"
// offset: new AMap.Pixel(0, 0),
anchor: "left-topr"
});
polyline.infoWindow = infoWindow;
return infoWindow;
......
gassafety-web/src/views/device/map/index.vue
View file @ b897d39d
<template>
<div>
<div style="width: 100vw; height: 100vh" id="container"></div>
<div
:style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
id="container"
></div>
<div class="btn-wrapper">
<div class="myBtn">
<div
......@@ -98,6 +101,7 @@
ref="drawer"
class="drawer"
:class="{ back: backFlag, opacity: drawerOpacity }"
@click.stop="drawerdrawer"
>
<div class="switch" @click="backFlag = !backFlag">
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
......@@ -238,6 +242,7 @@ export default {
backFlag: true,
// 抽屉内的滚动条的高需要赋值赋值
boxHeight: "",
boxWidth: "",
drawerOpacity: false,
// 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7],
......@@ -295,14 +300,21 @@ export default {
};
},
mounted() {
this.onResize();
window.removeEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize);
this.initMap();
this.boxHeight = document.body.clientHeight - 81;
},
methods: {
onResize() {
this.boxHeight = document.body.clientHeight - 81;
this.boxWidth = document.body.clientWidth - 100;
},
async initMap() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
this.gaoMap.view = this;
window.removeEventListener("click", this.barClose);
window.addEventListener("click", this.barClose);
gaoMap.addMouseTool();
gaoMap.searchTips("tipinput");
......@@ -313,7 +325,10 @@ export default {
// 左边的Bar修改值
leftBarChange(item) {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
// 关闭infowindow
this.gaoMap.closeInfoWindow();
// 恢复颜色
this.gaoMap.polyLinesColorClear();
const index = this.leftBarNum.indexOf(item.value);
if (index >= 0) {
this.leftBarNum.splice(index, 1);
......@@ -392,6 +407,7 @@ export default {
// 0是初始，1是新建 2是编辑 3删除
this.gaoMap.lineType = 1;
if (this.gaoMap.newLineObj == null) {
console.log(this.gaoMap.newLineObj);
this.gaoMap.createNewLine();
}
} else {
......@@ -546,8 +562,12 @@ export default {
console.log("window");
this.deviceType = false;
// 关闭当前线条的infowindow
this.gaoMap.closeInfoWindow();
// 如果当前状态只有是编辑跟删除状态才会关闭
if (this.targetNum == 2 || this.targetNum == 3) {
this.gaoMap.closeInfoWindow();
}
// 如果没有选择的时候点window 则高亮消失
console.log(this.targetNum);
if (this.targetNum == 1 && this.iconClass == "icon-create") {
this.targetNum = 0;
}
......@@ -572,9 +592,18 @@ export default {
});
this.initMap();
},
drawerdrawer() {
// 关闭infowindow
this.gaoMap.closeInfoWindow();
// 恢复颜色
this.gaoMap.polyLinesColorClear();
},
// 向右的箭头的动画
arrowRightChange(item) {
// 关闭infowindow
this.gaoMap.closeInfoWindow();
// 恢复颜色
this.gaoMap.polyLinesColorClear();
const index = this.arrowRightNum.indexOf(item.value);
if (index >= 0) {
this.arrowRightNum.splice(index, 1);
......@@ -711,30 +740,40 @@ export default {
panToo(iten, item) {
// 如果没打对勾，就啥也不干
if (!this.leftBarNum.includes(item.value)) return;
// 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
// 所有线条颜色还原
this.gaoMap.leftListClick = true;
this.gaoMap.polyLinesColorClear();
this.gaoMap.myMap.setZoom(11);
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(iten.path);
let path;
if (item.value == 1) {
const a = (Number(iten.lnglat[0]) + Number(iten.path[0])) / 2;
const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
//屏幕移动的位置
path = [a, b - 0.1];
// 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
iten.infoPath = [a.toFixed(6), b.toFixed(6)];
} else {
path = [iten.path[0], iten.path[1] - 0.1];
}
this.gaoMap.panTo(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) => {
......@@ -743,16 +782,29 @@ export default {
console.log("target", target);
const e = {
target,
lnglat: iten.lnglat,
lnglat: iten.infoPath,
};
// console.log(target.getOptions());
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
// console.log(iten.infoPath, lng, lat + 0.1);
console.log(iten.infoPath[0] - lng, iten.infoPath[1] - (lat + 0.1));
// 因为计算问题，误差小于0.00001就没动
if (
iten.infoPath[0] - lng >= 0 &&
iten.infoPath[0] - lng <= 0.00001 &&
iten.infoPath[1] - (lat + 0.1) >= 0 &&
iten.infoPath[1] - (lat + 0.1) <= 0.00001
) {
// console.log('进来了')
this.gaoMap.leftListClick = false;
this.gaoMap.polylineMouseOver(e);
target.setOptions({ strokeColor: "#F7FE38" });
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.polylineMouseOver(e);
target.setOptions({ strokeColor: "#F7FE38" });
};
},
// 这个是其他设备的infowindow
......@@ -766,7 +818,9 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
console.log(iten.path, lng, lat);
if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
console.log("9999999999");
this.gaoMap.infoOpen(e);
return;
}
......@@ -780,6 +834,7 @@ export default {
beforeDestroy() {
console.log("移除window事件");
window.removeEventListener("click", this.barClose);
window.removeEventListener("resize", this.onResize);
},
};
</script>
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ b897d39d
<template>
<div>
<div style="width: 100vw; height: 100vh" id="container"></div>
<div
:style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
id="container"
></div>
<div v-show="false" class="btn-wrapper">
<div class="myBtn">
<div
......@@ -86,6 +89,7 @@
ref="drawer"
class="drawer"
:class="{ back: backFlag, opacity: drawerOpacity }"
@click.stop="drawerClick"
>
<div class="switch" @click="backFlag = !backFlag">
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
......@@ -122,7 +126,7 @@
active: leftBarNum.indexOf(item.value) >= 0,
firstbox: index == 0,
}"
@click.stop="arrowRightChange(item)"
@click="arrowRightChange(item)"
>
<span class="upPic"> 上图 </span>
<div class="left">
......@@ -161,7 +165,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">
......@@ -186,7 +190,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.troubleLevel" class="code">
......@@ -231,7 +235,7 @@
class="btn backPage"
type="mini"
:disabled="item.nowPage == 1"
@click.stop="pageBack(item, index)"
@click="pageBack(item, index)"
icon="el-icon-arrow-left"
/>
<span class="btn-w-num">{{ item.nowPage }}</span>
......@@ -239,7 +243,7 @@
class="btn goPage"
type="mini"
:disabled="item.nowPage == item.maxPage"
@click.stop="pageGo(item, index)"
@click="pageGo(item, index)"
icon="el-icon-arrow-right"
/>
</div>
......@@ -378,6 +382,7 @@ export default {
// 左边抽屉 内嵌scroll盒子的高
boxHeight: "",
boxWidth: "",
drawerOpacity: false,
//抽屉是否收回
backFlag: true,
......@@ -390,8 +395,13 @@ export default {
},
mounted() {
// this.$nextTick(() => {
this.onResize();
window.removeEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize);
this.initMap();
this.boxHeight = document.body.clientHeight - 81;
// });
},
watch: {
changeBtnData: {
......@@ -401,9 +411,15 @@ export default {
},
},
methods: {
onResize() {
this.boxHeight = document.body.clientHeight - 81;
this.boxWidth = document.body.clientWidth;
console.log("挂在");
},
initMap() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
window.removeEventListener("mousedown", this.barClose);
window.addEventListener("mousedown", this.barClose);
gaoMap.addMouseTool();
gaoMap.searchTips("tipinput");
......@@ -730,7 +746,6 @@ 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.panTo(item);
......@@ -785,25 +800,56 @@ export default {
panTo(item, bool) {
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(item.list[0].path);
let path;
// 线条
if (item.value == 1) {
const a =
(Number(item.list[0].lnglat[0]) + Number(item.list[0].path[0])) /
2;
const b =
(Number(item.list[0].lnglat[1]) + Number(item.list[0].path[1])) /
2;
path = [a, b - 0.1];
} else {
path = [item.list[0].path[0], item.list[0].path[1] - 0.1];
}
this.gaoMap.panTo(path);
}
}
},
panToo(iten, item) {
// 如果没打对勾，就啥也不干
if (!this.leftBarNum.includes(item.value)) return;
// 点击的时候允许infowindow消失
this.gaoMap.leftListClick = true;
// 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
// 所有线条颜色还原
this.gaoMap.polyLinesColorClear();
this.gaoMap.myMap.setZoom(11);
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(iten.path);
let path;
if (item.value == 1) {
const a = (Number(iten.lnglat[0]) + Number(iten.path[0])) / 2;
const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
//屏幕移动的位置
path = [a, b - 0.1];
// 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
iten.infoPath = [a.toFixed(6), b.toFixed(6)];
console.log(path);
} else {
path = [iten.path[0], iten.path[1] - 0.1];
}
// const path =
// item.value == 1
// ? [iten.lnglat[0], iten.lnglat[1] - 0.1]
// : [iten.path[0], iten.path[1] - 0.1];
this.gaoMap.panTo(path);
}
}
// 当前地图中心点
const { lat, lng } = this.gaoMap.myMap.getCenter();
// 管道是这个方法，因为管道比较特殊
if (item.value == 1) {
this.polylineInfoWindowShow(iten, lat, lng);
} else if (item.value == 9) {
......@@ -825,16 +871,29 @@ export default {
console.log("target", target);
const e = {
target,
lnglat: iten.lnglat,
lnglat: iten.infoPath,
};
// console.log(target.getOptions());
console.log(iten.infoPath[0] - lng, iten.infoPath[1] - (lat + 0.1));
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
// if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
if (
iten.infoPath[0] - lng >= 0 &&
iten.infoPath[0] - lng <= 0.00001 &&
iten.infoPath[1] - (lat + 0.1) >= 0 &&
iten.infoPath[1] - (lat + 0.1) <= 0.00001
) {
this.gaoMap.leftListClick = false;
this.gaoMap.polylineMouseOver(e);
target.setOptions({ strokeColor: "#F7FE38" });
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.polylineMouseOver(e);
target.setOptions({ strokeColor: "#F7FE38" });
};
},
// 这个是其他设备的infowindow
......@@ -848,7 +907,8 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
this.gaoMap.leftListClick = false;
this.gaoMap.infoOpen(e);
return;
}
......@@ -868,7 +928,8 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
this.gaoMap.leftListClick = false;
this.gaoMap.troubleOpen(e);
return;
}
......@@ -889,7 +950,8 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
this.gaoMap.leftListClick = false;
this.gaoMap.wokerManOpen(e);
return;
}
......@@ -1229,12 +1291,14 @@ export default {
// 新建下拉列表关闭 window点击事件
barClose() {
// 一点windowbottomData显示
this.bottomDataShow = true;
// this.bottomDataShow = true;
// return;
console.log("window");
// 颜色恢复
this.deviceType = false;
// 关闭当前线条的infowindow
this.gaoMap.closeInfoWindow();
// this.gaoMap.closeInfoWindow();
// 如果没有选择的时候点window 则高亮消失
if (this.targetNum == 1 && this.iconClass == "icon-create") {
this.targetNum = 0;
......@@ -1257,7 +1321,7 @@ export default {
item.nowPage = 1;
});
map.clearMap();
this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
this.initMap();
},
......@@ -1313,6 +1377,12 @@ export default {
troubleObjChange(obj) {
this.troubleObj = obj;
},
drawerClick() {
console.log("drawerClick");
this.gaoMap.polyLinesColorClear();
this.gaoMap.closeInfoWindow();
},
},
beforeDestroy() {
......@@ -1320,6 +1390,8 @@ export default {
console.log("移除window事件");
map.clearMap();
window.removeEventListener("mousedown", this.barClose);
window.removeEventListener("resize", this.onResize);
// 关闭scoket
if (this.ws) {
console.log("socket关闭了");
......
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