From 0b401f57417457bfef36805249efd195fe85761c Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Tue, 27 Sep 2022 09:49:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E7=94=B3=E8=AF=B7=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=B0=B4=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/infrastructurePage.vue   |   72 +-
 .../components/AbilityApplication.vue         | 1054 +++++++++--------
 2 files changed, 600 insertions(+), 526 deletions(-)

diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index 9f8cb6ce..7ef1a0db 100644
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@@ -1693,7 +1693,7 @@ const videoShowMsg = (index) => {
   message.warning(msg)
 }
 
-// 获取用户信息 todo
+// 获取用户信息
 const userInfo = ref(null)
 const handleUser = () => {
   getUser().then(res => {
@@ -1706,7 +1706,6 @@ const handleUser = () => {
     userInfo.value.realNameShow = '西海岸能力超市' + (userInfo.value.deptName || '') + (userInfo.value.realName || '');
   }).catch(err => {
     message.warning(err)
-    console.log('err----获取用户信息-------->', err);
   })
 }
 </script>
@@ -2160,8 +2159,39 @@ video::-webkit-media-controls {
   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;
+}
+
+// 批量
 .batch-waterMark {
   position: absolute;
   z-index: 99999999;
@@ -2169,55 +2199,35 @@ video::-webkit-media-controls {
   font-size: 14px;
   opacity: 0.4;
   transform: rotate(-25deg);
+  width: 200px;
 }
 
-// 左上
-.waterMark-left-top {
-  left: 100px;
-  top: 100px;
-}
-
-// 右上
-.waterMark-right-top {
-  right: 100px;
-  top: 100px;
-}
-
-// 左下
-.waterMark-left-bottom {
-  left: 100px;
-  bottom: 100px;
-}
-
-// 右下
-.waterMark-right-bottom {
-  right: 100px;
-  bottom: 100px;
-}
-
-
-// 批量
 // 左上
 .batch-waterMark-left-top {
   left: 30px;
   top: 50px;
+  text-align: left;
+
 }
 
 // 右上
 .batch-waterMark-right-top {
+  text-align: right;
   right: 30px;
-  top: 50px;
+  top: 80px;
 }
 
 // 左下
 .batch-waterMark-left-bottom {
   left: 30px;
   bottom: 50px;
+  text-align: left;
 }
 
 // 右下
 .batch-waterMark-right-bottom {
-  right: 30px;
-  bottom: 50px;
+  right: 20px;
+  bottom: 30px;
+  text-align: right;
 }
 </style>
diff --git a/front/src/views/personalCenter/components/AbilityApplication.vue b/front/src/views/personalCenter/components/AbilityApplication.vue
index 3a75af0e..1b91b1d9 100644
--- a/front/src/views/personalCenter/components/AbilityApplication.vue
+++ b/front/src/views/personalCenter/components/AbilityApplication.vue
@@ -52,30 +52,18 @@
           <span class="img"></span>
           <span>{{ item.name }}</span>
         </div>
-        <div
-          style="
+        <div style="
             display: flex;
             justify-content: space-between;
             align-items: center;
-          "
-        >
+          ">
           <div class="oddNumbers">子单号：{{ item.instanceId }}</div>
           <div style="display: flex; align-items: center">
-            <a-button
-              type="primary"
-              @click="modify(props.refObj.id, item)"
-              v-if="item.backToFirst"
-            >
+            <a-button type="primary" @click="modify(props.refObj.id, item)" v-if="item.backToFirst">
               修改
             </a-button>
-            <a-popconfirm
-              v-if="!item.ended"
-              title="是否终止此流程?"
-              ok-text="是"
-              cancel-text="否"
-              @confirm="endThis(item.instanceId)"
-              @cancel="cancel"
-            >
+            <a-popconfirm v-if="!item.ended" title="是否终止此流程?" ok-text="是" cancel-text="否"
+              @confirm="endThis(item.instanceId)" @cancel="cancel">
               <a-button type="primary" danger style="margin-left: 10px">
                 流程终止
               </a-button>
@@ -84,36 +72,29 @@
         </div>
 
         <div class="box" v-if="item.list.length > 0">
-          <div
-            class="ability"
-            v-for="val in item.list"
-            :key="val.id"
-            :class="item.approveStatus === '通过' ? 'clickCursor' : ''"
-          >
-            <div
-              class="left"
-              :class="
-                val.type == '应用资源'
-                  ? 'yyzy'
-                  : val.infoList.filter(
-                      (val2) => val2.attrType == '组件类型'
-                    )[0].attrValue == '智能算法'
-                  ? 'znsf'
-                  : val.infoList.filter(
-                      (val2) => val2.attrType == '组件类型'
-                    )[0].attrValue == '图层服务'
-                  ? 'tcfw'
-                  : val.infoList.filter(
-                      (val2) => val2.attrType == '组件类型'
-                    )[0].attrValue == '开发组件'
-                  ? 'kfzj'
-                  : val.infoList.filter(
-                      (val2) => val2.attrType == '组件类型'
-                    )[0].attrValue == '业务组件'
-                  ? 'ywzj'
-                  : 'yyzy'
-              "
-            ></div>
+          <div class="ability" v-for="val in item.list" :key="val.id"
+            :class="item.approveStatus === '通过' ? 'clickCursor' : ''">
+            <div class="left" :class="
+              val.type == '应用资源'
+                ? 'yyzy'
+                : val.infoList.filter(
+                    (val2) => val2.attrType == '组件类型'
+                  )[0].attrValue == '智能算法'
+                ? 'znsf'
+                : val.infoList.filter(
+                    (val2) => val2.attrType == '组件类型'
+                  )[0].attrValue == '图层服务'
+                ? 'tcfw'
+                : val.infoList.filter(
+                    (val2) => val2.attrType == '组件类型'
+                  )[0].attrValue == '开发组件'
+                ? 'kfzj'
+                : val.infoList.filter(
+                    (val2) => val2.attrType == '组件类型'
+                  )[0].attrValue == '业务组件'
+                ? 'ywzj'
+                : 'yyzy'
+            "></div>
             <div class="right">
               <div class="ability-top">
                 <div class="name">
@@ -121,25 +102,25 @@
                     <span class="channelName">{{ val.name }}</span>
                     <span class="type">
                       {{
-                        val.type == '应用资源'
-                          ? '应用资源'
-                          : val.infoList.filter(
-                              (val2) => val2.attrType == '组件类型'
-                            )[0].attrValue == '智能算法'
-                          ? '智能算法'
-                          : val.infoList.filter(
-                              (val2) => val2.attrType == '组件类型'
-                            )[0].attrValue == '图层服务'
-                          ? '图层服务'
-                          : val.infoList.filter(
-                              (val2) => val2.attrType == '组件类型'
-                            )[0].attrValue == '开发组件'
-                          ? '开发组件'
-                          : val.infoList.filter(
-                              (val2) => val2.attrType == '组件类型'
-                            )[0].attrValue == '业务组件'
-                          ? '业务组件'
-                          : '--'
+                      val.type == '应用资源'
+                      ? '应用资源'
+                      : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                      )[0].attrValue == '智能算法'
+                      ? '智能算法'
+                      : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                      )[0].attrValue == '图层服务'
+                      ? '图层服务'
+                      : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                      )[0].attrValue == '开发组件'
+                      ? '开发组件'
+                      : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                      )[0].attrValue == '业务组件'
+                      ? '业务组件'
+                      : '--'
                       }}
                     </span>
                   </div>
@@ -151,24 +132,17 @@
                 <div class="dec">资源描述：{{ val.description }}</div>
                 <div class="result">
                   申请结果：{{
-                    item.ended ? item.approveStatus || '审核完成' : '审核中'
+                  item.ended ? item.approveStatus || '审核完成' : '审核中'
                   }}
-                  <a-button
-                    v-if="
-                      item.approveStatus === '通过' &&
-                      val.infoList.filter(
-                        (item) => item.attrType == '上传附件'
-                      )[0]
-                    "
-                    @click.stop="downloadFile(item, '附件下载')"
-                    class="DownloadAttachment"
-                  >
+                  <a-button v-if="
+                    item.approveStatus === '通过' &&
+                    val.infoList.filter(
+                      (item) => item.attrType == '上传附件'
+                    )[0]
+                  " @click.stop="downloadFile(item, '附件下载')" class="DownloadAttachment">
                     附件下载
                   </a-button>
-                  <a-button
-                    v-if="item.approveStatus === '通过'"
-                    @click.stop="switchFunction(item)"
-                  >
+                  <a-button v-if="item.approveStatus === '通过'" @click.stop="switchFunction(item)">
                     查看详情
                   </a-button>
                 </div>
@@ -185,11 +159,8 @@
                   <span class="channelName">{{ val.channelName }}</span>
                   <span class="type">基础设施</span>
                 </div>
-                <a-button
-                    type="primary"
-                    v-if="item.approveStatus == '通过' && whoShow1.itShowXiHaiAn"
-                    @click.stop="openVideo(val)"
-                  >
+                <a-button type="primary" v-if="item.approveStatus == '通过' && whoShow1.itShowXiHaiAn"
+                  @click.stop="openVideo(val)">
                   视频预览
                 </a-button>
 
@@ -198,15 +169,15 @@
                 <div class="dec2">位置：{{ val.nodeName }}</div>
                 <div class="result" v-if="item.approveStatus == '通过'">
                   申请结果：{{
-                    '列表地址：' +
-                    backUrl +
-                    'resource/getApplyCameraList/' +
-                    item.instanceId +
-                    ';' +
-                    '视频流地址：' +
-                    backUrl +
-                    'resource/hls/getHls/?key=' +
-                    val.channelId
+                  '列表地址：' +
+                  backUrl +
+                  'resource/getApplyCameraList/' +
+                  item.instanceId +
+                  ';' +
+                  '视频流地址：' +
+                  backUrl +
+                  'resource/hls/getHls/?key=' +
+                  val.channelId
                   }}
                 </div>
               </div>
@@ -216,411 +187,420 @@
       </div>
     </div>
 
-     <!-- 单个预览弹窗 -->
-     <a-modal
-        wrapClassName="single-preview-modal"
-        v-model:visible="visible"
-        title="视频预览"
-        :width="960"
-        destroyOnClose
-      >
-        <template #footer></template>
-        <div style="width: 100%; display: flex; justify-content: center">
-          <div style="width: 100%; height: 100%">
-            <vue3VideoPlay v-bind="options"/>
-          </div>
+    <!-- 单个预览弹窗 -->
+    <a-modal wrapClassName="single-preview-modal" v-model:visible="visible" title="视频预览" :width="960" destroyOnClose>
+      <template #footer></template>
+      <div style="width: 100%; display: flex; justify-content: center">
+        <div style="width: 100%; height: 100%;position: relative">
+          <!-- 预览视频--遮罩 -->
+          <div class="waterMark waterMark-left-top">{{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>
+          <vue3VideoPlay v-bind="options" />
         </div>
-      </a-modal>
+      </div>
+    </a-modal>
 
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, reactive } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  import { message } from 'ant-design-vue'
-  import { endProcess, getApplyForm } from '@/api/personalCenter.js'
-  import { useRouter } from 'vue-router'
-  import {
-    getStreamByChannelCode,
-  } from '@/api/videoSurveillance'
-  const router = useRouter()
-  const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
-  const props = defineProps({
-    refObj: { type: Object, default: null },
-  })
-  const whoShow1 = ref(whoShow)
-  let visible = ref(false)
-  const options = reactive({
-    width: '912px', //播放器宽度
-    height: '513px', //播放器高度
-    color: '#409eff', //主题色
-    title: '', //视频名称
-    src: '', //视频源
-    type: 'm3u8', // 视频源类型
-    muted: false, //静音
-    webFullScreen: false,
-    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-    autoPlay: true, //自动播放
-    loop: false, //循环播放
-    mirror: false, //镜像画面
-    ligthOff: false, //关灯模式
-    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制
-    controlBtns: [
-      'audioTrack',
-      'quality',
-      'speedRate',
-      'volume',
-      'setting',
-      'pip',
-      'pageFullScreen',
-      'fullScreen',
-    ], //显示所有按钮,
-  })
+import { ref, defineProps, reactive, onMounted } from 'vue'
+import mybus from '@/myplugins/mybus'
+import { message } from 'ant-design-vue'
+import { endProcess, getApplyForm } from '@/api/personalCenter.js'
+import { useRouter } from 'vue-router'
+import {
+  getStreamByChannelCode,
+} from '@/api/videoSurveillance'
+import {
+  getUser,
+} from '@/api/home'
+const router = useRouter()
+const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
+const props = defineProps({
+  refObj: { type: Object, default: null },
+})
+const whoShow1 = ref(whoShow)
+let visible = ref(false)
+const options = reactive({
+  width: '912px', //播放器宽度
+  height: '513px', //播放器高度
+  color: '#409eff', //主题色
+  title: '', //视频名称
+  src: '', //视频源
+  type: 'm3u8', // 视频源类型
+  muted: false, //静音
+  webFullScreen: false,
+  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+  autoPlay: true, //自动播放
+  loop: false, //循环播放
+  mirror: false, //镜像画面
+  ligthOff: false, //关灯模式
+  volume: 0.3, //默认音量大小
+  control: true, //是否显示控制
+  controlBtns: [
+    'audioTrack',
+    'quality',
+    'speedRate',
+    'volume',
+    'setting',
+    'pip',
+    'pageFullScreen',
+    'fullScreen',
+  ], //显示所有按钮,
+})
 
-  const dept = reactive({})
+const dept = reactive({})
+// eslint-disable-next-line no-undef
+if (infrastructure) {
   // eslint-disable-next-line no-undef
-  if (infrastructure) {
-    // eslint-disable-next-line no-undef
-    dept.deptId = infrastructure.deptId
-    // eslint-disable-next-line no-undef
-    dept.deptName = infrastructure.deptName
-  }
-  const showThis = () => {
-    window.open(
-      window.SITE_CONFIG.previewUrl +
-        'hisense_office/onlinePreview?url=' +
-        btoa(encodeURI(props.refObj.enclosure))
-    )
-  }
-  const showArr = ref([])
-  console.log(props.refObj, '=====================================')
-  const endThis = (instanceId) => {
-    endProcess({ instanceId: instanceId }).then((res) => {
-      if (res.data.code == 0) {
-        message.success('流程终止成功！')
-        mybus.emit('closeModal', { type: '能力申请', index: 0 })
-      } else {
-        message.warning('流程终止失败！')
-      }
-    })
-  }
-  const modify = (id, item) => {
-    getApplyForm(id).then((res) => {
-      console.log('修改==============>', res.data.data, item)
-      if (item.list.length > 0) {
-        let arr = []
-        item.list.map((val) => {
-          arr.push({
-            delFlag: val.delFlag,
-            description: val.description,
-            resourceId: val.id,
-            resourceName: val.name,
-            time: val.createDate,
-            type: val.type,
-            componentType:
-              (val.infoList.filter((val) => val.attrType == '组件类型')[0] &&
-                val.infoList.filter((val) => val.attrType == '组件类型')[0]
-                  .attrValue) ||
-              '',
-          })
-        })
-        localStorage.setItem(
-          'applyList',
-          JSON.stringify([
-            {
-              arr: arr,
-              deptId: item.name,
-              deptName: item.name,
-            },
-          ])
-        )
-        router.push({
-          path: '/apply',
-          query: {
-            id: id,
-            taskId: item.instanceId,
-          },
-        })
-      } else if (item.list2.length > 0) {
-        let arr = [
-          {
-            arr: [
-              {
-                description: '',
-                note1: JSON.stringify(item.list2),
-                resourceId: '1522550195055828996',
-                resourceName: '摄像头列表',
-                type: '基础设施',
-              },
-            ],
-            deptId: dept.deptId,
-            deptName: dept.deptName,
-          },
-        ]
-        localStorage.setItem('applyList', JSON.stringify(arr))
-        router.push({
-          path: '/apply',
-          query: {
-            id: id,
-            taskId: item.instanceId,
-          },
-        })
-      }
-    })
-  }
-  if (props.refObj.resourceApplication) {
-    showArr.value = []
-    for (const key in props.refObj.resourceApplication) {
-      if (props.refObj.resourceApplication[key].length > 0) {
-        let obj = { name: '', instanceId: '', list: [], list2: [] }
-        obj.name = key
-        props.refObj.resourceApplication[key].map((item) => {
-          obj.instanceId = item.instanceId
-          obj.backToFirst = item.backToFirst
-          obj.ended = item.ended
-          obj.approveStatus = item.approveStatus
-          if (item.resources.length > 0) {
-            item.resources.map((val) => {
-              obj.list.push(val)
-            })
-          } else {
-            item.camera.map((val) => {
-              obj.list2.push(val)
-            })
-          }
-        })
-        showArr.value.push(obj)
-      }
+  dept.deptId = infrastructure.deptId
+  // eslint-disable-next-line no-undef
+  dept.deptName = infrastructure.deptName
+}
+const showThis = () => {
+  window.open(
+    window.SITE_CONFIG.previewUrl +
+    'hisense_office/onlinePreview?url=' +
+    btoa(encodeURI(props.refObj.enclosure))
+  )
+}
+const showArr = ref([])
+console.log(props.refObj, '=====================================')
+const endThis = (instanceId) => {
+  endProcess({ instanceId: instanceId }).then((res) => {
+    if (res.data.code == 0) {
+      message.success('流程终止成功！')
+      mybus.emit('closeModal', { type: '能力申请', index: 0 })
+    } else {
+      message.warning('流程终止失败！')
     }
-  }
-  const switchFunction = (data) => {
-    if (data.approveStatus === '通过') {
-      let id = data.list[0].id
-      const applypage = router.resolve({
-        path: '/details', // 跳转的页面路由
+  })
+}
+const modify = (id, item) => {
+  getApplyForm(id).then((res) => {
+    console.log('修改==============>', res.data.data, item)
+    if (item.list.length > 0) {
+      let arr = []
+      item.list.map((val) => {
+        arr.push({
+          delFlag: val.delFlag,
+          description: val.description,
+          resourceId: val.id,
+          resourceName: val.name,
+          time: val.createDate,
+          type: val.type,
+          componentType:
+            (val.infoList.filter((val) => val.attrType == '组件类型')[0] &&
+              val.infoList.filter((val) => val.attrType == '组件类型')[0]
+                .attrValue) ||
+            '',
+        })
+      })
+      localStorage.setItem(
+        'applyList',
+        JSON.stringify([
+          {
+            arr: arr,
+            deptId: item.name,
+            deptName: item.name,
+          },
+        ])
+      )
+      router.push({
+        path: '/apply',
         query: {
           id: id,
+          taskId: item.instanceId,
+        },
+      })
+    } else if (item.list2.length > 0) {
+      let arr = [
+        {
+          arr: [
+            {
+              description: '',
+              note1: JSON.stringify(item.list2),
+              resourceId: '1522550195055828996',
+              resourceName: '摄像头列表',
+              type: '基础设施',
+            },
+          ],
+          deptId: dept.deptId,
+          deptName: dept.deptName,
+        },
+      ]
+      localStorage.setItem('applyList', JSON.stringify(arr))
+      router.push({
+        path: '/apply',
+        query: {
+          id: id,
+          taskId: item.instanceId,
         },
       })
-      window.open(applypage.href, '_blank')
     }
-  }
-  const downloadFile = (data, name) => {
-    let path = data.list[0].infoList.filter(
-      (item) => item.attrType === '上传附件'
-    )[0].attrValue
-    console.log(path, 'obj')
-    const xhr = new XMLHttpRequest()
-    xhr.open('get', path)
-    xhr.responseType = 'blob'
-    xhr.send()
-    xhr.onload = function () {
-      if (this.status === 200 || this.status === 304) {
-        // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
-        if ('msSaveOrOpenBlob' in navigator) {
-          navigator.msSaveOrOpenBlob(this.response, name)
-          return
+  })
+}
+if (props.refObj.resourceApplication) {
+  showArr.value = []
+  for (const key in props.refObj.resourceApplication) {
+    if (props.refObj.resourceApplication[key].length > 0) {
+      let obj = { name: '', instanceId: '', list: [], list2: [] }
+      obj.name = key
+      props.refObj.resourceApplication[key].map((item) => {
+        obj.instanceId = item.instanceId
+        obj.backToFirst = item.backToFirst
+        obj.ended = item.ended
+        obj.approveStatus = item.approveStatus
+        if (item.resources.length > 0) {
+          item.resources.map((val) => {
+            obj.list.push(val)
+          })
+        } else {
+          item.camera.map((val) => {
+            obj.list2.push(val)
+          })
         }
-        // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
-        // const url = URL.createObjectURL(blob);
-        const url = URL.createObjectURL(this.response)
-        const a = document.createElement('a')
-        a.style.display = 'none'
-        a.href = url
-        a.download = name
-        document.body.appendChild(a)
-        a.click()
-        document.body.removeChild(a)
-        URL.revokeObjectURL(url)
-      }
+      })
+      showArr.value.push(obj)
     }
   }
-  
-  // 视频预览
-  const openVideo = (item) => {
-    console.log('打开视频', item)
-    if(item && item.status != 1) {
-      return message.error('当前视频离线不可预览!')
-    }
-    const param = {
-      key: item.cameraId,
-    }
-    getStreamByChannelCode(param).then((res) => {
-      console.log('视频预览------------>', res);
-      console.log(res)
-      visible.value = true
-      options.src = res.data.data || ''
-    }).catch(err => {
-      message.error(err)
+}
+const switchFunction = (data) => {
+  if (data.approveStatus === '通过') {
+    let id = data.list[0].id
+    const applypage = router.resolve({
+      path: '/details', // 跳转的页面路由
+      query: {
+        id: id,
+      },
     })
-    // 视频测试--勿删
-    // visible.value = true
-    // options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
+    window.open(applypage.href, '_blank')
   }
+}
+const downloadFile = (data, name) => {
+  let path = data.list[0].infoList.filter(
+    (item) => item.attrType === '上传附件'
+  )[0].attrValue
+  console.log(path, 'obj')
+  const xhr = new XMLHttpRequest()
+  xhr.open('get', path)
+  xhr.responseType = 'blob'
+  xhr.send()
+  xhr.onload = function () {
+    if (this.status === 200 || this.status === 304) {
+      // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
+      if ('msSaveOrOpenBlob' in navigator) {
+        navigator.msSaveOrOpenBlob(this.response, name)
+        return
+      }
+      // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
+      // const url = URL.createObjectURL(blob);
+      const url = URL.createObjectURL(this.response)
+      const a = document.createElement('a')
+      a.style.display = 'none'
+      a.href = url
+      a.download = name
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    }
+  }
+}
+
+// 视频预览
+const openVideo = (item) => {
+  console.log('打开视频', item)
+  if (item && item.status != 1) {
+    return message.error('当前视频离线不可预览!')
+  }
+  const param = {
+    key: item.cameraId,
+  }
+  getStreamByChannelCode(param).then((res) => {
+    console.log('视频预览------------>', res);
+    console.log(res)
+    visible.value = true
+    options.src = res.data.data || ''
+  }).catch(err => {
+    message.error(err)
+  })
+  // 视频测试--勿删
+  // visible.value = true
+  // options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
+}
+
+onMounted(() => {
+  handleUser()
+})
+
+// 获取用户信息
+const userInfo = ref(null)
+const handleUser = () => {
+  getUser().then(res => {
+    console.log('res-----获取用户信息------->', res);
+    if (res.data.code != 0) {
+      return message.warning(res.data.msg)
+    }
+    userInfo.value = res.data.data || {}
+    userInfo.value.usernameShow = '西海岸能力超市' + (userInfo.value.deptName || '') + (userInfo.value.username || '');
+    userInfo.value.realNameShow = '西海岸能力超市' + (userInfo.value.deptName || '') + (userInfo.value.realName || '');
+  }).catch(err => {
+    message.warning(err)
+  })
+}
+
 </script>
 <style lang="less" scoped>
-  .title {
-    font-size: 0.18rem;
-    color: #000;
-    font-weight: bold;
-    margin-bottom: 0.2rem;
-    padding-left: 0.1rem;
-    border-left: 0.06rem #0058e1 solid;
-  }
-  .top {
-    margin-bottom: 0.1rem;
-    .main {
-      background: #eee;
-      padding: 0.2rem 0.2rem 0.1rem;
-      p {
+.title {
+  font-size: 0.18rem;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 0.2rem;
+  padding-left: 0.1rem;
+  border-left: 0.06rem #0058e1 solid;
+}
+
+.top {
+  margin-bottom: 0.1rem;
+
+  .main {
+    background: #eee;
+    padding: 0.2rem 0.2rem 0.1rem;
+
+    p {
+      display: flex;
+      justify-content: space-between;
+
+      &>span {
+        width: 100%;
+      }
+
+      .enclosure {
+        width: 95%;
+        padding: 0.05rem 0.1rem;
+        background: #ddd;
         display: flex;
         justify-content: space-between;
-        & > span {
-          width: 100%;
-        }
-        .enclosure {
-          width: 95%;
-          padding: 0.05rem 0.1rem;
-          background: #ddd;
-          display: flex;
-          justify-content: space-between;
-          margin-top: 0.05rem;
-        }
-        .btn:hover {
-          color: #0058e1;
-          cursor: pointer;
-        }
+        margin-top: 0.05rem;
       }
-      .item {
-        span {
-          width: 2.5rem;
-        }
+
+      .btn:hover {
+        color: #0058e1;
+        cursor: pointer;
+      }
+    }
+
+    .item {
+      span {
+        width: 2.5rem;
       }
     }
   }
-  .bottom {
-    .main {
-      .item {
-        border-top: 1px #eee solid;
-        .deptName {
-          color: #0058e1;
-          font-size: 0.16rem;
-          margin-top: 0.1rem;
+}
+
+.bottom {
+  .main {
+    .item {
+      border-top: 1px #eee solid;
+
+      .deptName {
+        color: #0058e1;
+        font-size: 0.16rem;
+        margin-top: 0.1rem;
+        display: flex;
+        align-items: center;
+
+        .img {
+          width: 0.05rem;
+          height: 0.05rem;
+          border-radius: 0.05rem;
+          background: #0058e1;
+          margin-right: 0.1rem;
+        }
+      }
+
+      .oddNumbers {
+        margin: 0.1rem 0 0 0.15rem;
+      }
+
+      .box {
+        margin-left: 0.1rem;
+
+        .ability {
+          height: 1.3rem;
           display: flex;
-          align-items: center;
-          .img {
-            width: 0.05rem;
-            height: 0.05rem;
-            border-radius: 0.05rem;
-            background: #0058e1;
-            margin-right: 0.1rem;
+          border-bottom: 1px #eee solid;
+          padding: 0.1rem 0;
+
+          .left {
+            display: inline-block;
+            width: 1.1rem;
+            height: 1.1rem;
+            margin-left: 0.1rem;
+            background: url('~@/assets/home/sxt_square.png') no-repeat;
+            background-size: 100%;
           }
-        }
-        .oddNumbers {
-          margin: 0.1rem 0 0 0.15rem;
-        }
-        .box {
-          margin-left: 0.1rem;
-          .ability {
-            height: 1.3rem;
-            display: flex;
-            border-bottom: 1px #eee solid;
-            padding: 0.1rem 0;
-            .left {
-              display: inline-block;
-              width: 1.1rem;
-              height: 1.1rem;
-              margin-left: 0.1rem;
-              background: url('~@/assets/home/sxt_square.png') no-repeat;
-              background-size: 100%;
-            }
 
-            .sxt {
-              background: url('~@/assets/home/sxt_square.png') no-repeat;
-              background-size: 100%;
-            }
-            .yyzy {
-              background: url('~@/assets/home/yyzy_square.png') no-repeat;
-              background-size: 100%;
-            }
+          .sxt {
+            background: url('~@/assets/home/sxt_square.png') no-repeat;
+            background-size: 100%;
+          }
 
-            .znsf {
-              background: url('~@/assets/home/znsf_square.png') no-repeat;
-              background-size: 100%;
-            }
+          .yyzy {
+            background: url('~@/assets/home/yyzy_square.png') no-repeat;
+            background-size: 100%;
+          }
 
-            .tcfw {
-              background: url('~@/assets/home/tcfw_square.png') no-repeat;
-              background-size: 100%;
-            }
+          .znsf {
+            background: url('~@/assets/home/znsf_square.png') no-repeat;
+            background-size: 100%;
+          }
 
-            .kfzj {
-              background: url('~@/assets/home/kfzj_square.png') no-repeat;
-              background-size: 100%;
-            }
+          .tcfw {
+            background: url('~@/assets/home/tcfw_square.png') no-repeat;
+            background-size: 100%;
+          }
 
-            .ywzj {
-              background: url('~@/assets/home/ywzj_square.png') no-repeat;
-              background-size: 100%;
-            }
-            .btn {
-              cursor: pointer;
-              color: #0087ff;
-              align-self: flex-end;
-              padding: 5px 10px;
-              border: 1px #0087ff solid;
-              border-radius: 0.2rem;
-            }
-            .right {
-              flex: 1;
-              margin-left: 0.15rem;
-              .ability-top {
-                width: 100%;
+          .kfzj {
+            background: url('~@/assets/home/kfzj_square.png') no-repeat;
+            background-size: 100%;
+          }
+
+          .ywzj {
+            background: url('~@/assets/home/ywzj_square.png') no-repeat;
+            background-size: 100%;
+          }
+
+          .btn {
+            cursor: pointer;
+            color: #0087ff;
+            align-self: flex-end;
+            padding: 5px 10px;
+            border: 1px #0087ff solid;
+            border-radius: 0.2rem;
+          }
+
+          .right {
+            flex: 1;
+            margin-left: 0.15rem;
+
+            .ability-top {
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .name {
+                width: 6rem;
+                height: 0.2rem;
                 display: flex;
-                justify-content: space-between;
-                align-items: center;
-                .name {
-                  width: 6rem;
+
+                .channelName {
+                  max-width: 5rem;
                   height: 0.2rem;
-                  display: flex;
-                  .channelName {
-                    max-width: 5rem;
-                    height: 0.2rem;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 1;
-                    -webkit-box-orient: vertical;
-                    word-break: break-all;
-                  }
-                  .type {
-                    background: #0087ff;
-                    color: #fff;
-                    line-height: 14px;
-                    padding: 2px 10px;
-                    border-radius: 10px;
-                    margin-left: 0.1rem;
-                  }
-                }
-              }
-              .ability-bottom {
-                margin-top: 0.15rem;
-                // display: flex;
-                // justify-content: space-between;
-                .dec {
-                  width: 7rem;
-                  height: 0.44rem;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  display: -webkit-box;
-                  -webkit-line-clamp: 2;
-                  -webkit-box-orient: vertical;
-                  word-break: break-all;
-                }
-                .dec2 {
-                  width: 7rem;
-                  height: 0.22rem;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   display: -webkit-box;
@@ -628,46 +608,130 @@
                   -webkit-box-orient: vertical;
                   word-break: break-all;
                 }
-                // .result:hover {
-                //   color: #0058e1;
-                //   cursor: pointer;
-                // }
-                .result {
-                  position: relative;
+
+                .type {
+                  background: #0087ff;
+                  color: #fff;
+                  line-height: 14px;
+                  padding: 2px 10px;
+                  border-radius: 10px;
+                  margin-left: 0.1rem;
                 }
               }
             }
-            .DownloadAttachment {
-              position: absolute;
-              right: 10px;
-              top: -150px;
-            }
-            .DownloadAttachment2 {
-              position: absolute;
-              right: 10px;
-              top: -110px;
+
+            .ability-bottom {
+              margin-top: 0.15rem;
+
+              // display: flex;
+              // justify-content: space-between;
+              .dec {
+                width: 7rem;
+                height: 0.44rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
+
+              .dec2 {
+                width: 7rem;
+                height: 0.22rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
+
+              // .result:hover {
+              //   color: #0058e1;
+              //   cursor: pointer;
+              // }
+              .result {
+                position: relative;
+              }
             }
           }
-          .clickCursor {
-            cursor: pointer;
+
+          .DownloadAttachment {
+            position: absolute;
+            right: 10px;
+            top: -150px;
           }
+
+          .DownloadAttachment2 {
+            position: absolute;
+            right: 10px;
+            top: -110px;
+          }
+        }
+
+        .clickCursor {
+          cursor: pointer;
         }
       }
     }
   }
+}
 
-  .single-preview-modal {
-    .ant-modal-header {
-      background: url(~@/assets/home/video-background.png) no-repeat;
-      background-size: cover;
-    }
-    .ant-modal-title {
-      font-size: 0.16rem;
-      font-weight: 500;
-      color: #ffffff;
-    }
-    .anticon {
-      color: #ffffff;
-    }
+.single-preview-modal {
+  .ant-modal-header {
+    background: url(~@/assets/home/video-background.png) no-repeat;
+    background-size: cover;
   }
+
+  .ant-modal-title {
+    font-size: 0.16rem;
+    font-weight: 500;
+    color: #ffffff;
+  }
+
+  .anticon {
+    color: #ffffff;
+  }
+}
+
+
+// 左上
+.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;
+}
+
+.waterMark {
+  position: absolute;
+  z-index: 99999999;
+  color: #0058e1;
+  font-size: 22px;
+  font-weight: bold;
+  opacity: 0.4;
+  transform: rotate(-25deg);
+  width: 470px
+}
 </style>