Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Z
ZiBoYingJI
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
Kimber
ZiBoYingJI
Commits
18d5f37d
Commit
18d5f37d
authored
Sep 26, 2024
by
Kimber
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
'update'
parent
042ca33b
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
549 additions
and
86 deletions
+549
-86
public-detail.js
public/datav/detail/static/js/public-detail.js
+8
-4
index.html
public/datav/index.html
+6
-2
natural.html
public/datav/natural.html
+83
-32
watersource.html
public/datav/watersource.html
+449
-42
home4Index.vue
src/views/home4Index.vue
+3
-6
No files found.
public/datav/detail/static/js/public-detail.js
View file @
18d5f37d
...
...
@@ -108,13 +108,17 @@ var gemhoUtil = {
const
type
=
localStorage
.
getItem
(
'
bigScreenDetailMenuModel
'
)
if
(
type
===
'
emergency
'
){
window
.
open
(
'
/datav/index.html
'
)
//window.open('/datav/index.html')
window
.
location
.
href
=
'
/datav/index.html
'
;
}
else
if
(
type
===
'
natural
'
){
window
.
open
(
'
/datav/natural.html
'
)
//window.open('/datav/natural.html')
window
.
location
.
href
=
'
/datav/natural.html
'
;
}
else
if
(
type
===
'
watersystem
'
){
window
.
open
(
'
/datav/watersource.html
'
)
//window.open('/datav/watersource.html')
window
.
location
.
href
=
'
/datav/watersource.html
'
;
}
else
if
(
type
===
'
ecosystem
'
){
window
.
open
(
'
/datav/index.html
'
)
//window.open('/datav/index.html')
window
.
location
.
href
=
'
/datav/index.html
'
;
}
},
changeMenu
(
item
)
{
...
...
public/datav/index.html
View file @
18d5f37d
...
...
@@ -227,9 +227,13 @@
}
}
.footer
{
.actv{
box-shadow
:
inset
0
0
25px
rgba
(
0
,
0
,
0
,
0.2
);}
.item-wrap
{
&>div{
cursor
:
pointer
;
}
}
}
}
</style>
...
...
@@ -462,7 +466,7 @@
<div
class=
"absolute flex-text footer"
style=
"bottom: 10px;left: 50%;transform: translateX(-50%);"
>
<div
class=
"flex-text"
:style=
"{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }"
>
<div
class=
"flex-text"
:class=
"isFullScreen?'tr-bottom':'tr-bottom-re'"
>
<div
class=
"flex-text
item-wrap
"
:class=
"isFullScreen?'tr-bottom':'tr-bottom-re'"
>
<div
class=
"relative"
@
click=
"mineTypeEvent(1)"
:class=
"{actv:mineType===1}"
>
<img
style=
"width: 134px;height: 146px;"
src=
"static/mine-bg-0.png"
alt=
""
>
<div
class=
"poa-cover flex-text flex-column"
>
...
...
public/datav/natural.html
View file @
18d5f37d
...
...
@@ -248,6 +248,15 @@
span
{
color
:
#aaa
;
width
:
20px
;}
}
}
.footer
{
.actv{
box-shadow
:
inset
0
0
25px
rgba
(
0
,
0
,
0
,
0.2
);}
.item-wrap
{
&>div{
cursor
:
pointer
;
}
}
}
}
</style>
</head>
...
...
@@ -399,38 +408,38 @@
</div>
</div>
<div
class=
"absolute flex-text"
style=
"bottom: 10px;left: 50%;transform: translateX(-50%);"
>
<div
class=
"absolute flex-text
footer
"
style=
"bottom: 10px;left: 50%;transform: translateX(-50%);"
>
<div
class=
"flex-text"
:style=
"{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }"
>
<div
class=
"flex-text"
:class=
"isFullScreen?'tr-bottom':'tr-bottom-re'"
>
<div
class=
"relative
mine-0
"
>
<div
class=
"flex-text
item-wrap
"
:class=
"isFullScreen?'tr-bottom':'tr-bottom-re'"
>
<div
class=
"relative
"
@
click=
"mineTypeEvent(1)"
:class=
"{actv:mineType===1}
"
>
<img
style=
"width: 134px;height: 146px;"
src=
"static/mine-bg-0.png"
alt=
""
>
<div
class=
"poa-cover flex-text flex-column"
>
<div
class=
"color-theme f30"
style=
"margin-top: -24px;"
>
{{mineNumber1 || '0'}}
</div>
<div
class=
"f18"
style=
"margin-top: 3px;"
>
地下矿山
</div>
</div>
</div>
<div
class=
"relative ml40
mine-1
"
>
<div
class=
"relative ml40
"
@
click=
"mineTypeEvent(2)"
:class=
"{actv:mineType===2}
"
>
<img
style=
"width: 134px;height: 146px;"
src=
"static/mine-bg-1.png"
alt=
""
>
<div
class=
"poa-cover flex-text flex-column"
>
<div
class=
"color-theme f30"
style=
"margin-top: -24px;"
>
{{mineNumber2 || '0'}}
</div>
<div
class=
"f18"
style=
"margin-top: 3px;"
>
露天矿山
</div>
</div>
</div>
<div
class=
"relative ml40
mine-2
"
>
<div
class=
"relative ml40
"
@
click=
"mineTypeEvent(3)"
:class=
"{actv:mineType===3}
"
>
<img
style=
"width: 134px;height: 146px;"
src=
"static/mine-bg-2.png"
alt=
""
>
<div
class=
"poa-cover flex-text flex-column"
>
<div
class=
"color-theme f30"
style=
"margin-top: -24px;"
>
{{mineNumber3 || '0'}}
</div>
<div
class=
"f18"
style=
"margin-top: 3px;"
>
尾矿库
</div>
</div>
</div>
<div
class=
"relative ml40
mine-3
"
>
<div
class=
"relative ml40
"
@
click=
"mineTypeEvent(4)"
:class=
"{actv:mineType===4}
"
>
<img
style=
"width: 134px;height: 146px;"
src=
"static/mine-bg-3.png"
alt=
""
>
<div
class=
"poa-cover flex-text flex-column"
>
<div
class=
"color-theme f30"
style=
"margin-top: -24px;"
>
{{mineNumber4 || '0'}}
</div>
<div
class=
"f18"
style=
"margin-top: 3px;"
>
停产矿山
</div>
</div>
</div>
<div
class=
"relative ml40
mine-3
"
>
<div
class=
"relative ml40
"
@
click=
"mineTypeEvent(5)"
:class=
"{actv:mineType===5}
"
>
<img
style=
"width: 134px;height: 146px;"
src=
"static/mine-bg-4.png"
alt=
""
>
<div
class=
"poa-cover flex-text flex-column"
>
<div
class=
"color-theme f30"
style=
"margin-top: -24px;"
>
{{mineNumber5 || '0'}}
</div>
...
...
@@ -890,6 +899,8 @@
city
:[],
area
:[],
scompany
:[],
mineType
:
void
0
,
}
},
watch
:
{
...
...
@@ -952,7 +963,10 @@
var
selects
=
mselect
.
children
;
// 请求三级联动
this
.
reqSelectArea
(
selects
);
this
.
reqSelectArea
(
selects
,
onloadDataFinish
);
function
onloadDataFinish
(){
}
// left3 daterange event
var
left3t2
=
rightbar
.
querySelector
(
"
#daterage1>.m-t2
"
);
...
...
@@ -993,7 +1007,7 @@
})();
},
methods
:
{
reqSelectArea
(
selects
){
reqSelectArea
(
selects
,
callback
){
var
that
=
this
,
i
=
0
;
return
(
function
reqiust
(
id
,
i
){
var
req
=
{
...
...
@@ -1021,20 +1035,27 @@
if
(
i
<
3
){
reqiust
(
list
[
0
].
id
,
i
);
}
else
{
that
.
reqEnterprise
(
list
[
0
]
&&
list
[
0
].
id
||
0
,
selects
[
i
]);
var
item
=
{
name
:
"
全部
"
,
label
:
"
全部
"
,
id
:
24
,
};
list
.
unshift
(
item
);
that
.
reqEnterprise
(
list
[
0
]
&&
list
[
0
].
id
||
0
,
selects
[
i
],
callback
);
};
});
})(
0
,
i
);
},
reqEnterprise
(
value
,
select
){
reqEnterprise
(
value
,
select
,
callback
){
var
req
=
{
params
:
{
deptId
:(
this
.
deptId
=
value
||
0
)
}
};
axios
.
get
(
host
+
'
/api/yingji/deptandenterprise/enterprise
'
,
req
).
then
(
res
=>
{
res
=
res
.
data
;
var
list
=
res
.
body
||
[];
var
res
=
res
.
data
,
list
=
res
.
body
;
this
[
select
.
id
]
=
list
;
this
.
isReady
=
true
;
if
(
list
[
0
]){
...
...
@@ -1042,12 +1063,15 @@
}
else
{
this
.
enterpriseId
=
0
;
this
.
marker
=
[];
}
}
;
// 矿山数据
this
.
reqMines
(
this
.
enterpriseId
);
this
.
reqDispense
(
this
.
enterpriseId
);
// 设置地图
this
.
setMap
();
callback
&&
callback
();
});
var
that
=
this
;
...
...
@@ -1055,7 +1079,7 @@
var
tag
=
e
.
target
||
e
.
srcElement
;
var
value
=
tag
.
selectedOptions
[
0
].
value
;
that
.
enterpriseId
=
value
;
that
.
req
Mines
(
that
.
enterpriseId
);
that
.
req
Dispense
(
that
.
enterpriseId
);
});
},
reqDeviceStatus
(){
...
...
@@ -1072,6 +1096,12 @@
});
},
// 数据分发
reqDispense
(
enterpriseId
){
// 矿山数据
this
.
reqMines
(
enterpriseId
);
},
// 请求矿山列表
reqMines
(
id
){
var
loading
=
this
.
$loading
({
...
...
@@ -1083,11 +1113,13 @@
var
req
=
{
params
:
{
enterpriseId
:
id
enterpriseId
:
this
.
enterpriseId
,
deptId
:
this
.
deptId
,
mineType
:
this
.
mineType
,
}
};
axios
.
get
(
host
+
'
/api/datav/mine
'
,
req
).
then
(
res
=>
{
axios
.
get
(
host
+
'
/api/datav/mine
'
,
req
).
then
(
res
=>
{
loading
.
close
();
this
.
isReady
=
true
;
...
...
@@ -1095,8 +1127,8 @@
this
.
mineNumber1
=
this
.
mineList
.
filter
(
x
=>
x
.
mineType
==
1
).
length
;
this
.
mineNumber2
=
this
.
mineList
.
filter
(
x
=>
x
.
mineType
==
2
).
length
;
this
.
mineNumber3
=
this
.
mineList
.
filter
(
x
=>
x
.
mineType
==
3
).
length
;
this
.
mineNumber4
=
this
.
mineList
.
filter
(
x
=>
x
.
hasEnable
==
false
).
length
;
this
.
mineNumber5
=
this
.
mineList
.
filter
(
x
=>
x
.
mineType
==
4
).
length
;
this
.
mineNumber4
=
this
.
mineList
.
filter
(
x
=>
x
.
mineType
==
4
).
length
;
this
.
mineNumber5
=
this
.
mineList
.
filter
(
x
=>
x
.
mineType
==
5
).
length
;
const
markerUpdater
=
this
.
mineList
.
filter
(
mine
=>
{
if
(
!
mine
.
longitude
||
!
mine
.
latitude
)
{
...
...
@@ -1122,10 +1154,6 @@
drill
:
mine
.
emergencyDrillNumber
||
0
};
});
/* this.marker = [
{ id: 0, longitude: '117.855635', latitude: '37.065754', mineType: 0, mineId: 0, type: 0, name: '应急管理局', number: '0', address: '平度市东阁街道', userName: '某某某', mobile: '18888888888', team: 0, supplies: 0, plan: 0, drill: 0 }
, ...markerUpdater
]; */
this
.
marker
=
[...
markerUpdater
];
...
...
@@ -1134,7 +1162,6 @@
// 初始化
//_5minus();
//this.getData();
// 获取数据
this
.
getData
();
});
...
...
@@ -1289,6 +1316,18 @@
});
},
// 矿山类型
mineTypeEvent
(
value
){
if
(
this
.
mineType
===
value
){
this
.
mineType
=
void
0
}
else
{
this
.
mineType
=
value
;
};
// 矿山数据
this
.
reqMines
();
},
// -------------------------------------------------------------------
querySearchAsync
(
queryString
,
cb
)
{
var
results
=
queryString
?
this
.
marker
.
filter
(
v
=>
v
.
name
.
indexOf
(
queryString
)
!=
-
1
)
:
this
.
marker
...
...
@@ -1326,6 +1365,7 @@
gotoManagement1
(){
window
.
location
.
href
=
'
/#/login4Index
'
;
},
// 设置地图
setMap
()
{
map
=
new
AMap
.
Map
(
'
map
'
,
{
...
...
@@ -1349,9 +1389,7 @@
});
let
_this
=
this
AMap
.
plugin
([
'
AMap.ControlBar
'
,
],
function
()
{
AMap
.
plugin
([
'
AMap.ControlBar
'
,],
function
()
{
// 添加 3D 罗盘控制
map
.
addControl
(
new
AMap
.
ControlBar
({
position
:
{
...
...
@@ -1362,7 +1400,14 @@
}));
});
var
icon
=
[
'
https://s3.bmp.ovh/imgs/2023/02/28/7c5a7440766955ea.png
'
,
'
https://s3.bmp.ovh/imgs/2023/02/28/a3be161800e3f011.png
'
,
'
https://s3.bmp.ovh/imgs/2023/02/28/9e2393a29da416fd.png
'
,
'
https://s3.bmp.ovh/imgs/2023/02/28/cd177c08c6052267.png
'
]
var
icon
=
[
'
static/center-icon.png
'
,
'
static/mine-icon-0.png
'
,
'
static/mine-icon-1.png
'
,
'
https://s3.bmp.ovh/imgs/2023/02/28/cd177c08c6052267.png
'
,
'
static/mine-icon-3.png
'
,
'
static/mine-icon-4.png
'
,
]
// 循环绘制marker
for
(
var
i
=
0
;
i
<
this
.
marker
.
length
;
i
++
)
{
var
marker
=
new
AMap
.
Marker
({
...
...
@@ -1481,7 +1526,13 @@
window
.
gotoDataView
=
(
mineType
,
mineId
)
=>
{
const
mine
=
this
.
mineList
.
filter
(
x
=>
x
.
mineType
==
mineType
&&
x
.
id
==
mineId
)[
0
]
window
.
localStorage
.
setItem
(
'
kd.selected.mine
'
,
JSON
.
stringify
(
mine
))
window
.
localStorage
.
setItem
(
'
bigScreenDetailMenuModel
'
,
'
emergency
'
);
window
.
open
(
selfHost
+
'
/datav/detail/video-monitor.html
'
,
'
_self
'
)
return
;
if
(
mineType
==
1
){
window
.
open
(
selfHost
+
'
/datav/underground.html
'
,
'
_self
'
)
}
...
...
public/datav/watersource.html
View file @
18d5f37d
...
...
@@ -179,7 +179,6 @@
}
.m-body
{
border
:
1px
solid
red
;
.md1-wrap{
width
:
420px
;
ul{
...
...
@@ -256,7 +255,7 @@
}
.md3-1
,
.md9
{
border
:
1px
solid
red
;
margin-top
:
10px
;
.md1-wrap{
display
:
flex
;
width
:
100%
;
padding
:
10px
0
;
margin-top
:
10px
;
...
...
@@ -276,7 +275,6 @@
.md1b
{
.m-tt3{
border
:
1px
solid
yellow
;
display
:
flex
;
justify-content
:
flex-end
;
select{
background-color
:
transparent
;
color
:
#e1ffff
;
border
:
1px
solid
#1DD2D9
;
...
...
@@ -290,7 +288,6 @@
position
:
relative
;
height
:
300px
;
;
width
:
100%
;
.charts{
position
:
absolute
;
top
:
0
;
left
:
0
;
height
:
100%
;
width
:
100%
;
border
:
1px
solid
green
;
}
}
}
...
...
@@ -299,7 +296,7 @@
.md9
{
.md1b{
div.chartbox{
height
:
20
0px
;
height
:
15
0px
;
}
.md1-wrap
{
padding
:
0
;}
...
...
@@ -308,6 +305,15 @@
.icon
{
width
:
80px
;
height
:
80px
;}
}
}
.footer
{
.actv{
box-shadow
:
inset
0
0
25px
rgba
(
0
,
0
,
0
,
0.2
);}
.item-wrap
{
&>div{
cursor
:
pointer
;
}
}
}
}
</style>
</head>
...
...
@@ -489,7 +495,7 @@
<div
class=
"absolute flex-text footer"
style=
"bottom: 10px;left: 50%;transform: translateX(-50%);"
>
<div
class=
"flex-text"
:style=
"{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }"
>
<div
class=
"flex-text"
:class=
"isFullScreen?'tr-bottom':'tr-bottom-re'"
>
<div
class=
"flex-text
item-wrap
"
:class=
"isFullScreen?'tr-bottom':'tr-bottom-re'"
>
<div
class=
"relative"
@
click=
"mineTypeEvent(1)"
:class=
"{actv:mineType===1}"
>
<img
style=
"width: 134px;height: 146px;"
src=
"static/mine-bg-0.png"
alt=
""
>
<div
class=
"poa-cover flex-text flex-column"
>
...
...
@@ -531,28 +537,10 @@
<div
:class=
"isFullScreen?'tr-right':'tr-right-re'"
class=
"flex flex-column space-between relative"
style=
"display:flex;justify-content:center;height:100%;"
>
<!-- right -->
<div
style=
"transform-origin:right center;right:0;"
class=
"absolute"
:style=
"{transform: 'scale(' + (heightScale) + ')'}"
id=
"rightbar"
>
<!-- 变形监测报警统计 -->
<!-- <div style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;" class="l-md3">
<div class="ml10 flex align-center f20 color-theme wp100"
style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
<div class="ml40">变形监测报警统计</div>
</div>
<div class="flex-text ml20 mt10" style="width: 450px;">
<div class="flex-1 flex-text f14 pointer animation"
:class="[index == 0?'':'ml15',index == TabCur?'color-light':'']"
style="height: 38px;background-image: url('static/button-bg.png');background-size: 100% 100%;"
v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">{{ item }}</div>
</div>
<div class="space-end mt10 flex ml20" style="width: 450px;" id="daterage1">
<div class="m-t2"><div></div></div>
</div>
<div id="main" style="width: 100%;height:300px;"></div>
</div> -->
<div
style=
"transform-origin:right center;right:0;margin-top:30px;"
class=
"absolute"
:style=
"{transform:'scale(' + (heightScale) + ')'}"
id=
"rightbar"
>
<!-- 风速监测 -->
<div
class=
"md9"
style=
"
width:514px;
padding:10px 0 10px 15px;background:rgba(0,0,0,.3);"
>
<div
class=
"md9"
style=
"padding:10px 0 10px 15px;background:rgba(0,0,0,.3);"
>
<div
class=
"ml10 flex align-center f20 color-theme wp100"
style=
"background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;"
>
<div
class=
"ml40"
>
风速监测
</div>
...
...
@@ -574,19 +562,18 @@
</div>
</div>
<!-- 温湿度监测 -->
<div
class=
"md9"
style=
"width:514px;padding:10px 0 10px 15px;background:rgba(0,0,0,.3);"
>
<!-- 温度监测 -->
<div
class=
"md9 md10"
style=
"padding:10px 0 10px 15px;background:rgba(0,0,0,.3);"
>
<div
class=
"ml10 flex align-center f20 color-theme wp100"
style=
"background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;"
>
<div
class=
"ml40"
>
温
湿
度监测
</div>
<div
class=
"ml40"
>
温度监测
</div>
</div>
<div
class=
"relative md1b"
style=
"width:480px;"
>
<div
class=
"m-tt3"
>
</div>
<div
class=
"md1-wrap"
>
<ul
style=
"height:110px;"
>
<li
v-for=
"item in deviceL
1
"
>
<li
v-for=
"item in deviceL
2
"
>
<div
class=
"icon"
><font>
{{item.value}}
</font></div>
<span>
{{item.key}}
</span>
</li>
...
...
@@ -595,12 +582,31 @@
<div
class=
"chartbox"
>
<div
class=
"charts"
></div>
</div>
</div>
</div>
<!-- 湿度监测 -->
<div
class=
"md9 md11"
style=
"padding:10px 0 10px 15px;background:rgba(0,0,0,.3);"
>
<div
class=
"ml10 flex align-center f20 color-theme wp100"
style=
"background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;"
>
<div
class=
"ml40"
>
湿度监测
</div>
</div>
<div
class=
"relative md1b"
style=
"width:480px;"
>
<div
class=
"m-tt3"
>
</div>
<div
class=
"md1-wrap"
>
<ul
style=
"height:110px;"
>
<li
v-for=
"item in deviceL3"
>
<div
class=
"icon"
><font>
{{item.value}}
</font></div>
<span>
{{item.key}}
</span>
</li>
</ul>
</div>
<div
class=
"chartbox"
>
<div
class=
"charts"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
...
...
@@ -948,6 +954,7 @@
// 设备状态
deviceL1
:[],
deviceL2
:[],
deviceL3
:[],
// 公告信息
notice
:
{
...
...
@@ -1036,6 +1043,12 @@
var
md9
=
this
.
$el
.
querySelector
(
"
.md9
"
);
this
.
md9chart
=
md9
.
querySelector
(
"
.charts
"
);
var
md10
=
this
.
$el
.
querySelector
(
"
.md10
"
);
this
.
md10charts
=
md10
.
querySelector
(
"
.charts
"
);
var
md11
=
this
.
$el
.
querySelector
(
"
.md11
"
);
this
.
md11charts
=
md11
.
querySelector
(
"
.charts
"
);
this
.
heightScale
=
(
this
.
clientHeight
-
100
)
/
1080
this
.
widthScale
=
this
.
clientWidth
/
1920
...
...
@@ -1116,6 +1129,7 @@
self
.
m9select2
=
document
.
createElement
(
"
select
"
);
var
slist1
=
[
{
name
:
'
近一周
'
,
value
:
'
0
'
},
{
name
:
'
近一月
'
,
value
:
'
1
'
},
{
name
:
'
近半年
'
,
value
:
'
2
'
},
{
name
:
'
近一年
'
,
value
:
'
3
'
},
...
...
@@ -1132,9 +1146,59 @@
self
.
md9param2
=
~~
slist1
[
0
].
value
;
})();
}
// right2 选择列表事件
(
function
(){
self
.
m10tt3
=
md10
.
querySelector
(
"
.m-tt3
"
);
var
select
=
document
.
createElement
(
"
select
"
);
self
.
m10select2
=
document
.
createElement
(
"
select
"
);
var
slist1
=
[
{
name
:
'
近一周
'
,
value
:
'
0
'
},
{
name
:
'
近一月
'
,
value
:
'
1
'
},
{
name
:
'
近半年
'
,
value
:
'
2
'
},
{
name
:
'
近一年
'
,
value
:
'
3
'
},
];
// select1
qf
.
UI
.
selectRender
(
select
,
slist1
,
{
onchange
:
function
(
val
){
self
.
md10param2
=
~~
val
;
self
.
right2Data
();
},
});
self
.
m10tt3
.
appendChild
(
self
.
m10select2
);
self
.
m10tt3
.
appendChild
(
select
);
self
.
md10param2
=
~~
slist1
[
0
].
value
;
})();
// right3 选择列表事件
(
function
(){
self
.
m11tt3
=
md11
.
querySelector
(
"
.m-tt3
"
);
var
select
=
document
.
createElement
(
"
select
"
);
self
.
m11select2
=
document
.
createElement
(
"
select
"
);
var
slist1
=
[
{
name
:
'
近一周
'
,
value
:
'
0
'
},
{
name
:
'
近一月
'
,
value
:
'
1
'
},
{
name
:
'
近半年
'
,
value
:
'
2
'
},
{
name
:
'
近一年
'
,
value
:
'
3
'
},
];
// select1
qf
.
UI
.
selectRender
(
select
,
slist1
,
{
onchange
:
function
(
val
){
self
.
md11param2
=
~~
val
;
self
.
right3Data
();
},
});
self
.
m11tt3
.
appendChild
(
self
.
m11select2
);
self
.
m11tt3
.
appendChild
(
select
);
self
.
md11param2
=
~~
slist1
[
0
].
value
;
})();
}
this
.
seriesDataFormat
=
function
(
data
,
opts
){
var
names
=
data
.
names
||
[],
list
=
data
.
list
||
data
.
lists
,
series
=
[],
categories
=
[],
maxVal
=
0
;
if
(
names
[
0
]
&&
list
){
...
...
@@ -1163,10 +1227,6 @@
};
return
{
series
:
series
,
categories
:
categories
,
maxVal
:
maxVal
}
};
},
methods
:
{
reqSelectArea
(
selects
,
callback
){
...
...
@@ -1225,7 +1285,7 @@
}
else
{
this
.
enterpriseId
=
0
;
this
.
marker
=
[];
}
}
;
this
.
reqDispense
(
this
.
enterpriseId
);
...
...
@@ -1529,12 +1589,14 @@
});
},
// 风速
right1Select
(){
var
that
=
this
;
var
req
=
{
params
:
{
enterpriseId
:
this
.
enterpriseId
,
deptId
:
this
.
deptId
,
mineType
:
this
.
mineType
,
}
};
axios
.
get
(
host
+
'
/data/sz/sensorList/feng
'
,
req
).
then
(
res
=>
{
...
...
@@ -1550,7 +1612,6 @@
that
.
right1Data
();
});
},
right1Data
(){
var
that
=
this
;
var
req
=
{
...
...
@@ -1697,8 +1758,351 @@
new
Highcharts
.
chart
(
this
.
md9chart
,
option
);
},
// 温度
right2Select
(){
var
that
=
this
;
var
req
=
{
params
:
{
enterpriseId
:
this
.
enterpriseId
,
deptId
:
this
.
deptId
,
mineType
:
this
.
mineType
,
}
};
axios
.
get
(
host
+
'
/data/sz/sensorList/wen
'
,
req
).
then
(
res
=>
{
var
res
=
res
.
data
,
list
=
res
.
body
||
[];
qf
.
UI
.
selectRender
(
that
.
m10select2
,
list
,
{
'
name
'
:
'
equipName
'
,
'
value
'
:
'
equipNo
'
,
onchange
:
function
(
val
){
that
.
right2equipNo
=
val
;
that
.
right2Data
();
},
});
that
.
right2equipNo
=
list
[
0
]
&&
list
[
0
].
equipNo
||
''
;
that
.
right2Data
();
});
},
right2Data
(){
var
that
=
this
;
var
req
=
{
params
:
{
enterpriseId
:
this
.
enterpriseId
,
deptId
:
this
.
deptId
,
mineType
:
this
.
mineType
,
equipNo
:
this
.
right2equipNo
,
timeUtil
:
this
.
md10param2
,
}
};
axios
.
get
(
host
+
'
/api/shuili/temperatureNum
'
,
req
).
then
(
res
=>
{
var
res
=
res
.
data
,
body
=
res
.
body
||
[];
that
.
deviceL2
=
body
.
list
;
});
// 曲线
var
req
=
{
params
:
{
enterpriseId
:
this
.
enterpriseId
,
deptId
:
this
.
deptId
,
mineType
:
this
.
mineType
,
equipNo
:
this
.
right2equipNo
,
timeUtil
:
this
.
md10param2
,
}
};
axios
.
get
(
host
+
'
/api/shuili/temperatureData
'
,
req
).
then
(
res
=>
{
var
res
=
res
.
data
,
body
=
res
.
body
||
[];
this
.
right2Chart
(
body
);
});
},
right2Chart
(
body
){
var
formatSeries
=
this
.
seriesDataFormat
(
body
,
{
datekey
:
'
date
'
,
serie
:{
type
:
'
spline
'
,
marker
:
{
enabled
:
false
},
},
colors
:[
"
#fcaa00
"
,
"
#20ef03
"
,
"
#38f1f3
"
]});
var
series
=
formatSeries
.
series
;
var
option
=
{
chart
:
{
type
:
'
column
'
,
backgroundColor
:
'
transparent
'
,
//marginTop:30,
marginBottom
:
55
,
marginLeft
:
30
,
},
title
:
{
text
:
''
},
subtitle
:
{
text
:
''
},
xAxis
:
{
type
:
'
datetime
'
||
'
category
'
,
labels
:
{
//rotation:0, // 设置轴标签旋转角度
style
:{
color
:
'
#fff
'
},
y
:
15
,
},
categories
:
formatSeries
.
categories
,
lineWidth
:
0
,
//lineColor:'#ff0000',
gridLineColor
:
'
#aaa
'
,
tickLength
:
0
,
// 刻度线
dateTimeLabelFormats
:
{
millisecond
:
'
%H:%M:%S.%L
'
,
second
:
'
%H:%M:%S
'
,
minute
:
'
%H:%M
'
,
hour
:
'
%H:%M
'
,
day
:
'
%m-%d
'
,
week
:
'
%m-%d
'
,
month
:
'
%Y-%m
'
,
year
:
'
%Y
'
}
},
yAxis
:
{
title
:
{
text
:
''
},
labels
:{
style
:{
color
:
'
#fff
'
},
x
:
-
6
,
},
gridLineColor
:
'
#0F5680
'
,
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
plotOptions
:
{
column
:
{
borderWidth
:
0
,
//y:50,
//itemMarginTop:50,
},
bar
:{
borderWidth
:
0
,
},
},
legend
:
{
enabled
:
series
.
length
>
1
?
true
:
false
,
// 图例定位
layout
:
'
horizontal
'
,
// 水平布局:“horizontal”, 垂直布局:“vertical”
floating
:
false
,
// 图列是否浮动
align
:
'
right
'
,
// 图例容器
//width:'100%', // number || String
padding
:
2
,
// 内边距
margin
:
2
,
borderRadius
:
5
,
//borderWidth:1,
verticalAlign
:
'
top
'
,
// 图例项
//itemWidth:120, // 宽度
itemDistance
:
10
,
// 间距 20
y
:
-
10
,
itemMarginTop
:
2
,
itemStyle
:{
color
:
'
#fff
'
,},
itemHoverStyle
:{
color
:
'
#fff
'
,},
},
credits
:
{
enabled
:
false
},
tooltip
:
{
pointFormat
:
'
{series.name}:{point.y}
'
+
'
mm
'
,
dateTimeLabelFormats
:
{
millisecond
:
'
%H:%M:%S.%L
'
,
second
:
'
%H:%M:%S
'
,
minute
:
'
%m-%d %H:%M
'
,
hour
:
'
%m-%d %H:%M
'
,
day
:
'
%m-%d %H:%M
'
,
week
:
'
%m-%d %H:%M
'
,
month
:
'
%Y-%m
'
,
year
:
'
%Y
'
}
},
series
:
formatSeries
.
series
,
};
new
Highcharts
.
chart
(
this
.
md10charts
,
option
);
},
// 湿度
right3Select
(){
var
that
=
this
;
var
req
=
{
params
:
{
enterpriseId
:
this
.
enterpriseId
,
deptId
:
this
.
deptId
,
mineType
:
this
.
mineType
,
}
};
axios
.
get
(
host
+
'
/data/sz/sensorList/shi
'
,
req
).
then
(
res
=>
{
var
res
=
res
.
data
,
list
=
res
.
body
||
[];
qf
.
UI
.
selectRender
(
that
.
m11select2
,
list
,
{
'
name
'
:
'
equipName
'
,
'
value
'
:
'
equipNo
'
,
onchange
:
function
(
val
){
that
.
right3equipNo
=
val
;
that
.
right3Data
();
},
});
that
.
right3equipNo
=
list
[
0
]
&&
list
[
0
].
equipNo
||
''
;
that
.
right3Data
();
});
},
right3Data
(){
var
that
=
this
;
var
req
=
{
params
:
{
enterpriseId
:
this
.
enterpriseId
,
deptId
:
this
.
deptId
,
mineType
:
this
.
mineType
,
equipNo
:
this
.
right3equipNo
,
timeUtil
:
this
.
md11param2
,
}
};
axios
.
get
(
host
+
'
/api/shuili/humidityNum
'
,
req
).
then
(
res
=>
{
var
res
=
res
.
data
,
body
=
res
.
body
||
[];
that
.
deviceL3
=
body
.
list
;
});
// 曲线
var
req
=
{
params
:
{
enterpriseId
:
this
.
enterpriseId
,
deptId
:
this
.
deptId
,
mineType
:
this
.
mineType
,
equipNo
:
this
.
right3equipNo
,
timeUtil
:
this
.
md11param2
,
}
};
axios
.
get
(
host
+
'
/api/shuili/humidityData
'
,
req
).
then
(
res
=>
{
var
res
=
res
.
data
,
body
=
res
.
body
||
[];
this
.
right3Chart
(
body
);
});
},
right3Chart
(
body
){
var
formatSeries
=
this
.
seriesDataFormat
(
body
,
{
datekey
:
'
date
'
,
serie
:{
type
:
'
spline
'
,
marker
:
{
enabled
:
false
},
},
colors
:[
"
#fcaa00
"
,
"
#20ef03
"
,
"
#38f1f3
"
]});
var
series
=
formatSeries
.
series
;
var
option
=
{
chart
:
{
type
:
'
column
'
,
backgroundColor
:
'
transparent
'
,
//marginTop:30,
marginBottom
:
55
,
marginLeft
:
30
,
},
title
:
{
text
:
''
},
subtitle
:
{
text
:
''
},
xAxis
:
{
type
:
'
datetime
'
||
'
category
'
,
labels
:
{
//rotation:0, // 设置轴标签旋转角度
style
:{
color
:
'
#fff
'
},
y
:
15
,
},
categories
:
formatSeries
.
categories
,
lineWidth
:
0
,
//lineColor:'#ff0000',
gridLineColor
:
'
#aaa
'
,
tickLength
:
0
,
// 刻度线
dateTimeLabelFormats
:
{
millisecond
:
'
%H:%M:%S.%L
'
,
second
:
'
%H:%M:%S
'
,
minute
:
'
%H:%M
'
,
hour
:
'
%H:%M
'
,
day
:
'
%m-%d
'
,
week
:
'
%m-%d
'
,
month
:
'
%Y-%m
'
,
year
:
'
%Y
'
}
},
yAxis
:
{
title
:
{
text
:
''
},
labels
:{
style
:{
color
:
'
#fff
'
},
x
:
-
6
,
},
gridLineColor
:
'
#0F5680
'
,
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
plotOptions
:
{
column
:
{
borderWidth
:
0
,
//y:50,
//itemMarginTop:50,
},
bar
:{
borderWidth
:
0
,
},
},
legend
:
{
enabled
:
series
.
length
>
1
?
true
:
false
,
// 图例定位
layout
:
'
horizontal
'
,
// 水平布局:“horizontal”, 垂直布局:“vertical”
floating
:
false
,
// 图列是否浮动
align
:
'
right
'
,
// 图例容器
//width:'100%', // number || String
padding
:
2
,
// 内边距
margin
:
2
,
borderRadius
:
5
,
//borderWidth:1,
verticalAlign
:
'
top
'
,
// 图例项
//itemWidth:120, // 宽度
itemDistance
:
10
,
// 间距 20
y
:
-
10
,
itemMarginTop
:
2
,
itemStyle
:{
color
:
'
#fff
'
,},
itemHoverStyle
:{
color
:
'
#fff
'
,},
},
credits
:
{
enabled
:
false
},
tooltip
:
{
pointFormat
:
'
{series.name}:{point.y}
'
+
'
mm
'
,
dateTimeLabelFormats
:
{
millisecond
:
'
%H:%M:%S.%L
'
,
second
:
'
%H:%M:%S
'
,
minute
:
'
%m-%d %H:%M
'
,
hour
:
'
%m-%d %H:%M
'
,
day
:
'
%m-%d %H:%M
'
,
week
:
'
%m-%d %H:%M
'
,
month
:
'
%Y-%m
'
,
year
:
'
%Y
'
}
},
series
:
formatSeries
.
series
,
};
new
Highcharts
.
chart
(
this
.
md11charts
,
option
);
},
// 矿山类型
...
...
@@ -1713,7 +2117,6 @@
this
.
reqMines
();
},
// -------------------------------------------------------------------
querySearchAsync
(
queryString
,
cb
)
{
var
results
=
queryString
?
this
.
marker
.
filter
(
v
=>
v
.
name
.
indexOf
(
queryString
)
!=
-
1
)
:
this
.
marker
...
...
@@ -2036,6 +2439,10 @@
this
.
right1Select
();
this
.
right2Select
();
this
.
right3Select
();
this
.
reqDeviceStatus
();
// 设备状态
}
/*
...
...
src/views/home4Index.vue
View file @
18d5f37d
...
...
@@ -42,7 +42,7 @@
</div>
</div>
<
div
class=
"bottomTitle"
>
@中和地信有限公司
</div
>
<
!--
<div
class=
"bottomTitle"
>
@中和地信有限公司
</div>
--
>
</div>
</
template
>
...
...
@@ -115,7 +115,6 @@ export default {
var
host
=
location
.
protocol
+
"
//
"
+
window
.
location
.
host
;
if
(
type
===
"
admin
"
)
{
// this.$router.push({ path: "home4Center" });
this
.
$router
.
push
({
path
:
"
/user/center
"
});
}
else
if
(
type
===
"
应急管理
"
)
{
// this.$router.push({ path: "home4Center" });
...
...
@@ -123,11 +122,9 @@ export default {
// location.href = 'http://192.168.3.226:8057/datav/index.html'
location
.
href
=
host
+
"
/datav/index.html
"
;
}
else
if
(
type
===
"
自然资源
"
)
{
// location.href = process.env.NODE_ENV + ''
// location.href = 'http://192.168.3.226:8057/datav/natural.html'
//location.href = host + "/datav/natural.html";
}
else
if
(
type
===
"
水利系统
"
)
{
//
location.href = host + "/datav/watersource.html";
//location.href = host + "/datav/watersource.html";
}
else
if
(
type
===
"
电子档案馆
"
)
{
// this.$router.push({ path: "home4Center" });
this
.
$router
.
push
({
path
:
"
/user/center
"
});
...
...
@@ -270,7 +267,7 @@ export default {
height
:
100%
;
background-repeat
:
no-repeat
;
background-position
:
center
;
background-size
:
100%
;
background-size
:
100%
100%
;
overflow
:
hidden
;
}
.content
{
...
...
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