修改视频分页相关

src/components/SecurityMonitor.vue

@@ -72,7 +72,7 @@
           </div>
           <div class="camera-pager">
             <button class="pager-btn" @click="prevPage">&lsaquo;</button>
-            <span class="pager-info">{{ currentPage }} / {{ totalPages }} &#x9875;</span>
+            <span class="pager-info">{{ videoQueryParams.page }} / {{ totalPages }} &#x9875;</span>
             <button class="pager-btn" @click="nextPage">&rsaquo;</button>
           </div>
         </div>
@@ -183,7 +183,7 @@ export default {
       selectedTreeLabel: '',
       currentPage: 1,
       totalPages: 3,
-      cameras: [{},{},{},{},{},{},{},{},{},],
+      cameras: [],
       treeData: {
         label: '\u5B89\u79D1\u9662\u4E3B\u56ED\u533A',
         children: [
@@ -470,18 +470,18 @@ export default {
       try {
         const res = await getCameraStream(this.videoQueryParams)
         let list = [];
-        // res.data.total = 100;
-        // res.data.records = [
-        //   {streamUrl:'1', deviceNo:'1'},
-        //   {streamUrl:'2', deviceNo:'2'},
-        //   {streamUrl:'3', deviceNo:'3'},
-        //   {streamUrl:'4', deviceNo:'4'},
-        //   {streamUrl:'5', deviceNo:'5'},
-        //   {streamUrl:'6', deviceNo:'6'},
-        //   {streamUrl:'7', deviceNo:'7'},
-        //   {streamUrl:'8', deviceNo:'8'},
-        //   {streamUrl:'9', deviceNo:'9'},
-        // ];
+        res.data.total = 100;
+        res.data.records = [
+          {streamUrl:'1', deviceNo:'1'},
+          {streamUrl:'2', deviceNo:'2'},
+          {streamUrl:'3', deviceNo:'3'},
+          {streamUrl:'4', deviceNo:'4'},
+          {streamUrl:'5', deviceNo:'5'},
+          {streamUrl:'6', deviceNo:'6'},
+          {streamUrl:'7', deviceNo:'7'},
+          {streamUrl:'8', deviceNo:'8'},
+          {streamUrl:'9', deviceNo:'9'},
+        ];
         for(let i=0;i<res.data.records.length;i++){
           list.push(
             {
@@ -503,10 +503,6 @@ export default {
         console.error('VideoGrid:', e)
       }
     },
-    changePage(delta) {
-      this.videoQueryParams.page += delta
-      this.videoInitialize()
-    },
     //全屏开启-关闭轮播
     stopTime(cameraIndexCode){
       this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
@@ -547,13 +543,15 @@ export default {
       this.selectedTreeLabel = label
     },
     prevPage() {
-      if (this.currentPage > 1) {
-        this.currentPage--
+      if (this.videoQueryParams.page > 1) {
+        this.videoQueryParams.page--
+        this.videoInitialize()
       }
     },
     nextPage() {
-      if (this.currentPage < this.totalPages) {
-        this.currentPage++
+      if (this.videoQueryParams.page < this.totalPages) {
+        this.videoQueryParams.page++
+        this.videoInitialize()
       }
     }
   }

src/components/alarmWindow/alarm.vue

@@ -80,8 +80,8 @@
     <!-- 底部按钮 -->
     <div class="alarm-footer">
       <button class="btn-later" @click="$emit('close')">稍后处理</button>
-      <button class="btn-emergency" @click="$emit('emergency')">⚠ 应急疏散</button>
-      <button class="btn-confirm" @click="$emit('confirm')">确认处理</button>
+      <button class="btn-emergency" @click="emergency()">⚠ 应急疏散</button>
+      <button class="btn-confirm" @click="confirm()">确认处理</button>
     </div>
   </div>
 </template>
@@ -94,13 +94,27 @@ export default {
       type: Object,
       default: () => ({})
     }
+  },
+  methods: {
+    //切换疏散弹窗按钮
+    emergency(){
+      console.log('疏散切换');
+      this.$parent.emergencyButton(2);
+    },
+    //结束预案按钮
+    confirm(){
+      console.log('结束预案');
+    },
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .alarm-dialog {
-  width: 1400px;
+  width: 2200px;
+  height: 1210px;
+  display: flex;
+  flex-direction: column;
   background: #0d0002;
   border: 1px solid rgba(255, 40, 40, 0.5);
   box-shadow: 0 0 60px rgba(255, 0, 0, 0.3), inset 0 0 40px rgba(100, 0, 0, 0.15);
@@ -114,29 +128,29 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 28px 40px 22px;
+  padding: 44px 63px 35px;
   background: linear-gradient(90deg, rgba(160, 0, 0, 0.35) 0%, rgba(40, 0, 0, 0.2) 100%);
   border-bottom: 1px solid rgba(255, 40, 40, 0.25);
 
   .header-left {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 31px;
   }
 
   .siren-icon {
-    font-size: 56px;
+    font-size: 88px;
     animation: siren-flash 0.8s ease-in-out infinite alternate;
   }
 
   .title {
-    font-size: 42px;
+    font-size: 66px;
     font-weight: 700;
     color: #ff4040;
     letter-spacing: 2px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 16px;
 
     .flash-icon {
       color: #ffcc00;
@@ -144,17 +158,17 @@ export default {
   }
 
   .subtitle {
-    font-size: 20px;
+    font-size: 31px;
     color: rgba(255, 120, 120, 0.7);
     letter-spacing: 3px;
-    margin-top: 6px;
+    margin-top: 9px;
   }
 
   .close-btn {
-    font-size: 36px;
+    font-size: 57px;
     color: rgba(255, 100, 100, 0.6);
     cursor: pointer;
-    padding: 8px 12px;
+    padding: 13px 19px;
     border-radius: 4px;
     transition: color 0.2s;
 
@@ -167,35 +181,42 @@ export default {
 /* 主体 */
 .alarm-body {
   display: flex;
-  gap: 30px;
-  padding: 30px 40px;
+  flex: 1;
+  gap: 47px;
+  padding: 47px 63px;
+  overflow: hidden;
 }
 
 /* 摄像头区域 */
 .camera-panel {
-  flex: 0 0 480px;
+  flex: 0 0 754px;
+  display: flex;
+  flex-direction: column;
 
   .camera-label {
-    font-size: 22px;
+    font-size: 35px;
     color: #AE6162;
-    margin-bottom: 16px;
+    margin-bottom: 25px;
     letter-spacing: 1px;
   }
 
   .camera-view {
+    flex: 1;
     background: #0a0000;
     border: 1px solid rgba(255, 40, 40, 0.3);
     border-radius: 6px;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   .camera-topbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 16px;
+    padding: 16px 25px;
     background: rgba(0, 0, 0, 0.6);
-    font-size: 20px;
+    font-size: 31px;
 
     .cam-name {
       color: #ccc;
@@ -211,7 +232,7 @@ export default {
 
   .camera-screen {
     position: relative;
-    height: 300px;
+    flex: 1;
     background: #050000;
     display: flex;
     align-items: center;
@@ -225,26 +246,26 @@ export default {
 
     .cam-placeholder {
       color: rgba(255, 100, 100, 0.3);
-      font-size: 22px;
+      font-size: 35px;
     }
 
     .detection-box {
       position: absolute;
-      top: 60px;
-      left: 80px;
-      right: 80px;
-      bottom: 60px;
+      top: 94px;
+      left: 126px;
+      right: 126px;
+      bottom: 94px;
       border: 2px solid #ff2020;
       box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
 
       .detection-label {
         position: absolute;
-        top: -36px;
+        top: -57px;
         left: 0;
         background: #ff2020;
         color: #fff;
-        font-size: 18px;
-        padding: 4px 12px;
+        font-size: 28px;
+        padding: 6px 19px;
         white-space: nowrap;
       }
     }
@@ -254,20 +275,20 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 16px;
+    padding: 19px 25px;
     background: rgba(0, 0, 0, 0.5);
 
     .lab-name-cam {
       color: #aaa;
-      font-size: 20px;
+      font-size: 31px;
     }
 
     .ai-badge {
       background: rgba(0, 200, 100, 0.15);
       border: 1px solid rgba(0, 200, 100, 0.4);
       color: #00cc66;
-      font-size: 18px;
-      padding: 4px 14px;
+      font-size: 28px;
+      padding: 6px 22px;
       border-radius: 4px;
     }
   }
@@ -278,71 +299,55 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  width:810px;
+  gap: 38px;
 
   .info-grid {
-    // display: grid;
-    // grid-template-columns: 1fr 1fr;
-    // grid-template-rows: 1fr 1fr;
-    gap: 16px;
-    // flex: 1;
+    gap: 25px;
   }
-  .info-cell:nth-child(1){
-    margin-right:20px;
+  .info-cell:nth-child(1) {
+    margin-right: 31px;
   }
-  .info-cell:nth-child(3){
-    margin-right:20px;
-    margin-top:20px;
+  .info-cell:nth-child(3) {
+    margin-right: 31px;
+    margin-top: 31px;
   }
-  .info-cell:nth-child(4){
-    margin-top:20px;
+  .info-cell:nth-child(4) {
+    margin-top: 31px;
   }
   .info-cell {
     background: rgba(80, 0, 0, 0.2);
     border: 1px solid rgba(255, 40, 40, 0.2);
     border-radius: 6px;
-    padding: 20px 24px;
-    height: 120px;
-    width: 390px;
+    padding: 31px 38px;
+    height: 188px;
+    width: 612px;
     display: inline-block;
 
     .cell-label {
-      font-size: 20px;
+      font-size: 31px;
       color: #AE6162;
-      margin-bottom: 12px;
+      margin-bottom: 19px;
       letter-spacing: 1px;
     }
 
     .cell-value {
-      font-size: 28px;
+      font-size: 44px;
       color: #EF4444;
       font-weight: 500;
       line-height: 1.3;
-      display:block;
-      overflow:hidden;
-      text-overflow:ellipsis;
-      white-space:nowrap;
-    }
-
-    .warn-text {
-      color: #EF4444;
-    }
-
-    .val-current {
-      color: #EF4444;
-    }
-
-    .val-sep {
-      color: #EF4444;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .val-threshold {
-      color: #EF4444;
-    }
+    .warn-text  { color: #EF4444; }
+    .val-current { color: #EF4444; }
+    .val-sep     { color: #EF4444; }
+    .val-threshold { color: #EF4444; }
 
     .val-unit {
-      font-size: 22px;
+      font-size: 35px;
       color: rgba(255, 200, 200, 0.5);
     }
   }
@@ -353,18 +358,16 @@ export default {
     background: rgba(60, 40, 0, 0.3);
     border: 1px solid rgba(200, 150, 0, 0.3);
     border-radius: 4px;
-    padding: 14px 0;
+    padding: 22px 0;
     text-align: center;
 
     .marquee-text {
       display: inline-block;
       white-space: nowrap;
-      // color: #BC4D4D;
-      color:#EF4444;
-      font-size: 24px;
+      color: #EF4444;
+      font-size: 38px;
       font-weight: 600;
       letter-spacing: 1px;
-      // animation: marquee 12s linear infinite;
     }
   }
 }
@@ -373,13 +376,13 @@ export default {
 .alarm-footer {
   display: flex;
   justify-content: flex-end;
-  gap: 20px;
-  padding: 20px 40px 28px;
+  gap: 31px;
+  padding: 31px 63px 44px;
   border-top: 1px solid rgba(255, 40, 40, 0.15);
 
   button {
-    font-size: 24px;
-    padding: 14px 48px;
+    font-size: 38px;
+    padding: 22px 75px;
     border-radius: 4px;
     cursor: pointer;
     border: none;
@@ -392,27 +395,26 @@ export default {
   }
 
   .btn-later {
-    background-color:rgba(69, 90, 116,0.2);
-    color:rgba(69, 90, 116,1);
-    border:2px solid rgba(69, 90, 116,1);
+    background-color: rgba(69, 90, 116, 0.2);
+    color: rgba(69, 90, 116, 1);
+    border: 2px solid rgba(69, 90, 116, 1);
     font-weight: 700;
-    box-shadow: 0 0 2rgba(69, 90, 116, 0.2);
   }
 
   .btn-emergency {
-    background-color:rgba(245,158,11,0.2);
-    color:rgba(245,158,11,1);
-    border:2px solid rgba(245,158,11,1);
+    background-color: rgba(245, 158, 11, 0.2);
+    color: rgba(245, 158, 11, 1);
+    border: 2px solid rgba(245, 158, 11, 1);
     font-weight: 700;
-    box-shadow: 0 0 20px rgba(245,158,11,0.2);
+    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
   }
 
   .btn-confirm {
-    background-color:rgba(239,68,68,0.2);
-    color:rgba(239,68,68,1);
-    border:2px solid rgba(239,68,68,1);
+    background-color: rgba(239, 68, 68, 0.2);
+    color: rgba(239, 68, 68, 1);
+    border: 2px solid rgba(239, 68, 68, 1);
     font-weight: 700;
-    box-shadow: 0 0 20px rgba(239,68,68,0.2);
+    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
   }
 }
 

src/components/alarmWindow/emergency.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="emergency">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'emergency',
+  props: {
+    alarmData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data(){
+    return{
+      pageType:1,
+    }
+  },
+  methods: {
+    //切换疏散弹窗按钮
+    emergency(){
+      console.log('疏散切换');
+      this.$parent.emergencyButton(1);
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.emergency {
+  width: 2200px;
+  height: 1210px;
+  display: flex;
+  flex-direction: column;
+  background: #0d0002;
+  border: 1px solid rgba(255, 40, 40, 0.5);
+  box-shadow: 0 0 60px rgba(255, 0, 0, 0.3), inset 0 0 40px rgba(100, 0, 0, 0.15);
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+</style>

src/components/alarmWindow/index.vue

@@ -1,25 +1,40 @@
 <template>
   <div class="alarm-overlay">
     <Alarm
+      v-if="pageType == 1"
+      :data="alarmData"
+      @close="$emit('close')"
+    />
+    <emergency
+      v-if="pageType == 2"
       :data="alarmData"
       @close="$emit('close')"
-      @emergency="$emit('emergency')"
-      @confirm="$emit('confirm')"
     />
   </div>
 </template>
 
 <script>
 import Alarm from './alarm.vue'
+import emergency from './emergency.vue'
 
 export default {
   name: 'AlarmWindow',
-  components: { Alarm },
+  components: { Alarm,emergency },
   props: {
     alarmData: {
       type: Object,
       default: () => ({})
     }
+  },
+  data(){
+    return{
+      pageType:1,
+    }
+  },
+  methods: {
+    emergencyButton(val){
+      this.$set(this,'pageType',val);
+    },
   }
 }
 </script>

src/views/Screen.vue

@@ -30,8 +30,6 @@
       v-if="showAlarm"
       :alarm-data="alarmData"
       @close="showAlarm = false"
-      @emergency="showAlarm = false"
-      @confirm="showAlarm = false"
     />
   </div>
 </template>