Skip to content

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

内页模块详情添加

parent 3e68ea57
Show whitespace changes
Inline Side-by-side
Showing with 1973 additions and 45 deletions
public/datav/detail/daqi-monitor.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/dev-use.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/dizhi-huanjing.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/green-mine.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/mine-global.html
View file @ b99aab8f
...@@ -11,20 +11,24 @@ ...@@ -11,20 +11,24 @@
<link rel="stylesheet" href="../css/element-ui.css"> <link rel="stylesheet" href="../css/element-ui.css">
<!-- 引入样式文件 --> <!-- 引入样式文件 -->
<link rel="stylesheet" href="../css/vant@4.css" /> <link rel="stylesheet" href="../css/vant@4.css" />
<!-- 引入大屏内页公共样式 --> <!-- 引入大屏内页公共样式 -->
<link rel="stylesheet" href="./static/css/public-detail.css" /> <link rel="stylesheet" href="./static/css/public-detail.css" />
<!-- 先引入 Vue --> <!-- 先引入 Vue -->
<script src="../js/vue.min.js"></script> <script src="../js/vue.min.js"></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 --> <!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../js/vue@2.6.14"></script> <script src="../js/vue@2.6.14"></script>
<script src="../js/vant.min.js"></script> <script src="../js/vant.min.js"></script>
<style> <style>
</style> </style>
</head> </head>
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;"> <body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app"> <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 style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;"> <div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1" <div class="flex-1"
...@@ -45,14 +49,8 @@ ...@@ -45,14 +49,8 @@
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
<!-- <div class="fixed flex-text maxIndex pointer" style="right: 30px;top: 45px;" @click="gotoManagement()"> <div class="flex-text ml10 mr10 mt15">
<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" style="align-items: start;">
<div style="width: 490px;height: calc(100vh - 110px);"> <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 style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
<div class="mineInfo"> <div class="mineInfo">
...@@ -63,7 +61,8 @@ ...@@ -63,7 +61,8 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.natural.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}"> <li v-for="(item, index) in menuObj.natural.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
</ul> </ul>
...@@ -75,16 +74,19 @@ ...@@ -75,16 +74,19 @@
<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 active" @click="location.reload()'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div> <div class="list-item" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</span></div>
</div> </div>
</section> </section>
</div> </div>
</div> </div>
<!-- 右侧容器 -->
<div style="width: calc(100vw - 490px); height: calc(100vh - 110px);"> <div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;"> <img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
<!-- <img src="https://dummyimage.com/200x275" alt="" srcset="" style="width: 100%; height: 100%;"> -->
</div> </div>
</div> </div>
...@@ -102,31 +104,40 @@ ...@@ -102,31 +104,40 @@
<!-- cookie --> <!-- cookie -->
<script src="../js/js.cookie.js"></script> <script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js --> <!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script> <script src="./static/js/public-detail.js"></script>
<script> <script>
var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
mixins: [gemhoUtil.detailPageMixin], mixins: [gemhoUtil.detailPageMixin],
data() { data() {
return { return {
// 菜单折叠显隐
showMenu4bianpo: true, showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 视频ai报警 列表 // 表格数据
aiList: [], tableList: [],
filePath: '' filePath: ''
} }
}, },
watch: {
},
mounted() { mounted() {
this.getImage() // this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
}, },
methods: { methods: {
getImage(fn) { getImage() {
// 视频列表 // 视频列表
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/api/kdFile/natural', {
params: { params: {
......
public/datav/detail/resource-storage.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/shui-monitor.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/shuitu-monitor.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/shuizhi-monitor.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/static/js/public-detail.js
View file @ b99aab8f
...@@ -72,6 +72,7 @@ var gemhoUtil = { ...@@ -72,6 +72,7 @@ var gemhoUtil = {
selectedMine: {}, selectedMine: {},
menuObj: menuObj, menuObj: menuObj,
bigScreenDetailMenu: '', bigScreenDetailMenu: '',
bigScreenDetailMenuModel: '',
createTime: dateArray, createTime: dateArray,
isReady: false, // 页面是否准备好 请求完接口变为true isReady: false, // 页面是否准备好 请求完接口变为true
...@@ -87,6 +88,7 @@ var gemhoUtil = { ...@@ -87,6 +88,7 @@ var gemhoUtil = {
return return
} }
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu') this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
this.bigScreenDetailMenuModel = window.localStorage.getItem('bigScreenDetailMenuModel')
// 当前矿山 // 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine') const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false let noMine = false
...@@ -107,6 +109,8 @@ var gemhoUtil = { ...@@ -107,6 +109,8 @@ var gemhoUtil = {
}, },
changeMenu(item) { changeMenu(item) {
localStorage.setItem('bigScreenDetailMenu', item.name) localStorage.setItem('bigScreenDetailMenu', item.name)
localStorage.setItem('bigScreenDetailMenuModel', item.model)
this.bigScreenDetailMenu = item.name this.bigScreenDetailMenu = item.name
// 跳转页面 // 跳转页面
// window.open(item.url) // window.open(item.url)
...@@ -119,24 +123,32 @@ var menuObj = { ...@@ -119,24 +123,32 @@ var menuObj = {
emergency: { emergency: {
menuList: [{ menuList: [{
name: '视频监控', name: '视频监控',
model: 'emergency',
url: '/datav/detail/video-monitor.html' url: '/datav/detail/video-monitor.html'
},{ },{
name: '变形监测', name: '变形监测',
model: 'emergency',
url: '/datav/detail/shape-monitor.html' url: '/datav/detail/shape-monitor.html'
},{ },{
name: '温度监测', name: '温度监测',
model: 'emergency',
url: '/datav/detail/temperature-monitor.html' url: '/datav/detail/temperature-monitor.html'
},{ },{
name: '湿度监测', name: '湿度监测',
model: 'emergency',
url: '/datav/detail/humidity-monitor.html' url: '/datav/detail/humidity-monitor.html'
},{ },{
name: '风速监测', name: '风速监测',
model: 'emergency',
url: '/datav/detail/wind-monitor.html' url: '/datav/detail/wind-monitor.html'
},{ },{
name: '降水监测', name: '降水监测',
model: 'emergency',
url: '/datav/detail/water-monitor.html' url: '/datav/detail/water-monitor.html'
},{ },{
name: '人员定位', name: '人员定位',
model: 'emergency',
url: '/datav/detail/people-monitor.html', url: '/datav/detail/people-monitor.html',
subMenu: [{ subMenu: [{
name: '人员数据统计', name: '人员数据统计',
...@@ -150,73 +162,94 @@ var menuObj = { ...@@ -150,73 +162,94 @@ var menuObj = {
natural: { natural: {
menuList: [{ menuList: [{
name: '视频监控', name: '视频监控',
model: 'natural',
url: '/datav/detail/video-monitor.html' url: '/datav/detail/video-monitor.html'
},{ },{
name: '矿山全景', name: '矿山全景',
url: '/datav/detail/shape-monitor.html' model: 'natural',
url: '/datav/detail/mine-global.html'
},{ },{
name: '资源储备', name: '资源储备',
url: '/datav/detail/temperature-monitor.html' model: 'natural',
url: '/datav/detail/resource-storage.html'
},{ },{
name: '水检测', name: '水监测',
url: '/datav/detail/humidity-monitor.html' model: 'natural',
url: '/datav/detail/shui-monitor.html'
},{ },{
name: '土监测', name: '土监测',
url: '/datav/detail/wind-monitor.html' model: 'natural',
url: '/datav/detail/tu-monitor.html'
},{ },{
name: '地质环境', name: '地质环境',
url: '/datav/detail/water-monitor.html' model: 'natural',
url: '/datav/detail/dizhi-huanjing.html'
},{ },{
name: '绿色矿山', name: '绿色矿山',
url: '/datav/detail/shape-monitor.html', model: 'natural',
url: '/datav/detail/green-mine.html',
},{ },{
name: '开发利用', name: '开发利用',
url: '/datav/detail/shape-monitor.html', model: 'natural',
url: '/datav/detail/dev-use.html',
},{ },{
name: '变形监测', name: '变形监测',
model: 'natural',
url: '/datav/detail/shape-monitor.html', url: '/datav/detail/shape-monitor.html',
}], }],
}, },
water: { watersystem: {
menuList: [{ menuList: [{
name: '视频监控', name: '视频监控',
model: 'watersystem',
url: '/datav/detail/video-monitor.html' url: '/datav/detail/video-monitor.html'
},{ },{
name: '水土流失', name: '水土流失',
url: '/datav/detail/shape-monitor.html' model: 'watersystem',
url: '/datav/detail/shuitu-monitor.html'
},{ },{
name: '降水监测', name: '降水监测',
model: 'watersystem',
url: '/datav/detail/water-monitor.html' url: '/datav/detail/water-monitor.html'
},{ },{
name: '温度监测', name: '温度监测',
url: '/datav/detail/humidity-monitor.html' model: 'watersystem',
url: '/datav/detail/temperature-monitor.html'
},{ },{
name: '湿度监测', name: '湿度监测',
url: '/datav/detail/wind-monitor.html' model: 'watersystem',
url: '/datav/detail/humidity-monitor.html'
},{ },{
name: '风速监测', name: '风速监测',
url: '/datav/detail/water-monitor.html' model: 'watersystem',
url: '/datav/detail/wind-monitor.html'
}], }],
}, },
shengtai: { ecosystem: {
menuList: [{ menuList: [{
name: '视频监控', name: '视频监控',
model: 'ecosystem',
url: '/datav/detail/video-monitor.html' url: '/datav/detail/video-monitor.html'
},{ },{
name: '水土流失', name: '水土流失',
url: '/datav/detail/shape-monitor.html' model: 'ecosystem',
url: '/datav/detail/shuitu-monitor.html'
},{ },{
name: '土壤监测', name: '土壤监测',
url: '/datav/detail/water-monitor.html' model: 'ecosystem',
url: '/datav/detail/turang-monitor.html'
},{ },{
name: '噪声监测', name: '噪声监测',
url: '/datav/detail/humidity-monitor.html' model: 'ecosystem',
url: '/datav/detail/zaosheng-monitor.html'
},{ },{
name: '大气监测', name: '大气监测',
url: '/datav/detail/wind-monitor.html' model: 'ecosystem',
url: '/datav/detail/daqi-monitor.html'
},{ },{
name: '烟道监测', name: '烟道监测',
url: '/datav/detail/water-monitor.html' model: 'ecosystem',
url: '/datav/detail/yandao-monitor.html'
}], }],
}, },
} }
......
public/datav/detail/tu-monitor.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/turang-monitor.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/yandao-monitor.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/zaosheng-monitor.html 0 → 100644
View file @ b99aab8f
<!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="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.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="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.natural.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" :class="{active: item.equipNo===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</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">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
</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>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage() {
// 视频列表
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 + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
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