671 lines
21 KiB
Vue
671 lines
21 KiB
Vue
<!--
|
||
* @Author: hisense.liangjunhua
|
||
* @Date: 2022-07-12 09:42:44
|
||
* @LastEditors: hisense.liangjunhua
|
||
* @LastEditTime: 2022-08-04 10:41:06
|
||
* @Description:我的申请 能力申请 查看详情
|
||
-->
|
||
<template>
|
||
<div class="top">
|
||
<div class="title">基本信息</div>
|
||
<div class="main">
|
||
<div>
|
||
<p class="item">
|
||
<span>申请标题：{{ props.refObj.title }}</span>
|
||
<span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
|
||
<span v-if="props.refObj.applicationSystem">
|
||
应用系统：{{ props.refObj.applicationSystem }}
|
||
</span>
|
||
<span v-else></span>
|
||
</p>
|
||
<p class="item">
|
||
<span>申请人信息：{{ props.refObj.user }}</span>
|
||
<span>电话：{{ props.refObj.phone }}</span>
|
||
<span>单位：{{ props.refObj.unit }}</span>
|
||
</p>
|
||
<p v-if="props.refObj.applicationScene.length > 0">
|
||
<span>应用场景：{{ props.refObj.applicationScene.join('；') }}</span>
|
||
</p>
|
||
<p>
|
||
<span>应用背景：{{ props.refObj.applicationBackground }}</span>
|
||
</p>
|
||
<p>
|
||
<span>期望效果：{{ props.refObj.effectWish }}</span>
|
||
</p>
|
||
<p v-if="props.refObj.enclosure">
|
||
<span>
|
||
申请单附件：
|
||
<span class="enclosure">
|
||
{{ props.refObj.enclosureName || '--' }}
|
||
<span class="btn" @click="showThis()">预览</span>
|
||
</span>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="title">申请能力</div>
|
||
<div class="main">
|
||
<div class="item" v-for="(item, index) in showArr" :key="item + index">
|
||
<div class="deptName">
|
||
<span class="img"></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<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>
|
||
<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>
|
||
</a-popconfirm>
|
||
</div>
|
||
</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="right">
|
||
<div class="ability-top">
|
||
<div class="name">
|
||
<div class="name">
|
||
<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 == '业务组件'
|
||
? '业务组件'
|
||
: '--'
|
||
}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div></div>
|
||
<!-- <div class="btn" v-if="val.type == '组件服务'">技术文档</div> -->
|
||
</div>
|
||
<div class="ability-bottom">
|
||
<div class="dec">资源描述：{{ val.description }}</div>
|
||
<div class="result">
|
||
申请结果：{{
|
||
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>
|
||
<a-button
|
||
v-if="item.approveStatus === '通过'"
|
||
@click.stop="switchFunction(item)"
|
||
>
|
||
查看详情
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box" v-if="item.list2.length > 0">
|
||
<div class="ability" v-for="val in item.list2" :key="val.channelId">
|
||
<div class="left sxt"></div>
|
||
<div class="right">
|
||
<div class="ability-top">
|
||
<div class="name">
|
||
<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>
|
||
|
||
</div>
|
||
<div class="ability-bottom">
|
||
<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
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</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',
|
||
], //显示所有按钮,
|
||
})
|
||
|
||
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 = () => {
|
||
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)
|
||
}
|
||
}
|
||
}
|
||
const switchFunction = (data) => {
|
||
if (data.approveStatus === '通过') {
|
||
let id = data.list[0].id
|
||
const applypage = router.resolve({
|
||
path: '/details', // 跳转的页面路由
|
||
query: {
|
||
id: id,
|
||
},
|
||
})
|
||
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)
|
||
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'
|
||
}
|
||
</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 {
|
||
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;
|
||
}
|
||
}
|
||
.item {
|
||
span {
|
||
width: 2.5rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
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%;
|
||
}
|
||
|
||
.znsf {
|
||
background: url('~@/assets/home/znsf_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.tcfw {
|
||
background: url('~@/assets/home/tcfw_square.png') no-repeat;
|
||
background-size: 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;
|
||
.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;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
word-break: break-all;
|
||
}
|
||
// .result:hover {
|
||
// color: #0058e1;
|
||
// cursor: pointer;
|
||
// }
|
||
.result {
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
</style>
|