我的申请增加水印
This commit is contained in:
parent
2f752de364
commit
0b401f5741
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,17 +188,16 @@
|
|||
</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%">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
<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>
|
||||
</a-modal>
|
||||
|
|
@ -235,22 +205,25 @@
|
|||
</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 {
|
||||
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'
|
||||
const router = useRouter()
|
||||
const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
|
||||
const props = defineProps({
|
||||
} 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({
|
||||
})
|
||||
const whoShow1 = ref(whoShow)
|
||||
let visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '912px', //播放器宽度
|
||||
height: '513px', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
|
|
@ -276,26 +249,26 @@
|
|||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
})
|
||||
|
||||
const dept = reactive({})
|
||||
// eslint-disable-next-line no-undef
|
||||
if (infrastructure) {
|
||||
const dept = reactive({})
|
||||
// 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 = () => {
|
||||
}
|
||||
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) => {
|
||||
}
|
||||
const showArr = ref([])
|
||||
console.log(props.refObj, '=====================================')
|
||||
const endThis = (instanceId) => {
|
||||
endProcess({ instanceId: instanceId }).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('流程终止成功！')
|
||||
|
|
@ -304,8 +277,8 @@
|
|||
message.warning('流程终止失败！')
|
||||
}
|
||||
})
|
||||
}
|
||||
const modify = (id, item) => {
|
||||
}
|
||||
const modify = (id, item) => {
|
||||
getApplyForm(id).then((res) => {
|
||||
console.log('修改==============>', res.data.data, item)
|
||||
if (item.list.length > 0) {
|
||||
|
|
@ -368,8 +341,8 @@
|
|||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
if (props.refObj.resourceApplication) {
|
||||
}
|
||||
if (props.refObj.resourceApplication) {
|
||||
showArr.value = []
|
||||
for (const key in props.refObj.resourceApplication) {
|
||||
if (props.refObj.resourceApplication[key].length > 0) {
|
||||
|
|
@ -393,8 +366,8 @@
|
|||
showArr.value.push(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
const switchFunction = (data) => {
|
||||
}
|
||||
const switchFunction = (data) => {
|
||||
if (data.approveStatus === '通过') {
|
||||
let id = data.list[0].id
|
||||
const applypage = router.resolve({
|
||||
|
|
@ -405,8 +378,8 @@
|
|||
})
|
||||
window.open(applypage.href, '_blank')
|
||||
}
|
||||
}
|
||||
const downloadFile = (data, name) => {
|
||||
}
|
||||
const downloadFile = (data, name) => {
|
||||
let path = data.list[0].infoList.filter(
|
||||
(item) => item.attrType === '上传附件'
|
||||
)[0].attrValue
|
||||
|
|
@ -435,12 +408,12 @@
|
|||
URL.revokeObjectURL(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 视频预览
|
||||
const openVideo = (item) => {
|
||||
// 视频预览
|
||||
const openVideo = (item) => {
|
||||
console.log('打开视频', item)
|
||||
if(item && item.status != 1) {
|
||||
if (item && item.status != 1) {
|
||||
return message.error('当前视频离线不可预览!')
|
||||
}
|
||||
const param = {
|
||||
|
|
@ -457,28 +430,54 @@
|
|||
// 视频测试--勿删
|
||||
// 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 {
|
||||
.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 {
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-bottom: 0.1rem;
|
||||
|
||||
.main {
|
||||
background: #eee;
|
||||
padding: 0.2rem 0.2rem 0.1rem;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& > span {
|
||||
|
||||
&>span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.enclosure {
|
||||
width: 95%;
|
||||
padding: 0.05rem 0.1rem;
|
||||
|
|
@ -487,28 +486,33 @@
|
|||
justify-content: space-between;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: #0058e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
span {
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
}
|
||||
|
||||
.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,37 +656,82 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.DownloadAttachment {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
.DownloadAttachment2 {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -110px;
|
||||
}
|
||||
}
|
||||
|
||||
.clickCursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-preview-modal {
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue