hi-ucs/front/src/views/home/packagingDetails.vue

243 lines
5.7 KiB
Vue
Raw Normal View History

2022-07-28 17:52:31 +08:00
<template>
<!-- 青岛 -->
<div class="details-pageconetent">
<home-header></home-header>
2022-07-29 18:09:06 +08:00
<div class="content-box" v-loading="loadingPage">
2022-07-29 15:36:21 +08:00
<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">
2022-07-29 18:09:06 +08:00
<a-image class="img" style="width:4rem;height:3rem" :preview="false" :src="imgUrl" />
2022-07-29 15:36:21 +08:00
<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">
2022-07-29 18:09:06 +08:00
<div class="desc">描述{{ detailInfoObj.description || '--' }}</div>
2022-07-29 15:36:21 +08:00
</div>
<div class="btn-box">
<a-button size="big" class="btn-text" type="primary" @click="toView()">
<template #icon>
<form-outlined />
</template>
申请使用
</a-button>
<a-button size="big" class="btn-text" type="primary" @click="toView()">
<template #icon>
<form-outlined />
</template>
收藏
</a-button>
</div>
</div>
</div>
</div>
2022-07-29 18:09:06 +08:00
<div class="ability-list-box" style="margin-top: 30px">
2022-07-29 15:36:21 +08:00
<div class="title-box">
<div class="bar"></div>
<span class="title-text">服务使用能力列表</span>
</div>
<div class="list-box">
2022-07-29 18:09:06 +08:00
<packageAbilityList style="margin-bottom:20px" v-for="(item, i) in abilityList" :abilityInfo="item"
:key="i" />
2022-07-29 15:36:21 +08:00
</div>
</div>
</div>
2022-07-28 17:52:31 +08:00
<home-footer></home-footer>
</div>
</template>
2022-07-29 18:09:06 +08:00
2022-07-28 17:52:31 +08:00
<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'
2022-07-29 15:36:21 +08:00
import packageAbilityList from '@/views/home/components/packageAbilityList.vue'
2022-07-28 17:52:31 +08:00
import { message } from 'ant-design-vue'
2022-07-29 15:36:21 +08:00
import { getIntegrationDetail } from '@/api/home'
2022-07-29 18:09:06 +08:00
import HomeHeader from '@/views/home/components/header'
2022-07-29 15:36:21 +08:00
const router = useRouter()
const id = router.currentRoute.value.query.id
2022-07-29 18:09:06 +08:00
const loadingPage = ref(false)
2022-07-29 15:36:21 +08:00
const detailInfoObj = ref({})
const abilityList = ref([
{
name: '数据资源',
2022-07-29 18:09:06 +08:00
bgImg: require('../../assets/home/integration/sjzyDetail.png'),
2022-07-29 15:36:21 +08:00
list: []
},
{
name: '组件服务',
2022-07-29 18:09:06 +08:00
bgImg: require('../../assets/home/integration/zjfwDetail.png'),
2022-07-29 15:36:21 +08:00
list: []
},
{
name: '基础设施',
2022-07-29 18:09:06 +08:00
bgImg: require('../../assets/home/integration/jcssDetail.png'),
2022-07-29 15:36:21 +08:00
list: []
},
])
2022-07-29 18:09:06 +08:00
const imgUrl = ref('')
2022-07-29 15:36:21 +08:00
// 融合服务--详情
const getIntegrationServicesDeatil = (id) => {
2022-07-29 18:09:06 +08:00
loadingPage.value = true
2022-07-29 15:36:21 +08:00
getIntegrationDetail(id).then(
(res) => {
2022-07-29 18:09:06 +08:00
loadingPage.value = false
2022-07-29 15:36:21 +08:00
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
detailInfoObj.value = res.data.data || {}
let fuseResourceList = detailInfoObj.value.fuseResourceList || []
abilityList.value.map(v => {
let list = fuseResourceList.filter(x => x.type == v.name) || [];
2022-07-29 18:09:06 +08:00
v.list = list.map(v => v.resource && v.resource.channelName) || []
2022-07-29 15:36:21 +08:00
})
2022-07-29 18:09:06 +08:00
let imgList = detailInfoObj.value.fuseAttrList.filter((val) => val.attrType == '服务图片') || []
imgUrl.value = imgList[0] && imgList[0].attrValue || ''
2022-07-29 15:36:21 +08:00
},
(err) => {
2022-07-29 18:09:06 +08:00
loadingPage.value = false
2022-07-29 15:36:21 +08:00
message.error(err)
}
)
}
getIntegrationServicesDeatil(id)
2022-07-28 17:52:31 +08:00
</script>
<style lang="less" scoped>
2022-07-29 15:36:21 +08:00
.flex-row-start {
display: flex;
align-items: center;
justify-content: flex-start;
2022-07-28 17:52:31 +08:00
}
2022-07-29 15:36:21 +08:00
.flex-row-center {
display: flex;
align-items: center;
justify-content: center;
}
2022-07-28 17:52:31 +08:00
2022-07-29 15:36:21 +08:00
.details-pageconetent {
width: 100%;
background: rgb(247, 247, 250);
}
2022-07-28 17:52:31 +08:00
2022-07-29 15:36:21 +08:00
.content-box {
width: 14rem;
background: #fff;
margin: 0 auto;
padding: 0.84rem 0.4rem 0.4rem 0.4rem;
2022-07-28 17:52:31 +08:00
}
2022-07-29 15:36:21 +08:00
.package-title {
padding: 10px 0;
color: #000;
font-size: 0.18rem;
2022-07-28 17:52:31 +08:00
}
2022-07-29 15:36:21 +08:00
.title-box {
2022-07-28 17:52:31 +08:00
display: flex;
align-items: center;
2022-07-29 15:36:21 +08:00
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 {
2022-07-29 18:09:06 +08:00
padding: 0.2rem;
2022-07-29 15:36:21 +08:00
align-items: flex-start;
}
.img {
2022-07-29 18:09:06 +08:00
height: 3rem;
width: 4rem;
// background-image: url('../../assets/home/integration/jcssDetail.png');
// background-size: 100%;
}
.ant-image-img {
height: 3rem;
width: 4rem;
2022-07-29 15:36:21 +08:00
}
.right {
padding: 0 0.2rem;
flex: 1;
2022-07-28 17:52:31 +08:00
position: relative;
2022-07-29 18:09:06 +08:00
height: 3rem;
2022-07-29 15:36:21 +08:00
box-sizing: border-box;
2022-07-28 17:52:31 +08:00
2022-07-29 15:36:21 +08:00
.name {
2022-07-28 17:52:31 +08:00
font-size: 0.16rem;
2022-07-29 18:09:06 +08:00
margin-bottom: 0.2rem;
margin-top: 0.2rem;
2022-07-29 15:36:21 +08:00
}
2022-07-28 17:52:31 +08:00
2022-07-29 15:36:21 +08:00
.area {
2022-07-29 18:09:06 +08:00
margin-bottom: 0.2rem;
2022-07-29 15:36:21 +08:00
}
2022-07-28 17:52:31 +08:00
2022-07-29 15:36:21 +08:00
.desc {
font-size: 0.16rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
}
2022-07-28 17:52:31 +08:00
2022-07-29 15:36:21 +08:00
.btn-box {
position: absolute;
bottom: 0;
left: 0.2rem;
2022-07-28 17:52:31 +08:00
2022-07-29 15:36:21 +08:00
.btn-text {
bottom: 0.2rem;
height: 0.4rem;
width: 1.2rem;
margin-right: 0.2rem;
2022-07-28 17:52:31 +08:00
}
}
2022-07-29 15:36:21 +08:00
.tag {
padding: 4px 10px;
background: #40a9ff;
color: #fff;
font-size: 0.12rem;
border-radius: 20px;
2022-07-28 17:52:31 +08:00
}
2022-07-29 18:09:06 +08:00
.list-box {
padding: 0.4rem;
}
2022-07-28 17:52:31 +08:00
</style>