西海岸需求开发

front/src/views/home/infrastructureApplication.vue

@@ -2,7 +2,7 @@
  * @Author: Light
  * @Date: 2022-11-18 11:53:43
  * @LastEditors: Light
- * @LastEditTime: 2022-11-22 14:50:32
+ * @LastEditTime: 2022-11-22 19:13:02
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -69,7 +69,10 @@
           </a-list-item>
         </template>
         <template #header>
-          <div class="title">已申请列表</div>
+          <div class="title">
+            已申请列表
+            <a-button type="link" @click="goToApply">详情</a-button>
+          </div>
         </template>
       </a-list>
     </div>
@@ -103,24 +106,23 @@
     :footer="null"
     @cancel="clear"
   >
-   <div style="width: 100%; display: flex; justify-content: center">
+    <div style="width: 100%; display: flex; justify-content: center">
-          <div
+      <div style="width: 100%; height: 100%; position: relative">
-            style="width: 100%; height: 100%; position: relative">
+        <div class="waterMark waterMark-left-top">
-            <div class="waterMark waterMark-left-top">
+          {{ userInfo.usernameShow }}
-              {{ userInfo.usernameShow }}
-            </div>
-            <div class="waterMark waterMark-right-top">
-              {{ userInfo.realNameShow }}
-            </div>
-            <div class="waterMark waterMark-left-bottom">
-              {{ userInfo.usernameShow }}
-            </div>
-            <div class="waterMark waterMark-right-bottom">
-              {{ userInfo.realNameShow }}
-            </div>
-        <h5-player :video-url="videoUrl"></h5-player>
-          </div>
         </div>
+        <div class="waterMark waterMark-right-top">
+          {{ userInfo.realNameShow }}
+        </div>
+        <div class="waterMark waterMark-left-bottom">
+          {{ userInfo.usernameShow }}
+        </div>
+        <div class="waterMark waterMark-right-bottom">
+          {{ userInfo.realNameShow }}
+        </div>
+        <h5-player :video-url="videoUrl"></h5-player>
+      </div>
+    </div>
   </a-modal>
 </template>
 <script setup>
@@ -137,7 +139,7 @@
   import mybus from '@/myplugins/mybus'
   import { useRouter } from 'vue-router'
   import H5Player from '@/views/home/components/H5Player.vue'
-  import {getCameraLiveStream} from '@/api/file'
+  import { getCameraLiveStream } from '@/api/file'
   const dataList = reactive({ toBeApplied: [], requested: [], selectItem: {} })
   const showVisible = ref(false)
   // 待办
@@ -243,10 +245,18 @@
       }
     }
   }
+  const goToApply = () => {
+    router.push({
+      path: '/personalCenter',
+      query: {
+        type: 'apply',
+      },
+    })
+  }
   const selectItem = (item) => {
     if (item.approveStatus == '通过') {
       dataList.selectItem = item
-      getVideoUrl(item.cameraInfo);
+      getVideoUrl(item.cameraInfo)
     } else {
       dataList.selectItem = {}
       showVisible.value = false
@@ -302,16 +312,16 @@
   initApply()
   const videoUrl = ref('')
   //获取视频控件所需播放地址
-  const getVideoUrl = (data) =>{
+  const getVideoUrl = (data) => {
-      let param = data;
+    let param = data
-      getCameraLiveStream(param).then((res) => {
+    getCameraLiveStream(param).then((res) => {
       //console.log('555555rrrrr',res)
-      if(res.data.data){
+      if (res.data.data) {
-        videoUrl.value = res.data.data.url;
+        videoUrl.value = res.data.data.url
-      }
-         showVisible.value = true
-      })
       }
+      showVisible.value = true
+    })
+  }
   mybus.on('selectCamera', (obj) => {
     // 判断最多10条
     if (dataList.toBeApplied.length + dataList.requested.length >= 10) {
@@ -392,43 +402,43 @@
       height: 3rem;
     }
 
-     .waterMark {
+    .waterMark {
-    position: absolute;
+      position: absolute;
-    z-index: 99999999;
+      z-index: 99999999;
-    color: #0058e1;
+      color: #0058e1;
-    font-size: 22px;
+      font-size: 22px;
-    font-weight: bold;
+      font-weight: bold;
-    opacity: 0.4;
+      opacity: 0.4;
-    transform: rotate(-25deg);
+      transform: rotate(-25deg);
-    width: 470px;
+      width: 470px;
-  }
+    }
 
-  // 左上
+    // 左上
-  .waterMark-left-top {
+    .waterMark-left-top {
-    left: 50px;
+      left: 50px;
-    top: 100px;
+      top: 100px;
-    text-align: left;
+      text-align: left;
-  }
+    }
 
-  // 右上
+    // 右上
-  .waterMark-right-top {
+    .waterMark-right-top {
-    right: 50px;
+      right: 50px;
-    top: 100px;
+      top: 100px;
-    text-align: right;
+      text-align: right;
-  }
+    }
 
-  // 左下
+    // 左下
-  .waterMark-left-bottom {
+    .waterMark-left-bottom {
-    left: 50px;
+      left: 50px;
-    bottom: 100px;
+      bottom: 100px;
-    text-align: left;
+      text-align: left;
-  }
+    }
 
-  // 右下
+    // 右下
-  .waterMark-right-bottom {
+    .waterMark-right-bottom {
-    right: 50px;
+      right: 50px;
-    bottom: 100px;
+      bottom: 100px;
-    text-align: right;
+      text-align: right;
-  }
+    }
   }
 </style>