xujingliang
/
Lin_Ye_Fang_Huo
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

问题修改

master
徐景良 2023-08-18 08:59:21 +08:00
parent c6eb889163
commit ae491fc054
5 changed files with 41 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -45,7 +45,7 @@
"vue-multiselect": "^2.1.6", "vue-multiselect": "^2.1.6",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-video-player": "^5.0.2", "vue-video-player": "^5.0.2",
"vuedraggable": "^2.23.2", "vuedraggable": "^2.24.3",
"vuex": "3.0.1", "vuex": "3.0.1",
"vuex-oidc": "^2.0.1" "vuex-oidc": "^2.0.1"
}, },

43
public/monitor/hk/index.html
View File

@ -9,24 +9,23 @@
html, body { html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
position:relative;
} }
.camera-dia{ .camera-dia{
width: 100%; width: 100vw;
height: 100%; height: 100vh;
background: rgba(0,0,0,0); background: rgba(0,0,0,0.4);
position:relative;
} }
.camera-box{ .camera-box{
width: 720px; width: 400px;
height: 360px; height: 300px;
border-radius: 5px; border-radius: 5px;
position: fixed; position: fixed;
left:50%; left: 50%;
top:50%; top: 50%;
transform:translate(-50%,-50%);
z-index: 9999; z-index: 9999;
transform: translate(-50%,-50%);
padding: 10px 0 20px;
} }
.camera-header{ .camera-header{
width: 90%; width: 90%;
@ -37,10 +36,8 @@
height: 15px; height: 15px;
} }
.camera-body{ .camera-body{
width: 90%; width: 90%;
height: 230px; height: 230px;
/* border: 1px solid #fff; */
margin-left: 5%; margin-left: 5%;
} }
.camera-footer{ .camera-footer{
@ -62,12 +59,12 @@
<body> <body>
<div class="camera-dia"> <div class="camera-dia">
<div class="camera-box"> <div class="camera-box fc-w fz-14">
<div class="camera-header "> <div class="camera-header flex jc-sb mr-1 mb-1 ai-c">
<span class="fz-16" id="carmerName"></span> <span class="fz-16" id="carmerName"></span>
<img src="../img/close.png" class="cursor" id="closeBtn" /> <img src="../../images/close.png" class="cursor" id="closeBtn" />
</div> </div>
<div class="camera-body"> <div class="camera-body pos-r">
<!--视频窗口展示--> <!--视频窗口展示-->
<div id="playWnd" class="playWnd"></div> <div id="playWnd" class="playWnd"></div>
</div> </div>
@ -93,13 +90,14 @@
// 子页面接收消息 // 子页面接收消息
window.addEventListener('message', function (e) { window.addEventListener('message', function (e) {
if (e.data) { if (e.data) {
console.log("play-data",e.data); console.log('aaa',e.data)
$("#carmerName").text(e.data[0]) $("#carmerName").text(e.data[0])
$("#carmerCard").text(e.data[1]) $("#carmerCard").text(e.data[1])
$("#carmerAppKey").text(e.data[2]) $("#carmerAppKey").text(e.data[2])
$("#carmerIp").text(e.data[3]) $("#carmerIp").text(e.data[3])
$("#carmerPort").text(e.data[4]) $("#carmerPort").text(e.data[4])
$("#appSecret").text(e.data[5]) $("#appSecret").text(e.data[5])
} }
}, false) }, false)
@ -136,7 +134,7 @@
cbIntegrationCallBack: cbIntegrationCallBack cbIntegrationCallBack: cbIntegrationCallBack
}); });
oWebControl.JS_CreateWnd("playWnd", 780, 430).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定 oWebControl.JS_CreateWnd("playWnd", 360, 230).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
init(); // 创建播放实例成功后初始化 init(); // 创建播放实例成功后初始化
}); });
}, function () { // 启动插件服务失败 }, function () { // 启动插件服务失败
@ -152,7 +150,6 @@
initPlugin(); initPlugin();
}, 3000) }, 3000)
} else { } else {
window.parent.alertInstallVideoPlayer();
$("#playWnd").html("插件启动失败，请检查插件是否安装！"); $("#playWnd").html("插件启动失败，请检查插件是否安装！");
} }
}, },
@ -224,7 +221,7 @@
buttonIDs: buttonIDs //自定义工具条按钮 buttonIDs: buttonIDs //自定义工具条按钮
}) })
}).then(function (oData) { }).then(function (oData) {
oWebControl.JS_Resize(780, 430); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 oWebControl.JS_Resize(360, 230); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
setWndCover(); setWndCover();
}); });
// var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填 // var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
@ -275,7 +272,7 @@
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
$(window).resize(function () { $(window).resize(function () {
if (oWebControl != null) { if (oWebControl != null) {
oWebControl.JS_Resize(780, 430); oWebControl.JS_Resize(360, 230);
setWndCover(); setWndCover();
} }
}); });
@ -283,7 +280,7 @@
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动 // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
$(window).scroll(function () { $(window).scroll(function () {
if (oWebControl != null) { if (oWebControl != null) {
oWebControl.JS_Resize(780, 430); oWebControl.JS_Resize(360, 230);
setWndCover(); setWndCover();
} }
}); });

22
public/monitor/hk/index1.html
View File

@ -23,12 +23,10 @@
border: 1px solid #386df5; border: 1px solid #386df5;
border-radius: 5px; border-radius: 5px;
position: fixed; position: fixed;
right: 20px; left:100%;
bottom: 130px; top:100%;
z-index: 999; transform:translate(-50%,-50%);
padding: 10px; z-index: 9999;
position:absolute;
top:500px;
} }
.camera-body{ .camera-body{
width: 100%; width: 100%;
@ -39,7 +37,6 @@
.playWnd { .playWnd {
width: 180px; /*播放容器的宽和高设定*/ width: 180px; /*播放容器的宽和高设定*/
height: 115px; height: 115px;
} }
</style> </style>
@ -246,8 +243,11 @@
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口 // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
function setWndCover() { function setWndCover() {
var iWidth = $(window).width(); var iWidth = $(window).width();
var iHeight = $(window).height(); var iHeight = $(window).height();
alert(iWidth);
var oDivRect = $("#playWnd").get(0).getBoundingClientRect(); var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0; var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
@ -255,10 +255,10 @@
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0; var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0; var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > 180) ? 180 : iCoverLeft; iCoverLeft = (iCoverLeft > 360) ? 360 : iCoverLeft;
iCoverTop = (iCoverTop > 115) ? 115 : iCoverTop; iCoverTop = (iCoverTop > 230) ? 230 : iCoverTop;
iCoverRight = (iCoverRight > 180) ? 180 : iCoverRight; iCoverRight = (iCoverRight > 360) ? 360 : iCoverRight;
iCoverBottom = (iCoverBottom > 115) ? 115 : iCoverBottom; iCoverBottom = (iCoverBottom > 230) ? 230 : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, 1001, 115); // 多1个像素点防止还原后边界缺失一个像素条 oWebControl.JS_RepairPartWindow(0, 0, 1001, 115); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) { if (iCoverLeft != 0) {

25
src/views/home/index.vue
View File

@ -92,8 +92,6 @@
<routebox :globalmap="globalmap"></routebox> <routebox :globalmap="globalmap"></routebox>
</div> </div>
<div class="monitor" v-if="videoCallShow"> <div class="monitor" v-if="videoCallShow">
<div class="close-button" @click="videoCallShow = false"> <div class="close-button" @click="videoCallShow = false">
<i class='el-icon el-icon-close'></i> <i class='el-icon el-icon-close'></i>
@ -101,22 +99,14 @@
<videocall @endVideoCall="endVideoCall"></videocall> <videocall @endVideoCall="endVideoCall"></videocall>
</div> </div>
<div class="monitor" style="width:100vw;height:100vh;position:fixed;top:0px;left:0px;" v-if="HKmonitorboxShow">
<div class="close-button" style="position:absolute;top: calc( 50% - 170px);left: calc( 50% + 200px);transform:translate(-50%,-50%);" @click="HKmonitorboxShow = false">
<div class="monitor" style="" v-if="HKmonitorboxShow">
<div class="close-button" @click="HKmonitorboxShow = false">
<i class='el-icon el-icon-close'></i> <i class='el-icon el-icon-close'></i>
</div> </div>
<HKmonitorbox v-if="HKmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></HKmonitorbox> <HKmonitorbox v-if="HKmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></HKmonitorbox>
</div> </div>
</div> </div>
</div> </div>
<!-- 火情调度 --> <!-- 火情调度 -->
<div class="situation" v-if="reportSituationShow"> <div class="situation" v-if="reportSituationShow">
<div class="situation-info"> <div class="situation-info">
@ -150,26 +140,27 @@
</div> </div>
</div> </div>
<!-- 人员 --> <!-- 人员 -->
<div class="personnel-container" v-if="personVisible"> <div class="personnel-container" v-if="personVisible">
<personnel :fireData="currentInfo" :globalmap="globalmap" @close="personVisible = false" @videoCall="videoCall"></personnel> <personnel :fireData="currentInfo" :globalmap="globalmap" @close="personVisible = false" @videoCall="videoCall"></personnel>
</div> </div>
<!-- 物资 --> <!-- 物资 -->
<div class="goods-container" v-if="goodsVisible"> <div class="goods-container" v-if="goodsVisible">
<goodsbox :endLngLat="endLngLat" :globalmap="globalmap" @close="goodsVisible = false"></goodsbox> <goodsbox :endLngLat="endLngLat" :globalmap="globalmap" @close="goodsVisible = false"></goodsbox>
</div> </div>
<!-- 水源 --> <!-- 水源 -->
<div class="goods-container" v-if="waterVisible"> <div class="goods-container" v-if="waterVisible">
<waterbox :waterCenter="waterCenter" :globalmap="globalmap" @close="waterVisible = false"></waterbox> <waterbox :waterCenter="waterCenter" :globalmap="globalmap" @close="waterVisible = false"></waterbox>
</div> </div>
<!-- 网格化管理 --> <!-- 网格化管理 -->
<div class="grid-container" v-show="appTools['griderbox'] && griderShow"> <div class="grid-container" v-show="appTools['griderbox'] && griderShow">
<gridbox ></gridbox> <gridbox ></gridbox>
</div> </div>
<!-- 右键点击设置 --> <!-- 右键点击设置 -->
<div v-if="setVisibleShow"> <div v-if="setVisibleShow">
<rightclicksetting v-if="setVisibleShow" :globalmap="globalmap" :type="rightType" :clickdata="setDatas" @close="rightType=0"></rightclicksetting> <rightclicksetting v-if="setVisibleShow" :globalmap="globalmap" :type="rightType" :clickdata="setDatas" @close="rightType=0"></rightclicksetting>
@ -178,7 +169,6 @@
<div class="socket-container" v-if="socketBoxVisible"> <div class="socket-container" v-if="socketBoxVisible">
<socketDiaBox v-if="socketBoxVisible" :globalmap="globalmap" @close="socketBoxVisible = false" @videoCall="videoCall"></socketDiaBox> <socketDiaBox v-if="socketBoxVisible" :globalmap="globalmap" @close="socketBoxVisible = false" @videoCall="videoCall"></socketDiaBox>
</div> </div>
<!-- 火情上报 --> <!-- 火情上报 -->
<!-- <div class="report" v-if="appTools['reportbox']"> <!-- <div class="report" v-if="appTools['reportbox']">
@ -197,20 +187,19 @@
</template> </template>
<script> <script>
// 请求接口获取全部路由和工具箱信息 // 请求接口获取全部路由和工具箱信息
import { getModules } from '@/api/modules.js'; import { getModules } from '@/api/modules.js';
import AppConfigInfo from '../../../public/config/app.json' import AppConfigInfo from '../../../public/config/app.json'
import $ from 'jquery' import $ from 'jquery'
import Map from '@/components/mars3d/Map.vue' import Map from '@/components/mars3d/Map.vue'
// import widgetdiv from '@/components/Widget/index.vue' import widgetdiv from '@/components/Widget/index.vue'
import Uavbox from './widget/uavbox.vue' import Uavbox from './widget/uavbox.vue'
import toolbox from './widget/toolbox.vue' import toolbox from './widget/toolbox.vue'
import monitorbox from './widget/monitorbox.vue' import monitorbox from './widget/monitorbox.vue'
import routebox from './widget/routebox.vue' import routebox from './widget/routebox.vue'
import waterbox from './widget/waterbox.vue'; import waterbox from './widget/waterbox.vue';
// import reportbox from './widget/reportbox.vue'
import reportlist from './widget/reportlist.vue'; import reportlist from './widget/reportlist.vue';
import goodsbox from './widget/goodsbox.vue'; import goodsbox from './widget/goodsbox.vue';
import trendsbox from './widget/trendsbox.vue'; import trendsbox from './widget/trendsbox.vue';

10
src/views/home/widget/HKmonitorbox.vue
View File

@ -52,16 +52,10 @@ import axios from "axios";
<style scoped> <style scoped>
.box{ .box{
width: 340px; width: 100%;
height: 200px; height: 100%;
overflow: hidden; overflow: hidden;
background-image: url(/img/goods-pingyixian.png);
background-size: 100% 100%;
text-align:left;
z-index: 99; z-index: 99;
position:absolute;
top:500px;
left:500px;
} }
.box-title{ .box-title{
width:100%; width:100%;