Skip to content

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

内页优化处理

parent f661c303
Show whitespace changes
Inline Side-by-side
Showing with 192 additions and 31 deletions
public/datav/detail/humidity-monitor.html
View file @ dda2fde5
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" <el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
:class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }" :class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }"
v-for="(item,index) in tableList" :key="index"> v-for="(item,index) in tableList" :key="index">
<div class="text-center" style="width: 50%;">{{ item.time }}</div> <div class="text-center" style="width: 50%;">{{ item.time }}</div>
<div class="text-center" style="width: 50%;">{{ item.dispx }}</div> <div class="text-center" style="width: 50%;">{{ item.svalue }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -162,7 +162,6 @@ ...@@ -162,7 +162,6 @@
// this.getChartsData() // this.getChartsData()
this.getSensorList(() => {}); this.getSensorList(() => {});
this.getTableList();
// this.getChartsData(); // this.getChartsData();
...@@ -187,7 +186,9 @@ ...@@ -187,7 +186,9 @@
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { if (this.sensorLIst.length) {
this.currentSensorId = this.sensorLIst[0].equipNo this.changeSensor({
equipNo: this.sensorLIst[0].equipNo
})
} }
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
......
public/datav/detail/mine-global.html 0 → 100644
View file @ dda2fde5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<title>露天矿山数据总览</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/index.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/element-ui.css">
<!-- 引入样式文件 -->
<link rel="stylesheet" href="../css/vant@4.css" />
<!-- 引入大屏内页公共样式 -->
<link rel="stylesheet" href="./static/css/public-detail.css" />
<!-- 先引入 Vue -->
<script src="../js/vue.min.js"></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../js/vue@2.6.14"></script>
<script src="../js/vant.min.js"></script>
<style>
</style>
</head>
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app">
<div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1"
style="background-image: url('../static/title-bg-left.png');background-size: 100% 100%;height: 80px;">
</div>
<div class="flex-text"
style="background-image: url('../static/title-bg-center.png');background-size: 100% 100%;height: 80px;">
<div style="margin-top: -10px;">{{selectedMine.name || ''}}</div>
</div>
<div class="flex-1"
style="background-image: url('../static/title-bg-right.png');background-size: 100% 100%;height: 80px;">
</div>
</div>
</div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<div class="f20 color-theme ml10">返回</div>
</div>
<!-- <div class="fixed flex-text maxIndex pointer" style="right: 30px;top: 45px;" @click="gotoManagement()">
<img style="width: 24px;height: 24px;" src="../static/backstage.png" alt="">
<div class="f20 color-theme ml10">后台管理</div>
</div> -->
<div class="flex-text ml10 mr10 mt15" style="align-items: start;">
<div style="width: 490px;height: calc(100vh - 110px);">
<!-- 通知公告 -->
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
<div class="mineInfo">
<p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地址：{{selectedMine.address}}</p>
<p>联系人：{{selectedMine.liablePerson}}</p>
<p>联系方式：{{selectedMine.liablePersonPhone}}</p>
</div>
<div class="menuInfo">
<ul>
<li v-for="(item, index) in menuObj.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 active" @click="location.reload()'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div>
</div>
</section>
</div>
</div>
<!-- 右侧容器 -->
<div style="width: calc(100vw - 490px); height: calc(100vh - 110px);">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
<!-- <img src="https://dummyimage.com/200x275" 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>
var map; // 地图
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
showMenu4bianpo: true,
// 视频ai报警 列表
aiList: [],
filePath: ''
}
},
watch: {
},
mounted() {
this.getImage()
},
methods: {
getImage(fn) {
// 视频列表
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + '/file' + res.data.body
});
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/shape-monitor.html
View file @ dda2fde5
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
<span>尾矿库监测</span> <span>尾矿库监测</span>
</div> </div>
<div class="list-wrapper" v-show="showMenu4weikuangku"> <div class="list-wrapper" v-show="showMenu4weikuangku">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div> <p class="ml40">暂无数据</p>
</div> </div>
</section> </section>
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
<span>沉降监测</span> <span>沉降监测</span>
</div> </div>
<div class="list-wrapper" v-show="showMenu4chenjiang"> <div class="list-wrapper" v-show="showMenu4chenjiang">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div> <p class="ml40">暂无数据</p>
</div> </div>
</section> </section>
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
<span>边坡监测</span> <span>边坡监测</span>
</div> </div>
<div class="list-wrapper" v-show="showMenu4diya"> <div class="list-wrapper" v-show="showMenu4diya">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div> <p class="ml40">暂无数据</p>
</div> </div>
</section> </section>
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" <el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
......
public/datav/detail/static/js/public-detail.js
View file @ dda2fde5
...@@ -52,12 +52,27 @@ var gemhoUtil = { ...@@ -52,12 +52,27 @@ var gemhoUtil = {
detailPageMixin: { detailPageMixin: {
data: function() { data: function() {
// 获取今天的日期
const today = new Date();
// 获取前七天的日期
const sevenDaysAgo = new Date();
sevenDaysAgo.setDate(today.getDate() - 7);
// 格式化日期为 YYYY-MM-DD HH:mm:ss
const formatDate = (date) => {
const pad = (num) => String(num).padStart(2, '0');
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
};
// 生成数组
const dateArray = [formatDate(sevenDaysAgo), formatDate(today)];
return { return {
// 公共信息 // 公共信息
selectedMine: {}, selectedMine: {},
menuObj: menuObj, menuObj: menuObj,
bigScreenDetailMenu: '', bigScreenDetailMenu: '',
createTime: ['2024-01-01', '2024-09-30'], createTime: dateArray,
isReady: false, // 页面是否准备好 请求完接口变为true isReady: false, // 页面是否准备好 请求完接口变为true
}; };
......
public/datav/detail/temperature-monitor.html
View file @ dda2fde5
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" <el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
:class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }" :class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }"
v-for="(item,index) in tableList" :key="index"> v-for="(item,index) in tableList" :key="index">
<div class="text-center" style="width: 50%;">{{ item.time }}</div> <div class="text-center" style="width: 50%;">{{ item.time }}</div>
<div class="text-center" style="width: 50%;">{{ item.dispx }}</div> <div class="text-center" style="width: 50%;">{{ item.svalue }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -154,8 +154,6 @@ ...@@ -154,8 +154,6 @@
// this.getChartsData() // this.getChartsData()
this.getSensorList(() => {}); this.getSensorList(() => {});
this.getTableList();
// this.getChartsData(); // this.getChartsData();
}, },
...@@ -179,7 +177,9 @@ ...@@ -179,7 +177,9 @@
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { if (this.sensorLIst.length) {
this.currentSensorId = this.sensorLIst[0].equipNo this.changeSensor({
equipNo: this.sensorLIst[0].equipNo
})
} }
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
......
public/datav/detail/water-monitor.html
View file @ dda2fde5
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
<div class="flex-text ml10 mr10 mt15" style="padding-top: 40px;"> <div class="flex-text ml10 mr10 mt15">
<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));">
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" <el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
<div class="color-theme ml10 f14">出井</div> <div class="color-theme ml10 f14">出井</div>
</div> </div>
</div> --> </div> -->
<div class="mt5" id="line" style="width: 100%;height:313px;"></div> <div class="mt5" id="line" style="width: 100%;height:380px;"></div>
</div> </div>
<!-- video end --> <!-- video end -->
</div> </div>
...@@ -171,7 +171,6 @@ ...@@ -171,7 +171,6 @@
}, },
mounted() { mounted() {
this.getSensorList(() => {}); this.getSensorList(() => {});
this.getTableList();
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
...@@ -188,9 +187,10 @@ ...@@ -188,9 +187,10 @@
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { if (this.sensorLIst.length) {
this.currentSensorId = this.sensorLIst[0].equipNo this.changeSensor({
equipNo: this.sensorLIst[0].equipNo
})
} }
console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
this.isReady = true this.isReady = true
......
public/datav/detail/wind-monitor.html
View file @ dda2fde5
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" <el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
:class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }" :class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }"
v-for="(item,index) in tableList" :key="index"> v-for="(item,index) in tableList" :key="index">
<div class="text-center" style="width: 50%;">{{ item.time }}</div> <div class="text-center" style="width: 50%;">{{ item.time }}</div>
<div class="text-center" style="width: 50%;">{{ item.dispx }}</div> <div class="text-center" style="width: 50%;">{{ item.svalue }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -156,10 +156,6 @@ ...@@ -156,10 +156,6 @@
this.getSensorList(() => { this.getSensorList(() => {
}); });
this.getTableList();
console.log('menuList', menuList)
// this.getChartsData(); // this.getChartsData();
}, },
...@@ -183,9 +179,10 @@ ...@@ -183,9 +179,10 @@
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { if (this.sensorLIst.length) {
this.currentSensorId = this.sensorLIst[0].equipNo this.changeSensor({
equipNo: this.sensorLIst[0].equipNo
})
} }
console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
this.isReady = true this.isReady = true
......
public/datav/index.html
View file @ dda2fde5
...@@ -896,7 +896,7 @@ ...@@ -896,7 +896,7 @@
<!-- cookie --> <!-- cookie -->
<script src="js/js.cookie.js"></script> <script src="js/js.cookie.js"></script>
<script> <script>
const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013'; const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013';
// 小黄 // 小黄
//const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.2.200' : '192.168.13.200') + ':8013'; //const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.2.200' : '192.168.13.200') + ':8013';
...@@ -1518,7 +1518,9 @@ ...@@ -1518,7 +1518,9 @@
window.gotoDataView = (mineType, mineId) => { window.gotoDataView = (mineType, mineId) => {
const mine = this.mineList.filter(x => x.mineType == mineType && x.id == mineId)[0] const mine = this.mineList.filter(x => x.mineType == mineType && x.id == mineId)[0]
window.localStorage.setItem('kd.selected.mine', JSON.stringify(mine)) window.localStorage.setItem('kd.selected.mine', JSON.stringify(mine))
if(mineType == 1){
window.open(selfHost + '/datav/detail/video-monitor.html', '_self')
/* if(mineType == 1){
window.open(selfHost + '/datav/underground.html', '_self') window.open(selfHost + '/datav/underground.html', '_self')
} }
if(mineType == 2){ if(mineType == 2){
...@@ -1526,7 +1528,7 @@ ...@@ -1526,7 +1528,7 @@
} }
if(mineType == 3){ if(mineType == 3){
window.open(selfHost + '/datav/tailings.html', '_self') window.open(selfHost + '/datav/tailings.html', '_self')
} }*/
} }
// 弧线 // 弧线
......
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