Skip to content

Z
ZiBoYingJI
Commit 1e1a72e5 authored by Kimber's avatar Kimber
Browse files
Options

Merge branch 'master' of http://h.gemho.cn:7099/18963165066/ziboyingji

parents 560d230e caa6c212
Hide whitespace changes
Inline Side-by-side
Showing with 6184 additions and 1987 deletions
public/datav/detail/daqi-monitor.html 0 → 100644
View file @ 1e1a72e5
<!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="flex-text ml10 mr10 mt15" style="margin-top:20px;">
<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.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.url}">
{{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">
<!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>
<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: []
}
},
mounted() {
},
watch: {
createTime() {
}
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/sz/sensorList/feng', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
},
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/dev-use.html 0 → 100644
View file @ 1e1a72e5
<!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.url}">
{{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: '3' // 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 @ 1e1a72e5
<!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.url}">
{{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: '4' // 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 @ 1e1a72e5
<!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.url}">
{{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: '5' // 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/humidity-monitor.html
View file @ 1e1a72e5
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="history.back()"> <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=""> <img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
...@@ -66,17 +66,13 @@ ...@@ -66,17 +66,13 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.url}">
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li> {{item.name}}
<li @click="changeMenu('temprate')" :class="{active: bigScreenDetailMenu==='temprate'}">温度监测
</li>
<li @click="changeMenu('wind')" :class="{active: bigScreenDetailMenu==='wind'}">风速监测</li>
<li @click="changeMenu('water')" :class="{active: bigScreenDetailMenu==='water'}">降水监测</li>
<li @click="changeMenu('people')" :class="{active: bigScreenDetailMenu==='people'}">人员定位
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- 视频监控列表 --> <!-- 视频监控列表 -->
...@@ -98,7 +94,7 @@ ...@@ -98,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="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -113,14 +109,14 @@ ...@@ -113,14 +109,14 @@
<div class="h44 f18 flex-text" <div class="h44 f18 flex-text"
style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;"> style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
<div class="text-center" style="width: 50%;">监测时间</div> <div class="text-center" style="width: 50%;">监测时间</div>
<div class="text-center" style="width: 50%;">温度(°C)</div> <div class="text-center" style="width: 50%;">湿度(%)</div>
</div> </div>
<div class="" style="height: 300px;overflow-y: scroll;"> <div class="" style="height: 300px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh bg-list-item" <div class="h44 color-theme flex-text f17 ovh bg-list-item"
: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>
...@@ -142,104 +138,30 @@ ...@@ -142,104 +138,30 @@
<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>
let jessibucaPlayer = {};
//const host = location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
const Axiosx = axios.create({
headers: { 'Authorization': token }
});
Axiosx.interceptors.response.use(
response => {
return response
}, error => {
console.error(error)
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
console.error('当前网络不佳')
return
}
}
if (!code) {
console.error('当前网络不佳')
return
}
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400) {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
// 请求 token 用
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var map; // 地图 var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() { data() {
return { return {
// 公共信息
selectedMine: {},
// 菜单折叠显隐 // 菜单折叠显隐
showMenu4bianpo: true, showMenu4bianpo: true,
sensorLIst: [], sensorLIst: [],
currentSensorId: '', currentSensorId: '',
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
// 菜单折叠显隐 - 结束
createTime: ['2024-01-01', '2024-09-30'],
bigScreenDetailMenu: '',
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 表格数据 // 表格数据
tableList: [] tableList: []
} }
}, },
mounted() { mounted() {
if (!token) {
window.open(host + '/#/login', '_self')
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this.selectedMine = selectedMine
// }
}
// this.getCharts(); // this.getCharts();
// this.getChartsData() // this.getChartsData()
this.getSensorList(() => { this.getSensorList(() => {});
});
this.getTableList();
// this.getChartsData(); // this.getChartsData();
...@@ -251,7 +173,7 @@ ...@@ -251,7 +173,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -263,9 +185,9 @@ ...@@ -263,9 +185,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.currentSensorId = this.sensorLIst[0].equipNo equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
} })
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
...@@ -283,16 +205,6 @@ ...@@ -283,16 +205,6 @@
console.log('sdfsdf', res) console.log('sdfsdf', res)
}); });
},
menuChange(type) {
['showMenu4bianpo', 'showMenu4weikuangku', 'showMenu4chenjiang', 'showMenu4diya'].forEach((item) => {
if (item === type) {
this[type] = !this[type]
} else {
this[item] = false
}
})
}, },
getChartsData() { getChartsData() {
const yAxisOption = { const yAxisOption = {
...@@ -312,7 +224,13 @@ ...@@ -312,7 +224,13 @@
lineStyle: { lineStyle: {
color: 'red', // 警戒线颜色 color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式 type: 'solid' // 警戒线样式
} },
label:{
color:'#ef0b0b',
fontSize:10,
formatter:(e)=>{return '警戒值: ' + e.value} //这里可以显示警戒线的值 也可使用字符串拼接，实现自己的值
},
symbol: 'none' // 移除箭头
} }
} }
var chartsOption = { var chartsOption = {
...@@ -336,12 +254,49 @@ ...@@ -336,12 +254,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { yAxis: [{
name: 'Precipitation', type:'value',
name: '单位(%RH)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { right: 45, top: 10, left: 40, bottom: 25 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type:'value',
name: '单位(%RH)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
...@@ -367,7 +322,7 @@ ...@@ -367,7 +322,7 @@
}); });
console.log('this.createTime', this.createTime.join(','))
// 视频列表 // 视频列表
Axiosx.get(host + '/data/sz/imghistory/shi', { Axiosx.get(host + '/data/sz/imghistory/shi', {
params: { params: {
...@@ -397,25 +352,6 @@ ...@@ -397,25 +352,6 @@
loading && loading.close(); loading && loading.close();
this.isReady = true this.isReady = true
}, },
changeMenu(menuName) {
localStorage.setItem('bigScreenDetailMenu', menuName)
this.bigScreenDetailMenu = menuName
},
getAccessToken(appKey, appSecret) {
var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
}, },
}) })
</script> </script>
......
public/datav/detail/mine-global.html 0 → 100644
View file @ 1e1a72e5
<!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.url}">
{{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/people-location.html 0 → 100644
View file @ 1e1a72e5
<!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[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.url}">
{{item.name}}
</li>
</ul>
</div>
</div>
<!-- 视频监控列表 -->
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section>
<div class="list-wrapper" v-show="showMenu4bianpo">
<div class="list-item" @click="location.href='people-monitor.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员数据统计</span></div>
<div class="list-item active" @click="location.href='people-location.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div>
</div>
</section>
</div>
</div>
<!-- 右侧容器 -->
<div style="width: calc(100vw - 490px); height: calc(100vh - 110px);">
<img :src="filePath" alt="" srcset="" 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: '8' // 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/people-monitor.html
View file @ 1e1a72e5
...@@ -11,150 +11,15 @@ ...@@ -11,150 +11,15 @@
<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" />
<!-- 先引入 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>
.amap-logo {
z-index: -10;
}
.amap-copyright {
z-index: -10;
}
.el-autocomplete-suggestion {
width: 330px !important;
}
.buttons-box {
width: 100%;
height: 28px;
background-color: rgba(43, 51, 63, 0.7);
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
left: 0;
bottom: 0;
user-select: none;
z-index: 10;
}
.jessibuca-btn {
width: 20px;
color: rgb(255, 255, 255);
line-height: 27px;
margin: 0px 10px;
padding: 0px 2px;
cursor: pointer;
text-align: center;
font-size: 0.8rem !important;
}
.buttons-box-right {
position: absolute;
right: 0;
}
.mineInfo {
padding-left: 10px;
}
.mineInfo p {
margin-top: 6px;
margin-bottom: 6px;
}
.menuInfo {
overflow: hidden;
margin-top: 28px;
margin-left: 10px;
}
.menuInfo li {
float: left;
margin-right: 16px;
margin-bottom: 16px;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
background-image: url('./static/detail/menuBtnBg.png');
background-size: cover;
}
.menuInfo li:hover {
background-color: #084291;
}
.menuInfo li.active {
background-color: #084291;
}
/*elementui 样式重写*/
.el-range-editor .el-range-input {
background: transparent;
color: #dbdbdb;
}
.el-range-editor.el-input__inner {
border: 1px solid #7c7e7f !important;
}
.el-input--small .el-input__inner {
color: #bababa !important;
}
.el-date-editor .el-range__icon {
margin-left: 5px;
}
section {
width: 440px;
}
section .header {
height: 40px;
background-color: #b8b1b266;
line-height: 40px;
border-bottom: 1px solid #9797ac;
cursor: pointer;
}
section .header .el-icon-caret-right:before,
section .header .el-icon-caret-down:before {
content: "\e791";
color: #a5a4a4;
font-size: 22px;
}
section .list-wrapper {
max-height: 300px;
overflow-y: auto;
}
section .list-item {
height: 40px;
margin-left: 20px;
line-height: 40px;
border-bottom: 1px solid #fff;
cursor: pointer;
}
section .list-item .el-icon-caret-right:before {
content: "\e791";
color: #a5a4a4;
font-size: 18px;
}
.titleColor {
color: #0ac4d1;
}
</style> </style>
</head> </head>
...@@ -163,13 +28,6 @@ ...@@ -163,13 +28,6 @@
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;" <div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div> v-show="!isReady"></div>
<!-- title -->
<!--<div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed"
style="height: 80px;background-image: url('../static/title-bg.png');background-size: 100% 100%;">
<div style="margin-top: -10px;">{{selectedMine.name || ''}}</div>
</div>
</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"
...@@ -185,7 +43,7 @@ ...@@ -185,7 +43,7 @@
</div> </div>
</div> </div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="history.back()"> <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=""> <img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
...@@ -199,28 +57,17 @@ ...@@ -199,28 +57,17 @@
<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="h50 flex-text pointer"
style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);">
<div class="flex-1" v-if="isReady">
<van-notice-bar background="none" left-icon="volume-o" color="#ffffff" :speed="80"
:text="notice.title" @click="noticeMask = true" />
</div>
</div> -->
<div class="mineInfo"> <div class="mineInfo">
<p>矿山名称： 淄博红圈石料厂</p> <p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地质：谁看得见风离开世界的副卡时刻记得发</p> <p>矿山地址：{{selectedMine.address}}</p>
<p>联系人：开始对</p> <p>联系人：{{selectedMine.liablePerson}}</p>
<p>联系方式：xxx</p> <p>联系方式：{{selectedMine.liablePersonPhone}}</p>
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.url}">
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li> {{item.name}}
<li @click="changeMenu('temprate')" :class="{active: bigScreenDetailMenu==='temprate'}">温度监测
</li>
<li @click="changeMenu('wind')" :class="{active: bigScreenDetailMenu==='wind'}">风速监测</li>
<li @click="changeMenu('water')" :class="{active: bigScreenDetailMenu==='water'}">降水监测</li>
<li @click="changeMenu('people')" :class="{active: bigScreenDetailMenu==='people'}">人员定位
</li> </li>
</ul> </ul>
</div> </div>
...@@ -231,8 +78,8 @@ ...@@ -231,8 +78,8 @@
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);"> <div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section> <section>
<div class="list-wrapper" v-show="showMenu4bianpo"> <div class="list-wrapper" v-show="showMenu4bianpo">
<div class="list-item"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员数据统计</span></div> <div class="list-item active" @click="location.href='people-monitor.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员数据统计</span></div>
<div class="list-item"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div> <div class="list-item" @click="location.href='people-location.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div>
</div> </div>
</section> </section>
</div> </div>
...@@ -240,18 +87,24 @@ ...@@ -240,18 +87,24 @@
<!-- 右侧容器 --> <!-- 右侧容器 -->
<div> <div>
<div class="flex-1 ml15 flex-text ovh" style="height: 300px; display:flex; align-items: start;"> <div class="flex-1 ml15 flex-text ovh">
<!-- 视频监控 --> <!-- 视频监控 -->
<div class="flex-1"> <div class="flex-1">
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div> <div>
<div class="relative"> <!-- <div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt=""> <img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover"> <div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">井下24小时人数变化趋势</div> <div class="ml40 f20 color-theme" style="margin-top: -4px;">井下24小时人数变化趋势</div>
</div> </div>
</div> -->
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >井下24小时人数变化趋势</div>
</div>
</div> </div>
<div class="flex-text" style="height: 0px;"> <!-- <div class="flex-text" style="height: 0px;">
<div class="flex-text"> <div class="flex-text">
<div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;"> <div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;">
</div> </div>
...@@ -267,21 +120,33 @@ ...@@ -267,21 +120,33 @@
</div> </div>
<div class="color-theme ml10 f14">出井</div> <div class="color-theme ml10 f14">出井</div>
</div> </div>
</div> -->
<div class="relative" style="height: 350px;">
<img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
src="../static/content-box-bg.png" alt="">
<div class="poa-cover" id="line"></div>
</div> </div>
<div class="mt5" id="line" style="width: 100%;height:213px;"></div> <!-- <div class="mt5" id="line" style="width: 100%;height:350px;"></div> -->
</div> </div>
</div> </div>
<!-- 区域类型人数分布图 --> <!-- 区域类型人数分布图 -->
<div class="flex-1"> <div class="flex-1">
<div class="relative"> <!-- <div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt=""> <img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover"> <div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">区域类型人数分布图</div> <div class="ml40 f20 color-theme" style="margin-top: -4px;">区域类型人数分布图</div>
</div> </div>
</div> -->
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >区域类型人数分布图</div>
</div>
</div> </div>
<div class="relative" style="height: 210px;"> <div class="relative" style="height: 350px;">
<img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;" <img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
src="../static/content-box-bg.png" alt=""> src="../static/content-box-bg.png" alt="">
<div class="poa-cover" id="bar"></div> <div class="poa-cover" id="bar"></div>
...@@ -290,26 +155,31 @@ ...@@ -290,26 +155,31 @@
<!-- 报警统计 --> <!-- 报警统计 -->
<div class="flex-1 ml15"> <div class="flex-1 ml15">
<div class="relative"> <!-- <div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt=""> <img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover"> <div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">报警统计</div> <div class="ml40 f20 color-theme" style="margin-top: -4px;">报警统计</div>
</div> </div>
</div> -->
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >报警统计</div>
</div>
</div> </div>
<div class="relative" style="height: 210px;"> <div class="relative" style="height: 350px;">
<img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;" <img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
src="../static/content-box-bg.png" alt=""> src="../static/content-box-bg.png" alt="">
<div class="poa-cover" id="pie"></div> <div class="poa-cover" id="pie"></div>
<div class="absolute" style="right: 20px;bottom: 40px;"> <div class="absolute" style="left: 20px;top: 10px;">
<div class="flex-text"> <div class="flex mt5">
<div class="round" style="width: 10px;height: 10px;background-color: #3ceaed;"> <div class="f14 ml10">报警总数 500</div>
</div>
<div class="f14 ml10">已处置</div>
</div> </div>
<div class="flex-text mt5"> <div class="flex mt5">
<div class="round" style="width: 10px;height: 10px;background-color: #f9b65e;"> <div class="f14 ml10">已处置 300</div>
</div> </div>
<div class="f14 ml10">未处置</div> <div class="flex mt5">
<div class="f14 ml10">未处置 200</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -319,51 +189,69 @@ ...@@ -319,51 +189,69 @@
</div> </div>
<div class="flex-1 ml15 flex-text ovh" style="height: 300px; display:flex; align-items: start;"> <div class="flex-1 ml15 flex-text ovh" style="height: 400px;">
<!-- 视频监控 --> <!-- 视频监控 -->
<div class="flex-1 ml15 ovh"> <div class="flex-1 ml15 ovh">
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >区域人数统计</div>
</div>
</div>
<div class="h44 f18 flex-text" <div class="h44 f18 flex-text"
style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;"> style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
<div class="text-center" style="width: 200px;">区域名称</div> <div class="text-center" style="width: 140px;">区域名称</div>
<div class="text-center" style="width: 114px;">定员(人)</div> <div class="text-center" style="width: 140px;">定员(人)</div>
<div class="text-center" style="width: 114px;">当前(人)</div> <div class="text-center" style="width: 140px;">当前(人)</div>
<div class="text-center" style="width: 140px;">状态</div> <div class="text-center" style="width: 140px;">状态</div>
</div> </div>
<div class="" style="height: 247px;overflow-y: scroll;"> <div class="" style="height: 247px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh" :class="'bg-list-' + (index % 2)" <div class="h44 color-theme flex-text f17 ovh" :class="'bg-list-' + (index % 2)"
:style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in aiList" :style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in areaPeople"
:key="index"> :key="index">
<div class="ovh flex-1"> <!-- <div class="ovh flex-1">
<div class="ellipsis ml25">{{ item.videoName }}</div> <div class="ellipsis ml25">{{ item.name }}</div>
</div> </div>
<div class="ovh text-center flex-1 ml30"> <div class="ovh text-center flex-1 ml30">
<div class="ellipsis">{{ item.warnTypeName }}</div> <div class="ellipsis">{{ item.people }}</div>
</div> </div> -->
<div class="text-center" style="width: 300px;">{{ item.warnDatetime }}</div> <div class="text-center" style="width: 140px;">{{ item.name }}</div>
<div class="text-center" style="width: 140px;">{{ item.people }}</div>
<div class="text-center" style="width: 140px;">{{ item.current }}</div>
<div class="text-center" style="width: 140px;" :class="item.status == 0?'':'color-red'">
{{ item.statusTxt }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 右侧表格 --> <!-- 右侧表格 -->
<div class="flex-1 ml15 ovh"> <div class="flex-1 ml15 ovh">
<div class="relative">
<img class="wp100" style="height: 0px;" src="../static/sub-title-1-s.png" alt="">
<div class="">
<div class="mb20 f20 color-theme" >井下人员实时状态</div>
</div>
</div>
<div class="h44 f18 flex-text" <div class="h44 f18 flex-text"
style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;"> style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
<div class="text-center" style="width: 140px;">姓名</div> <div class="text-center" style="width: 200px;">姓名</div>
<div class="text-center" style="width: 200px;">基站位置</div> <div class="text-center" style="width: 220px;">基站位置</div>
<div class="text-center" style="width: 200px;">下井时间</div> <div class="text-center" style="width: 200px;">下井时间</div>
<div class="text-center" style="width: 140px;">部门</div> <div class="text-center" style="width: 180px;">部门</div>
</div> </div>
<div class="" style="height: 247px;overflow-y: scroll;"> <div class="" style="height: 247px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh" :class="'bg-list-' + (index % 2)" <div class="h44 color-theme flex-text f17 ovh" :class="'bg-list-' + (index % 2)"
:style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in aiList" :style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in pitPeople"
:key="index"> :key="index">
<div class="ovh flex-1"> <!-- <div class="ovh flex-1">
<div class="ellipsis ml25">{{ item.videoName }}</div> <div class="ellipsis ml25">{{ item.userName }}</div>
</div> </div>
<div class="ovh text-center flex-1 ml30"> <div class="ovh text-center flex-1 ml30">
<div class="ellipsis">{{ item.warnTypeName }}</div> <div class="ellipsis">{{ item.position }}</div>
</div> </div> -->
<div class="text-center" style="width: 300px;">{{ item.warnDatetime }}</div> <div class="text-center" style="width: 200px;">{{ item.userName }}</div>
<div class="flex-text" style="width: 140px;"></div> <div class="flex-text" style="width: 220px;">{{ item.position }}</div>
<div class="flex-text" style="width: 200px;">{{ item.time }}</div>
<div class="flex-text" style="width: 180px;">{{ item.department }}</div>
</div> </div>
</div> </div>
...@@ -380,197 +268,55 @@ ...@@ -380,197 +268,55 @@
<script src="../js/echarts-gl.js"></script> <script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="../js/element-ui.js"></script> <script src="../js/element-ui.js"></script>
<!-- 引入高德js -->
<script src="../js/maps.js"></script>
<script src="../js/loca.js"></script>
<script src="../js/es5.min.js"></script>
<script src="../js/maps-MouseTool.js"></script>
<!-- axios --> <!-- axios -->
<script src="../js/axios.min.js"></script> <script src="../js/axios.min.js"></script>
<!-- cookie --> <!-- cookie -->
<script src="../js/js.cookie.js"></script> <script src="../js/js.cookie.js"></script>
<!-- <script type="text/javascript" src="../static/js/jessibuca/jessibuca.js"></script>
<script type="text/javascript" src="../static/js/EasyWasmPlayer.js"></script>
<script type="text/javascript" src="../static/js/liveplayer-lib.min.js"></script>
<script type="text/javascript" src="../static/js/ZLMRTCClient.js"></script> -->
<script type="text/javascript" src="../static/ezuikit-js/ezuikit.js"></script> <!-- 详情内页公用js -->
<script type="text/javascript" src="../static/js/config.js"></script> <script src="./static/js/public-detail.js"></script>
<script> <script>
let jessibucaPlayer = {};
//const host = location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
const Axiosx = axios.create({
headers: { 'Authorization': token }
});
Axiosx.interceptors.response.use(
response => {
return response
}, error => {
console.error(error)
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
console.error('当前网络不佳')
return
}
}
if (!code) {
console.error('当前网络不佳')
return
}
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400 && message === '不允许访问') {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
// 请求 token 用
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var map; // 地图 var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() { data() {
return { return {
showMenu4bianpo: true, showMenu4bianpo: true,
showMenu4weikuangku: true,
showMenu4chenjiang: true, // 视频ai报警 列表
showMenu4diya: true, aiList: [],
// 区域人数统计
createTime: '', areaPeople: [
bigScreenDetailMenu: '', { id: 1, name: '矿石开采加工区', people: '60', current: '30', statusTxt: '正常', status: 0 },
// video { id: 2, name: '2号开采区', people: '50', current: '52', statusTxt: '报警', status: 1 },
aiWarnCount: 0, { id: 3, name: '矿石开采加工区', people: '60', current: '30', statusTxt: '正常', status: 0 },
videoUrl: null, { id: 4, name: '2号开采区', people: '50', current: '52', statusTxt: '报警', status: 1 },
error: null, { id: 5, name: '矿石开采加工区', people: '60', current: '30', statusTxt: '正常', status: 0 },
hasAudio: false, { id: 6, name: '2号开采区', people: '50', current: '52', statusTxt: '报警', status: 1 },
height: null, ],
playing: false,
isNotMute: false,
quieting: false,
fullscreen: false,
loaded: false, // mute
speed: 0,
performance: "", // 工作情况
kBps: 0,
btnDom: null,
videoInfo: null,
volume: 1,
rotate: 0,
vod: true, // 点播
forceNoOffscreen: false,
// video end
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 公告信息
notice: {
title: '【应急公告】通知各矿山，10点之前停止应急作业，通知各矿山，10点之前停止应急作业，通知各矿山，10点之前停止应急作业！',
type: '应急公告',
desc: '由于气象原因，通知各矿山，10点之前停止应急作业。开放时间另行通知！由于气象原因，通知各矿山，10点之前停止应急作业。开放时间另行通知！由于气象原因，通知各矿山，10点之前停止应急作业。开放时间另行通知！由于气象原因，通知各矿山，10点之前停止应急作业。开放时间另行通知！',
mine: '所有矿山',
annexName: '无'
},
noticeMask: false,
// 视频监控列表 // 井下人员实时状态
// 视频监控 pitPeople: [
videos: [ { id: 1, userName: '某某某', position: '青岛豪杰矿业矿区开采区', time: '2023-02-14 09:57', department: '开采部' },
{ id: 1, video: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4', name: '青岛豪杰矿业有限公司平度市新' }, { id: 2, userName: '某某', position: '青岛豪杰矿业矿区生产区', time: '2023-02-14 09:57', department: '生产部' },
{ id: 3, userName: '某某某', position: '青岛豪杰矿业矿区开采区', time: '2023-02-14 09:57', department: '开采部' },
{ id: 4, userName: '某某', position: '青岛豪杰矿业矿区生产区', time: '2023-02-14 09:57', department: '生产部' },
{ id: 5, userName: '某某某', position: '青岛豪杰矿业矿区开采区', time: '2023-02-14 09:57', department: '开采部' },
{ id: 6, userName: '某某', position: '青岛豪杰矿业矿区生产区', time: '2023-02-14 09:57', department: '生产部' },
], ],
TabCur: 0,
// 视频ai报警 列表
aiList: [],
imageMaskUrl: ''
} }
}, },
watch: { watch: {
videoUrl(newData, oldData) {
this.play(newData)
},
immediate: true
}, },
mounted() { mounted() {
if (!token) {
window.open(host + '/#/login', '_self')
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this.selectedMine = selectedMine
// }
}
if (noMine) {
alert('您当前还未选择矿山，请先选择矿山再查看此大屏')
window.history.go(-1)
return
}
if (this.selectedMine.mineType != 2) {
alert('您当前选择的不是露天矿山，请先选择露天矿山，再查看此大屏')
window.history.go(-1)
return
}
this.getData(); this.getData();
// 视频列表
Axiosx.get(host + '/api/video-mine/mineId', {
params: {
//mineType: this.selectedMine.mineType,
mineId: this.selectedMine.id,
}
}).then(res => {
res = res.data.body;
this.info = {
appKey: res.appKey,
appSecret: res.appSecret,
};
this.videos = res.videoChannelList || [];
this.createVideo(res.videoChannelList[0]);
});
}, },
methods: { methods: {
menuChange(type) {
['showMenu4bianpo', 'showMenu4weikuangku', 'showMenu4chenjiang', 'showMenu4diya'].forEach((item) => {
if (item === type) {
this[type] = !this[type]
} else {
this[item] = false
}
})
},
async getData(e) { async getData(e) {
var loading var loading
if (!e) { if (!e) {
...@@ -597,11 +343,49 @@ ...@@ -597,11 +343,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { yAxis: [{
type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { right: 15, top: 10, left: 40, bottom: 25 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 40, top: 10, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
...@@ -660,11 +444,53 @@ ...@@ -660,11 +444,53 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { // yAxis: {
// splitLine: { show: false },
// axisLabel: { textStyle: { color: '#a3e4f5' } }
//},
yAxis: [{
type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { bottom: 35, top: 15, left: 35, right: 15 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { bottom: 35, top: 10, left: 35, right: 40 },
series: [ series: [
{ {
name: "人数", name: "人数",
...@@ -747,327 +573,6 @@ ...@@ -747,327 +573,6 @@
}, 800); }, 800);
} }
}, },
changeMenu(menuName) {
localStorage.setItem('bigScreenDetailMenu', menuName)
this.bigScreenDetailMenu = menuName
},
createVideo: function (item) {
this.getAccessToken(this.info.appKey, this.info.appSecret).then(accessToken => {
var url = this.getUrl(item);
var video = document.getElementById("video-container");
video.innerHTML = '';
this.player = new EZUIKit.EZUIKitPlayer({
autoplay: true,
id: "video-container",
accessToken: accessToken,
url: url,
template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
// 视频上方头部控件
//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
//plugin: ['talk'], // 加载插件，talk-对讲
// 视频下方底部控件
// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
// openSoundCallBack: data => console.log("开启声音回调", data),
// closeSoundCallBack: data => console.log("关闭声音回调", data),
// startSaveCallBack: data => console.log("开始录像回调", data),
// stopSaveCallBack: data => console.log("录像回调", data),
// capturePictureCallBack: data => console.log("截图成功回调", data),
// fullScreenCallBack: data => console.log("全屏回调", data),
// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
});
})
},
getAccessToken(appKey, appSecret) {
var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
getUrl(item) {
var captcha = item.captcha ? item.captcha + '@' : '';
var id = item.id || this.info.id || '';
return 'ezopen://' + captcha + 'open.ys7.com/' + id + '/' + item.channel;
},
chickVideo(video, index) {
this.createVideo(video);
this.TabCur = index;
this.showMask = false;
},
// video -----------------------------------
updatePlayerDomSize() {
let dom = this.$refs.container;
let width = dom.parentNode.clientWidth
let height = (9 / 16) * width
const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
if (height > clientHeight) {
height = clientHeight
width = (16 / 9) * height
}
dom.style.width = width + 'px';
dom.style.height = height + "px";
},
create() {
let options = {};
console.log("hasAudio " + this.hasAudio)
jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
{
container: this.$refs.container,
autoWasm: true,
background: "",
controlAutoHide: false,
debug: false,
decoder: "static/js/jessibuca/decoder.js",
forceNoOffscreen: true,
hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
hasVideo: true,
heartTimeout: 5,
heartTimeoutReplay: true,
heartTimeoutReplayTimes: 3,
hiddenAutoPause: false,
hotKey: false,
isFlv: false,
isFullResize: false,
isNotMute: this.isNotMute,
isResize: false,
keepScreenOn: false,
loadingText: "请稍等, 视频加载中......",
loadingTimeout: 10,
loadingTimeoutReplay: true,
loadingTimeoutReplayTimes: 3,
openWebglAlignment: false,
operateBtns: {
fullscreen: false,
screenshot: false,
play: false,
audio: false,
record: false
},
recordType: "webm",
rotate: 0,
showBandwidth: false,
supportDblclickFullscreen: false,
timeout: 10,
useMSE: location.hostname !== "localhost" && location.protocol !== "https:",
useOffscreen: false,
useWCS: location.hostname === "localhost" || location.protocol === "https",
useWebFullScreen: false,
videoBuffer: 0,
wasmDecodeAudioSyncVideo: true,
wasmDecodeErrorReplay: true,
wcsUseVideoRender: true
},
options
));
let jessibuca = jessibucaPlayer[this._uid];
let _this = this;
jessibuca.on("load", function () {
console.log("on load init");
});
jessibuca.on("log", function (msg) {
console.log("on log", msg);
});
jessibuca.on("record", function (msg) {
console.log("on record:", msg);
});
jessibuca.on("pause", function () {
_this.playing = false;
});
jessibuca.on("play", function () {
_this.playing = true;
});
jessibuca.on("fullscreen", function (msg) {
console.log("on fullscreen", msg);
_this.fullscreen = msg
});
jessibuca.on("mute", function (msg) {
console.log("on mute", msg);
_this.isNotMute = !msg;
});
jessibuca.on("audioInfo", function (msg) {
console.log("audioInfo", msg);
});
jessibuca.on("bps", function (bps) {
// console.log('bps', bps);
});
let _ts = 0;
jessibuca.on("timeUpdate", function (ts) {
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
_ts = ts;
});
jessibuca.on("videoInfo", function (info) {
console.log("videoInfo", info);
});
jessibuca.on("error", function (error) {
console.log("error", error);
});
jessibuca.on("timeout", function () {
console.log("timeout");
});
jessibuca.on('start', function () {
console.log('start');
})
jessibuca.on("performance", function (performance) {
let show = "卡顿";
if (performance === 2) {
show = "非常流畅";
} else if (performance === 1) {
show = "流畅";
}
_this.performance = show;
});
jessibuca.on('buffer', function (buffer) {
// console.log('buffer', buffer);
})
jessibuca.on('stats', function (stats) {
// console.log('stats', stats);
})
jessibuca.on('kBps', function (kBps) {
_this.kBps = Math.round(kBps);
});
// 显示时间戳 PTS
jessibuca.on('videoFrame', function () {
})
//
jessibuca.on('metadata', function () {
});
},
playBtnClick: function (event) {
this.play(this.videoUrl)
},
play: function (url) {
console.log(url)
if (jessibucaPlayer[this._uid]) {
this.destroy();
}
this.create();
jessibucaPlayer[this._uid].on("play", () => {
this.playing = true;
this.loaded = true;
this.quieting = jessibuca.quieting;
});
if (jessibucaPlayer[this._uid].hasLoaded()) {
jessibucaPlayer[this._uid].play(url);
} else {
jessibucaPlayer[this._uid].on("load", () => {
console.log("load 播放")
jessibucaPlayer[this._uid].play(url);
});
}
},
pause: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].pause();
}
this.playing = false;
this.err = "";
this.performance = "";
},
screenshot: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].screenshot();
}
},
mute: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].mute();
}
},
cancelMute: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].cancelMute();
}
},
destroy: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy();
}
if (document.getElementById("buttonsBox") == null) {
this.$refs.container.appendChild(this.btnDom)
}
jessibucaPlayer[this._uid] = null;
this.playing = false;
this.err = "";
this.performance = "";
},
eventcallbacK: function (type, message) {
// console.log("player 事件回调")
// console.log(type)
// console.log(message)
},
isFullscreen: function () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
},
// video end
// 点击选中一路视频
chickVideo222(video, index) {
console.log('video====', video, index)
if (video.videoUrl == null) {
Axiosx.get('/wvp/api/play/start/' + video.deviceId + '/' + video.videoId).then(res => {
console.log('res====', res)
if (res.status && res.status >= 200 && res.status - 200 < 100) {
if (res.data.code == 0) {
console.log('videos===', this.videos)
this.videoUrl = res.data.data.ws_flv
}
}
})
}
this.TabCur = index
this.showMask = false
},
// 跳转到后台管理
gotoManagement() {
window.open(location.protocol + '//' + window.location.host + '/#/home4Mine', '_self')
},
destroyed() {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy();
}
this.playing = false;
this.loaded = false;
this.performance = "";
},
}) })
</script> </script>
......
public/datav/detail/resource-storage.html 0 → 100644
View file @ 1e1a72e5
<!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.url}">
{{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: '2' // 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 @ 1e1a72e5
...@@ -44,27 +44,16 @@ ...@@ -44,27 +44,16 @@
</div> </div>
</div> </div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="history.back()"> <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=""> <img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<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()">
<img style="width: 24px;height: 24px;" src="../static/backstage.png" alt="">
<div class="f20 color-theme ml10">后台管理</div>
</div>
<div class="flex-text ml10 mr10 mt15"> <div 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));">
<!-- <div class="h50 flex-text pointer"
style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);">
<div class="flex-1" v-if="isReady">
<van-notice-bar background="none" left-icon="volume-o" color="#ffffff" :speed="80"
:text="notice.title" @click="noticeMask = true" />
</div>
</div> -->
<div class="mineInfo"> <div class="mineInfo">
<p>矿山名称： {{selectedMine.name}}</p> <p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地址：{{selectedMine.address}}</p> <p>矿山地址：{{selectedMine.address}}</p>
...@@ -73,13 +62,9 @@ ...@@ -73,13 +62,9 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)"
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li> :class="{active: bigScreenDetailMenu===item.url}">
<li @click="changeMenu('temprate')" :class="{active: bigScreenDetailMenu==='temprate'}">温度监测 {{item.name}}
</li>
<li @click="changeMenu('wind')" :class="{active: bigScreenDetailMenu==='wind'}">风速监测</li>
<li @click="changeMenu('water')" :class="{active: bigScreenDetailMenu==='water'}">降水监测</li>
<li @click="changeMenu('people')" :class="{active: bigScreenDetailMenu==='people'}">人员定位
</li> </li>
</ul> </ul>
</div> </div>
...@@ -106,7 +91,7 @@ ...@@ -106,7 +91,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>
...@@ -117,7 +102,7 @@ ...@@ -117,7 +102,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>
...@@ -128,7 +113,7 @@ ...@@ -128,7 +113,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>
...@@ -143,8 +128,9 @@ ...@@ -143,8 +128,9 @@
<!-- 井下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="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="mt5" id="line" style="width: 100%;height:400px;"></div> <div class="mt5" id="line" style="width: 100%;height:400px;"></div>
...@@ -193,60 +179,15 @@ ...@@ -193,60 +179,15 @@
<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>
let jessibucaPlayer = {};
//const host = location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
const Axiosx = axios.create({
headers: { 'Authorization': token }
});
Axiosx.interceptors.response.use(
response => {
return response
}, error => {
console.error(error)
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
console.error('当前网络不佳')
return
}
}
if (!code) {
console.error('当前网络不佳')
return
}
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400) {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
// 请求 token 用
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var map; // 地图 var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() { data() {
return { return {
// 公共信息
selectedMine: {},
// 菜单折叠显隐 // 菜单折叠显隐
showMenu4bianpo: true, showMenu4bianpo: true,
sensorLIst: [], sensorLIst: [],
...@@ -255,10 +196,6 @@ ...@@ -255,10 +196,6 @@
showMenu4chenjiang: true, showMenu4chenjiang: true,
showMenu4diya: true, showMenu4diya: true,
// 菜单折叠显隐 - 结束 // 菜单折叠显隐 - 结束
createTime: ['2024-01-01', '2024-09-30'],
bigScreenDetailMenu: '',
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 表格数据 // 表格数据
tableList: [] tableList: []
...@@ -266,44 +203,8 @@ ...@@ -266,44 +203,8 @@
} }
}, },
mounted() { mounted() {
for (var i = 0; i < 10; i++) {
this.tableList.push({
videoName: 'sdfksdfxxxxx',
warnTypeName: '扣税的交流方',
warnDatetime: 'ksdlfsdf'
})
}
if (!token) {
window.open(host + '/#/login', '_self')
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this.selectedMine = selectedMine
// }
}
if (noMine) {
alert('您当前还未选择矿山，请先选择矿山再查看此大屏')
window.history.go(-1)
return
}
if (this.selectedMine.mineType != 2) {
alert('您当前选择的不是露天矿山，请先选择露天矿山，再查看此大屏')
window.history.go(-1)
return
}
// this.getCharts(); // this.getCharts();
// this.getChartsData() // this.getChartsData()
this.getSensorList(() => { this.getSensorList(() => {
}); });
...@@ -319,7 +220,7 @@ ...@@ -319,7 +220,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -331,9 +232,9 @@ ...@@ -331,9 +232,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.currentSensorId = this.sensorLIst[0].equipNo equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
} })
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
...@@ -371,8 +272,15 @@ ...@@ -371,8 +272,15 @@
itemStyle: { itemStyle: {
color: '#6dd1b9' color: '#6dd1b9'
}, },
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'top'
},
markLine: { markLine: {
silent: true, //silent: true,
data: [ data: [
{ name: '最高值', yAxis: 400 }, { name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 } { name: '最低值', yAxis: -50 }
...@@ -380,7 +288,8 @@ ...@@ -380,7 +288,8 @@
lineStyle: { lineStyle: {
color: 'red', // 警戒线颜色 color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式 type: 'solid' // 警戒线样式
} },
symbol: 'none' // 移除箭头
} }
} }
var chartsOption = { var chartsOption = {
...@@ -400,16 +309,55 @@ ...@@ -400,16 +309,55 @@
} }
}, },
xAxis: { xAxis: {
type: 'category',
data: [], data: [],
show: true, // 显示 X 轴
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: true },
}, },
yAxis: { yAxis: [{
name: 'Precipitation', type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { right: 45, top: 10, left: 40, bottom: 25 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
...@@ -450,6 +398,7 @@ ...@@ -450,6 +398,7 @@
var tempObj = JSON.parse(JSON.stringify(yAxisOption)); var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data tempObj.data = item.data
tempObj.name = item.name tempObj.name = item.name
tempObj.markLine.data = item.alarm tempObj.markLine.data = item.alarm
return tempObj return tempObj
}) })
...@@ -465,25 +414,6 @@ ...@@ -465,25 +414,6 @@
loading && loading.close(); loading && loading.close();
this.isReady = true this.isReady = true
}, },
changeMenu(menuName) {
localStorage.setItem('bigScreenDetailMenu', menuName)
this.bigScreenDetailMenu = menuName
},
getAccessToken(appKey, appSecret) {
var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
}, },
}) })
</script> </script>
......
public/datav/detail/shui-monitor.html 0 → 100644
View file @ 1e1a72e5
<!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.url}">
{{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: '6' // 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 @ 1e1a72e5
<!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="flex-text ml10 mr10 mt15" style="margin-top:60px;">
<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.watersystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.url}">
{{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">
<!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>
<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: []
}
},
mounted() {
},
watch: {
createTime() {
}
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/sz/sensorList/feng', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
},
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/shuizhi-monitor.html 0 → 100644
View file @ 1e1a72e5
<!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="flex-text ml10 mr10 mt15" style="margin-top:60px;">
<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.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.url}">
{{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">
<!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>
<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: []
}
},
mounted() {
},
watch: {
createTime() {
}
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/sz/sensorList/feng', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
},
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/static/css/public-detail.css
View file @ 1e1a72e5
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
color: #dbdbdb; color: #dbdbdb;
} }
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange{ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange{
background: transparent; background: transparent;
} }
...@@ -107,8 +107,9 @@ section .list-item span { ...@@ -107,8 +107,9 @@ section .list-item span {
section .list-item .el-icon-caret-right:before { section .list-item .el-icon-caret-right:before {
content: "\e791"; content: "\e791";
color: #a5a4a4; color: #0a4c59;
font-size: 18px; font-size: 24px;
vertical-align: middle;
} }
/*列表list*/ /*列表list*/
......
public/datav/detail/static/js/public-detail.js
View file @ 1e1a72e5
let jessibucaPlayer = {}; let jessibucaPlayer = {};
//const host = location.protocol + '//' + window.location.host; //var host = location.protocol + '//' + window.location.host;
window.detail_token = Cookies.get('ELADMIN-TOEKN'); var token = Cookies.get('ELADMIN-TOEKN');
console.log('axios',axios) var Axiosx = axios.create({
window.detail_axios = axios.create({ headers: { 'Authorization': token }
headers: { 'Authorization': window.detail_token } });
}); Axiosx.interceptors.response.use(
window.detail_axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; response => {
return response
console.log('window.detail_axios',window.detail_axios) }, error => {
window.detail_axios.interceptors.response.use( console.error(error)
response => { let code = 0
return response try {
}, error => { code = error.response.data.status
console.error(error) } catch (e) {
let code = 0 if (error.toString().indexOf('Error: timeout') !== -1) {
try { console.error('当前网络不佳')
code = error.response.data.status return
} catch (e) { }
if (error.toString().indexOf('Error: timeout') !== -1) { }
if (!code) {
console.error('当前网络不佳') console.error('当前网络不佳')
return return
} }
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400) {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
} }
if (!code) { );
console.error('当前网络不佳')
return var host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013';
}
if (code === 401) { var selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.38:8057' : location.protocol + '//' + window.location.host;
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400 && message === '不允许访问') {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013'; // 请求 token 用
var request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host; var gemhoUtil = {
// goToPage: function(url){
// // window.open(url)
// // location.href = '/datav/index.html'
// // window.open('/datav/index.html')
// },
detailPageMixin: {
data: function() {
// 获取今天的日期
const today = new Date();
// 获取前七天的日期
const sevenDaysAgo = new Date();
sevenDaysAgo.setDate(today.getDate() - 7);
if (!window.detail_token) { // 格式化日期为 YYYY-MM-DD HH:mm:ss
window.open(host + '/#/login', '_self') const formatDate = (date) => {
return const pad = (num) => String(num).padStart(2, '0');
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
};
// 生成数组
const dateArray = [formatDate(sevenDaysAgo), formatDate(today)];
return {
// 公共信息
selectedMine: {},
menuObj: menuObj,
bigScreenDetailMenu: '',
bigScreenDetailMenuModel: '',
createTime: dateArray,
isReady: false, // 页面是否准备好 请求完接口变为true
};
},
mounted() {
window.onresize = () => {
location.reload()
}
this.bigScreenDetailMenu = window.location.pathname
localStorage.setItem('bigScreenDetailMenu', this.bigScreenDetailMenu)
if (!token) {
window.open(host + '/#/login', '_self')
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
this.bigScreenDetailMenuModel = window.localStorage.getItem('bigScreenDetailMenuModel')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
this.selectedMine = selectedMine
}
},
methods: {
goPrePage() {
// history.back()
const type = localStorage.getItem('bigScreenDetailMenuModel')
if(type === 'emergency'){
window.open('/datav/index.html')
}else if(type === 'natural'){
window.open('/datav/natural.html')
}else if(type === 'watersystem'){
window.open('/datav/watersource.html')
}else if(type === 'ecosystem'){
window.open('/datav/index.html')
}
},
changeMenu(item) {
localStorage.setItem('bigScreenDetailMenu', item.url)
localStorage.setItem('bigScreenDetailMenuModel', item.model)
this.bigScreenDetailMenu = item.name
// 跳转页面
// window.open(item.url)
location.href = item.url
},
}
}
}
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: '人员数据统计',
url: '/datav/detail/people-monitor.html'
},{
name: '人员定位图',
url: '/datav/detail/people-monitor.html'
}]
}],
},
natural: {
menuList: [{
name: '视频监控',
model: 'natural',
url: '/datav/detail/video-monitor.html'
},{
name: '矿山全景',
model: 'natural',
url: '/datav/detail/mine-global.html'
},{
name: '资源储备',
model: 'natural',
url: '/datav/detail/resource-storage.html'
},{
name: '水监测',
model: 'natural',
url: '/datav/detail/shui-monitor.html'
},{
name: '土监测',
model: 'natural',
url: '/datav/detail/tu-monitor.html'
},{
name: '地质环境',
model: 'natural',
url: '/datav/detail/dizhi-huanjing.html'
},{
name: '绿色矿山',
model: 'natural',
url: '/datav/detail/green-mine.html',
},{
name: '开发利用',
model: 'natural',
url: '/datav/detail/dev-use.html',
},{
name: '变形监测',
model: 'natural',
url: '/datav/detail/shape-monitor.html',
}],
},
watersystem: {
menuList: [{
name: '视频监控',
model: 'watersystem',
url: '/datav/detail/video-monitor.html'
},{
name: '水土流失',
model: 'watersystem',
url: '/datav/detail/shuitu-monitor.html'
},{
name: '降水监测',
model: 'watersystem',
url: '/datav/detail/water-monitor.html'
},{
name: '温度监测',
model: 'watersystem',
url: '/datav/detail/temperature-monitor.html'
},{
name: '湿度监测',
model: 'watersystem',
url: '/datav/detail/humidity-monitor.html'
},{
name: '风速监测',
model: 'watersystem',
url: '/datav/detail/wind-monitor.html'
}],
},
ecosystem: {
menuList: [{
name: '视频监控',
model: 'ecosystem',
url: '/datav/detail/video-monitor.html'
},{
name: '水土流失',
model: 'ecosystem',
url: '/datav/detail/shuitu-monitor.html'
},{
name: '土壤监测',
model: 'ecosystem',
url: '/datav/detail/turang-monitor.html'
},{
name: '噪声监测',
model: 'ecosystem',
url: '/datav/detail/zaosheng-monitor.html'
},{
name: '大气监测',
model: 'ecosystem',
url: '/datav/detail/daqi-monitor.html'
},{
name: '烟道监测',
model: 'ecosystem',
url: '/datav/detail/yandao-monitor.html'
}],
},
} }
// if (this.selectedMine.mineType != 2) {
// alert('您当前选择的不是露天矿山，请先选择露天矿山，再查看此大屏')
// window.history.go(-1)
// return
// }
\ No newline at end of file
public/datav/detail/temperature-monitor.html
View file @ 1e1a72e5
...@@ -44,16 +44,11 @@ ...@@ -44,16 +44,11 @@
</div> </div>
</div> </div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="history.back()"> <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=""> <img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<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()">
<img style="width: 24px;height: 24px;" src="../static/backstage.png" alt="">
<div class="f20 color-theme ml10">后台管理</div>
</div>
<div class="flex-text ml10 mr10 mt15"> <div 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));">
...@@ -66,13 +61,8 @@ ...@@ -66,13 +61,8 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.url}">
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li> {{item.name}}
<li @click="changeMenu('temprate')" :class="{active: bigScreenDetailMenu==='temprate'}">温度监测
</li>
<li @click="changeMenu('wind')" :class="{active: bigScreenDetailMenu==='wind'}">风速监测</li>
<li @click="changeMenu('water')" :class="{active: bigScreenDetailMenu==='water'}">降水监测</li>
<li @click="changeMenu('people')" :class="{active: bigScreenDetailMenu==='people'}">人员定位
</li> </li>
</ul> </ul>
</div> </div>
...@@ -98,7 +88,7 @@ ...@@ -98,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="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -120,7 +110,7 @@ ...@@ -120,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>
...@@ -142,105 +132,28 @@ ...@@ -142,105 +132,28 @@
<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>
let jessibucaPlayer = {};
//const host = location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
const Axiosx = axios.create({
headers: { 'Authorization': token }
});
Axiosx.interceptors.response.use(
response => {
return response
}, error => {
console.error(error)
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
console.error('当前网络不佳')
return
}
}
if (!code) {
console.error('当前网络不佳')
return
}
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400) {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
// 请求 token 用
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var map; // 地图 var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() { data() {
return { return {
// 公共信息
selectedMine: {},
// 菜单折叠显隐 // 菜单折叠显隐
showMenu4bianpo: true, showMenu4bianpo: true,
sensorLIst: [], sensorLIst: [],
currentSensorId: '', currentSensorId: '',
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
// 菜单折叠显隐 - 结束
createTime: ['2024-01-01', '2024-09-30'],
bigScreenDetailMenu: '',
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 表格数据 // 表格数据
tableList: [] tableList: []
} }
}, },
mounted() { mounted() {
if (!token) {
window.open(host + '/#/login', '_self')
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this.selectedMine = selectedMine
// }
}
// this.getCharts(); // this.getCharts();
// this.getChartsData() // this.getChartsData()
this.getSensorList(() => { this.getSensorList(() => {});
});
this.getTableList();
// this.getChartsData(); // this.getChartsData();
}, },
...@@ -251,7 +164,7 @@ ...@@ -251,7 +164,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -263,9 +176,9 @@ ...@@ -263,9 +176,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.currentSensorId = this.sensorLIst[0].equipNo equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
} })
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
...@@ -283,16 +196,6 @@ ...@@ -283,16 +196,6 @@
console.log('sdfsdf', res) console.log('sdfsdf', res)
}); });
},
menuChange(type) {
['showMenu4bianpo', 'showMenu4weikuangku', 'showMenu4chenjiang', 'showMenu4diya'].forEach((item) => {
if (item === type) {
this[type] = !this[type]
} else {
this[item] = false
}
})
}, },
getChartsData() { getChartsData() {
const yAxisOption = { const yAxisOption = {
...@@ -312,7 +215,16 @@ ...@@ -312,7 +215,16 @@
lineStyle: { lineStyle: {
color: 'red', // 警戒线颜色 color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式 type: 'solid' // 警戒线样式
} },
label:{
color:'#ef0b0b',
fontSize:10,
position: 'middle',
//formatter: 'sdfsdf' //这里可以显示警戒线的值 也可使用字符串拼接，实现自己的值
formatter: (params) => {return ('警戒值: ' + params.name +'2222');} //这里可以显示警戒线的值 也可使用字符串拼接，实现自己的值
},
symbol: 'none' // 移除箭头
} }
} }
var chartsOption = { var chartsOption = {
...@@ -336,11 +248,48 @@ ...@@ -336,11 +248,48 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { yAxis: [{
name: 'Precipitation', type:'value',
name: '单位(mm)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 10, left: 40, bottom: 25 }, grid: { right: 45, top: 10, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
...@@ -397,25 +346,6 @@ ...@@ -397,25 +346,6 @@
loading && loading.close(); loading && loading.close();
this.isReady = true this.isReady = true
}, },
changeMenu(menuName) {
localStorage.setItem('bigScreenDetailMenu', menuName)
this.bigScreenDetailMenu = menuName
},
getAccessToken(appKey, appSecret) {
var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
}, },
}) })
</script> </script>
......
public/datav/detail/tu-monitor.html 0 → 100644
View file @ 1e1a72e5
<!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.url}">
{{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: '7' // 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 @ 1e1a72e5
<!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="flex-text ml10 mr10 mt15" style="margin-top:60px;">
<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.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.url}">
{{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">
<!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>
<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: []
}
},
mounted() {
},
watch: {
createTime() {
}
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/sz/sensorList/feng', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
},
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/video-monitor.html
View file @ 1e1a72e5
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
<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" />
<!-- 先引入 Vue --> <!-- 先引入 Vue -->
<script src="../js/vue.min.js"></script> <script src="../js/vue.min.js"></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 --> <!-- 引入 Vue 和 Vant 的 JS 文件 -->
...@@ -20,12 +22,15 @@ ...@@ -20,12 +22,15 @@
.amap-logo { .amap-logo {
z-index: -10; z-index: -10;
} }
.amap-copyright{
.amap-copyright {
z-index: -10; z-index: -10;
} }
.el-autocomplete-suggestion{
.el-autocomplete-suggestion {
width: 330px !important; width: 330px !important;
} }
.buttons-box { .buttons-box {
width: 100%; width: 100%;
height: 28px; height: 28px;
...@@ -55,38 +60,6 @@ ...@@ -55,38 +60,6 @@
position: absolute; position: absolute;
right: 0; right: 0;
} }
.mineInfo{
padding-left: 10px;
}
.mineInfo p{
margin-top: 6px;
margin-bottom: 6px;
}
.menuInfo{
overflow: hidden;
margin-top: 28px;
margin-left: 10px;
}
.menuInfo li{
float: left;
margin-right: 16px;
margin-bottom: 16px;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
background-image: url('./static/detail/menuBtnBg.png');
background-size: cover;
}
.menuInfo li:hover{
background-color: #084291;
}
.menuInfo li.active{
background-color: #084291;
}
</style> </style>
</head> </head>
...@@ -95,13 +68,6 @@ ...@@ -95,13 +68,6 @@
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;" <div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div> v-show="!isReady"></div>
<!-- title -->
<!--<div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed"
style="height: 80px;background-image: url('../static/title-bg.png');background-size: 100% 100%;">
<div style="margin-top: -10px;">{{selectedMine.name || ''}}</div>
</div>
</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"
...@@ -117,48 +83,46 @@ ...@@ -117,48 +83,46 @@
</div> </div>
</div> </div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="history.back()"> <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=""> <img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<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()">
<img style="width: 24px;height: 24px;" src="../static/backstage.png" alt="">
<div class="f20 color-theme ml10">后台管理</div>
</div>
<div class="flex-text ml10 mr10 mt15"> <div 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));">
<!-- <div class="h50 flex-text pointer"
style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);">
<div class="flex-1" v-if="isReady">
<van-notice-bar background="none" left-icon="volume-o" color="#ffffff" :speed="80"
:text="notice.title" @click="noticeMask = true" />
</div>
</div> -->
<div class="mineInfo"> <div class="mineInfo">
<p>矿山名称： 淄博红圈石料厂</p> <p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地质：谁看得见风离开世界的副卡时刻记得发</p> <p>矿山地址：{{selectedMine.address}}</p>
<p>联系人：开始对</p> <p>联系人：{{selectedMine.liablePerson}}</p>
<p>联系方式：xxx</p> <p>联系方式：{{selectedMine.liablePersonPhone}}</p>
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)"
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li> :class="{active: bigScreenDetailMenu===item.url}">
<li @click="changeMenu('temprate')" :class="{active: bigScreenDetailMenu==='temprate'}">温度监测</li> {{item.name}}
<li @click="changeMenu('wind')" :class="{active: bigScreenDetailMenu==='wind'}">风速监测</li> </li>
<li @click="changeMenu('water')" :class="{active: bigScreenDetailMenu==='water'}">降水监测</li>
<li @click="changeMenu('people')" :class="{active: bigScreenDetailMenu==='people'}">人员定位</li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- 视频监控列表 --> <!-- 视频监控列表 -->
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);"> <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.cid===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item,index)"><i
class="el-icon-caret-right"></i><span>{{item.name}}</span></div>
</div>
</section>
</div>
<!-- 视频监控列表 -->
<!-- <div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<div class="relative"> <div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1.png" alt=""> <img class="wp100" style="height: 52px;" src="../static/sub-title-1.png" alt="">
<div class="poa-cover"> <div class="poa-cover">
...@@ -171,168 +135,94 @@ ...@@ -171,168 +135,94 @@
style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);" style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);"
v-for="(item,index) in videos" :key="" index @click="chickVideo(item,index)"> v-for="(item,index) in videos" :key="" index @click="chickVideo(item,index)">
<div class="flex-1 flex-text ml10 mr10 ovh"> <div class="flex-1 flex-text ml10 mr10 ovh">
<!-- <div>{{ (index + 1) < 10 ? '0' + (index + 1) : index + 1 }}</div> -->
<img style="width: 14px;height: 16px;" src="../static/play-icon.png" alt="" <img style="width: 14px;height: 16px;" src="../static/play-icon.png" alt=""
v-if="index == TabCur"> v-if="index == TabCur">
<div class="flex-1 ml25 mr25 ellipsis">{{ item.name }}</div> <div class="flex-1 ml25 mr25 ellipsis">{{ item.name }}</div>
<div class="flex-text" style="width: 14px;"> <div class="flex-text" style="width: 14px;">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div>
<div class="flex-1 ml15 flex-text flex-column ovh" style="height: calc(100vh - 110px);"> <div class="flex-1 ml15 flex-text flex-column ovh" style="height: calc(100vh - 110px);">
<!-- 视频监控 --> <!-- 视频监控 -->
<div class="flex-1 wp100 relative" style="margin-bottom: 25px;"> <div class="flex-1 wp100 relative" style="margin-bottom: 25px;">
<!-- video --> <!-- video -->
<div ref="container" @dblclick="fullscreenSwich" <div ref="container" @dblclick="fullscreenSwich"
style="width:100%;height:100%;background-color: #000000;margin:0 auto;"> style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
<div class="EZUIKit-video" id="video-container" style="height:100%;"></div> <div class="EZUIKit-video" id="video-container" style="height:100%;"></div>
<!--
<div class="buttons-box" id="buttonsBox">
<div class="buttons-box-left">
<i v-if="!playing" class="iconfont icon-play jessibuca-btn"
@click="playBtnClick"></i>
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
<i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
<i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn"
@click="mute()"></i>
<i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn"
@click="cancelMute()"></i>
</div>
<div class="buttons-box-right">
<span class="jessibuca-btn">{{ kBps }} kb/s</span>
<i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot"
style="font-size: 1rem !important"></i>
<i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn"
@click="fullscreenSwich"></i>
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn"
@click="fullscreenSwich"></i>
</div>
</div>
-->
</div>
<!-- video end -->
</div> </div>
<!-- video end -->
</div>
<div class="flex-text wp100"> <div class="flex-text wp100">
<!-- 视频ai报警 --> <!-- 视频ai报警 -->
<div class="" style="width: 420px;"> <div class="" style="width: 420px;">
<div class="relative"> <div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt=""> <img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover"> <div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">视频AI报警</div> <div class="ml40 f20 color-theme" style="margin-top: -4px;">视频AI报警</div>
</div>
</div>
<div class="relative" style="height: 240px;">
<img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
src="../static/content-box-bg.png" alt="">
<div class="poa-cover" id="pie"></div>
<div class="absolute" style="right: 20px;bottom: 40px;">
<div class="flex-text">
<div class="round" style="width: 10px;height: 10px;background-color: #3ceaed;">
</div>
<div class="f14 ml10">已处置</div>
</div>
<div class="flex-text mt5">
<div class="round" style="width: 10px;height: 10px;background-color: #f9b65e;">
</div>
<div class="f14 ml10">未处置</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="relative" style="height: 240px;">
<!-- 视频ai报警 列表 --> <img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
<div class="flex-1 ml15 ovh"> src="../static/content-box-bg.png" alt="">
<div class="h44 f18 flex-text" <div class="poa-cover" id="pie"></div>
style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;"> <div class="absolute" style="right: 20px;bottom: 40px;">
<div class="flex-1"> <div class="flex-text">
<div class="ml25">视频名称</div> <div class="round" style="width: 10px;height: 10px;background-color: #3ceaed;">
</div>
<div class="text-center flex-1 ml30">报警类型</div>
<div class="text-center" style="width: 300px;">报警时间</div>
<div class="text-center" style="width: 140px;">图片</div>
<div style="width: 3px;" class="h44"></div>
</div>
<div class="" style="height: 247px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh" :class="'bg-list-' + (index % 2)"
:style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in aiList"
:key="index">
<div class="ovh flex-1">
<div class="ellipsis ml25">{{ item.videoName }}</div>
</div>
<div class="ovh text-center flex-1 ml30">
<div class="ellipsis">{{ item.warnTypeName }}</div>
</div> </div>
<div class="text-center" style="width: 300px;">{{ item.warnDatetime }}</div> <div class="f14 ml10">已处置</div>
<div class="flex-text" style="width: 140px;"> </div>
<div class="pointer flex-text" <div class="flex-text mt5">
style="border-bottom: 1px solid #abeeff;height: 28px;box-sizing: border-box;" <div class="round" style="width: 10px;height: 10px;background-color: #f9b65e;">
@click="imageMaskUrl = '/file'+item.warnImg">查看图片</div>
</div> </div>
<div class="f14 ml10">未处置</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<!-- 图片 mask --> <!-- 视频ai报警 列表 -->
<div class="fixed wp100 hv100 flex-text maxIndex" style="left: 0;top: 0;background-color: rgba(0,0,0,1);" <div class="flex-1 ml15 ovh">
v-if="imageMaskUrl"> <div class="h44 f18 flex-text"
<div class="" style="width: 1200px;max-height: 100vh;overflow-y: auto;"> style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
<img class="wp100" :src="imageMaskUrl" alt=""> <div class="flex-1">
</div> <div class="ml25">视频名称</div>
<img class="absolute pointer" style="width: 35px;height: 35px;top: 30px;right: 30px;" </div>
src="../static/close-icon.png" alt="" @click="imageMaskUrl = ''"> <div class="text-center flex-1 ml30">报警类型</div>
</div> <div class="text-center" style="width: 300px;">报警时间</div>
<div class="text-center" style="width: 140px;">图片</div>
<div style="width: 3px;" class="h44"></div>
<!-- 公告弹窗 -->
<div class="fixed maxIndex wp100 hv100 flex-text" style="left: 0;top: 0;" v-if="noticeMask && isReady">
<div class="bg-mask relative" style="border-radius: 10px;width: 1200px;height: 55vh;padding: 30px;">
<div class="flex align-center space-between">
<div></div>
<img class="pointer mr10" style="width: 35px;height: 35px;" src="../static/close-icon.png" alt=""
@click="noticeMask = false">
</div>
<div class="absolute"
style="line-height: 1.6;max-height: calc(100% - 125px);overflow-y: auto;margin-top: 30px;width: calc(100% - 80px);">
<div class="flex align-start f18">
<div class="text-right color-theme" style="width: 10%;">标题：</div>
<div class="flex-1 ml20" style="margin-right: 100px;">{{ notice.title }}</div>
</div>
<div class="flex align-start f18 mt20">
<div class="text-right color-theme" style="width: 10%;">类型：</div>
<div class="flex-1 ml20" style="margin-right: 100px;">{{ notice.type }}</div>
</div>
<div class="flex align-start f18 mt20">
<div class="text-right color-theme" style="width: 10%;">描述：</div>
<div class="flex-1 ml20" style="margin-right: 100px;">{{ notice.desc }}</div>
</div>
<div class="flex align-start f18 mt20">
<div class="text-right color-theme" style="width: 10%;">通知矿山：</div>
<div class="flex-1 ml20" style="margin-right: 100px;">{{ notice.mine }}</div>
</div> </div>
<div class="flex align-start f18 mt20"> <div class="" style="height: 247px;overflow-y: scroll;">
<div class="text-right color-theme" style="width: 10%;">附件：</div> <div class="h44 color-theme flex-text f17 ovh" :class="'bg-list-' + (index % 2)"
<div class="flex-1 ml20" style="margin-right: 100px;"> :style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in aiList"
<a class="color-white" :href="notice.annexLink" target="_blank">{{ notice.annexName :key="index">
}}</a> <div class="ovh flex-1">
<div class="ellipsis ml25">{{ item.videoName }}</div>
</div>
<div class="ovh text-center flex-1 ml30">
<div class="ellipsis">{{ item.warnTypeName }}</div>
</div>
<div class="text-center" style="width: 300px;">{{ item.warnDatetime }}</div>
<div class="flex-text" style="width: 140px;">
<div class="pointer flex-text"
style="border-bottom: 1px solid #abeeff;height: 28px;box-sizing: border-box;"
@click="imageMaskUrl = '/file'+item.warnImg">查看图片</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
<!-- 引入echarts --> <!-- 引入echarts -->
...@@ -340,76 +230,29 @@ ...@@ -340,76 +230,29 @@
<script src="../js/echarts-gl.js"></script> <script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="../js/element-ui.js"></script> <script src="../js/element-ui.js"></script>
<!-- 引入高德js -->
<script src="../js/maps.js"></script>
<script src="../js/loca.js"></script>
<script src="../js/es5.min.js"></script>
<script src="../js/maps-MouseTool.js"></script>
<!-- axios --> <!-- axios -->
<script src="../js/axios.min.js"></script> <script src="../js/axios.min.js"></script>
<!-- cookie --> <!-- cookie -->
<script src="../js/js.cookie.js"></script> <script src="../js/js.cookie.js"></script>
<!-- <script type="text/javascript" src="../static/js/jessibuca/jessibuca.js"></script>
<script type="text/javascript" src="../static/js/EasyWasmPlayer.js"></script>
<script type="text/javascript" src="../static/js/liveplayer-lib.min.js"></script>
<script type="text/javascript" src="../static/js/ZLMRTCClient.js"></script> -->
<script type="text/javascript" src="../static/ezuikit-js/ezuikit.js"></script> <script type="text/javascript" src="../static/ezuikit-js/ezuikit.js"></script>
<script type="text/javascript" src="../static/js/config.js"></script> <script type="text/javascript" src="../static/js/config.js"></script>
<script> <!-- 详情内页公用js -->
let jessibucaPlayer = {}; <script src="./static/js/public-detail.js"></script>
//const host = location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
const Axiosx = axios.create({
headers: { 'Authorization': token }
});
Axiosx.interceptors.response.use(
response => {
return response
}, error => {
console.error(error)
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
console.error('当前网络不佳')
return
}
}
if (!code) {
console.error('当前网络不佳')
return
}
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400 && message === '不允许访问') {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
<script>
// 请求 token 用
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var map; // 地图 var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() { data() {
return { return {
bigScreenDetailMenu: '', showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// video // video
aiWarnCount: 0, aiWarnCount: 0,
videoUrl: null, videoUrl: null,
...@@ -431,18 +274,6 @@ ...@@ -431,18 +274,6 @@
vod: true, // 点播 vod: true, // 点播
forceNoOffscreen: false, forceNoOffscreen: false,
// video end // video end
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 公告信息
notice: {
title: '【应急公告】通知各矿山，10点之前停止应急作业，通知各矿山，10点之前停止应急作业，通知各矿山，10点之前停止应急作业！',
type: '应急公告',
desc: '由于气象原因，通知各矿山，10点之前停止应急作业。开放时间另行通知！由于气象原因，通知各矿山，10点之前停止应急作业。开放时间另行通知！由于气象原因，通知各矿山，10点之前停止应急作业。开放时间另行通知！由于气象原因，通知各矿山，10点之前停止应急作业。开放时间另行通知！',
mine: '所有矿山',
annexName: '无'
},
noticeMask: false,
// 视频监控列表 // 视频监控列表
// 视频监控 // 视频监控
...@@ -463,113 +294,90 @@ ...@@ -463,113 +294,90 @@
immediate: true immediate: true
}, },
mounted() { mounted() {
this.getData();
if (!token) {
window.open(host + '/#/login', '_self')
return
}
this.getSensorList(() => {
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this.selectedMine = selectedMine
// }
}
if (noMine) {
alert('您当前还未选择矿山，请先选择矿山再查看此大屏')
window.history.go(-1)
return
}
if (this.selectedMine.mineType != 2) {
alert('您当前选择的不是露天矿山，请先选择露天矿山，再查看此大屏')
window.history.go(-1)
return
}
this.getData();
// 视频列表
Axiosx.get(host + '/api/video-mine/mineId', {
params: {
//mineType: this.selectedMine.mineType,
mineId: this.selectedMine.id,
}
}).then(res => {
res = res.data.body;
this.info = {
appKey:res.appKey,
appSecret:res.appSecret,
};
this.videos = res.videoChannelList || [];
this.createVideo(res.videoChannelList[0]);
}); });
}, },
methods: { methods: {
changeMenu(menuName){ changeSensor(item, index) {
this.currentSensorId = item.cid
this.chickVideo(item, index)
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/api/video-mine/mineId', {
params: {
//mineType: this.selectedMine.mineType,
mineId: this.selectedMine.id,
}
}).then(res => {
res = res.data.body;
this.info = {
appKey: res.appKey,
appSecret: res.appSecret,
};
this.sensorLIst = res.videoChannelList || [];
if (this.sensorLIst.length) {
this.currentSensorId = this.sensorLIst[0].cid
this.createVideo(res.videoChannelList[0]);
}
});
},
createVideo: function (item) {
this.getAccessToken(this.info.appKey, this.info.appSecret).then(accessToken => {
var url = this.getUrl(item);
var video = document.getElementById("video-container");
video.innerHTML = '';
this.player = new EZUIKit.EZUIKitPlayer({
autoplay: true,
id: "video-container",
accessToken: accessToken,
url: url,
template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
// 视频上方头部控件
//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
//plugin: ['talk'], // 加载插件，talk-对讲
// 视频下方底部控件
// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
// openSoundCallBack: data => console.log("开启声音回调", data),
// closeSoundCallBack: data => console.log("关闭声音回调", data),
// startSaveCallBack: data => console.log("开始录像回调", data),
// stopSaveCallBack: data => console.log("录像回调", data),
// capturePictureCallBack: data => console.log("截图成功回调", data),
// fullScreenCallBack: data => console.log("全屏回调", data),
// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
});
})
},
localStorage.setItem('bigScreenDetailMenu', menuName) getAccessToken(appKey, appSecret) {
this.bigScreenDetailMenu = menuName var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
getUrl(item) {
var captcha = item.captcha ? item.captcha + '@' : '';
var id = item.id || this.info.id || '';
return 'ezopen://' + captcha + 'open.ys7.com/' + id + '/' + item.channel;
}, },
createVideo: function(item){ chickVideo(video, index) {
this.getAccessToken(this.info.appKey, this.info.appSecret).then(accessToken => { this.createVideo(video);
var url = this.getUrl(item);
var video = document.getElementById("video-container");
video.innerHTML = '';
this.player = new EZUIKit.EZUIKitPlayer({
autoplay: true,
id: "video-container",
accessToken:accessToken,
url: url,
template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
// 视频上方头部控件
//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
//plugin: ['talk'], // 加载插件，talk-对讲
// 视频下方底部控件
// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
// openSoundCallBack: data => console.log("开启声音回调", data),
// closeSoundCallBack: data => console.log("关闭声音回调", data),
// startSaveCallBack: data => console.log("开始录像回调", data),
// stopSaveCallBack: data => console.log("录像回调", data),
// capturePictureCallBack: data => console.log("截图成功回调", data),
// fullScreenCallBack: data => console.log("全屏回调", data),
// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
});
})
},
getAccessToken(appKey, appSecret){
var dataJson = 'appKey='+appKey+'&appSecret='+appSecret;
return request.post("/ys7com", dataJson).then(res=>{
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
}else{
return null
}
}).catch(err=>{
console.log(err);
return err
})
},
getUrl(item){
var captcha = item.captcha ? item.captcha + '@' : '';
var id = item.id || this.info.id || '';
return 'ezopen://'+captcha+'open.ys7.com/'+id+'/'+item.channel;
},
chickVideo(video, index) {
this.createVideo(video);
this.TabCur = index; this.TabCur = index;
this.showMask = false; this.showMask = false;
......
public/datav/detail/water-monitor.html
View file @ 1e1a72e5
...@@ -42,12 +42,12 @@ ...@@ -42,12 +42,12 @@
</div> </div>
</div> </div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="history.back()"> <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=""> <img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<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));">
...@@ -59,13 +59,8 @@ ...@@ -59,13 +59,8 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.url}">
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li> {{item.name}}
<li @click="changeMenu('temprate')" :class="{active: bigScreenDetailMenu==='temprate'}">温度监测
</li>
<li @click="changeMenu('wind')" :class="{active: bigScreenDetailMenu==='wind'}">风速监测</li>
<li @click="changeMenu('water')" :class="{active: bigScreenDetailMenu==='water'}">降水监测</li>
<li @click="changeMenu('people')" :class="{active: bigScreenDetailMenu==='people'}">人员定位
</li> </li>
</ul> </ul>
</div> </div>
...@@ -90,7 +85,7 @@ ...@@ -90,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="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -108,7 +103,7 @@ ...@@ -108,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>
...@@ -149,74 +144,22 @@ ...@@ -149,74 +144,22 @@
<script src="../js/axios.min.js"></script> <script src="../js/axios.min.js"></script>
<!-- cookie --> <!-- cookie -->
<script src="../js/js.cookie.js"></script> <script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script> <script>
let jessibucaPlayer = {};
//const host = location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
const Axiosx = axios.create({
headers: { 'Authorization': token }
});
Axiosx.interceptors.response.use(
response => {
return response
}, error => {
console.error(error)
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
console.error('当前网络不佳')
return
}
}
if (!code) {
console.error('当前网络不佳')
return
}
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400 && message === '不允许访问') {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
// 请求 token 用
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var map; // 地图 var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() { data() {
return { return {
// 公共信息
selectedMine: {},
// 菜单折叠显隐 // 菜单折叠显隐
showMenu4bianpo: true, showMenu4bianpo: true,
sensorLIst: [], sensorLIst: [],
currentSensorId: '', currentSensorId: '',
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
// 菜单折叠显隐 - 结束
createTime: ['2024-01-01', '2024-09-30'],
bigScreenDetailMenu: '',
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 表格数据 // 表格数据
tableList: [] tableList: []
} }
...@@ -227,37 +170,11 @@ ...@@ -227,37 +170,11 @@
} }
}, },
mounted() { mounted() {
if (!token) { this.getSensorList(() => {});
window.open(host + '/#/login', '_self')
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this.selectedMine = selectedMine
// }
}
this.getSensorList(() => {
});
this.getTableList();
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -269,10 +186,9 @@ ...@@ -269,10 +186,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.currentSensorId = this.sensorLIst[0].equipNo equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
} })
console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
this.isReady = true this.isReady = true
...@@ -320,7 +236,6 @@ ...@@ -320,7 +236,6 @@
} }
var chartsOption = { var chartsOption = {
legend: { legend: {
data: ['Precipitation', 'Temperature'],
textStyle: { textStyle: {
color: '#fff', // 设置字体颜色 color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小 fontSize: 14 // 设置字体大小
...@@ -340,42 +255,49 @@ ...@@ -340,42 +255,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: [ yAxis: [{
{ type:'value',
type: 'value', name: '单位(mm)',
name: 'Precipitation', position:'right',
min: 0, show: true, // 显示 Y 轴
max: 250,
interval: 50,
splitLine: { show: false }, splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: { axisLabel: {
formatter: '{value} ml', show: true, // 显示刻度标签
textStyle: { color: '#a3e4f5' } textStyle: { color: '#fff' }
}, },
nameTextStyle: { axisLine: { // 轴线
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色 show: true
fontSize: 16
}, },
}, axisTick: { show: true },
{
type: 'value',
name: 'Temperature',
min: 0, min: 0,
max: 25, max: 100,
interval: 5, title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { axisLabel: {
formatter: '{value} °C', show: true, // 显示刻度标签
textStyle: { color: '#a3e4f5' } textStyle: {
color: '#fff'
}
}, },
nameTextStyle: { axisLine: { // 轴线
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色 show: true
fontSize: 16
}, },
} axisTick: { show: true },
], min: 0,
grid: { right: 45, top: 10, left: 40, bottom: 25 }, max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
...@@ -437,142 +359,7 @@ ...@@ -437,142 +359,7 @@
loading && loading.close(); loading && loading.close();
this.isReady = true this.isReady = true
}, },
changeMenu(menuName) {
localStorage.setItem('bigScreenDetailMenu', menuName)
this.bigScreenDetailMenu = menuName
},
menuChange(type) {
['showMenu4bianpo', 'showMenu4weikuangku', 'showMenu4chenjiang', 'showMenu4diya'].forEach((item) => {
if (item === type) {
this[type] = !this[type]
} else {
this[item] = false
}
})
},
async getData(e) {
var loading
if (!e) {
loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
}
// 模拟请求
setTimeout(() => {
setTimeout(() => this.getData('refesh'), 5000);
// 曲线图
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.clear() // 定时刷新 实际不刷新 演示用
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox1: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend1: {
data: ['Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Precipitation',
min: 0,
max: 250,
interval: 50,
splitLine: { show: false },
axisLabel: {
formatter: '{value} ml',
textStyle: { color: '#a3e4f5' }
},
nameTextStyle: {
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色
fontSize: 16
},
},
{
type: 'value',
name: 'Temperature',
min: 0,
max: 25,
interval: 5,
splitLine: { show: false },
axisLabel: {
formatter: '{value} °C',
textStyle: { color: '#a3e4f5' }
},
nameTextStyle: {
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色
fontSize: 16
},
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
});
loading && loading.close();
this.isReady = true
}, 800);
}
}, },
}) })
</script> </script>
......
public/datav/detail/wind-monitor.html
View file @ 1e1a72e5
...@@ -44,16 +44,11 @@ ...@@ -44,16 +44,11 @@
</div> </div>
</div> </div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="history.back()"> <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=""> <img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<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()">
<img style="width: 24px;height: 24px;" src="../static/backstage.png" alt="">
<div class="f20 color-theme ml10">后台管理</div>
</div>
<div class="flex-text ml10 mr10 mt15"> <div 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));">
...@@ -66,13 +61,8 @@ ...@@ -66,13 +61,8 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.url}">
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li> {{item.name}}
<li @click="changeMenu('temprate')" :class="{active: bigScreenDetailMenu==='temprate'}">温度监测
</li>
<li @click="changeMenu('wind')" :class="{active: bigScreenDetailMenu==='wind'}">风速监测</li>
<li @click="changeMenu('water')" :class="{active: bigScreenDetailMenu==='water'}">降水监测</li>
<li @click="changeMenu('people')" :class="{active: bigScreenDetailMenu==='people'}">人员定位
</li> </li>
</ul> </ul>
</div> </div>
...@@ -98,7 +88,7 @@ ...@@ -98,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="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
...@@ -120,7 +110,7 @@ ...@@ -120,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>
...@@ -142,72 +132,17 @@ ...@@ -142,72 +132,17 @@
<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>
let jessibucaPlayer = {};
//const host = location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
const Axiosx = axios.create({
headers: { 'Authorization': token }
});
Axiosx.interceptors.response.use(
response => {
return response
}, error => {
console.error(error)
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
console.error('当前网络不佳')
return
}
}
if (!code) {
console.error('当前网络不佳')
return
}
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400) {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
// 请求 token 用
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var map; // 地图
new Vue({ new Vue({
el: '#app', el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() { data() {
return { return {
// 公共信息
selectedMine: {},
// 菜单折叠显隐 // 菜单折叠显隐
showMenu4bianpo: true, showMenu4bianpo: true,
sensorLIst: [], sensorLIst: [],
currentSensorId: '', currentSensorId: '',
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
// 菜单折叠显隐 - 结束
createTime: ['2024-01-01', '2024-09-30'],
bigScreenDetailMenu: '',
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 表格数据 // 表格数据
tableList: [] tableList: []
...@@ -215,32 +150,12 @@ ...@@ -215,32 +150,12 @@
} }
}, },
mounted() { mounted() {
if (!token) {
window.open(host + '/#/login', '_self')
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this.selectedMine = selectedMine
// }
}
// this.getCharts(); // this.getCharts();
// this.getChartsData() // this.getChartsData()
this.getSensorList(() => { this.getSensorList(() => {
}); });
this.getTableList();
// this.getChartsData(); // this.getChartsData();
}, },
...@@ -251,7 +166,7 @@ ...@@ -251,7 +166,7 @@
}, },
methods: { methods: {
changeSensor(item) { changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo || 'test'
this.getTableList() this.getTableList()
this.getChartsData(); this.getChartsData();
}, },
...@@ -263,10 +178,9 @@ ...@@ -263,10 +178,9 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) { this.changeSensor({
this.currentSensorId = this.sensorLIst[0].equipNo equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
} })
console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
this.isReady = true this.isReady = true
...@@ -283,16 +197,6 @@ ...@@ -283,16 +197,6 @@
console.log('sdfsdf', res) console.log('sdfsdf', res)
}); });
},
menuChange(type) {
['showMenu4bianpo', 'showMenu4weikuangku', 'showMenu4chenjiang', 'showMenu4diya'].forEach((item) => {
if (item === type) {
this[type] = !this[type]
} else {
this[item] = false
}
})
}, },
getChartsData() { getChartsData() {
const yAxisOption = { const yAxisOption = {
...@@ -307,13 +211,15 @@ ...@@ -307,13 +211,15 @@
silent: true, silent: true,
data: [ data: [
{ name: '最高值', yAxis: 400 }, { name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 } { name: '最低值', yAxis: -50 }
], ],
lineStyle: { lineStyle: {
color: 'red', // 警戒线颜色 color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式 type: 'solid' // 警戒线样式
} },
} symbol: 'none' // 移除箭头
},
} }
var chartsOption = { var chartsOption = {
legend: { legend: {
...@@ -336,12 +242,49 @@ ...@@ -336,12 +242,49 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { yAxis: [{
name: 'Precipitation', type:'value',
name: '单位(m/s)',
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } nameTextStyle: { color: '#fff' },
}, axisLabel: {
grid: { right: 45, top: 10, left: 40, bottom: 25 }, show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type:'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
...@@ -397,25 +340,6 @@ ...@@ -397,25 +340,6 @@
loading && loading.close(); loading && loading.close();
this.isReady = true this.isReady = true
}, },
changeMenu(menuName) {
localStorage.setItem('bigScreenDetailMenu', menuName)
this.bigScreenDetailMenu = menuName
},
getAccessToken(appKey, appSecret) {
var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
}, },
}) })
</script> </script>
......
public/datav/detail/yandao-monitor.html 0 → 100644
View file @ 1e1a72e5
<!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="flex-text ml10 mr10 mt15" style="margin-top:20px;">
<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.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.url}">
{{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">
<!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>
<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: []
}
},
mounted() {
},
watch: {
createTime() {
}
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/sz/sensorList/feng', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
},
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/zaosheng-monitor.html 0 → 100644
View file @ 1e1a72e5
<!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="flex-text ml10 mr10 mt15" style="margin-top:60px;">
<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.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.url}">
{{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">
<!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>
<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: []
}
},
mounted() {
},
watch: {
createTime() {
}
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/sz/sensorList/feng', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
},
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/index.html
View file @ 1e1a72e5
...@@ -901,7 +901,7 @@ ...@@ -901,7 +901,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';
...@@ -1560,7 +1560,9 @@ ...@@ -1560,7 +1560,9 @@
return ; return ;
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){
...@@ -1568,7 +1570,7 @@ ...@@ -1568,7 +1570,7 @@
} }
if(mineType == 3){ if(mineType == 3){
window.open(selfHost + '/datav/tailings.html', '_self') window.open(selfHost + '/datav/tailings.html', '_self')
} }*/
} }
// 弧线 // 弧线
......
src/api/newResource/data.js
View file @ 1e1a72e5
...@@ -32,12 +32,69 @@ export default { ...@@ -32,12 +32,69 @@ export default {
params params
}) })
}, },
// 查询降雨量 // 查询降雨量
getDataList4waterPrecipitation: (params) => { getDataList4waterPrecipitation: (params) => {
return request({ return request({
url: 'data/rg/history', url: 'data/rg/history',
method: 'get', method: 'get',
params params
}) })
} },
// 报警列表
drybeachequipinforalarmList: (params) => {
return request({
url: 'tab/drybeachequipinfor/alarmList',
method: 'get',
params
})
},
//确认忽略报警
drybeachequipinforalarmListput: (params) => {
return request({
url: 'tab/drybeachequipinfor/alarmList',
method: 'put',
data:params
})
},
// 边坡设备列表
sensorList: (params) => {
return request({
url: 'data/mp/sensorList',
method: 'get',
params
})
},
// 温度设备列表
sensorListwen: (params) => {
return request({
url: 'data/sz/sensorList/wen',
method: 'get',
params
})
},
// 风速设备列表
sensorListfeng: (params) => {
return request({
url: 'data/sz/sensorList/feng',
method: 'get',
params
})
},
// 降雨设备列表
sensorListrg: (params) => {
return request({
url: '/data/rg/sensorList',
method: 'get',
params
})
},
//边坡设置报警级别
drybeachequipinforlevel: (params) => {
return request({
url: 'tab/drybeachequipinfor/level',
method: 'put',
data:params
})
},
} }
src/api/picManage/pic.js 0 → 100644
View file @ 1e1a72e5
import request from '@/utils/request'
export default {
getkdFile: (pageParam) => {
return request({
url: 'api/kdFile',
method: 'get',
params: pageParam
})
},
// 新增
add: (notice) => {
return request({
url: 'api/notice/add',
method: 'post',
data: notice
})
},
// 标记已读（查询权限）
read: (responseId) => {
return request({
url: 'api/notice/read',
method: 'post',
data: {
id: responseId
}
})
},
// 删除
del: (notice) => {
return request({
url: 'api/notice/del',
method: 'post',
data: {
id: notice.id
}
})
}
}
\ No newline at end of file
src/views/edoc/index.vue
View file @ 1e1a72e5
...@@ -72,10 +72,13 @@ ...@@ -72,10 +72,13 @@
:ref="`addhdpic`" :ref="`addhdpic`"
class="helloworld" class="helloworld"
type="file" type="file"
accept=".pdf"
hidden hidden
@change="addhdPicChange" @change="addhdPicChange"
/> />
</label> </label>
<span>仅支持pdf格式文件</span>
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="">
<div v-for="(item, index) in uploadedFiles" :key="item.name + index"> <div v-for="(item, index) in uploadedFiles" :key="item.name + index">
...@@ -181,6 +184,13 @@ ...@@ -181,6 +184,13 @@
<el-table-column width="200px" prop="createTime" label="录入时间" /> <el-table-column width="200px" prop="createTime" label="录入时间" />
<el-table-column label="操作" width="230px" align="center"> <el-table-column label="操作" width="230px" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button
v-show="scope.row.downloadWhether"
type="primary"
size="mini"
@click="viewFile(scope.row)"
>预览</el-button
>
<el-button <el-button
v-show="scope.row.downloadWhether" v-show="scope.row.downloadWhether"
type="primary" type="primary"
...@@ -227,6 +237,8 @@ export default { ...@@ -227,6 +237,8 @@ export default {
}, },
data() { data() {
return { return {
dialogVisible4:false,
pdfSrc:'',
modalBtnLoad: false, modalBtnLoad: false,
query: { query: {
originallyName: "", originallyName: "",
...@@ -268,6 +280,13 @@ export default { ...@@ -268,6 +280,13 @@ export default {
}, },
created() {}, created() {},
methods: { methods: {
viewFile(row){
this.pdfSrc = process.env.VUE_APP_LOCAL_API+'/file'+row.filePath;
const link = document.createElement('a');
link.href = this.pdfSrc;
link.target = '_blank';
link.click();
},
// searchParamReset() { // searchParamReset() {
// this.searchParam = { // this.searchParam = {
// originallyName: "", // originallyName: "",
......
src/views/kd/c/enterprise/index.vue
View file @ 1e1a72e5
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</el-row> </el-row>
<el-row :gutter="100"> <el-row :gutter="100">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="行业类别：" prop="dict3"> <el-form-item label="矿山类别：" prop="dict3">
<el-select v-model="mainDataEditing.dict3" placeholder="请选择" style="width: 100%;"> <el-select v-model="mainDataEditing.dict3" placeholder="请选择" style="width: 100%;">
<el-option v-for="item in dict3List" :key="item.id" :label="item.value" :value="item.id" /> <el-option v-for="item in dict3List" :key="item.id" :label="item.value" :value="item.id" />
</el-select> </el-select>
...@@ -336,7 +336,7 @@ ...@@ -336,7 +336,7 @@
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="行业类别：" prop="dict3"> <el-form-item label="矿山类别：" prop="dict3">
<span>{{ dialog1Data.dict3Name }}</span> <span>{{ dialog1Data.dict3Name }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -622,35 +622,35 @@ export default { ...@@ -622,35 +622,35 @@ export default {
}, },
mainFormRules: { mainFormRules: {
name: [{ required: true, message: '请输入' }], name: [{ required: true, message: '请输入' }],
idCode: [{ required: true, message: '请输入' }], // idCode: [{ required: true, message: '请输入' }],
_administrativeAreaCascade: [{ required: true, message: '请选择' }], // _administrativeAreaCascade: [{ required: true, message: '请选择' }],
address: [{ required: true, message: '请输入' }], // address: [{ required: true, message: '请输入' }],
dict1: [{ required: true, message: '请选择' }], // dict1: [{ required: true, message: '请选择' }],
dict2: [{ required: true, message: '请选择' }], // dict2: [{ required: true, message: '请选择' }],
dict3: [{ required: true, message: '请选择' }], dict3: [{ required: true, message: '请选择' }],
hasRegisteredCapital: [{ required: true, message: '请选择' }], // hasRegisteredCapital: [{ required: true, message: '请选择' }],
registeredCapital: [{ required: true, message: '请输入' }], // registeredCapital: [{ required: true, message: '请输入' }],
businessScope: [{ required: true, message: '请输入' }], // businessScope: [{ required: true, message: '请输入' }],
setupDate: [{ required: true, message: '请选择' }], // setupDate: [{ required: true, message: '请选择' }],
beginLimitDate: [{ required: true, message: '请选择' }], // beginLimitDate: [{ required: true, message: '请选择' }],
endLimitDate: [{ required: true, message: '请选择' }], // endLimitDate: [{ required: true, message: '请选择' }],
dict4: [{ required: true, message: '请选择' }], // dict4: [{ required: true, message: '请选择' }],
dict5: [{ required: true, message: '请选择' }], // dict5: [{ required: true, message: '请选择' }],
dict6: [{ required: true, message: '请选择' }], // dict6: [{ required: true, message: '请选择' }],
dict7: [{ required: true, message: '请选择' }], // dict7: [{ required: true, message: '请选择' }],
dict41: [{ required: true, message: '请选择' }], // dict41: [{ required: true, message: '请选择' }],
liablePerson: [{ required: true, message: '请输入' }], // liablePerson: [{ required: true, message: '请输入' }],
liablePersonPhone: [{ required: true, trigger: 'blur', validator: validatePhone }], // liablePersonPhone: [{ required: true, trigger: 'blur', validator: validatePhone }],
businessAddress: [{ required: true, message: '请输入' }], // businessAddress: [{ required: true, message: '请输入' }],
longitude: [{ required: true, message: '请选择位置' }], // longitude: [{ required: true, message: '请选择位置' }],
latitude: [{ required: true, message: '请选择位置' }], // latitude: [{ required: true, message: '请选择位置' }],
_workLicenseFileList: [{ required: true, message: '请选择' }], // _workLicenseFileList: [{ required: true, message: '请选择' }],
workLicenseBeginDate: [{ required: true, message: '请选择' }], // workLicenseBeginDate: [{ required: true, message: '请选择' }],
workLicenseEndDate: [{ required: true, message: '请选择' }], // workLicenseEndDate: [{ required: true, message: '请选择' }],
_safetyLicenseFileList: [{ required: true, message: '请选择' }], // _safetyLicenseFileList: [{ required: true, message: '请选择' }],
safetyLicenseBeginDate: [{ required: true, message: '请选择' }], // safetyLicenseBeginDate: [{ required: true, message: '请选择' }],
safetyLicenseEndDate: [{ required: true, message: '请选择' }] // safetyLicenseEndDate: [{ required: true, message: '请选择' }]
}, },
searching: false, searching: false,
......
src/views/login.vue
View file @ 1e1a72e5
...@@ -12,6 +12,12 @@ ...@@ -12,6 +12,12 @@
<div class="topTitle"> <div class="topTitle">
<div class="floating-text">中和地信有限公司欢迎您！</div> <div class="floating-text">中和地信有限公司欢迎您！</div>
</div> </div>
<div class="foots_logo">
<img
src="@/assets/images/foot_logo1.png"
alt="logo"
/>
</div>
<el-form <el-form
ref="loginForm" ref="loginForm"
:model="loginForm" :model="loginForm"
...@@ -100,17 +106,13 @@ ...@@ -100,17 +106,13 @@
</div> --> </div> -->
<div class="foots"> <div class="foots">
<div class="foots_logo">
<img
src="@/assets/images/foot_logo.png"
alt="logo"
/>
</div>
<div class="foots_con"> <div class="foots_con">
<div class="foots_info" style="float: left"> <div class="foots_info" style="float: left">
<p>网址: http://zhidcLcomy</p> <p>网址: http://zhidcl.com</p>
<p>地址: 淄博市张店区潘南西路8号院</p> <!-- <p>地址: 淄博市张店区潘南西路8号院</p> -->
<p>电话/传真: 0533-3338333</p> <p>电话/传真: 0533-3338333</p>
<p>邮箱: zhidcl@163.com</p>
</div> </div>
<div <div
class="r foots_ewm" class="r foots_ewm"
...@@ -322,22 +324,28 @@ export default { ...@@ -322,22 +324,28 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.foots_logo{
position: absolute;
top: 40px;
left: 40px;
color: #fff;
}
.foots { .foots {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding: 0.8rem 0 0.2rem 0; padding: 0.8rem 0 0.2rem 0;
background: rgba(4,38,75, 0.9); background: rgba(4,38,75, 0.9);
.foots_logo { // .foots_logo {
width: 1140px; // width: 1140px;
padding-bottom: 0.2rem; // padding-bottom: 0.2rem;
margin: 0 auto; // margin: 0 auto;
font-size: 0; // font-size: 0;
// border-bottom: 1px solid #4a637e; // // border-bottom: 1px solid #4a637e;
img { // img {
height: 48px; // height: 48px;
} // }
} // }
.foots_con { .foots_con {
width: 1140px; width: 1140px;
margin: 2px auto 15px; margin: 2px auto 15px;
...@@ -345,7 +353,7 @@ export default { ...@@ -345,7 +353,7 @@ export default {
.foots_info { .foots_info {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: #adb2ba; color: #f7f7f7;
letter-spacing: 1px; letter-spacing: 1px;
} }
.foots_ewm { .foots_ewm {
......
src/views/newResource/displace/alert.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-button
class="filter-item"
size="mini"
@click="handleAlertManage"
>报警值管理</el-button
>
</div>
</div>
<!--表格-->
<el-table ref="table" v-loading="loading" :data="tableData" row-key="id">
<el-table-column
:show-overflow-tooltip="true"
prop="equipno"
label="站点编号"
width="130px"
align="center"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="equipname"
label="测站名称"
align="center"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="time"
label="报警时间"
align="center"
>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="state"
label="处置状态"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.state==1">
未处置
</div>
<div v-if="scope.row.state==2">已确认</div>
<div v-if="scope.row.state==3">已忽略</div>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.state==1">
<el-button
size="mini"
type="text"
@click="handleSure(scope.row,2)"
>确认报警</el-button
>
<el-button
size="mini"
type="text"
@click="handleSure(scope.row,3)"
>忽略报警</el-button
>
</template>
<template v-else><div>已经处理</div></template>
</el-table-column>
</el-table>
<el-pagination
:page-sizes="[10, 20, 50, 100]"
:current-page.sync="page"
:page-size.sync="size"
:total="totalElement"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-dialog
title="报警值管理"
:visible.sync="open"
width="580px"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="设备" prop="equipno">
<el-select
v-model="form.equipno"
multiple
placeholder="请选择设备"
>
<el-option
v-for="dict in equipnoData"
:key="dict.equipNo"
:label="dict.equipName"
:value="dict.equipNo"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="一级报警" prop="onelevelalarm">
<el-input-number
v-model="form.onelevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="二级报警" prop="twolevelalarm">
<el-input-number
v-model="form.twolevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="三级报警" prop="threelevelalarm">
<el-input-number
v-model="form.threelevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="四级报警" prop="fourlevelalarm">
<el-input-number
v-model="form.fourlevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog2Show" title="报警处置" width="580px">
<div>
<span>是否操作报警数据？</span>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="dialog2Show=false">取消</el-button>
<el-button :loading="dialog2Saving" type="primary" @click="dialog2Submit">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import API from "@/api/newResource/data.js";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import DateRangePicker from '@/components/DateRangePicker'
export default {
name: "newResourceDisplaceMachine", // 本页面名
data() {
return {
equipname: '',
datarealtime: '',
dialog2Saving:false,
loading: false,
tableData: [],
// 总的个数
totalElement: 0,
// 当前页的条数
size: 10,
// 当前页码
page: 0,
form:{},
equipnoData:[],
open:false,
dialog2Show:false,
dialog2form:{
id:null,
state:null,
}
};
},
components: { DateRangePicker },
mounted() {
this.search()
this.getsensorList()
},
methods: {
resetForm(){
this.form={
equipno:[],
onelevelalarm:0,
twolevelalarm:0,
threelevelalarm:0,
fourlevelalarm:0,
}
},
getData() {
this.loading = true;
API.drybeachequipinforalarmList({
page: this.page,
size: this.size,
deviceType:3,
})
.then((response) => {
this.loading = false;
this.tableData = response.body.list;
this.totalElement = response.body.total;
})
.catch(() => {
this.loading = false;
});
},
// 模糊搜索
search() {
this.getData();
},
getsensorList(){
API.sensorList().then(res=>{
this.equipnoData = res.body;
})
},
// clearSearch() {
// this.equipname = ''
// this.datarealtime = ''
// this.size = 10;
// this.page = 0;
// this.getData();
// },
// 当前页的条数变化
handleSizeChange(val) {
this.size = val;
this.getData();
},
// 当前第几页
handleCurrentChange(val) {
this.page = val;
this.getData();
},
handleSure(row,state){
console.log(row.id)
this.dialog2Show = true
this.dialog2form.id = row.id;
this.dialog2form.state = state;
},
handleAlertManage(){
this.resetForm;
this.open = true;
},
submitForm(){
API.drybeachequipinforlevel(this.form).then(res => {
this.$message.success('设置成功');
this.open = false;
})
},
dialog2Submit(){
API.drybeachequipinforalarmListput(this.dialog2form).then(()=>{
this.$message.success('处置成功');
this.getData();
this.dialog2Show = false;
})
},
cancel(){
this.open = false;
}
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
</style>
src/views/newResource/temperature/alert.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-button
class="filter-item"
size="mini"
@click="handleAlertManage"
>报警值管理</el-button
>
</div>
</div>
<!--表格-->
<el-table ref="table" v-loading="loading" :data="tableData" row-key="id">
<el-table-column
:show-overflow-tooltip="true"
prop="equipno"
label="站点编号"
width="130px"
align="center"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="equipname"
label="测站名称"
align="center"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="time"
label="报警时间"
align="center"
>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="state"
label="处置状态"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.state==1">
未处置
</div>
<div v-if="scope.row.state==2">已确认</div>
<div v-if="scope.row.state==3">已忽略</div>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.state==1">
<el-button
size="mini"
type="text"
@click="handleSure(scope.row,2)"
>确认报警</el-button
>
<el-button
size="mini"
type="text"
@click="handleSure(scope.row,3)"
>忽略报警</el-button
>
</template>
<template v-else><div>已经处理</div></template>
</el-table-column>
</el-table>
<el-pagination
:page-sizes="[10, 20, 50, 100]"
:current-page.sync="page"
:page-size.sync="size"
:total="totalElement"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-dialog
title="报警值管理"
:visible.sync="open"
width="580px"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="设备" prop="equipno">
<el-select
v-model="form.equipno"
multiple
placeholder="请选择设备"
>
<el-option
v-for="dict in equipnoData"
:key="dict.equipNo"
:label="dict.equipName"
:value="dict.equipNo"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="一级报警" prop="onelevelalarm">
<el-input-number
v-model="form.onelevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="二级报警" prop="twolevelalarm">
<el-input-number
v-model="form.twolevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="三级报警" prop="threelevelalarm">
<el-input-number
v-model="form.threelevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="四级报警" prop="fourlevelalarm">
<el-input-number
v-model="form.fourlevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog2Show" title="报警处置" width="580px">
<div>
<span>是否操作报警数据？</span>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="dialog2Show=false">取消</el-button>
<el-button :loading="dialog2Saving" type="primary" @click="dialog2Submit">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import API from "@/api/newResource/data.js";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import DateRangePicker from '@/components/DateRangePicker'
export default {
name: "newResourceDisplaceMachine", // 本页面名
data() {
return {
equipname: '',
datarealtime: '',
dialog2Saving:false,
loading: false,
tableData: [],
// 总的个数
totalElement: 0,
// 当前页的条数
size: 10,
// 当前页码
page: 0,
form:{},
equipnoData:[],
open:false,
dialog2Show:false,
dialog2form:{
id:null,
state:null,
}
};
},
components: { DateRangePicker },
mounted() {
this.search()
this.getsensorList()
},
methods: {
resetForm(){
this.form={
equipno:[],
onelevelalarm:0,
twolevelalarm:0,
threelevelalarm:0,
fourlevelalarm:0,
}
},
getData() {
this.loading = true;
API.drybeachequipinforalarmList({
page: this.page,
size: this.size,
deviceType:8,
different:'温度'
})
.then((response) => {
this.loading = false;
this.tableData = response.body.list;
this.totalElement = response.body.total;
})
.catch(() => {
this.loading = false;
});
},
// 模糊搜索
search() {
this.getData();
},
getsensorList(){
API.sensorListwen().then(res=>{
this.equipnoData = res.body;
})
},
// clearSearch() {
// this.equipname = ''
// this.datarealtime = ''
// this.size = 10;
// this.page = 0;
// this.getData();
// },
// 当前页的条数变化
handleSizeChange(val) {
this.size = val;
this.getData();
},
// 当前第几页
handleCurrentChange(val) {
this.page = val;
this.getData();
},
handleSure(row,state){
console.log(row.id)
this.dialog2Show = true
this.dialog2form.id = row.id;
this.dialog2form.state = state;
},
handleAlertManage(){
this.resetForm;
this.open = true;
},
submitForm(){
API.drybeachequipinforlevel(this.form).then(res => {
this.$message.success('设置成功');
this.open = false;
})
},
dialog2Submit(){
API.drybeachequipinforalarmListput(this.dialog2form).then(()=>{
this.$message.success('处置成功');
this.getData();
this.dialog2Show = false;
})
},
cancel(){
this.open = false;
}
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
</style>
src/views/newResource/windspeed/alert.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-button
class="filter-item"
size="mini"
@click="handleAlertManage"
>报警值管理</el-button
>
</div>
</div>
<!--表格-->
<el-table ref="table" v-loading="loading" :data="tableData" row-key="id">
<el-table-column
:show-overflow-tooltip="true"
prop="equipno"
label="站点编号"
width="130px"
align="center"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="equipname"
label="测站名称"
align="center"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="time"
label="报警时间"
align="center"
>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="state"
label="处置状态"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.state==1">
未处置
</div>
<div v-if="scope.row.state==2">已确认</div>
<div v-if="scope.row.state==3">已忽略</div>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.state==1">
<el-button
size="mini"
type="text"
@click="handleSure(scope.row,2)"
>确认报警</el-button
>
<el-button
size="mini"
type="text"
@click="handleSure(scope.row,3)"
>忽略报警</el-button
>
</template>
<template v-else><div>已经处理</div></template>
</el-table-column>
</el-table>
<el-pagination
:page-sizes="[10, 20, 50, 100]"
:current-page.sync="page"
:page-size.sync="size"
:total="totalElement"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-dialog
title="报警值管理"
:visible.sync="open"
width="580px"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="设备" prop="equipno">
<el-select
v-model="form.equipno"
multiple
placeholder="请选择设备"
>
<el-option
v-for="dict in equipnoData"
:key="dict.equipNo"
:label="dict.equipName"
:value="dict.equipNo"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="一级报警" prop="onelevelalarm">
<el-input-number
v-model="form.onelevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="二级报警" prop="twolevelalarm">
<el-input-number
v-model="form.twolevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="三级报警" prop="threelevelalarm">
<el-input-number
v-model="form.threelevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="四级报警" prop="fourlevelalarm">
<el-input-number
v-model="form.fourlevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog2Show" title="报警处置" width="580px">
<div>
<span>是否操作报警数据？</span>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="dialog2Show=false">取消</el-button>
<el-button :loading="dialog2Saving" type="primary" @click="dialog2Submit">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import API from "@/api/newResource/data.js";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import DateRangePicker from '@/components/DateRangePicker'
export default {
name: "newResourceDisplaceMachine", // 本页面名
data() {
return {
equipname: '',
datarealtime: '',
dialog2Saving:false,
loading: false,
tableData: [],
// 总的个数
totalElement: 0,
// 当前页的条数
size: 10,
// 当前页码
page: 0,
form:{},
equipnoData:[],
open:false,
dialog2Show:false,
dialog2form:{
id:null,
state:null,
}
};
},
components: { DateRangePicker },
mounted() {
this.search()
this.getsensorList()
},
methods: {
resetForm(){
this.form={
equipno:[],
onelevelalarm:0,
twolevelalarm:0,
threelevelalarm:0,
fourlevelalarm:0,
}
},
getData() {
this.loading = true;
API.drybeachequipinforalarmList({
page: this.page,
size: this.size,
deviceType:8,
different:'风速'
})
.then((response) => {
this.loading = false;
this.tableData = response.body.list;
this.totalElement = response.body.total;
})
.catch(() => {
this.loading = false;
});
},
// 模糊搜索
search() {
this.getData();
},
getsensorList(){
API.sensorListfeng().then(res=>{
this.equipnoData = res.body;
})
},
// clearSearch() {
// this.equipname = ''
// this.datarealtime = ''
// this.size = 10;
// this.page = 0;
// this.getData();
// },
// 当前页的条数变化
handleSizeChange(val) {
this.size = val;
this.getData();
},
// 当前第几页
handleCurrentChange(val) {
this.page = val;
this.getData();
},
handleSure(row,state){
console.log(row.id)
this.dialog2Show = true
this.dialog2form.id = row.id;
this.dialog2form.state = state;
},
handleAlertManage(){
this.resetForm;
this.open = true;
},
submitForm(){
API.drybeachequipinforlevel(this.form).then(res => {
this.$message.success('设置成功');
this.open = false;
})
},
dialog2Submit(){
API.drybeachequipinforalarmListput(this.dialog2form).then(()=>{
this.$message.success('处置成功');
this.getData();
this.dialog2Show = false;
})
},
cancel(){
this.open = false;
}
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
</style>
src/views/newWater/precipitation/alert.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-button
class="filter-item"
size="mini"
@click="handleAlertManage"
>报警值管理</el-button
>
</div>
</div>
<!--表格-->
<el-table ref="table" v-loading="loading" :data="tableData" row-key="id">
<el-table-column
:show-overflow-tooltip="true"
prop="equipno"
label="站点编号"
width="130px"
align="center"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="equipname"
label="测站名称"
align="center"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="time"
label="报警时间"
align="center"
>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="state"
label="处置状态"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.state==1">
未处置
</div>
<div v-if="scope.row.state==2">已确认</div>
<div v-if="scope.row.state==3">已忽略</div>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.state==1">
<el-button
size="mini"
type="text"
@click="handleSure(scope.row,2)"
>确认报警</el-button
>
<el-button
size="mini"
type="text"
@click="handleSure(scope.row,3)"
>忽略报警</el-button
>
</template>
<template v-else><div>已经处理</div></template>
</el-table-column>
</el-table>
<el-pagination
:page-sizes="[10, 20, 50, 100]"
:current-page.sync="page"
:page-size.sync="size"
:total="totalElement"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-dialog
title="报警值管理"
:visible.sync="open"
width="580px"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="设备" prop="equipno">
<el-select
v-model="form.equipno"
multiple
placeholder="请选择设备"
>
<el-option
v-for="dict in equipnoData"
:key="dict.equipNo"
:label="dict.equipName"
:value="dict.equipNo"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="一级报警" prop="onelevelalarm">
<el-input-number
v-model="form.onelevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="二级报警" prop="twolevelalarm">
<el-input-number
v-model="form.twolevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="三级报警" prop="threelevelalarm">
<el-input-number
v-model="form.threelevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="四级报警" prop="fourlevelalarm">
<el-input-number
v-model="form.fourlevelalarm"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog2Show" title="报警处置" width="580px">
<div>
<span>是否操作报警数据？</span>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="dialog2Show=false">取消</el-button>
<el-button :loading="dialog2Saving" type="primary" @click="dialog2Submit">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import API from "@/api/newResource/data.js";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import DateRangePicker from '@/components/DateRangePicker'
export default {
name: "newResourceDisplaceMachine", // 本页面名
data() {
return {
equipname: '',
datarealtime: '',
dialog2Saving:false,
loading: false,
tableData: [],
// 总的个数
totalElement: 0,
// 当前页的条数
size: 10,
// 当前页码
page: 0,
form:{},
equipnoData:[],
open:false,
dialog2Show:false,
dialog2form:{
id:null,
state:null,
}
};
},
components: { DateRangePicker },
mounted() {
this.search()
this.getsensorList()
},
methods: {
resetForm(){
this.form={
equipno:[],
onelevelalarm:0,
twolevelalarm:0,
threelevelalarm:0,
fourlevelalarm:0,
}
},
getData() {
this.loading = true;
API.drybeachequipinforalarmList({
page: this.page,
size: this.size,
deviceType:6,
})
.then((response) => {
this.loading = false;
this.tableData = response.body.list;
this.totalElement = response.body.total;
})
.catch(() => {
this.loading = false;
});
},
// 模糊搜索
search() {
this.getData();
},
getsensorList(){
API.sensorListrg().then(res=>{
this.equipnoData = res.body;
})
},
// clearSearch() {
// this.equipname = ''
// this.datarealtime = ''
// this.size = 10;
// this.page = 0;
// this.getData();
// },
// 当前页的条数变化
handleSizeChange(val) {
this.size = val;
this.getData();
},
// 当前第几页
handleCurrentChange(val) {
this.page = val;
this.getData();
},
handleSure(row,state){
console.log(row.id)
this.dialog2Show = true
this.dialog2form.id = row.id;
this.dialog2form.state = state;
},
handleAlertManage(){
this.resetForm;
this.open = true;
},
submitForm(){
API.drybeachequipinforlevel(this.form).then(res => {
this.$message.success('设置成功');
this.open = false;
})
},
dialog2Submit(){
API.drybeachequipinforalarmListput(this.dialog2form).then(()=>{
this.$message.success('处置成功');
this.getData();
this.dialog2Show = false;
})
},
cancel(){
this.open = false;
}
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
</style>
src/views/picManage/dzhj.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<el-select v-model="searchParam._mineIndex" placeholder="所属矿山" clearable size="small" class="filter-item" style="width: 200px;">
<el-option v-for="mine in mineList" :key="mine.index" :label="mine.name" :value="mine.index" />
</el-select>
<el-input v-model="searchParam.nameLike" clearable size="small" placeholder="物资名称" style="width: 200px;" class="filter-item" />
<el-select v-model="searchParam.dict37" :disabled="searchParam._mineIndex==null" clearable size="small" placeholder="物资类型" style="width: 200px;" class="filter-item">
<el-option v-for="item in dict37ListSearchParam" :key="item.id" :label="item.value" :value="item.id" />
</el-select>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchSubmit">搜索</el-button>
<el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="searchParamReset">重置</el-button>
<el-tooltip class="item" effect="dark" content="按当前查询条件导出" placement="top">
<el-button :loading="exporting" class="filter-item" size="mini" type="info" plain icon="el-icon-download" @click="exportSubmit">导出</el-button>
</el-tooltip>
</div>
<!-- <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="doAdd()">新增</el-button> -->
</div>
<!--弹出框1-->
<el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog1Show" :title="editState==1?'新增':editState==2?'修改':'查看'" width="960px">
<el-form ref="dialog1Form" :model="dialog1Data" :hide-required-asterisk="!dialog1Editing" :rules="dialog1Rules" size="mini" label-width="180px" style="margin-right: 80px;">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="物资类型：" prop="dict37">
<span v-show="!dialog1Editing">{{ dialog1Data.dict37Name }}</span>
<el-select v-show="dialog1Editing" v-model="dialog1Data.dict37" placeholder="请选择" style="width: 100%;">
<el-option v-for="item in dict37List" :key="item.id" :label="item.value" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="照片：" prop="photoPath">
<div v-for="file in dialog1Data._fileList" v-show="!dialog1Editing" :key="file.url">
<el-link type="primary" @click="openFile(file)">{{ file.name }}</el-link>
</div>
<el-upload
v-show="dialog1Editing"
class="upload-demo"
action="/api/file/upload"
multiple
:headers="httpHeaders"
:limit="1"
:on-success="upFileSuccess"
:on-remove="upFileRemove"
:on-error="upFileError"
:on-exceed="upFileExceed"
:before-upload="upFileBefore"
:on-preview="openFile"
:file-list="dialog1Data._fileListShow"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过20M</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-show="dialog1Editing" slot="footer" class="dialog-footer">
<el-button type="text" @click="dialog1Show=false">取消</el-button>
<el-button :loading="dialog1Saving" type="primary" @click="dialog1Submit">确认</el-button>
</div>
</el-dialog>
<!--弹出框2-->
<el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog2Show" :title="'确认删除'" width="580px">
<div>
<span>确认要删除物资：</span><span style="font-weight: bold;">{{ dialog2Data.name }}</span><span>吗？</span>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="dialog2Show=false">取消</el-button>
<el-button :loading="dialog2Saving" type="primary" @click="dialog2Submit">确认</el-button>
</div>
</el-dialog>
<!--表格-->
<el-table ref="table" v-loading="searching" :data="tableData" row-key="id">
<el-table-column :show-overflow-tooltip="true" prop="id" label="编号" width="100px" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="mineName" label="所属矿山" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="name" label="名称" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="dict37Name" label="物资类型" align="center" />
<el-table-column label="操作" width="300px" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" round @click="doEdit(scope.row.id,false)">查看</el-button>
<!-- <el-button size="mini" round @click="doEdit(scope.row.id,true)">修改</el-button> -->
<!-- <el-button size="mini" round @click="doDelete(scope.row.id)">删除</el-button> -->
</template>
</el-table-column>
</el-table>
<el-pagination
:page-sizes="[10, 20, 50, 100]"
:current-page.sync="searchParam.page"
:page-size.sync="searchParam.count"
:total="searchResult.total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="searchSubmit"
@current-change="searchSubmit"
/>
</div>
</template>
<script>
import emergencySuppliesApi from '@/api/kd/emergencySupplies'
import dictionaryApi from '@/api/kd/dictionary'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import AMapSearchPoint from '@/components/AMap/AMapSearchPoint'
import mineApi from '@/api/kd/mine'
import { downloadFile } from '@/utils'
import picApi from '@/api/picManage/pic'
const searchParam = {// 默认搜索条件
page: 1,
count: 10,
enterpriseId:5,
type:8,
}
export default {
name: 'CEmergencySupplies', // 本页面名
components: { AMapSearchPoint },
data() {
return {
mineList: [],
httpHeaders: {
'Authorization': getToken()
},
dict37List: [],
dict38List: [],
dict39List: [],
searching: false,
exporting: false,
searchParam: {},
searchResult: {
total: 0,
results: [] // 搜索结果
},
dialog1Show: false,
dialog1Editing: false,
dialog1Saving: false,
dialog1Data: {},
dialog1Rules: {
name: [
{ required: true, message: '请填写' }
],
brand: [
{ required: true, message: '请填写' }
]
},
editState: 0, // （刚打开窗口时）记录了上次窗口作用；（保存编辑时）记录了当前窗口作用； 0无 1新增 2修改 3查看
addingData: {}, // 上次正在新增时的内容，下次打开dialog1窗口时记录下来
dialog2Show: false,
dialog2Saving: false,
dialog2Data: {}
}
},
computed: {
...mapGetters([
'user',
'baseApi'
]),
dict37ListSearchParam() {
const result = []
if (!this.searchParam._mineIndex) {
return result
}
const mine = this.mineList[this.searchParam._mineIndex - 1]
for (const i in this.dict37List) {
if (this.dict37List[i] && this.dict37List[i].enterpriseId === mine.enterpriseId) {
result.push(this.dict37List[i])
}
}
return result
},
tableData() {
// 此处对返回值进行算法重组
return this.searchResult.results
},
mapPoint() {
if (this.dialog1Data.longitude && this.dialog1Data.latitude) {
return [this.dialog1Data.longitude * 1, this.dialog1Data.latitude * 1]
}
return null
}
},
mounted() {
// 字典选项卡
const dictGroups = [37, 38, 39]
dictGroups.forEach(i => {
dictionaryApi.getList({ 'groupCode': i }).then(response => {
this['dict' + i + 'List'] = response.results
})
})
// 矿山选项卡
mineApi.getEnableMine().then(response => {
let i = 1
response.results.forEach(x => { x.index = i++ })
this.mineList = response.results
})
// this.searchParamReset()
// this.searchSubmit()
this.getData()
},
methods: {
getData(){
picApi.getkdFile(this.searchParam).then(response => {
console.log(response)
})
},
searchParamReset() {
this.searchParam = JSON.parse(JSON.stringify(searchParam))
},
searchSubmit() {
this.searching = true
if (this.searchParam._mineIndex) {
const mine = this.mineList[this.searchParam._mineIndex - 1]
this.searchParam.mineType = mine.mineType
this.searchParam.mineId = mine.id
} else {
this.searchParam.mineType = null
this.searchParam.mineId = null
}
emergencySuppliesApi.getPage(this.searchParam).then(response => {
this.searching = false
this.searchResult = response
}).catch(() => {
this.searching = false
})
},
exportSubmit() {
this.exporting = true
if (this.searchParam._mineIndex) {
const mine = this.mineList[this.searchParam._mineIndex - 1]
this.searchParam.mineType = mine.mineType
this.searchParam.mineId = mine.id
} else {
this.searchParam.mineType = null
this.searchParam.mineId = null
}
emergencySuppliesApi.export(this.searchParam).then(response => {
downloadFile(response, '物资装备', 'xlsx')
this.exporting = false
}).catch(() => {
this.exporting = false
})
},
dialog1Submit() {
this.$refs['dialog1Form'].validate(valid => {
if (!valid) {
this.$message.error('请检查填写内容')
return
} else {
this.dialog1Saving = true
if (this.dialog1Data._fileList) {
this.dialog1Data.photoPath = JSON.stringify(this.dialog1Data._fileList)
}
if (this.editState === 1) { // 新增
emergencySuppliesApi.add(this.dialog1Data).then(() => {
this.dialog1Show = false
this.$message.success('保存成功')
setTimeout(() => { // 立即清除会导致输入框Validate一闪变红
this.dialog1Data = {}
this.dialog1Saving = false
}, 500)
this.searchSubmit()
}).catch(() => {
this.dialog1Saving = false
})
} else if (this.editState === 2) { // 修改
emergencySuppliesApi.set(this.dialog1Data).then(() => {
this.dialog1Show = false
this.$message.success('修改成功')
setTimeout(() => { // 立即清除会导致输入框Validate一闪变红
this.dialog1Data = {}
this.dialog1Saving = false
}, 500)
this.searchSubmit()
}).catch(() => {
this.dialog1Saving = false
})
} else {
this.$message.error('出错啦，请重试')
this.dialog1Saving = false
}
}
})
},
beforeDialog1Open() { // 窗口打开前的统一操作
if (this.editState === 1) {
this.addingData = this.dialog1Data
}
},
doAdd() {
this.beforeDialog1Open()
this.editState = 1
this.dialog1Editing = true
this.dialog1Data = this.addingData // 初始值：上次编辑的内容
this.dialog1Show = true
this.$nextTick(() => {
this.$refs['dialog1Form'].clearValidate()
})
},
doEdit(id, isEdit) {
this.beforeDialog1Open()
this.editState = isEdit ? 2 : 3
emergencySuppliesApi.getById(id).then(response => {
this.dialog1Data = response
if (this.dialog1Data.photoPath) {
this.dialog1Data._fileList = JSON.parse(this.dialog1Data.photoPath)
this.dialog1Data._fileListShow = JSON.parse(this.dialog1Data.photoPath) // 数据存放与原始绑定分开，可以防止中途赋值产生的闪烁问题
}
this.dialog1Editing = isEdit
this.dialog1Show = true
}).catch(() => {
this.searchSubmit()
})
},
dialog2Submit() {
this.dialog2Saving = true
emergencySuppliesApi.del(this.dialog2Data).then(() => {
this.dialog2Show = false
this.$message.success('删除成功')
this.dialog2Data = {}
this.dialog2Saving = false
this.searchSubmit()
}).catch(() => {
this.dialog2Saving = false
})
},
doDelete(id) {
emergencySuppliesApi.getById(id).then(response => {
this.dialog2Data = response
this.dialog2Show = true
}).catch(() => {
this.searchSubmit()
})
},
elementuiUpListFormat(fileList) {
const filePathArray = []
fileList.forEach(f => {
if (f.response && f.response.result) {
filePathArray.push({
name: f.name,
url: f.response.result
})
} else if (f.name && f.url) {
filePathArray.push({
name: f.name,
url: f.url
})
}
})
return filePathArray
},
upFileSuccess(response, file, fileList) {
if (!this.dialog1Data._fileList) {
this.dialog1Data._fileList = []
}
this.dialog1Data._fileList.push({
name: file.name,
url: response.result
})
},
upFileRemove(file, fileList) {
this.dialog1Data._fileList = this.elementuiUpListFormat(fileList)
},
upFileError() {
this.$message.error('上传失败，请稍后再试')
},
upFileExceed() {
this.$message.error('文件数量已达上限')
},
upFileBefore(file) {
const isIMG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLtSize = file.size / 1024 / 1024 < 20
if (!isIMG) {
this.$message.error('上传图片只能是 JPG/JPEG/PNG 格式')
return false
}
if (!isLtSize) {
this.$message.error('上传图片大小不能超过 20MB')
return false
}
return true
},
openFile(file) {
if (file.url) {
window.open(this.baseApi + '/file' + file.url)
} else if (file.response && file.response.result) {
window.open(this.baseApi + '/file' + file.response.result)
}
},
choosePoint(lnglat) {
if (lnglat) {
this.dialog1Data.longitude = lnglat[0]
this.dialog1Data.latitude = lnglat[1]
} else {
this.dialog1Data.longitude = null
this.dialog1Data.latitude = null
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
</style>
src/views/picManage/kfly.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<el-select v-model="searchParam._mineIndex" placeholder="所属矿山" clearable size="small" class="filter-item" style="width: 200px;">
<el-option v-for="mine in mineList" :key="mine.index" :label="mine.name" :value="mine.index" />
</el-select>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchSubmit">查看</el-button>
</div>
<!--图-->
<template v-if="underfloorPlanListShow && underfloorPlanListShow.length>0">
<div style="width: 100%;">
<el-image v-for="file in underfloorPlanListShow" :key="file.url" style="width: 100%; height: auto" :src="baseApi+'/file'+file.url" fit="contain" />
</div>
</template>
</div>
</template>
<script>
import mineApi from '@/api/picManage/pic'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
name: 'CUnderfloorPlan', // 本页面名：没有Person前缀！这个功能和person没有直接关系~
components: {},
data() {
return {
mineList: [],
httpHeaders: {
'Authorization': getToken()
},
searchParam: {},
underfloorPlanPath: null,
underfloorPlanList: [],
underfloorPlanListShow: []
}
},
computed: {
...mapGetters([
'user',
'baseApi'
])
},
mounted() {
let form = {
enterpriseId:5,
page:1,
size:10
}
// 矿山选项卡
mineApi.getkdFile(form).then(response => {
// let i = 1
// response.results.forEach(x => { x.index = i++ })
// this.mineList = response.results
})
},
methods: {
searchSubmit() {
this.underfloorPlanPath = null
this.underfloorPlanList = []
this.underfloorPlanListShow = []
if (this.searchParam._mineIndex) {
const mine = this.mineList[this.searchParam._mineIndex - 1]
this.searchParam.mineType = mine.mineType
this.searchParam.mineId = mine.id
} else {
this.$message.warning('请选择矿山')
return
}
mineApi.getUndergroundById(this.searchParam.mineId).then(response => {
this.underfloorPlanPath = response.underfloorPlanPath
if (this.underfloorPlanPath) {
this.underfloorPlanListShow = JSON.parse(this.underfloorPlanPath)
} else {
this.$message.warning('当前矿山未上传井下平面图')
}
})
},
submit() {
this.underfloorPlanPath = JSON.stringify(this.underfloorPlanList)
console.log(this.underfloorPlanPath)
mineApi.setUnderground({
id: this.searchParam.mineId,
underfloorPlanPath: this.underfloorPlanPath
}).then(() => {
this.$message.success('修改成功')
this.searchSubmit()
})
},
upFileSuccess(response, file, fileList) {
if (!this.underfloorPlanList) {
this.underfloorPlanList = []
}
this.underfloorPlanList.push({
name: file.name,
url: response.result
})
},
upFileError() {
this.$message.error('上传失败，请稍后再试')
},
upFileRemove() {
this.underfloorPlanList = []
},
upFileBefore(file) {
const isIMG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLtSize = file.size / 1024 / 1024 < 20
if (!isIMG) {
this.$message.error('上传图片只能是 JPG/JPEG/PNG 格式')
return false
}
if (!isLtSize) {
this.$message.error('上传图片大小不能超过 20MB')
return false
}
return true
},
upFileExceed() {
this.$message.error('您已经上传了一张图，请删除后重新上传')
},
openFile(file) {
if (file.url) {
window.open(this.baseApi + '/file' + file.url)
} else if (file.response && file.response.result) {
window.open(this.baseApi + '/file' + file.response.result)
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
</style>
src/views/picManage/ksqj.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
1
</div>
</template>
\ No newline at end of file
src/views/picManage/lsks.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
1
</div>
</template>
\ No newline at end of file
src/views/picManage/rydw.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<el-select v-model="searchParam._mineIndex" placeholder="所属矿山" clearable size="small" class="filter-item" style="width: 200px;">
<el-option v-for="mine in mineList" :key="mine.id" :label="mine.name" :value="mine.id" />
</el-select>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchSubmit">查看</el-button>
</div>
<!--图-->
<template v-if="underfloorPlanListShow && underfloorPlanListShow.length>0">
<div style="width: 100%;">
<el-image v-for="file in underfloorPlanListShow" :key="file.url" style="width: 100%; height: auto" :src="baseApi+'/file'+file.url" fit="contain" />
</div>
</template>
</div>
</template>
<script>
import mineApi from '@/api/kd/mine'
import picApi from '@/api/picManage/pic'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
name: 'CUnderfloorPlan', // 本页面名：没有Person前缀！这个功能和person没有直接关系~
components: {},
data() {
return {
dataList:[],
total:0,
form:{},
searchForm:{
page:1,
size:10,
type:8,
enterpriseId:5,
},
mineList: [],
httpHeaders: {
'Authorization': getToken()
},
searchParam: {},
underfloorPlanPath: null,
underfloorPlanList: [],
underfloorPlanListShow: []
}
},
computed: {
...mapGetters([
'user',
'baseApi'
])
},
mounted() {
// 矿山选项卡
mineApi.getEnableMine().then(response => {
let i = 1
response.results.forEach(x => { x.index = i++ })
this.mineList = response.results
})
// 矿山选项卡
},
methods: {
reset(){
this.form={
enterpriseId:null,
fileName:null,
filePath:null,
id:null,
type:8,
}
},
getData(){
picApi.getkdFile(this.searchForm).then(response => {
this.dataList = response.body.list
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
</style>
src/views/picManage/sjc.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
1
</div>
</template>
\ No newline at end of file
src/views/picManage/tjc.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
1
</div>
</template>
\ No newline at end of file
src/views/picManage/zycl.vue 0 → 100644
View file @ 1e1a72e5
<template>
<div class="app-container">
1
</div>
</template>
\ No newline at end of file
src/views/system/dept/index.vue
View file @ 1e1a72e5
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle"> <div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> <el-input v-model="query.name" clearable size="small" placeholder="输入行政区划名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<date-range-picker v-model="query.createTime" class="date-item" /> <date-range-picker v-model="query.createTime" class="date-item" />
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery"> <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" /> <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
...@@ -14,12 +14,12 @@ ...@@ -14,12 +14,12 @@
<crudOperation :permission="permission" /> <crudOperation :permission="permission" />
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px">
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px"> <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="120px">
<el-form-item label="部门名称" prop="name"> <el-form-item label="行政区划名称" prop="name">
<el-input v-model="form.name" style="width: 370px;" /> <el-input v-model="form.name" style="width: 370px;" />
</el-form-item> </el-form-item>
<el-form-item label="部门排序" prop="deptSort"> <el-form-item label="行政区划排序" prop="deptSort">
<el-input-number <el-input-number
v-model.number="form.deptSort" v-model.number="form.deptSort"
:min="0" :min="0"
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
style="width: 370px;" style="width: 370px;"
/> />
</el-form-item> </el-form-item>
<el-form-item label="顶级部门"> <el-form-item label="顶级行政区划">
<el-radio-group v-model="form.isTop" style="width: 140px"> <el-radio-group v-model="form.isTop" style="width: 140px">
<el-radio label="1">是</el-radio> <el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio> <el-radio label="0">否</el-radio>
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<el-form-item label="状态" prop="enabled"> <el-form-item label="状态" prop="enabled">
<el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio> <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
</el-form-item> </el-form-item>
<el-form-item v-if="form.isTop === '0'" style="margin-bottom: 0;" label="上级部门" prop="pid"> <el-form-item v-if="form.isTop === '0'" style="margin-bottom: 0;" label="上级行政区划" prop="pid">
<treeselect <treeselect
v-model="form.pid" v-model="form.pid"
:load-options="loadDepts" :load-options="loadDepts"
...@@ -111,7 +111,7 @@ export default { ...@@ -111,7 +111,7 @@ export default {
name: 'Dept', name: 'Dept',
components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker }, components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}) return CRUD({ title: '行政区划', url: 'api/dept', crudMethod: { ...crudDept }})
}, },
mixins: [presenter(), header(), form(defaultForm), crud()], mixins: [presenter(), header(), form(defaultForm), crud()],
// 设置数据字典 // 设置数据字典
...@@ -188,7 +188,7 @@ export default { ...@@ -188,7 +188,7 @@ export default {
}) })
}) })
}, },
// 获取弹窗内部门数据 // 获取弹窗内行政区划数据
loadDepts({ action, parentNode, callback }) { loadDepts({ action, parentNode, callback }) {
if (action === LOAD_CHILDREN_OPTIONS) { if (action === LOAD_CHILDREN_OPTIONS) {
crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => { crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => {
...@@ -208,7 +208,7 @@ export default { ...@@ -208,7 +208,7 @@ export default {
[CRUD.HOOK.afterValidateCU]() { [CRUD.HOOK.afterValidateCU]() {
if (this.form.pid !== null && this.form.pid === this.form.id) { if (this.form.pid !== null && this.form.pid === this.form.id) {
this.$message({ this.$message({
message: '上级部门不能为空', message: '上级行政区划不能为空',
type: 'warning' type: 'warning'
}) })
return false return false
...@@ -220,7 +220,7 @@ export default { ...@@ -220,7 +220,7 @@ export default {
}, },
// 改变状态 // 改变状态
changeEnabled(data, val) { changeEnabled(data, val) {
this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '部门, 是否继续？', '提示', { this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '行政区划, 是否继续？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
......
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