融合服务修改

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

@@ -47,24 +47,21 @@
         </div>
         <div class="bottomdesc" v-else-if="dowmOrUp === '展开>>'">
           场景描述： {{ props.dataList.description.slice(0, 183) }}...
-          <span
+          <span style="cursor: pointer; color: rgb(241 211 112)" @click="showDetail(dowmOrUp)">
-            style="cursor: pointer; color: rgb(241 211 112)"
-            @click="showDetail(dowmOrUp)"
-          >
             {{ dowmOrUp }}
           </span>
         </div>
         <div class="bottomdesc1" v-else>
           场景描述： {{ props.dataList.description }}
-          <span
+          <span style="cursor: pointer; color: rgb(241 211 112)" @click="showDetail(dowmOrUp)">
-            style="cursor: pointer; color: rgb(241 211 112)"
-            @click="showDetail(dowmOrUp)"
-          >
             {{ dowmOrUp }}
           </span>
         </div>
         <div style="padding-top: 20px">
-          <span>场景入口:</span>
+          <a-button class="rukou" @click="openScene(props.dataList.sceneUrl)">
+            进入场景
+          </a-button>
+          <!-- <span>场景入口:</span>
           <span
             style="
               margin-left: 10px;
@@ -74,7 +71,7 @@
             @click="openScene(props.dataList.sceneUrl)"
           >
             {{ props.dataList.sceneUrl }}
-          </span>
+          </span> -->
         </div>
       </div>
       <div class="bottom" v-if="props.dataList.id">
@@ -339,6 +336,17 @@ watch(
     }
 
     .main {
+
+      .rukou {
+       margin-top:24px;
+       background: #0058e1;
+        color: #ffffff;
+        width: 90px;
+        height: 32px;
+        border-radius: 2px;
+        border: 1px #0058e1 solid;
+
+      }
       .bottomdesc {
         display: -webkit-box;
         /*设置为弹性盒子*/
@@ -353,12 +361,14 @@ watch(
         width: 800px;
         font-size: 16px;
       }
+
       .bottomdesc1 {
         overflow: auto;
         width: 800px;
         font-size: 16px;
         height: 200px;
       }
+
       margin-top: 0.2rem;
       font-size: 0.18rem;
       line-height: 0.34rem;

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

@@ -58,6 +58,7 @@ function toView(item) {
     path: '/integrationServicesDetails',
     query: {
       id: item.id,
+      districtType:item.district,
       type:'典型赋能场景'
     },
   })

front/src/views/home/detailBack.vue

@@ -26,16 +26,26 @@ const oldValue1 = ref('')
 const props = defineProps({
   textColor: { type: String, default: '' },
   returnType: { type: String, default: '' },
+  districtType:{ type: Number, default: 0 },
 })
 const returnType = props.returnType
+const districtType = props.districtType
 const previousPage = () => {
-  if (returnType =='典型赋能场景'|| returnType =='打包模式') {
+  if (returnType =='打包模式') {
     router.push({
       path: '/integrationServices',
       query: {
         returnType: returnType,
             },
     })
+  }else if(returnType =='典型赋能场景'){
+    router.push({
+      path: '/integrationServices',
+      query: {
+        returnType: returnType,
+        districtType:districtType,
+            },
+    })
   } else {
     if (window.history.state.back) {
       window.history.go(-1)

front/src/views/home/integrationServices.vue

@@ -124,6 +124,7 @@ export default defineComponent({
     const router = useRouter()
     const select = router.currentRoute.value.query.select
     const returnType = router.currentRoute.value.query.returnType
+    const districtType = router.currentRoute.value.query.districtType
     const searchValue = ref('')
     const Cardsname = ref(select)
     const resourceList = reactive({ data: [] })
@@ -352,9 +353,15 @@ export default defineComponent({
     onMounted(() => {
       searchAreas()
       if (returnType == '典型赋能场景') {
-        changeCards(0)
          
-      } else if (returnType == '打包模式') {
+        if(districtType==0){
+          cityOrArea.value=0
+        }else{
+          cityOrArea.value=1
+        }
+        changeCards(0)
+        }
+       else if (returnType == '打包模式') {
         changeCards(1)
       } else {
         if (storageSearchInfo) {
@@ -390,6 +397,7 @@ export default defineComponent({
       titleName,
       changeCards,
       returnType,
+      districtType,
       number,
       loadingData,
       cityOrArea,

front/src/views/home/integrationServicesDetails.vue

@@ -5,13 +5,15 @@
     <detail-back
       v-show="!hiddenBackFlag"
       :returnType="returnType"
+      :districtType="districtType"
     ></detail-back>
+   
+   <template v-if="districtType==0 ||returnType=='打包模式' ">
      <!-- 头部基本信息 -->
      <application-top-details
       :dataList="detailInfoObj"
       :navList="navList"
     ></application-top-details>
-
     <!-- 导航 -->
     <div :class="{ fixed: scrollTop >= 600 }" style="z-index: 10012">
       <div class="application-navigation">
@@ -116,7 +118,37 @@
         </div>
         <div class="bottom" style="display: flex; align-items: flex-start">
           <div class="title" :class="'title' + i"></div>
-          <div class="table-box">
+          <div class="table-box" v-if="returnType=='典型赋能场景'">
+            <el-table
+              class="table"
+              :data="item.list"
+              stripe
+              :header-cell-style="{ 'text-align': 'center' }"
+            >
+              <el-table-column
+                prop="name"
+                label="资源名称"
+                align="center"
+                width="200"
+                show-overflow-tooltip="true"
+              ></el-table-column>
+              <el-table-column
+                prop="type"
+                label="资源类型"
+                align="center"
+                width="100"
+                show-overflow-tooltip="true"
+              ></el-table-column>
+              <el-table-column
+                prop="dept"
+                label="来源部门"
+                align="center"
+                width="300"
+                show-overflow-tooltip="true"
+              ></el-table-column>
+            </el-table>
+          </div>
+          <div class="table-box" v-else>
             <el-table
               class="table"
               :data="item.list"
@@ -155,17 +187,70 @@
       <div class="title-1">
         <DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
       </div>
-      <div class="flex-row-center step-content">
+      <div class="step-content" >
-        <el-steps direction="vertical" :space="150" :active="step.length">
+        <!-- <el-steps direction="vertical" :space="150" :active="step.length">
           <el-step
             v-for="(item, i) in step"
             :key="i"
             :title="item.question"
             :description="item.answer"
           ></el-step>
-        </el-steps>
+        </el-steps> -->
+      <!-- <div  v-for="(item,i) in step"   :key="i">
+        <div><div class="step-span" >{{i+1}}</div>
+        <div class="step-question">第{{i+1}}步:{{item.question}}</div>
+       <div  v-for="itemson in item.answer"   :key="itemson">
+        {{itemson.answer}}
         </div>
       </div>
+      </div> -->
+      <div class="left-process">
+          <div class="li1" v-for="(item,i) in step"   :key="i">  
+            <div >
+              <div class="node">
+            
+                <div class="step-span" >{{i+1}}</div>   
+                <div >
+                <div class="step-question">第{{i+1}}步:{{item.question}}</div>  
+                <div  class="question-son" v-for="(itemson,i) in item.answer"   :key="i">
+        <img src="~@/assets/home/arrow.png" style="margin-right:8px" />{{i+1}}>{{itemson.answer}}
+        </div>
+      </div>
+      
+              </div>
+              
+              <div class="borderLeft"></div>
+            </div>
+            <div class="advice"></div>
+          </div>
+
+        </div>
+      </div>
+     
+    </div>
+  </template>
+  <template v-else>
+    <div  class="area" >
+      <a-image
+            style="width:615px;height:345px" 
+            :preview="false"
+            :src="bgImg || imgSrcYyzy" 
+       
+          />
+          <div class="label-name">{{detailInfoObj.name}} <span class="label">
+              {{ detailInfoObj.type }}
+            </span>
+            <span class="label1">
+              {{ detailInfoObj.area }}
+            </span></div>
+          <a-button class="rukou" @click="openScene(detailInfoObj.sceneUrl)">
+            进入场景
+          </a-button>
+    </div>
+    <div class="area-desc">
+      {{ detailInfoObj.description || '--' }}
+    </div>
+  </template>
     <home-footer></home-footer>
   </div>
 </template>
@@ -194,7 +279,9 @@
   const componentCount = ref(0)
   const id = router.currentRoute.value.query.id
   const returnType = router.currentRoute.value.query.type
+  const districtType= router.currentRoute.value.query.districtType
   const hiddenBackFlag = router.currentRoute.value.query.hiddenBackFlag
+  const imgSrcYyzy = ref(require('@/assets/newHome/empty.png'))
   document.documentElement.style.transition = 'all 0.3s ease'
   document.documentElement.scrollTop = 0
   document.body.style.transition = 'all 0.3s ease'
@@ -311,8 +398,7 @@
         componentCount.value = res.data.data.componentCount || 0
         // 资源属性
         let fuseAttrList = res.data.data.fuseAttrList || []
-        // 融合关系
+  
-        let fuseResourceList = res.data.data.fuseResourceList || []
         let questionValue =
           fuseAttrList.find((v) => v.attrType === '常见问题') || {}
         let questionObj = {
@@ -321,13 +407,42 @@
         }
         painPoint.value = getAttrValue(fuseAttrList, '场景痛点')
         solution.value = getAttrValue(fuseAttrList, '解决方案')
-        step.value = getAttrValue(fuseAttrList, '使用步骤')
+
+        step.value = getAttrValue(fuseAttrList, '构建步骤')
+   
         bgImg.value =
           fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || ''
         let areaObj = {
           attrType: '应用领域',
           attrValue: '',
         }
+        if(returnType==='典型赋能场景'){
+          let fuseResourceList = res.data.data.fuseAttrList || []
+
+combineList.value.forEach((item) => {
+
+let arr = []
+let resource = fuseResourceList.filter(
+  (v) =>  v.attrType == item.title
+)
+
+//   let a=resource[0].attrValue
+let resourceArrList=JSON.parse(resource[0].attrValue)
+if (resourceArrList.length > 0) {
+
+  arr = resourceArrList.map((res) => ({
+      name: res.name,
+      dept: res.dept,
+      type: res.type,
+    
+    }))
+    item.list = arr
+  }
+
+})
+        }else{
+          // 融合关系
+         let fuseResourceList = res.data.data.fuseResourceList || []
  combineList.value.forEach((item) => {
           let arr = []
           let resource = fuseResourceList.filter(
@@ -367,6 +482,9 @@
 
           item.list = arr
         })
+        }
+        
+       
         detailInfoObj.value.infoList = []
         detailInfoObj.value.infoList.push(questionObj)
         detailInfoObj.value.infoList.push(areaObj)
@@ -400,6 +518,53 @@
 </script>
 
 <style lang="less" scoped>
+.area{
+    padding-top: 93px;
+    text-align: center;
+    margin-bottom: 32px;
+    .label-name{
+      font-size:26px;
+      color:#212121;
+      font-weight:bold;
+      margin-top:32px;
+    }
+  
+
+      .label {
+        padding: 0.01rem 0.1rem;
+    margin-right: 0.1rem;
+    border-radius: 0.13rem;
+    font-size: 14px;
+    color: #fff;
+    background: #7294c8;
+      }
+      .label1 {
+        padding: 0.01rem 0.1rem;
+    margin-right: 0.1rem;
+    border-radius: 0.13rem;
+    font-size: 14px;
+    color: #fff;
+    background: #c66132;
+      }
+    .rukou {
+       margin-top:24px;
+       background: #0058e1;
+        color: #ffffff;
+        width: 90px;
+        height: 32px;
+        border-radius: 2px;
+        border: 1px #0058e1 solid;
+
+      }
+
+}
+.area-desc{
+    background: #f6f7f9;
+    padding: 24px;
+    width: 1300px;
+    margin-left: 343px;
+    margin-bottom: 24px;
+}
   .flex-row-between {
     display: flex;
     flex-direction: row;
@@ -607,20 +772,85 @@
       margin: 0.3rem 4.5rem;
       padding: 0.3rem;
       background: #fff;
+      .left-process {
    
-      :deep(.el-step__description.is-finish) {
+    padding-left: 18px;
-        color: #333;
+    padding-top: 24px;
-        line-height: 0.24rem;
+
-        margin-top: 0.05rem;
+    .li1 {
+      list-style: none;
+      box-sizing: border-box;
+      padding-left: 20px;
+      position: relative;
     }
 
-      /deep/ .el-step__title {
+    .borderLeft {
-        font-size: 18px;
+      width: 1px;
+      height: 100%;
+      background-color: #e8f0fc;
+      position: absolute;
+      top: 11.225px;
+      bottom: 0;
+      left: -1px;
     }
 
-      /deep/ .el-step__description {
+  
-        font-size: 14px;
+.step-question{
+  color: #0058e1;
+    font-weight: bold;
+    font-size: 20px;
+    padding-top: 8px;
+    margin-left: 12px;
+    margin-bottom: 15px;
 }
+.question-son{
+  background: #f6f7f9;
+    font-size: 16px;
+    color: #414040;
+    margin-left: 12px;
+    line-height: 24px;
+    padding: 12px 0px 12px 16px;
+}
+    .node {
+     
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 22.5px;
+      font-weight: 500;
+      color: #212121;
+    }
+
+    .step-span{
+      z-index: 1;
+      color: #0058e1;
+    width: 50px;
+    height: 50px;
+    position: relative;
+    font-size: 30px;
+    font-weight: bold;
+    margin-left: -42px;
+    padding-left: 14px;
+    padding-top: 6px;
+    float: left;
+     background: url('~@/assets/home/step.png')  no-repeat;
+      }
+
+   
+
+    .advice {
+      font-size: 10px;
+      color: #0058e1;
+      opacity: 0.1;
+      padding-bottom: 40px;
+    }
+
+    .li1:last-child .borderLeft {
+      display: none;
+    }
+
+  }
+      
+     
     }
   }