Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev

This commit is contained in:
851673013@qq.com 2022-08-03 14:28:16 +08:00
commit a07d621206
18 changed files with 2359 additions and 1866 deletions

View File

@ -154,7 +154,7 @@
>详情</el-button
>
<el-button type="text" size="small" @click="showDocument(scope.row)"
>开发文档</el-button
>技术文档</el-button
>
<el-button
type="text"

View File

@ -149,7 +149,7 @@
>详情</el-button
>
<el-button type="text" size="small" @click="showDocument(scope.row)"
>开发文档</el-button
>技术文档</el-button
>
<el-button
type="text"

View File

@ -64,25 +64,55 @@
</el-form-item>
</el-form>
<!-- 流程综合组件 -->
<ren-process-multiple
<!-- <ren-process-multiple
v-if="processVisible"
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
saveFormUrl="/processForm/tabilityapplication"
dataFormName="dataForm"
ref="renProcessMultiple"
></ren-process-multiple>
></ren-process-multiple> -->
<!-- 审批 -->
<div class="agreeOr" v-if="taskId">
<div>
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
<el-button type="danger" plain @click="showDialog('拒绝')"
>驳回</el-button
>
</div>
</div>
<!-- 审批弹窗 -->
<el-dialog
title="审批意见"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose2"> </el-button>
<el-button
type="primary"
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
> </el-button
>
</span>
</el-dialog>
</el-card>
</template>
<script>
//
import processModule from '@/mixins/process-module'
import qs from 'qs'
import debounce from 'lodash/debounce'
import bus from '@/views/bus.js'
export default {
//
mixins: [processModule],
data () {
return {
visible: false,
// visible: false,
//
fieldDisabled: false,
dataForm: {
@ -94,7 +124,13 @@ export default {
system: '',
scene: '',
basis: ''
}
},
//
dialogVisible: false,
dialogType: '',
input: '',
visible: true,
taskId: ''
}
},
created () {
@ -113,6 +149,8 @@ export default {
}
//
this.initProcessMultiple(callbacks)
this.taskId = this.$route.params.taskId
this.dataForm.taskId = this.$route.params.taskId
},
computed: {
dataRule () {
@ -164,6 +202,128 @@ export default {
})
.catch(() => {})
},
//
showDialog (title) {
this.dialogVisible = true
this.dialogType = title
},
handleClose (done) {
this.$confirm('确认关闭?')
.then((_) => {
this.input = ''
done()
})
.catch((_) => {})
},
handleClose2 () {
this.dialogVisible = false
this.input = ''
},
// 退
agreeOrNot: debounce(
function (data) {
this.dataForm.taskId = this.$route.params.taskId
if (this.dialogType === '同意') {
if (this.input !== '') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '拒绝') {
if (this.input !== '') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
}
},
1000,
{ leading: true, trailing: false }
),
tabRemoveHandle (tabName) {
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
if (tabName === 'home') {
return false
}
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
(item) => item.name !== tabName
)
if (this.$store.state.contentTabs.length <= 0) {
this.$store.state.sidebarMenuActiveName =
this.$store.state.contentTabsActiveName = 'home'
return false
}
// tab
if (tabName === this.$store.state.contentTabsActiveName) {
const tab =
this.$store.state.contentTabs[
this.$store.state.contentTabs.length - 1
]
this.$router.push({
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
params: { ...tab.params },
query: { ...tab.query }
})
}
},
//
startProcessErrorCallback (data) {
console.log(data)
@ -173,3 +333,12 @@ export default {
}
}
</script>
<style lang="scss">
.agreeOr {
& > div {
// text-align: right;
padding-right: 40px;
margin: 20px 0;
}
}
</style>

View File

@ -23,18 +23,49 @@
</el-form>
</div>
<!-- 流程综合组件 -->
<ren-process-multiple
<!-- <ren-process-multiple
v-if="processVisible"
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
saveFormUrl="/processForm/tabilityapplication"
dataFormName="dataForm"
ref="renProcessMultiple"
></ren-process-multiple>
></ren-process-multiple> -->
<!-- 审批 -->
<div class="agreeOr" v-if="taskId">
<div>
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
<el-button type="danger" plain @click="showDialog('拒绝')"
>驳回</el-button
>
</div>
</div>
<!-- 审批弹窗 -->
<el-dialog
title="审批意见"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose2"> </el-button>
<el-button
type="primary"
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
> </el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import processModule from '@/mixins/process-module'
import qs from 'qs'
import debounce from 'lodash/debounce'
import bus from '@/views/bus.js'
export default {
//
mixins: [processModule],
@ -50,12 +81,19 @@ export default {
data () {
return {
// processVisible: true,
visible: false,
// visible: false,
//
fieldDisabled: false,
dataForm: [],
id: '',
shifoushizujian: true
shifoushizujian: true,
//
dialogVisible: false,
dialogType: '',
input: '',
visible: true,
taskId: ''
}
},
watch: {},
@ -91,6 +129,128 @@ export default {
// }
console.log('this.dataForm', this.dataForm)
})
},
//
showDialog (title) {
this.dialogVisible = true
this.dialogType = title
},
handleClose (done) {
this.$confirm('确认关闭?')
.then((_) => {
this.input = ''
done()
})
.catch((_) => {})
},
handleClose2 () {
this.dialogVisible = false
this.input = ''
},
// 退
agreeOrNot: debounce(
function (data) {
this.dataForm.taskId = this.$route.params.taskId
if (this.dialogType === '同意') {
if (this.input !== '') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '拒绝') {
if (this.input !== '') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
}
},
1000,
{ leading: true, trailing: false }
),
tabRemoveHandle (tabName) {
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
if (tabName === 'home') {
return false
}
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
(item) => item.name !== tabName
)
if (this.$store.state.contentTabs.length <= 0) {
this.$store.state.sidebarMenuActiveName =
this.$store.state.contentTabsActiveName = 'home'
return false
}
// tab
if (tabName === this.$store.state.contentTabsActiveName) {
const tab =
this.$store.state.contentTabs[
this.$store.state.contentTabs.length - 1
]
this.$router.push({
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
params: { ...tab.params },
query: { ...tab.query }
})
}
}
},
created () {
@ -108,10 +268,24 @@ export default {
}
//
this.initProcessMultiple(callbacks)
this.taskId = this.$route.params.taskId
this.dataForm.taskId = this.$route.params.taskId
},
mounted () {}
}
</script>
<style lang="scss" >
.kuandukuandukuandu {
max-width: 1500px;
}
.agreeOr {
& > div {
// text-align: right;
padding-right: 40px;
margin: 20px 0;
}
}
</style>
<style lang="scss" scoped>
::v-deep .el-textarea__inner {
height: 100px;

View File

@ -106,7 +106,7 @@
</el-radio-group> -->
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
<el-button type="danger" plain @click="showDialog('拒绝')"
>拒绝</el-button
>驳回</el-button
>
<!-- <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
@ -229,68 +229,76 @@ export default {
function (data) {
this.dataForm.taskId = this.$route.params.taskId
if (this.dialogType === '同意') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
if (this.input !== '') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
.catch(() => {})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '拒绝') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
if (this.input !== '') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
}
this.tabRemoveHandle(data)
// this.getDataList(data)
},
1000,
{ leading: true, trailing: false }

View File

@ -200,69 +200,78 @@ export default {
agreeOrNot: debounce(
function (data) {
if (this.dialogType === '同意') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.taskId,
comment: this.input
})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('abilityResourceShelfInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
this.input = ''
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
if (this.input !== '') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.taskId,
comment: this.input
})
.catch(() => {})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('abilityResourceShelfInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
this.input = ''
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '驳回') {
const params = qs.stringify({
taskId: this.taskId,
comment: this.input
})
this.$http
// .post('/act/task/endProcess?', params)
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('abilityResourceShelfInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
if (this.input !== '') {
const params = qs.stringify({
taskId: this.taskId,
comment: this.input
})
this.$http
// .post('/act/task/endProcess?', params)
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('abilityResourceShelfInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
}
this.tabRemoveHandle(data)
},
1000,
{ leading: true, trailing: false }

View File

@ -380,68 +380,76 @@ export default {
agreeOrNot: debounce(
function (data) {
if (this.dialogType === '同意') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('competencyApplicationInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
if (this.input !== '') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
.catch(() => {})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('competencyApplicationInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '驳回') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('competencyApplicationInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
if (this.input !== '') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('competencyApplicationInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
}
this.tabRemoveHandle(data)
// this.getDataList(data)
},
1000,
{ leading: true, trailing: false }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -299,7 +299,7 @@
if (res.data.code == '0') {
demandCommentApply({ id: res.data.data.id }).then((res1) => {
if (res1.data.code == '0') {
message.success('提交评成功,请注意查看消息通知!')
message.success('提交评成功,请注意查看消息通知!')
myComment.value = ''
evaluateList()
}

File diff suppressed because it is too large Load Diff

View File

@ -1,159 +1,147 @@
<template>
<div class="list-box">
<div
class="list-item"
v-for="(item, i) in newDataList"
:key="i"
@click.stop="showChildren(item)"
>
<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="[
newClickData.title === item.title ? 'select' : '',
level === 1 ? 'parent' : '',
judgeLeaf(item) ? 'leaf' : '',
]"
class="list-text"
>
<div :class="[
newClickData.title === item.title ? '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>
<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'
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: () => [],
const props = defineProps({
dataList: {
type: Array,
default: () => [],
},
level: {
type: Number,
default: 1,
},
clickData: {
type: Object,
default: () => {
''
},
level: {
type: Number,
default: 1,
},
clickData: {
type: Object,
default: () => {
''
},
},
})
},
})
//
const newDataList = ref(props.dataList)
//
const newLevel = ref(props.level)
//
const newDataList = ref(props.dataList)
//
const newLevel = ref(props.level)
const newClickData = ref(props.clickData)
const newClickData = ref(props.clickData)
//
const judgeLeaf = (item) => {
if (item.children && item.children.length > 0) {
return false
//
const judgeLeaf = (item) => {
if (item.children && item.children.length > 0) {
return false
} else {
return true
}
}
const showChildren = (item) => {
if (!(item.children && item.children.length > 0)) {
if (newClickData.value.title !== '') {
handleTreeItem(item)
} else {
return true
handleTreeItem({ title: '' })
}
}
if (item.children && item.children.length > 0) {
item.show = !item.show
}
}
const showChildren = (item) => {
if (!(item.children && item.children.length > 0)) {
if (newClickData.value.title !== '') {
handleTreeItem(item)
} else {
handleTreeItem({ title: '' })
}
}
if (item.children && item.children.length > 0) {
item.show = !item.show
watch(
() => props.dataList,
(val) => {
if (val) {
newDataList.value = val
}
}
)
watch(
() => props.dataList,
(val) => {
if (val) {
newDataList.value = val
}
watch(
() => props.clickData,
(val) => {
if (val) {
newClickData.value = val
}
)
watch(
() => props.clickData,
(val) => {
if (val) {
newClickData.value = val
}
}
)
const emit = defineEmits(['treeClick'])
const handleTreeItem = (item) => {
emit('tree-click', item)
}
)
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;
.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;
cursor: pointer;
}
}
.parent {
margin-bottom: 10px;
background: rgba(0, 135, 225, 0.1);
color: #333;
&:hover {
color: #fff;
background: #0058e1;
cursor: pointer;
}
}
.leaf {
font-size: 14px;
color: #555;
cursor: pointer;
}
.select {
&:hover {
color: #0058e1;
font-weight: 600;
cursor: pointer;
}
}
.parent {
margin-bottom: 10px;
background: rgba(0, 135, 225, 0.1);
color: #333;
&:hover {
color: #fff;
background: #0058e1;
cursor: pointer;
}
}
.leaf {
font-size: 14px;
color: #555;
cursor: pointer;
}
.select {
color: #0058e1;
font-weight: 600;
cursor: pointer;
}
</style>

View File

@ -1,54 +1,46 @@
<template>
<div class="menu-box">
<div class="content-box">
<!-- 提供服务 -->
<div class="img-bg service-box">
<div class="title" style="margin-bottom: 20px">
<div class="text text-white">提供服务</div>
<div class="line line-white"></div>
</div>
<div class="list-box">
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
<div class="item-name">
<img :src="item.img" />
{{ item.name }}
<div class="menu-box">
<div class="content-box">
<!-- 提供服务 -->
<div class="img-bg service-box">
<div class="title" style="margin-bottom: 20px">
<div class="text text-white">提供服务</div>
<div class="line line-white"></div>
</div>
<div class="list-box">
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
<div class="item-name">
<img :src="item.img" />
{{ item.name }}
</div>
<div class="name-box">
<div class="item-v" v-for="(v, j) in item.list" :key="j" :style="{
'background-image': `url(${item.imgBG || ''})`,
width: `${item.width || ''}`,
}">
{{ v }}
</div>
</div>
</div>
</div>
</div>
<div class="name-box">
<div
class="item-v"
v-for="(v, j) in item.list"
:key="j"
:style="{
'background-image': `url(${item.imgBG || ''})`,
width: `${item.width || ''}`,
}"
>
{{ v }}
</div>
<!-- 总体流程 -->
<TheOverallProcess></TheOverallProcess>
<!-- imgList -->
<div class="img-box" v-for="(item, i) in imgList" :key="i">
<div class="title">
<div class="text">{{ item.name }}</div>
<div class="line"></div>
</div>
<div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }">
</div>
<div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
{{ item.btnText }} >>
</div>
</div>
</div>
</div>
</div>
<!-- 总体流程 -->
<TheOverallProcess></TheOverallProcess>
<!-- imgList -->
<div class="img-box" v-for="(item, i) in imgList" :key="i">
<div class="title">
<div class="text">{{ item.name }}</div>
<div class="line"></div>
</div>
<div
class="img-bg"
:class="item.className"
:style="{ 'background-image': `url(${item.bgImg || ''})` }"
></div>
<div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
{{ item.btnText }} >>
</div>
</div>
<!-- 联系我们 -->
<div class="img-bg callus-box">
<!-- <div class="title" style="margin-bottom: 20px">
<!-- 联系我们 -->
<div class="img-bg callus-box">
<!-- <div class="title" style="margin-bottom: 20px">
<div class="text text-white">联系我们</div>
<div class="line line-white"></div>
</div>
@ -62,233 +54,205 @@
<span>0530-0000000</span>
</p>
</div> -->
</div>
<!-- 能力上架弹窗 -->
<a-modal
v-model:visible="visible"
@ok="handleOk"
class="shangjia-class"
@cancel="handlecancel"
>
<div class="ant-modal-title" id="vcDialogTitle1">
<div class="showBg"></div>
能力上架申请
</div>
<div class="ability-to-type">
<div class="title">能力类型选择</div>
<div class="ability-to-type-content">
<div
v-for="item in abilityToType"
:key="item"
@click="abilityToTypeFunction(item)"
:class="
abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
"
>
{{ item }}
</div>
</div>
<!-- 能力上架弹窗 -->
<a-modal v-model:visible="visible" @ok="handleOk" class="shangjia-class" @cancel="handlecancel">
<div class="ant-modal-title" id="vcDialogTitle1">
<div class="showBg"></div>
能力上架申请
</div>
<div class="ability-to-type">
<div class="title">能力类型选择</div>
<div class="ability-to-type-content">
<div v-for="item in abilityToType" :key="item" @click="abilityToTypeFunction(item)" :class="
abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
">
{{ item }}
</div>
</div>
</div>
<div class="component-type" v-if="abilityToTypeFunctionData == '组件服务'">
<div class="title">组件类型选择</div>
<div class="component-type-content">
<a-radio-group v-model:value="componentTypeValue">
<a-radio @click="componentTypeValueFunction(item)" v-for="item in componentType" :key="item"
:value="item">
{{ item }}
</a-radio>
</a-radio-group>
</div>
</div>
</a-modal>
</div>
<div
class="component-type"
v-if="abilityToTypeFunctionData == '组件服务'"
>
<div class="title">组件类型选择</div>
<div class="component-type-content">
<!-- <a-checkbox-group
v-model:value="value1"
name="checkboxgroup"
:options="componentType"
/> -->
<a-radio-group v-model:value="componentTypeValue">
<a-radio
@click="componentTypeValueFunction(item)"
v-for="item in componentType"
:key="item"
:value="item"
>
{{ item }}
</a-radio>
</a-radio-group>
</div>
</div>
</a-modal>
</div>
</div>
</template>
<script setup>
import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer'
import { ref, onMounted, watch } from 'vue'
import TheOverallProcess from './TheOverallProcess.vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
const router = useRouter()
const seviceList = ref([
import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer'
import { ref, onMounted, watch } from 'vue'
import TheOverallProcess from './TheOverallProcess.vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
const router = useRouter()
const seviceList = ref([
{
name: '组件服务',
img: require('@/assets/menu/service-component.png'),
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
name: '组件服务',
img: require('@/assets/menu/service-component.png'),
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
},
{
name: '应用资源',
img: require('@/assets/menu/service-application.png'),
list: [
'办公系统',
'业务系统',
'门户网站',
'大屏看板',
'小程序',
'公众号',
],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
name: '应用资源',
img: require('@/assets/menu/service-application.png'),
list: [
'办公系统',
'业务系统',
'门户网站',
'大屏看板',
'小程序',
'公众号',
],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
},
{
name: '基础设施',
img: require('@/assets/menu/service-infrastructure.png'),
list: ['视频资源', '云资源', '感知资源'],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
name: '基础设施',
img: require('@/assets/menu/service-infrastructure.png'),
list: ['视频资源', '云资源', '感知资源'],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
},
{
name: '数据资源',
img: require('@/assets/menu/service-data.png'),
list: ['政务信息资源'],
imgBG: require('../../../assets/menu/imgBG-long.png'),
width: '200px',
name: '数据资源',
img: require('@/assets/menu/service-data.png'),
list: ['政务信息资源'],
imgBG: require('../../../assets/menu/imgBG-long.png'),
width: '200px',
},
])
const imgList = ref([
])
const imgList = ref([
{
name: '能力上架',
bgImg: require('../../../assets/menu/shelves.png'),
btnText: '立即上架',
className: 'shelves-img',
name: '能力上架',
bgImg: require('../../../assets/menu/shelves.png'),
btnText: '立即上架',
className: 'shelves-img',
},
{
name: '能力申请',
bgImg: require('../../../assets/menu/apply.png'),
btnText: '立即申请',
className: 'apply-img',
name: '能力申请',
bgImg: require('../../../assets/menu/apply.png'),
btnText: '立即申请',
className: 'apply-img',
},
{
name: '需求发布',
bgImg: require('../../../assets/menu/demand.png'),
btnText: '立即发布',
className: 'demand-img',
name: '需求发布',
bgImg: require('../../../assets/menu/demand.png'),
btnText: '立即发布',
className: 'demand-img',
},
{
name: '资源下架',
bgImg: require('../../../assets/menu/down.png'),
btnText: '立即下架',
className: 'down-img',
name: '资源下架',
bgImg: require('../../../assets/menu/down.png'),
btnText: '立即下架',
className: 'down-img',
},
])
//
function handlecancel() {
])
//
function handlecancel() {
abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = ''
}
let abilityToTypeFunctionData = ref('组件服务')
function abilityToTypeFunction(item) {
}
let abilityToTypeFunctionData = ref('组件服务')
function abilityToTypeFunction(item) {
abilityToTypeFunctionData.value = item
}
let abilityToType = ref(['组件服务', '应用资源'])
let componentType = ref([
}
let abilityToType = ref(['组件服务', '应用资源'])
let componentType = ref([
'智能算法',
'图层服务',
'开发组件',
// '',
'业务组件',
// '',
])
const visible = ref(false)
let componentTypeValueOld = ref('')
function componentTypeValueFunction(item) {
])
const visible = ref(false)
let componentTypeValueOld = ref('')
function componentTypeValueFunction(item) {
if (componentTypeValueOld.value != item) {
componentTypeValue.value = item
componentTypeValueOld.value = item
componentTypeValue.value = item
componentTypeValueOld.value = item
} else {
componentTypeValue.value = ''
componentTypeValue.value = ''
}
}
let componentTypeValue = ref('')
const handleOk = (e) => {
}
let componentTypeValue = ref('')
const handleOk = (e) => {
let snum = ref({})
if (abilityToTypeFunctionData.value == '组件服务') {
if (!componentTypeValue.value || componentTypeValue.value == '') {
message.error('请选择组件类型!')
return
} else if (
componentTypeValue.value === '智能算法' ||
componentTypeValue.value === '开发组件' ||
componentTypeValue.value === '业务组件' ||
componentTypeValue.value === '图层服务'
) {
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
componentTypeValue: componentTypeValue.value,
if (!componentTypeValue.value || componentTypeValue.value == '') {
message.error('请选择组件类型!')
return
} else if (
componentTypeValue.value === '智能算法' ||
componentTypeValue.value === '开发组件' ||
componentTypeValue.value === '业务组件' ||
componentTypeValue.value === '图层服务'
) {
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
componentTypeValue: componentTypeValue.value,
}
} else {
message.error('功能开发中!')
return
}
} else {
message.error('功能开发中!')
return
}
} else {
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
}
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
}
}
const applypage = router.resolve({
path: '/nenglishangjia', //
query: snum.value,
path: '/nenglishangjia', //
query: snum.value,
})
window.open(applypage.href, '_blank')
visible.value = false
abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = ''
console.log(e)
}
//
const toWhere = (data) => {
}
//
const toWhere = (data) => {
console.log(data, 'wwwwwww')
if (data === '能力上架') {
visible.value = true
visible.value = true
} else if (data === '能力申请') {
const newpage = router.resolve({
path: '/addApplication', //
})
window.open(newpage.href, '_blank')
const newpage = router.resolve({
path: '/addApplication', //
})
window.open(newpage.href, '_blank')
} else if (data === '需求发布') {
const newpage = router.resolve({
path: '/DetailsPageconetent',
query: {
select: '组件服务',
},
})
window.location.href = newpage.href
const newpage = router.resolve({
path: '/DetailsPageconetent',
query: {
select: '组件服务',
},
})
window.location.href = newpage.href
} else if (data === '资源下架') {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
const newpage = router.resolve({
path: '/personalCenter',
})
window.location.href = newpage.href
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
const newpage = router.resolve({
path: '/personalCenter',
})
window.location.href = newpage.href
}
}
watch(abilityToTypeFunctionData, () => {
}
watch(abilityToTypeFunctionData, () => {
componentTypeValue.value = ''
})
})
</script>
<style lang="less">
.shangjia-class {
.shangjia-class {
position: fixed;
left: 50%;
top: 50%;
@ -298,130 +262,138 @@
font-weight: 500;
.ant-radio-inner {
height: 0.16rem;
width: 0.16rem;
height: 0.16rem;
width: 0.16rem;
}
.ant-radio-inner::after {
background-color: unset;
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
background-size: cover;
background-position: center;
background-color: unset;
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
background-size: cover;
background-position: center;
}
.ant-modal-content {
border-radius: 0.1rem;
.ability-to-type,
.component-type {
display: flex;
margin-top: 0.2rem;
.title {
white-space: nowrap;
margin-right: 0.2rem;
display: flex;
align-items: center;
height: 0.26rem;
}
.component-type-content {
width: 100%;
height: unset;
border: unset;
background: unset;
.ant-radio-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.15rem;
}
}
}
border-radius: 0.1rem;
.ability-to-type {
.ability-to-type-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: unset;
border: unset;
background: unset;
div {
margin-right: 0.15rem;
cursor: pointer;
font-size: 0.14rem;
width: 0.9rem;
height: 0.26rem;
border-radius: 0.13rem;
color: #333333;
background: #f5f5f5;
border: 0.01rem #cccccc solid;
.ability-to-type,
.component-type {
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
}
margin-top: 0.2rem;
.ability-to-type-down {
background: #0087ff;
color: #fff;
}
.title {
white-space: nowrap;
margin-right: 0.2rem;
display: flex;
align-items: center;
height: 0.26rem;
}
.component-type-content {
width: 100%;
height: unset;
border: unset;
background: unset;
.ant-radio-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.15rem;
}
}
}
.ability-to-type {
.ability-to-type-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: unset;
border: unset;
background: unset;
div {
margin-right: 0.15rem;
cursor: pointer;
font-size: 0.14rem;
width: 0.9rem;
height: 0.26rem;
border-radius: 0.13rem;
color: #333333;
background: #f5f5f5;
border: 0.01rem #cccccc solid;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
}
.ability-to-type-down {
background: #0087ff;
color: #fff;
}
}
}
}
}
.ant-modal-title {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.ant-modal-footer {
border: 0;
text-align: center;
padding-bottom: 0.2rem;
button {
margin-right: 0.2rem;
border-radius: 0.08rem;
}
border: 0;
text-align: center;
padding-bottom: 0.2rem;
button {
margin-right: 0.2rem;
border-radius: 0.08rem;
}
}
.showBg {
height: 0.24rem;
width: 0.24rem;
background: url('~@/assets/home/shenqing.png') no-repeat;
background-size: cover;
background-position: center;
margin-right: 0.1rem;
height: 0.24rem;
width: 0.24rem;
background: url('~@/assets/home/shenqing.png') no-repeat;
background-size: cover;
background-position: center;
margin-right: 0.1rem;
}
}
}
</style>
<style lang="less" scoped>
.menu-box {
.menu-box {
width: 1920px;
// padding-bottom: 40px;
}
}
.title {
.title {
margin-bottom: 20px;
.text {
padding: 20px 0;
font-size: 26px;
margin: 0 auto;
text-align: center;
padding: 20px 0;
font-size: 26px;
margin: 0 auto;
text-align: center;
}
.line {
width: 50px;
height: 3px;
background: #0058e1;
margin: 0 auto;
width: 50px;
height: 3px;
background: #0058e1;
margin: 0 auto;
}
.line-white {
background: #fff;
background: #fff;
}
.text-white {
color: #fff;
color: #fff;
}
}
}
.btn {
.btn {
width: 150px;
height: 50px;
line-height: 50px;
@ -434,128 +406,135 @@
cursor: pointer;
&:hover {
background: #e5eefc;
background: #e5eefc;
}
}
}
.img-box {
.img-box {
margin-bottom: 50px;
}
}
.service-box {
.service-box {
width: 1920px;
height: 613px;
background-size: 100% 100%;
background-image: url('../../../assets/menu/service.png');
.list-box {
width: 1560px;
height: 350px;
margin: 0 auto;
width: 1560px;
height: 350px;
margin: 0 auto;
}
}
.callus-box {
}
.callus-box {
width: 1920px;
height: 214px;
background-size: 100% 100%;
background-image: url('../../../assets/menu/callus.png');
.list-box {
width: 1560px;
// height: 350px;
margin: 0 auto;
p {
font-size: 24px;
color: #ffffff;
font-weight: bold;
span {
font-size: 30px;
}
}
p:nth-child(1) {
margin-right: 100px;
}
}
}
.img-bg {
.list-box {
width: 1560px;
// height: 350px;
margin: 0 auto;
p {
font-size: 24px;
color: #ffffff;
font-weight: bold;
span {
font-size: 30px;
}
}
p:nth-child(1) {
margin-right: 100px;
}
}
}
.img-bg {
width: 1920px;
background-size: 100% 100%;
}
}
.process-img {
.process-img {
height: 855px;
background-image: url('../../../assets/menu/process.png');
}
}
.shelves-img {
.shelves-img {
height: 497px;
width: 1107px;
margin: 0 auto;
background-image: url('../../../assets/menu/shelves.png');
}
}
.apply-img {
.apply-img {
height: 752px;
background-image: url('../../../assets/menu/apply.png');
}
}
.demand-img {
.demand-img {
height: 525px;
width: 1300px;
margin: 0 auto;
background-image: url('../../../assets/menu/demand.png');
}
}
.down-img {
.down-img {
height: 544px;
background-image: url('../../../assets/menu/down.png');
}
}
.list-box {
.list-box {
display: flex;
align-items: center;
justify-content: center;
.list-item {
padding: 10px 20px;
width: 310px;
height: 356px;
background: rgba(23, 85, 177, 0.43);
border: 1px solid #74a9f8;
border-radius: 10px;
margin: 0 10px;
cursor: pointer;
padding: 10px 20px;
width: 310px;
height: 356px;
background: rgba(23, 85, 177, 0.43);
border: 1px solid #74a9f8;
border-radius: 10px;
margin: 0 10px;
cursor: pointer;
.item-name {
color: #fff;
font-size: 20px;
text-align: center;
padding: 20px 0 10px 0;
}
.item-name {
color: #fff;
font-size: 20px;
text-align: center;
padding: 20px 0 10px 0;
}
.name-box {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.name-box {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.item-v {
width: 124px;
height: 74px;
line-height: 74px;
color: #fff;
font-size: 20px;
text-align: center;
margin: 0 0 20px;
background-size: 100% 100%;
}
.item-v:nth-child(2n) {
margin-left: 16px;
}
// .item-v:last-child {
// width: 200px;
// }
.item-v {
width: 124px;
height: 74px;
line-height: 74px;
color: #fff;
font-size: 20px;
text-align: center;
margin: 0 0 20px;
background-size: 100% 100%;
}
.item-v:nth-child(2n) {
margin-left: 16px;
}
// .item-v:last-child {
// width: 200px;
// }
}
}
}
</style>

View File

@ -1,275 +1,288 @@
<template>
<home-header></home-header>
<div class="menu-container">
<div class="menu-box">
<div id="container" class="content-menu">
<div class="left">
<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 id="container" class="content-menu">
<div class="left">
<div class="first-title-text doc" :style="{ color: '技术文档' === titleData.name ? '#0058e1' : '' }"
@click="changeName({ name: '技术文档' })">
技术文档
</div>
<!-- 技术文档 -->
<div class="right" v-if="titleData.name !== '新手指引'">
<div style="height: 100%">
<iframe
name="iframeName"
width="1300"
height="100%"
id="iframeId"
:frameborder="0"
:src="doc_base_url + clickData.doc"
></iframe>
</div>
</div>
<!-- 使用手册 -->
<div class="manual" v-if="titleData.name === '新手指引'">
<p>使用手册</p>
<abilityDocTree style="max-height:400px;overflow-y:auto" :dataList="treeArray" @treeClick="treeClick"
:clickData="clickData"></abilityDocTree>
</div>
<div class="first-title-text new-guide-box" :style="{ color: '使用手册' === titleData.name ? '#0058e1' : '' }"
@click="changeName({ name: '使用手册' })">
<div class="guide-text">使用手册</div>
</div>
<!-- 技术文档 -->
<div class="right" v-if="titleData.name !== '使用手册'">
<div style="height: 100%">
<iframe name="iframeName" width="1300" height="100%" id="iframeId" :frameborder="0"
:src="doc_base_url + clickData.doc"></iframe>
</div>
</div>
<menuBook v-if="titleData.name === '新手指引'"></menuBook>
</div>
<menuBook v-if="titleData.name === '使用手册'"></menuBook>
</div>
<home-footer v-if="footShow"></home-footer>
</template>
<script setup>
import HomeHeader from '@/views/home/components/header'
import abilityDocTree from './components/abilityDocTree'
import menuBook from './components/menuBook'
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getDevelopDocTree } from '@/api/home'
import HomeFooter from '@/views/newHome/components/Footer'
// import flatten from '@turf/flatten'
import HomeHeader from '@/views/home/components/header'
import abilityDocTree from './components/abilityDocTree'
import menuBook from './components/menuBook'
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getDevelopDocTree } from '@/api/home'
import HomeFooter from '@/views/newHome/components/Footer'
// import flatten from '@turf/flatten'
const titleList = ref([
{
name: '新手指引',
className: 'newGuide',
},
{
name: '技术文档',
className: 'doc',
},
])
const titleData = ref(titleList.value[0])
const clickData = ref({})
const treeArray = ref([])
const treeArrayCopy = ref([])
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
const titleList = ref([
{
name: '使用手册',
className: 'newGuide',
},
{
name: '技术文档',
className: 'doc',
},
])
const titleData = ref(titleList.value[0])
const clickData = ref({})
const treeArray = ref([])
const treeArrayCopy = ref([])
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
const treeClick = (item) => {
footShow.value = false
clickData.value = item
console.log('clickData------------>', item)
titleData.value = titleList.value[1]
}
const treeClick = (item) => {
footShow.value = false
clickData.value = item
console.log('clickData------------>', item)
titleData.value = titleList.value[1]
}
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 || []
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
})
.catch((err) => {
message.error(err)
})
}
const footShow = ref(true)
const changeName = (item) => {
titleData.value = item
if (item.name == '新手指引') {
footShow.value = true
clickData.value = {}
}
if (item.name == '技术文档') {
footShow.value = false
if (!clickData.value.title) {
clickData.value = {}
treeArray.value = []
treeArrayCopy.value.map((val, i) => {
let obj = Object.assign({}, val, {
title: val.title,
show:
(i === 0 && val.children && val.children.length > 0) ||
typeList.includes(val.title)
? true
: false,
children: [],
})
formData(val.children, obj)
treeArray.value.push(obj)
})
getFirstData(treeArrayCopy.value[0] || {})
const getTreeData = () => {
getDevelopDocTree({})
.then((res) => {
console.log('res------文档树------>', res)
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
}
}
const formData = (children = [], dataItem) => {
children.map((item, index) => {
let _obj = Object.assign({}, item, {
title: item.title,
show:
(index === 0 && item.children && item.children.length > 0) ||
typeList.includes(item.title)
? true
: false,
children: [],
})
if (item.children && item.children.length > 0) {
formData(item.children, _obj)
}
dataItem.children.push(_obj)
treeArray.value = res.data.data || []
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
})
}
.catch((err) => {
message.error(err)
})
}
const footShow = ref(true)
const getFirstData = (firstObj = {}) => {
if (firstObj && firstObj.children && firstObj.children.length > 0) {
getFirstData(firstObj.children[0])
} else {
clickData.value = firstObj
const changeName = (item) => {
titleData.value = item
if (item.name == '使用手册') {
footShow.value = true
clickData.value = {}
}
if (item.name == '技术文档') {
footShow.value = false
if (!clickData.value.title) {
clickData.value = {}
treeArray.value = []
treeArrayCopy.value.map((val, i) => {
let obj = Object.assign({}, val, {
title: val.title,
show:
(i === 0 && val.children && val.children.length > 0) ||
typeList.includes(val.title)
? true
: false,
children: [],
})
formData(val.children, obj)
treeArray.value.push(obj)
})
getFirstData(treeArrayCopy.value[0] || {})
}
}
}
onMounted(() => {
getTreeData()
const formData = (children = [], dataItem) => {
children.map((item, index) => {
let _obj = Object.assign({}, item, {
title: item.title,
show:
(index === 0 && item.children && item.children.length > 0) ||
typeList.includes(item.title)
? true
: false,
children: [],
})
if (item.children && item.children.length > 0) {
formData(item.children, _obj)
}
dataItem.children.push(_obj)
})
}
const getFirstData = (firstObj = {}) => {
if (firstObj && firstObj.children && firstObj.children.length > 0) {
getFirstData(firstObj.children[0])
} else {
clickData.value = firstObj
}
}
onMounted(() => {
getTreeData()
})
</script>
<style scoped lang="less">
.menu-box {
// overflow: hidden;
height: 100%;
}
.menu-box {
height: 100%;
}
.first-title-text {
cursor: pointer;
font-size: 18px;
color: #333;
padding-bottom: 10px;
display: flex;
align-items: center;
.first-title-text {
cursor: pointer;
font-size: 18px;
color: #333;
padding-bottom: 10px;
display: flex;
align-items: center;
&:hover {
color: #0058e1;
}
&:hover {
color: #0058e1;
}
}
.menu-container {
width: 100%;
padding-top: 0.74rem;
}
.doc {
font-weight: bold;
}
.content-menu {
width: 1800px;
display: flex;
justify-content: flex-start;
margin: 0 auto;
box-sizing: border-box;
position: relative;
// position: fixed;
// left: 50%;
// bottom: 0;
// transform: translateX(-50%);
// top: 0.6rem;
// top: 0;
}
.menu-container {
width: 100%;
padding-top: 0.74rem;
min-height: 1000px;
position: relative;
}
.left {
z-index: 10;
width: 200px;
padding: 20px;
margin-right: 20px;
background: rgba(244, 245, 248, 1);
overflow-y: scroll;
position: absolute;
top: 200px;
left: 20px;
}
.content-menu {
width: 1800px;
display: flex;
justify-content: flex-start;
margin: 0 auto;
box-sizing: border-box;
}
.right {
width: 1300px;
height: calc(100% - 20px);
position: absolute;
top: 10px;
left: 300px;
min-height: 600px;
}
.manual {
cursor: pointer;
z-index: 10;
width: 74px;
height: 136px;
position: absolute;
top: 200px;
right: 140px;
background-size: 100% 100%;
background-image: url('../../assets/menu/manual.png');
display: flex;
justify-content: center;
align-items: center;
padding: unset !important;
p {
color: #005be1;
font-size: 20px;
margin-bottom: 0;
width: 20px;
}
}
.left {
width: 200px;
padding-left: 10px;
padding-top: 10px;
background: #f4f5f8;
position: absolute;
top: 300px;
left: 85px;
max-height: 400px;
}
.sidebar {
right: 0 !important;
}
.new-guide-box {
position: absolute;
top: 300px;
right: 205px;
width: 74px;
height: 136px;
background: url('~@/assets/menu/new-bg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-bottom: 0;
}
.content {
right: 16rem !important;
left: 0 !important;
}
.guide-text {
width: 25px;
text-align: center;
word-wrap: break-word;
font-size: 20px;
color: #0058e1;
}
.img {
height: 20px;
.right {
width: 1300px;
height: calc(100% - 20px);
position: absolute;
min-height: 600px;
left: 50%;
transform: translateX(-50%);
}
.left {
width: 200px;
padding-left: 10px;
padding-top: 10px;
background: #f4f5f8;
position: absolute;
top: 300px;
left: 85px;
max-height: 400px;
}
.manual {
cursor: pointer;
z-index: 10;
width: 74px;
height: 136px;
position: absolute;
top: 200px;
right: 140px;
background-size: 100% 100%;
background-image: url('../../assets/menu/manual.png');
display: flex;
justify-content: center;
align-items: center;
padding: unset !important;
p {
color: #005be1;
font-size: 20px;
margin-bottom: 0;
width: 20px;
margin-right: 8px;
}
}
.doc {
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
background-size: 100%;
}
.sidebar {
right: 0 !important;
}
.newGuide {
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
background-size: 100%;
}
.newGuide {
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
background-size: 100%;
}
.new-menu-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content {
right: 16rem !important;
left: 0 !important;
}
.rela {
width: 100%;
height: 100%;
position: relative;
}
.img {
height: 20px;
width: 20px;
margin-right: 8px;
}
.rela {
width: 100%;
height: 100%;
position: relative;
}
.new-menu-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>