Skip to content

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

内页模块详情添加

parent 3e68ea57
Hide 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 @@
<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" />
<!-- 引入大屏内页公共样式 -->
<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"
......@@ -45,16 +49,10 @@
<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" style="align-items: start;">
<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>
......@@ -63,7 +61,8 @@
</div>
<div class="menuInfo">
<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}}
</li>
</ul>
......@@ -75,17 +74,20 @@
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section>
<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>
</section>
</div>
</div>
<!-- 右侧容器 -->
<div style="width: calc(100vw - 490px); height: calc(100vh - 110px);">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
<!-- <img src="https://dummyimage.com/200x275" alt="" srcset="" style="width: 100%; height: 100%;"> -->
<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>
......@@ -102,31 +104,40 @@
<!-- 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: [],
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
}
},
watch: {
},
mounted() {
this.getImage()
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
getImage(fn) {
getImage() {
// 视频列表
Axiosx.get(host + '/api/kdFile/natural', {
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 = {
selectedMine: {},
menuObj: menuObj,
bigScreenDetailMenu: '',
bigScreenDetailMenuModel: '',
createTime: dateArray,
isReady: false, // 页面是否准备好 请求完接口变为true
......@@ -87,6 +88,7 @@ var gemhoUtil = {
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
this.bigScreenDetailMenuModel = window.localStorage.getItem('bigScreenDetailMenuModel')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
......@@ -107,6 +109,8 @@ var gemhoUtil = {
},
changeMenu(item) {
localStorage.setItem('bigScreenDetailMenu', item.name)
localStorage.setItem('bigScreenDetailMenuModel', item.model)
this.bigScreenDetailMenu = item.name
// 跳转页面
// window.open(item.url)
......@@ -119,24 +123,32 @@ var menuObj = {
emergency: {
menuList: [{
name: '视频监控',
model: 'emergency',
url: '/datav/detail/video-monitor.html'
},{
name: '变形监测',
model: 'emergency',
url: '/datav/detail/shape-monitor.html'
},{
name: '温度监测',
model: 'emergency',
url: '/datav/detail/temperature-monitor.html'
},{
name: '湿度监测',
model: 'emergency',
url: '/datav/detail/humidity-monitor.html'
},{
name: '风速监测',
model: 'emergency',
url: '/datav/detail/wind-monitor.html'
},{
name: '降水监测',
model: 'emergency',
url: '/datav/detail/water-monitor.html'
},{
name: '人员定位',
model: 'emergency',
url: '/datav/detail/people-monitor.html',
subMenu: [{
name: '人员数据统计',
......@@ -150,73 +162,94 @@ var menuObj = {
natural: {
menuList: [{
name: '视频监控',
model: 'natural',
url: '/datav/detail/video-monitor.html'
},{
name: '矿山全景',
url: '/datav/detail/shape-monitor.html'
model: 'natural',
url: '/datav/detail/mine-global.html'
},{
name: '资源储备',
url: '/datav/detail/temperature-monitor.html'
model: 'natural',
url: '/datav/detail/resource-storage.html'
},{
name: '水检测',
url: '/datav/detail/humidity-monitor.html'
name: '水监测',
model: 'natural',
url: '/datav/detail/shui-monitor.html'
},{
name: '土监测',
url: '/datav/detail/wind-monitor.html'
model: 'natural',
url: '/datav/detail/tu-monitor.html'
},{
name: '地质环境',
url: '/datav/detail/water-monitor.html'
model: 'natural',
url: '/datav/detail/dizhi-huanjing.html'
},{
name: '绿色矿山',
url: '/datav/detail/shape-monitor.html',
model: 'natural',
url: '/datav/detail/green-mine.html',
},{
name: '开发利用',
url: '/datav/detail/shape-monitor.html',
model: 'natural',
url: '/datav/detail/dev-use.html',
},{
name: '变形监测',
model: 'natural',
url: '/datav/detail/shape-monitor.html',
}],
},
water: {
watersystem: {
menuList: [{
name: '视频监控',
model: 'watersystem',
url: '/datav/detail/video-monitor.html'
},{
name: '水土流失',
url: '/datav/detail/shape-monitor.html'
model: 'watersystem',
url: '/datav/detail/shuitu-monitor.html'
},{
name: '降水监测',
model: 'watersystem',
url: '/datav/detail/water-monitor.html'
},{
name: '温度监测',
url: '/datav/detail/humidity-monitor.html'
model: 'watersystem',
url: '/datav/detail/temperature-monitor.html'
},{
name: '湿度监测',
url: '/datav/detail/wind-monitor.html'
model: 'watersystem',
url: '/datav/detail/humidity-monitor.html'
},{
name: '风速监测',
url: '/datav/detail/water-monitor.html'
model: 'watersystem',
url: '/datav/detail/wind-monitor.html'
}],
},
shengtai: {
ecosystem: {
menuList: [{
name: '视频监控',
model: 'ecosystem',
url: '/datav/detail/video-monitor.html'
},{
name: '水土流失',
url: '/datav/detail/shape-monitor.html'
model: 'ecosystem',
url: '/datav/detail/shuitu-monitor.html'
},{
name: '土壤监测',
url: '/datav/detail/water-monitor.html'
model: 'ecosystem',
url: '/datav/detail/turang-monitor.html'
},{
name: '噪声监测',
url: '/datav/detail/humidity-monitor.html'
model: 'ecosystem',
url: '/datav/detail/zaosheng-monitor.html'
},{
name: '大气监测',
url: '/datav/detail/wind-monitor.html'
model: 'ecosystem',
url: '/datav/detail/daqi-monitor.html'
},{
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