372 lines
12 KiB
Vue
372 lines
12 KiB
Vue
<!--
|
||
* @Author: hisense.liangjunhua
|
||
* @Date: 2022-07-12 09:42:44
|
||
* @LastEditors: hisense.liangjunhua
|
||
* @LastEditTime: 2022-07-25 15:07:05
|
||
* @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 class="oddNumbers">子单号：{{ item.instanceId }}</div>
|
||
<div class="box" v-if="item.list.length > 0">
|
||
<div class="ability" v-for="val in item.list" :key="val.id">
|
||
<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">
|
||
{{ val.name }}
|
||
<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 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 || '审核完成' : '审核中'
|
||
}}
|
||
</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">
|
||
{{ val.channelName }}
|
||
<span class="type">基础设施</span>
|
||
</div>
|
||
</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/?channelId=' +
|
||
val.channelId
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, defineProps } from 'vue'
|
||
const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
|
||
const props = defineProps({
|
||
refObj: { type: Object, default: null },
|
||
})
|
||
const showThis = () => {
|
||
window.open(
|
||
window.SITE_CONFIG.previewUrl +
|
||
'hisense_office/onlinePreview?url=' +
|
||
btoa(encodeURI(props.refObj.enclosure))
|
||
)
|
||
}
|
||
const showArr = ref([])
|
||
console.log(props.refObj, '=====================================')
|
||
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.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)
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
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;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|