Skip to content

Z
ZiBoYingJI
Commit 60093741 authored by forevertyler's avatar forevertyler
Browse files
Options

fix:分区页面

parents 3d69d1d0 de4c405f
Show whitespace changes
Inline Side-by-side
Showing with 4508 additions and 3 deletions
public/datav/detail/people-monitor.html 0 → 100644
View file @ 60093741
<!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" />
<!-- 先引入 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>
.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>
</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>
<!-- 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 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="history.back()">
<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="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">
<p>矿山名称： 淄博红圈石料厂</p>
<p>矿山地质：谁看得见风离开世界的副卡时刻记得发</p>
<p>联系人：开始对</p>
<p>联系方式：xxx</p>
</div>
<div class="menuInfo">
<ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li>
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li>
<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>
</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"><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>
</section>
</div>
</div>
<!-- 右侧容器 -->
<div>
<div class="flex-1 ml15 flex-text ovh" style="height: 300px; display:flex; align-items: start;">
<!-- 视频监控 -->
<div class="flex-1">
<!-- 井下24小时人数变化趋势 -->
<div>
<div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">井下24小时人数变化趋势</div>
</div>
</div>
<div class="flex-text" style="height: 0px;">
<div class="flex-text">
<div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;">
</div>
<div class="color-theme ml10 f14">井下人数</div>
</div>
<div class="flex-text ml20">
<div class="round" style="width: 10px;height: 10px;background-color: #fca83b;">
</div>
<div class="color-theme ml10 f14">入井</div>
</div>
<div class="flex-text ml20 mr15">
<div class="round" style="width: 10px;height: 10px;background-color: #0a9fca;">
</div>
<div class="color-theme ml10 f14">出井</div>
</div>
</div>
<div class="mt5" id="line" style="width: 100%;height:213px;"></div>
</div>
</div>
<!-- 区域类型人数分布图 -->
<div class="flex-1">
<div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">区域类型人数分布图</div>
</div>
</div>
<div class="relative" style="height: 210px;">
<img class="wp100 absolute" style="height: 140px;left: 0;bottom: 0;"
src="../static/content-box-bg.png" alt="">
<div class="poa-cover" id="bar"></div>
</div>
</div>
<!-- 报警统计 -->
<div class="flex-1 ml15">
<div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">报警统计</div>
</div>
</div>
<div class="relative" style="height: 210px;">
<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 class="flex-1 ml15 flex-text ovh" style="height: 300px; display:flex; align-items: start;">
<!-- 视频监控 -->
<div class="flex-1 ml15 ovh">
<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;">
<div class="text-center" style="width: 200px;">区域名称</div>
<div class="text-center" style="width: 114px;">定员(人)</div>
<div class="text-center" style="width: 114px;">当前(人)</div>
<div class="text-center" style="width: 140px;">状态</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 class="text-center" style="width: 300px;">{{ item.warnDatetime }}</div>
</div>
</div>
</div>
<!-- 右侧表格 -->
<div class="flex-1 ml15 ovh">
<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;">
<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: 140px;">部门</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 class="text-center" style="width: 300px;">{{ item.warnDatetime }}</div>
<div class="flex-text" style="width: 140px;"></div>
</div>
</div>
</div>
</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>
<!-- 引入高德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 -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<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/js/config.js"></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; // 地图
new Vue({
el: '#app',
data() {
return {
showMenu4bianpo: true,
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
createTime: '',
bigScreenDetailMenu: '',
// video
aiWarnCount: 0,
videoUrl: null,
error: null,
hasAudio: false,
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,
// 视频监控列表
// 视频监控
videos: [
{ id: 1, video: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4', name: '青岛豪杰矿业有限公司平度市新' },
],
TabCur: 0,
// 视频ai报警 列表
aiList: [],
imageMaskUrl: ''
}
},
watch: {
videoUrl(newData, oldData) {
this.play(newData)
},
immediate: true
},
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();
// 视频列表
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: {
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({
xAxis: {
data: ["01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时", "11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时", "24时"],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: {
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { right: 15, top: 10, 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: [
{
name: "人数",
type: "line",
smooth: true,
data: [180, 210, 150, 280, 235, 500, 390, 410, 150, 180, 210, 150, 280, 235, 500, 390, 410, 150, 180, 210, 150, 280, 235, 500],
itemStyle: {
color: '#6dd1b9'
}
},
{
name: "人数",
type: "line",
smooth: true,
data: [60, 90, 80, 100, 60, 65, 45, 50, 48, 60, 90, 80, 100, 60, 65, 45, 50, 48, 60, 90, 80, 100, 60, 65],
itemStyle: {
color: '#0a9fca'
}
},
{
name: "人数",
type: "line",
smooth: true,
data: [55, 48, 40, 60, 50, 55, 58, 63, 50, 55, 48, 40, 60, 50, 55, 58, 63, 50, 55, 48, 40, 60, 50, 55],
itemStyle: {
color: '#fca83b'
}
}
]
});
// 基于准备好的dom，初始化echarts实例
var barChart = echarts.init(document.getElementById("bar"));
barChart.clear() // 定时刷新 实际不刷新 演示用
// 绘制图表
barChart.setOption({
xAxis: {
data: ["重点区域", "井口区域", "其他区域", "限制区域"],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: {
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { bottom: 35, top: 15, left: 35, right: 15 },
series: [
{
name: "人数",
type: "bar",
data: [60, 32, 46, 13],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
offset: 0,
color: '#0ee3f9'
}, {
offset: 1,
color: '#09f1f6'
}]),
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
// barBorderRadius: [100, 100, 0, 0]
}
},
barWidth: '25%'
}
]
});
// 圆环图
// 基于准备好的dom，初始化echarts实例
var pieChart = echarts.init(document.getElementById("pie"));
pieChart.clear() // 定时刷新 实际不刷新 演示用
// 绘制图表
pieChart.setOption({
color: ['#6dc8e1', '#3f95c2'],
graphic11: [
{
type: 'text',
left: 'center',
top: '52%',
style: {
text: '500', // 中间总数
textAlign: 'center',
fill: '#37d6da',
fontSize: 24,
}
},
{
type: 'text',
left: 'center',
top: '40%',
style: {
text: '报警总数',
textAlign: 'center',
fill: '#ffffff',
fontSize: 13,
}
}
],
series: [
{
type: "pie",
startAngle: 0,
// center: ['40%', '50%'],
data: [
{ value: 300, name: '已处置：300', label: { color: '#ffffff' } },
{ value: 200, name: '未处置：200', label: { color: '#ffffff' } }
],
radius: ['30%', '70%'],
itemStyle: {
normal: {
borderWidth: 2,
borderColor: 'rgba(0,0,0,.5)'
}
}
}
]
});
loading && loading.close();
this.isReady = true
}, 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>
</html>
\ No newline at end of file
public/datav/detail/shape-monitor.html 0 → 100644
View file @ 60093741
<!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" />
<!-- 先引入 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>
.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;
}
</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>
<!-- 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 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="history.back()">
<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">
<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="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">
<p>矿山名称： 淄博红圈石料厂</p>
<p>矿山地质：谁看得见风离开世界的副卡时刻记得发</p>
<p>联系人：开始对</p>
<p>联系方式：xxx</p>
</div>
<div class="menuInfo">
<ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li>
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li>
<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>
</ul>
</div>
</div>
<!-- 视频监控列表 -->
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section>
<div class="header" @click="menuChange('showMenu4bianpo')">
<i class="el-icon-caret-bottom" v-show="showMenu4bianpo"></i>
<i class="el-icon-caret-right" v-show="!showMenu4bianpo"></i>
<span>边坡监测</span>
</div>
<div class="list-wrapper" v-show="showMenu4bianpo">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
</div>
</section>
<section>
<div class="header" @click="menuChange('showMenu4weikuangku')">
<i class="el-icon-caret-bottom" v-show="showMenu4weikuangku"></i>
<i class="el-icon-caret-right" v-show="!showMenu4weikuangku"></i>
<span>尾矿库监测</span>
</div>
<div class="list-wrapper" v-show="showMenu4weikuangku">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
</div>
</section>
<section>
<div class="header" @click="menuChange('showMenu4chenjiang')">
<i class="el-icon-caret-bottom" v-show="showMenu4chenjiang"></i>
<i class="el-icon-caret-right" v-show="!showMenu4chenjiang"></i>
<span>沉降监测</span>
</div>
<div class="list-wrapper" v-show="showMenu4chenjiang">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
</div>
</section>
<section>
<div class="header" @click="menuChange('showMenu4diya')">
<i class="el-icon-caret-bottom" v-show="showMenu4diya"></i>
<i class="el-icon-caret-right" v-show="!showMenu4diya"></i>
<span>边坡监测</span>
</div>
<div class="list-wrapper" v-show="showMenu4diya">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
</div>
</section>
</div>
</div>
<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;">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker
style="width: 290px !important;"
v-model="createTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>
</div>
<div class="flex-text" style="height: 70px;">
<div class="flex-text">
<div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;"></div>
<div class="color-theme ml10 f14">井下人数</div>
</div>
<div class="flex-text ml20">
<div class="round" style="width: 10px;height: 10px;background-color: #fca83b;"></div>
<div class="color-theme ml10 f14">入井</div>
</div>
<div class="flex-text ml20 mr15">
<div class="round" style="width: 10px;height: 10px;background-color: #0a9fca;"></div>
<div class="color-theme ml10 f14">出井</div>
</div>
</div>
<div class="mt5" id="line" style="width: 100%;height:213px;"></div>
</div>
<!-- video end -->
</div>
<div class="flex-text wp100">
<!-- 视频ai报警 列表 -->
<div class="flex-1 ml15 ovh">
<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;">
<div class="flex-1">
<div class="ml25">视频名称</div>
</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 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>
<!-- 图片 mask -->
<div class="fixed wp100 hv100 flex-text maxIndex" style="left: 0;top: 0;background-color: rgba(0,0,0,1);"
v-if="imageMaskUrl">
<div class="" style="width: 1200px;max-height: 100vh;overflow-y: auto;">
<img class="wp100" :src="imageMaskUrl" alt="">
</div>
<img class="absolute pointer" style="width: 35px;height: 35px;top: 30px;right: 30px;"
src="../static/close-icon.png" alt="" @click="imageMaskUrl = ''">
</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 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;">
<a class="color-white" :href="notice.annexLink" target="_blank">{{ notice.annexName
}}</a>
</div>
</div>
</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>
<!-- 引入高德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 -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<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/js/config.js"></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; // 地图
new Vue({
el: '#app',
data() {
return {
showMenu4bianpo: true,
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
createTime:'',
bigScreenDetailMenu: '',
// video
aiWarnCount: 0,
videoUrl: null,
error: null,
hasAudio: false,
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,
// 视频监控列表
// 视频监控
videos: [
{ id: 1, video: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4', name: '青岛豪杰矿业有限公司平度市新' },
],
TabCur: 0,
// 视频ai报警 列表
aiList: [],
imageMaskUrl: ''
}
},
watch: {
videoUrl(newData, oldData) {
this.play(newData)
},
immediate: true
},
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();
// 视频列表
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: {
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({
xAxis: {
data: ["01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时", "11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时", "24时"],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: {
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { right: 15, top: 10, 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: [
{
name: "人数",
type: "line",
smooth: true,
data: [180, 210, 150, 280, 235, 500, 390, 410, 150, 180, 210, 150, 280, 235, 500, 390, 410, 150, 180, 210, 150, 280, 235, 500],
itemStyle: {
color: '#6dd1b9'
}
},
{
name: "人数",
type: "line",
smooth: true,
data: [60, 90, 80, 100, 60, 65, 45, 50, 48, 60, 90, 80, 100, 60, 65, 45, 50, 48, 60, 90, 80, 100, 60, 65],
itemStyle: {
color: '#0a9fca'
}
},
{
name: "人数",
type: "line",
smooth: true,
data: [55, 48, 40, 60, 50, 55, 58, 63, 50, 55, 48, 40, 60, 50, 55, 58, 63, 50, 55, 48, 40, 60, 50, 55],
itemStyle: {
color: '#fca83b'
}
}
]
});
loading && loading.close();
this.isReady = true
}, 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>
</html>
\ No newline at end of file
public/datav/detail/video-monitor.html 0 → 100644
View file @ 60093741
<!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" />
<!-- 先引入 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>
.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;
}
</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>
<!-- 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 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="history.back()">
<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">
<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="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">
<p>矿山名称： 淄博红圈石料厂</p>
<p>矿山地质：谁看得见风离开世界的副卡时刻记得发</p>
<p>联系人：开始对</p>
<p>联系方式：xxx</p>
</div>
<div class="menuInfo">
<ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li>
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li>
<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>
</ul>
</div>
</div>
<!-- 视频监控列表 -->
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1.png" alt="">
<div class="poa-cover">
<div class="ml40 f20 color-theme" style="margin-top: -4px;">视频监控列表</div>
</div>
</div>
<div class="absolute wp100"
style="overflow-y: scroll;height: calc(100% - 52px);background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
<div class="h44 flex-text color-theme f17 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);"
v-for="(item,index) in videos" :key="" index @click="chickVideo(item,index)">
<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=""
v-if="index == TabCur">
<div class="flex-1 ml25 mr25 ellipsis">{{ item.name }}</div>
<div class="flex-text" style="width: 14px;">
</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 wp100 relative" style="margin-bottom: 25px;">
<!-- video -->
<div ref="container" @dblclick="fullscreenSwich"
style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
<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 class="flex-text wp100">
<!-- 视频ai报警 -->
<div class="" style="width: 420px;">
<div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1-s.png" alt="">
<div class="poa-cover">
<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>
<!-- 视频ai报警 列表 -->
<div class="flex-1 ml15 ovh">
<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;">
<div class="flex-1">
<div class="ml25">视频名称</div>
</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 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>
<!-- 图片 mask -->
<div class="fixed wp100 hv100 flex-text maxIndex" style="left: 0;top: 0;background-color: rgba(0,0,0,1);"
v-if="imageMaskUrl">
<div class="" style="width: 1200px;max-height: 100vh;overflow-y: auto;">
<img class="wp100" :src="imageMaskUrl" alt="">
</div>
<img class="absolute pointer" style="width: 35px;height: 35px;top: 30px;right: 30px;"
src="../static/close-icon.png" alt="" @click="imageMaskUrl = ''">
</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 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;">
<a class="color-white" :href="notice.annexLink" target="_blank">{{ notice.annexName
}}</a>
</div>
</div>
</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>
<!-- 引入高德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 -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<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/js/config.js"></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; // 地图
new Vue({
el: '#app',
data() {
return {
bigScreenDetailMenu: '',
// video
aiWarnCount: 0,
videoUrl: null,
error: null,
hasAudio: false,
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,
// 视频监控列表
// 视频监控
videos: [
{ id: 1, video: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4', name: '青岛豪杰矿业有限公司平度市新' },
],
TabCur: 0,
// 视频ai报警 列表
aiList: [],
imageMaskUrl: ''
}
},
watch: {
videoUrl(newData, oldData) {
this.play(newData)
},
immediate: true
},
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();
// 视频列表
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: {
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)
},
fullscreenSwich: function () {
let isFull = this.isFullscreen()
jessibucaPlayer[this._uid].setFullscreen(!isFull)
this.fullscreen = !isFull;
},
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')
},
async getData(e) {
var loading
if (!e) {
loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
}
// AI报警列表
this.aiWarnCount = 0
Axiosx.get(host + '/api/datav/video-ai', {
params: {
page: 1,
count: 100,
mineId: this.selectedMine.id,
mineType: this.selectedMine.mineType
}
}).then(res => {
if (res && res.data) {
this.aiList = res.data.results
this.aiWarnCount = res.data.total
}
});
// 模拟请求
setTimeout(() => {
setTimeout(() => this.getData('refesh'), 15000);
// 圆环图
// 基于准备好的dom，初始化echarts实例
var pieChart = echarts.init(document.getElementById("pie"));
pieChart.clear() // 定时刷新 实际不刷新 演示用
// 绘制图表
pieChart.setOption({
color: ['#38d6d9', '#ebb963'],
graphic: [
{
type: 'text',
left: 'center',
top: '52%',
style: {
text: this.aiWarnCount + '', // 中间总数
textAlign: 'center',
fill: '#37d6da',
fontSize: 24,
}
},
{
type: 'text',
left: 'center',
top: '40%',
style: {
text: '报警总数',
textAlign: 'center',
fill: '#ffffff',
fontSize: 13,
}
}
],
series: [
{
type: "pie",
startAngle: 0,
// center: ['40%', '50%'],
data: [
{ value: this.aiWarnCount, name: '报警数量：' + this.aiWarnCount, label: { color: '#ffffff' } },
// { value: 200, name: '未处置：200', label: { color: '#ffffff' } }
],
radius: ['50%', '70%'],
itemStyle: {
normal: {
borderWidth: 2,
borderColor: 'rgba(0,0,0,.5)'
}
}
}
]
});
loading && loading.close();
this.isReady = true
}, 1000);
}
},
destroyed() {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy();
}
this.playing = false;
this.loaded = false;
this.performance = "";
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/water-monitor.html 0 → 100644
View file @ 60093741
<!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" />
<!-- 先引入 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>
.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;
}
</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>
<!-- 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 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="history.back()">
<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">
<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="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">
<p>矿山名称： 淄博红圈石料厂</p>
<p>矿山地质：谁看得见风离开世界的副卡时刻记得发</p>
<p>联系人：开始对</p>
<p>联系方式：xxx</p>
</div>
<div class="menuInfo">
<ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li>
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li>
<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>
</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"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
</div>
</section>
</div>
</div>
<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;">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 290px !important;" v-model="createTime" type="datetimerange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="flex-text" style="height: 0px;">
<div class="flex-text">
<div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;"></div>
<div class="color-theme ml10 f14">井下人数</div>
</div>
<div class="flex-text ml20">
<div class="round" style="width: 10px;height: 10px;background-color: #fca83b;"></div>
<div class="color-theme ml10 f14">入井</div>
</div>
<div class="flex-text ml20 mr15">
<div class="round" style="width: 10px;height: 10px;background-color: #0a9fca;"></div>
<div class="color-theme ml10 f14">出井</div>
</div>
</div>
<div class="mt5" id="line" style="width: 100%;height:313px;"></div>
</div>
<!-- video end -->
</div>
<div class="flex-text wp100">
<!-- 视频ai报警 列表 -->
<div class="flex-1 ml15 ovh">
<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;">
<div class="flex-1">
<div class="ml25">视频名称</div>
</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 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>
<!-- 图片 mask -->
<div class="fixed wp100 hv100 flex-text maxIndex" style="left: 0;top: 0;background-color: rgba(0,0,0,1);"
v-if="imageMaskUrl">
<div class="" style="width: 1200px;max-height: 100vh;overflow-y: auto;">
<img class="wp100" :src="imageMaskUrl" alt="">
</div>
<img class="absolute pointer" style="width: 35px;height: 35px;top: 30px;right: 30px;"
src="../static/close-icon.png" alt="" @click="imageMaskUrl = ''">
</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 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;">
<a class="color-white" :href="notice.annexLink" target="_blank">{{ notice.annexName
}}</a>
</div>
</div>
</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>
<!-- 引入高德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 -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<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/js/config.js"></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; // 地图
new Vue({
el: '#app',
data() {
return {
showMenu4bianpo: true,
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
createTime: '',
bigScreenDetailMenu: '',
// video
aiWarnCount: 0,
videoUrl: null,
error: null,
hasAudio: false,
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,
// 视频监控列表
// 视频监控
videos: [
{ id: 1, video: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4', name: '青岛豪杰矿业有限公司平度市新' },
],
TabCur: 0,
// 视频ai报警 列表
aiList: [],
imageMaskUrl: ''
}
},
watch: {
videoUrl(newData, oldData) {
this.play(newData)
},
immediate: true
},
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();
// 视频列表
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: {
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);
}
},
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>
</html>
\ No newline at end of file
public/datav/detail/wind-monitor.html 0 → 100644
View file @ 60093741
<!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" />
<!-- 先引入 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>
.el-autocomplete-suggestion {
width: 330px !important;
}
.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-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange{
background: transparent;
}
.el-range-editor.el-input__inner {
border: 1px solid #7c7e7f !important;
}
.el-date-editor .el-range-separator{
color: #bababa;
margin-top: 6px;
}
.el-input--small .el-input__inner {
color: #bababa !important;
font-size: 16px !important;
border: 1px solid #efdada !important;
text-align: center;
}
.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;
}
/*列表list*/
.tableList .bg-list-item{
background: transparent;
}
</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="history.back()">
<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>矿山名称： 淄博红圈石料厂</p>
<p>矿山地质：谁看得见风离开世界的副卡时刻记得发</p>
<p>联系人：开始对</p>
<p>联系方式：xxx</p>
</div>
<div class="menuInfo">
<ul>
<li @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li>
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li>
<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>
</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"><i class="el-icon-caret-right"></i><span class="ml10">xxxxx监测点</span></div>
<div class="list-item"><i class="el-icon-caret-right"></i><span class="ml10">xxxxx监测点</span></div>
<div class="list-item"><i class="el-icon-caret-right"></i><span class="ml10">xxxxx监测点</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="datetimerange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="flex-text" style="height: 0px;">
<div class="flex-text">
<div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;"></div>
<div class="color-theme ml10 f14">井下人数</div>
</div>
<div class="flex-text ml20">
<div class="round" style="width: 10px;height: 10px;background-color: #fca83b;"></div>
<div class="color-theme ml10 f14">入井</div>
</div>
<div class="flex-text ml20 mr15">
<div class="round" style="width: 10px;height: 10px;background-color: #0a9fca;"></div>
<div class="color-theme ml10 f14">出井</div>
</div>
</div>
<div class="mt5" id="line" style="width: 100%;height:400px;"></div>
</div>
<!-- video end -->
</div>
<div class="flex-text wp100">
<!-- 视频ai报警 列表 -->
<div class="flex-1 ml15 ovh tableList">
<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;">
<div class="text-center" style="width: 50%;">监测时间</div>
<div class="text-center" style="width: 50%;">风速（m/s）</div>
</div>
<div class="" style="height: 300px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh bg-list-item" :class="'bg-list-' + (index % 2)"
:style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in aiList"
:key="index">
<div class="text-center" style="width: 50%;">{{ item.warnDatetime }}</div>
<div class="text-center" style="width: 50%;">{{ item.warnDatetime }}</div>
</div>
</div>
</div>
</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>
<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; // 地图
new Vue({
el: '#app',
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
// 菜单折叠显隐 - 结束
createTime: '',
bigScreenDetailMenu: '',
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 表格数据
aiList: []
}
},
mounted() {
for(var i=0; i<10; i++){
this.aiList.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.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: {
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({
xAxis: {
data: ["01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时", "11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时", "24时"],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: {
name: 'Precipitation',
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
yAxis22: [
{
type: 'value',
name: 'Precipitation',
interval: 40,
splitLine: { show: false },
axisLabel: {
textStyle: { color: '#a3e4f5' }
},
nameTextStyle: {
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色
fontSize: 16
},
},
],
grid: { right: 15, top: 10, 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: [
{
name: "人数",
type: "line",
smooth: true,
data: [180, 210, 150, 280, 235, 500, 390, 410, 150, 180, 210, 150, 280, 235, 500, 390, 410, 150, 180, 210, 150, 280, 235, 500],
itemStyle: {
color: '#6dd1b9'
}
},
{
name: "人数",
type: "line",
smooth: true,
data: [60, 90, 80, 100, 60, 65, 45, 50, 48, 60, 90, 80, 100, 60, 65, 45, 50, 48, 60, 90, 80, 100, 60, 65],
itemStyle: {
color: '#0a9fca'
}
},
{
name: "人数",
type: "line",
smooth: true,
data: [55, 48, 40, 60, 50, 55, 58, 63, 50, 55, 48, 40, 60, 50, 55, 58, 63, 50, 55, 48, 40, 60, 50, 55],
itemStyle: {
color: '#fca83b'
}
}
]
});
loading && loading.close();
this.isReady = true
}, 800);
}
},
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
})
},
create() {
let options = {};
console.log("hasAudio " + this.hasAudio)
},
})
</script>
</html>
\ No newline at end of file
public/datav/index.html
View file @ 60093741
...@@ -900,9 +900,9 @@ ...@@ -900,9 +900,9 @@
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.226' ? '192.168.3.37' : '192.168.13.200') + ':8013';
// 小黄 // 小黄
//const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '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';
const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host; const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.38:8057' : location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN'); const token = Cookies.get('ELADMIN-TOEKN');
axios = axios.create({ axios = axios.create({
......
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