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

关联能力

This commit is contained in:
851673013@qq.com 2022-06-29 16:56:51 +08:00
parent 8287422d9a
commit 2a6ba26594
17 changed files with 783 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/api/home.js
View File

@ -297,3 +297,11 @@ export function getDataResource(data) {
data,
})
}
//应用详情列表
export function queryPartAppByKeyId(params) {
return request({
url: 'dataResourceRel/queryPart4AppByKeyId',
method: 'get',
params,
})
}

23
front/src/views/detailsAll/AlgorithmDetails.vue
View File

@ -21,6 +21,12 @@
id="algorithm-display"
class="scrollBox"
></algorithm-display>
<!-- 关联能力 -->
<algorithm-associated-ability
:associatedComponents="associatedComponents"
id="algorithm-associated-ability"
class="scrollBox"
></algorithm-associated-ability>
<!-- 算法优势 -->
<algorithm-advantage
:dataList="dataList.data"
@ -70,6 +76,7 @@
</template>
<script setup>
import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
@ -81,7 +88,7 @@
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home'
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
import mybus from '@/myplugins/mybus'
const router = useRouter()
const scrollTop = ref(0)
@ -90,6 +97,11 @@
const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([
{ type: '应用资源', dataList: [] },
{ type: '数据资源', dataList: [] },
{ type: '基础设施', dataList: [] },
])
document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease'
@ -148,6 +160,15 @@
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
type: item.type,
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)

23
front/src/views/detailsAll/ApplicationDetails.vue
View File

@ -29,6 +29,12 @@
id="application-associated-components"
class="scrollBox"
></application-associated-components>
<!-- 关联能力 -->
<application-associated-ability
:associatedComponents="associatedComponents"
id="application-associated-ability"
class="scrollBox"
></application-associated-ability>
<!-- 功能介绍-->
<application-function-intorduction
:dataList="dataList.data"
@ -64,6 +70,7 @@
<script setup>
import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
@ -73,8 +80,13 @@
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home'
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
import mybus from '@/myplugins/mybus'
const associatedComponents = ref([
{ type: '组件服务', dataList: [] },
{ type: '数据资源', dataList: [] },
{ type: '基础设施', dataList: [] },
])
const router = useRouter()
const scrollTop = ref(0)
const domArr = ref([])
@ -140,6 +152,15 @@
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
type: item.type,
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)

23
front/src/views/detailsAll/BusinessDetails.vue
View File

@ -21,6 +21,12 @@
id="business-presentation"
class="scrollBox"
></business-presentation>
<!-- 关联能力 -->
<business-associated-ability
:associatedComponents="associatedComponents"
id="business-associated-ability"
class="scrollBox"
></business-associated-ability>
<!-- 功能介绍-->
<business-function-intorduction
:dataList="dataList.data"
@ -55,6 +61,7 @@
</template>
<script setup>
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
@ -64,7 +71,7 @@
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home'
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
import mybus from '@/myplugins/mybus'
const router = useRouter()
const scrollTop = ref(0)
@ -73,6 +80,11 @@
const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([
{ type: '应用资源', dataList: [] },
{ type: '数据资源', dataList: [] },
{ type: '基础设施', dataList: [] },
])
document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease'
@ -131,6 +143,15 @@
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
type: item.type,
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)

23
front/src/views/detailsAll/DeveloperComponents.vue
View File

@ -21,6 +21,12 @@
id="eveloper-presentation"
class="scrollBox"
></Developer-presentation>
<!-- 关联能力 -->
<developer-associated-ability
:associatedComponents="associatedComponents"
id="developer-associated-ability"
class="scrollBox"
></developer-associated-ability>
<!-- 功能介绍-->
<developer-function-intorduction
:dataList="dataList.data"
@ -61,6 +67,7 @@
</template>
<script setup>
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
@ -71,7 +78,7 @@
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home'
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
import mybus from '@/myplugins/mybus'
const router = useRouter()
const scrollTop = ref(0)
@ -80,6 +87,11 @@
const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([
{ type: '应用资源', dataList: [] },
{ type: '数据资源', dataList: [] },
{ type: '基础设施', dataList: [] },
])
document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease'
@ -138,6 +150,15 @@
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
type: item.type,
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)

23
front/src/views/detailsAll/LayerService.vue
View File

@ -29,6 +29,12 @@
id="service-information"
class="scrollBox"
></layer-service-information>
<!-- 关联能力 -->
<layer-service-associated-ability
:associatedComponents="associatedComponents"
id="layer-service-associated-ability"
class="scrollBox"
></layer-service-associated-ability>
<!-- 应用场景 -->
<layer-service-application-scenarios
:dataList="dataList.data"
@ -63,6 +69,7 @@
</template>
<script setup>
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
@ -73,7 +80,7 @@
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home'
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
import mybus from '@/myplugins/mybus'
const router = useRouter()
const scrollTop = ref(0)
@ -82,6 +89,11 @@
const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([
{ type: '应用资源', dataList: [] },
{ type: '数据资源', dataList: [] },
{ type: '基础设施', dataList: [] },
])
document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease'
@ -140,6 +152,15 @@
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
type: item.type,
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)

127
front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联能力" type="RELEVANCE"></detals-title>
<div class="application-associated-ability-main">
<div
class="associated-ability-card"
v-for="(item, index) in dataFrom"
:key="item.type"
>
<div class="associated-ability-card-title">
{{ item.type }}
</div>
<div class="associated-ability-card-content">
<div
class="associated-ability-card-content-font"
v-for="(dataListitem, dataListindex) in item.dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<span>{{ dataListindex + 1 }}、</span>
{{ dataListitem.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
})
const dataFrom = ref([])
const flag = ref(true)
const oldid = router.currentRoute.value.query.id
//点击查看详情
const switchFunction = (id) => {
router.push({
path: '/details',
query: {
id: id,
},
})
}
if (props.associatedComponents) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
watch(
() => props.associatedComponents,
(val) => {
if (val) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
}
)
watch(
() => router.currentRoute.value.query.id,
(newValue, oldValue) => {
if (oldid != router.currentRoute.value.query.id) {
window.location.reload()
}
},
{ immediate: true }
)
</script>
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.14rem;
display: flex;
justify-content: space-between;
.associated-ability-card {
width: 4.28rem;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #e4e6f5;
border-radius: 0.1rem;
padding-bottom: 0.3rem;
cursor: pointer;
.associated-ability-card-title {
padding-top: 0.3rem;
font-size: 0.22rem;
text-align: center;
}
.associated-ability-card-content {
width: 100%;
margin-top: 0.25rem;
padding-left: 0.3rem;
.associated-ability-card-content-font {
font-size: 0.18rem;
color: #999;
margin-right: 0.15rem;
margin-top: 0.15rem;
}
.associated-ability-card-content-font:hover {
color: #0058e1;
}
}
}
.associated-ability-card:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
}
}
</style>

6
front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
View File

@ -32,6 +32,10 @@
name: '算法优势',
key: 'algorithm-advantage',
},
{
name: '关联能力',
key: 'algorithm-associated-ability',
},
{
name: '应用场景',
key: 'application-scenarios',
@ -87,6 +91,7 @@
list.value.push('使用方式')
}
})
list.value.push('关联能力')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
@ -131,6 +136,7 @@
list.value.push('使用方式')
}
})
list.value.push('关联能力')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {

127
front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联能力" type="RELEVANCE"></detals-title>
<div class="application-associated-ability-main">
<div
class="associated-ability-card"
v-for="(item, index) in dataFrom"
:key="item.type"
>
<div class="associated-ability-card-title">
{{ item.type }}
</div>
<div class="associated-ability-card-content">
<div
class="associated-ability-card-content-font"
v-for="(dataListitem, dataListindex) in item.dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<span>{{ dataListindex + 1 }}、</span>
{{ dataListitem.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
})
const dataFrom = ref([])
const flag = ref(true)
const oldid = router.currentRoute.value.query.id
//点击查看详情
const switchFunction = (id) => {
router.push({
path: '/details',
query: {
id: id,
},
})
}
if (props.associatedComponents) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
watch(
() => props.associatedComponents,
(val) => {
if (val) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
}
)
watch(
() => router.currentRoute.value.query.id,
(newValue, oldValue) => {
if (oldid != router.currentRoute.value.query.id) {
window.location.reload()
}
},
{ immediate: true }
)
</script>
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.14rem;
display: flex;
justify-content: space-between;
.associated-ability-card {
width: 4.28rem;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #e4e6f5;
border-radius: 0.1rem;
padding-bottom: 0.3rem;
cursor: pointer;
.associated-ability-card-title {
padding-top: 0.3rem;
font-size: 0.22rem;
text-align: center;
}
.associated-ability-card-content {
width: 100%;
margin-top: 0.25rem;
padding-left: 0.3rem;
.associated-ability-card-content-font {
font-size: 0.18rem;
color: #999;
margin-right: 0.15rem;
margin-top: 0.15rem;
}
.associated-ability-card-content-font:hover {
color: #0058e1;
}
}
}
.associated-ability-card:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
}
}
</style>

6
front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
View File

@ -36,6 +36,10 @@
name: '关联组件',
key: 'application-associated-components',
},
{
name: '关联能力',
key: 'application-associated-ability',
},
{
name: '使用能力',
key: 'ability-to-use',
@ -77,6 +81,7 @@
list.value.push('应用展示')
}
})
list.value.push('关联能力')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
@ -111,6 +116,7 @@
list.value.push('应用展示')
}
})
list.value.push('关联能力')
list.value.push('部署与安全')
list.value.push('归属部门与服务商')
navList.value.forEach((item) => {

127
front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联能力" type="RELEVANCE"></detals-title>
<div class="application-associated-ability-main">
<div
class="associated-ability-card"
v-for="(item, index) in dataFrom"
:key="item.type"
>
<div class="associated-ability-card-title">
{{ item.type }}
</div>
<div class="associated-ability-card-content">
<div
class="associated-ability-card-content-font"
v-for="(dataListitem, dataListindex) in item.dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<span>{{ dataListindex + 1 }}、</span>
{{ dataListitem.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
})
const dataFrom = ref([])
const flag = ref(true)
const oldid = router.currentRoute.value.query.id
//点击查看详情
const switchFunction = (id) => {
router.push({
path: '/details',
query: {
id: id,
},
})
}
if (props.associatedComponents) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
watch(
() => props.associatedComponents,
(val) => {
if (val) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
}
)
watch(
() => router.currentRoute.value.query.id,
(newValue, oldValue) => {
if (oldid != router.currentRoute.value.query.id) {
window.location.reload()
}
},
{ immediate: true }
)
</script>
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.14rem;
display: flex;
justify-content: space-between;
.associated-ability-card {
width: 4.28rem;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #e4e6f5;
border-radius: 0.1rem;
padding-bottom: 0.3rem;
cursor: pointer;
.associated-ability-card-title {
padding-top: 0.3rem;
font-size: 0.22rem;
text-align: center;
}
.associated-ability-card-content {
width: 100%;
margin-top: 0.25rem;
padding-left: 0.3rem;
.associated-ability-card-content-font {
font-size: 0.18rem;
color: #999;
margin-right: 0.15rem;
margin-top: 0.15rem;
}
.associated-ability-card-content-font:hover {
color: #0058e1;
}
}
}
.associated-ability-card:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
}
}
</style>

6
front/src/views/detailsAll/components/Business/BusinessNavigation.vue
View File

@ -36,6 +36,10 @@
name: '应用场景',
key: 'application-scenarios',
},
{
name: '关联能力',
key: 'business-associated-ability',
},
{
name: '应用案例',
key: 'application-case',
@ -87,6 +91,7 @@
list.value.push('组件展示')
}
})
list.value.push('关联能力')
list.value.push('使用方式')
navList.value.forEach((item) => {
console.log(item)
@ -136,6 +141,7 @@
list.value.push('组件展示')
}
})
list.value.push('关联能力')
list.value.push('使用方式')
navList.value.forEach((item) => {
console.log(item)

127
front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联能力" type="RELEVANCE"></detals-title>
<div class="application-associated-ability-main">
<div
class="associated-ability-card"
v-for="(item, index) in dataFrom"
:key="item.type"
>
<div class="associated-ability-card-title">
{{ item.type }}
</div>
<div class="associated-ability-card-content">
<div
class="associated-ability-card-content-font"
v-for="(dataListitem, dataListindex) in item.dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<span>{{ dataListindex + 1 }}、</span>
{{ dataListitem.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
})
const dataFrom = ref([])
const flag = ref(true)
const oldid = router.currentRoute.value.query.id
//点击查看详情
const switchFunction = (id) => {
router.push({
path: '/details',
query: {
id: id,
},
})
}
if (props.associatedComponents) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
watch(
() => props.associatedComponents,
(val) => {
if (val) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
}
)
watch(
() => router.currentRoute.value.query.id,
(newValue, oldValue) => {
if (oldid != router.currentRoute.value.query.id) {
window.location.reload()
}
},
{ immediate: true }
)
</script>
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.14rem;
display: flex;
justify-content: space-between;
.associated-ability-card {
width: 4.28rem;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #e4e6f5;
border-radius: 0.1rem;
padding-bottom: 0.3rem;
cursor: pointer;
.associated-ability-card-title {
padding-top: 0.3rem;
font-size: 0.22rem;
text-align: center;
}
.associated-ability-card-content {
width: 100%;
margin-top: 0.25rem;
padding-left: 0.3rem;
.associated-ability-card-content-font {
font-size: 0.18rem;
color: #999;
margin-right: 0.15rem;
margin-top: 0.15rem;
}
.associated-ability-card-content-font:hover {
color: #0058e1;
}
}
}
.associated-ability-card:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
}
}
</style>

7
front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
View File

@ -28,6 +28,10 @@
name: '组件展示',
key: 'eveloper-presentation',
},
{
name: '关联能力',
key: 'developer-associated-ability',
},
{
name: '功能介绍',
key: 'function-introduction',
@ -66,7 +70,6 @@
if (props.dataList.infoList) {
list.value = []
props.dataList.infoList.map((item) => {
debugger
if (
item.attrType === '常见问题' ||
item.attrType === '应用案例' ||
@ -77,6 +80,7 @@
list.value.push('组件展示')
}
})
list.value.push('关联能力')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
@ -111,6 +115,7 @@
list.value.push('组件展示')
}
})
list.value.push('关联能力')
list.value.push('组件试用')
list.value.push('使用方式')
navList.value.forEach((item) => {

127
front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联能力" type="RELEVANCE"></detals-title>
<div class="application-associated-ability-main">
<div
class="associated-ability-card"
v-for="(item, index) in dataFrom"
:key="item.type"
>
<div class="associated-ability-card-title">
{{ item.type }}
</div>
<div class="associated-ability-card-content">
<div
class="associated-ability-card-content-font"
v-for="(dataListitem, dataListindex) in item.dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<span>{{ dataListindex + 1 }}、</span>
{{ dataListitem.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
})
const dataFrom = ref([])
const flag = ref(true)
const oldid = router.currentRoute.value.query.id
//点击查看详情
const switchFunction = (id) => {
router.push({
path: '/details',
query: {
id: id,
},
})
}
if (props.associatedComponents) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
watch(
() => props.associatedComponents,
(val) => {
if (val) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
}
)
watch(
() => router.currentRoute.value.query.id,
(newValue, oldValue) => {
if (oldid != router.currentRoute.value.query.id) {
window.location.reload()
}
},
{ immediate: true }
)
</script>
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.14rem;
display: flex;
justify-content: space-between;
.associated-ability-card {
width: 4.28rem;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #e4e6f5;
border-radius: 0.1rem;
padding-bottom: 0.3rem;
cursor: pointer;
.associated-ability-card-title {
padding-top: 0.3rem;
font-size: 0.22rem;
text-align: center;
}
.associated-ability-card-content {
width: 100%;
margin-top: 0.25rem;
padding-left: 0.3rem;
.associated-ability-card-content-font {
font-size: 0.18rem;
color: #999;
margin-right: 0.15rem;
margin-top: 0.15rem;
}
.associated-ability-card-content-font:hover {
color: #0058e1;
}
}
}
.associated-ability-card:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
}
}
</style>

7
front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
View File

@ -32,6 +32,10 @@
name: '图层信息',
key: 'service-information',
},
{
name: '关联能力',
key: 'layer-service-associated-ability',
},
{
name: '应用场景',
key: 'service-application-scenarios',
@ -117,7 +121,7 @@
list.value.push('使用方式')
}
})
list.value.push('关联能力')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
@ -192,6 +196,7 @@
list.value.push('使用方式')
}
})
list.value.push('关联能力')
list.value.push('图层信息')
list.value.push('使用方式')
navList.value.forEach((item) => {

4
front/src/views/home/DetailsPageconetent.vue
View File

@ -1018,7 +1018,6 @@
})
console.log('paramsGetResources', paramsGetResources)
}
// debugger
tecHnosphere = router.currentRoute.value.query.tecHnosphere
appLiCation = router.currentRoute.value.query.appLiCation
if (val.typeList && val.typeList.length > 6) {
@ -1099,7 +1098,6 @@
if (switchIndex != '分页查询') {
paramsGetResources.pageNum = 1
}
debugger
pageWithAttrs(paramsGetResources).then((res) => {
console.log('查询列表============>', resourceList, res.data.data)
resourceList.data = []
@ -1193,7 +1191,6 @@
paramsGetResources.pageNum = val
let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
getAppResources(params)
debugger
}
// const findZywMessage = () => {
// zywMessage().then((res) => {
@ -1246,7 +1243,6 @@
router.currentRoute.value.query.appLiCation = ''
tecHnosphere = router.currentRoute.value.query.tecHnosphere
appLiCation = router.currentRoute.value.query.appLiCation
// debugger
let newQuery = JSON.parse(
JSON.stringify(router.currentRoute.value.query)
)