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
d20c6459
Commit
d20c6459
authored
Sep 10, 2021
by
王晓倩
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/master'
parents
02ead1d7
03923dd3
Hide whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
434 additions
and
199 deletions
+434
-199
index.html
gassafety-web/public/index.html
+1
-1
bottomBg.png
gassafety-web/src/assets/images/bottomBg.png
+0
-0
l.png
gassafety-web/src/assets/images/l.png
+0
-0
listBg.png
gassafety-web/src/assets/images/listBg.png
+0
-0
r.png
gassafety-web/src/assets/images/r.png
+0
-0
rightWrapperBg.png
gassafety-web/src/assets/images/rightWrapperBg.png
+0
-0
element-ui.scss
gassafety-web/src/assets/styles/element-ui.scss
+0
-12
gassafety.scss
gassafety-web/src/assets/styles/gassafety.scss
+54
-13
gassafety1.scss
gassafety-web/src/assets/styles/gassafety1.scss
+108
-106
checkPipeLineLocation.vue
...ty-web/src/components/mapDialog/checkPipeLineLocation.vue
+1
-0
gaodeMapView.js
gassafety-web/src/utils/gaodeMapView.js
+21
-17
Bottom.vue
...ty-web/src/views/enterprise/mapView/components/Bottom.vue
+40
-26
Right.vue
...ety-web/src/views/enterprise/mapView/components/Right.vue
+152
-0
index.vue
gassafety-web/src/views/enterprise/mapView/index.vue
+57
-24
No files found.
gassafety-web/public/index.html
View file @
d20c6459
...
...
@@ -8,7 +8,7 @@
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<title><
%=
webpackConfig
.
name
%
></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<script
src=
"https://webapi.amap.com/maps?v=2.0&key=
eed7ca3167f765467aa377fa78e61ece
&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"
></script>
<script
src=
"https://webapi.amap.com/maps?v=2.0&key=
49fcb156d466062435d7d33437099582
&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"
></script>
<script
src=
"./EasyWasmPlayer.js"
></script>
<style>
html
,
...
...
gassafety-web/src/assets/images/bottomBg.png
0 → 100644
View file @
d20c6459
3.35 KB
gassafety-web/src/assets/images/l.png
View replaced file @
02ead1d7
View file @
d20c6459
1.21 KB
|
W:
|
H:
4.46 KB
|
W:
|
H:
2-up
Swipe
Onion skin
gassafety-web/src/assets/images/listBg.png
0 → 100644
View file @
d20c6459
10.2 KB
gassafety-web/src/assets/images/r.png
View replaced file @
02ead1d7
View file @
d20c6459
2.44 KB
|
W:
|
H:
4.45 KB
|
W:
|
H:
2-up
Swipe
Onion skin
gassafety-web/src/assets/images/rightWrapperBg.png
0 → 100644
View file @
d20c6459
235 KB
gassafety-web/src/assets/styles/element-ui.scss
View file @
d20c6459
...
...
@@ -78,19 +78,7 @@
display
:
inline-flex
!
important
;
}
// gis地图里抽屉的搜索样式
.search-input
{
.el-input__inner
{
height
:
28px
;
min-height
:
28px
;
outline
:
#053b6a
;
&
:focus
{
// outline: #053b6a;
border-color
:
#053b6a
;
}
}
}
// to fix el-date-picker css style
.el-range-separator
{
box-sizing
:
content-box
;
...
...
gassafety-web/src/assets/styles/gassafety.scss
View file @
d20c6459
...
...
@@ -103,61 +103,95 @@
}
}
// gis地图中底部table样式
.right-bottom-data-left
{
.el-table
{
background-color
:
rgba
(
0
,
0
,
0
,
0
)
!
important
;
&
:
:
before
{
height
:
0px
!
important
;
}
td
{
border-bottom
:
none
!
important
;
}
.el-table__header-wrapper
,
.el-table__fixed-header-wrapper
{
tr
{
background-color
:
#213b52
60
!
important
;
}
th
{
word-break
:
break-word
;
background-color
:
#
fff
;
color
:
#525252
;
background-color
:
#
213b52
60
!
important
;
color
:
rgba
(
123
,
248
,
244
,
1
)
;
height
:
30px
;
font-size
:
13px
;
padding
:
0
;
&
.is-leaf
{
border-bottom
:
none
;
}
}
}
.el-table__body-wrapper
{
.el-table__row
:nth-child
(
2n
+
1
)
{
background-color
:
#e6e6e6
;
// background-color: #e6e6e6;
background-color
:
#213b52
60
;
// &:hover {
// td {
// background-color: #f4f4f4;
// }
// }
&
:hover
td
{
background-color
:
#7bf8f4
30
!
important
;
}
td
{
.cell
{
color
:
#525252
;
// color: #525252;
color
:
rgba
(
123
,
248
,
244
,
1
);
}
}
}
.el-table__row
:nth-child
(
2n
)
{
background-color
:
#f4f4f4
;
// background-color: #213b52;
background-color
:
#063157
60
;
// &:hover {
// td {
// background-color: #e6e6e6;
// }
// }
&
:hover
td
{
background-color
:
#7bf8f4
30
!
important
;
}
td
{
.cell
{
color
:
#053b6a
;
// color: #053b6a;
color
:
#fff
;
}
}
}
}
.el-table__body-wrapper
{
.el-button
[
class
*=
"el-icon-"
]
+
span
{
margin-left
:
1px
;
//
margin-left: 1px;
}
}
}
}
// gis地图里抽屉的搜索样式
.search-input
{
.el-input__inner
{
height
:
28px
;
min-height
:
28px
;
outline
:
#053b6a
;
background
:
none
!
important
;
color
:
#fff
;
&
:focus
{
// outline: #053b6a;
border-color
:
#fff
;
}
}
}
/** 表单布局 **/
.form-header
{
font-size
:
15px
;
...
...
@@ -346,3 +380,10 @@
}
// background-color: ;
}
// gis地图内的bottom列表,如果隐藏在出现会有一个bug,这样可以解决
.el-bottom
{
.el-table__body-wrapper
{
height
:
140px
!
important
;
}
}
gassafety-web/src/assets/styles/gassafety1.scss
View file @
d20c6459
/**
/**
* 通用css样式布局处理
* Copyright (c) 2019 gassafety
*/
/** 基础通用 **/
/** 基础通用 **/
.pt5
{
padding-top
:
5px
;
padding-top
:
5px
;
}
.pr5
{
padding-right
:
5px
;
padding-right
:
5px
;
}
.pb5
{
padding-bottom
:
5px
;
padding-bottom
:
5px
;
}
.mt5
{
margin-top
:
5px
;
margin-top
:
5px
;
}
.mr5
{
margin-right
:
5px
;
margin-right
:
5px
;
}
.mb5
{
margin-bottom
:
5px
;
margin-bottom
:
5px
;
}
.mb8
{
margin-bottom
:
8px
;
margin-bottom
:
8px
;
}
.ml5
{
margin-left
:
5px
;
margin-left
:
5px
;
}
.mt10
{
margin-top
:
10px
;
margin-top
:
10px
;
}
.mr10
{
margin-right
:
10px
;
margin-right
:
10px
;
}
.mb10
{
margin-bottom
:
10px
;
margin-bottom
:
10px
;
}
.ml0
{
margin-left
:
10px
;
margin-left
:
10px
;
}
.mt20
{
margin-top
:
20px
;
margin-top
:
20px
;
}
.mr20
{
margin-right
:
20px
;
margin-right
:
20px
;
}
.mb20
{
margin-bottom
:
20px
;
margin-bottom
:
20px
;
}
.m20
{
margin-left
:
20px
;
margin-left
:
20px
;
}
.el-dialog
:not
(
.is-fullscreen
)
{
margin-top
:
6vh
!
important
;
.el-dialog
:not
(
.is-fullscreen
)
{
margin-top
:
6vh
!
important
;
}
.el-table
{
.el-table__header-wrapper
,
.el-table__fixed-header-wrapper
{
th
{
word-break
:
break-word
;
background-color
:
#f8f8f9
;
color
:
#515a6e
;
height
:
40px
;
font-size
:
13px
;
}
}
.el-table__body-wrapper
{
.el-button
[
class
*=
"el-icon-"
]
+
span
{
margin-left
:
1px
;
}
}
.el-table__header-wrapper
,
.el-table__fixed-header-wrapper
{
th
{
word-break
:
break-word
;
background-color
:
#f8f8f9
;
color
:
#515a6e
;
height
:
40px
;
font-size
:
13px
;
}
}
.el-table__body-wrapper
{
.el-button
[
class
*=
"el-icon-"
]
+
span
{
margin-left
:
1px
;
}
}
}
/** 表单布局 **/
.form-header
{
font-size
:
15px
;
color
:
#6379bb
;
border-bottom
:
1px
solid
#ddd
;
margin
:
8px
10px
25px
10px
;
padding-bottom
:
5px
font-size
:
15px
;
color
:
#6379bb
;
border-bottom
:
1px
solid
#ddd
;
margin
:
8px
10px
25px
10px
;
padding-bottom
:
5px
;
}
/** 表格布局 **/
.pagination-container
{
position
:
relative
;
height
:
25px
;
margin-bottom
:
10px
;
margin-top
:
15px
;
padding
:
10px
20px
!
important
;
position
:
relative
;
height
:
25px
;
margin-bottom
:
10px
;
margin-top
:
15px
;
padding
:
10px
20px
!
important
;
}
/* tree border */
.tree-border
{
margin-top
:
5px
;
border
:
1px
solid
#e5e6e7
;
background
:
#FFFFFF
none
;
border-radius
:
4px
;
margin-top
:
5px
;
border
:
1px
solid
#e5e6e7
;
background
:
#ffffff
none
;
border-radius
:
4px
;
}
.pagination-container
.el-pagination
{
right
:
0
;
position
:
absolute
;
right
:
0
;
position
:
absolute
;
}
.el-table
.fixed-width
.el-button--mini
{
padding-left
:
0
;
padding-right
:
0
;
width
:
inherit
;
padding-left
:
0
;
padding-right
:
0
;
width
:
inherit
;
}
.el-tree-node__content
>
.el-checkbox
{
margin-right
:
8px
;
margin-right
:
8px
;
}
.list-group-striped
>
.list-group-item
{
border-left
:
0
;
border-right
:
0
;
border-radius
:
0
;
padding-left
:
0
;
padding-right
:
0
;
border-left
:
0
;
border-right
:
0
;
border-radius
:
0
;
padding-left
:
0
;
padding-right
:
0
;
}
.list-group
{
padding-left
:
0px
;
list-style
:
none
;
padding-left
:
0px
;
list-style
:
none
;
}
.list-group-item
{
border-bottom
:
1px
solid
#e7eaec
;
border-top
:
1px
solid
#e7eaec
;
margin-bottom
:
-1px
;
padding
:
11px
0px
;
font-size
:
13px
;
border-bottom
:
1px
solid
#e7eaec
;
border-top
:
1px
solid
#e7eaec
;
margin-bottom
:
-1px
;
padding
:
11px
0px
;
font-size
:
13px
;
}
.pull-right
{
float
:
right
!
important
;
float
:
right
!
important
;
}
.el-card__header
{
padding
:
14px
15px
7px
;
min-height
:
40px
;
padding
:
14px
15px
7px
;
min-height
:
40px
;
}
.el-card__body
{
padding
:
15px
20px
20px
20px
;
padding
:
15px
20px
20px
20px
;
}
.card-box
{
padding-right
:
15px
;
padding-left
:
15px
;
margin-bottom
:
10px
;
padding-right
:
15px
;
padding-left
:
15px
;
margin-bottom
:
10px
;
}
/* button color */
.el-button--cyan.is-active
,
.el-button--cyan
:active
{
background
:
#20
B2AA
;
border-color
:
#20
B2AA
;
color
:
#
FFFFFF
;
background
:
#20
b2aa
;
border-color
:
#20
b2aa
;
color
:
#
ffffff
;
}
.el-button--cyan
:focus
,
.el-button--cyan
:hover
{
background
:
#48
D1CC
;
border-color
:
#48
D1CC
;
color
:
#
FFFFFF
;
background
:
#48
d1cc
;
border-color
:
#48
d1cc
;
color
:
#
ffffff
;
}
.el-button--cyan
{
background-color
:
#20
B2AA
;
border-color
:
#20
B2AA
;
color
:
#
FFFFFF
;
background-color
:
#20
b2aa
;
border-color
:
#20
b2aa
;
color
:
#
ffffff
;
}
/* text color */
.text-navy
{
color
:
#1ab394
;
color
:
#1ab394
;
}
.text-primary
{
color
:
inherit
;
color
:
inherit
;
}
.text-success
{
color
:
#1c84c6
;
color
:
#1c84c6
;
}
.text-info
{
color
:
#23c6c8
;
color
:
#23c6c8
;
}
.text-warning
{
color
:
#f8ac59
;
color
:
#f8ac59
;
}
.text-danger
{
color
:
#ed5565
;
color
:
#ed5565
;
}
.text-muted
{
color
:
#888888
;
color
:
#888888
;
}
/* image */
.img-circle
{
border-radius
:
50%
;
border-radius
:
50%
;
}
.img-lg
{
width
:
120px
;
height
:
120px
;
width
:
120px
;
height
:
120px
;
}
.avatar-upload-preview
{
position
:
absolute
;
top
:
50%
;
transform
:
translate
(
50%
,
-50%
);
width
:
200px
;
height
:
200px
;
border-radius
:
50%
;
box-shadow
:
0
0
4px
#ccc
;
overflow
:
hidden
;
position
:
absolute
;
top
:
50%
;
transform
:
translate
(
50%
,
-50%
);
width
:
200px
;
height
:
200px
;
border-radius
:
50%
;
box-shadow
:
0
0
4px
#ccc
;
overflow
:
hidden
;
}
/* 拖拽列样式 */
.sortable-ghost
{
opacity
:
.8
;
color
:
#fff
!
important
;
background
:
#42b983
!
important
;
.sortable-ghost
{
opacity
:
0
.8
;
color
:
#fff
!
important
;
background
:
#42b983
!
important
;
}
.top-right-btn
{
position
:
relative
;
float
:
right
;
position
:
relative
;
float
:
right
;
}
gassafety-web/src/components/mapDialog/checkPipeLineLocation.vue
View file @
d20c6459
...
...
@@ -16,6 +16,7 @@
<el-button
size=
"small"
@
click=
"$emit('dialogcancelFun')"
>
取消
</el-button>
</el-row>
</el-dialog>
</
template
>
<
script
>
...
...
gassafety-web/src/utils/gaodeMapView.js
View file @
d20c6459
...
...
@@ -69,9 +69,9 @@ class gaodeMap {
showLabel
:
true
,
// labelzIndex: 110,
pitch
:
8
,
zoom
:
9
zoom
:
9
,
//mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae
',
mapStyle
:
'amap://styles/1c84d2203793b0f622df2cda53db1afd
'
,
});
this
.
myMap
=
map
;
this
.
myMap
.
on
(
"mousedown"
,
e
=>
{
...
...
@@ -216,7 +216,7 @@ class gaodeMap {
options
.
scrollWheel
=
true
;
map
.
setStatus
(
options
);
});
this
.
infoWindowMove
(
infoWindow
);
//
this.infoWindowMove(infoWindow);
let
marker
=
new
AMap
.
Marker
({
position
:
[
data
.
longitude
,
data
.
latitude
],
...
...
@@ -955,7 +955,7 @@ class gaodeMap {
boxCollision
(
infowindowDom
)
{
// gis地图页面的bottomdata组件
const
{
RightBototmData
:
{
$el
:
pageDom
}
Bottom
:
{
$el
:
pageDom
}
}
=
this
.
view
.
$refs
;
let
{
offsetTop
:
ay
,
...
...
@@ -1015,22 +1015,26 @@ class gaodeMap {
}
// infoWindow的拖拽
infoWindowMove
(
infoWindow
)
{
let
disX
,
disY
,
dom
;
let
disX
,
disY
,
dom
;
infoWindow
.
on
(
"mousedown"
,
e
=>
{
dom
=
e
.
target
.
dom
;
// const a = dom.offsetTop + 20;
// dom.style.top = a + "px";
// console.log(dom.offsetTop);
// console.log(e.originEvent.clientY);
// console.log(dom.offsetLeft);
// console.log(e.originEvent.clientX);
disX
=
dom
.
offsetTop
-
e
.
originEvent
.
clientX
;
disY
=
dom
.
offsetLeft
-
e
.
originEvent
.
clientY
;
window
.
addEventListener
(
"mousemove"
,(
e
)
=>
{
})
disX
=
e
.
originEvent
.
clientX
-
dom
.
offsetLeft
;
disY
=
e
.
originEvent
.
clientY
-
dom
.
offsetTop
;
console
.
log
(
disX
,
disY
);
window
.
addEventListener
(
"mousemove"
,
windowMove
);
});
const
windowMove
=
e
=>
{
const
mouseX
=
e
.
clientX
;
const
mouseY
=
e
.
clientY
const
domTop
=
mouseY
-
disY
;
const
domLeft
=
mouseX
-
disX
;
// console.log(domTop,domLeft)
dom
.
style
.
top
=
domTop
+
"px"
;
dom
.
style
.
left
=
domLeft
+
"px"
;
};
infoWindow
.
on
(
"mouseup"
,
()
=>
{
window
.
removeEventListener
(
"mousemove"
,
windowMove
);
});
}
// 关闭转化到vue的dom
removeCloneDom
()
{
...
...
gassafety-web/src/views/enterprise/mapView/components/
RightBototmData
.vue
→
gassafety-web/src/views/enterprise/mapView/components/
Bottom
.vue
View file @
d20c6459
...
...
@@ -2,14 +2,14 @@
<div
class=
"wrapper"
>
<div
class=
"left"
>
<div
class=
"top"
>
<span>
设备报警最新记录
</span>
<span
class=
"title"
>
设备报警最新记录
</span>
<span
@
click=
"repeatClick"
class=
"repeat"
>
刷新
</span>
<transition
name=
"fade"
>
<span
v-show=
"repeatFinshed"
class=
"repeat2"
>
数据刷新成功
</span>
</transition>
<span
@
click=
"moreClick"
class=
"more"
>
更多
>>
</span>
<span
@
click=
"moreClick"
class=
"more"
>
更多
</span>
</div>
<div
class=
"bottom right-bottom-data-left"
>
...
...
@@ -22,11 +22,13 @@
</div>
-->
<!--
<div
class=
"one"
>
设备编号:
<span>
1123123123
</span></div>
<div
class=
"two"
>
报警时间:
<span>
34523452345
</span></div>
-->
<el-table
size=
"mini"
:data=
"tableData"
style=
"width: 100%"
height=
"170"
:height=
"tableHeight"
class=
"el-bottom"
>
<el-table-column
prop=
"deviceCode"
label=
"设备编号"
width=
"100"
>
</el-table-column>
...
...
@@ -56,7 +58,7 @@
</div>
</div>
<div
class=
"right"
>
<
!-- <
div class="right">
<template v-for="(item, index) in list">
<div
class="right-content"
...
...
@@ -77,7 +79,7 @@
</div>
</div>
</template>
</div>
</div>
-->
</div>
</template>
...
...
@@ -108,7 +110,7 @@ export default {
4
:
"icon-ylbgs"
,
99
:
"icon-gdcd"
,
},
tableHeight
:
170
,
tableData
:
[
{
deviceCode
:
"2016-05-03"
,
...
...
@@ -226,43 +228,62 @@ export default {
position
:
fixed
;
right
:
10px
;
bottom
:
10px
;
overflow
:
hidden
;
// background-color: #fff;
display
:
flex
;
justify-content
:
space-between
;
&
>
div
{
}
.left
{
width
:
680px
;
width
:
716px
;
height
:
198px
;
margin-right
:
12px
;
box-shadow
:
2px
2px
5px
rgba
(
0
,
0
,
0
,
0
.16
);
// background-color: #fff;
// color: #fff;
font-size
:
14px
;
font-weight
:
400
;
background-image
:
url(../../../../assets/images/bottomBg.png)
;
.el-table__body-wrappe
{
height
:
140px
!
important
;
}
.top
{
height
:
32
px
;
background-color
:
#053b6a
;
height
:
19
px
;
//
background-color: #053b6a;
color
:
#fff
;
line-height
:
32px
;
padding-left
:
12px
;
//
position: relative;
//
line-height: 32px;
//
padding-left: 12px;
position
:
relative
;
span
{
display
:
inline-block
;
.title
{
position
:
absolute
;
left
:
50%
;
margin-left
:
-92px
;
top
:
-5px
;
}
.repeat
{
margin-left
:
20px
;
position
:
absolute
;
top
:
-5px
;
right
:
160px
;
color
:
#fff
;
cursor
:
pointer
;
&
:hover
{
color
:
#2788ea
;
}
}
.repeat2
{
margin-left
:
20px
;
position
:
absolute
;
right
:
206px
;
color
:
#67c23a
;
}
.more
{
position
:
absolute
;
right
:
38px
;
top
:
-5px
;
color
:
#fff
;
float
:
right
;
margin-right
:
20px
;
cursor
:
pointer
;
...
...
@@ -272,15 +293,8 @@ export default {
}
}
.bottom
{
.table-top
{
// background-color: red;
// display: flex;
// justify-content: space-between;
// div {
// width: 100%;
// text-align: center;
// }
}
width
:
680px
;
margin
:
0
auto
;
}
}
.right
{
...
...
gassafety-web/src/views/enterprise/mapView/components/Right.vue
0 → 100644
View file @
d20c6459
<
template
>
<div
class=
"wrapper"
>
<!--
<img
src=
"/static/img/rightWrapperBg.25536016.png"
alt=
""
>
-->
<div
class=
"right"
>
<template
v-for=
"(item, index) in list"
>
<div
class=
"right-content"
:class=
"
{ three: index == 2 }"
:key="item.type"
>
<div
class=
"text-icon"
>
<i
class=
"iconfont"
:class=
"[iconClass(item),
{ iconFontSize: item.type == 4 }]"
>
</i>
</div>
<div
class=
"text"
>
<div
class=
"top"
>
{{
typeName
[
item
.
type
]
}}
</div>
<div
class=
"bottom"
>
{{
item
.
number
}}{{
item
.
type
==
99
?
"M"
:
"个"
}}
</div>
</div>
</div>
</
template
>
</div>
</div>
</template>
<
script
>
import
{
listDeviceAlarm
}
from
"@/api/dataMonitoring/deviceAlarm"
;
export
default
{
props
:
{
list
:
{
type
:
Array
,
},
},
data
()
{
return
{
timer
:
null
,
repeatFinshed
:
false
,
typeName
:
{
1
:
"调压箱"
,
2
:
"阀门井"
,
3
:
"流量计"
,
4
:
"压力表"
,
99
:
"管线长度"
,
},
iconList
:
{
1
:
"icon-tyxgs"
,
2
:
"icon-fmjgs"
,
3
:
"icon-lljgs"
,
4
:
"icon-ylbgs"
,
99
:
"icon-gdcd"
,
},
};
},
created
()
{},
methods
:
{
iconClass
(
item
)
{
return
this
.
iconList
[
item
.
type
];
},
},
};
</
script
>
<
style
lang=
"scss"
scoped
>
.wrapper
{
width
:
300px
;
height
:
800px
;
position
:
absolute
;
top
:
40px
;
right
:
0
;
overflow-x
:
hidden
;
// right: 10px;
// top: 131px;
background-image
:
url(/static/img/rightWrapperBg.25536016.png)
;
background-position-x
:
-72px
;
background-position-y
:
center
;
background-size
:
193%
137%
;
background-repeat
:
no-repeat
;
img
{
// width: 300px;
// height: 800px;
// position: absolute;
// top:0;
// left:0;
}
&
>
div
{
}
.right
{
position
:
absolute
;
right
:
10px
;
top
:
51px
;
&
>
.right-content
{
// background-color: #fff;
width
:
247px
;
height
:
104px
;
margin-bottom
:
29px
;
box-shadow
:
2px
2px
5px
rgba
(
0
,
0
,
0
,
0
.16
);
background-image
:
url(../../../../assets/images/listBg.png)
;
margin-right
:
10px
;
display
:
flex
;
&
.three
{
margin-right
:
0px
;
}
// align-items: center;
.text-icon
{
line-height
:
102px
;
padding-left
:
28px
;
margin-right
:
22px
;
margin-left
:
30px
;
i
{
color
:
#7bf8f4
;
font-size
:
60px
;
}
}
.text
{
font-size
:
14px
;
padding-top
:
16px
;
.top
{
color
:
#fff
;
margin-top
:
7px
;
margin-bottom
:
10px
;
font-weight
:
600
;
}
.bottom
{
color
:
#7bf8f4
;
}
}
}
}
// 单独调整下最后一个icon的大小
.iconFontSize
{
font-size
:
50px
!
important
;
}
.fade-enter-to
,
.fade-leave
{
opacity
:
1
;
}
.fade-leave-active
{
transition
:
opacity
0
.5s
;
}
.fade-enter-active
{
transition
:
opacity
0s
;
}
.fade-enter
,
.fade-leave-to
/*
.fade-leave-active
below
version
2
.1.8
*/
{
opacity
:
0
;
}
}
</
style
>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @
d20c6459
...
...
@@ -65,11 +65,16 @@
</el-collapse-transition>
</div>
</div>
<RightBototmData
<Right
v-show=
"rightDataShow"
:class=
"{ classShow: !rightDataShow }"
ref=
"Right"
:list=
"rightBototmData"
/>
<Bottom
v-show=
"bottomDataShow"
:class=
"{ classShow: !bottomDataShow }"
ref=
"
RightBototmData
"
ref=
"
Bottom
"
:list=
"rightBototmData"
/>
<!-- 报警工单 -->
...
...
@@ -278,16 +283,18 @@ import gaodeMap, {
import
{
selectAlarmDevice
}
from
"@/api/dataMonitoring/deviceAlarm.js"
;
import
{
getAllDeviceInfo
,
countDeviceByType
}
from
"@/api/device/deviceInfo"
;
import
{
getMapHiddenTroublelist
}
from
"@/api/riskManagement/hiddenTrouble"
;
import
RightBototmData
from
"./components/RightBototmData.vue"
;
import
Bottom
from
"./components/Bottom.vue"
;
import
Right
from
"./components/Right.vue"
;
import
CreateWork
from
"./components/CreateWork.vue"
;
import
CreateWorkTrouble
from
"./components/CreateWorkTrouble.vue"
;
import
{
getInspectorLocations
}
from
"@/api/inspectorLocation/location"
;
export
default
{
components
:
{
RightBototmData
,
Bottom
,
CreateWork
,
CreateWorkTrouble
,
Right
,
},
data
()
{
return
{
...
...
@@ -377,6 +384,7 @@ export default {
// 右下角的数据data
rightBototmData
:
[],
bottomDataShow
:
true
,
rightDataShow
:
true
,
// 是否显示生成工单弹框
createWorkOpen
:
false
,
//隐患工单
...
...
@@ -1603,11 +1611,13 @@ input[type="radio"] {
left
:
0
;
width
:
348px
;
transition
:
0
.2s
linear
;
background
:
#fff
;
// background: #fff;
// background: #061d3380;
background
:
rgba
(
6
,
29
,
51
,
0
.8
);
// background: red;
opacity
:
0
;
// 优化抽屉出来回去
&
.opacity
{
&
.opacity
{
opacity
:
1
;
}
&
.back
{
...
...
@@ -1627,6 +1637,7 @@ input[type="radio"] {
top
:
14px
;
left
:
39px
;
width
:
236px
;
// background-color: red !important;
.icon-search
{
line-height
:
28px
;
cursor
:
pointer
;
...
...
@@ -1676,7 +1687,8 @@ input[type="radio"] {
// border-right: 1px solid #cccccc;
box-sizing
:
border-box
;
// padding-left: 5px;
color
:
#053b6a
;
// color: #053b6a;
color
:
#fff
;
font-weight
:
600
;
}
}
...
...
@@ -1688,9 +1700,11 @@ input[type="radio"] {
color
:
#1d1d1d
;
&
:hover
{
box-sizing
:
border-box
;
border-bottom
:
1px
solid
#053b6a
;
color
:
#053b6a
;
border-bottom
:
1px
solid
#7fc0f8
;
font-weight
:
600
;
>
div
{
color
:
#7fc0f8
;
}
}
&
.topActive
{
// border-top: 1px solid #cccccc;
...
...
@@ -1707,6 +1721,7 @@ input[type="radio"] {
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
color
:
#fff
;
// border-right: 1px solid #cccccc;
}
}
...
...
@@ -1732,6 +1747,11 @@ input[type="radio"] {
}
&
:hover
{
border-bottom
:
1px
solid
red
;
.no
,
.name
,
.code
{
color
:
red
!
important
;
}
}
}
}
...
...
@@ -1740,14 +1760,15 @@ input[type="radio"] {
height
:
48px
;
padding-left
:
20px
;
display
:
flex
;
background-color
:
#ffffff
;
//
background-color: #ffffff;
box-sizing
:
border-box
;
border-bottom
:
1px
solid
rgba
(
0
,
0
,
0
,
0
.1
);
// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom
:
1px
solid
rgba
(
0
,
0
,
0
,
0
.5
);
cursor
:
pointer
;
position
:
relative
;
// box-sizing: border-box;
&
.firstbox
{
border-top
:
1px
solid
rgba
(
0
,
0
,
0
,
0
.
1
);
border-top
:
1px
solid
rgba
(
0
,
0
,
0
,
0
.
5
);
// box-sizing: border-box;
&
:hover
{
border-top
:
1px
solid
rgba
(
5
,
59
,
106
,
0
);
...
...
@@ -1755,15 +1776,23 @@ input[type="radio"] {
}
&
:hover
{
box-sizing
:
border-box
;
background-color
:
rgba
(
5
,
59
,
106
,
0
.1
);
// background-color: rgba(5, 59, 106, 0.1);
background-color
:
#053b6a
;
border-bottom
:
none
!
important
;
.upPic
{
color
:
#31eaea
;
}
.left
,
.right
{
color
:
#31eaea
!
important
;
}
}
.upPic
{
display
:
inline-block
;
margin-left
:
40px
;
line-height
:
48px
;
font-size
:
16px
;
color
:
#
053b6a
;
color
:
#
fff
;
}
>
i
.ju
{
position
:
absolute
;
...
...
@@ -1787,6 +1816,7 @@ input[type="radio"] {
color
:
#fff
;
}
>
i
.arrow-right
{
color
:
#fff
!
important
;
position
:
absolute
;
right
:
32px
;
top
:
16px
;
...
...
@@ -1797,16 +1827,17 @@ input[type="radio"] {
}
&
.active
{
// background-color: #053b6a;
.left
,
.right
{
color
:
#053b6a
;
}
//
.left,
//
.right {
// color: #fff
;
//
}
>
i
{
color
:
#053b6a
;
color
:
#31eaea
;
font-weight
:
600
;
}
}
.left
{
color
:
#
053b6a
;
color
:
#
fff
;
line-height
:
48px
;
margin-left
:
28px
;
.iconfont
{
...
...
@@ -1814,7 +1845,7 @@ input[type="radio"] {
}
}
.right
{
color
:
#
1d1d1d
;
color
:
#
fff
;
line-height
:
48px
;
font-size
:
16px
;
margin-left
:
4px
;
...
...
@@ -1835,6 +1866,7 @@ input[type="radio"] {
padding-bottom
:
2px
;
.btn
{
border-radius
:
50%
;
background
:
none
;
// width: 14px;
// height: 14px;
padding
:
2px
;
...
...
@@ -1843,6 +1875,7 @@ input[type="radio"] {
display
:
inline-block
;
font-size
:
14px
;
padding
:
0px
5px
;
color
:
#fff
;
}
}
}
...
...
@@ -1851,9 +1884,9 @@ input[type="radio"] {
.switch
{
position
:
absolute
;
font-size
:
30px
;
right
:
-
27
px
;
right
:
-
30
px
;
top
:
50%
;
margin-top
:
-
30
px
;
margin-top
:
-
123
px
;
width
:
40px
;
border-radius
:
40%
;
overflow
:
hidden
;
...
...
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