打包模式-详情

front/src/views/home/components/header.vue

@@ -151,6 +151,8 @@
 
   // eslint-disable-next-line no-undef
   const navList = ref(navListManagement.navList)
+  console.log('navList------------>', navList);
+  
   const props = defineProps({
     showView: { type: String, default: '' },
   })

front/src/views/home/components/packageAbilityList.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="box">
+        <div class="img" :style="{ 'background-image': `url(${abilityInfo.bgImg})` }"></div>
+        <div class="list-box">
+            <div v-for="(item, i) in abilityInfo.list" :key="i">
+            {{item}}</div>
+        </div>
+    </div>
+</template>
+<script setup>
+const props = defineProps({
+    abilityInfo: { type: Object, default: () => { } },
+})
+
+</script>
+<style lang="less" scoped>
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .img {
+        width: 3rem;
+        height: 3rem;
+        background-image: url('../../../assets/home/integration/jcssDetail.png');
+        background-size: 100%;
+    }
+
+}
+</style>

front/src/views/home/packagingDetails.vue

@@ -2,7 +2,58 @@
   <!-- 青岛 -->
   <div class="details-pageconetent">
     <home-header></home-header>
-    <div></div>
+    <div class="content-box">
+      <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">
+          <div class="img"></div>
+          <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="name">描述：</div> -->
+              <div class="desc">描述：{{ detailInfoObj.description +
+                  '哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊'
+                  || '--'
+              }}</div>
+            </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>
+
+      <div class="ability-list-box">
+        <div class="title-box">
+          <div class="bar"></div>
+          <span class="title-text">服务使用能力列表</span>
+        </div>
+        <div class="list-box">
+          <packageAbilityList />
+        </div>
+      </div>
+    </div>
     <home-footer></home-footer>
   </div>
 
@@ -11,143 +62,169 @@
 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 HomeHeader from '@/views/home/components/header'
 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'
+
+
+const router = useRouter()
+const id = router.currentRoute.value.query.id
+
+const detailInfoObj = ref({})
+const abilityList = ref([
+  {
+    name: '数据资源',
+    // bgImg: require('../../assets/home/integration/jcssDetail.png'),
+    list: []
+  },
+  {
+    name: '组件服务',
+    list: []
+  },
+  {
+    name: '基础设施',
+    list: []
+  },
+])
+
+// 融合服务--详情
+const getIntegrationServicesDeatil = (id) => {
+  getIntegrationDetail(id).then(
+    (res) => {
+      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)
+      })
+      console.log('abilityList.value------------>', abilityList.value);
+    },
+    (err) => {
+      message.error(err)
+    }
+  )
+}
+getIntegrationServicesDeatil(id)
 
 
 </script>
 <style lang="less" scoped>
-.resultListSearchInput-father {
+.flex-row-start {
-  background: #f3f5f9;
+  display: flex;
-  padding: 0.2rem;
+  align-items: center;
-
+  justify-content: flex-start;
-  // padding-left: 0.2rem;
-  // padding-top: 0.2rem;
-  .resultListSearchInput-son {
-    background: #fff;
-    padding: 0.2rem 0.2rem 0rem 0.3rem;
-
-    .hengxian {
-      width: 100%;
-      height: 0.01rem;
-      background: rgba(150, 144, 144, 0.3);
-      margin-top: 0.2rem;
-    }
-  }
 }
 
-.resultListSearchInput {
+.flex-row-center {
-  margin-left: 0.1rem;
+  display: flex;
-
+  align-items: center;
-  :deep(.ant-input) {
+  justify-content: center;
-    width: 4rem;
-    height: 0.36rem;
-    background: #fff;
-    border-radius: 0.04rem;
-  }
-
-  :deep(.ant-input-search-button) {
-    width: 0.8rem;
-    height: 0.36rem;
-    background: #0087ff;
-    border-radius: 0.04rem !important;
-    font-size: 0.14rem;
-    font-weight: 400;
-    color: #fff;
-    line-height: 0.34rem;
-    margin-left: 0.1rem;
-  }
-
-  :deep(.ant-input-group-addon) {
-    left: 0 !important;
-  }
-}
-
-.button-reset {
-  border: 0;
-  outline: none;
-  width: 0.8rem;
-  height: 0.36rem;
-  background: #e1edfa;
-  border-radius: 0.04rem;
-  font-size: 0.14rem;
-  font-weight: 400;
-  color: #0087ff;
-  line-height: 0.34rem;
-  margin-left: 2.5rem;
-  cursor: pointer;
 }
 
 .details-pageconetent {
-  height: 100%;
   width: 100%;
-  display: flex;
+  background: rgb(247, 247, 250);
-  justify-content: center;
+}
-  align-items: center;
-  margin-top: 0.67rem;
-  position: relative;
-  background: rgba(245, 243, 243, 0.3);
 
-  .details-pageconetent-left {
+.content-box {
-    max-height: 6.9rem;
+  width: 14rem;
-    position: absolute;
+  background: #fff;
-    width: 2.5rem;
+  margin: 0 auto;
-    top: 0.17rem;
+  padding: 0.84rem 0.4rem 0.4rem 0.4rem;
-    left: 2.5rem;
+}
-    margin-right: 0.17rem;
+
-    overflow: auto;
+.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: 20px;
+  align-items: flex-start;
+}
+
+.img {
+  width: 5rem;
+  height: 4rem;
+  background-image: url('../../assets/home/integration/jcssDetail.png');
+  background-size: 100%;
+}
+
+.right {
+  padding: 0 0.2rem;
+  flex: 1;
+  position: relative;
+  height: 4rem;
+  box-sizing: border-box;
+
+  .name {
+    font-size: 0.16rem;
+    margin-bottom: 20px;
+    margin-top: 20px;
   }
 
-  .top {
+  .area {
-    min-height: 7.2rem;
+    margin-bottom: 20px;
-    position: relative;
+  }
-    width: 11.5rem;
+
-    display: flex;
+  .desc {
-    padding-top: 0.2rem;
-    flex-direction: column;
     font-size: 0.16rem;
-    justify-content: left;
+    overflow: hidden;
-    background: #f3f5f9;
+    text-overflow: ellipsis;
-
+    display: -webkit-box;
-    .pagination {
+    -webkit-line-clamp: 6;
-      background: #f3f5f9;
+    -webkit-box-orient: vertical;
-      padding-bottom: 0.6rem;
-    }
-
-    .top-title {
-      padding: 0.2rem;
-      display: flex;
-      font-size: 18px;
-
-      .tabAll {
-        font-size: 18px;
-        color: #000000;
-        margin-right: 35px;
-        cursor: pointer;
-      }
-
-      .tabAll:nth-child(1) {
-        margin-left: 20px;
-      }
-
-      .sel {
-        font-weight: 600;
-        color: #0087ff;
-        border-bottom: 0.02rem solid #0087ff;
-      }
-    }
   }
 }
 
-:deep(.ant-card-grid) {
+.btn-box {
-  overflow: hidden;
+  position: absolute;
-  white-space: nowrap;
+  bottom: 0;
-  text-overflow: ellipsis;
+  left: 0.2rem;
-  -webkit-line-clamp: 1;
+
-  word-break: break-all;
+  .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;
 }
 </style>