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

front/public/static/config/location.js

@@ -31,6 +31,7 @@ if (newLocation === 'qingdao') {
     { name: '能力云图', key: 'capabilityCloud' },
     { name: '能力统计', key: 'abilityStatistics' },
     // { name: '开发指南', key: 'developmentGuide' },
+    { name: '指导手册', key: 'instructionManual' },
     { name: '需求中心', key: 'demandCenter' },
     // { name: '个人中心', key: 'personalCenter' },
     { name: '区市站点', key: 'mapTest' },

front/src/api/home.js

@@ -337,7 +337,6 @@ export function getApplyCameraList(id) {
   })
 }
 
-// 融合服务--start
 // 融合服务--列表
 export function getIntegrationServicesList(params) {
   return request({
@@ -355,4 +354,11 @@ export function getIntegrationDetail(id) {
   })
 }
 
-// 融合服务--end
+// 指导手册--左侧文档树
+export function getDevelopDocTree(params) {
+  return request({
+    url: '/resource/selectDevelopDoc',
+    method: 'get',
+    params
+  })
+}

front/src/router/index.js

@@ -462,6 +462,15 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/instructionManual',
+    name: 'instructionManual',
+    component: () => import('@/views/instructionManual/index'),
+    meta: {
+      title: '指导手册',
+      icon: 'error-warning-line',
+    },
+  },
 ]
 export const asyncRoutes = [
   {

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

@@ -136,6 +136,8 @@
   const select = ref(router.currentRoute.value.name)
   const mynoticeFlag = ref(false)
   const mynoticeData = ref([])
+  console.log('navListManagement------------>', navListManagement);
+  
   // eslint-disable-next-line no-undef
   const navList = ref(navListManagement.navList)
   const props = defineProps({
@@ -191,6 +193,11 @@
           path: '/developmentGuide',
         })
         break
+      case '指导手册':
+        router.push({
+          path: '/instructionManual',
+        })
+        break
       case '需求中心':
         router.push({
           path: '/demandCenter',

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

@@ -620,9 +620,9 @@
       mybus.on('chongzhi', (typeObj) => {
         console.log('typeObj------------>', typeObj);
         if(!typeObj) {
-          selData.value = 'total'
+          selData.value = 'total';
         }
-        if(typeObj.type === '融合服务') {
+        if(typeObj && typeObj.type === '融合服务') {
           orderList.value = [
             {
               value: 'collectCount',

front/src/views/instructionManual/components/abilityDocTree.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="list-box">
+        <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
+            <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
+                <div :class="[clickData.title === item.title && item.isSelect ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
+                    class="list-text">
+                    {{ item.title }}
+                    <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
+                    <UpOutlined v-show="item.show && !judgeLeaf(item)" />
+                </div>
+            </a-tooltip>
+            <div style="margin-left:10px" v-if="!judgeLeaf(item) && item.show">
+                <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
+                    :level="newLevel + 1">
+                </abilityDocTree>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { defineComponent, onMounted, ref, watch, defineProps, nextTick } from 'vue';
+import { getDevelopDocTree } from '@/api/home'
+import { message } from 'ant-design-vue'
+import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+
+const props = defineProps({
+    dataList: {
+        type: Array,
+        default: () => []
+    },
+    selectName: {
+        type: String,
+        default: ''
+    },
+    level: {
+        type: Number,
+        default: 1
+    },
+    clickData: {
+        type: Object,
+        default: () => { title: '' }
+    },
+})
+
+// 数组
+const newDataList = ref(props.dataList)
+// 级别
+const newLevel = ref(props.level)
+
+const newClickData = ref(props.clickData)
+
+// 判断是不是叶子节点
+const judgeLeaf = (item) => {
+    if (item.children && item.children.length > 0) {
+        return false
+    } else {
+        return true
+    }
+}
+
+const showChildren = (item) => {
+    if (!item.children) {
+        if (newClickData.value.title !== '') {
+            handleTreeItem(item)
+        } else {
+            handleTreeItem({ title: '' })
+        }
+        item.isSelect = !item.isSelect;
+    }
+
+    if (item.children && item.children.length > 0) {
+        item.show = !item.show;
+    }
+}
+
+watch(
+    () => props.dataList,
+    (val) => {
+        if (val) {
+            newDataList.value = val
+        }
+    }
+)
+
+watch(
+    () => props.clickData,
+    (val) => {
+        if (val) {
+            newClickData.value = val
+        }
+    }
+)
+
+const emit = defineEmits(['treeClick'])
+const handleTreeItem = (item) => {
+    emit('tree-click', item);
+}
+
+</script>
+<style lang="less" scoped>
+.list-text {
+    font-size: 16px;
+    color: #333;
+    padding: 10px 0;
+    cursor: pointer;
+    padding-left: 10px;
+    border-bottom: 1px solid #ccc;
+    overflow: hidden;
+    /*文本不会换行*/
+    white-space: nowrap;
+    /*当文本溢出包含元素时，以省略号表示超出的文本*/
+    text-overflow: ellipsis;
+
+    &:hover {
+        color: #0058e1;
+    }
+}
+
+.normal {
+    color: #333;
+}
+
+.parent {
+    margin-bottom: 10px;
+    background: rgba(0, 135, 225, 0.1);
+    color: #333;
+
+    // margin-bottom: 10px;
+
+    &:hover {
+        color: #fff;
+        background: #0058e1;
+    }
+}
+
+.leaf {
+    font-size: 14px;
+    color: #555;
+}
+
+.select {
+    color: #0058e1;
+    font-weight: 600;
+}
+</style>

front/src/views/instructionManual/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="father">
+    <home-header></home-header>
+    <div id="container" class="content">
+      <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>
+        <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"
+            :src="clickData.doc"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<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 clickData = ref({})
+const treeClick = (item) => {
+  showManualFlag.value = false;
+  console.log('item---treeClick--------->', item);
+  clickData.value = item;
+}
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
+
+const treeArray = ref([])
+const getTreeData = () => {
+  getDevelopDocTree({}).then((res) => {
+    console.log('res------文档树------>', res);
+    if (res.data.code !== 0) {
+      return message.error(res.data.msg)
+    }
+    treeArray.value = res.data.data || [];
+  }).catch((err) => {
+    message.error(err)
+  });
+}
+
+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 {
+  // overflow: hidden;
+  height: 100%;
+}
+
+.first-title-text {
+  cursor: pointer;
+  font-size: 18px;
+  color: #333;
+  padding-bottom: 10px;
+
+  &:hover {
+    color: #0058e1;
+  }
+}
+
+.content {
+  width: 1240px;
+  display: flex;
+  justify-content: flex-start;
+  margin: 0 auto;
+  margin-top: 84px;
+}
+
+.left {
+  width: 240px;
+  padding: 20px;
+  height: 600px;
+  margin-right: 20px;
+  background: rgba(244, 245, 248, 0.8);
+  overflow-y: auto;
+}
+
+.right {
+  width: 880px;
+}
+
+.sidebar {
+  right: 0 !important;
+}
+
+.content {
+  right: 16rem !important;
+  left: 0 !important;
+}
+</style>