From 44d1aad7ddb4f956bf1e2fdcfef5230ca503bec4 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Fri, 29 Jul 2022 18:09:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8C=85=E6=A8=A1=E5=BC=8F=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/packageAbilityList.vue    | 46 +++++++++++--
 front/src/views/home/packagingDetails.vue     | 64 +++++++++++--------
 .../instructionManual/components/menuBook.vue | 17 +++++
 3 files changed, 95 insertions(+), 32 deletions(-)
 create mode 100644 front/src/views/instructionManual/components/menuBook.vue

diff --git a/front/src/views/home/components/packageAbilityList.vue b/front/src/views/home/components/packageAbilityList.vue
index 051ad962..d72eeaa8 100644
--- a/front/src/views/home/components/packageAbilityList.vue
+++ b/front/src/views/home/components/packageAbilityList.vue
@@ -1,9 +1,12 @@
 <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 class="box flex-row-start">
+        <div class="img" :style="{ 'background-image': `url(${abilityInfo.bgImg || ''})` }"></div>
+        <div class="list-box" v-if="abilityInfo.list.length">
+            <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>
@@ -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>
\ No newline at end of file
diff --git a/front/src/views/home/packagingDetails.vue b/front/src/views/home/packagingDetails.vue
index 14a6cf19..29f6282a 100644
--- a/front/src/views/home/packagingDetails.vue
+++ b/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: 4rem;
-  background-image: url('../../assets/home/integration/jcssDetail.png');
-  background-size: 100%;
+  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: 4rem;
+  height: 3rem;
   box-sizing: border-box;
 
   .name {
     font-size: 0.16rem;
-    margin-bottom: 20px;
-    margin-top: 20px;
+    margin-bottom: 0.2rem;
+    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>
diff --git a/front/src/views/instructionManual/components/menuBook.vue b/front/src/views/instructionManual/components/menuBook.vue
new file mode 100644
index 00000000..839c4128
--- /dev/null
+++ b/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>
\ No newline at end of file