调整监控界面

src/views/appmana/liveCamra/index.vue

@@ -1,10 +1,9 @@
 <template>
-  <a-row v-for="value in formData.item" :key="value.id">
+  <a-row>
     <a-col :span="24">
-      <a-card :title="value.stationName" style="width: 100%" size="default">
-        <a-row :gutter="16">
-          <a-col class="gutter-row" :span="5" v-for="value2 in value.deviceList" :key="value2.id">
-            <div class="gutter-box" :id="value2.deployCode" style="width: 100%;text-align: center;">
+        <a-row :gutter="24">
+          <a-col class="gutter-row" :span="12" v-for="value2 in formData.cams" :key="value2.id" style="text-align: center;">
+            <div class="gutter-box" :id="value2.deployCode" style="width: 95%;text-align: center;margin: auto;padding-top: 10px">
               <div class="video_head" style="">
                 {{value2.deployDes}}
               </div>
@@ -14,7 +13,6 @@
             </div>
           </a-col>
         </a-row>
-      </a-card>
     </a-col>
   </a-row>
   <!--监控-->
@@ -27,6 +25,7 @@
   import { getCamList } from '../deploy/SurvDeviceDeploy.api';
   const formData = reactive<Record<string, any>>({
     item: [],
+    cams:[],
   });
   //注册model
   const monitorRegisterModal = ref();
@@ -51,7 +50,7 @@
         formData.item = res.result;
         res.result.forEach((val) => {
           val.deviceList.forEach((itm) => {
-
+            formData.cams.push(itm)
           });
         });
       }
@@ -61,6 +60,7 @@
 
 <style lang="less" scoped>
 .video_head {
+  background: white;
   border: 1px solid #eee;
   border-radius: 4px 4px 0 0;
   padding: 0 12px;

src/views/appmana/liveCamra/index_new.vue

@@ -0,0 +1,89 @@
+<template>
+  <a-row v-for="value in formData.item" :key="value.id">
+    <a-col :span="24">
+      <a-card :title="value.stationName" style="width: 100%" size="default">
+        <a-row :gutter="16">
+          <a-col class="gutter-row" :span="5" v-for="value2 in value.deviceList" :key="value2.id">
+            <div class="gutter-box" :id="value2.deployCode" style="width: 100%;text-align: center;">
+              <div class="video_head" style="">
+                {{value2.deployDes}}
+              </div>
+                <div  style="cursor:pointer" @click="handleMonitor(value2)">
+                <img src="/resource/img/cameras.jpg" class="app-loading-logo" alt="Logo" style="width: 100%;text-align: center;"/>
+               </div>
+            </div>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+  </a-row>
+  <!--监控-->
+  <MonitorDetailModal ref="monitorRegisterModal" @success="handleSuccess"/>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, reactive } from 'vue';
+  import MonitorDetailModal from './MonitorModal.vue';
+  import { getCamList } from '../deploy/SurvDeviceDeploy.api';
+  const formData = reactive<Record<string, any>>({
+    item: [],
+  });
+  //注册model
+  const monitorRegisterModal = ref();
+  onMounted(() => {
+    getCams();
+  });
+
+  /**
+   * 查看监控
+   */
+  function handleMonitor(record) {
+    // monitorRegisterModal.value.disableSubmit = false;
+    monitorRegisterModal.value.statistic(record);
+  }
+
+  /**
+   * 获取设备列表
+   */
+  function getCams() {
+    getCamList().then((res) => {
+      if (res.code == 200) {
+        formData.item = res.result;
+        res.result.forEach((val) => {
+          val.deviceList.forEach((itm) => {
+
+          });
+        });
+      }
+    });
+  }
+</script>
+
+<style lang="less" scoped>
+.video_head {
+  border: 1px solid #eee;
+  border-radius: 4px 4px 0 0;
+  padding: 0 12px;
+  box-sizing: border-box;
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .video_tit {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .video_ctl {
+    width: 24px;
+    height: 40px;
+    cursor: pointer;
+    background: url('/camera/video_icon.png') no-repeat right center;
+  }
+}
+</style>