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
da4dd73f
Commit
da4dd73f
authored
Sep 21, 2024
by
xinzhedeai
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
变形监测
parent
7433f5c6
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
643 additions
and
178 deletions
+643
-178
shape-monitor.html
public/datav/detail/shape-monitor.html
+152
-178
temperature-monitor.html
public/datav/detail/temperature-monitor.html
+491
-0
No files found.
public/datav/detail/shape-monitor.html
View file @
da4dd73f
...
...
@@ -66,10 +66,10 @@
</div>
</div> -->
<div
class=
"mineInfo"
>
<p>
矿山名称:
淄博红圈石料厂
</p>
<p>
矿山地
质:谁看得见风离开世界的副卡时刻记得发
</p>
<p>
联系人:
开始对
</p>
<p>
联系方式:
xxx
</p>
<p>
矿山名称:
{{selectedMine.name}}
</p>
<p>
矿山地
址:{{selectedMine.address}}
</p>
<p>
联系人:
{{selectedMine.liablePerson}}
</p>
<p>
联系方式:
{{selectedMine.liablePersonPhone}}
</p>
</div>
<div
class=
"menuInfo"
>
<ul>
...
...
@@ -95,7 +95,8 @@
<span>
边坡监测
</span>
</div>
<div
class=
"list-wrapper"
v-show=
"showMenu4bianpo"
>
<div
class=
"list-item"
v-for=
"(item, index) in sensorLIst"
@
click=
"changeSensor(item)"
><i
class=
"el-icon-caret-right"
></i><span>
{{item.equipName}}
</span></div>
<div
class=
"list-item"
v-for=
"(item, index) in sensorLIst"
@
click=
"changeSensor(item)"
><i
class=
"el-icon-caret-right"
></i><span>
{{item.equipName}}
</span></div>
</div>
</section>
<section>
...
...
@@ -135,7 +136,8 @@
</div>
<div
class=
"flex-1 ml15 flex-text flex-column ovh"
style=
"height: calc(100vh - 110px); justify-content: space-between"
>
<div
class=
"flex-1 ml15 flex-text flex-column ovh"
style=
"height: calc(100vh - 110px); justify-content: space-between"
>
<!-- 视频监控 -->
<div
class=
"wp100 relative"
>
<!-- 井下24小时人数变化趋势 -->
...
...
@@ -145,20 +147,6 @@
range-separator=
"至"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
align=
"right"
>
</el-date-picker>
</div>
<div
class=
"flex-text"
style=
"height: 0px;"
>
<div
class=
"flex-text"
>
<div
class=
"round"
style=
"width: 10px;height: 10px;background-color: #6dd1b9;"
></div>
<div
class=
"color-theme ml10 f14"
>
井下人数
</div>
</div>
<div
class=
"flex-text ml20"
>
<div
class=
"round"
style=
"width: 10px;height: 10px;background-color: #fca83b;"
></div>
<div
class=
"color-theme ml10 f14"
>
入井
</div>
</div>
<div
class=
"flex-text ml20 mr15"
>
<div
class=
"round"
style=
"width: 10px;height: 10px;background-color: #0a9fca;"
></div>
<div
class=
"color-theme ml10 f14"
>
出井
</div>
</div>
</div>
<div
class=
"mt5"
id=
"line"
style=
"width: 100%;height:400px;"
></div>
</div>
<!-- video end -->
...
...
@@ -176,9 +164,9 @@
<div
class=
"text-center"
style=
"width: 20%;"
>
总变化量
</div>
</div>
<div
class=
""
style=
"height: 300px;overflow-y: scroll;"
>
<div
class=
"h44 color-theme flex-text f17 ovh bg-list-item"
:class=
"'bg-list-' + (index % 2)"
:
style=
"{ marginTop: index == 0 ? '' : '2px' }"
v-for=
"(item,index) in tableList
"
:key=
"index"
>
<div
class=
"h44 color-theme flex-text f17 ovh bg-list-item"
:
class=
"'bg-list-' + (index % 2)"
:style=
"{ marginTop: index == 0 ? '' : '2px' }
"
v-for=
"(item,index) in tableList"
:key=
"index"
>
<div
class=
"text-center"
style=
"width: 20%;"
>
{{ item.time }}
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
{{ item.dispx }}
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
{{ item.dispy }}
</div>
...
...
@@ -236,7 +224,7 @@
window
.
open
(
host
+
'
/#/login
'
,
'
_self
'
)
return
}
if
(
code
===
400
&&
message
===
'
不允许访问
'
)
{
if
(
code
===
400
)
{
alert
(
'
您没有权限使用此功能,请联系管理员开通
'
)
return
}
...
...
@@ -256,15 +244,18 @@
el
:
'
#app
'
,
data
()
{
return
{
// 公共信息
selectedMine
:
{},
// 菜单折叠显隐
showMenu4bianpo
:
true
,
sensorLIst
:[],
currentSensorId
:
''
,
sensorLIst
:
[],
currentSensorId
:
''
,
showMenu4weikuangku
:
true
,
showMenu4chenjiang
:
true
,
showMenu4diya
:
true
,
// 菜单折叠显隐 - 结束
createTime
:
''
,
createTime
:
[
'
2024-01-01
'
,
'
2024-09-30
'
]
,
bigScreenDetailMenu
:
''
,
selectedMine
:
{},
isReady
:
false
,
// 页面是否准备好 请求完接口变为true
...
...
@@ -275,9 +266,9 @@
}
},
mounted
()
{
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
this
.
tableList
.
push
({
videoName
:
'
sdfksdfxxxxx
'
,
videoName
:
'
sdfksdfxxxxx
'
,
warnTypeName
:
'
扣税的交流方
'
,
warnDatetime
:
'
ksdlfsdf
'
})
...
...
@@ -310,22 +301,29 @@
window
.
history
.
go
(
-
1
)
return
}
this
.
getCharts
();
// this.getCharts();
// this.getChartsData()
this
.
getSensorList
(()
=>
{
this
.
getSensorList
(()
=>
{
});
this
.
getTableList
();
this
.
getChartsData
();
//
this.getChartsData();
},
watch
:
{
createTime
()
{
this
.
getChartsData
()
}
},
methods
:
{
changeSensor
(
item
){
changeSensor
(
item
)
{
this
.
currentSensorId
=
item
.
equipNo
this
.
getTableList
()
this
.
getChartsData
();
},
getSensorList
(
fn
){
getSensorList
(
fn
)
{
// 视频列表
Axiosx
.
get
(
host
+
'
/data/mp/sensorList
'
,
{
params
:
{
...
...
@@ -333,15 +331,16 @@
}
}).
then
(
res
=>
{
this
.
sensorLIst
=
res
.
data
.
body
||
[];
if
(
this
.
sensorLIst
.
length
)
{
this
.
currentSensorId
=
this
.
tableLi
st
[
0
].
equipNo
if
(
this
.
sensorLIst
.
length
)
{
this
.
currentSensorId
=
this
.
sensorLI
st
[
0
].
equipNo
}
console
.
log
(
'
sdfsdf
'
,
res
)
// fn && fn()
});
this
.
isReady
=
true
},
getTableList
(){
getTableList
()
{
// 视频列表
Axiosx
.
get
(
host
+
'
/data/mp/historyInside
'
,
{
params
:
{
...
...
@@ -363,30 +362,34 @@
})
},
getChartsData
(){
getChartsData
()
{
const
yAxisOption
=
{
name
:
"
人数
"
,
type
:
"
line
"
,
smooth
:
true
,
data
:
[],
itemStyle
:
{
color
:
'
#6dd1b9
'
},
async
getCharts
(
e
)
{
var
loading
if
(
!
e
)
{
loading
=
this
.
$loading
({
lock
:
true
,
text
:
'
加载中
'
,
// spinner: 'el-icon-loading',
background
:
'
rgba(0, 0, 0, 0.7)
'
});
markLine
:
{
silent
:
true
,
data
:
[
{
name
:
'
最高值
'
,
yAxis
:
400
},
{
name
:
'
最低值
'
,
yAxis
:
-
50
}
]
,
lineStyle
:
{
color
:
'
red
'
,
// 警戒线颜色
type
:
'
solid
'
// 警戒线样式
}
// 模拟请求
setTimeout
(()
=>
{
setTimeout
(()
=>
this
.
getCharts
(
'
refesh
'
),
5000
);
// 曲线图
// 基于准备好的dom,初始化echarts实例
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
"
line
"
));
myChart
.
clear
()
// 定时刷新 实际不刷新 演示用
// 绘制图表
myChart
.
setOption
({
}
}
var
chartsOption
=
{
legend
:
{
textStyle
:
{
color
:
'
#fff
'
,
// 设置字体颜色
fontSize
:
14
// 设置字体大小
}
},
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
...
...
@@ -397,8 +400,7 @@
}
},
xAxis
:
{
data
:
[
"
01时
"
,
"
02时
"
,
"
03时
"
,
"
04时
"
,
"
05时
"
,
"
06时
"
,
"
07时
"
,
"
08时
"
,
"
09时
"
,
"
10时
"
,
"
11时
"
,
"
12时
"
,
"
13时
"
,
"
14时
"
,
"
15时
"
,
"
16时
"
,
"
17时
"
,
"
18时
"
,
"
19时
"
,
"
20时
"
,
"
21时
"
,
"
22时
"
,
"
23时
"
,
"
24时
"
],
data
:
[],
axisLine
:
{
lineStyle
:
{
color
:
'
#a3e4f5
'
}
},
axisTick
:
{
show
:
false
}
},
...
...
@@ -407,22 +409,6 @@
splitLine
:
{
show
:
false
},
axisLabel
:
{
textStyle
:
{
color
:
'
#a3e4f5
'
}
}
},
yAxis22
:
[
{
type
:
'
value
'
,
name
:
'
Precipitation
'
,
interval
:
40
,
splitLine
:
{
show
:
false
},
axisLabel
:
{
textStyle
:
{
color
:
'
#a3e4f5
'
}
},
nameTextStyle
:
{
color
:
'
#a3e4f5
'
,
// 设置 Y 轴标题颜色为红色
fontSize
:
16
},
},
],
grid
:
{
right
:
45
,
top
:
10
,
left
:
40
,
bottom
:
25
},
dataZoom
:
[
{
...
...
@@ -439,52 +425,45 @@
moveOnMouseMove
:
true
// 开启鼠标移动窗口平移
}
],
series
:
[
{
name
:
"
人数
"
,
type
:
"
line
"
,
smooth
:
true
,
data
:
[
180
,
210
,
150
,
280
,
235
,
500
,
390
,
410
,
150
,
180
,
210
,
150
,
280
,
235
,
500
,
390
,
410
,
150
,
180
,
210
,
150
,
280
,
235
,
500
],
itemStyle
:
{
color
:
'
#6dd1b9
'
},
markLine
:
{
silent
:
true
,
data
:
[
{
name
:
'
最高值
'
,
yAxis
:
400
},
{
name
:
'
最低值
'
,
yAxis
:
-
50
}
],
lineStyle
:
{
color
:
'
red
'
,
// 警戒线颜色
type
:
'
dashed
'
// 警戒线样式
series
:
[
yAxisOption
]
}
var
loading
=
this
.
$loading
({
lock
:
true
,
text
:
'
加载中
'
,
// spinner: 'el-icon-loading',
background
:
'
rgba(0, 0, 0, 0.7)
'
});
// 视频列表
Axiosx
.
get
(
host
+
'
/data/mp/imghistory
'
,
{
params
:
{
code
:
this
.
currentSensorId
,
daterange
:
this
.
createTime
?
this
.
createTime
.
join
(
'
,
'
)
:
''
}
},
{
name
:
"
人数
"
,
type
:
"
line
"
,
smooth
:
true
,
data
:
[
60
,
90
,
80
,
-
100
,
60
,
65
,
45
,
-
50
,
48
,
60
,
90
,
80
,
-
100
,
60
,
65
,
45
,
50
,
-
48
,
60
,
90
,
-
80
,
100
,
60
,
65
],
itemStyle
:
{
color
:
'
#0a9fca
'
}
},
{
name
:
"
人数
"
,
type
:
"
line
"
,
smooth
:
true
,
data
:
[
55
,
48
,
40
,
60
,
50
,
55
,
58
,
63
,
50
,
55
,
48
,
40
,
60
,
50
,
55
,
58
,
63
,
50
,
55
,
48
,
40
,
60
,
50
,
55
],
itemStyle
:
{
color
:
'
#fca83b
'
}
}).
then
(
res
=>
{
const
result
=
res
.
data
.
body
;
if
(
result
)
{
chartsOption
.
xAxis
.
data
=
result
.
xData
.
data
chartsOption
.
series
=
result
.
yData
.
map
((
item
,
index
)
=>
{
var
tempObj
=
JSON
.
parse
(
JSON
.
stringify
(
yAxisOption
));
tempObj
.
data
=
item
.
data
tempObj
.
name
=
item
.
name
tempObj
.
markLine
.
data
=
item
.
alarm
return
tempObj
})
console
.
log
(
'
chartsOption
'
,
chartsOption
)
// 基于准备好的dom,初始化echarts实例
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
"
line
"
));
myChart
.
setOption
(
chartsOption
)
}
]
});
loading
&&
loading
.
close
();
this
.
isReady
=
true
},
800
);
}
},
changeMenu
(
menuName
)
{
...
...
@@ -505,11 +484,6 @@
return
err
})
},
create
()
{
let
options
=
{};
console
.
log
(
"
hasAudio
"
+
this
.
hasAudio
)
},
})
</script>
...
...
public/datav/detail/temperature-monitor.html
0 → 100644
View file @
da4dd73f
<!doctype html>
<html>
<head>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no"
/>
<title>
露天矿山数据总览
</title>
<link
rel=
"stylesheet"
href=
"../css/base.css"
>
<link
rel=
"stylesheet"
href=
"../css/index.css"
>
<!-- 引入样式 -->
<link
rel=
"stylesheet"
href=
"../css/element-ui.css"
>
<!-- 引入样式文件 -->
<link
rel=
"stylesheet"
href=
"../css/vant@4.css"
/>
<!-- 引入大屏内页公共样式 -->
<link
rel=
"stylesheet"
href=
"./static/css/public-detail.css"
/>
<!-- 先引入 Vue -->
<script
src=
"../js/vue.min.js"
></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script
src=
"../js/vue@2.6.14"
></script>
<script
src=
"../js/vant.min.js"
></script>
<style>
</style>
</head>
<body
style=
"background-image: url('../static/bg-img.png');background-size: 100% 100%;"
>
<div
id=
"app"
>
<div
class=
"fixed wp100 hv100"
style=
"background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show=
"!isReady"
></div>
<div
style=
"height: 80px;"
>
<div
class=
"flex-text color-theme f30 wp100 relative maxIndex fixed"
style=
"height: 80px;"
>
<div
class=
"flex-1"
style=
"background-image: url('../static/title-bg-left.png');background-size: 100% 100%;height: 80px;"
>
</div>
<div
class=
"flex-text"
style=
"background-image: url('../static/title-bg-center.png');background-size: 100% 100%;height: 80px;"
>
<div
style=
"margin-top: -10px;"
>
{{selectedMine.name || ''}}
</div>
</div>
<div
class=
"flex-1"
style=
"background-image: url('../static/title-bg-right.png');background-size: 100% 100%;height: 80px;"
>
</div>
</div>
</div>
<div
class=
"fixed flex-text maxIndex pointer"
style=
"left: 30px;top: 45px;"
@
click=
"history.back()"
>
<img
style=
"width: 24px;height: 24px;"
src=
"../static/backPage.png"
alt=
""
>
<div
class=
"f20 color-theme ml10"
>
返回
</div>
</div>
<div
class=
"fixed flex-text maxIndex pointer"
style=
"right: 30px;top: 45px;"
@
click=
"gotoManagement()"
>
<img
style=
"width: 24px;height: 24px;"
src=
"../static/backstage.png"
alt=
""
>
<div
class=
"f20 color-theme ml10"
>
后台管理
</div>
</div>
<div
class=
"flex-text ml10 mr10 mt15"
>
<div
style=
"width: 490px;height: calc(100vh - 110px);"
>
<!-- 通知公告 -->
<div
style=
"background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));"
>
<!-- <div class="h50 flex-text pointer"
style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);">
<div class="flex-1" v-if="isReady">
<van-notice-bar background="none" left-icon="volume-o" color="#ffffff" :speed="80"
:text="notice.title" @click="noticeMask = true" />
</div>
</div> -->
<div
class=
"mineInfo"
>
<p>
矿山名称: {{selectedMine.name}}
</p>
<p>
矿山地址:{{selectedMine.address}}
</p>
<p>
联系人:{{selectedMine.liablePerson}}
</p>
<p>
联系方式:{{selectedMine.liablePersonPhone}}
</p>
</div>
<div
class=
"menuInfo"
>
<ul>
<li
@
click=
"changeMenu('video')"
:class=
"{active: bigScreenDetailMenu==='video'}"
>
视频监控
</li>
<li
@
click=
"changeMenu('shape')"
:class=
"{active: bigScreenDetailMenu==='shape'}"
>
变形监测
</li>
<li
@
click=
"changeMenu('temprate')"
:class=
"{active: bigScreenDetailMenu==='temprate'}"
>
温度监测
</li>
<li
@
click=
"changeMenu('wind')"
:class=
"{active: bigScreenDetailMenu==='wind'}"
>
风速监测
</li>
<li
@
click=
"changeMenu('water')"
:class=
"{active: bigScreenDetailMenu==='water'}"
>
降水监测
</li>
<li
@
click=
"changeMenu('people')"
:class=
"{active: bigScreenDetailMenu==='people'}"
>
人员定位
</li>
</ul>
</div>
</div>
<!-- 视频监控列表 -->
<div
class=
"relative mt20"
style=
"width: 490px;height: calc(100vh - 170px);"
>
<section>
<div
class=
"header"
@
click=
"menuChange('showMenu4bianpo')"
>
<i
class=
"el-icon-caret-bottom"
v-show=
"showMenu4bianpo"
></i>
<i
class=
"el-icon-caret-right"
v-show=
"!showMenu4bianpo"
></i>
<span>
边坡监测
</span>
</div>
<div
class=
"list-wrapper"
v-show=
"showMenu4bianpo"
>
<div
class=
"list-item"
v-for=
"(item, index) in sensorLIst"
@
click=
"changeSensor(item)"
><i
class=
"el-icon-caret-right"
></i><span>
{{item.equipName}}
</span></div>
</div>
</section>
<section>
<div
class=
"header"
@
click=
"menuChange('showMenu4weikuangku')"
>
<i
class=
"el-icon-caret-bottom"
v-show=
"showMenu4weikuangku"
></i>
<i
class=
"el-icon-caret-right"
v-show=
"!showMenu4weikuangku"
></i>
<span>
尾矿库监测
</span>
</div>
<div
class=
"list-wrapper"
v-show=
"showMenu4weikuangku"
>
<div
class=
"list-item"
><i
class=
"el-icon-caret-right"
></i><span>
xxxxx监测点
</span></div>
</div>
</section>
<section>
<div
class=
"header"
@
click=
"menuChange('showMenu4chenjiang')"
>
<i
class=
"el-icon-caret-bottom"
v-show=
"showMenu4chenjiang"
></i>
<i
class=
"el-icon-caret-right"
v-show=
"!showMenu4chenjiang"
></i>
<span>
沉降监测
</span>
</div>
<div
class=
"list-wrapper"
v-show=
"showMenu4chenjiang"
>
<div
class=
"list-item"
><i
class=
"el-icon-caret-right"
></i><span>
xxxxx监测点
</span></div>
</div>
</section>
<section>
<div
class=
"header"
@
click=
"menuChange('showMenu4diya')"
>
<i
class=
"el-icon-caret-bottom"
v-show=
"showMenu4diya"
></i>
<i
class=
"el-icon-caret-right"
v-show=
"!showMenu4diya"
></i>
<span>
边坡监测
</span>
</div>
<div
class=
"list-wrapper"
v-show=
"showMenu4diya"
>
<div
class=
"list-item"
><i
class=
"el-icon-caret-right"
></i><span>
xxxxx监测点
</span></div>
</div>
</section>
</div>
</div>
<div
class=
"flex-1 ml15 flex-text flex-column ovh"
style=
"height: calc(100vh - 110px); justify-content: space-between"
>
<!-- 视频监控 -->
<div
class=
"wp100 relative"
>
<!-- 井下24小时人数变化趋势 -->
<div
class=
"wp100"
>
<div
class=
"relative"
>
<el-date-picker
style=
"width: 350px !important;"
v-model=
"createTime"
type=
"datetimerange"
range-separator=
"至"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
align=
"right"
>
</el-date-picker>
</div>
<div
class=
"mt5"
id=
"line"
style=
"width: 100%;height:400px;"
></div>
</div>
<!-- video end -->
</div>
<div
class=
"flex-text wp100"
>
<!-- 视频ai报警 列表 -->
<div
class=
"flex-1 ml15 ovh tableList"
>
<div
class=
"h44 f18 flex-text"
style=
"background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;"
>
<div
class=
"text-center"
style=
"width: 20%;"
>
监测时间
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
X位移
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
Y位移
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
Z位移
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
总变化量
</div>
</div>
<div
class=
""
style=
"height: 300px;overflow-y: scroll;"
>
<div
class=
"h44 color-theme flex-text f17 ovh bg-list-item"
:class=
"'bg-list-' + (index % 2)"
:style=
"{ marginTop: index == 0 ? '' : '2px' }"
v-for=
"(item,index) in tableList"
:key=
"index"
>
<div
class=
"text-center"
style=
"width: 20%;"
>
{{ item.time }}
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
{{ item.dispx }}
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
{{ item.dispy }}
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
{{ item.disph }}
</div>
<div
class=
"text-center"
style=
"width: 20%;"
>
{{ item.value }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script
src=
"../js/echarts.min.js"
></script>
<script
src=
"../js/echarts-gl.js"
></script>
<!-- 引入组件库 -->
<script
src=
"../js/element-ui.js"
></script>
<!-- axios -->
<script
src=
"../js/axios.min.js"
></script>
<!-- cookie -->
<script
src=
"../js/js.cookie.js"
></script>
<!-- 详情内页公用js -->
<!-- <script src="./static/js/public-detail.js"></script> -->
<script>
let
jessibucaPlayer
=
{};
//const host = location.protocol + '//' + window.location.host;
const
token
=
Cookies
.
get
(
'
ELADMIN-TOEKN
'
);
const
Axiosx
=
axios
.
create
({
headers
:
{
'
Authorization
'
:
token
}
});
Axiosx
.
interceptors
.
response
.
use
(
response
=>
{
return
response
},
error
=>
{
console
.
error
(
error
)
let
code
=
0
try
{
code
=
error
.
response
.
data
.
status
}
catch
(
e
)
{
if
(
error
.
toString
().
indexOf
(
'
Error: timeout
'
)
!==
-
1
)
{
console
.
error
(
'
当前网络不佳
'
)
return
}
}
if
(
!
code
)
{
console
.
error
(
'
当前网络不佳
'
)
return
}
if
(
code
===
401
)
{
alert
(
'
登录信息失效,请重新登录
'
)
window
.
open
(
host
+
'
/#/login
'
,
'
_self
'
)
return
}
if
(
code
===
400
)
{
alert
(
'
您没有权限使用此功能,请联系管理员开通
'
)
return
}
}
);
const
host
=
location
.
protocol
+
'
//
'
+
(
location
.
hostname
===
'
192.168.3.38
'
?
'
192.168.3.37
'
:
'
192.168.13.200
'
)
+
'
:8013
'
;
const
selfHost
=
location
.
hostname
===
'
192.168.3.38
'
?
'
http://192.168.3.226:8057
'
:
location
.
protocol
+
'
//
'
+
window
.
location
.
host
;
// 请求 token 用
const
request
=
axios
.
create
({});
request
.
defaults
.
headers
[
'
Content-Type
'
]
=
'
application/x-www-form-urlencoded; charset=UTF-8
'
;
var
map
;
// 地图
new
Vue
({
el
:
'
#app
'
,
data
()
{
return
{
// 公共信息
selectedMine
:
{},
// 菜单折叠显隐
showMenu4bianpo
:
true
,
sensorLIst
:
[],
currentSensorId
:
''
,
showMenu4weikuangku
:
true
,
showMenu4chenjiang
:
true
,
showMenu4diya
:
true
,
// 菜单折叠显隐 - 结束
createTime
:
[
'
2024-01-01
'
,
'
2024-09-30
'
],
bigScreenDetailMenu
:
''
,
selectedMine
:
{},
isReady
:
false
,
// 页面是否准备好 请求完接口变为true
// 表格数据
tableList
:
[]
}
},
mounted
()
{
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
this
.
tableList
.
push
({
videoName
:
'
sdfksdfxxxxx
'
,
warnTypeName
:
'
扣税的交流方
'
,
warnDatetime
:
'
ksdlfsdf
'
})
}
if
(
!
token
)
{
window
.
open
(
host
+
'
/#/login
'
,
'
_self
'
)
return
}
this
.
bigScreenDetailMenu
=
window
.
localStorage
.
getItem
(
'
bigScreenDetailMenu
'
)
// 当前矿山
const
selectedMineJson
=
window
.
localStorage
.
getItem
(
'
kd.selected.mine
'
)
let
noMine
=
false
if
(
!
selectedMineJson
)
{
noMine
=
true
}
else
{
const
selectedMine
=
JSON
.
parse
(
selectedMineJson
)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this
.
selectedMine
=
selectedMine
// }
}
if
(
noMine
)
{
alert
(
'
您当前还未选择矿山,请先选择矿山再查看此大屏
'
)
window
.
history
.
go
(
-
1
)
return
}
if
(
this
.
selectedMine
.
mineType
!=
2
)
{
alert
(
'
您当前选择的不是露天矿山,请先选择露天矿山,再查看此大屏
'
)
window
.
history
.
go
(
-
1
)
return
}
// this.getCharts();
// this.getChartsData()
this
.
getSensorList
(()
=>
{
});
this
.
getTableList
();
// this.getChartsData();
},
watch
:
{
createTime
()
{
this
.
getChartsData
()
}
},
methods
:
{
changeSensor
(
item
)
{
this
.
currentSensorId
=
item
.
equipNo
this
.
getTableList
()
this
.
getChartsData
();
},
getSensorList
(
fn
)
{
// 视频列表
Axiosx
.
get
(
host
+
'
/data/mp/sensorList
'
,
{
params
:
{
enterpriseId
:
this
.
selectedMine
.
id
,
}
}).
then
(
res
=>
{
this
.
sensorLIst
=
res
.
data
.
body
||
[];
if
(
this
.
sensorLIst
.
length
)
{
this
.
currentSensorId
=
this
.
sensorLIst
[
0
].
equipNo
}
console
.
log
(
'
sdfsdf
'
,
res
)
// fn && fn()
});
this
.
isReady
=
true
},
getTableList
()
{
// 视频列表
Axiosx
.
get
(
host
+
'
/data/mp/historyInside
'
,
{
params
:
{
code
:
this
.
currentSensorId
,
}
}).
then
(
res
=>
{
this
.
tableList
=
res
.
data
.
body
||
[];
console
.
log
(
'
sdfsdf
'
,
res
)
});
},
menuChange
(
type
)
{
[
'
showMenu4bianpo
'
,
'
showMenu4weikuangku
'
,
'
showMenu4chenjiang
'
,
'
showMenu4diya
'
].
forEach
((
item
)
=>
{
if
(
item
===
type
)
{
this
[
type
]
=
!
this
[
type
]
}
else
{
this
[
item
]
=
false
}
})
},
getChartsData
()
{
const
yAxisOption
=
{
name
:
"
人数
"
,
type
:
"
line
"
,
smooth
:
true
,
data
:
[],
itemStyle
:
{
color
:
'
#6dd1b9
'
},
markLine
:
{
silent
:
true
,
data
:
[
{
name
:
'
最高值
'
,
yAxis
:
400
},
{
name
:
'
最低值
'
,
yAxis
:
-
50
}
],
lineStyle
:
{
color
:
'
red
'
,
// 警戒线颜色
type
:
'
solid
'
// 警戒线样式
}
}
}
var
chartsOption
=
{
legend
:
{
textStyle
:
{
color
:
'
#fff
'
,
// 设置字体颜色
fontSize
:
14
// 设置字体大小
}
},
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
cross
'
,
crossStyle
:
{
color
:
'
#999
'
}
}
},
xAxis
:
{
data
:
[],
axisLine
:
{
lineStyle
:
{
color
:
'
#a3e4f5
'
}
},
axisTick
:
{
show
:
false
}
},
yAxis
:
{
name
:
'
Precipitation
'
,
splitLine
:
{
show
:
false
},
axisLabel
:
{
textStyle
:
{
color
:
'
#a3e4f5
'
}
}
},
grid
:
{
right
:
45
,
top
:
10
,
left
:
40
,
bottom
:
25
},
dataZoom
:
[
{
type
:
"
slider
"
,
show
:
false
,
startValue
:
14
,
endValue
:
23
,
// 一次性展示9个
textStyle
:
{
color
:
"
#ffffff
"
},
height
:
0
,
zoomLock
:
true
,
// 是否只平移不缩放
},
{
type
:
"
inside
"
,
//内置型数据区域缩放组件
moveOnMouseMove
:
true
// 开启鼠标移动窗口平移
}
],
series
:
[
yAxisOption
]
}
var
loading
=
this
.
$loading
({
lock
:
true
,
text
:
'
加载中
'
,
// spinner: 'el-icon-loading',
background
:
'
rgba(0, 0, 0, 0.7)
'
});
// 视频列表
Axiosx
.
get
(
host
+
'
/data/mp/imghistory
'
,
{
params
:
{
code
:
this
.
currentSensorId
,
daterange
:
this
.
createTime
?
this
.
createTime
.
join
(
'
,
'
)
:
''
}
}).
then
(
res
=>
{
const
result
=
res
.
data
.
body
;
if
(
result
)
{
chartsOption
.
xAxis
.
data
=
result
.
xData
.
data
chartsOption
.
series
=
result
.
yData
.
map
((
item
,
index
)
=>
{
var
tempObj
=
JSON
.
parse
(
JSON
.
stringify
(
yAxisOption
));
tempObj
.
data
=
item
.
data
tempObj
.
name
=
item
.
name
tempObj
.
markLine
.
data
=
item
.
alarm
return
tempObj
})
console
.
log
(
'
chartsOption
'
,
chartsOption
)
// 基于准备好的dom,初始化echarts实例
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
"
line
"
));
myChart
.
setOption
(
chartsOption
)
}
});
loading
&&
loading
.
close
();
this
.
isReady
=
true
},
changeMenu
(
menuName
)
{
localStorage
.
setItem
(
'
bigScreenDetailMenu
'
,
menuName
)
this
.
bigScreenDetailMenu
=
menuName
},
getAccessToken
(
appKey
,
appSecret
)
{
var
dataJson
=
'
appKey=
'
+
appKey
+
'
&appSecret=
'
+
appSecret
;
return
request
.
post
(
"
/ys7com
"
,
dataJson
).
then
(
res
=>
{
var
data
=
res
.
data
||
{};
if
(
data
[
'
code
'
]
==
'
200
'
)
{
return
data
[
'
data
'
][
'
accessToken
'
]
}
else
{
return
null
}
}).
catch
(
err
=>
{
console
.
log
(
err
);
return
err
})
},
},
})
</script>
</html>
\ No newline at end of file
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