Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev

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

@@ -52,6 +52,13 @@
           <template #icon><shopping-cart-outlined /></template>
           加入购物车
         </a-button> -->
+        <!-- 融合服务 存在fuseResourceList -->
+        <a-button type="primary" @click="handleAKeyApplication()" v-if="dataList.fuseResourceList">
+          <template #icon>
+            <form-outlined />
+          </template>
+          申请使用
+        </a-button>
         <a-button type="primary" @click="goTOCollection()">收藏</a-button>
       </div>
     </div>
@@ -66,9 +73,16 @@
 // import { useRouter } from 'vue-router'
 // import mybus from '@/myplugins/mybus'
 import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
+// 获取当前路由地址
+const router = useRouter()
+
 const props = defineProps({
   dataList: { type: Object, default: null },
 })
+
+console.log('dataList------------>', props.dataList);
+
 // const router = useRouter()
 const applicationArea = ref('')
 // // 加入申购车
@@ -95,6 +109,37 @@
 //     },
 //   })
 // }
+// 融合服务--一键申请
+const handleAKeyApplication = () => {
+  let _applyList = [];
+  (props.dataList.fuseResourceList || []).map(v => {
+    let resource = v.resource || {}
+    let obj = {
+      arr: [
+        {
+          delFlag: resource.delFlag,
+          description: resource.description,
+          resourceId: resource.id,
+          resourceName: resource.name,
+          time: resource.createDate,
+          type: resource.type,
+        },
+      ],
+      deptId: resource.deptId,
+      deptName: resource.deptName,
+    }
+    _applyList.push(obj)
+  })
+
+  localStorage.setItem(
+    'applyList',
+    JSON.stringify(_applyList)
+  )
+  router.push({
+    path: '/apply',
+  })
+}
+
 // 收藏
 const goTOCollection = () => {
   console.log('收藏===================》', props.dataList)
@@ -112,6 +157,8 @@
   () => props.dataList,
   (val) => {
     if (val) {
+      console.log('props.dataList-----watch------->', val);
+
       applicationArea.value = props.dataList.infoList.filter(
         (val) => val.attrType === '应用领域'
       )[0].attrValue
@@ -127,6 +174,7 @@
   background-size: 100%;
   display: flex;
   justify-content: center;
+
   .left {
     max-width: 7.2rem;
     color: #fff;
@@ -135,9 +183,11 @@
     .top {
       display: flex;
       align-items: center;
+
       span {
         font-size: 0.14rem;
       }
+
       .name {
         // max-width: 3.3rem;
         // overflow: hidden;
@@ -155,15 +205,18 @@
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
       }
+
       .label-content {
         position: relative;
       }
+
       .lable-father {
         position: absolute;
         min-width: 3.5rem;
         right: -3.5rem;
         top: 0;
       }
+
       .label {
         padding: 0.01rem 0.1rem;
         margin-right: 0.1rem;
@@ -171,15 +224,18 @@
         background: rgba(255, 255, 255, 0.4);
       }
     }
+
     .main {
       margin-top: 0.2rem;
       font-size: 0.18rem;
       line-height: 0.34rem;
+
       &>div:nth-of-type(1) {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
+
       &>div:nth-of-type(2) {
         max-height: 1rem;
         overflow: hidden;
@@ -189,9 +245,11 @@
         -webkit-box-orient: vertical;
       }
     }
+
     .bottom {
       margin-top: 0.4rem;
       display: flex;
+
       .ant-btn {
         height: 0.5rem;
         margin-right: 0.2rem;
@@ -202,12 +260,15 @@
         justify-content: center;
         align-items: center;
       }
+
       .ant-btn:nth-of-type(1) {
         width: 1.8rem;
       }
+
       .ant-btn:nth-of-type(2) {
         width: 2.2rem;
       }
+
       .ant-btn:nth-of-type(3) {
         width: 1.45rem;
         background: #fff;
@@ -215,6 +276,7 @@
       }
     }
   }
+
   .right {
     width: 5.8rem;
     height: 4rem;

front/src/views/home/integrationServicesDetails.vue

@@ -187,14 +187,12 @@ const getIntegrationServicesDeatil = (id) => {
     let questionValue = fuseAttrList.find(v => v.attrType === '常见问题') || {}
     let questionObj = {
       attrType: '常见问题',
-      attrValue: JSON.stringify(questionValue.attrValue || [])
+      attrValue: questionValue.attrValue || "[]"
     }
     let areaObj = {
       attrType: '应用领域',
       attrValue: detailInfoObj.value.applicationArea
     }
-    console.log('areaObj------------>', areaObj);
-    
     combineList.value.map(item => {
       let arr = (fuseResourceList.filter(v => v.resource && v.resource.type == item.title) || []).map(d => d.resource.name)
       item.list = arr;

front/src/views/instructionManual/index.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="father">
+  <div class="menu-box">
     <home-header></home-header>
-    <div id="container" class="content">
+    <div id="container" class="content-menu">
       <div class="left">
-        <div class="first-title-text" @click="showManual" :style="{ color: showManualFlag ? '#0058e1' : '' }">新手指引</div>
+        <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
-        <div class="first-title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档
+          :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
+          <div class="img" :class="data.className"></div>
+          {{ data.name }}
         </div>
         <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
       </div>
       <div class="right">
-        <div v-if="showManualFlag">新手指引</div>
+        <div v-if="titleData.name === '新手指引'">新手指引</div>
-        <div v-else>
+        <div v-else style="height:100%">
-          <!-- 技术文档 -->
+          <iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
-          <iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
             :src="clickData.doc"></iframe>
         </div>
       </div>
@@ -22,26 +23,31 @@
 <script setup>
 import HomeHeader from '@/views/home/components/header'
 import abilityDocTree from './components/abilityDocTree'
-import { selectOne } from '@/api/home'
 import { ref, reactive, onMounted, nextTick, watch } from 'vue'
-import { useStore } from 'vuex'
 import { Empty, message } from 'ant-design-vue'
 import { getDevelopDocTree } from '@/api/home'
 
-const showManualFlag = ref(false)
+const titleList = ref([
-const showManual = () => {
+  {
-  showManualFlag.value = !showManualFlag.value
+    name: '新手指引',
+    className: 'newGuide'
+  },
+  {
+    name: '技术文档',
+    className: 'doc'
   }
-
+])
+const titleData = ref(titleList.value[0])
 const clickData = ref({})
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
+const treeArray = ref([])
+
 const treeClick = (item) => {
-  showManualFlag.value = false;
   console.log('item---treeClick--------->', item);
   clickData.value = item;
+  titleData.value = titleList.value[1]
 }
-let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
 
-const treeArray = ref([])
 const getTreeData = () => {
   getDevelopDocTree({}).then((res) => {
     console.log('res------文档树------>', res);
@@ -54,80 +60,31 @@ const getTreeData = () => {
   });
 }
 
+const changeName = (item) => {
+  titleData.value = item
+}
+
 onMounted(() => {
   getTreeData()
-  // loadPage()
-
 })
 
-var x = document.getElementById("iframeId");
-console.log('x------------>', x);
 
 watch(
   () => clickData.value,
   (val) => {
     if (val) {
       console.log('val-watch---clickData-------->', val);
-
-      // clickData.value = val
-      loadPage()
     }
   },
   {
-    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
-    //那么首次执行，val为默认值,preVal为undefined
-    // immediate: true,
-    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
-    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
     deep: true,
   }
 )
 
-
-// window.onload = () => loadPage()
-
-
-
-
-const loadPage = () => {
-  console.log('2222----onload-------->', 2222);
-  if (!clickData.value.doc) {
-    return;
-  }
-
-  // var _iframe = document.getElementById('iframeId').contentWindow.document.getElementsByTagName('aside')//iframe下的id
-  // console.log('_iframe------------>', _iframe);
-
-  var x = document.getElementById("iframeId");
-  console.log('x------------>', x);
-
-  if (x) {
-    var y = (x.contentWindow || x.contentDocument);
-    if (y.document) {
-      y = y.document;
-    }
-    let asideDom = y.body.getElementsByClassName('.aside') && y.body.getElementsByClassName('.aside')[0]
-    if (asideDom) {
-      asideDom.style.right = 0;
-    }
-    console.log('asideDom------------>', asideDom);
-
-    let contentDom = y.body.getElementsByClassName('.content') && y.body.getElementsByClassName('.content')[0];
-    console.log('contentDom------------>', contentDom);
-    if (contentDom) {
-      contentDom.style.left = 0
-      contentDom.style.right = '16rem'
-    }
-
-    //id和class获取方式有一点点区别
-    // y.getElementById('元素id').style.fontSize = '12px'
-  }
-}
-
 </script>
 
 <style scoped lang="less">
-.father {
+.menu-box {
   // overflow: hidden;
   height: 100%;
 }
@@ -137,18 +94,36 @@ const loadPage = () => {
   font-size: 18px;
   color: #333;
   padding-bottom: 10px;
+  display: flex;
+  align-items: center;
 
   &:hover {
     color: #0058e1;
   }
 }
 
-.content {
+.content-menu {
+  // width: 1240px;
+  // display: flex;
+  // justify-content: flex-start;
+  // margin: 0 auto;
+  // margin-top: 74px;
+  // box-sizing: border-box;
+  // position: relative;
+
   width: 1240px;
   display: flex;
   justify-content: flex-start;
   margin: 0 auto;
-  margin-top: 84px;
+  margin-top: 74px;
+  box-sizing: border-box;
+  /* height: calc(100vh - 306px); */
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  top: 0.6rem;
+  top: 0;
 }
 
 .left {
@@ -158,10 +133,18 @@ const loadPage = () => {
   margin-right: 20px;
   background: rgba(244, 245, 248, 0.8);
   overflow-y: auto;
+  position: absolute;
+  top: 10px;
+  left: 0;
 }
 
 .right {
   width: 880px;
+  height: calc(100% - 20px);
+
+  position: absolute;
+  top: 10px;
+  left: 260px;
 }
 
 .sidebar {
@@ -172,4 +155,76 @@ const loadPage = () => {
   right: 16rem !important;
   left: 0 !important;
 }
+
+.img {
+  height: 20px;
+  width: 20px;
+  margin-right: 8px;
+}
+
+.doc {
+  background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
+  background-size: 100%;
+}
+
+.newGuide {
+  background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
+  background-size: 100%;
+}
+
+#iframeId {
+  // ::-webkit-scrollbar {
+  //   width: 6px;
+  //   height: 6px;
+  //   background-color: rgb(255, 255, 255);
+  // }
+
+  // ::-webkit-scrollbar-thumb {
+  //   border-radius: 10px;
+  //   background-color: rgb(200, 204, 209);
+  // }
+
+  /* 设置滚动条的样式 */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    // width: 2px;
+    // height: 2px;
+    // height: 67px;
+  }
+
+  ::scrollbar {
+    width: 6px;
+    height: 6px;
+    // width: 2px;
+    // height: 2px;
+    // height: 67px;
+  }
+
+  /* 滚动槽 */
+  ::-webkit-scrollbar-track {
+    display: none;
+    // -webkit-box-shadow: inset 0 0 3px #b18933;
+    // border-radius: 1px;
+  }
+
+  ::scrollbar-track {
+    display: none;
+    // -webkit-box-shadow: inset 0 0 3px #98f165;
+    // border-radius: 1px;
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #006666;
+    -webkit-box-shadow: inset 0 0 1px #006666;
+  }
+
+  ::scrollbar-thumb {
+    border-radius: 10px;
+    background: #006666;
+    -webkit-box-shadow: inset 0 0 1px #006666;
+  }
+}
 </style>