wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

add: 指导手册

This commit is contained in:
guoyue 2022-07-13 17:46:57 +08:00
parent 84ecc46c69
commit 7bd990fe25
3 changed files with 140 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
front/src/views/instructionManual/components/abilityDocTree.vue
View File

@ -1,14 +1,16 @@
<template>
<div class="list-box">
<div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
<div :class="[clickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '']"
<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 && item.children && item.children.length > 0" />
<UpOutlined v-show="item.show && item.children && item.children.length > 0" />
<DownOutlined v-show="!item.show && !judgeLeaf(item)" />
<UpOutlined v-show="item.show && !judgeLeaf(item)" />
</div>
<div style="margin-left:10px" v-if="item.children && item.children.length > 0 && item.show">
<abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="clickData"
</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>
@ -45,25 +47,25 @@ const newDataList = ref(props.dataList)
// 级别
const newLevel = ref(props.level)
const getBgColor = (item, level) => {
// if(level === 1) {
// if() {
const newClickData = ref(props.clickData)
// }
// }else {
// return false
// }
// 判断是不是叶子节点
const judgeLeaf = (item) => {
if (item.children && item.children.length > 0) {
return false
} else {
return true
}
}
const showChildren = (item) => {
console.log('item------------>', item);
if (!item.children) {
if (props.clickData.title !== '') {
if (newClickData.value.title !== '') {
handleTreeItem(item)
} else {
handleTreeItem({ title: '' })
}
item.isSelect = !item.isSelect;
}
if (item.children && item.children.length > 0) {
@ -71,15 +73,23 @@ const showChildren = (item) => {
}
}
// watch(
// () => props.dataList,
// (val) => {
// if (val) {
// props.dataList = val;
// newDataList.value = val
// }
// }
// )
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) => {
@ -95,29 +105,41 @@ const handleTreeItem = (item) => {
cursor: pointer;
padding-left: 10px;
border-bottom: 1px solid #ccc;
overflow: hidden;
/*文本不会换行*/
white-space: nowrap;
/*当文本溢出包含元素时，以省略号表示超出的文本*/
text-overflow: ellipsis;
&:hover {
color: #0058e1;
}
}
.select {
color: #0058e1;
font-weight: 600;
}
.normal {
color: #333;
}
.parent {
margin-bottom: 10px;
// background: #0058e1;
// color: #fff;
background: rgba(0, 135, 225, 0.1);
color: #333;
// margin-bottom: 10px;
// &:hover {
// color: #fff;
// }
&:hover {
color: #fff;
background: #0058e1;
}
}
.leaf {
font-size: 14px;
color: #555;
}
.select {
color: #0058e1;
font-weight: 600;
}
</style>

15
front/src/views/instructionManual/components/docsifyView.vue
View File

@ -1,15 +0,0 @@
<template>
<div class="docsifyBox">
<!-- <iframe name="iframeName" id="iframeId" src="file:///F:/guo_yue/docsify/index.html#/"></iframe> -->
<!-- https://www.baidu.com/ -->
<iframe name="iframeName" width="1000" height="750" id="iframeId" :frameborder="0" src="http://localhost:8080/#/home"></iframe>
</div>
</template>
<!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> -->
<script setup>
</script>
<style lang="less" scoped>
</style>

141
front/src/views/instructionManual/index.vue
View File

@ -7,14 +7,13 @@
<div class="first-title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档
</div>
<abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
<abilityDocTree :dataList="tempData" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
<!-- tempData -->
</div>
<div class="right">
<div v-if="showManualFlag">新手指引</div>
<div v-else>
<!-- 技术文档 -->
<docsifyView></docsifyView>
<iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
:src="clickData.doc"></iframe>
</div>
</div>
</div>
@ -22,99 +21,108 @@
</template>
<script setup>
import HomeHeader from '@/views/home/components/header'
import docsifyView from './components/docsifyView'
import abilityDocTree from './components/abilityDocTree'
import { getMyProcessInstancePage, wodepage } from '@/api/personalCenter'
import { selectOne } from '@/api/home'
import { ref, reactive, onMounted, nextTick } from 'vue'
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(true)
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 tempData = ref([
{
title: '应用资源--假数据',
children: [
{
title: '能力11--假数据',
},
{
title: '能力1122',
},
{
title: '能力1133',
},
{
title: '能力1144',
},
]
}, {
title: '组件服务--假数据',
children: [
{
title: '算法优势--假数据',
children: [
{
title: '算法优势11',
},
{
title: '算法优势1122',
},
{
title: '算法优势1133',
},
{
title: '算法优势1144',
},
]
},
{
title: '社会治安'
},
],
}
])
const treeData = ref([]);
// const treeArray = ref(data)
const treeArray = ref([])
const getTreeData = () => {
getDevelopDocTree({}).then((res) => {
console.log('res------文档树------>', res);
if (res.data.code !== 0) {
console.log('222------------>', 222);
treeArray.value = tempData;
nextTick(() => {
console.log('treeArray.value------------>', treeArray.value);
})
return message.error(res.data.msg)
}
treeArray.value = res.data.data || [];
}).catch((err) => {
console.log('err------------>', 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>
@ -155,4 +163,13 @@ onMounted(() => {
.right {
width: 880px;
}
.sidebar {
right: 0 !important;
}
.content {
right: 16rem !important;
left: 0 !important;
}
</style>