西海岸bug修复

2022-12-01 17:39:30 +08:00 · 2022-12-01 17:39:30 +08:00 · 73c04f54d0
parent c07f9bdc4c
commit 73c04f54d0
6 changed files with 235 additions and 97 deletions
--- 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
--- 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;
-  }
+  max-width: 9rem !important;
+  min-width: 6rem !important;
+  max-height: 6rem !important;
+  overflow-y: auto;
+}
--- 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%;
--- 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;
--- 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"
--- 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: [],