打包模式详情

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

@@ -1,10 +1,13 @@
 <template>
-    <div class="box">
+    <div class="box flex-row-start">
-        <div class="img" :style="{ 'background-image': `url(${abilityInfo.bgImg})` }"></div>
+        <div class="img" :style="{ 'background-image': `url(${abilityInfo.bgImg || ''})` }"></div>
-        <div class="list-box">
+        <div class="list-box" v-if="abilityInfo.list.length">
-            <div v-for="(item, i) in abilityInfo.list" :key="i">
+            <div class="list-item" v-for="(item, i) in abilityInfo.list" :key="i" :class="i % 2 == 0 ? 'one' : ''">
                 {{ item }}</div>
         </div>
+        <div class="no-data" v-else>
+            <a-empty description="暂无数据" />
+        </div>
     </div>
 </template>
 <script setup>
@@ -12,19 +15,50 @@ const props = defineProps({
     abilityInfo: { type: Object, default: () => { } },
 })
 
+console.log('abilityInfo------------>', props.abilityInfo);
+
+
 </script>
 <style lang="less" scoped>
 .box {
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-bottom: 0.3rem;
+    padding-bottom: 0.3rem;
+    border-bottom: 2px solid #f0f0f0;
 
     .img {
         width: 3rem;
         height: 3rem;
         background-image: url('../../../assets/home/integration/jcssDetail.png');
-        background-size: 100%;
+        background-size: cover;
     }
 
 }
+
+.no-data {
+    flex: 1;
+    height: 3rem;
+    line-height: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.list-box {
+    flex: 1;
+    margin-left: 0.5rem;
+    height: 3rem;
+    overflow-y: auto;
+}
+
+.list-item {
+    padding: 0.1rem;
+    text-align: center;
+}
+
+.one {
+    background: rgb(246, 247, 249);
+}
 </style>

front/src/views/home/packagingDetails.vue

@@ -2,7 +2,7 @@
   <!-- 青岛 -->
   <div class="details-pageconetent">
     <home-header></home-header>
-    <div class="content-box">
+    <div class="content-box" v-loading="loadingPage">
       <div class="package-title">打包模式</div>
       <div class="basic-info">
         <div class="title-box">
@@ -10,7 +10,7 @@
           <span class="title-text">基本信息</span>
         </div>
         <div class="flex-row-start info-box">
-          <div class="img"></div>
+          <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">
@@ -20,11 +20,7 @@
               </div>
             </div>
             <div class="flex-row-start desc">
-              <!-- <div class="name">描述：</div> -->
+              <div class="desc">描述：{{ detailInfoObj.description || '--' }}</div>
-              <div class="desc">描述：{{ detailInfoObj.description +
-                  '哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊'
-                  || '--'
-              }}</div>
             </div>
             <div class="btn-box">
               <a-button size="big" class="btn-text" type="primary" @click="toView()">
@@ -44,71 +40,78 @@
         </div>
       </div>
 
-      <div class="ability-list-box">
+      <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 />
+          <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 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'
-
+import HomeHeader from '@/views/home/components/header'
 
 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/jcssDetail.png'),
+    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)
+        v.list = list.map(v => v.resource && v.resource.channelName) || []
       })
-      console.log('abilityList.value------------>', abilityList.value);
+      let imgList = detailInfoObj.value.fuseAttrList.filter((val) => val.attrType == '服务图片') || []
+      imgUrl.value = imgList[0] && imgList[0].attrValue || ''
     },
     (err) => {
+      loadingPage.value = false
       message.error(err)
     }
   )
@@ -169,32 +172,37 @@ getIntegrationServicesDeatil(id)
 }
 
 .info-box {
-  padding: 20px;
+  padding: 0.2rem;
   align-items: flex-start;
 }
 
 .img {
-  width: 5rem;
+  height: 3rem;
-  height: 4rem;
+  width: 4rem;
-  background-image: url('../../assets/home/integration/jcssDetail.png');
+  // background-image: url('../../assets/home/integration/jcssDetail.png');
-  background-size: 100%;
+  // background-size: 100%;
+}
+
+.ant-image-img {
+  height: 3rem;
+  width: 4rem;
 }
 
 .right {
   padding: 0 0.2rem;
   flex: 1;
   position: relative;
-  height: 4rem;
+  height: 3rem;
   box-sizing: border-box;
 
   .name {
     font-size: 0.16rem;
-    margin-bottom: 20px;
+    margin-bottom: 0.2rem;
-    margin-top: 20px;
+    margin-top: 0.2rem;
   }
 
   .area {
-    margin-bottom: 20px;
+    margin-bottom: 0.2rem;
   }
 
   .desc {
@@ -227,4 +235,8 @@ getIntegrationServicesDeatil(id)
   font-size: 0.12rem;
   border-radius: 20px;
 }
+
+.list-box {
+  padding: 0.4rem;
+}
 </style>

front/src/views/instructionManual/components/menuBook.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="menu-box">
+        <home-header></home-header>
+        <div></div>
+        <home-footer></home-footer>
+    </div>
+</template>
+<script setup>
+import HomeHeader from '@/views/home/components/header'
+import HomeFooter from '@/views/newHome/components/Footer'
+
+</script>
+<style lang="less" scoped>
+.menu-box {
+    width: 100%;
+}
+</style>