346 lines
8.6 KiB
Vue
346 lines
8.6 KiB
Vue
<template>
|
||
<!-- 青岛 -->
|
||
<div class="details-pageconetent">
|
||
<home-header></home-header>
|
||
<div class="content-box" v-loading="loadingPage">
|
||
<div class="package-title">打包模式</div>
|
||
<div class="basic-info">
|
||
<div class="title-box">
|
||
<div class="bar"></div>
|
||
<span class="title-text">基本信息</span>
|
||
</div>
|
||
<div class="flex-row-start info-box">
|
||
<a-image class="img" style="width:4rem;height:3rem" :preview="false" :src="imgUrl" />
|
||
<div class="right">
|
||
<div class="name">名称：{{ detailInfoObj.name || '--' }}</div>
|
||
<div class="flex-row-start area">
|
||
<div class="name">应用领域：</div>
|
||
<div class="flex-row-start tag" v-if="detailInfoObj.applicationArea">
|
||
{{ detailInfoObj.applicationArea }}
|
||
</div>
|
||
</div>
|
||
<div class="flex-row-start desc">
|
||
<div class="desc">描述：{{ detailInfoObj.description || '--' }}</div>
|
||
</div>
|
||
<div class="btn-box">
|
||
<a-button size="big" class="btn-text" type="primary" @click="handleAKeyApplication()">
|
||
<template #icon>
|
||
<form-outlined />
|
||
</template>
|
||
申请使用
|
||
</a-button>
|
||
<a-button size="big" class="btn-text" :type="detailInfoObj.isCollect == 'true' ? 'primary' : ''"
|
||
@click="addCollect()">
|
||
<template #icon>
|
||
<form-outlined />
|
||
</template>
|
||
收藏
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ability-list-box" style="margin-top: 30px">
|
||
<div class="title-box">
|
||
<div class="bar"></div>
|
||
<span class="title-text">服务使用能力列表</span>
|
||
</div>
|
||
<div class="list-box">
|
||
<packageAbilityList style="margin-bottom:20px" v-for="(item, i) in abilityList" :abilityInfo="item"
|
||
:key="i" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<home-footer></home-footer>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script setup>
|
||
import HomeFooter from '@/views/newHome/components/Footer'
|
||
import mybus from '@/myplugins/mybus'
|
||
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
|
||
import { getIntegrationServicesList } from '@/api/home.js'
|
||
import { useRouter } from 'vue-router'
|
||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||
import packageAbilityList from '@/views/home/components/packageAbilityList.vue'
|
||
import { message } from 'ant-design-vue'
|
||
import { getIntegrationDetail } from '@/api/home'
|
||
import HomeHeader from '@/views/home/components/header'
|
||
import { scInsert, scDel } from '@/api/personalCenter'
|
||
|
||
const router = useRouter()
|
||
const id = router.currentRoute.value.query.id
|
||
const loadingPage = ref(false)
|
||
|
||
const detailInfoObj = ref({})
|
||
const abilityList = ref([
|
||
{
|
||
name: '数据资源',
|
||
bgImg: require('../../assets/home/integration/sjzyDetail.png'),
|
||
list: []
|
||
},
|
||
{
|
||
name: '组件服务',
|
||
bgImg: require('../../assets/home/integration/zjfwDetail.png'),
|
||
list: []
|
||
},
|
||
{
|
||
name: '基础设施',
|
||
bgImg: require('../../assets/home/integration/jcssDetail.png'),
|
||
list: []
|
||
},
|
||
])
|
||
const imgUrl = ref('')
|
||
|
||
// 融合服务--详情
|
||
const getIntegrationServicesDeatil = (id) => {
|
||
loadingPage.value = true
|
||
getIntegrationDetail(id).then(
|
||
(res) => {
|
||
loadingPage.value = false
|
||
if (res.data.code !== 0) {
|
||
return message.error(res.data.msg)
|
||
}
|
||
detailInfoObj.value = res.data.data || {}
|
||
console.log('detailInfoObj------------>', detailInfoObj);
|
||
|
||
let fuseResourceList = detailInfoObj.value.fuseResourceList || []
|
||
abilityList.value.map(v => {
|
||
let list = fuseResourceList.filter(x => x.type == v.name) || [];
|
||
v.list = list.map(v => v.resource && v.resource.channelName) || []
|
||
})
|
||
let imgList = detailInfoObj.value.fuseAttrList.filter((val) => val.attrType == '服务图片') || []
|
||
imgUrl.value = imgList[0] && imgList[0].attrValue || ''
|
||
},
|
||
(err) => {
|
||
loadingPage.value = false
|
||
message.error(err)
|
||
}
|
||
)
|
||
}
|
||
|
||
// 一键申请
|
||
const handleAKeyApplication = () => {
|
||
let _applyList = [];
|
||
let fuseResourceList = detailInfoObj.value.fuseResourceList || []
|
||
let jcssArray = fuseResourceList.filter(v => v.type === '基础设施')
|
||
let otherArray = fuseResourceList.filter(v => v.type !== '基础设施')
|
||
jcssArray = jcssArray.map(v => {
|
||
v = Object.assign(v, v.resource)
|
||
return v
|
||
})
|
||
let jcss = [
|
||
{
|
||
arr: [
|
||
{
|
||
description: '',
|
||
note1: JSON.stringify(jcssArray),
|
||
resourceId: '1522550195055828996',
|
||
resourceName: '摄像头列表',
|
||
type: '基础设施',
|
||
},
|
||
],
|
||
deptId: '',
|
||
deptName: '',
|
||
},
|
||
]
|
||
if (infrastructure) {
|
||
jcss[0].deptId = infrastructure.deptId
|
||
jcss[0].deptName = infrastructure.deptName
|
||
}
|
||
otherArray.map((v) => {
|
||
let resource = v.resource || {}
|
||
console.log('resource------------>', resource);
|
||
let obj = {
|
||
arr: [
|
||
{
|
||
delFlag: resource.delFlag,
|
||
description: resource.description,
|
||
resourceId: resource.id,
|
||
resourceName: resource.name,
|
||
time: resource.createDate,
|
||
type: resource.type,
|
||
},
|
||
],
|
||
deptId: resource.deptId,
|
||
deptName: resource.deptName,
|
||
}
|
||
_applyList.push(obj)
|
||
})
|
||
_applyList = jcss.concat(_applyList)
|
||
localStorage.setItem('applyList', JSON.stringify(_applyList))
|
||
router.push({
|
||
path: '/apply',
|
||
})
|
||
}
|
||
|
||
const dataPosting = ref(true)
|
||
const addCollect = () => {
|
||
if (dataPosting.value && detailInfoObj.value.id) {
|
||
dataPosting.value = false
|
||
if (detailInfoObj.value.isCollect == 'true') {
|
||
scDel([detailInfoObj.value.id]).then((res) => {
|
||
if (res.data.msg === 'success') {
|
||
message.success('取消成功')
|
||
detailInfoObj.value.isCollect = 'false'
|
||
detailInfoObj.value.collectCount--
|
||
dataPosting.value = true
|
||
console.log('收藏2===============>', res.data, dataPosting.value)
|
||
getIntegrationServicesDeatil(id)
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log('err------------>', err);
|
||
message.success(err)
|
||
})
|
||
} else {
|
||
scInsert([
|
||
{
|
||
resourceId: detailInfoObj.value.id,
|
||
},
|
||
]).then((res) => {
|
||
if (res.data.msg === 'success') {
|
||
message.success('添加收藏成功！')
|
||
detailInfoObj.value.isCollect = 'true'
|
||
detailInfoObj.value.collectCount++
|
||
dataPosting.value = true
|
||
console.log('收藏2===============>', res.data, dataPosting.value)
|
||
getIntegrationServicesDeatil(id)
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log('err------------>', err);
|
||
message.success(err)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
getIntegrationServicesDeatil(id)
|
||
|
||
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex-row-start {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.flex-row-center {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.details-pageconetent {
|
||
width: 100%;
|
||
background: rgb(247, 247, 250);
|
||
}
|
||
|
||
.content-box {
|
||
width: 14rem;
|
||
background: #fff;
|
||
margin: 0 auto;
|
||
padding: 0.84rem 0.4rem 0.4rem 0.4rem;
|
||
}
|
||
|
||
.package-title {
|
||
padding: 10px 0;
|
||
color: #000;
|
||
font-size: 0.18rem;
|
||
}
|
||
|
||
.title-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
padding: 10px 0;
|
||
border-bottom: 2px solid #f0f0f0;
|
||
}
|
||
|
||
.bar {
|
||
height: 26px;
|
||
width: 6px;
|
||
background: #0058e1;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 0.16rem;
|
||
}
|
||
|
||
.info-box {
|
||
padding: 0.2rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.img {
|
||
height: 3rem;
|
||
width: 4rem;
|
||
// background-image: url('../../assets/home/integration/jcssDetail.png');
|
||
// background-size: 100%;
|
||
}
|
||
|
||
.ant-image-img {
|
||
height: 3rem;
|
||
width: 4rem;
|
||
}
|
||
|
||
.right {
|
||
padding: 0 0.2rem;
|
||
flex: 1;
|
||
position: relative;
|
||
height: 3rem;
|
||
box-sizing: border-box;
|
||
|
||
.name {
|
||
font-size: 0.16rem;
|
||
margin-bottom: 0.2rem;
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.area {
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 0.16rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 6;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
|
||
.btn-box {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0.2rem;
|
||
|
||
.btn-text {
|
||
bottom: 0.2rem;
|
||
height: 0.4rem;
|
||
width: 1.2rem;
|
||
margin-right: 0.2rem;
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
padding: 4px 10px;
|
||
background: #40a9ff;
|
||
color: #fff;
|
||
font-size: 0.12rem;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.list-box {
|
||
padding: 0.4rem;
|
||
}
|
||
|
||
</style>
|