Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
K
kd_control
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
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
zhanglw
kd_control
Commits
4c3b9713
Commit
4c3b9713
authored
Mar 15, 2023
by
zhanglw
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
电子围栏,边坡设备监测
parent
2d5aaea3
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
877 additions
and
106 deletions
+877
-106
config.json
public/config/config.json
+1
-1
Map4.vue
src/components/mars3d/Map4.vue
+55
-56
Map5.vue
src/components/mars3d/Map5.vue
+297
-0
index.vue
src/views/regionalManagement/regionalInformation/index.vue
+23
-49
index.vue
src/views/slopeMonitoring/slopeDevice/index.vue
+501
-0
No files found.
public/config/config.json
View file @
4c3b9713
...
...
@@ -345,4 +345,4 @@
}
]
}
}
\ No newline at end of file
}
src/components/mars3d/Map4.vue
View file @
4c3b9713
...
...
@@ -2,21 +2,21 @@
<div
style=
"wight:100%;height:100%;position: relative;"
>
<div
:id=
"`mars3d-container$
{mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
</div>
<div
class=
"infoview"
>
<div
style=
"display: inline-block;color:red;font-weight:bolder;"
>
每次只允许提交保存一个关键点
</div>
</div>
<img
src=
"../../assets/images/cutGraph/maplogo1.jpg"
class=
"maplogo1Img4"
>
</div>
</
template
>
<
script
>
import
Vue
from
'
vue
'
import
{
Tools
,
HttpReq
,
CAMap
}
from
'
@/assets/js/common.js
'
;
// 使用免费开源版本
import
'
mars3d/dist/mars3d.css
'
import
*
as
mars3d
from
'
mars3d
'
...
...
@@ -25,24 +25,24 @@
import
zhuangchetubiao
from
'
../../assets/images/cutGraph/zhuangchedian1.png
'
import
xiechetubiao
from
'
../../assets/images/cutGraph/xiechedian1.png
'
import
kongzhidiantubiao
from
'
../../assets/images/cutGraph/kongzhidian1.png
'
// 导入插件(其他插件类似,插件清单访问:http://mars3d.cn/dev/guide/start/install.html)
// echarts插件
// import 'mars3d-echarts'
// 为了方便使用,绑定到原型链,在其他vue文件,直接 this.mars3d 来使用
Vue
.
prototype
.
mars3d
=
mars3d
Vue
.
prototype
.
Cesium
=
mars3d
.
Cesium
var
map
;
export
default
{
name
:
'
mars3dViewer
'
,
created
(){
// this.getCoordinate();
},
data
(){
return
{
zuobianData
:[],
...
...
@@ -54,44 +54,44 @@
areaColorData
:[],
}
},
props
:
{
// 初始化配置参数
url
:
String
,
// 地图唯一性标识
mapKey
:
{
type
:
String
,
default
:
''
},
// 自定义参数
options
:
Object
,
// 是否分屏显示
compare
:
{
type
:
Boolean
,
default
:
false
},
// 是否插入到body元素上
appendToBody
:
{
type
:
Boolean
,
default
:
false
},
// 自定义css类名
customClass
:
{
type
:
String
,
default
:
''
}
},
destroy
()
{
this
[
`map
${
this
.
mapKey
}
`
].
destroy
()
delete
this
[
`map
${
this
.
mapKey
}
`
]
},
methods
:
{
//后台获取数据
getCoordinate
(
data
)
{
...
...
@@ -156,13 +156,13 @@
})
}
})
}
})
})
}
})
},
//上传关键点数据
uploaded
(
text
,
type
,
way
,
arr1
){
...
...
@@ -303,13 +303,13 @@
})
}
}
},
//创建地图
initMars3d
(
options
)
{
let
that
=
this
;
//if (this[`map${this.mapKey}`]) return
const
mapOptions
=
{
...
options
,
...
this
.
options
,
...
...
@@ -317,7 +317,7 @@
defaultContextMenu
:
false
,
//右键菜单
},
}
// 创建三维地球场景
map
=
new
mars3d
.
Map
(
`mars3d-container
${
this
.
mapKey
}
`
,
mapOptions
)
this
[
`map
${
this
.
mapKey
}
`
]
=
map
...
...
@@ -329,7 +329,7 @@
initLayerManager
(
graphicLayer
,
that
.
weilanName
[
index
]);
that
.
addGraphic_01
(
graphicLayer
,
item
,
that
.
weilanName
[
index
],
that
.
areaColorData
[
index
]);
})
//关键点显示
that
.
zuobianData
.
forEach
(
function
(
item
,
index
){
var
graphicLayer
=
new
mars3d
.
layer
.
GraphicLayer
();
...
...
@@ -346,7 +346,7 @@
initLayerManager
(
graphicLayer
);
that
.
addDemoGraphic2
(
graphicLayer
,
item
);
})
//webgl渲染失败后,刷新页面
map
.
on
(
mars3d
.
EventType
.
renderError
,
function
(
event
){
window
.
location
.
reload
();
...
...
@@ -440,7 +440,7 @@
},
},
success
:
function
(
graphic
){
var
mpt
=
mars3d
.
L
atLng
Point
.
fromCartesian
(
graphic
.
_position_draw
);
var
mpt
=
mars3d
.
L
ngLat
Point
.
fromCartesian
(
graphic
.
_position_draw
);
that
.
toJavaCoordinates
.
push
(
mpt
.
toString
().
split
(
'
,
'
));
}
});
...
...
@@ -452,11 +452,11 @@
that
.
controlPointId
=
item
.
id
;
})
},
}
}
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
>
.maplogo1Img4
{
...
...
@@ -467,7 +467,7 @@
height
:
2.5vh
;
}
.cesium-viewer-toolbar
{
display
:
none
!important
;
}
.mars3d-compass
{
...
...
@@ -484,9 +484,9 @@
width
:
100vw
;
overflow
:
hidden
;
}
/* 重写Cesium的css */
/**cesium按钮背景色*/
.cesium-button
{
background-color
:
#3f4854
;
...
...
@@ -495,35 +495,35 @@
box-shadow
:
0
1px
4px
rgba
(
0
,
0
,
0
,
0.3
);
line-height
:
32px
;
}
.cesium-viewer-geocoderContainer
.cesium-geocoder-input
{
background-color
:
rgba
(
63
,
72
,
84
,
0.7
);
}
.cesium-viewer-geocoderContainer
.cesium-geocoder-input
:focus
{
background-color
:
rgba
(
63
,
72
,
84
,
0.9
);
}
.cesium-viewer-geocoderContainer
.search-results
{
background-color
:
#3f4854
;
}
.cesium-geocoder-searchButton
{
background-color
:
#3f4854
;
}
.cesium-infoBox-title
{
background-color
:
#3f4854
;
}
.cesium-infoBox
{
background
:
rgba
(
63
,
72
,
84
,
0.9
);
}
.cesium-toolbar-button
img
{
height
:
100%
;
}
.cesium-performanceDisplay-defaultContainer
{
top
:
auto
;
bottom
:
35px
;
...
...
@@ -533,7 +533,7 @@
.cesium-performanceDisplay-fps
{
color
:
#fff
;
}
/**cesium工具栏位置*/
.cesium-viewer-toolbar
{
top
:
auto
;
...
...
@@ -541,7 +541,7 @@
right
:
12px
;
bottom
:
35px
;
}
.cesium-viewer-toolbar
>
.cesium-toolbar-button
,
.cesium-navigationHelpButton-wrapper
,
.cesium-viewer-geocoderContainer
{
...
...
@@ -550,30 +550,30 @@
clear
:
both
;
text-align
:
center
;
}
.cesium-baseLayerPicker-dropDown
{
bottom
:
0
;
right
:
40px
;
max-height
:
700px
;
margin-bottom
:
5px
;
}
.cesium-navigation-help
{
top
:
auto
;
bottom
:
0
;
right
:
40px
;
transform-origin
:
right
bottom
;
}
.cesium-sceneModePicker-wrapper
{
width
:
auto
;
}
.cesium-sceneModePicker-wrapper
.cesium-sceneModePicker-dropDown-icon
{
float
:
left
;
margin
:
0
3px
;
}
.cesium-viewer-geocoderContainer
.search-results
{
left
:
0
;
right
:
40px
;
...
...
@@ -581,16 +581,16 @@
position
:
absolute
;
z-index
:
999
;
}
.cesium-infoBox-title
{
background-color
:
#3f4854
;
}
.cesium-infoBox
{
top
:
50px
;
background
:
rgba
(
63
,
72
,
84
,
0.9
);
}
/**左下工具栏菜单*/
.toolbar-dropdown-menu-div
{
background
:
rgba
(
43
,
44
,
47
,
0.8
);
...
...
@@ -601,7 +601,7 @@
bottom
:
40px
;
display
:
none
;
}
.toolbar-dropdown-menu
{
min-width
:
110px
;
padding
:
0
;
...
...
@@ -620,24 +620,24 @@
white-space
:
nowrap
;
text-decoration
:
none
;
}
.toolbar-dropdown-menu
>
li
>
a
:hover
,
.dropdown-menu
>
li
>
a
:focus
{
color
:
#fff
;
background-color
:
#444d59
;
}
.toolbar-dropdown-menu
>
.active
>
a
,
.dropdown-menu
>
.active
>
a
:hover
,
.dropdown-menu
>
.active
>
a
:focus
{
color
:
#fff
;
background-color
:
#444d59
;
}
.toolbar-dropdown-menu
i
{
padding-right
:
5px
;
}
.infoview
{
position
:
absolute
;
top
:
10px
;
...
...
@@ -646,4 +646,3 @@
z-index
:
1000
;
}
</
style
>
\ No newline at end of file
src/components/mars3d/Map5.vue
0 → 100644
View file @
4c3b9713
<
template
>
<div
style=
"wight:100%;height:100%;position: relative;"
>
<div
:id=
"`mars3d-container$
{mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
</div>
<div
class=
"infoview"
>
<div
style=
"display: inline-block;color:red;font-weight:bolder;"
>
点击地图设置坐标
</div>
</div>
<img
src=
"../../assets/images/cutGraph/maplogo1.jpg"
class=
"maplogo1Img4"
>
</div>
</
template
>
<
script
>
import
Vue
from
'
vue
'
import
{
Tools
,
HttpReq
,
CAMap
}
from
'
@/assets/js/common.js
'
;
// 使用免费开源版本
import
'
mars3d/dist/mars3d.css
'
import
*
as
mars3d
from
'
mars3d
'
import
*
as
Cesium
from
'
mars3d-cesium/Build/Cesium/Cesium
'
import
{
initGraphicManager
,
initLayerManager
,
bindLayerContextMenu
}
from
'
./js/graphicManager
'
import
kongzhidiantubiao
from
'
../../assets/images/cutGraph/kongzhidian1.png
'
// 导入插件(其他插件类似,插件清单访问:http://mars3d.cn/dev/guide/start/install.html)
// echarts插件
// import 'mars3d-echarts'
// 为了方便使用,绑定到原型链,在其他vue文件,直接 this.mars3d 来使用
Vue
.
prototype
.
mars3d
=
mars3d
Vue
.
prototype
.
Cesium
=
mars3d
.
Cesium
var
map
;
export
default
{
name
:
'
mars3dViewer
'
,
data
(){
return
{
}
},
props
:
{
// 初始化配置参数
url
:
String
,
// 地图唯一性标识
mapKey
:
{
type
:
String
,
default
:
''
},
// 自定义参数
options
:
Object
,
// 是否分屏显示
compare
:
{
type
:
Boolean
,
default
:
false
},
// 是否插入到body元素上
appendToBody
:
{
type
:
Boolean
,
default
:
false
},
// 自定义css类名
customClass
:
{
type
:
String
,
default
:
''
}
},
destroy
()
{
this
[
`map
${
this
.
mapKey
}
`
].
destroy
()
delete
this
[
`map
${
this
.
mapKey
}
`
]
},
created
(){
this
.
$nextTick
(()
=>
{
mars3d
.
Resource
.
fetchJson
({
url
:
this
.
url
}).
then
((
data
)
=>
{
this
.
initMars3d
(
data
.
map3d
)
// 构建地图
})
});
},
methods
:
{
//创建地图
initMars3d
(
options
)
{
let
that
=
this
;
const
mapOptions
=
{
...
options
,
...
this
.
options
,
control
:
{
defaultContextMenu
:
false
,
//右键菜单
},
}
// 创建三维地球场景
map
=
new
mars3d
.
Map
(
`mars3d-container
${
this
.
mapKey
}
`
,
mapOptions
);
this
[
`map
${
this
.
mapKey
}
`
]
=
map
;
this
.
$emit
(
'
onload
'
,
map
);
},
}
}
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
>
.maplogo1Img4
{
position
:
absolute
;
bottom
:
0px
;
left
:
0px
;
width
:
6vw
;
height
:
2.5vh
;
}
.cesium-viewer-toolbar
{
display
:
none
!important
;
}
.mars3d-compass
{
display
:
none
!important
;
}
.mars3d-locationbar
{
display
:
none
!important
;
}
.mars3d-distance-legend
{
display
:
none
!important
;
}
.mars3d-container
{
height
:
100%
;
width
:
100vw
;
overflow
:
hidden
;
}
/* 重写Cesium的css */
/**cesium按钮背景色*/
.cesium-button
{
background-color
:
#3f4854
;
color
:
#e6e6e6
;
fill
:
#e6e6e6
;
box-shadow
:
0
1px
4px
rgba
(
0
,
0
,
0
,
0.3
);
line-height
:
32px
;
}
.cesium-viewer-geocoderContainer
.cesium-geocoder-input
{
background-color
:
rgba
(
63
,
72
,
84
,
0.7
);
}
.cesium-viewer-geocoderContainer
.cesium-geocoder-input
:focus
{
background-color
:
rgba
(
63
,
72
,
84
,
0.9
);
}
.cesium-viewer-geocoderContainer
.search-results
{
background-color
:
#3f4854
;
}
.cesium-geocoder-searchButton
{
background-color
:
#3f4854
;
}
.cesium-infoBox-title
{
background-color
:
#3f4854
;
}
.cesium-infoBox
{
background
:
rgba
(
63
,
72
,
84
,
0.9
);
}
.cesium-toolbar-button
img
{
height
:
100%
;
}
.cesium-performanceDisplay-defaultContainer
{
top
:
auto
;
bottom
:
35px
;
right
:
50px
;
}
.cesium-performanceDisplay-ms
,
.cesium-performanceDisplay-fps
{
color
:
#fff
;
}
/**cesium工具栏位置*/
.cesium-viewer-toolbar
{
top
:
auto
;
left
:
auto
;
right
:
12px
;
bottom
:
35px
;
}
.cesium-viewer-toolbar
>
.cesium-toolbar-button
,
.cesium-navigationHelpButton-wrapper
,
.cesium-viewer-geocoderContainer
{
margin-bottom
:
5px
;
float
:
right
;
clear
:
both
;
text-align
:
center
;
}
.cesium-baseLayerPicker-dropDown
{
bottom
:
0
;
right
:
40px
;
max-height
:
700px
;
margin-bottom
:
5px
;
}
.cesium-navigation-help
{
top
:
auto
;
bottom
:
0
;
right
:
40px
;
transform-origin
:
right
bottom
;
}
.cesium-sceneModePicker-wrapper
{
width
:
auto
;
}
.cesium-sceneModePicker-wrapper
.cesium-sceneModePicker-dropDown-icon
{
float
:
left
;
margin
:
0
3px
;
}
.cesium-viewer-geocoderContainer
.search-results
{
left
:
0
;
right
:
40px
;
width
:
auto
;
position
:
absolute
;
z-index
:
999
;
}
.cesium-infoBox-title
{
background-color
:
#3f4854
;
}
.cesium-infoBox
{
top
:
50px
;
background
:
rgba
(
63
,
72
,
84
,
0.9
);
}
/**左下工具栏菜单*/
.toolbar-dropdown-menu-div
{
background
:
rgba
(
43
,
44
,
47
,
0.8
);
border
:
1px
solid
#2b2c2f
;
z-index
:
999
;
position
:
absolute
;
right
:
60px
;
bottom
:
40px
;
display
:
none
;
}
.toolbar-dropdown-menu
{
min-width
:
110px
;
padding
:
0
;
}
.toolbar-dropdown-menu
>
li
{
padding
:
0
3px
;
margin
:
2px
0
;
}
.toolbar-dropdown-menu
>
li
>
a
{
color
:
#edffff
;
display
:
block
;
padding
:
4px
10px
;
clear
:
both
;
font-weight
:
normal
;
line-height
:
1.6
;
white-space
:
nowrap
;
text-decoration
:
none
;
}
.toolbar-dropdown-menu
>
li
>
a
:hover
,
.dropdown-menu
>
li
>
a
:focus
{
color
:
#fff
;
background-color
:
#444d59
;
}
.toolbar-dropdown-menu
>
.active
>
a
,
.dropdown-menu
>
.active
>
a
:hover
,
.dropdown-menu
>
.active
>
a
:focus
{
color
:
#fff
;
background-color
:
#444d59
;
}
.toolbar-dropdown-menu
i
{
padding-right
:
5px
;
}
.infoview
{
position
:
absolute
;
top
:
10px
;
left
:
10px
;
width
:
50vw
;
z-index
:
1000
;
}
</
style
>
src/views/regionalManagement/regionalInformation/index.vue
View file @
4c3b9713
...
...
@@ -84,13 +84,14 @@
</el-form-item>
<br/>
<el-form-item
label=
"选择车辆"
prop=
"cars"
v-show=
"form.item.areaclass == '电子围栏'"
>
<el-checkbox
:indeterminate=
"isIndeterminate"
v-model=
"checkAll"
@
change=
"handleCheckAllChange"
>
全选
</el-checkbox>
<div
class=
"checkboxViews"
>
<el-checkbox-group
v-model=
"checkDataList"
style=
"width:480px;"
>
<el-checkbox-group
v-model=
"checkDataList"
style=
"width:480px;"
@
change=
"handleCheckedChange"
>
>
<el-checkbox
v-for=
"(obj,index) in carInformationData"
:label=
"obj.number"
:key=
"index"
>
{{obj.number}}
</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
<el-form-item
label=
"启
停状态
"
prop=
"status"
v-show=
"form.item.areaclass == '电子围栏'"
>
<el-form-item
label=
"启
用情况
"
prop=
"status"
v-show=
"form.item.areaclass == '电子围栏'"
>
<el-select
v-model=
"form.item.status"
placeholder=
"请选择启停状态"
style=
"width:160px;"
>
<el-option
label=
"启用"
value=
"启用"
></el-option>
<el-option
label=
"停用"
value=
"停用"
></el-option>
...
...
@@ -120,12 +121,13 @@ export default {
data
()
{
const
basePathUrl
=
window
.
basePathUrl
||
''
return
{
isIndeterminate
:
false
,
//地图图片
configUrl
:
basePathUrl
+
'
config/config.json
'
,
imgSrcStart
:
process
.
env
.
VUE_APP_LOCAL_API2
,
loading
:
false
,
page
:
1
,
size
:
10
,
size
:
9999
,
total
:
0
,
query
:{},
picFileName
:
''
,
...
...
@@ -165,6 +167,15 @@ export default {
})
},
methods
:
{
handleCheckAllChange
(
val
)
{
this
.
checkDataList
=
val
?
this
.
carInformationData
.
map
((
item
)
=>
item
.
number
)
:
[];
this
.
isIndeterminate
=
false
;
},
handleCheckedChange
(
value
)
{
let
checkedCount
=
value
.
length
;
this
.
checkAll
=
checkedCount
===
this
.
carInformationData
.
length
;
this
.
isIndeterminate
=
checkedCount
>
0
&&
checkedCount
<
this
.
carInformationData
.
length
;
},
//获取区域信息数据
loadData
()
{
var
sort
=
'
createTime,desc
'
;
...
...
@@ -172,7 +183,7 @@ export default {
param
.
page
=
this
.
page
-
1
;
param
.
size
=
this
.
size
;
param
.
sort
=
sort
;
this
.
$nextTick
(()
=>
{
HttpReq
.
truckDispatching
.
RegionalInformationQuery
(
param
).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
...
...
@@ -203,7 +214,7 @@ export default {
return
'
success-row
'
;
}
return
''
;
},
},
cancelForm
(
a
,
b
,
c
){
this
.
form
.
visible
=
false
;
},
...
...
@@ -275,7 +286,7 @@ export default {
this
.
form
.
status
.
cu
=
0
}
});
}
;
}
},
//新增区域信息
reqAddItem
(
form
,
item
){
...
...
@@ -301,6 +312,7 @@ export default {
}
else
{
let
lastData
=
{...
item
};
lastData
.
card
=
this
.
picFileName
;
lastData
.
carList
=
this
.
checkDataList
;
//this.$refs.mars3dViewerMapMethod.uploaded(lastData.name);
HttpReq
.
truckDispatching
.
RegionalInformationAdd
(
lastData
).
then
((
res
)
=>
{
form
.
visible
=
false
;
...
...
@@ -324,24 +336,6 @@ export default {
}).
catch
(
function
(
error
)
{
form
.
status
.
cu
=
0
});
this
.
checkDataList
.
forEach
((
carItem
,
index
)
=>
{
let
uploadCarData
=
{};
uploadCarData
.
car
=
carItem
;
uploadCarData
.
areaId
=
item
.
code
;
console
.
log
(
'
uploadCarData
'
,
uploadCarData
);
HttpReq
.
truckDispatching
.
RegionalInformationCarAdd
(
uploadCarData
).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
}
else
{
this
.
$notify
({
title
:
res
.
msg
,
type
:
'
error
'
,
duration
:
2500
})
}
}).
catch
(
function
(
error
)
{
});
})
}
},
...
...
@@ -349,7 +343,7 @@ export default {
reqUpdateItem
(
form
,
item
){
let
lastData
=
{...
item
};
lastData
.
card
=
this
.
picFileName
;
//lastData.cars
= this.checkDataList;
lastData
.
carList
=
this
.
checkDataList
;
HttpReq
.
truckDispatching
.
RegionalInformationUpdate
(
lastData
).
then
((
res
)
=>
{
form
.
visible
=
false
;
if
(
res
.
code
==
200
){
...
...
@@ -370,26 +364,6 @@ export default {
}).
catch
(
function
(
error
)
{
form
.
status
.
cu
=
0
});
if
(
this
.
oldCheckDataList
.
length
!=
0
){
HttpReq
.
truckDispatching
.
RegionalInformationCarDel
(
this
.
oldCheckDataList
).
then
((
res
)
=>
{})
}
this
.
$nextTick
(()
=>
{
this
.
checkDataList
.
forEach
((
carItem
,
index
)
=>
{
let
uploadCarData
=
{};
uploadCarData
.
car
=
carItem
;
uploadCarData
.
areaId
=
item
.
code
;
HttpReq
.
truckDispatching
.
RegionalInformationCarAdd
(
uploadCarData
).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
}
else
{
this
.
$notify
({
title
:
res
.
msg
,
type
:
'
error
'
,
duration
:
2500
})
}
}).
catch
(
function
(
error
)
{
});
})
})
},
//删除区域信息
reqRemoveProject
(
item
,
weilanName
,
items
){
...
...
@@ -410,7 +384,7 @@ export default {
this
.
loadData
();
})
HttpReq
.
truckDispatching
.
screenMapSetUpDel
(
weilanName
).
then
((
res
)
=>
{})
HttpReq
.
truckDispatching
.
RegionalCaiDianQuery
({
areaName
:
items
.
name
}).
then
((
resAll
)
=>
{
if
(
resAll
.
code
==
200
){
//totalElements == 0 说明为卸区,删除卸区对应点以及路径图信息
...
...
@@ -533,7 +507,7 @@ export default {
.el-table
.success-row
{
background
:
#f0f9eb
;
}
.device-manage
{
.panel-bottom
{
.el-button
{
margin
:
2px
0
;
padding
:
6px
15px
;
font-size
:
14px
;}
...
...
@@ -546,9 +520,9 @@ export default {
}
.el-button--warning
:focus
,
.el-button--warning
:hover
{
background
:
#ebb563
;
border-color
:
#ebb563
;}
}
}
}
.mapcontainer3
{
height
:
50vh
;
...
...
src/views/slopeMonitoring/slopeDevice/index.vue
0 → 100644
View file @
4c3b9713
<
template
>
<div
class=
"common-page device-manage"
>
<div
class=
"option page-row"
>
<!--工具栏-->
<div
class=
"head-container"
>
<!-- 搜索 -->
<label
class=
"el-form-item-label"
style=
"font-weight: 500;"
>
设备号
</label>
<el-input
v-model=
"query.formId"
clearable
size=
"small"
placeholder=
"请输入设备号"
style=
"width:180px;"
/>
<label
class=
"el-form-item-label"
style=
"font-weight: 500;"
>
在线状态
</label>
<el-select
v-model=
"query.stu"
placeholder=
"请选择"
>
<el-option
v-for=
"item in stuOpts"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
></el-option>
</el-select>
<label
class=
"el-form-item-label"
style=
"font-weight: 500;"
>
日期范围
</label>
<el-date-picker
v-model=
"query.createTime"
type=
"datetimerange"
value-format=
"yyyy-MM-dd HH:MM:SS"
range-separator=
"至"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
>
</el-date-picker>
<el-button
size=
"mini"
type=
"success"
icon=
"el-icon-search"
@
click=
"toSearch"
>
搜索
</el-button>
<el-button
size=
"mini"
icon=
"el-icon-refresh"
@
click=
"clearLimit"
>
重置
</el-button>
</div>
</div>
<!-- 表格 -->
<div
class=
"panel-bottom page-row"
>
<div
class=
"ctin-box"
>
<div
class=
"content-within"
>
<div
class=
"content-fix"
>
<div
class=
"toolbar"
>
<el-button
size=
"mini"
type=
"primary"
icon=
"el-icon-plus"
@
click=
"toAdd"
>
新增
</el-button>
</div>
<div
class=
"content"
>
<el-table
:data=
"tableData"
v-loading=
"loading"
border
style=
"width:auto"
:row-class-name=
"tableRowClassName"
>
<el-table-column
prop=
"formId"
label=
"设备名称"
align=
"center"
></el-table-column>
<el-table-column
prop=
"username"
label=
"设备类型"
align=
"center"
></el-table-column>
<el-table-column
prop=
"carNo"
label=
"设备编号"
align=
"center"
></el-table-column>
<el-table-column
prop=
"carClass"
label=
"数值单位"
align=
"center"
></el-table-column>
<el-table-column
prop=
"createTime"
label=
"安装日期"
align=
"center"
></el-table-column>
<el-table-column
prop=
"createTime"
label=
"生产厂家"
align=
"center"
></el-table-column>
<el-table-column
prop=
"createTime"
label=
"最后更新时间"
align=
"center"
></el-table-column>
<el-table-column
prop=
"carClass"
label=
"状态"
align=
"center"
></el-table-column>
<el-table-column
label=
"操作"
align=
"center"
fixed=
"right"
>
<template
slot-scope=
"scope"
>
<el-button
size=
"mini"
type=
"primary"
icon=
"el-icon-edit"
@
click=
"toEdit(scope.row)"
></el-button>
<el-button
size=
"mini"
type=
"danger"
icon=
"el-icon-delete"
@
click=
"toDelete(scope.row)"
></el-button>
</
template
>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total=
"total"
:current-page=
"page"
style=
"margin-top: 8px;"
layout=
"total, prev, pager, next, sizes"
@
size-change=
"sizeChange"
@
current-change=
"pageChange"
/>
</div>
</div>
</div>
</div>
</div>
<!-- 表单渲染 -->
<el-dialog
append-to-body
:close-on-click-modal=
"true"
:before-close=
"cancelForm"
:visible.sync=
"visible"
:title=
"title"
width=
"800px"
>
<el-form
:model=
"formData"
:rules=
"rules"
ref=
"formViewRef"
:inline=
"true"
:status-icon=
"true"
size=
"mini"
>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"设备名称:"
prop=
"name"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.name"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"设备类型:"
class=
"form-cell"
prop=
"devType"
>
<div
class=
"cell-box"
>
<el-select
v-model=
"formData.devType"
placeholder=
"无"
class=
"cell-input"
>
<el-option
v-for=
"item in sdOptions"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"设备编号:"
class=
"form-cell"
prop=
"devNo"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.devNo"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"数值单位:"
class=
"form-cell"
prop=
"devUnit"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.devUnit"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"安装日期:"
class=
"form-cell"
prop=
"installDate"
>
<div
class=
"cell-box"
>
<el-date-picker
v-model=
"formData.installDate"
type=
"date"
placeholder=
"选择日期"
></el-date-picker>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"生产厂家:"
class=
"form-cell"
prop=
"manufactor"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.manufactor"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"24"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"安装位置:"
class=
"form-cell"
prop=
"lng"
style=
"height: 36px"
>
<div
class=
"cell-box"
style=
"display: flex"
>
<div
style=
"width: 200px"
>
经度: {{ formData.lng }}
</div>
<div
style=
"width: 200px"
>
纬度: {{ formData.lat }}
</div>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"24"
>
<div
class=
"grid-content"
>
<div
id=
"centerDiv"
class=
"mapcontainer"
>
<mars3dViewerMap
:url=
"configUrl"
@
onload=
"onMapload"
ref=
"mars3dViewerMapMethod"
mapKey=
"mapPointView"
/>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"安装高度:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"供电和通信方式:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"设备精度:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"海拔(米):"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"一级预警阈值:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"二级预警阈值:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"三级预警阈值:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"四级预警阈值:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"在用状态:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-select
v-model=
"formData.xxxxx"
placeholder=
"无"
class=
"cell-input"
>
<el-option
v-for=
"item in sdOptions"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"同步状态:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-select
v-model=
"formData.xxxxx"
placeholder=
"无"
class=
"cell-input"
>
<el-option
v-for=
"item in sdOptions"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"设备ip地址:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"grid-content"
>
<el-form-item
label=
"传感器初始值:"
class=
"form-cell"
>
<div
class=
"cell-box"
>
<el-input
v-model=
"formData.xxxxx"
class=
"cell-input"
></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
<div
slot=
"footer"
class=
"dialog-footer"
>
<el-button
type=
"text"
@
click=
"cancelForm"
>
取消
</el-button>
<el-button
type=
"primary"
@
click=
"submitForm('formViewRef', formData)"
>
确认
</el-button>
</div>
</el-dialog>
</div>
</template>
<
script
>
import
{
Tools
,
HttpReq
,
Dates
}
from
'
@/assets/js/common.js
'
;
import
mars3dViewerMap
from
"
../../../components/mars3d/Map5.vue
"
;
import
*
as
mars3d
from
"
mars3d
"
;
import
*
as
Cesium
from
"
mars3d-cesium
"
;
import
kongzhidiantubiao
from
"
../../../assets/images/cutGraph/kongzhidian1.png
"
;
export
default
{
name
:
'
slopeDevice
'
,
components
:
{
mars3dViewerMap
,
},
data
()
{
const
basePathUrl
=
window
.
basePathUrl
||
''
return
{
configUrl
:
basePathUrl
+
'
config/config.json
'
,
title
:
'
新增
'
,
visible
:
false
,
loading
:
false
,
page
:
1
,
size
:
10
,
total
:
0
,
query
:
{},
stuOpts
:
[
{
label
:
'
离线
'
,
value
:
0
},
{
label
:
'
在线
'
,
value
:
1
},
],
sdOptions
:
[
{
label
:
'
一类设备
'
,
value
:
1
},
{
label
:
'
二类设备
'
,
value
:
2
},
],
tableData
:
[],
formData
:
{
lng
:
''
,
lat
:
''
,
name
:
''
,
devType
:
''
,
devNo
:
''
,
devUnit
:
''
,
installDate
:
''
,
manufactor
:
''
,
},
rules
:
{
lng
:
{
required
:
true
,
message
:
'
请在地图上放置设备
'
,
trigger
:
'
blur
'
},
name
:
{
required
:
true
,
message
:
'
'
,
trigger
:
'
blur
'
},
devType
:
{
required
:
true
,
message
:
'
'
,
trigger
:
'
blur
'
},
devNo
:
{
required
:
true
,
message
:
'
'
,
trigger
:
'
blur
'
},
devUnit
:
{
required
:
true
,
message
:
'
'
,
trigger
:
'
blur
'
},
installDate
:
{
required
:
true
,
message
:
'
'
,
trigger
:
'
blur
'
},
manufactor
:
{
required
:
true
,
message
:
'
'
,
trigger
:
'
blur
'
},
},
}
},
mounted
()
{
this
.
$nextTick
(()
=>
{
this
.
loadData
();
})
},
methods
:
{
onMapload
(
map
)
{
map
.
unbindContextMenu
();
var
graphicLayer
=
new
mars3d
.
layer
.
GraphicLayer
();
map
.
addLayer
(
graphicLayer
);
const
graphic
=
new
mars3d
.
graphic
.
PointEntity
({
style
:
{
color
:
"
#ff0000
"
,
pixelSize
:
10
,
outlineColor
:
"
#ffffff
"
,
outlineWidth
:
2
,
label
:
{
text
:
"
放置位置
"
,
font_size
:
18
,
color
:
"
#ff0000
"
,
outline
:
true
,
outlineColor
:
"
#000000
"
,
outlineWidth
:
2
,
pixelOffsetY
:
-
24
,
distanceDisplayCondition
:
true
,
distanceDisplayCondition_far
:
500000
,
distanceDisplayCondition_near
:
0
}
},
})
graphicLayer
.
addGraphic
(
graphic
);
map
.
on
(
mars3d
.
EventType
.
click
,
(
event
)
=>
{
let
p
=
mars3d
.
LngLatPoint
.
fromCartesian
(
event
.
cartesian
);
this
.
formData
.
lng
=
p
.
lng
;
this
.
formData
.
lat
=
p
.
lat
;
graphicLayer
.
eachGraphic
((
graphic
)
=>
{
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
p
.
lng
,
p
.
lat
,
0
),
0
)
})
});
},
loadData
()
{
var
sort
=
'
id,desc
'
;
var
param
=
this
.
query
;
param
.
page
=
this
.
page
-
1
;
param
.
pageSize
=
this
.
size
;
param
.
sort
=
sort
;
this
.
$nextTick
(()
=>
{
//获取安检信息
HttpReq
.
truckDispatching
.
ajReportListFind
(
param
).
then
((
res
)
=>
{
if
(
res
.
code
==
200
)
{
this
.
loading
=
false
;
this
.
tableData
=
res
.
data
.
records
;
this
.
total
=
res
.
data
.
total
;
}
})
})
},
toAdd
()
{
this
.
title
=
'
新增
'
;
this
.
visible
=
true
;
},
toEdit
()
{
},
toDelete
(
item
)
{
var
id
=
item
.
id
;
this
.
$confirm
(
'
确认删除该条数据吗?
'
,
'
提示
'
,
{
confirmButtonText
:
'
确定
'
,
cancelButtonText
:
'
取消
'
,
type
:
'
warning
'
}).
then
((
e
)
=>
{
}).
catch
((
e
)
=>
{
})
},
cancelForm
()
{
this
.
visible
=
false
;
},
tableRowClassName
({
row
,
rowIndex
})
{
},
// 点击搜索
toSearch
()
{
this
.
page
=
1
;
this
.
loadData
();
},
// 重置搜索
clearLimit
()
{
this
.
query
=
{};
this
.
loadData
()
},
pageChange
(
e
)
{
this
.
page
=
e
this
.
loadData
()
},
sizeChange
(
e
)
{
this
.
page
=
1
this
.
size
=
e
this
.
loadData
()
},
submitForm
(
validateName
,
item
)
{
this
.
$refs
[
validateName
].
validate
(
valid
=>
{
if
(
valid
)
{
// if (this.title === '新增') {
// this.reqAddItem(this.form, item)
// } else {
// this.reqUpdateItem(this.form, item)
// }
alert
(
9999
);
}
else
{
alert
(
666
)
}
});
},
},
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scope
>
.el-table
.warning-row
{
background
:
oldlace
;
}
.el-table
.success-row
{
background
:
#f0f9eb
;
}
.cell-input
{
//min-width: 220px;
}
.form-cell
{
margin
:
0
!
important
;
width
:
100%
;
}
.grid-content
{
//border: 1px solid rgba(100, 100, 100, 0.1);
padding
:
5px
30px
;
}
.cell-box
.el-input__inner
{
border
:
1px
solid
rgba
(
100
,
100
,
100
,
0
.1
);
}
.cell-box
.el-input.is-disabled
.el-input__inner
{
border
:
1px
solid
rgba
(
100
,
100
,
100
,
0
.1
);
background
:
white
;
cursor
:
text
;
}
.cell-box
.el-input.is-disabled
.el-input__icon
{
cursor
:
text
;
}
.cell-box
.el-icon-arrow-up
:before
{
content
:
''
;
}
.mapcontainer
{
height
:
30vh
;
width
:
680px
;
overflow
:
hidden
;
}
</
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