Skip to content

Z
ZiBoYingJI
Commit 4363260e authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

人员定位

parent 7cbfa296
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 37 deletions
public/datav/detail/people-location.html 0 → 100644
View file @ 4363260e
<!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 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="goPrePage('emergency')">
<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 mt40" style="align-items: start;">
<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="mineInfo">
<p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地址：{{selectedMine.address}}</p>
<p>联系人：{{selectedMine.liablePerson}}</p>
<p>联系方式：{{selectedMine.liablePersonPhone}}</p>
</div>
<div class="menuInfo">
<ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}}
</li>
</ul>
</div>
</div>
<!-- 视频监控列表 -->
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section>
<div class="list-wrapper" v-show="showMenu4bianpo">
<div class="list-item" @click="location.href='people-location.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员数据统计</span></div>
<div class="list-item active" @click="location.href='people-monitor.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div>
</div>
</section>
</div>
</div>
<!-- 右侧容器 -->
<div style="width: calc(100vw - 490px); height: calc(100vh - 110px);">
<img :src="filePath" alt="" srcset="">
</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>
var map; // 地图
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
showMenu4bianpo: true,
// 视频ai报警 列表
aiList: [],
filePath: ''
}
},
watch: {
},
mounted() {
this.getImage()
},
methods: {
getImage(fn) {
// 视频列表
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/people-monitor.html
View file @ 4363260e
...@@ -78,8 +78,8 @@ ...@@ -78,8 +78,8 @@
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);"> <div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section> <section>
<div class="list-wrapper" v-show="showMenu4bianpo"> <div class="list-wrapper" v-show="showMenu4bianpo">
<div class="list-item"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员数据统计</span></div> <div class="list-item active" @click="location.href='people-monitor.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员数据统计</span></div>
<div class="list-item"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div> <div class="list-item" @click="location.href='people-location.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div>
</div> </div>
</section> </section>
</div> </div>
...@@ -87,18 +87,24 @@ ...@@ -87,18 +87,24 @@
<!-- 右侧容器 --> <!-- 右侧容器 -->
<div> <div>
<div class="flex-1 ml15 flex-text ovh" style="height: 300px; display:flex; align-items: start;"> <div class="flex-1 ml15 flex-text ovh">
<!-- 视频监控 --> <!-- 视频监控 -->
<div class="flex-1"> <div class="flex-1">
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div> <div>
<div class="relative"> <!-- <div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt=""> <img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover"> <div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">井下24小时人数变化趋势</div> <div class="ml40 f20 color-theme" style="margin-top: -4px;">井下24小时人数变化趋势</div>
</div> </div>
</div> -->
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >井下24小时人数变化趋势</div>
</div>
</div> </div>
<div class="flex-text" style="height: 0px;"> <!-- <div class="flex-text" style="height: 0px;">
<div class="flex-text"> <div class="flex-text">
<div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;"> <div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;">
</div> </div>
...@@ -114,21 +120,33 @@ ...@@ -114,21 +120,33 @@
</div> </div>
<div class="color-theme ml10 f14">出井</div> <div class="color-theme ml10 f14">出井</div>
</div> </div>
</div> -->
<div class="relative" style="height: 350px;">
<img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
src="../static/content-box-bg.png" alt="">
<div class="poa-cover" id="line"></div>
</div> </div>
<div class="mt5" id="line" style="width: 100%;height:213px;"></div> <!-- <div class="mt5" id="line" style="width: 100%;height:350px;"></div> -->
</div> </div>
</div> </div>
<!-- 区域类型人数分布图 --> <!-- 区域类型人数分布图 -->
<div class="flex-1"> <div class="flex-1">
<div class="relative"> <!-- <div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt=""> <img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover"> <div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">区域类型人数分布图</div> <div class="ml40 f20 color-theme" style="margin-top: -4px;">区域类型人数分布图</div>
</div> </div>
</div> -->
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >区域类型人数分布图</div>
</div>
</div> </div>
<div class="relative" style="height: 210px;"> <div class="relative" style="height: 350px;">
<img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;" <img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
src="../static/content-box-bg.png" alt=""> src="../static/content-box-bg.png" alt="">
<div class="poa-cover" id="bar"></div> <div class="poa-cover" id="bar"></div>
...@@ -137,26 +155,31 @@ ...@@ -137,26 +155,31 @@
<!-- 报警统计 --> <!-- 报警统计 -->
<div class="flex-1 ml15"> <div class="flex-1 ml15">
<div class="relative"> <!-- <div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt=""> <img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover"> <div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">报警统计</div> <div class="ml40 f20 color-theme" style="margin-top: -4px;">报警统计</div>
</div> </div>
</div> -->
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >报警统计</div>
</div>
</div> </div>
<div class="relative" style="height: 210px;"> <div class="relative" style="height: 350px;">
<img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;" <img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
src="../static/content-box-bg.png" alt=""> src="../static/content-box-bg.png" alt="">
<div class="poa-cover" id="pie"></div> <div class="poa-cover" id="pie"></div>
<div class="absolute" style="right: 20px;bottom: 40px;"> <div class="absolute" style="left: 20px;top: 10px;">
<div class="flex-text"> <div class="flex mt5">
<div class="round" style="width: 10px;height: 10px;background-color: #3ceaed;"> <div class="f14 ml10">报警总数 500</div>
</div>
<div class="f14 ml10">已处置</div>
</div> </div>
<div class="flex-text mt5"> <div class="flex mt5">
<div class="round" style="width: 10px;height: 10px;background-color: #f9b65e;"> <div class="f14 ml10">已处置 300</div>
</div> </div>
<div class="f14 ml10">未处置</div> <div class="flex mt5">
<div class="f14 ml10">未处置 200</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -166,9 +189,15 @@ ...@@ -166,9 +189,15 @@
</div> </div>
<div class="flex-1 ml15 flex-text ovh" style="height: 300px; display:flex; align-items: start;"> <div class="flex-1 ml15 flex-text ovh" style="height: 400px;">
<!-- 视频监控 --> <!-- 视频监控 -->
<div class="flex-1 ml15 ovh"> <div class="flex-1 ml15 ovh">
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >区域人数统计</div>
</div>
</div>
<div class="h44 f18 flex-text" <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;"> 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: 200px;">区域名称</div> <div class="text-center" style="width: 200px;">区域名称</div>
...@@ -192,6 +221,12 @@ ...@@ -192,6 +221,12 @@
</div> </div>
<!-- 右侧表格 --> <!-- 右侧表格 -->
<div class="flex-1 ml15 ovh"> <div class="flex-1 ml15 ovh">
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >井下人员实时状态</div>
</div>
</div>
<div class="h44 f18 flex-text" <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;"> 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: 140px;">姓名</div> <div class="text-center" style="width: 140px;">姓名</div>
...@@ -254,23 +289,6 @@ ...@@ -254,23 +289,6 @@
}, },
mounted() { mounted() {
this.getData(); this.getData();
// 视频列表
Axiosx.get(host + '/api/video-mine/mineId', {
params: {
//mineType: this.selectedMine.mineType,
mineId: this.selectedMine.id,
}
}).then(res => {
res = res.data.body;
this.info = {
appKey: res.appKey,
appSecret: res.appSecret,
};
this.videos = res.videoChannelList || [];
this.createVideo(res.videoChannelList[0]);
});
}, },
methods: { methods: {
async getData(e) { async getData(e) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment