报警疏散

src/components/alarmWindow/alarm.vue

@@ -26,6 +26,7 @@
             <span class="rec-badge">⬤ REC</span>
           </div>
           <div class="camera-screen">
+            <H5PlayerVideo v-if="videoData" :videoProps="videoData"></H5PlayerVideo>
             <img v-if="data.cameraUrl" :src="data.cameraUrl" class="cam-img" alt="camera" />
             <div v-else class="cam-placeholder">
               <span>暂无画面</span>
@@ -82,19 +83,72 @@
       <button class="btn-emergency" @click="emergency()">⚠ 应急疏散</button>
       <button class="btn-confirm" @click="confirm()">确认处理</button>
     </div>
+    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
   </div>
 </template>
 
 <script>
+import { getCameraStream } from '@/api/screen'
+import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
 export default {
   name: 'Alarm',
+  components: {
+    H5PlayerVideo,fullH5PlayerVideo
+  },
   props: {
     data: {
       type: Object,
       default: () => ({})
     }
   },
+  data() {
+    return {
+      videoData:null,
+      //全屏视频参数
+      fullVideoProps:{},
+      fullVideoType:false,
+    }
+  },
+  mounted(){
+    this.getCameraStream(this.data);
+  },
   methods: {
+    async getCameraStream(data) {
+      console.log('data',data)
+      try {
+        let obj = {
+          "subIds": [data.subId],
+          "streamType": 1,
+          "protocol": window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
+          "source": 4,
+          "page": 1,
+          "pageSize": 10
+        }
+        const res = await getCameraStream(obj)
+        if(res.data.list[0]){
+          this.$set(this,'videoData',{
+            width: 400, //(宽度:非必传-默认600)
+            height: 210, //(高度:非必传-默认338)
+            url: res.data.list[0].streamUrl,
+            cameraIndexCode: res.data.list[0].deviceNo,
+          });
+        }
+      } catch (e) {
+        console.error('AlertModal:', e)
+      }
+    },
+    //全屏开启-关闭轮播
+    stopTime(cameraIndexCode){
+      this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+      this.$set(this,'fullVideoType',true);
+    },
+    //全屏关闭-开启轮播
+    outFullScreen(){
+      let self = this;
+      this.$set(this,'fullVideoType',false);
+      this.$set(this,'fullVideoProps',{});
+    },
     //切换疏散弹窗按钮
     emergency(){
       console.log('疏散切换');

src/components/alarmWindow/emergency.vue

@@ -1,5 +1,35 @@
 <template>
   <div class="emergency">
+    <!--顶部-->
+    <div>
+      <p></p>
+    </div>
+    <!--地图/监控-->
+    <div>
+      <!--地图-->
+      <div>
+
+      </div>
+      <!--监控-->
+      <div>
+
+      </div>
+    </div>
+    <!--报警信息/喇叭/操作按钮-->
+    <div>
+      <!--报警信息-->
+      <div>
+
+      </div>
+      <!--喇叭-->
+      <div>
+
+      </div>
+      <!--操作按钮-->
+      <div>
+
+      </div>
+    </div>
   </div>
 </template>
 

src/components/alarmWindow/index.vue

@@ -28,7 +28,7 @@ export default {
   },
   data(){
     return{
-      pageType:1,
+      pageType:2,
     }
   },
   methods: {

src/main.js

@@ -14,6 +14,12 @@ Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 
+// 接口错误已由 request.js 拦截器统一用 Message.error 提示
+// 阻止未处理的 Promise rejection 触发浏览器/webpack 的全屏错误遮罩
+window.addEventListener('unhandledrejection', event => {
+  event.preventDefault()
+})
+
 new Vue({
   router,
   store,

src/views/Screen.vue

@@ -27,7 +27,7 @@
     </div>
     <!-- 报警弹窗 -->
     <AlarmWindow
-      v-if="showAlarm"
+      v-if="!showAlarm"
       :alarm-data="alarmData"
       @close="showAlarm = false"
     />
@@ -148,7 +148,7 @@ export default {
         // MQTT 连接失败不影响页面正常使用
       }
     },
-    
+
     async selectTriggerInfo() {
       const res = await selectTriggerInfo()
       if (res.code === 200 && res.data && res.data.length) {

vue.config.js

@@ -11,6 +11,12 @@ module.exports = defineConfig({
     port: 8080,
     open: true,
     historyApiFallback: true,
+    client: {
+      overlay: {
+        errors: true,         // 保留编译错误遮罩
+        runtimeErrors: false  // 关掉运行时错误遮罩（接口报错由 Message.error 提示）
+      }
+    },
     proxy: {
       '/auth': {
         target: process.env.VUE_APP_BASE_API,