西海岸：基础设施--视频预览增加水印

front/src/views/home/infrastructurePage.vue

@@ -358,6 +358,10 @@
           <div style="width: 100%; height: 100%;position:relative">
             <!-- 预览视频--遮罩 -->
             <div class="video-cover" @click="videoShowMsg"></div>
+            <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>
         </div>
@@ -384,6 +388,8 @@
         <a-pagination v-model:current="current" :total="videoTotal" defaultPageSize="4" :showSizeChanger="false"
           @change="batchPicturePreview" show-less-items />
       </a-modal>
+
+
       <!-- 批量预览视频弹窗 -->
       <a-modal wrapClassName="batch-preview-modal" v-model:visible="batchVisible" title="视频批量预览" :width="1060"
         destroyOnClose @cancel="videoClean">
@@ -392,6 +398,10 @@
           <div v-for="(item, index) in videoList" :key="item.id" style="width: 100%; height: 100%;position:relative">
             <!-- 批量预览视频--遮罩 -->
             <div class="batch-video-cover" @click="videoShowMsg(index)"></div>
+            <div class="batch-waterMark batch-waterMark-left-top">{{userInfo.usernameShow}}</div>
+            <div class="batch-waterMark batch-waterMark-right-top">{{userInfo.realNameShow}}</div>
+            <div class="batch-waterMark batch-waterMark-left-bottom">{{userInfo.usernameShow}}</div>
+            <div class="batch-waterMark batch-waterMark-right-bottom">{{userInfo.realNameShow}}</div>
             <p></p>
             <vue3VideoPlay v-bind="item.options" />
           </div>
@@ -399,6 +409,7 @@
         <a-pagination v-model:current="current" :total="videoTotal" defaultPageSize="4" :showSizeChanger="false"
           @change="batchPreview" show-less-items />
       </a-modal>
+
       <a-modal wrapClassName="wrj" v-model:visible="wrjVisible" :width="1000" :title="wrjName + '详情'"
         @ok="wrjVisible = false">
         <div v-for="(db, key) in wrjData" :key="key">
@@ -438,6 +449,10 @@ import {
   computed,
 
 } from 'vue'
+import {
+  getUser,
+  getUserInfo,
+} from '@/api/home'
 import {
   getCameraByParentId,
   getStreamByChannelCode,
@@ -607,6 +622,8 @@ if (props.searchValue) {
   mapSearchParam.value.cameraName = props.searchValue
 }
 onMounted(() => {
+  handleUser()
+
   if (jcssType.value) {
     tabClick(0, jcssType.value)
     if (jcssType.value == '视频资源') {
@@ -691,9 +708,9 @@ if (whoShow1.value.itShowXiHaiAn) {
 
 // 单个预览，当前点击数据
 const rowClickData = ref(null)
-// 打开视频预览 todo1
+// 打开视频预览
 const openVideo = (id, item) => {
-  if(item) {
+  if (item) {
     rowClickData.value = item;
   }
   console.log('打开视频', id)
@@ -1611,8 +1628,6 @@ const onSelectChange = (record, selected, selectedRows, nativeEvent) => {
     )
   }
   console.log('已选中======================>', selectedList.value)
-  // selectedList.value = selectedRows
-  // allClick.value = selectedRowKeys
 }
 const onSelectAll = (selected, selectedRows, changeRows) => {
   if (selected) {
@@ -1677,6 +1692,23 @@ const videoShowMsg = (index) => {
   }
   message.warning(msg)
 }
+
+// 获取用户信息 todo
+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)
+    console.log('err----获取用户信息-------->', err);
+  })
+}
 </script>
 <style lang="less" scoped>
 .infrastructrueBox {
@@ -2120,4 +2152,72 @@ video::-webkit-media-controls {
   cursor: pointer;
 }
 
+.waterMark {
+  position: absolute;
+  z-index: 99999999;
+  color: #0058e1;
+  font-size: 22px;
+  font-weight: bold;
+  opacity: 0.4;
+  transform: rotate(-25deg);
+}
+
+.batch-waterMark {
+  position: absolute;
+  z-index: 99999999;
+  color: #0058e1;
+  font-size: 14px;
+  opacity: 0.4;
+  transform: rotate(-25deg);
+}
+
+// 左上
+.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;
+}
+
+// 右上
+.batch-waterMark-right-top {
+  right: 30px;
+  top: 50px;
+}
+
+// 左下
+.batch-waterMark-left-bottom {
+  left: 30px;
+  bottom: 50px;
+}
+
+// 右下
+.batch-waterMark-right-bottom {
+  right: 30px;
+  bottom: 50px;
+}
 </style>