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
97f21ca9
Commit
97f21ca9
authored
Jul 27, 2021
by
纪泽龙
Browse files
Options
Browse Files
Download
Plain Diff
合并到jzl
parents
0b91e536
24aa3dcc
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
517 additions
and
305 deletions
+517
-305
pipe.js
gassafety-web/src/api/device/pipe.js
+9
-4
pipelineView.vue
gassafety-web/src/components/PopWindow/pipelineView.vue
+79
-29
gaodeMap.js
gassafety-web/src/utils/gaodeMap.js
+162
-92
gassafety.js
gassafety-web/src/utils/gassafety.js
+171
-128
index.vue
gassafety-web/src/views/enterprise/map/index.vue
+96
-52
No files found.
gassafety-web/src/api/device/pipe.js
View file @
97f21ca9
...
@@ -9,6 +9,7 @@ export function listPipe(query) {
...
@@ -9,6 +9,7 @@ export function listPipe(query) {
})
})
}
}
// 查询管道信息列表
// 查询管道信息列表
export
function
pipeAllInfoList
(
query
)
{
export
function
pipeAllInfoList
(
query
)
{
return
request
({
return
request
({
...
@@ -18,11 +19,15 @@ export function pipeAllInfoList(query) {
...
@@ -18,11 +19,15 @@ export function pipeAllInfoList(query) {
})
})
}
}
// 查询管道信息详细
export
function
getPipe
(
pipeId
)
{
// getAllDeviceInfo
export
function
getAllDevice
(
data
)
{
return
request
({
return
request
({
url
:
'/device/pipe/'
+
pipeId
,
url
:
'/device/pipe/getAllDeviceInfo'
,
method
:
'get'
method
:
'post'
,
data
:
data
})
})
}
}
...
...
gassafety-web/src/components/PopWindow/pipelineView.vue
View file @
97f21ca9
...
@@ -4,8 +4,14 @@
...
@@ -4,8 +4,14 @@
:visible
.
sync=
"dialogVisible"
:visible
.
sync=
"dialogVisible"
:before-close=
"handleClose"
:before-close=
"handleClose"
>
>
<el-row>
<el-row
>
<el-form
ref=
"editForm"
:model=
"editForm"
label-width=
"120px"
size=
"mini"
>
<el-form
:rules=
"rules"
ref=
"editForm"
:model=
"editForm"
label-width=
"120px"
size=
"mini"
>
<el-col>
<el-col>
<el-form-item
v-show=
"false"
label=
"管道id"
prop=
"pipeId"
>
<el-form-item
v-show=
"false"
label=
"管道id"
prop=
"pipeId"
>
<el-input
<el-input
...
@@ -44,8 +50,8 @@
...
@@ -44,8 +50,8 @@
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col>
<el-col>
<el-form-item
label=
"管道所在地址"
prop=
"
iconUrl
"
>
<el-form-item
label=
"管道所在地址"
prop=
"
pipeAddr
"
>
<el-input
v-model=
"editForm.
iconUrl
"
></el-input>
<el-input
v-model=
"editForm.
pipeAddr
"
></el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col>
<el-col>
...
@@ -78,7 +84,7 @@
...
@@ -78,7 +84,7 @@
<!--
select
-->
<!--
select
-->
<
el
-
radio
-
group
v
-
model
=
"editForm.pipePressure"
>
<
el
-
radio
-
group
v
-
model
=
"editForm.pipePressure"
>
<!--
1
低压,
2
中压,
3
次高压,
4
高压
-->
<!--
1
低压,
2
中压,
3
次高压,
4
高压
-->
<
el
-
radio
label
=
"1"
>
低
押
<
/el-radio
>
<
el
-
radio
label
=
"1"
>
低
压
<
/el-radio
>
<
el
-
radio
label
=
"2"
>
中压
<
/el-radio
>
<
el
-
radio
label
=
"2"
>
中压
<
/el-radio
>
<
el
-
radio
label
=
"3"
>
次高压
<
/el-radio
>
<
el
-
radio
label
=
"3"
>
次高压
<
/el-radio
>
<
el
-
radio
label
=
"4"
>
高压
<
/el-radio
>
<
el
-
radio
label
=
"4"
>
高压
<
/el-radio
>
...
@@ -86,20 +92,21 @@
...
@@ -86,20 +92,21 @@
<
/el-form-item
>
<
/el-form-item
>
<
/el-col
>
<
/el-col
>
<
el
-
col
>
<
el
-
col
>
<
el
-
form
-
item
label
=
"上传图片"
prop
=
""
>
<
el
-
form
-
item
label
=
"上传图片"
prop
=
"
iconUrl
"
>
<
MyFileUpload
<
MyFileUpload
listType
=
"picture-card"
listType
=
"picture-card"
@
resFun
=
"fileFinshed"
@
resFun
=
"fileFinshed"
@
remove
=
"listRemove"
@
remove
=
"listRemove"
:
fileArr
=
"fileArr"
:
fileArr
=
"fileArr"
/>
/>
<
el
-
input
v
-
show
=
"false"
disabled
v
-
model
=
"editForm.iconUrl"
><
/el-input
>
<
/el-form-item
>
<
/el-form-item
>
<!--
<
el
-
form
-
item
v
-
show
=
"false"
label
=
"设备图片路径"
prop
=
"iconUrl"
>
-->
<!--
<
/el-form-item> --
>
<
/el-col
>
<
/el-col
>
<
el
-
col
>
<!--
<
el
-
col
>
<
el
-
form
-
item
v
-
show
=
"false"
label
=
"设备图片路径"
prop
=
"url"
>
<
el
-
input
disabled
v
-
model
=
"editForm.url"
><
/el-input
>
<
/el-col> --
>
<
/el-form-item
>
<
/el-col
>
<
el
-
col
>
<
el
-
col
>
<
el
-
form
-
item
label
=
"安装日期"
prop
=
"installationTime"
>
<
el
-
form
-
item
label
=
"安装日期"
prop
=
"installationTime"
>
<
el
-
col
:
span
=
"11"
>
<
el
-
col
:
span
=
"11"
>
...
@@ -141,6 +148,8 @@
...
@@ -141,6 +148,8 @@
<
script
>
<
script
>
import
MyFileUpload
from
"@/components/MyFileUpload"
;
import
MyFileUpload
from
"@/components/MyFileUpload"
;
import
{
addPipe
,
updatePipe
}
from
"@/api/device/pipe.js"
;
import
{
addPipe
,
updatePipe
}
from
"@/api/device/pipe.js"
;
import
{
getString
}
from
"@/utils/gassafety.js"
;
import
moment
from
"moment"
;
export
default
{
export
default
{
props
:
{
props
:
{
lineData
:
{
lineData
:
{
...
@@ -170,11 +179,42 @@ export default {
...
@@ -170,11 +179,42 @@ export default {
// isShow: false,
// isShow: false,
fileArr
:
[],
fileArr
:
[],
editForm
:
{
editForm
:
{
pipeName
:
""
,
pipeType
:
"1"
,
pipeType
:
"1"
,
pipePressure
:
"1"
,
pipePressure
:
"1"
,
u
rl
:
""
,
iconU
rl
:
""
,
}
,
}
,
dialogVisible
:
false
,
dialogVisible
:
false
,
rules
:
{
pipeName
:
[
{
required
:
true
,
message
:
"请输入管道名称"
,
trigger
:
"blur"
}
,
//
{
min
:
3
,
max
:
5
,
message
:
"长度在 3 到 5 个字符"
,
trigger
:
"blur"
}
,
],
pipeCode
:
[
{
required
:
true
,
message
:
"请输入管道编号"
,
trigger
:
"blur"
}
,
],
pipeLength
:
[
{
required
:
true
,
message
:
"请输入管道长度"
,
trigger
:
"blur"
}
,
],
pipeAddr
:
[
{
required
:
true
,
message
:
"请输入管道所在地址"
,
trigger
:
"blur"
}
,
],
pipeType
:
[
{
required
:
true
,
message
:
"请选择管道类型"
,
trigger
:
"blur"
}
,
],
pipePressure
:
[
{
required
:
true
,
message
:
"请选择管道压力"
,
trigger
:
"blur"
}
,
],
iconUrl
:
[{
required
:
true
,
message
:
"请上传骨片"
,
trigger
:
"change"
}
],
installationTime
:
[
{
// type: "date",
required
:
true
,
message
:
"请选择日期"
,
trigger
:
"change"
,
}
,
],
}
,
}
;
}
;
}
,
}
,
created
()
{
created
()
{
...
@@ -182,25 +222,33 @@ export default {
...
@@ -182,25 +222,33 @@ export default {
if
(
this
.
lineData
?.
pipeId
)
{
if
(
this
.
lineData
?.
pipeId
)
{
this
.
editForm
=
{
...
this
.
lineData
}
;
this
.
editForm
=
{
...
this
.
lineData
}
;
}
}
this
.
editForm
.
coordinates
=
this
.
lnglatsArr
;
this
.
editForm
.
coordinates
=
getString
(
this
.
lnglatsArr
)
;
// 如果有图片路径就赋显,如果没有就啥也没有
// 如果有图片路径就赋显,如果没有就啥也没有
this
.
fileArr
=
this
.
editForm
.
url
!=
""
?
[{
url
:
this
.
editForm
.
u
rl
}
]
:
[];
this
.
fileArr
=
this
.
lineData
.
pipeId
?
[{
url
:
this
.
editForm
.
iconU
rl
}
]
:
[];
}
,
}
,
methods
:
{
methods
:
{
mouseup
(){
console
.
log
(
'组件mouseup'
)
}
,
ok
()
{
ok
()
{
// console.log(this.editForm.pipeId);
this
.
$refs
.
editForm
.
validate
((
valid
)
=>
{
// if(this.editForm.pipeId)
{
if
(
valid
){
// console.log("更改")
const
data
=
{
...
this
.
editForm
}
;
//
}
else
{
data
.
installationTime
=
moment
(
this
.
editForm
.
installationTime
).
format
(
// console.log("新增")
"YYYY-MM-DD HH:mm:ss"
//
}
);
const
data
=
{
...
this
.
editForm
}
;
console
.
log
(
"data"
,
data
);
console
.
log
(
"data"
,
data
);
console
.
log
(
this
.
editForm
.
pipeId
);
console
.
log
(
this
.
editForm
.
pipeId
);
this
.
requeset
(
this
.
editForm
.
pipeId
,
data
).
then
((
res
)
=>
{
this
.
requeset
(
this
.
editForm
.
pipeId
).
then
((
res
)
=>
{
// 改变this指向,传回去target ,传回去data
this
.
dialogVisible
=
false
;
if
(
res
.
code
==
200
)
{
this
.
lineOkCallBack
.
call
(
this
.
gaodeMap
,
this
.
target
);
this
.
dialogVisible
=
false
;
}
);
data
.
pipeId
=
data
.
pipeId
?
data
.
pipeId
:
res
.
data
;
this
.
lineOkCallBack
.
call
(
this
.
gaodeMap
,
this
.
target
,
data
);
}
}
);
}
}
)
// console.log(this.gaodeMap,this.target)
// console.log(this.gaodeMap,this.target)
}
,
}
,
async
requeset
(
id
,
data
)
{
async
requeset
(
id
,
data
)
{
...
@@ -222,16 +270,18 @@ export default {
...
@@ -222,16 +270,18 @@ export default {
this
.
$confirm
(
"确认关闭?"
)
this
.
$confirm
(
"确认关闭?"
)
.
then
((
_
)
=>
{
.
then
((
_
)
=>
{
done
();
done
();
}
)
}
)
.
catch
((
_
)
=>
{
}
);
.
catch
((
_
)
=>
{
}
);
}
,
}
,
// 图片上传成功
// 图片上传成功
fileFinshed
(
e
)
{
fileFinshed
(
e
)
{
this
.
editForm
.
u
rl
=
e
.
url
;
this
.
editForm
.
iconU
rl
=
e
.
url
;
}
,
}
,
// 图片列表移除
// 图片列表移除
listRemove
(
e
)
{
listRemove
(
e
)
{
this
.
editForm
.
url
=
""
;
this
.
editForm
.
iconUrl
=
""
;
this
.
fileArr
=
[];
this
.
fileArr
=
[];
}
,
}
,
}
,
}
,
...
...
gassafety-web/src/utils/gaodeMap.js
View file @
97f21ca9
...
@@ -4,8 +4,10 @@ import valveWell from "../components/PopWindow/valveWell.vue";
...
@@ -4,8 +4,10 @@ import valveWell from "../components/PopWindow/valveWell.vue";
import
flowMeter
from
"../components/PopWindow/flowMeter.vue"
;
import
flowMeter
from
"../components/PopWindow/flowMeter.vue"
;
import
pipelineView
from
"../components/PopWindow/pipelineView.vue"
;
import
pipelineView
from
"../components/PopWindow/pipelineView.vue"
;
import
lineInfoWindow
from
"../components/PopWindow/lineInfoWindow.vue"
;
import
lineInfoWindow
from
"../components/PopWindow/lineInfoWindow.vue"
;
import
{
delDeviceInfo
}
from
"@/api/device/deviceInfo"
;
import
{
delDeviceInfo
}
from
"@/api/device/deviceInfo"
;
import
markerInfoWindow
from
"../components/PopWindow/markerInfoWindow.vue"
;
import
markerInfoWindow
from
"../components/PopWindow/markerInfoWindow.vue"
;
import
{
getArray
}
from
"@/utils/gassafety.js"
;
import
{
delPipe
}
from
"@/api/device/pipe.js"
;
import
vue
from
"../main"
;
import
vue
from
"../main"
;
let
defaultCenter
=
"石家庄"
;
let
defaultCenter
=
"石家庄"
;
export
let
map
;
export
let
map
;
...
@@ -25,7 +27,10 @@ class gaodeMap {
...
@@ -25,7 +27,10 @@ class gaodeMap {
lineType
=
0
;
lineType
=
0
;
// 创建一个新的lineObj
// 创建一个新的lineObj
newLineObj
=
null
;
newLineObj
=
null
;
lineFlag
=
false
;
mouseTool
=
null
;
mouseTool
=
null
;
myMap
=
null
;
//构造函数中设置中央点默认值
//构造函数中设置中央点默认值
constructor
(
center
)
{
constructor
(
center
)
{
this
.
markers
=
[];
this
.
markers
=
[];
...
@@ -43,6 +48,38 @@ class gaodeMap {
...
@@ -43,6 +48,38 @@ class gaodeMap {
//mapStyle: 'amap://styles/darkblue',
//mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
});
this
.
myMap
=
map
;
this
.
myMap
.
on
(
"mousedown"
,
e
=>
{
// e.originEvent.stopPropagation();
// console.log(this.mouseTool);
// this.createNewLine()
// console.log(123)
// console.log(this.lineFlag)
// if (this.lineFlag) {
// return;
// }
// console.log("this.newLineObj",this.newLineObj)
// if (this.newLineObj != null) {
// this.newLineObj.polyEditor.close();
// map.remove(this.newLineObj);
// console.log(this.mouseTool);
// }
// console.log("map", e);
});
this
.
myMap
.
on
(
"click"
,
e
=>
{
if
(
this
.
lineType
!=
1
||
this
.
lineFlag
)
return
;
console
.
log
(
this
.
lineFlag
);
// this.lineFlag = false;
// this.createNewLine();
// console.log("mapUp")
// 除了这里,还要利用vue页面的window事件辅助,当组件出来的时候,就得利用window事件
if
(
this
.
newLineObj
!=
null
)
{
this
.
newLineObj
.
polyEditor
.
close
();
map
.
remove
(
this
.
newLineObj
);
this
.
createNewLine
();
}
console
.
log
(
"抬起来了"
);
});
this
.
districtBoundaries
();
this
.
districtBoundaries
();
}
}
...
@@ -103,9 +140,13 @@ class gaodeMap {
...
@@ -103,9 +140,13 @@ class gaodeMap {
addMarker
(
markerType
,
data
)
{
addMarker
(
markerType
,
data
)
{
let
that
=
this
;
let
that
=
this
;
that
.
markerType
=
markerType
;
that
.
markerType
=
markerType
;
let
infoWindow
=
new
AMap
.
InfoWindow
({
isCustom
:
true
,
offset
:
new
AMap
.
Pixel
(
12
,
-
65
),
anchor
:
"left-top"
});
let
infoWindow
=
new
AMap
.
InfoWindow
({
isCustom
:
true
,
offset
:
new
AMap
.
Pixel
(
12
,
-
65
),
anchor
:
"left-top"
});
let
marker
=
new
AMap
.
Marker
({
let
marker
=
new
AMap
.
Marker
({
position
:
[
data
.
longitude
,
data
.
latitude
],
position
:
[
data
.
longitude
,
data
.
latitude
],
map
:
map
,
map
:
map
,
offset
:
new
AMap
.
Pixel
(
-
13
,
-
30
)
offset
:
new
AMap
.
Pixel
(
-
13
,
-
30
)
});
});
...
@@ -128,7 +169,7 @@ class gaodeMap {
...
@@ -128,7 +169,7 @@ class gaodeMap {
}
else
if
(
"delete"
==
that
.
mapOperateType
)
{
}
else
if
(
"delete"
==
that
.
mapOperateType
)
{
if
(
confirm
(
"确认删除"
)
==
true
)
{
if
(
confirm
(
"确认删除"
)
==
true
)
{
map
.
remove
(
marker
);
map
.
remove
(
marker
);
that
.
deleteMarker
(
markerType
,
data
.
deviceId
);
that
.
deleteMarker
(
markerType
,
data
.
deviceId
);
}
}
}
else
{
}
else
{
map
.
setZoomAndCenter
(
13
,
e
.
target
.
getPosition
());
map
.
setZoomAndCenter
(
13
,
e
.
target
.
getPosition
());
...
@@ -145,7 +186,6 @@ class gaodeMap {
...
@@ -145,7 +186,6 @@ class gaodeMap {
editWindow
.
form
.
longitude
=
e
.
lnglat
.
lng
;
editWindow
.
form
.
longitude
=
e
.
lnglat
.
lng
;
editWindow
.
form
.
latitude
=
e
.
lnglat
.
lat
;
editWindow
.
form
.
latitude
=
e
.
lnglat
.
lat
;
});
});
}
}
this
.
markers
.
push
(
marker
);
this
.
markers
.
push
(
marker
);
...
@@ -188,30 +228,30 @@ class gaodeMap {
...
@@ -188,30 +228,30 @@ class gaodeMap {
getMarketContent
(
data
)
{
getMarketContent
(
data
)
{
switch
(
this
.
markerType
)
{
switch
(
this
.
markerType
)
{
case
DEVICE_TYPE
.
REGEULATORBOX
:
{
case
DEVICE_TYPE
.
REGEULATORBOX
:
{
const
dom
=
createPop
(
markerInfoWindow
,{
const
dom
=
createPop
(
markerInfoWindow
,
{
title
:
"调压箱"
,
title
:
"调压箱"
,
data
:
data
,
data
:
data
,
map
:
map
map
:
map
});
});
const
html
=
dom
.
$el
;
const
html
=
dom
.
$el
;
dom
.
remove
();
dom
.
remove
();
return
html
;
return
html
;
}
}
case
DEVICE_TYPE
.
VALUEWELL
:
{
case
DEVICE_TYPE
.
VALUEWELL
:
{
const
dom
=
createPop
(
markerInfoWindow
,{
const
dom
=
createPop
(
markerInfoWindow
,
{
title
:
"阀门井"
,
title
:
"阀门井"
,
data
:
data
,
data
:
data
,
map
:
map
map
:
map
});
});
const
html
=
dom
.
$el
;
const
html
=
dom
.
$el
;
dom
.
remove
();
dom
.
remove
();
return
html
;
return
html
;
}
}
case
DEVICE_TYPE
.
FLOWMETER
:
{
case
DEVICE_TYPE
.
FLOWMETER
:
{
const
dom
=
createPop
(
markerInfoWindow
,{
const
dom
=
createPop
(
markerInfoWindow
,
{
title
:
"流量计"
,
title
:
"流量计"
,
data
:
data
,
data
:
data
,
map
:
map
map
:
map
});
});
const
html
=
dom
.
$el
;
const
html
=
dom
.
$el
;
dom
.
remove
();
dom
.
remove
();
...
@@ -240,19 +280,18 @@ class gaodeMap {
...
@@ -240,19 +280,18 @@ class gaodeMap {
if
(
DEVICE_TYPE
.
REGEULATORBOX
==
delType
||
DEVICE_TYPE
.
VALUEWELL
==
delType
||
DEVICE_TYPE
.
FLOWMETER
==
delType
||
DEVICE_TYPE
.
PRESSUREGAGE
==
delType
){
if
(
DEVICE_TYPE
.
REGEULATORBOX
==
delType
||
DEVICE_TYPE
.
VALUEWELL
==
delType
||
DEVICE_TYPE
.
FLOWMETER
==
delType
||
DEVICE_TYPE
.
PRESSUREGAGE
==
delType
){
delDeviceInfo
(
deviceId
);
delDeviceInfo
(
deviceId
);
}
}
}
}
/**
/**
* 设置设备图标
* 设置设备图标
* @param marker
* @param marker
*/
*/
setMarkerIcon
(
marker
){
setMarkerIcon
(
marker
)
{
switch
(
this
.
markerType
)
{
switch
(
this
.
markerType
)
{
case
DEVICE_TYPE
.
REGEULATORBOX
:
{
case
DEVICE_TYPE
.
REGEULATORBOX
:
{
let
icon
=
new
AMap
.
Icon
({
let
icon
=
new
AMap
.
Icon
({
//size: new AMap.Size(51, 23),
//size: new AMap.Size(51, 23),
image
:
require
(
"../assets/images/tiaoyaxiang.png"
)
,
image
:
require
(
"../assets/images/tiaoyaxiang.png"
)
});
});
marker
.
setIcon
(
icon
);
marker
.
setIcon
(
icon
);
break
;
break
;
...
@@ -260,7 +299,7 @@ class gaodeMap {
...
@@ -260,7 +299,7 @@ class gaodeMap {
case
DEVICE_TYPE
.
VALUEWELL
:
{
case
DEVICE_TYPE
.
VALUEWELL
:
{
let
icon
=
new
AMap
.
Icon
({
let
icon
=
new
AMap
.
Icon
({
//size: new AMap.Size(51, 23),
//size: new AMap.Size(51, 23),
image
:
require
(
"../assets/images/famenjing.png"
)
,
image
:
require
(
"../assets/images/famenjing.png"
)
});
});
marker
.
setIcon
(
icon
);
marker
.
setIcon
(
icon
);
break
;
break
;
...
@@ -268,7 +307,7 @@ class gaodeMap {
...
@@ -268,7 +307,7 @@ class gaodeMap {
case
DEVICE_TYPE
.
FLOWMETER
:
{
case
DEVICE_TYPE
.
FLOWMETER
:
{
let
icon
=
new
AMap
.
Icon
({
let
icon
=
new
AMap
.
Icon
({
//size: new AMap.Size(51, 23),
//size: new AMap.Size(51, 23),
image
:
require
(
"../assets/images/liuliangji.png"
)
,
image
:
require
(
"../assets/images/liuliangji.png"
)
});
});
marker
.
setIcon
(
icon
);
marker
.
setIcon
(
icon
);
break
;
break
;
...
@@ -276,7 +315,7 @@ class gaodeMap {
...
@@ -276,7 +315,7 @@ class gaodeMap {
case
DEVICE_TYPE
.
DUTYPERSON
:
{
case
DEVICE_TYPE
.
DUTYPERSON
:
{
let
icon
=
new
AMap
.
Icon
({
let
icon
=
new
AMap
.
Icon
({
//size: new AMap.Size(51, 23),
//size: new AMap.Size(51, 23),
image
:
require
(
"../assets/images/zhibaorenyuan.png"
)
,
image
:
require
(
"../assets/images/zhibaorenyuan.png"
)
});
});
marker
.
setIcon
(
icon
);
marker
.
setIcon
(
icon
);
break
;
break
;
...
@@ -284,7 +323,7 @@ class gaodeMap {
...
@@ -284,7 +323,7 @@ class gaodeMap {
case
DEVICE_TYPE
.
WORKORDER
:
{
case
DEVICE_TYPE
.
WORKORDER
:
{
let
icon
=
new
AMap
.
Icon
({
let
icon
=
new
AMap
.
Icon
({
//size: new AMap.Size(51, 23),
//size: new AMap.Size(51, 23),
image
:
require
(
"../assets/images/zhibaorenyuan.png"
)
,
image
:
require
(
"../assets/images/zhibaorenyuan.png"
)
});
});
marker
.
setIcon
(
icon
);
marker
.
setIcon
(
icon
);
break
;
break
;
...
@@ -304,12 +343,19 @@ class gaodeMap {
...
@@ -304,12 +343,19 @@ class gaodeMap {
* 添加折线
* 添加折线
* @param path
* @param path
*/
*/
addPolyline
(
path
)
{
addPolyline
(
arr
)
{
console
.
log
(
path
);
// this` polyLines = [];
// this` polyLines = [];
for
(
let
i
=
0
;
i
<
path
.
length
;
i
++
)
{
console
.
log
(
"包装的数组"
,
arr
);
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
item
=
arr
[
i
];
let
{
coordinates
}
=
item
;
// console.log("coordinates",coordinates)
// let path = coordinates ? getArray(coordinates) :[];
// 字符串转二维数组
let
path
=
coordinates
?
eval
(
coordinates
)
:
[];
let
polyline
=
new
AMap
.
Polyline
({
let
polyline
=
new
AMap
.
Polyline
({
path
:
path
[
i
]
,
path
,
strokeColor
:
"#F7FE38"
,
strokeColor
:
"#F7FE38"
,
strokeWeight
:
8
,
strokeWeight
:
8
,
strokeOpacity
:
0.9
,
strokeOpacity
:
0.9
,
...
@@ -319,13 +365,14 @@ class gaodeMap {
...
@@ -319,13 +365,14 @@ class gaodeMap {
extData
:
{
extData
:
{
type
:
"line"
,
type
:
"line"
,
//当前line状态 0:正常状态 1:正在编辑状态
//当前line状态 0:正常状态 1:正在编辑状态
isState
:
0
isState
:
0
,
lineData
:
item
}
}
});
});
this
.
polyLines
.
push
(
polyline
);
this
.
polyLines
.
push
(
polyline
);
// 信息窗体
// 信息窗体
const
dom
=
createPop
(
lineInfoWindow
,
{
const
dom
=
createPop
(
lineInfoWindow
,
{
obj
:
{
a
:
123
,
editorPage
:
true
}
obj
:
{
a
:
123
,
editorPage
:
true
,
...
item
}
});
});
console
.
log
(
"dom"
,
dom
.
$el
);
console
.
log
(
"dom"
,
dom
.
$el
);
...
@@ -339,39 +386,6 @@ class gaodeMap {
...
@@ -339,39 +386,6 @@ class gaodeMap {
});
});
this
.
newLineAddEvent
(
polyline
);
this
.
newLineAddEvent
(
polyline
);
// // 编辑状态
// let polyEditor = new AMap.PolyEditor(map, polyline);
// //创建右键菜单
// let contextMenu = new AMap.ContextMenu();
// //菜单选择
// contextMenu.addItem(
// "编辑Polyline",
// function() {
// polyEditor.setTarget(polyline);
// polyEditor.open();
// contextMenu.close();
// },
// 0
// );
// // 结束编辑
// contextMenu.addItem(
// "结束编辑",
// function() {
// polyEditor.close();
// contextMenu.close();
// },
// 0
// );
// contextMenu.addItem(
// "保存信息",
// function() {
// console.log("折线数组", polyline.getPath());
// // polyEditor.close();
// // contextMenu.close()
// },
// 0
// );
//添加事件
//添加事件
polyline
.
on
(
"mouseover"
,
e
=>
{
polyline
.
on
(
"mouseover"
,
e
=>
{
...
@@ -432,20 +446,6 @@ class gaodeMap {
...
@@ -432,20 +446,6 @@ class gaodeMap {
});
});
// 计算info的位置
// 计算info的位置
// function infoPosition() {}
// function infoPosition() {}
// polyline.on("rightclick", e => {
// console.log(this.lineType);
// // if(!this.lineFlag==0) return;
// // lineFlag 1新建 2编辑 3删除 0啥也不让干
// switch (this.lineType) {
// case 2: {
// contextMenu.open(map, e.lnglat);
// break;
// }
// default:
// break;
// }
// });
}
}
map
.
add
(
this
.
polyLines
);
map
.
add
(
this
.
polyLines
);
// 缩放地图到合适的视野级别
// 缩放地图到合适的视野级别
...
@@ -454,6 +454,7 @@ class gaodeMap {
...
@@ -454,6 +454,7 @@ class gaodeMap {
// 创建一条新的线
// 创建一条新的线
createNewLine
()
{
createNewLine
()
{
this
.
mouseTool
.
polyline
({
this
.
mouseTool
.
polyline
({
// bubbles:false,
strokeWeight
:
9
,
strokeWeight
:
9
,
strokeColor
:
"#80d8ff"
,
strokeColor
:
"#80d8ff"
,
extData
:
{
extData
:
{
...
@@ -461,9 +462,20 @@ class gaodeMap {
...
@@ -461,9 +462,20 @@ class gaodeMap {
//当前line状态 0:正常状态 1:正在编辑状态
//当前line状态 0:正常状态 1:正在编辑状态
isState
:
0
isState
:
0
}
}
//同Polyline的Option设置
//同Polyline的Option设置
});
});
}
}
// 创建出来的新线归位,重置,当点击编辑跟删除的时候
newLineReset
()
{
this
.
lineFlag
=
false
;
if
(
this
.
mouserTool
)
{
this
.
mouseTool
.
close
();
}
if
(
this
.
newLineObj
)
{
map
.
remove
(
this
.
newLineObj
);
}
}
// 新建line增加编辑以及右键菜单
// 新建line增加编辑以及右键菜单
addEditorAndMenu
(
obj
)
{
addEditorAndMenu
(
obj
)
{
let
polyEditor
=
new
AMap
.
PolyEditor
(
map
,
obj
);
let
polyEditor
=
new
AMap
.
PolyEditor
(
map
,
obj
);
...
@@ -514,10 +526,21 @@ class gaodeMap {
...
@@ -514,10 +526,21 @@ class gaodeMap {
// 新line与老line添加点击事件
// 新line与老line添加点击事件
newLineAddEvent
(
obj
)
{
newLineAddEvent
(
obj
)
{
obj
.
polyEditor
=
new
AMap
.
PolyEditor
(
map
,
obj
);
obj
.
polyEditor
=
new
AMap
.
PolyEditor
(
map
,
obj
);
obj
.
on
(
"click"
,
()
=>
{
// obj.polyEditor.on('adjust',(e)=>{
console
.
log
(
this
.
lineType
)
// console.log("addnode")
// })
obj
.
on
(
"mousedown"
,
e
=>
{
console
.
log
(
e
.
originEvent
);
console
.
log
(
"lineType"
,
this
.
lineType
);
this
.
lineFlag
=
true
;
// 每次点击关闭然后再次激活
this
.
mouseTool
.
close
();
// 删除
if
(
this
.
lineType
==
3
)
{
this
.
lineDelete
(
obj
);
return
;
}
// 获取当前状态 0普通状态,1是正编辑状态
// 获取当前状态 0普通状态,1是正编辑状态
const
{
isState
,
type
}
=
obj
.
getExtData
();
const
{
isState
,
type
}
=
obj
.
getExtData
();
// 如果不是新线的时候并且没点编辑,点击是无效的
// 如果不是新线的时候并且没点编辑,点击是无效的
if
(
type
!=
"newLine"
&&
this
.
lineType
!=
2
)
return
;
if
(
type
!=
"newLine"
&&
this
.
lineType
!=
2
)
return
;
...
@@ -530,35 +553,76 @@ class gaodeMap {
...
@@ -530,35 +553,76 @@ class gaodeMap {
obj
.
setExtData
(
opstions
);
obj
.
setExtData
(
opstions
);
}
else
{
}
else
{
// 经纬度
// 经纬度
const
lnglatsArr
=
obj
.
getPath
().
map
(
item
=>
([
item
.
lng
,
item
.
lat
])
);
const
lnglatsArr
=
obj
.
getPath
().
map
(
item
=>
[
item
.
lng
,
item
.
lat
]
);
// 管道总长度
// 管道总长度
const
pipeLength
=
obj
.
getLength
();
const
pipeLength
=
obj
.
getLength
();
// 传回来的数据 如果是新管道就是空
// 传回来的数据 如果是新管道就是空
const
lineData
=
type
==
"newLine"
?
{}
:
obj
.
getExtData
().
lineData
;
const
lineData
=
type
==
"newLine"
?
{}
:
obj
.
getExtData
().
lineData
;
this
.
infoWindowPipelineView
({
target
:
obj
,
lineType
:
type
,
lnglatsArr
,
pipeLength
,
lineData
});
console
.
log
(
"lineData===================>传入组件的数据"
,
lineData
);
this
.
infoWindowPipelineView
({
target
:
obj
,
lineType
:
type
,
lnglatsArr
,
pipeLength
,
lineData
});
}
}
});
});
}
}
lineDelete
(
obj
)
{
vue
.
$confirm
(
"是否删除该管道"
,
"提示"
,
{
// confirmButtonText: "确定",
// cancelButtonText: "取消",
type
:
"warning"
,
// center: true
})
.
then
(()
=>
{
const
{
lineData
:
{
pipeId
}
}
=
obj
.
getExtData
();
console
.
log
(
pipeId
);
delPipe
(
pipeId
).
then
(
res
=>
{
const
index
=
this
.
polyLines
.
indexOf
(
obj
);
// 如果是老线,就要线删除原来的,然后重新包装一遍
if
(
index
>=
0
)
{
this
.
polyLines
.
splice
(
index
,
1
);
map
.
remove
(
obj
);
}
vue
.
$message
({
type
:
"success"
,
message
:
"删除成功!"
});
});
})
.
catch
(()
=>
{
vue
.
$message
({
type
:
"info"
,
message
:
"已取消删除"
});
});
}
// 关闭所有已经上传的线的编辑状态
// 关闭所有已经上传的线的编辑状态
linePolyEditorAllClose
()
{
linePolyEditorAllClose
()
{
this
.
polyLines
.
forEach
(
item
=>
{
this
.
polyLines
.
forEach
(
item
=>
{
item
.
polyEditor
.
close
();
item
.
polyEditor
.
close
();
// let opstions = obj.getExtData();
// let opstions = obj.getExtData();
// opstions.isState = 1;
// opstions.isState = 1;
item
.
setExtData
({
isState
:
0
});
item
.
setExtData
({
isState
:
0
});
item
.
setOptions
({
strokeColor
:
"#F7FE38"
});
item
.
setOptions
({
strokeColor
:
"#F7FE38"
});
});
});
}
}
// 传进组件的会调 点确认的时候调
// 传进组件的会调 点确认的时候调
lineOkCallBack
(
target
)
{
lineOkCallBack
(
target
,
data
)
{
target
.
polyEditor
.
close
();
target
.
polyEditor
.
close
();
const
index
=
this
.
polyLines
.
indexOf
(
target
);
const
index
=
this
.
polyLines
.
indexOf
(
target
);
// 如果是老线,就要线删除原来的,然后重新包装一遍
// 如果是老线,就要线删除原来的,然后重新包装一遍
if
(
index
>=
0
)
{
if
(
index
>=
0
)
{
this
.
polyLines
.
splice
(
index
,
1
);
this
.
polyLines
.
splice
(
index
,
1
);
}
}
this
.
addPolyline
([
target
.
getPath
()]);
console
.
log
(
"data999-=================>传回来的data"
,
data
);
this
.
addPolyline
([
data
]);
map
.
remove
(
target
);
map
.
remove
(
target
);
// console.log('polyLines',this.polyLines)
// console.log('polyLines',this.polyLines)
}
}
...
@@ -601,10 +665,10 @@ class gaodeMap {
...
@@ -601,10 +665,10 @@ class gaodeMap {
e
.
obj
.
on
(
"click"
,
function
(
aa
)
{
e
.
obj
.
on
(
"click"
,
function
(
aa
)
{
let
postion
=
aa
.
target
.
_position
;
let
postion
=
aa
.
target
.
_position
;
//兼容拖拽后单击事件,拖拽后点击事件返回位置为数组
//兼容拖拽后单击事件,拖拽后点击事件返回位置为数组
if
(
postion
instanceof
Array
)
{
if
(
postion
instanceof
Array
)
{
device
.
form
.
longitude
=
postion
[
0
];
device
.
form
.
longitude
=
postion
[
0
];
device
.
form
.
latitude
=
postion
[
1
];
device
.
form
.
latitude
=
postion
[
1
];
}
else
{
}
else
{
device
.
form
.
longitude
=
postion
.
lng
;
device
.
form
.
longitude
=
postion
.
lng
;
device
.
form
.
latitude
=
postion
.
lat
;
device
.
form
.
latitude
=
postion
.
lat
;
}
}
...
@@ -617,6 +681,12 @@ class gaodeMap {
...
@@ -617,6 +681,12 @@ class gaodeMap {
if
(
e
.
obj
.
getExtData
().
type
==
"newLine"
)
{
if
(
e
.
obj
.
getExtData
().
type
==
"newLine"
)
{
console
.
log
(
"挂上菜单"
);
console
.
log
(
"挂上菜单"
);
that
.
newLineAddEvent
(
e
.
obj
);
that
.
newLineAddEvent
(
e
.
obj
);
// 记录这条线
that
.
newLineObj
=
e
.
obj
;
that
.
mouseTool
.
close
();
// 创建一条新线,然后在点地图的时候删除原来的旧线
// that.createNewLine();
// 右键菜单
// 右键菜单
// that.addEditorAndMenu(e.obj)
// that.addEditorAndMenu(e.obj)
that
.
overlays
.
push
(
e
.
obj
);
that
.
overlays
.
push
(
e
.
obj
);
...
@@ -719,9 +789,9 @@ class gaodeMap {
...
@@ -719,9 +789,9 @@ class gaodeMap {
);
);
}
}
searchTips
(
inputId
){
searchTips
(
inputId
)
{
let
that
=
this
;
let
that
=
this
;
AMap
.
plugin
([
'AMap.AutoComplete'
,
'AMap.PlaceSearch'
],
function
()
{
AMap
.
plugin
([
"AMap.AutoComplete"
,
"AMap.PlaceSearch"
],
function
()
{
//输入提示
//输入提示
var
autoOptions
=
{
var
autoOptions
=
{
input
:
inputId
input
:
inputId
...
@@ -731,22 +801,22 @@ class gaodeMap {
...
@@ -731,22 +801,22 @@ class gaodeMap {
map
:
map
map
:
map
});
});
//构造地点查询类
//构造地点查询类
auto
.
on
(
'select'
,
function
(
e
)
{
auto
.
on
(
"select"
,
function
(
e
)
{
console
.
log
(
e
,
"eeeeee========"
)
console
.
log
(
e
,
"eeeeee========"
);
that
.
placeSearch
.
clear
();
that
.
placeSearch
.
clear
();
that
.
placeSearch
.
setCity
(
e
.
poi
.
adcode
);
that
.
placeSearch
.
setCity
(
e
.
poi
.
adcode
);
that
.
placeSearch
.
search
(
e
.
poi
.
name
);
//关键字查询查询
that
.
placeSearch
.
search
(
e
.
poi
.
name
);
//关键字查询查询
})
})
;
})
})
;
}
}
searchKeyWord
(
keyWord
){
searchKeyWord
(
keyWord
)
{
AMap
.
plugin
([
'AMap.AutoComplete'
],
function
()
{
AMap
.
plugin
([
"AMap.AutoComplete"
],
function
()
{
var
placeSearch
=
new
AMap
.
PlaceSearch
({
var
placeSearch
=
new
AMap
.
PlaceSearch
({
map
:
map
map
:
map
});
});
placeSearch
.
search
(
keyWord
);
//关键字查询查询
placeSearch
.
search
(
keyWord
);
//关键字查询查询
})
})
;
}
}
closeAddMarker
(){
closeAddMarker
(){
...
...
gassafety-web/src/utils/gassafety.js
View file @
97f21ca9
...
@@ -3,124 +3,133 @@
...
@@ -3,124 +3,133 @@
* Copyright (c) 2021 gassafety
* Copyright (c) 2021 gassafety
*/
*/
const
baseURL
=
process
.
env
.
VUE_APP_BASE_API
const
baseURL
=
process
.
env
.
VUE_APP_BASE_API
;
// 日期格式化
// 日期格式化
export
function
parseTime
(
time
,
pattern
)
{
export
function
parseTime
(
time
,
pattern
)
{
if
(
arguments
.
length
===
0
||
!
time
)
{
if
(
arguments
.
length
===
0
||
!
time
)
{
return
null
return
null
;
}
}
const
format
=
pattern
||
'{y}-{m}-{d} {h}:{i}:{s}'
const
format
=
pattern
||
"{y}-{m}-{d} {h}:{i}:{s}"
;
let
date
let
date
;
if
(
typeof
time
===
'object'
)
{
if
(
typeof
time
===
"object"
)
{
date
=
time
date
=
time
;
}
else
{
}
else
{
if
((
typeof
time
===
'string'
)
&&
(
/^
[
0-9
]
+$/
.
test
(
time
)))
{
if
(
typeof
time
===
"string"
&&
/^
[
0-9
]
+$/
.
test
(
time
))
{
time
=
parseInt
(
time
)
time
=
parseInt
(
time
);
}
else
if
(
typeof
time
===
'string'
)
{
}
else
if
(
typeof
time
===
"string"
)
{
time
=
time
.
replace
(
new
RegExp
(
/-/gm
),
'/'
);
time
=
time
.
replace
(
new
RegExp
(
/-/gm
),
"/"
);
}
}
if
((
typeof
time
===
'number'
)
&&
(
time
.
toString
().
length
===
10
))
{
if
(
typeof
time
===
"number"
&&
time
.
toString
().
length
===
10
)
{
time
=
time
*
1000
time
=
time
*
1000
;
}
}
date
=
new
Date
(
time
)
date
=
new
Date
(
time
);
}
}
const
formatObj
=
{
const
formatObj
=
{
y
:
date
.
getFullYear
(),
y
:
date
.
getFullYear
(),
m
:
date
.
getMonth
()
+
1
,
m
:
date
.
getMonth
()
+
1
,
d
:
date
.
getDate
(),
d
:
date
.
getDate
(),
h
:
date
.
getHours
(),
h
:
date
.
getHours
(),
i
:
date
.
getMinutes
(),
i
:
date
.
getMinutes
(),
s
:
date
.
getSeconds
(),
s
:
date
.
getSeconds
(),
a
:
date
.
getDay
()
a
:
date
.
getDay
()
}
};
const
time_str
=
format
.
replace
(
/{
(
y|m|d|h|i|s|a
)
+}/g
,
(
result
,
key
)
=>
{
const
time_str
=
format
.
replace
(
/{
(
y|m|d|h|i|s|a
)
+}/g
,
(
result
,
key
)
=>
{
let
value
=
formatObj
[
key
]
let
value
=
formatObj
[
key
];
// Note: getDay() returns 0 on Sunday
// Note: getDay() returns 0 on Sunday
if
(
key
===
'a'
)
{
return
[
'日'
,
'一'
,
'二'
,
'三'
,
'四'
,
'五'
,
'六'
][
value
]
}
if
(
key
===
"a"
)
{
if
(
result
.
length
>
0
&&
value
<
10
)
{
return
[
"日"
,
"一"
,
"二"
,
"三"
,
"四"
,
"五"
,
"六"
][
value
];
value
=
'0'
+
value
}
}
if
(
result
.
length
>
0
&&
value
<
10
)
{
return
value
||
0
value
=
"0"
+
value
;
})
}
return
time_str
return
value
||
0
;
});
return
time_str
;
}
}
// 表单重置
// 表单重置
export
function
resetForm
(
refName
)
{
export
function
resetForm
(
refName
)
{
if
(
this
.
$refs
[
refName
])
{
if
(
this
.
$refs
[
refName
])
{
this
.
$refs
[
refName
].
resetFields
();
this
.
$refs
[
refName
].
resetFields
();
}
}
}
}
// 添加日期范围
// 添加日期范围
export
function
addDateRange
(
params
,
dateRange
,
propName
)
{
export
function
addDateRange
(
params
,
dateRange
,
propName
)
{
var
search
=
params
;
var
search
=
params
;
search
.
params
=
{};
search
.
params
=
{};
if
(
null
!=
dateRange
&&
''
!=
dateRange
)
{
if
(
null
!=
dateRange
&&
""
!=
dateRange
)
{
if
(
typeof
(
propName
)
===
"undefined"
)
{
if
(
typeof
propName
===
"undefined"
)
{
search
.
params
[
"beginTime"
]
=
dateRange
[
0
];
search
.
params
[
"beginTime"
]
=
dateRange
[
0
];
search
.
params
[
"endTime"
]
=
dateRange
[
1
];
search
.
params
[
"endTime"
]
=
dateRange
[
1
];
}
else
{
}
else
{
search
.
params
[
"begin"
+
propName
]
=
dateRange
[
0
];
search
.
params
[
"begin"
+
propName
]
=
dateRange
[
0
];
search
.
params
[
"end"
+
propName
]
=
dateRange
[
1
];
search
.
params
[
"end"
+
propName
]
=
dateRange
[
1
];
}
}
}
}
return
search
;
return
search
;
}
}
// 回显数据字典
// 回显数据字典
export
function
selectDictLabel
(
datas
,
value
)
{
export
function
selectDictLabel
(
datas
,
value
)
{
var
actions
=
[];
var
actions
=
[];
Object
.
keys
(
datas
).
some
((
key
)
=>
{
Object
.
keys
(
datas
).
some
(
key
=>
{
if
(
datas
[
key
].
dictValue
==
(
''
+
value
)
)
{
if
(
datas
[
key
].
dictValue
==
""
+
value
)
{
actions
.
push
(
datas
[
key
].
dictLabel
);
actions
.
push
(
datas
[
key
].
dictLabel
);
return
true
;
return
true
;
}
}
})
});
return
actions
.
join
(
''
);
return
actions
.
join
(
""
);
}
}
// 回显数据字典(字符串数组)
// 回显数据字典(字符串数组)
export
function
selectDictLabels
(
datas
,
value
,
separator
)
{
export
function
selectDictLabels
(
datas
,
value
,
separator
)
{
var
actions
=
[];
var
actions
=
[];
var
currentSeparator
=
undefined
===
separator
?
","
:
separator
;
var
currentSeparator
=
undefined
===
separator
?
","
:
separator
;
var
temp
=
value
.
split
(
currentSeparator
);
var
temp
=
value
.
split
(
currentSeparator
);
Object
.
keys
(
value
.
split
(
currentSeparator
)).
some
((
val
)
=>
{
Object
.
keys
(
value
.
split
(
currentSeparator
)).
some
(
val
=>
{
Object
.
keys
(
datas
).
some
((
key
)
=>
{
Object
.
keys
(
datas
).
some
(
key
=>
{
if
(
datas
[
key
].
dictValue
==
(
''
+
temp
[
val
])
)
{
if
(
datas
[
key
].
dictValue
==
""
+
temp
[
val
]
)
{
actions
.
push
(
datas
[
key
].
dictLabel
+
currentSeparator
);
actions
.
push
(
datas
[
key
].
dictLabel
+
currentSeparator
);
}
}
})
});
})
});
return
actions
.
join
(
''
).
substring
(
0
,
actions
.
join
(
''
).
length
-
1
);
return
actions
.
join
(
""
).
substring
(
0
,
actions
.
join
(
""
).
length
-
1
);
}
}
// 通用下载方法
// 通用下载方法
export
function
download
(
fileName
)
{
export
function
download
(
fileName
)
{
window
.
location
.
href
=
baseURL
+
"/common/download?fileName="
+
encodeURI
(
fileName
)
+
"&delete="
+
true
;
window
.
location
.
href
=
baseURL
+
"/common/download?fileName="
+
encodeURI
(
fileName
)
+
"&delete="
+
true
;
}
}
// 字符串格式化(%s )
// 字符串格式化(%s )
export
function
sprintf
(
str
)
{
export
function
sprintf
(
str
)
{
var
args
=
arguments
,
flag
=
true
,
i
=
1
;
var
args
=
arguments
,
str
=
str
.
replace
(
/%s/g
,
function
()
{
flag
=
true
,
var
arg
=
args
[
i
++
];
i
=
1
;
if
(
typeof
arg
===
'undefined'
)
{
str
=
str
.
replace
(
/%s/g
,
function
()
{
flag
=
false
;
var
arg
=
args
[
i
++
];
return
''
;
if
(
typeof
arg
===
"undefined"
)
{
}
flag
=
false
;
return
arg
;
return
""
;
});
}
return
flag
?
str
:
''
;
return
arg
;
});
return
flag
?
str
:
""
;
}
}
// 转换字符串,undefined,null等转化为""
// 转换字符串,undefined,null等转化为""
export
function
praseStrEmpty
(
str
)
{
export
function
praseStrEmpty
(
str
)
{
if
(
!
str
||
str
==
"undefined"
||
str
==
"null"
)
{
if
(
!
str
||
str
==
"undefined"
||
str
==
"null"
)
{
return
""
;
return
""
;
}
}
return
str
;
return
str
;
}
}
/**
/**
...
@@ -131,45 +140,79 @@ export function praseStrEmpty(str) {
...
@@ -131,45 +140,79 @@ export function praseStrEmpty(str) {
* @param {*} children 孩子节点字段 默认 'children'
* @param {*} children 孩子节点字段 默认 'children'
*/
*/
export
function
handleTree
(
data
,
id
,
parentId
,
children
)
{
export
function
handleTree
(
data
,
id
,
parentId
,
children
)
{
let
config
=
{
let
config
=
{
id
:
id
||
'id'
,
id
:
id
||
"id"
,
parentId
:
parentId
||
'parentId'
,
parentId
:
parentId
||
"parentId"
,
childrenList
:
children
||
'children'
childrenList
:
children
||
"children"
};
};
var
childrenListMap
=
{};
var
childrenListMap
=
{};
var
nodeIds
=
{};
var
nodeIds
=
{};
var
tree
=
[];
var
tree
=
[];
for
(
let
d
of
data
)
{
for
(
let
d
of
data
)
{
let
parentId
=
d
[
config
.
parentId
];
let
parentId
=
d
[
config
.
parentId
];
if
(
childrenListMap
[
parentId
]
==
null
)
{
if
(
childrenListMap
[
parentId
]
==
null
)
{
childrenListMap
[
parentId
]
=
[];
childrenListMap
[
parentId
]
=
[];
}
}
nodeIds
[
d
[
config
.
id
]]
=
d
;
nodeIds
[
d
[
config
.
id
]]
=
d
;
childrenListMap
[
parentId
].
push
(
d
);
childrenListMap
[
parentId
].
push
(
d
);
}
}
for
(
let
d
of
data
)
{
for
(
let
d
of
data
)
{
let
parentId
=
d
[
config
.
parentId
];
let
parentId
=
d
[
config
.
parentId
];
if
(
nodeIds
[
parentId
]
==
null
)
{
if
(
nodeIds
[
parentId
]
==
null
)
{
tree
.
push
(
d
);
tree
.
push
(
d
);
}
}
}
}
for
(
let
t
of
tree
)
{
for
(
let
t
of
tree
)
{
adaptToChildrenList
(
t
);
adaptToChildrenList
(
t
);
}
}
function
adaptToChildrenList
(
o
)
{
function
adaptToChildrenList
(
o
)
{
if
(
childrenListMap
[
o
[
config
.
id
]]
!==
null
)
{
if
(
childrenListMap
[
o
[
config
.
id
]]
!==
null
)
{
o
[
config
.
childrenList
]
=
childrenListMap
[
o
[
config
.
id
]];
o
[
config
.
childrenList
]
=
childrenListMap
[
o
[
config
.
id
]];
}
}
if
(
o
[
config
.
childrenList
])
{
if
(
o
[
config
.
childrenList
])
{
for
(
let
c
of
o
[
config
.
childrenList
])
{
for
(
let
c
of
o
[
config
.
childrenList
])
{
adaptToChildrenList
(
c
);
adaptToChildrenList
(
c
);
}
}
}
}
}
}
return
tree
;
return
tree
;
}
}
// 二维数组转字符串
export
const
getString
=
objarr
=>
{
const
typeNO
=
objarr
.
length
;
let
tree
=
"["
;
for
(
var
i
=
0
;
i
<
typeNO
;
i
++
)
{
tree
+=
"["
;
tree
+=
"'"
+
objarr
[
i
][
0
]
+
"',"
;
tree
+=
"'"
+
objarr
[
i
][
1
]
+
"'"
;
tree
+=
"]"
;
if
(
i
<
typeNO
-
1
)
{
tree
+=
","
;
}
}
tree
+=
"]"
;
return
tree
;
};
// 二维数组字符串转回数组
export
const
getArray
=
str
=>
{
let
newArr
=
str
.
slice
(
1
,
str
.
length
-
1
);
newArr
=
newArr
.
split
(
"],"
)
return
newArr
.
map
((
item
,
index
,
own
)
=>
{
let
str
=
""
,
arr
=
[];
str
=
item
.
replace
(
/
\[
/g
,
""
);
str
=
str
.
replace
(
/]/g
,
""
);
arr
=
str
.
split
(
","
);
arr
=
arr
.
map
(
item
=>
{
return
Number
(
item
);
});
return
arr
;
});
};
gassafety-web/src/views/enterprise/map/index.vue
View file @
97f21ca9
...
@@ -31,7 +31,7 @@
...
@@ -31,7 +31,7 @@
<div
<div
class=
"el-btn"
class=
"el-btn"
:class=
"
{ active: targetNum == 1 }"
:class=
"
{ active: targetNum == 1 }"
@click="addDevice"
@click
.stop
="addDevice"
>
>
<template
v-if=
"iconClass == 'icon-create'"
>
<template
v-if=
"iconClass == 'icon-create'"
>
<span
class=
"left"
>
<span
class=
"left"
>
...
@@ -49,7 +49,7 @@
...
@@ -49,7 +49,7 @@
<div
<div
class=
"el-btn"
class=
"el-btn"
:class=
"{ active: targetNum == 2 }"
:class=
"{ active: targetNum == 2 }"
@
click=
"editDevice"
@
click
.
stop
=
"editDevice"
>
>
<span
class=
"left"
>
<span
class=
"left"
>
<i
class=
"iconfont icon-compile"
/>
<i
class=
"iconfont icon-compile"
/>
...
@@ -59,7 +59,7 @@
...
@@ -59,7 +59,7 @@
<div
<div
class=
"el-btn"
class=
"el-btn"
:class=
"{ active: targetNum == 3 }"
:class=
"{ active: targetNum == 3 }"
@
click=
"deleteDevice"
@
click
.
stop
=
"deleteDevice"
>
>
<span
class=
"left"
>
<span
class=
"left"
>
<i
class=
"iconfont icon-delete"
/>
<i
class=
"iconfont icon-delete"
/>
...
@@ -75,7 +75,7 @@
...
@@ -75,7 +75,7 @@
<div
<div
class=
"op-btn"
class=
"op-btn"
:class=
"{ active: item.value == createValue }"
:class=
"{ active: item.value == createValue }"
@
click
=
"createChange(
item)"
@
click
.
stop=
"createChange($event,
item)"
>
>
<span
class=
"left"
>
<span
class=
"left"
>
<i
class=
"iconfont"
:class=
"item.icon"
/>
<i
class=
"iconfont"
:class=
"item.icon"
/>
...
@@ -89,9 +89,20 @@
...
@@ -89,9 +89,20 @@
</div>
</div>
<!-- <el-select-->
<!-- <el-select-->
<el-input
v-model=
"keyWord"
placeholder=
"点击输入"
id=
"tipinput"
class=
"search-input"
/>
<el-input
<el-button
type=
"red"
icon=
"el-icon-search"
class=
"search-but"
@
click=
"search()"
>
搜索
</el-button>
v-model=
"keyWord"
<!-- <el-button
placeholder=
"点击输入"
id=
"tipinput"
class=
"search-input"
/>
<el-button
type=
"red"
icon=
"el-icon-search"
class=
"search-but"
@
click=
"search()"
>
搜索
</el-button
>
<!-- <el-button
type="primary"
type="primary"
style="position: absolute; top: 100px; left: 75%"
style="position: absolute; top: 100px; left: 75%"
@click="addDevice"
@click="addDevice"
...
@@ -128,7 +139,7 @@
...
@@ -128,7 +139,7 @@
v-for=
"item in changeBtnData"
v-for=
"item in changeBtnData"
:key=
"item.value"
:key=
"item.value"
class=
"box"
class=
"box"
:class=
"{ active: leftBarNum.indexOf(item.value)
>=
0 }"
:class=
"{ active: leftBarNum.indexOf(item.value)
>=
0 }"
@
click=
"leftBarChange(item)"
@
click=
"leftBarChange(item)"
>
>
<div
class=
"left"
>
<div
class=
"left"
>
...
@@ -143,9 +154,9 @@
...
@@ -143,9 +154,9 @@
</template>
</template>
<
script
>
<
script
>
import
gaodeMap
from
"utils/gaodeMap.js"
;
import
gaodeMap
from
"utils/gaodeMap.js"
;
import
{
pipeAllInfoList
}
from
"@/api/device/pipe.js"
import
{
pipeAllInfoList
}
from
"@/api/device/pipe.js"
;
import
{
map
,
DEVICE_TYPE
,
mapOperateType
}
from
"utils/gaodeMap.js"
;
import
{
map
,
DEVICE_TYPE
,
mapOperateType
}
from
"utils/gaodeMap.js"
;
import
{
getAllDeviceInfo
}
from
"@/api/device/deviceInfo"
;
import
{
getAllDeviceInfo
}
from
"@/api/device/deviceInfo"
;
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
...
@@ -168,13 +179,13 @@ export default {
...
@@ -168,13 +179,13 @@ export default {
phone
:
null
,
phone
:
null
,
installationTime
:
null
,
installationTime
:
null
,
inspectionTime
:
null
,
inspectionTime
:
null
,
remarks
:
null
remarks
:
null
,
},
},
radio1
:
""
,
radio1
:
""
,
// 1新建,2编辑,3删除,点按钮变色
// 1新建,2编辑,3删除,点按钮变色
targetNum
:
0
,
targetNum
:
0
,
// 左边的bar的active判定
// 左边的bar的active判定
leftBarNum
:
[
1
,
2
,
3
,
4
,
5
],
leftBarNum
:
[
1
,
2
,
3
,
4
,
5
],
// 新建里的值
// 新建里的值
iconClass
:
"icon-create"
,
iconClass
:
"icon-create"
,
...
@@ -207,15 +218,14 @@ export default {
...
@@ -207,15 +218,14 @@ export default {
label
:
"压力表"
,
label
:
"压力表"
,
},
},
],
],
keyWord
:
""
keyWord
:
""
,
};
};
},
},
mounted
()
{
mounted
()
{
let
gaoMap
=
new
gaodeMap
(
"石家庄"
);
let
gaoMap
=
new
gaodeMap
(
"石家庄"
);
pipeAllInfoList
().
then
(
res
=>
{
console
.
log
(
"管道"
,
res
);
})
this
.
gaoMap
=
gaoMap
;
this
.
gaoMap
=
gaoMap
;
window
.
addEventListener
(
"click"
,
this
.
barClose
);
let
path
=
[
let
path
=
[
[
[
[
114.436698
,
38.083306
],
[
114.436698
,
38.083306
],
...
@@ -229,20 +239,20 @@ export default {
...
@@ -229,20 +239,20 @@ export default {
[
114.530768
,
38.00165
],
[
114.530768
,
38.00165
],
],
],
];
];
gaoMap
.
addPolyline
(
path
);
gaoMap
.
addMouseTool
();
gaoMap
.
addMouseTool
();
gaoMap
.
searchTips
(
"tipinput"
);
gaoMap
.
searchTips
(
"tipinput"
);
this
.
getDeviceInfo
();
this
.
getDeviceInfo
();
this
.
getPipeList
();
},
},
methods
:
{
methods
:
{
// 左边的Bar修改值
// 左边的Bar修改值
leftBarChange
(
item
){
leftBarChange
(
item
)
{
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
const
index
=
this
.
leftBarNum
.
indexOf
(
item
.
value
);
const
index
=
this
.
leftBarNum
.
indexOf
(
item
.
value
);
if
(
index
>=
0
)
{
if
(
index
>=
0
)
{
this
.
leftBarNum
.
splice
(
index
,
1
)
this
.
leftBarNum
.
splice
(
index
,
1
);
}
else
{
}
else
{
this
.
leftBarNum
.
push
(
item
.
value
)
this
.
leftBarNum
.
push
(
item
.
value
);
}
}
},
},
addDevice
()
{
addDevice
()
{
...
@@ -254,8 +264,8 @@ export default {
...
@@ -254,8 +264,8 @@ export default {
this
.
createReset
();
this
.
createReset
();
}
}
}
}
if
(
this
.
targetNum
==
1
&&
this
.
createValue
==
1
)
{
if
(
this
.
targetNum
==
1
&&
this
.
createValue
==
1
)
{
this
.
gaoMap
.
lineType
=
1
;
this
.
gaoMap
.
lineType
=
1
;
}
}
this
.
deviceType
=
!
this
.
deviceType
;
this
.
deviceType
=
!
this
.
deviceType
;
this
.
gaoMap
.
mapOperateType
=
"add"
;
this
.
gaoMap
.
mapOperateType
=
"add"
;
...
@@ -263,15 +273,16 @@ export default {
...
@@ -263,15 +273,16 @@ export default {
},
},
// 选择新建项目哪个
// 选择新建项目哪个
createChange
(
item
)
{
createChange
(
e
,
item
)
{
// e.stopPropagation();
this
.
deviceType
=
false
;
this
.
deviceType
=
false
;
this
.
iconClass
=
item
.
icon
;
this
.
iconClass
=
item
.
icon
;
this
.
createValue
=
item
.
value
;
this
.
createValue
=
item
.
value
;
this
.
createLabel
=
item
.
label
;
this
.
createLabel
=
item
.
label
;
if
(
this
.
targetNum
==
1
&&
this
.
createValue
==
1
)
{
if
(
this
.
targetNum
==
1
&&
this
.
createValue
==
1
)
{
// 0是初始,1是新建 2是编辑 3删除
// 0是初始,1是新建 2是编辑 3删除
this
.
gaoMap
.
lineType
=
1
;
this
.
gaoMap
.
lineType
=
1
;
this
.
gaoMap
.
createNewLine
();
this
.
gaoMap
.
createNewLine
();
}
else
{
}
else
{
this
.
gaoMap
.
draw
(
this
.
createValue
.
toString
());
this
.
gaoMap
.
draw
(
this
.
createValue
.
toString
());
...
@@ -285,12 +296,14 @@ export default {
...
@@ -285,12 +296,14 @@ export default {
},
},
editDevice
()
{
editDevice
()
{
this
.
targetNum
=
this
.
targetNum
!=
2
?
2
:
0
;
this
.
targetNum
=
this
.
targetNum
!=
2
?
2
:
0
;
this
.
gaoMap
.
lineType
=
this
.
targetNum
;
this
.
gaoMap
.
lineType
=
this
.
targetNum
;
console
.
log
(
this
.
gaoMap
.
lineType
)
console
.
log
(
this
.
gaoMap
.
lineType
)
;
if
(
this
.
targetNum
!=
2
)
{
if
(
this
.
targetNum
!=
2
)
{
this
.
gaoMap
.
linePolyEditorAllClose
();
this
.
gaoMap
.
linePolyEditorAllClose
();
}
}
this
.
createReset
();
this
.
createReset
();
// 如果正在新建线条,则清空
this
.
gaoMap
.
newLineReset
();
this
.
deviceType
=
false
;
this
.
deviceType
=
false
;
this
.
gaoMap
.
mapOperateType
=
"edit"
;
this
.
gaoMap
.
mapOperateType
=
"edit"
;
this
.
gaoMap
.
addMarkerDragg
();
this
.
gaoMap
.
addMarkerDragg
();
...
@@ -299,8 +312,9 @@ export default {
...
@@ -299,8 +312,9 @@ export default {
},
},
deleteDevice
()
{
deleteDevice
()
{
this
.
targetNum
=
this
.
targetNum
!=
3
?
3
:
0
;
this
.
targetNum
=
this
.
targetNum
!=
3
?
3
:
0
;
this
.
gaoMap
.
lineType
=
this
.
targetNum
;
this
.
gaoMap
.
lineType
=
this
.
targetNum
;
// 如果正在新建线条,则清空
this
.
gaoMap
.
newLineReset
();
this
.
createReset
();
this
.
createReset
();
this
.
deviceType
=
false
;
this
.
deviceType
=
false
;
this
.
gaoMap
.
mapOperateType
=
"delete"
;
this
.
gaoMap
.
mapOperateType
=
"delete"
;
...
@@ -320,19 +334,22 @@ export default {
...
@@ -320,19 +334,22 @@ export default {
this
.
gaoMap
.
createNewLine
();
this
.
gaoMap
.
createNewLine
();
}
}
},
},
getDeviceInfo
(){
getDeviceInfo
()
{
this
.
loading
=
true
;
this
.
loading
=
true
;
getAllDeviceInfo
(
this
.
queryParams
).
then
(
response
=>
{
getAllDeviceInfo
(
this
.
queryParams
).
then
((
response
)
=>
{
if
(
response
.
code
==
200
){
if
(
response
.
code
==
200
)
{
for
(
var
i
=
0
;
i
<
response
.
data
.
length
;
i
++
){
for
(
var
i
=
0
;
i
<
response
.
data
.
length
;
i
++
)
{
if
(
"1"
==
response
.
data
[
i
].
deviceType
){
if
(
"1"
==
response
.
data
[
i
].
deviceType
)
{
this
.
gaoMap
.
addMarker
(
DEVICE_TYPE
.
REGEULATORBOX
,
response
.
data
[
i
])
this
.
gaoMap
.
addMarker
(
DEVICE_TYPE
.
REGEULATORBOX
,
response
.
data
[
i
]
);
}
}
if
(
"2"
==
response
.
data
[
i
].
deviceType
)
{
if
(
"2"
==
response
.
data
[
i
].
deviceType
)
{
this
.
gaoMap
.
addMarker
(
DEVICE_TYPE
.
VALUEWELL
,
response
.
data
[
i
])
this
.
gaoMap
.
addMarker
(
DEVICE_TYPE
.
VALUEWELL
,
response
.
data
[
i
]);
}
}
if
(
"3"
==
response
.
data
[
i
].
deviceType
)
{
if
(
"3"
==
response
.
data
[
i
].
deviceType
)
{
this
.
gaoMap
.
addMarker
(
DEVICE_TYPE
.
FLOWMETER
,
response
.
data
[
i
])
this
.
gaoMap
.
addMarker
(
DEVICE_TYPE
.
FLOWMETER
,
response
.
data
[
i
]);
}
}
if
(
"4"
==
response
.
data
[
i
].
deviceType
){
if
(
"4"
==
response
.
data
[
i
].
deviceType
){
this
.
gaoMap
.
addMarker
(
DEVICE_TYPE
.
PRESSUREGAGE
,
response
.
data
[
i
])
this
.
gaoMap
.
addMarker
(
DEVICE_TYPE
.
PRESSUREGAGE
,
response
.
data
[
i
])
...
@@ -341,12 +358,37 @@ export default {
...
@@ -341,12 +358,37 @@ export default {
}
}
this
.
loading
=
false
;
this
.
loading
=
false
;
});
});
},
},
search
(){
getPipeList
()
{
pipeAllInfoList
().
then
((
res
)
=>
{
console
.
log
(
"管道"
,
res
);
if
(
res
.
code
==
200
)
{
this
.
gaoMap
.
addPolyline
(
res
.
data
);
}
});
},
search
()
{
this
.
gaoMap
.
placeSearch
.
clear
();
this
.
gaoMap
.
placeSearch
.
clear
();
this
.
gaoMap
.
placeSearch
.
search
(
this
.
keyWord
)
this
.
gaoMap
.
placeSearch
.
search
(
this
.
keyWord
);
}
},
// 新建下拉列表关闭
barClose
()
{
console
.
log
(
"window"
);
this
.
deviceType
=
false
;
// 如果没有选择的时候点window 则高亮消失
if
(
this
.
targetNum
==
1
&&
this
.
iconClass
==
"icon-create"
)
{
this
.
targetNum
=
0
;
}
// 辅助新建重新画线
if
(
!
this
.
gaoMap
.
lineFlag
)
return
;
this
.
gaoMap
.
lineFlag
=
false
;
this
.
gaoMap
.
createNewLine
();
},
},
beforeDestroy
()
{
console
.
log
(
"移除window事件"
);
window
.
removeEventListener
(
"click"
,
this
.
barClose
);
},
},
};
};
</
script
>
</
script
>
...
@@ -558,17 +600,19 @@ input[type="radio"] {
...
@@ -558,17 +600,19 @@ input[type="radio"] {
width
:
4rem
;
width
:
4rem
;
margin-right
:
1rem
;
margin-right
:
1rem
;
}
}
.search-input
{
.search-input
{
position
:
absolute
;
position
:
absolute
;
top
:
100px
;
top
:
100px
;
left
:
2%
;
left
:
2%
;
width
:
240px
;
width
:
240px
;
}
}
.search-but
{
.search-but
{
position
:
absolute
;
position
:
absolute
;
top
:
100px
;
left
:
19%
;
top
:
100px
;
width
:
85px
;
color
:
white
;
left
:
19%
;
background-color
:
#053B6A
;
width
:
85px
;
color
:
white
;
background-color
:
#053b6a
;
}
}
</
style
>
</
style
>
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