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