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

指导手册增加图标
fix: 融合服务详情-申请使用，常见问题
2022-07-14 10:56:55 +08:00 · 2022-07-14 10:56:37 +08:00 · 2022-07-14 10:56:04 +08:00
5 changed files with 345 additions and 230 deletions
--- a/front/src/assets/capabilityCloud/doc.png
+++ b/front/src/assets/capabilityCloud/doc.png
--- a/front/src/assets/capabilityCloud/newGuide.png
+++ b/front/src/assets/capabilityCloud/newGuide.png
--- a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
+++ b/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 { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
-  // import { sgcInsert } from '@/api/home'
-  // import { useRouter } from 'vue-router'
-  // import mybus from '@/myplugins/mybus'
-  import { message } from 'ant-design-vue'
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  // const router = useRouter()
-  const applicationArea = ref('')
-  // // 加入申购车
-  // const addShoppingCart = () => {
-  //   console.log('加入申购车==================>', props.dataList)
-  //   sgcInsert({
-  //     delFlag: '0',
-  //     resourceId: props.dataList.id,
-  //     // userId: userId.value,
-  //   }).then((res) => {
-  //     console.log(res)
-  //     message.success('添加申购车成功！')
-  //     mybus.emit('getSgcNum')
-  //   })
-  // }
-  // // 立即申请
-  // function toView() {
-  //   // window.open(newpage.href, '_blank')
-  //   router.push({
-  //     path: '/apply',
-  //     query: {
-  //       name: props.dataList.name,
-  //       resourceId: [props.dataList.id],
-  //     },
-  //   })
-  // }
-  // 收藏
-  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) {
-        applicationArea.value = props.dataList.infoList.filter(
-          (val) => val.attrType === '应用领域'
-        )[0].attrValue
-      }
+// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+import { defineProps, ref, watch } from 'vue'
+import { scInsert } from '@/api/personalCenter'
+// import { sgcInsert } from '@/api/home'
+// 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('')
+// // 加入申购车
+// const addShoppingCart = () => {
+//   console.log('加入申购车==================>', props.dataList)
+//   sgcInsert({
+//     delFlag: '0',
+//     resourceId: props.dataList.id,
+//     // userId: userId.value,
+//   }).then((res) => {
+//     console.log(res)
+//     message.success('添加申购车成功！')
+//     mybus.emit('getSgcNum')
+//   })
+// }
+// // 立即申请
+// function toView() {
+//   // window.open(newpage.href, '_blank')
+//   router.push({
+//     path: '/apply',
+//     query: {
+//       name: props.dataList.name,
+//       resourceId: [props.dataList.id],
+//     },
+//   })
+// }
+// 融合服务--一键申请
+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)
+  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 {
-    height: 6rem;
-    padding: 1.8rem 0 0;
-    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
-    background-size: 100%;
-    display: flex;
-    justify-content: center;
-    .left {
-      max-width: 7.2rem;
-      color: #fff;
-      margin-right: 0.8rem;
+.algorithm-top-details {
+  height: 6rem;
+  padding: 1.8rem 0 0;
+  background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+  background-size: 100%;
+  display: flex;
+  justify-content: center;

-      .top {
-        display: flex;
-        align-items: center;
-        span {
-          font-size: 0.14rem;
-        }
-        .name {
-          // max-width: 3.3rem;
-          // overflow: hidden;
-          // text-overflow: ellipsis;
-          // white-space: nowrap;
-          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);
-        }
+  .left {
+    max-width: 7.2rem;
+    color: #fff;
+    margin-right: 0.8rem;
+
+    .top {
+      display: flex;
+      align-items: center;
+
+      span {
+        font-size: 0.14rem;
      }
-      .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;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
-        }
+
+      .name {
+        // max-width: 3.3rem;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // white-space: nowrap;
+        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;
      }
-      .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;
-        }
+
+      .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);
      }
    }
-    .right {
-      width: 5.8rem;
-      height: 4rem;
-      background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
-      background-size: 100%;
-      margin-top: -0.4rem;
+
+    .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;
+        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>
--- a/front/src/views/home/integrationServicesDetails.vue
+++ b/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;
--- a/front/src/views/instructionManual/index.vue
+++ b/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" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档
+        <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
+          :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-else>
-          <!-- 技术文档 -->
-          <iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
+        <div v-if="titleData.name === '新手指引'">新手指引</div>
+        <div v-else style="height:100%">
+          <iframe name="iframeName" width="1000" height="100%" 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 showManual = () => {
-  showManualFlag.value = !showManualFlag.value
-}
-
+const titleList = ref([
+  {
+    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>
Author	SHA1	Message	Date
guoyue	ecf536e13c	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-14 10:56:55 +08:00
guoyue	eefa5354ec	指导手册增加图标	2022-07-14 10:56:37 +08:00
guoyue	e4280e3874	fix: 融合服务详情-申请使用，常见问题	2022-07-14 10:56:04 +08:00