赋能场景详情补充

front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue

@@ -44,14 +44,6 @@
         </a-tooltip>
       </div>
       <div class="bottom" v-if="props.dataList.id">
-        <a-button type="primary" @click="toView()">
-          <template #icon><form-outlined /></template>
-          申请使用
-        </a-button>
-        <a-button type="primary" @click="addShoppingCart()">
-          <template #icon><shopping-cart-outlined /></template>
-          加入购物车
-        </a-button>
         <!-- 融合服务 存在fuseResourceList -->
         <a-button
           type="primary"
@@ -63,6 +55,14 @@
           </template>
           申请使用
         </a-button>
+        <a-button v-else type="primary" @click="toView()">
+          <template #icon><form-outlined /></template>
+          申请使用
+        </a-button>
+        <a-button v-if="!dataList.fuseResourceList" type="primary" @click="addShoppingCart()">
+          <template #icon><shopping-cart-outlined /></template>
+          加入购物车
+        </a-button>
         <a-button type="primary" @click="goTOCollection()">
           {{ props.dataList.isCollect == 'true' ? '已' : '' }}收藏
         </a-button>

front/src/views/home/integrationServicesDetails.vue

@@ -56,22 +56,43 @@
 
     <!-- 使用能力 -->
     <div
-      id="integration-combination-ability"
+      id="integration-ability"
-      class="combination-ability scrollBox"
+      class="ability scrollBox"
     >
       <div class="title-1">
-        <DetalsTitle title="使用能力" type="COMBINATION ABILITY"></DetalsTitle>
+        <DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle>
-      </div>
-      <div class="flex-row-center combine-content">
-        <div class="combine-item" v-for="(item, i) in combineList" :key="i">
-          <div class="title">{{ item.title }}</div>
-          <div class="name-box">
-            <div class="name-text" v-for="(name, j) in item.list" :key="j">
-              {{ name }}
-            </div>
       </div>
+      <template v-for="(item, i) in combineList" :key="i">
+        <div class="flex-row-center combine-content" v-if="item.list.length>0">
+          <div class="title">{{item.title}}</div>
+          <div>
+            <el-table
+              :data="item.list"
+              stripe
+              style="width: 100%"
+              :header-cell-style="{'text-align': 'center'}"
+              @row-click="openResourceDetail">
+              <el-table-column
+                prop="name"
+                label="数据"
+                align="center"
+                width="100">
+              </el-table-column>
+              <el-table-column
+                prop="dept"
+                label="能力来源"
+                align="center"
+                width="180">
+              </el-table-column>
+              <el-table-column
+                prop="platform"
+                label="申请平台"
+                align="center">
+              </el-table-column>
+            </el-table>
           </div>
         </div>
+      </template>
     </div>
 
     <!-- 构建步骤 -->
@@ -82,7 +103,7 @@
       <div class="title-1">
         <DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
       </div>
-      <div class="flex-row-center">
+      <div class="flex-row-center step-content">
         <div style="height: 300px;">
           <el-steps direction="vertical" :active="step.length">
             <el-step v-for="(item, i) in step" :key="i" :title="item.question" :description="item.answer"></el-step>
@@ -135,7 +156,7 @@
     },
     {
       name: '使用能力',
-      key: 'integration-combination-ability',
+      key: 'integration-ability',
     },
     {
       name: '构建步骤',
@@ -234,14 +255,25 @@
           attrType: '应用领域',
           attrValue: fuseAttrList.find((v) => v.attrType === '应用领域').attrValue,
         }
-        combineList.value.map((item) => {
+        combineList.value.forEach((item) => {
-          let arr = (
+          let arr = []
-            fuseResourceList.filter(
+          let resource=fuseResourceList.filter((v)=>v.resource && v.type == item.title)
-              (v) => v.resource && v.resource.type == item.title
+          if(resource.length>0){
-            ) || []
+            if(item.title==='基础设施'){
-          ).map((d) => d.resource.name)
+              arr=resource.map(res=>({
+                id: res.resource.idtCameraChannel, name: res.resource.channelName, dept: res.resource.nodeName, platform: 'UCS'
+              }))
+            }else if(item.title==='组件服务'){
+              arr=resource.map(res=>({
+                id: res.resource.id, name: res.resource.name, dept: res.resource.deptName, platform: 'UCS'
+              }))
+            }else if(item.title==='数据资源'){
+              arr=resource.map(res=>({
+                id: res.resource.zycode, name: res.resource.zyname, dept: res.resource.TGBM, platform: 'UCS'
+              }))
+            }
+          }
           item.list = arr
-          return item
         })
         detailInfoObj.value.infoList = []
         detailInfoObj.value.infoList.push(questionObj)
@@ -254,6 +286,10 @@
   }
   getIntegrationServicesDeatil(id)
 
+  function openResourceDetail(row, column, event){
+    console.log(row)
+  }
+
   function handleOpenUrl(type) {
     let obj =
       (detailInfoObj.value.fuseAttrList || []).find(
@@ -459,10 +495,12 @@
   .step {
     padding: 0.8rem 0;
     background: rgb(247, 248, 250);
-
+    .step-content {
+      margin-top: 0.3rem;
+    }
   }
 
-  .combination-ability {
+  .ability {
     padding: 0.8rem 0;
     background: rgb(247, 248, 250);
 
@@ -471,34 +509,14 @@
     }
 
     .combine-content {
-      width: 13rem;
+      margin-top: 0.3rem;
-      margin: 0 auto;
+      align-items: flex-start;
-    }
-
-    .combine-item {
-      margin: 0 0.1rem;
-      width: 4.28rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      border: 1px solid #e4e6f5;
-      border-radius: 0.1rem;
-      padding: 0.1rem 0;
-      cursor: pointer;
-      height: 2.5rem;
-
-      &:hover {
-        border-radius: 0.02rem;
-        border: 0.01rem solid #0058e1;
-        box-shadow: 0rem 0.08rem 0.2rem rgb(0 88 225 / 30%);
-      }
-
       .title {
-        color: #212121;
+        height: 2rem;
-        text-align: center;
+        width: 2rem;
-        padding: 0.2rem 0;
+        margin-right: 0.5rem;
-        font-size: 0.22rem;
+        background: url('~@/assets/home/rhfw_square.png') no-repeat;
-        text-align: center;
+        background-size: 100%;
       }
     }