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>
@@ -59,168 +66,223 @@
   </div>
 </template>
 <script setup>
-  // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
-  import { defineProps, ref, watch } from 'vue'
+import { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
+import { scInsert } from '@/api/personalCenter'
-  // import { sgcInsert } from '@/api/home'
+// import { sgcInsert } from '@/api/home'
-  // import { useRouter } from 'vue-router'
+// import { useRouter } from 'vue-router'
-  // import mybus from '@/myplugins/mybus'
+// import mybus from '@/myplugins/mybus'
-  import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
-  const props = defineProps({
+import { useRouter } from 'vue-router'
-    dataList: { type: Object, default: null },
+// 获取当前路由地址
-  })
+const router = useRouter()
-  // const router = useRouter()
+
-  const applicationArea = ref('')
+const props = defineProps({
-  // // 加入申购车
+  dataList: { type: Object, default: null },
-  // const addShoppingCart = () => {
+})
-  //   console.log('加入申购车==================>', props.dataList)
+
-  //   sgcInsert({
+console.log('dataList------------>', props.dataList);
-  //     delFlag: '0',
+
-  //     resourceId: props.dataList.id,
+// const router = useRouter()
-  //     // userId: userId.value,
+const applicationArea = ref('')
-  //   }).then((res) => {
+// // 加入申购车
-  //     console.log(res)
+// const addShoppingCart = () => {
-  //     message.success('添加申购车成功！')
+//   console.log('加入申购车==================>', props.dataList)
-  //     mybus.emit('getSgcNum')
+//   sgcInsert({
-  //   })
+//     delFlag: '0',
-  // }
+//     resourceId: props.dataList.id,
-  // // 立即申请
+//     // userId: userId.value,
-  // function toView() {
+//   }).then((res) => {
-  //   // window.open(newpage.href, '_blank')
+//     console.log(res)
-  //   router.push({
+//     message.success('添加申购车成功！')
-  //     path: '/apply',
+//     mybus.emit('getSgcNum')
-  //     query: {
+//   })
-  //       name: props.dataList.name,
+// }
-  //       resourceId: [props.dataList.id],
+// // 立即申请
-  //     },
+// function toView() {
-  //   })
+//   // window.open(newpage.href, '_blank')
-  // }
+//   router.push({
-  // 收藏
+//     path: '/apply',
-  const goTOCollection = () => {
+//     query: {
-    console.log('收藏===================》', props.dataList)
+//       name: props.dataList.name,
-    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+//       resourceId: [props.dataList.id],
-      console.log(res)
+//     },
-      message.success('收藏成功')
+//   })
-    })
+// }
-  }
+// 融合服务--一键申请
-  if (props.dataList.infoList) {
+const handleAKeyApplication = () => {
-    applicationArea.value = props.dataList.infoList.filter(
+  let _applyList = [];
-      (val) => val.attrType === '应用领域'
+  (props.dataList.fuseResourceList || []).map(v => {
-    )[0].attrValue
+    let resource = v.resource || {}
-  }
+    let obj = {
-  watch(
+      arr: [
-    () => props.dataList,
+        {
-    (val) => {
+          delFlag: resource.delFlag,
-      if (val) {
+          description: resource.description,
-        applicationArea.value = props.dataList.infoList.filter(
+          resourceId: resource.id,
-          (val) => val.attrType === '应用领域'
+          resourceName: resource.name,
-        )[0].attrValue
+          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)
+  scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+    console.log(res)
+    message.success('收藏成功')
+  })
+}
+if (props.dataList.infoList) {
+  applicationArea.value = props.dataList.infoList.filter(
+    (val) => val.attrType === '应用领域'
+  )[0].attrValue
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      console.log('props.dataList-----watch------->', val);
+
+      applicationArea.value = props.dataList.infoList.filter(
+        (val) => val.attrType === '应用领域'
+      )[0].attrValue
+    }
+  }
+)
 </script>
 <style lang="less" scoped>
-  .algorithm-top-details {
+.algorithm-top-details {
-    height: 6rem;
+  height: 6rem;
-    padding: 1.8rem 0 0;
+  padding: 1.8rem 0 0;
-    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+  background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
-    background-size: 100%;
+  background-size: 100%;
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    .left {
-      max-width: 7.2rem;
-      color: #fff;
-      margin-right: 0.8rem;
 
-      .top {
+  .left {
-        display: flex;
+    max-width: 7.2rem;
-        align-items: center;
+    color: #fff;
-        span {
+    margin-right: 0.8rem;
-          font-size: 0.14rem;
+
-        }
+    .top {
-        .name {
+      display: flex;
-          // max-width: 3.3rem;
+      align-items: center;
-          // overflow: hidden;
+
-          // text-overflow: ellipsis;
+      span {
-          // white-space: nowrap;
+        font-size: 0.14rem;
-          font-size: 0.4rem;
-          margin-right: 0.2rem;
-          font-size: 0.4rem;
-          margin-right: 0.2rem;
-          max-width: 7rem;
-          text-overflow: -o-ellipsis-lastline;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -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;
-          border-radius: 0.13rem;
-          background: rgba(255, 255, 255, 0.4);
-        }
       }
-      .main {
+
-        margin-top: 0.2rem;
+      .name {
-        font-size: 0.18rem;
+        // max-width: 3.3rem;
-        line-height: 0.34rem;
+        // overflow: hidden;
-        & > div:nth-of-type(1) {
+        // text-overflow: ellipsis;
-          overflow: hidden;
+        // white-space: nowrap;
-          text-overflow: ellipsis;
+        font-size: 0.4rem;
-          white-space: nowrap;
+        margin-right: 0.2rem;
-        }
+        font-size: 0.4rem;
-        & > div:nth-of-type(2) {
+        margin-right: 0.2rem;
-          max-height: 1rem;
+        max-width: 7rem;
-          overflow: hidden;
+        text-overflow: -o-ellipsis-lastline;
-          text-overflow: ellipsis;
+        overflow: hidden;
-          display: -webkit-box;
+        text-overflow: ellipsis;
-          -webkit-line-clamp: 3;
+        display: -webkit-box;
-          -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
-        }
+        -webkit-box-orient: vertical;
       }
-      .bottom {
+
-        margin-top: 0.4rem;
+      .label-content {
-        display: flex;
+        position: relative;
-        .ant-btn {
+      }
-          height: 0.5rem;
+
-          margin-right: 0.2rem;
+      .lable-father {
-          background: #ff8b55;
+        position: absolute;
-          border-radius: 0.06rem;
+        min-width: 3.5rem;
-          font-size: 0.2rem;
+        right: -3.5rem;
-          display: flex;
+        top: 0;
-          justify-content: center;
+      }
-          align-items: center;
+
-        }
+      .label {
-        .ant-btn:nth-of-type(1) {
+        padding: 0.01rem 0.1rem;
-          width: 1.8rem;
+        margin-right: 0.1rem;
-        }
+        border-radius: 0.13rem;
-        .ant-btn:nth-of-type(2) {
+        background: rgba(255, 255, 255, 0.4);
-          width: 2.2rem;
-        }
-        .ant-btn:nth-of-type(3) {
-          width: 1.45rem;
-          background: #fff;
-          color: #526aff;
-        }
       }
     }
-    .right {
+
-      width: 5.8rem;
+    .main {
-      height: 4rem;
+      margin-top: 0.2rem;
-      background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
+      font-size: 0.18rem;
-      background-size: 100%;
+      line-height: 0.34rem;
-      margin-top: -0.4rem;
+
+      &>div:nth-of-type(1) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &>div:nth-of-type(2) {
+        max-height: 1rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .bottom {
+      margin-top: 0.4rem;
+      display: flex;
+
+      .ant-btn {
+        height: 0.5rem;
+        margin-right: 0.2rem;
+        background: #ff8b55;
+        border-radius: 0.06rem;
+        font-size: 0.2rem;
+        display: flex;
+        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;
+        color: #526aff;
+      }
     }
   }
+
+  .right {
+    width: 5.8rem;
+    height: 4rem;
+    background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
+    background-size: 100%;
+    margin-top: -0.4rem;
+  }
+}
 </style>

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>