From 73c04f54d09c05bf583d9798a02c446aa511a801 Mon Sep 17 00:00:00 2001
From: wuhongjian <wuhongjian@hisense.com>
Date: Thu, 1 Dec 2022 17:39:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A5=BF=E6=B5=B7=E5=B2=B8bug=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   1 +
 front/public/static/css/modal.css             | 167 ++++++++++--------
 front/src/views/home/components/header.vue    |   4 +-
 .../views/home/infrastructureApplication.vue  | 140 +++++++++++++--
 .../src/views/home/infrastructurePageXha.vue  |   2 +-
 .../views/home/videoSurveillance/index.vue    |  18 +-
 6 files changed, 235 insertions(+), 97 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8261e9b7..89c50de4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,4 @@ back/dist-西海岸-后台管理-v0.8.2.4.d.zip
 *.zip
 front/public/static/config/basicConfig.js
 front/public/static/config/basicConfig.js
+front/public/static/config/basicConfig.js
diff --git a/front/public/static/css/modal.css b/front/public/static/css/modal.css
index fc97b9eb..4da47ea0 100644
--- a/front/public/static/css/modal.css
+++ b/front/public/static/css/modal.css
@@ -1,117 +1,128 @@
 * {
-    font-weight: normal;
-    font-style: normal;
+  font-weight: normal;
+  font-style: normal;
 }
 
 .mask-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .model-container {
-    width: 446px;
-    height: 194px;
-    background: #fff;
-    text-align: center;
-    font-size: 18px;
-    color: #707070;
-    font-family: 'Alibaba PuHuiTi';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    z-index: 99999999999;
+  width: 446px;
+  height: 194px;
+  background: #fff;
+  text-align: center;
+  font-size: 18px;
+  color: #707070;
+  font-family: 'Alibaba PuHuiTi';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  z-index: 99999999999;
 }
 
 .model-container .model-title {
-    height: 40px;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 10px;
-    background: #007fff;
-    text-align: left;
+  height: 40px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 10px;
+  background: #007fff;
+  text-align: left;
 }
 
 .model-container .title-span {
-    font-family: 'Alibaba PuHuiTi';
-    font-size: 18px !important;
-    color: #ffffff;
+  font-family: 'Alibaba PuHuiTi';
+  font-size: 18px !important;
+  color: #ffffff;
 }
 
 .model-container .model-close {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAALZJREFUOE9jZACC////ZwIpcyBOZGRk/A8SIwSAehqAatiB6itBahmBAhVAuh2qcRGQTiBkGNSQeqie6UA6G2QQyGSYIEgOr2E41UO9RpRh+CxlhIUFIZcRkocbhM9lUK/j9T6KQTgMuwgU10eKRaxhiGEQDsNg5uCMCKwGQQ07AKTtkVxyF8hWxZU0aOciLLFDehjhimKSYo1QOiEkDw4jQoqISbTUy2tUy/1Qr1FeHiElOIqYAKkPngur14nOAAAAAElFTkSuQmCC);
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAALZJREFUOE9jZACC////ZwIpcyBOZGRk/A8SIwSAehqAatiB6itBahmBAhVAuh2qcRGQTiBkGNSQeqie6UA6G2QQyGSYIEgOr2E41UO9RpRh+CxlhIUFIZcRkocbhM9lUK/j9T6KQTgMuwgU10eKRaxhiGEQDsNg5uCMCKwGQQ07AKTtkVxyF8hWxZU0aOciLLFDehjhimKSYo1QOiEkDw4jQoqISbTUy2tUy/1Qr1FeHiElOIqYAKkPngur14nOAAAAAElFTkSuQmCC);
 }
 
 .model-container .model-content {
-    margin-top: 24px;
+  margin-top: 24px;
 }
 
 .model-container .controls {
-    position: absolute;
-    bottom: 10px;
-    width: 100%;
-    padding: 12px;
-    padding-top: 40px;
+  position: absolute;
+  bottom: 10px;
+  width: 100%;
+  padding: 12px;
+  padding-top: 40px;
 }
 
 .model-container a {
-    display: inline-block;
-    width: 49%;
-    text-align: center;
-    cursor: pointer;
+  display: inline-block;
+  width: 49%;
+  text-align: center;
+  cursor: pointer;
+}
+.ant-message {
+z-index: 10010!important;
+}
+.ant-modal-wrap{
+  z-index: 10010!important;
+}
+.ant-notification {
+z-index: 10010!important;
+}
+.ant-popconfirm {
+z-index: 10010!important;
 }
-
 .model-container .confirmChrome {
-    width: 140px;
-    height: 36px;
-    background: #0087ff;
-    border-radius: 0.04rem !important;
-    font-size: 16px;
-    font-family: 'Alibaba PuHuiTi';
-    color: #fff;
-    line-height: 36px;
-    border-radius: 6px;
+  width: 140px;
+  height: 36px;
+  background: #0087ff;
+  border-radius: 0.04rem !important;
+  font-size: 16px;
+  font-family: 'Alibaba PuHuiTi';
+  color: #fff;
+  line-height: 36px;
+  border-radius: 6px;
 }
 
 .model-container .confirm360 {
-    width: 140px;
-    height: 36px;
-    background: #0087ff;
-    border-radius: 0.04rem !important;
-    font-size: 16px;
-    font-family: 'Alibaba PuHuiTi';
-    color: #fff;
-    line-height: 36px;
-    margin-left: 50px;
-    border-radius: 6px;
+  width: 140px;
+  height: 36px;
+  background: #0087ff;
+  border-radius: 0.04rem !important;
+  font-size: 16px;
+  font-family: 'Alibaba PuHuiTi';
+  color: #fff;
+  line-height: 36px;
+  margin-left: 50px;
+  border-radius: 6px;
 }
 
 @font-face {
-    font-family: 'Alibaba PuHuiTi';
-    src: url('~@/assets/home/font/Alibaba-PuHuiTi-Light.otf');
+  font-family: 'Alibaba PuHuiTi';
+  src: url('~@/assets/home/font/Alibaba-PuHuiTi-Light.otf');
 }
 
 /* 气泡提示框按钮居中 */
 .ant-popover-inner-content .ant-popover-buttons {
-    text-align: center;
+  text-align: center;
 }
 .ApplicationTopDetails-tooltip-card {
-    max-width: 9rem !important;
-    min-width: 6rem !important;
-    max-height: 6rem !important;
-    overflow-y: auto;
-  }
\ No newline at end of file
+  max-width: 9rem !important;
+  min-width: 6rem !important;
+  max-height: 6rem !important;
+  overflow-y: auto;
+}
diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index cdf61897..208eddd3 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -469,7 +469,7 @@
     // padding: 0 1rem;
     background-color: rgba(0, 0, 25, 0.7);
     position: fixed;
-    z-index: 1000;
+    z-index: 10010;
     top: 0;
 
     div {
@@ -673,7 +673,7 @@
     top: 0.45rem;
     right: 2.4rem;
     overflow-y: scroll;
-
+    z-index: 9999999;
     .bottom {
       cursor: pointer;
       width: 100%;
diff --git a/front/src/views/home/infrastructureApplication.vue b/front/src/views/home/infrastructureApplication.vue
index 6e6171c2..530efea4 100644
--- a/front/src/views/home/infrastructureApplication.vue
+++ b/front/src/views/home/infrastructureApplication.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: Light
  * @Date: 2022-11-18 11:53:43
- * @LastEditors: Light
- * @LastEditTime: 2022-11-30 11:55:51
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-12-01 16:10:15
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -17,6 +17,13 @@
                 {{ item.channelName }}
               </a-tooltip>
             </div>
+            <a-tag
+              color="cyan"
+              style="margin-right: 0; cursor: pointer"
+              @click="selectItem(item, true)"
+            >
+              预览
+            </a-tag>
             <a-popconfirm
               :title="'是否移出' + item.channelName + '?'"
               ok-text="是"
@@ -132,6 +139,7 @@
   </a-modal>
   <a-modal
     v-else
+    wrapClassName="preview-modal"
     v-model:visible="showVisible"
     :title="dataList.selectItem.cameraInfo.channelName"
     :footer="null"
@@ -147,9 +155,22 @@
         justify-content: center;
       "
     >
+      <div class="video-cover-new" @click="videoShowMsg"></div>
+      <div class="waterMark waterMark-left-top">
+        {{ '西海岸能力超市' + (deptName || '') + (userName || '') }}
+      </div>
+      <div class="waterMark waterMark-right-top">
+        {{ '西海岸能力超市' + (deptName || '') + (realName || '') }}
+      </div>
+      <div class="waterMark waterMark-left-bottom">
+        {{ '西海岸能力超市' + (deptName || '') + (userName || '') }}
+      </div>
+      <div class="waterMark waterMark-right-bottom">
+        {{ '西海岸能力超市' + (deptName || '') + (realName || '') }}
+      </div>
       <h5-player
         videoId="preview"
-        unStopable="true"
+        :unStopable="unStopable"
         :video-url="videoUrl"
       ></h5-player>
     </div>
@@ -193,6 +214,11 @@
   import { useRouter } from 'vue-router'
   import H5Player from '@/views/home/components/H5Player.vue'
   import { getCameraLiveStream } from '@/api/file'
+  import { useStore } from 'vuex'
+  const store = useStore()
+  const userName = store.getters['user/username']
+  const realName = store.getters['user/realName']
+  const deptName = store.getters['user/deptName']
   const dataList = reactive({ toBeApplied: [], requested: [], selectItem: {} })
   const showVisible = ref(false)
   // 待办
@@ -200,6 +226,7 @@
   const delWacFlag = ref(true)
   const delApply = ref(true)
   const visible = ref(false)
+  const unStopable = ref(true)
   const visibleApply = ref(false)
   const instanceId = ref('')
   const showArr = ref([])
@@ -264,6 +291,11 @@
       })
     }
   }
+  // 视频预览 提示
+  const videoShowMsg = () => {
+    let msg = '请申请后在我的申请中观看视频!'
+    message.warning(msg)
+  }
   const apply = () => {
     let obj = {
       arr: [
@@ -336,18 +368,27 @@
       },
     })
   }
-  const selectItem = (item) => {
-    if (item.approveStatus == '通过') {
-      dataList.selectItem = item
-      getVideoUrl(item.cameraInfo)
+  const selectItem = (item, stopableFlag) => {
+    if (stopableFlag) {
+      unStopable.value = false
+      console.log('111111111111', item)
+      dataList.selectItem.cameraInfo = item
+      getVideoUrl(item)
       return
-    } else if (item.backToFirst == 'true') {
-      message.info('请到个人中心查看详情')
     } else {
-      message.info('请耐心等待审核通过')
+      if (item.approveStatus == '通过') {
+        unStopable.value = true
+        dataList.selectItem = item
+        getVideoUrl(item.cameraInfo)
+        return
+      } else if (item.backToFirst == 'true') {
+        message.info('请到个人中心查看详情')
+      } else {
+        message.info('请耐心等待审核通过')
+      }
+      dataList.selectItem = {}
+      showVisible.value = false
     }
-    dataList.selectItem = {}
-    showVisible.value = false
   }
   const handleOk = () => {
     console.log('id', instanceId.value)
@@ -465,6 +506,7 @@
     top: 50%;
     right: 0.16rem;
     margin-top: -3.9rem;
+    z-index: 10010;
     .bottom {
       margin-top: 20px;
     }
@@ -481,7 +523,14 @@
       word-break: break-all;
     }
     .top .name {
-      width: 1.8rem;
+      width: 1.3rem;
+      display: flex;
+      justify-content: space-between;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
     }
     :deep(.ant-list-footer) {
       display: flex;
@@ -500,6 +549,71 @@
       height: 3rem;
     }
 
+    .batch-video-cover {
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: transparent;
+      height: 288px;
+      z-index: 99999999;
+      width: 512px;
+      margin-top: 14px;
+      cursor: pointer;
+    }
+
+    .waterMark {
+      position: absolute;
+      z-index: 99999999;
+      color: #0058e1;
+      font-size: 22px;
+      font-weight: bold;
+      opacity: 0.4;
+      transform: rotate(-25deg);
+      width: 470px;
+    }
+
+    // 左上
+    .waterMark-left-top {
+      left: 50px;
+      top: 100px;
+      text-align: left;
+    }
+
+    // 右上
+    .waterMark-right-top {
+      right: 50px;
+      top: 100px;
+      text-align: right;
+    }
+
+    // 左下
+    .waterMark-left-bottom {
+      left: 50px;
+      bottom: 100px;
+      text-align: left;
+    }
+
+    // 右下
+    .waterMark-right-bottom {
+      right: 50px;
+      bottom: 100px;
+      text-align: right;
+    }
+  }
+</style>
+<style lang="less">
+  .preview-modal {
+    z-index: 10010;
+    .video-cover-new {
+      width: 798px;
+      height: 600px;
+      position: absolute;
+      left: 22px;
+      top: 80px;
+      background: transparent;
+      z-index: 99999999;
+      cursor: pointer;
+    }
     .waterMark {
       position: absolute;
       z-index: 99999999;
diff --git a/front/src/views/home/infrastructurePageXha.vue b/front/src/views/home/infrastructurePageXha.vue
index 7acd9a99..8385266d 100644
--- a/front/src/views/home/infrastructurePageXha.vue
+++ b/front/src/views/home/infrastructurePageXha.vue
@@ -407,7 +407,7 @@
         class="map-contain"
         v-if="showMap"
         v-loading="spinningHome"
-        element-loading-text="Loading..."
+        element-loading-text="加载中..."
         element-loading-svg-view-box="-10, -10, 50, 50"
         element-loading-background="rgba(122, 122, 122, 0.9)"
         :element-loading-svg="svg"
diff --git a/front/src/views/home/videoSurveillance/index.vue b/front/src/views/home/videoSurveillance/index.vue
index 53f90439..91feed19 100644
--- a/front/src/views/home/videoSurveillance/index.vue
+++ b/front/src/views/home/videoSurveillance/index.vue
@@ -7,9 +7,11 @@
 
         <div :id="mapId" class="normal-map-content">
 
-          <tiled-map v-loading="spinning" element-loading-text="Loading..."
-    element-loading-svg-view-box="-10, -10, 50, 50"
-    element-loading-background="rgba(122, 122, 122, 0.8)"
+          <tiled-map v-loading="spinning"
+        element-loading-text="加载中..."
+        element-loading-svg-view-box="-10, -10, 50, 50"
+        element-loading-background="rgba(122, 122, 122, 0.9)"
+        :element-loading-svg="svg"
      :hi-map="hiMap" :map-id="mapId" />
 
         </div>
@@ -144,6 +146,16 @@
         checkboxGroup: [],
         tabList: [],
         state: '',
+        svg: `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `,
         spinning: false,
         timeout: null,
         camreaTree: [],