Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gassafety
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
耿迪迪
gassafety
Commits
b897d39d
Commit
b897d39d
authored
Aug 31, 2021
by
王晓倩
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/master'
parents
8baa5dad
e78898a0
Hide whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
541 additions
and
177 deletions
+541
-177
transition.scss
gassafety-web/src/assets/styles/transition.scss
+4
-4
lineInfoWindow.vue
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
+15
-6
markerInfoWindow.vue
gassafety-web/src/components/PopWindow/markerInfoWindow.vue
+41
-21
lineInfoWindow.vue
gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue
+19
-3
lineInfoWindowWarn.vue
...ty-web/src/components/PopWindowGis/lineInfoWindowWarn.vue
+16
-2
markerInfoWindow.vue
...fety-web/src/components/PopWindowGis/markerInfoWindow.vue
+19
-6
markerInfoWindowWarn.vue
...-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
+19
-2
troubleInfoWindowWarn.vue
...web/src/components/PopWindowGis/troubleInfoWindowWarn.vue
+35
-19
workerManInfowindow.vue
...y-web/src/components/PopWindowGis/workerManInfowindow.vue
+26
-10
index.vue
gassafety-web/src/components/TopNav/index.vue
+1
-0
index.js
gassafety-web/src/directive/permission/index.js
+2
-0
unContent.js
gassafety-web/src/directive/permission/unContent.js
+10
-0
gaodeMap.js
gassafety-web/src/utils/gaodeMap.js
+120
-45
gaodeMapView.js
gassafety-web/src/utils/gaodeMapView.js
+53
-25
index.vue
gassafety-web/src/views/device/map/index.vue
+69
-14
index.vue
gassafety-web/src/views/enterprise/mapView/index.vue
+92
-20
No files found.
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
:
4
px
;
box
-
shadow
:
0
px
3
px
6
px
rgba
(
0
,
0
,
0
,
0.16
);
// overflow: hidden;
&
:
before
{
content
:
""
;
position
:
absolute
;
left
:
-
20
px
;
top
:
5
px
;
width
:
0
px
;
height
:
0
px
;
/* border: 20px solid red; */
border
-
top
:
15
px
solid
transparent
;
border
-
bottom
:
15
px
solid
transparent
;
/* border-left: 50px solid greenyellow; */
border
-
right
:
30
px
solid
#
053
b6a
;
}
.
top
{
width
:
100
%
;
height
:
51
px
;
...
...
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
:
4
px
;
box
-
shadow
:
0
px
3
px
6
px
rgba
(
0
,
0
,
0
,
0.16
);
overflow
:
hidden
;
//
overflow: hidden;
.
top
{
width
:
100
%
;
height
:
51
px
;
background
-
color
:
#
053
b6a
;
position
:
relative
;
&
:
before
{
content
:
""
;
position
:
absolute
;
left
:
-
20
px
;
top
:
5
px
;
width
:
0
px
;
height
:
0
px
;
/* border: 20px solid red; */
border
-
top
:
15
px
solid
transparent
;
border
-
bottom
:
15
px
solid
transparent
;
/* border-left: 50px solid greenyellow; */
border
-
right
:
30
px
solid
#
053
b6a
;
}
.
text
{
font
-
weight
:
600
;
font
-
size
:
16
px
;
...
...
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
:
4
px
;
box
-
shadow
:
0
px
3
px
6
px
rgba
(
0
,
0
,
0
,
0.16
);
overflow
:
hidden
;
//
overflow: hidden;
.
top
{
width
:
100
%
;
height
:
51
px
;
background
-
color
:
#
ff5a67
;
&
:
before
{
content
:
""
;
position
:
absolute
;
left
:
-
20
px
;
top
:
5
px
;
width
:
0
px
;
height
:
0
px
;
/* border: 20px solid red; */
border
-
top
:
15
px
solid
transparent
;
border
-
bottom
:
15
px
solid
transparent
;
/* border-left: 50px solid greenyellow; */
border
-
right
:
30
px
solid
#
ff5a67
;
}
.
text
{
font
-
weight
:
600
;
font
-
size
:
16
px
;
...
...
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
...
...
@@ -37,6 +37,8 @@ class gaodeMap {
view
=
null
;
// 地图移动结束后出现infowindow用的函数
handleInfoWindowOpenFunc
=
null
;
// 点击左侧抽屉的时候,改变的flag
leftListClick
=
false
;
//构造函数中设置中央点默认值
constructor
(
center
)
{
...
...
@@ -59,6 +61,8 @@ class gaodeMap {
this
.
myMap
.
on
(
"click"
,
e
=>
{
// if (this.lineType !=1 || this.lineFlag) return;
this
.
closeInfoWindow
();
this
.
polyLinesColorClear
();
if
(
this
.
lineType
!=
1
||
this
.
lineFlag
)
return
;
// 除了这里,还要利用vue页面的window事件辅助,当组件出来的时候,就得利用window事件
...
...
@@ -81,17 +85,23 @@ class gaodeMap {
// 地图开始平移删除infowindow
this
.
myMap
.
on
(
"movestart"
,
()
=>
{
// console.log("地图平移");
this
.
closeInfoWindow
();
// 抽屉点击的时候让infowindow隐藏
if
(
this
.
leftListClick
)
{
console
.
log
(
"moveStart"
)
this
.
closeInfoWindow
();
}
});
// 地图开始缩放删除infowindow
this
.
myMap
.
on
(
"zoomstart"
,
()
=>
{
// console.log("缩放开始")
this
.
closeInfoWindow
();
});
this
.
myMap
.
on
(
"moveend"
,
()
=>
{
if
(
this
.
handleInfoWindowOpenFunc
)
{
this
.
handleInfoWindowOpenFunc
();
this
.
handleInfoWindowOpenFunc
=
null
;
// 移动结束之后,leftListClick变成false
this
.
leftListClick
=
false
;
}
// console.log("缩放开始")
if
(
!
this
.
onceFlag
)
{
...
...
@@ -198,6 +208,7 @@ class gaodeMap {
)
{
marker
.
content
=
this
.
getMarketContent
(
data
);
marker
.
on
(
"mouseover"
,
this
.
infoOpen
);
marker
.
on
(
"click"
,
this
.
infoOpen
);
marker
.
on
(
"mouseout"
,
infoClose
);
marker
.
infoWindow
=
infoWindow
;
marker
.
setExtData
(
data
);
...
...
@@ -313,6 +324,13 @@ class gaodeMap {
}
// 其他设备
infoOpen
=
e
=>
{
// 如果是无状态并且鼠标mouseover
if
(
this
.
view
.
targetNum
==
0
&&
e
.
type
==
"mouseover"
)
{
return
;
}
// 如果是新建状态 不出弹框
if
(
this
.
view
.
targetNum
==
1
)
return
;
console
.
log
(
e
.
target
)
let
options
=
map
.
getStatus
();
options
.
scrollWheel
=
false
;
map
.
setStatus
(
options
);
...
...
@@ -489,11 +507,12 @@ class gaodeMap {
let
path
=
coordinates
?
eval
(
coordinates
)
:
[];
let
polyline
=
new
AMap
.
Polyline
({
path
,
strokeColor
:
"#
F7FE38
"
,
strokeColor
:
"#
2EE7E7
"
,
strokeWeight
:
4
,
strokeOpacity
:
0.9
,
zIndex
:
50
,
bubble
:
true
,
cursor
:
"pointer"
,
bubble
:
false
,
geodesic
:
true
,
extData
:
{
type
:
"line"
,
...
...
@@ -527,7 +546,7 @@ class gaodeMap {
});
let
infoWindow
=
new
AMap
.
InfoWindow
({
isCustom
:
true
,
autoMove
:
fals
e
,
autoMove
:
tru
e
,
content
:
dom
.
$el
,
//信息船体偏移量
offset
:
new
AMap
.
Pixel
(
0
,
0
),
...
...
@@ -538,8 +557,9 @@ class gaodeMap {
polyline
.
infoWindow
=
infoWindow
;
//添加事件
polyline
.
on
(
"mouseover"
,
this
.
polylineMouseOver
);
polyline
.
on
(
"click"
,
this
.
polylineMouseOver
);
polyline
.
on
(
"mouseout"
,
e
=>
{
polyline
.
setOptions
({
strokeColor
:
"#
F7FE38
"
});
polyline
.
setOptions
({
strokeColor
:
"#
2EE7E7
"
});
// infoWindow.close();
});
// 计算info的位置
...
...
@@ -554,8 +574,16 @@ class gaodeMap {
}
// 鼠标移入管道
polylineMouseOver
=
e
=>
{
console
.
log
(
e
.
type
);
let
polyline
=
e
.
target
;
if
(
this
.
lineType
==
1
)
return
;
// 如果是无状态或者是新建并且是鼠标移入
if
(
this
.
view
.
targetNum
==
0
&&
e
.
type
==
"mouseover"
)
{
polyline
.
setOptions
({
strokeColor
:
"#F7FE38"
});
return
;
}
// 当选择的是新建的时候,线是点不了的
if
(
this
.
lineType
==
1
||
this
.
view
.
targetNum
==
1
)
return
;
// 上方导航的高
let
X
=
20
,
Y
=
-
20
;
...
...
@@ -599,20 +627,60 @@ class gaodeMap {
console
.
log
(
"靠下了"
);
Y
=
-
infoWindowHeight
-
20
;
}
polyline
.
setOptions
({
strokeColor
:
"#FF5A67"
});
X
=
23
;
Y
=
-
20
;
// polyline.setOptions({ strokeColor: "#FF5A67" });
// 浮动的时候为新建时,不变色
if
(
this
.
view
.
targetNum
!=
1
)
{
polyline
.
setOptions
({
strokeColor
:
"#F7FE38"
});
}
}
polyline
.
infoWindow
.
setOffset
(
new
AMap
.
Pixel
(
X
,
Y
));
polyline
.
infoWindow
.
open
(
map
,
e
.
lnglat
);
// 如果是戍边浮动出现infowindow 就让窗口在固定的位置出现,这样就不显得乱了
if
(
e
.
type
==
"mouseover"
)
{
const
coordinates
=
polyline
.
getPath
().
map
(
item
=>
{
return
[
item
.
lng
,
item
.
lat
]
})
// const { coordinates } = polyline.getExtData().lineData;
// 计算出前两个点的中点
const
arr1
=
coordinates
[
0
];
const
arr2
=
coordinates
[
1
];
const
a
=
this
.
centerNum
(
arr1
[
0
],
arr2
[
0
]);
const
b
=
this
.
centerNum
(
arr1
[
1
],
arr2
[
1
]);
const
a2
=
this
.
centerNum
(
a
,
arr1
[
0
]);
const
b2
=
this
.
centerNum
(
b
,
arr1
[
1
]);
polyline
.
infoWindow
.
open
(
map
,
[
a2
,
b2
]);
}
else
{
console
.
log
(
"windowOpen"
);
// 变成异步,最后执行
polyline
.
infoWindow
.
open
(
map
,
e
.
lnglat
);
// setTimeout(() => {
// console.log(polyline.infoWindow.getIsOpen())
// polyline.infoWindow.open(map, e.lnglat);
// }, 0);
// console.log(polyline.infoWindow.)
}
// polyline.infoWindow=infoWindow;
this
.
showInfoWindow
=
polyline
.
infoWindow
;
// const
};
polyLinesColorClear
()
{
this
.
polyLines
.
forEach
(
item
=>
{
item
.
setOptions
({
strokeColor
:
"#2EE7E7"
});
});
}
centerNum
(
num1
,
num2
)
{
return
(
Number
(
num1
)
+
Number
(
num2
))
/
2
;
}
// 创建一条新的线
createNewLine
()
{
map
.
remove
(
this
.
markerOverlays
);
console
.
log
(
"创造一条线了啊"
);
this
.
mouseTool
.
polyline
({
// bubbles:false,
strokeWeight
:
4
,
...
...
@@ -641,6 +709,7 @@ class gaodeMap {
}
// 新建line增加编辑以及右键菜单
closeInfoWindow
()
{
this
.
showInfoWindow
&&
this
.
showInfoWindow
.
close
();
this
.
markerInfoWindow
&&
this
.
markerInfoWindow
.
close
();
}
...
...
@@ -650,6 +719,7 @@ class gaodeMap {
// obj.polyEditor.on('adjust',(e)=>{
// console.log("addnode")
// })
obj
.
on
(
"mousedown"
,
e
=>
{
console
.
log
(
e
.
originEvent
);
console
.
log
(
"lineType"
,
this
.
lineType
);
...
...
@@ -717,28 +787,24 @@ class gaodeMap {
const
{
lineData
:
{
pipeName
,
deviceInfoList
}
}
=
obj
.
getExtData
();
console
.
log
(
"deviceInfoList"
,
deviceInfoList
);
var
devices
=
" "
;
for
(
var
i
=
0
;
i
<
deviceInfoList
.
length
;
i
++
)
{
var
item
=
deviceInfoList
[
i
];
devices
=
devices
+
item
.
deviceName
+
" "
;
let
devices
=
" "
;
let
content
;
if
(
deviceInfoList
)
{
for
(
var
i
=
0
;
i
<
deviceInfoList
.
length
;
i
++
)
{
var
item
=
deviceInfoList
[
i
];
devices
=
devices
+
item
.
deviceName
+
" "
;
}
content
=
`请确认是否删除管道名称为 +
${
pipeName
}
+的数据项,该管道下包含的设备(
${
devices
}
)将一并删除`
;
}
else
{
content
=
`请确认是否删除管道名称为
${
pipeName
}
的数据项,该管道下不包含任何设备`
;
}
vue
.
$confirm
(
'请确认是否删除管道名称为"'
+
pipeName
+
'"的数据项,该管道下包含的设备('
+
devices
+
")将一并删除"
,
"提示"
,
{
// confirmButtonText: "确定",
// cancelButtonText: "取消",
type
:
"warning"
// center: true
}
)
.
$confirm
(
content
,
"提示"
,
{
// confirmButtonText: "确定",
// cancelButtonText: "取消",
type
:
"warning"
// center: true
})
.
then
(()
=>
{
const
{
lineData
}
=
obj
.
getExtData
();
// updatePipe
...
...
@@ -751,30 +817,33 @@ class gaodeMap {
// 如果是老线,就要线删除原来的,然后重新包装一遍
if
(
index
>=
0
)
{
this
.
polyLines
.
splice
(
index
,
1
);
// 删除管道的时候,与管道管理额的设备也要删除
for
(
var
i
=
0
;
i
<
deviceInfoList
.
length
;
i
++
)
{
const
item
=
deviceInfoList
[
i
];
for
(
let
j
=
0
;
j
<
this
.
markers
.
length
;
j
++
)
{
const
item2
=
this
.
markers
[
j
];
if
(
item
.
deviceId
==
item2
.
getExtData
().
deviceId
)
{
map
.
remove
(
item2
);
const
ind
=
this
.
markers
.
indexOf
(
item2
);
if
(
ind
>=
0
)
{
this
.
markers
.
splice
(
ind
,
1
);
// 删除管道的时候,与管道管理额的设备也要删除,
// 如果管道存在下级设备,也一并删除
if
(
deviceInfoList
)
{
for
(
var
i
=
0
;
i
<
deviceInfoList
.
length
;
i
++
)
{
const
item
=
deviceInfoList
[
i
];
for
(
let
j
=
0
;
j
<
this
.
markers
.
length
;
j
++
)
{
const
item2
=
this
.
markers
[
j
];
if
(
item
.
deviceId
==
item2
.
getExtData
().
deviceId
)
{
map
.
remove
(
item2
);
const
ind
=
this
.
markers
.
indexOf
(
item2
);
if
(
ind
>=
0
)
{
this
.
markers
.
splice
(
ind
,
1
);
}
break
;
}
break
;
}
}
}
map
.
remove
(
obj
);
// 列表变化
const
pipeArr
=
this
.
polyLines
.
map
(
item
=>
{
const
pipeArr
=
this
.
polyLines
.
map
(
item
=>
{
return
item
.
getExtData
().
lineData
;
})
})
;
const
markerArr
=
this
.
markers
.
map
(
item
=>
{
return
item
.
getExtData
();
});
this
.
view
.
pipeClassify
(
pipeArr
)
this
.
view
.
pipeClassify
(
pipeArr
)
;
this
.
view
.
deviceClassify
(
markerArr
);
this
.
view
.
pipeList
();
}
...
...
@@ -809,7 +878,8 @@ class gaodeMap {
item
.
setExtData
(
opstions
);
let
attr
=
item
.
getOptions
();
attr
.
strokeColor
=
"#F7FE38"
;
// attr.strokeColor = "#F7FE38";
attr
.
strokeColor
=
"#2EE7E7"
;
item
.
setOptions
(
attr
);
});
}
...
...
@@ -875,7 +945,6 @@ class gaodeMap {
device
.
form
.
longitude
=
postion
.
lng
;
device
.
form
.
latitude
=
postion
.
lat
;
}
device
.
show
();
});
e
.
obj
.
on
(
"mouseover"
,
function
()
{
...
...
@@ -892,6 +961,12 @@ class gaodeMap {
if
(
e
.
obj
&&
e
.
obj
.
getExtData
().
type
==
"newLine"
)
{
console
.
log
(
"挂上事件"
);
that
.
newLineAddEvent
(
e
.
obj
);
e
.
obj
.
on
(
"mouseover"
,
()
=>
{
e
.
obj
.
setOptions
({
strokeColor
:
"#F7FE38"
});
});
e
.
obj
.
on
(
"mouseout"
,
()
=>
{
e
.
obj
.
setOptions
({
strokeColor
:
"#80d8ff"
});
});
// 记录这条线
// console.log(e.obj.getPath().length)
// 如果只有一个点,并没有连成线的时候就不close 大于一个点的时候才执行clse
...
...
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
(
"mouse
over
"
,
this
.
troubleOpen
);
marker
.
on
(
"mouse
down
"
,
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
(
"mouse
over
"
,
that
.
infoOpen
);
marker
.
on
(
"mouse
down
"
,
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
(
"mouse
over
"
,
e
=>
{
marker
.
passedPolyline
.
on
(
"mouse
down
"
,
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
:
tru
e
,
bubble
:
fals
e
,
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
:
fals
e
,
autoMove
:
tru
e
,
content
:
dom
.
$el
,
//信息船体偏移量
offset
:
new
AMap
.
Pixel
(
0
,
0
),
anchor
:
"left-top"
//
offset: new AMap.Pixel(0, 0),
anchor
:
"left-top
r
"
});
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关闭了"
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment