zc

src/App.vue

@@ -121,7 +121,15 @@
         display: none;
     }
     .main{
+        width: 1920px!important;
+        height: 1080px!important;
         background-image: url("./assets/ZDimages/yjdpbg@1x.png")!important;
-        background-size: 100% 100%!important;
+        background-size: 1920px 1080px!important;
+        overflow: hidden;
+    }
+    .main_t{
+        background: rgba(0,0,0,0)!important;
+        margin-top: 20px!important;
+        overflow: hidden!important;
     }
 </style>

src/components/header.vue

@@ -85,6 +85,7 @@
   }
   .headerComponent{
     position: absolute;
+    width:1920px;
     top:0;
     left:0;
     z-index: 51;
@@ -112,7 +113,7 @@
         margin:28px 0 0 8px;
       }
       .time-p{
-        margin-left:120px;
+        margin-left:600px;
         height: 50px;
         font-size: 26px;
         color: #FFFFFF;
@@ -126,10 +127,10 @@
       }
       .header_r {
         cursor: pointer;
-        margin-left: 264px;
+        margin-left: 50px;
         width: 82px;
         height: 32px;
-        margin-top: 18px;
+        margin-top: 10px;
       }
     }
   }

src/components/newSubVideoComponent.vue

@@ -5,7 +5,8 @@
       <div class="sub-video-big-box" v-for="(item,index) in dataList" :key="index">
         <div class="sub-video-box">
           <p class="sub-name-p">{{item.roomNum?item.subName+'('+item.roomNum+')':item.subName}}</p>
-          <H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"></H5PlayerVideo>
+          <mpegts-video :videoProps="item.videoData" ref="mpegtsRef" ></mpegts-video>
+          <!--<H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"></H5PlayerVideo>-->
         </div>
         <div class="sensor-max-box">
           <div class="sensor-box" v-for="(minItem,minIndex) in item.sensorList" :key="minIndex">
@@ -21,12 +22,13 @@
         </div>
       </div>
     </div>
-    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+    <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
   </div>
 </template>
 <script>
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
   import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   import {
     laboratorySubRelInfoSelectInfoAndSensor,
     iotCameraFindByCondition
@@ -36,7 +38,8 @@
     name: 'newSubVideoComponent',
     components: {
       H5PlayerVideo,
-      fullH5PlayerVideo
+      fullH5PlayerVideo,
+      mpegtsVideo,
     },
     data() {
       return {
@@ -63,6 +66,19 @@
       this.timerPlay()
     },
     methods: {
+      //父类方法-用于全屏窗口切换
+      fullScreenWindowSwitch(data){
+        let self = this;
+        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+            if(data.type){
+              self.$refs.mpegtsRef[i].stopVideo();
+            }else{
+              self.$refs.mpegtsRef[i].playVideo();
+            }
+          }
+        }
+      },
       //初始化
       initialize() {
         laboratorySubRelInfoSelectInfoAndSensor(this.queryParams).then((res) => {
@@ -256,7 +272,7 @@
             .img-box {
               width: 99px;
               height: 85px;
-              margin: 10px 40px 0 19px;
+              margin: 10px 20px 0 19px;
               background: url("../assets/ZDimages/emergencyManagement/icon_yjsj_zc.png") no-repeat;
               background-size: 100%;
               .svg-img {

src/components/planAlarm/planAlarm.vue

@@ -18,8 +18,9 @@
                 <div v-if="!lookImgType" class="planAlarm-big-box">
                     <div class="planAlarm-left-box">
                         <div class="video-box video-box-scrollbar">
-                            <H5PlayerVideo style="margin:0 0 10px 0;"
-                                           v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
+                            <mpegts-video :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+                            <!--<H5PlayerVideo style="margin:0 0 10px 0;"-->
+                                           <!--v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>-->
                             <p class="null-video-p" v-if="!videoList[0]">实验室未配置摄像头</p>
                         </div>
                         <div class="bugle-box">
@@ -135,7 +136,7 @@
                 </div>
             </div>
         </div>
-      <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+      <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
     </div>
 </template>
 <script>
@@ -211,6 +212,19 @@
         mounted() {
         },
         methods: {
+          //父类方法-用于全屏窗口切换
+          fullScreenWindowSwitch(data){
+            let self = this;
+            for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+              if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+                if(data.type){
+                  self.$refs.mpegtsRef[i].stopVideo();
+                }else{
+                  self.$refs.mpegtsRef[i].playVideo();
+                }
+              }
+            }
+          },
             //查询当前正在发生的预案
             initialize(item) {
                 clearInterval(this.timer);

src/views/courtyardManage/courtyardHome.vue

@@ -132,7 +132,6 @@
   } from '@/api/index'
   import Swiper from 'swiper'
   import mqtt from 'mqtt/dist/mqtt'
-  import { getToken, removeToken } from '@/utils/auth'
   import { Encrypt, Decrypt } from '@/utils/secret'
   import headerComponent from '../headerComponent.vue'
   import planAlarm from '@/components/planAlarm/planAlarm.vue'
@@ -294,22 +293,6 @@
       openRiskPlanUrl(item) {
         this.$refs['planAlarm'].initialize(item)
       },
-      //跳转后台管理
-      openBackManageUrl() {
-        this.$confirm('确定注销并退出系统吗？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          removeToken()
-          if (localStorage.getItem('entranceJumpType') == 'PC') {
-            window.location.href = process.env.VUE_APP_OUT_URL
-          } else {
-            window.location.href = '#/'
-          }
-        }).catch(() => {
-        })
-      },
       //预案执行统计
       laboratoryBigViewCollegeEventStatistics() {
         let self = this
@@ -548,7 +531,7 @@
     width: 1920px;
     height: 1080px;
     background-image: url("../../assets/ZDimages/yjdpbg@1x.png");
-    background-size: 100% 100%;
+    background-size: 1920px 1080px;
     position: relative;
     left: 0;
     top: 0;

src/views/emergencyManagement/index.vue

@@ -94,18 +94,20 @@
     box-sizing: border-box;
   }
   .emergencyManagement-index{
-    margin-top: 120px;
     width: 1920px;
     height: 1080px;
+    background-image: url("../../assets/ZDimages/yjdpbg@1x.png")!important;
+    background-size: 1920px 1080px!important;
     padding:0 30px;
     display: flex;
     flex-direction: column;
     .main_t {
-      background: #062338;
+      /*background: #062338;*/
       width: 1852px;
       position: absolute;
       left: 34px;
       top: 86px;
+      margin-top:40px!important;
       .main_t_t {
         margin: 0 0 0 18px;
         > i {
@@ -124,11 +126,14 @@
       display: flex;
       height: 910px;
       z-index:101;
+      margin-top:120px;
       .left-max-big-box{
         width:330px;
-        height:940px;
-        margin-right:20px;
-        background-color: #052F48;
+        height:900px;
+        /*margin-right:20px;*/
+        margin-right:-20px;
+        margin-top:40px;
+        /*background-color: #052F48;*/
         .left-dept-title-p{
           color:#24D1F9;
           font-size:22px;
@@ -142,10 +147,10 @@
           width:1530px;
           height:630px;
           overflow: hidden;
-          background-color: #052F48;
+          /*background-color: #052F48;*/
         }
         .right-bottom-big-box{
-          margin-top:20px;
+          margin-top:0;
           width:1530px;
           height:290px;
           overflow: hidden;

src/views/emergencyManagement/pageComponent/deptListComponent.vue

@@ -325,7 +325,7 @@
 <style scoped lang="scss">
   .deptListComponent{
     width:300px;
-    height:900px;
+    height:870px;
     overflow-y:hidden;
     display: flex;
     flex-direction: column;

src/views/headerComponent.vue

@@ -17,6 +17,7 @@
         <span>{{timeData2}}</span>
         <span>{{timeData3}}</span>
       </p>
+      <img class="out-img" @click="openBackManageUrl" src="@/assets/ZDimages/icon_gb@1x.png">
     </div>
     <div class="bottom-max-box">
       <div :class="index == checkDept?'checkP':'noCheckP'" v-for="(item,index) in deptList" :key="index">
@@ -26,6 +27,7 @@
   </div>
 </template>
 <script>
+  import { removeToken } from '@/utils/auth'
   export default {
     name: 'headerComponent',
     data () {
@@ -52,6 +54,22 @@
       this.timer = setInterval(this.updateTime, 1000)
     },
     methods:{
+      //跳转后台管理
+      openBackManageUrl() {
+        this.$confirm('确定注销并退出系统吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          removeToken()
+          if (localStorage.getItem('entranceJumpType') == 'PC') {
+            window.location.href = process.env.VUE_APP_OUT_URL
+          } else {
+            window.location.href = '#/'
+          }
+        }).catch(() => {
+        })
+      },
       updateTime() {
         const now = new Date()
         // 格式化时间 HH:MM:SS
@@ -129,7 +147,7 @@
         height: 50px;
         display: flex;
         cursor: pointer;
-        margin:0 97px 0 209px;
+        margin:0 97px 0 159px;
         img{
           width:26px;
           height:20px;
@@ -165,7 +183,7 @@
         }
       }
       .time-p{
-        margin-left:120px;
+        margin-left:63px;
         height: 50px;
         font-size: 26px;
         color: #FFFFFF;
@@ -177,6 +195,12 @@
           margin:0 20px 0 25px;
         }
       }
+      .out-img{
+        width:30px;
+        height:30px;
+        margin:11px 0 0 80px;
+        cursor: pointer;
+      }
     }
     .bottom-max-box{
       margin-left: 800px;
@@ -206,6 +230,16 @@
       .checkP{
         background-image: url("../assets/ZDimages/bg_bt_xzhzsj@1x.png");
         background-size: 100% 100%;
+        p{
+          font-style: normal;
+          text-transform: none;
+          background: -webkit-linear-gradient(0deg, #FFFFFF, #00F7FF); /* Chrome, Safari */
+          background: linear-gradient(0deg, #FFFFFF, #00F7FF); /* 标准语法 */
+          -webkit-background-clip: text; /* Chrome, Safari */
+          background-clip: text;
+          -webkit-text-fill-color: transparent; /* Chrome, Safari */
+          color: transparent; /* 其他浏览器 */
+        }
       }
       .noCheckP{
         background-image: url("../assets/ZDimages/bg_bt_hzsj@1x.png");

src/views/videoSurveillance/index.vue

@@ -62,11 +62,13 @@
   .videoSurveillance-index{
     width: 1920px;
     height: 1080px;
+    background-image: url("../../assets/ZDimages/yjdpbg@1x.png")!important;
+    background-size: 1920px 1080px!important;
     padding:0 60px;
     display: flex;
     flex-direction: column;
     .main_t {
-      background: #062338;
+      /*background: #062338;*/
       width: 1852px;
       position: absolute;
       left: 34px;
@@ -93,7 +95,7 @@
       margin-top: 138px;
       /*flex:1;*/
       display: flex;
-      background-color: #052F48;
+      /*background-color: #052F48;*/
       height: 910px;
       .left-max-big-box{
         width:430px;

src/views/videoSurveillance/pageComponent/videoComponent.vue

@@ -13,8 +13,9 @@
       <!--<p class="name-p" style="margin-left:10px;">人</p>-->
     </div>
     <div class="video-max-big-box">
-      <H5PlayerVideo style="margin:20px 28px 0 0 ;"
-                     v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
+      <mpegts-video :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      <!--<H5PlayerVideo style="margin:20px 28px 0 0 ;"-->
+                     <!--v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>-->
       <img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
     </div>
     <pagination v-show="videoTotal>0"
@@ -25,16 +26,18 @@
                 :limit.sync="videoQueryParams.pageSize"
                 @pagination="videoInitialize"
     />
-    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+    <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
   </div>
 </template>
 <script>
   import { iotCameraLargeFindByCondition } from "@/api/index";
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
   export default {
     name: 'videoComponent',
     components: {
+      mpegtsVideo,
       H5PlayerVideo,
       fullH5PlayerVideo
     },
@@ -70,6 +73,19 @@
 
     },
     methods:{
+      //父类方法-用于全屏窗口切换
+      fullScreenWindowSwitch(data){
+        let self = this;
+        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+            if(data.type){
+              self.$refs.mpegtsRef[i].stopVideo();
+            }else{
+              self.$refs.mpegtsRef[i].playVideo();
+            }
+          }
+        }
+      },
       //刷新地址
       getAddress(list){
         this.$set(this,'addressList',list);