wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

我的申请增加水印

This commit is contained in:
guoyue 2022-09-27 09:49:30 +08:00
parent 2f752de364
commit 0b401f5741
2 changed files with 600 additions and 526 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
front/src/views/home/infrastructurePage.vue
View File

@ -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>

168
front/src/views/personalCenter/components/AbilityApplication.vue
View File

@ -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,15 +72,9 @@
</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="
<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(
@ -112,8 +94,7 @@
)[0].attrValue == '业务组件'
? 'ywzj'
: 'yyzy'
"
></div>
"></div>
<div class="right">
<div class="ability-top">
<div class="name">
@ -153,22 +134,15 @@
申请结果：{{
item.ended ? item.approveStatus || '审核完成' : '审核中'
}}
<a-button
v-if="
<a-button v-if="
item.approveStatus === '通过' &&
val.infoList.filter(
(item) => item.attrType == '上传附件'
)[0]
"
@click.stop="downloadFile(item, '附件下载')"
class="DownloadAttachment"
>
" @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>
@ -217,16 +188,15 @@
</div>
<!-- 单个预览弹窗 -->
<a-modal
wrapClassName="single-preview-modal"
v-model:visible="visible"
title="视频预览"
:width="960"
destroyOnClose
>
<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%">
<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>
</div>
@ -235,7 +205,7 @@
</div>
</template>
<script setup>
import { ref, defineProps, reactive } from 'vue'
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'
@ -243,6 +213,9 @@
import {
getStreamByChannelCode,
} from '@/api/videoSurveillance'
import {
getUser,
} from '@/api/home'
const router = useRouter()
const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
const props = defineProps({
@ -458,6 +431,27 @@
// 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 {
@ -468,17 +462,22 @@
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;
@ -487,11 +486,13 @@
justify-content: space-between;
margin-top: 0.05rem;
}
.btn:hover {
color: #0058e1;
cursor: pointer;
}
}
.item {
span {
width: 2.5rem;
@ -499,16 +500,19 @@
}
}
}
.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;
@ -517,16 +521,20 @@
margin-right: 0.1rem;
}
}
.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;
@ -540,6 +548,7 @@
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%;
@ -564,6 +573,7 @@
background: url('~@/assets/home/ywzj_square.png') no-repeat;
background-size: 100%;
}
.btn {
cursor: pointer;
color: #0087ff;
@ -572,18 +582,22 @@
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;
.channelName {
max-width: 5rem;
height: 0.2rem;
@ -594,6 +608,7 @@
-webkit-box-orient: vertical;
word-break: break-all;
}
.type {
background: #0087ff;
color: #fff;
@ -604,8 +619,10 @@
}
}
}
.ability-bottom {
margin-top: 0.15rem;
// display: flex;
// justify-content: space-between;
.dec {
@ -618,6 +635,7 @@
-webkit-box-orient: vertical;
word-break: break-all;
}
.dec2 {
width: 7rem;
height: 0.22rem;
@ -628,6 +646,7 @@
-webkit-box-orient: vertical;
word-break: break-all;
}
// .result:hover {
// color: #0058e1;
// cursor: pointer;
@ -637,17 +656,20 @@
}
}
}
.DownloadAttachment {
position: absolute;
right: 10px;
top: -150px;
}
.DownloadAttachment2 {
position: absolute;
right: 10px;
top: -110px;
}
}
.clickCursor {
cursor: pointer;
}
@ -661,13 +683,55 @@
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>