Skip to content

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

视频监控菜单样式

parent aa566217
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 148 deletions
public/datav/detail/static/css/public-detail.css
View file @ f661c303
......@@ -107,8 +107,9 @@ section .list-item span {
section .list-item .el-icon-caret-right:before {
content: "\e791";
color: #a5a4a4;
font-size: 18px;
color: #0a4c59;
font-size: 24px;
vertical-align: middle;
}
/*列表list*/
......
public/datav/detail/static/js/public-detail.js
View file @ f661c303
......@@ -44,10 +44,11 @@ let jessibucaPlayer = {};
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var gemhoUtil = {
goToPage: function(url){
// window.open(url)
location.href = url
},
// goToPage: function(url){
// // window.open(url)
// // location.href = '/datav/index.html'
// // window.open('/datav/index.html')
// },
detailPageMixin: {
data: function() {
......@@ -65,7 +66,7 @@ var gemhoUtil = {
window.onresize = () => {
location.reload()
}
if (!token) {
window.open(host + '/#/login', '_self')
return
......@@ -83,7 +84,11 @@ var gemhoUtil = {
},
methods: {
goPrePage(url) {
history.back()
// history.back()
if(url === 'emergency'){
window.open('/datav/index.html')
}
},
changeMenu(item) {
localStorage.setItem('bigScreenDetailMenu', item.name)
......
public/datav/detail/video-monitor.html
View file @ f661c303
......@@ -11,8 +11,8 @@
<link rel="stylesheet" href="../css/element-ui.css">
<!-- 引入样式文件 -->
<link rel="stylesheet" href="../css/vant@4.css" />
<!-- 引入大屏内页公共样式 -->
<link rel="stylesheet" href="./static/css/public-detail.css" />
<!-- 引入大屏内页公共样式 -->
<link rel="stylesheet" href="./static/css/public-detail.css" />
<!-- 先引入 Vue -->
<script src="../js/vue.min.js"></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
......@@ -22,12 +22,15 @@
.amap-logo {
z-index: -10;
}
.amap-copyright{
.amap-copyright {
z-index: -10;
}
.el-autocomplete-suggestion{
.el-autocomplete-suggestion {
width: 330px !important;
}
.buttons-box {
width: 100%;
height: 28px;
......@@ -57,7 +60,6 @@
position: absolute;
right: 0;
}
</style>
</head>
......@@ -85,11 +87,11 @@
<img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<div class="f20 color-theme ml10">返回</div>
</div>
<div class="flex-text ml10 mr10 mt15">
<div style="width: 490px;height: calc(100vh - 110px);">
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
<div class="mineInfo">
<p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地址：{{selectedMine.address}}</p>
......@@ -98,7 +100,8 @@
</div>
<div class="menuInfo">
<ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}">
{{item.name}}
</li>
</ul>
......@@ -106,8 +109,20 @@
</div>
<!-- 视频监控列表 -->
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section>
<div class="list-wrapper" v-show="showMenu4bianpo">
<div class="list-item" :class="{active: item.cid===currentSensorId}"
v-for="(item, index) in sensorLIst" @click="changeSensor(item,index)"><i
class="el-icon-caret-right"></i><span>{{item.name}}</span></div>
</div>
</section>
</div>
<!-- 视频监控列表 -->
<!-- <div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<div class="relative">
<img class="wp100" style="height: 52px;" src="../static/sub-title-1.png" alt="">
<div class="poa-cover">
......@@ -120,95 +135,94 @@
style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);"
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>
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>
<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="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>
<!-- video end -->
<div class="EZUIKit-video" id="video-container" style="height:100%;"></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 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 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="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="flex-text mt5">
<div class="round" style="width: 10px;height: 10px;background-color: #f9b65e;">
</div>
<div class="f14 ml10">未处置</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>
<!-- 视频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="" 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 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>
</div>
</body>
<!-- 引入echarts -->
......@@ -228,13 +242,17 @@
<script src="./static/js/public-detail.js"></script>
<script>
var map; // 地图
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// video
aiWarnCount: 0,
videoUrl: null,
......@@ -256,7 +274,7 @@
vod: true, // 点播
forceNoOffscreen: false,
// video end
// 视频监控列表
// 视频监控
videos: [
......@@ -278,74 +296,88 @@
mounted() {
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]);
this.getSensorList(() => {
});
},
methods: {
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);
changeSensor(item, index) {
this.currentSensorId = item.cid
this.chickVideo(item, index)
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/api/video-mine/mineId', {
params: {
//mineType: this.selectedMine.mineType,
mineId: this.selectedMine.id,
}
}).then(res => {
res = res.data.body;
this.info = {
appKey: res.appKey,
appSecret: res.appSecret,
};
this.sensorLIst = res.videoChannelList || [];
if (this.sensorLIst.length) {
this.currentSensorId = this.sensorLIst[0].cid
this.createVideo(res.videoChannelList[0]);
}
});
},
createVideo: function (item) {
this.getAccessToken(this.info.appKey, this.info.appSecret).then(accessToken => {
var url = this.getUrl(item);
var video = document.getElementById("video-container");
video.innerHTML = '';
this.player = new EZUIKit.EZUIKitPlayer({
autoplay: true,
id: "video-container",
accessToken: accessToken,
url: url,
template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
// 视频上方头部控件
//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
//plugin: ['talk'], // 加载插件，talk-对讲
// 视频下方底部控件
// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
// openSoundCallBack: data => console.log("开启声音回调", data),
// closeSoundCallBack: data => console.log("关闭声音回调", data),
// startSaveCallBack: data => console.log("开始录像回调", data),
// stopSaveCallBack: data => console.log("录像回调", data),
// capturePictureCallBack: data => console.log("截图成功回调", data),
// fullScreenCallBack: data => console.log("全屏回调", data),
// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
});
})
},
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;
......
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