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-07-05 17:33:32 +08:00
parent a8780ed884
commit 6539637031
17 changed files with 430 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/package.json
View File

@ -38,6 +38,7 @@
"pinyin-pro": "^3.8.3",
"postprocessing": "^5.3.2",
"remixicon": "^2.5.0",
"swiper": "^8.2.6",
"three": "^0.98.0",
"three.meshline": "^1.1.0",
"vue": "^3.1.4",
@ -70,6 +71,7 @@
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"svg-sprite-loader": "^6.0.9",
"swiper": "^8.0.0",
"vab-config": "0.0.8",
"webpackbar": "^5.0.0-3"
},

BIN
front/src/assets/newHome/newHome-title-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 22 KiB

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

@ -15,12 +15,6 @@
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></algorithm-navigation>
<!-- 算法展示 视频 -->
<algorithm-display
:dataList="dataList.data"
id="algorithm-display"
class="scrollBox"
></algorithm-display>
<!-- 关联能力 -->
<algorithm-associated-ability
v-if="!loading"
@ -28,6 +22,12 @@
id="algorithm-associated-ability"
class="scrollBox"
></algorithm-associated-ability>
<!-- 算法展示 视频 -->
<algorithm-display
:dataList="dataList.data"
id="algorithm-display"
class="scrollBox"
></algorithm-display>
<!-- 算法优势 -->
<algorithm-advantage
:dataList="dataList.data"

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

@ -163,7 +163,6 @@
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[0].dataList = res.data.data
debugger
loading.value = false
})
})

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

@ -16,12 +16,6 @@
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></developer-navigation>
<!-- 组件展示 视频 -->
<Developer-presentation
:dataList="dataList.data"
id="eveloper-presentation"
class="scrollBox"
></Developer-presentation>
<!-- 关联能力 -->
<developer-associated-ability
v-if="!loading"
@ -29,6 +23,12 @@
id="developer-associated-ability"
class="scrollBox"
></developer-associated-ability>
<!-- 组件展示 视频 -->
<Developer-presentation
:dataList="dataList.data"
id="eveloper-presentation"
class="scrollBox"
></Developer-presentation>
<!-- 功能介绍-->
<developer-function-intorduction
:dataList="dataList.data"

54
front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main">
<div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div
class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
</div>
</div>
</div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
@ -84,15 +127,18 @@
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-bottom: 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.3rem;
display: grid;
grid-template-columns: repeat(4, 25%);
display: flex;
justify-content: space-around !important;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card {
width: 3.2rem;
height: 2.78rem;

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

@ -85,7 +85,7 @@
dataList: { type: Object, default: null },
})
const select = ref('algorithm-display')
const select = ref('algorithm-associated-ability')
const selectNav = (key) => {
select.value = key
@ -128,7 +128,7 @@
)
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter(
(item) => item.name === list.value[0]
(item) => (item.name === '关联应用') | (item.name === list.value[0])
)[0].key
}
console.log('11111111111111111111111111', list.value, navList.value)
@ -167,7 +167,7 @@
list.value.push('使用方式')
}
})
list.value.push('关联应用')
list.value.unshift('关联应用')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {

60
front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联组件" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main">
<div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div
class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -26,17 +29,58 @@
</div>
</div>
</div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
:class="cardFunction(dataFrom[0].dataList)"
>
<div class="icon"></div>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description || '' }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description || '' }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
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 modules = ref([Pagination])
const dataFrom = ref([])
const flag = ref(true)
const oldid = router.currentRoute.value.query.id
@ -91,18 +135,22 @@
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-bottom: 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.3rem;
display: grid;
grid-template-columns: repeat(4, 25%);
display: flex;
justify-content: space-around;
position: relative;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card {
width: 3.2rem;
// height: 2.78rem;
height: 2.78rem;
display: flex;
flex-direction: column;
align-items: center;

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

@ -28,6 +28,10 @@
name: '应用展示',
key: 'application-presentation',
},
{
name: '关联组件',
key: 'application-associated-ability',
},
{
name: '功能介绍',
key: 'function-introduction',
@ -36,10 +40,6 @@
// name: '关联组件',
// key: 'application-associated-components',
// },
{
name: '关联组件',
key: 'application-associated-ability',
},
{
name: '使用能力',
key: 'ability-to-use',

31
front/src/views/detailsAll/components/Application/style.css Normal file
View File

@ -0,0 +1,31 @@
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

54
front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main">
<div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div
class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
</div>
</div>
</div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
@ -84,15 +127,18 @@
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-bottom: 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.3rem;
display: grid;
grid-template-columns: repeat(4, 25%);
display: flex;
justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card {
width: 3.2rem;
height: 2.78rem;

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

@ -21,13 +21,14 @@
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([
{
name: '关联应用',
key: 'business-associated-ability',
},
{
name: '组件展示',
key: 'business-presentation',
@ -61,6 +62,22 @@
})
const select = ref('business-presentation')
const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'business-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
})
}
const selectNav = (key) => {
select.value = key
console.log(key, select.value)
@ -69,8 +86,8 @@
if (props.dataList.infoList) {
list.value = []
let arr = [
'组件视频介绍',
'关联应用',
'组件视频介绍',
'功能介绍',
'应用场景',
'应用案例',
@ -94,7 +111,7 @@
list.value.push('组件展示')
}
})
list.value.push('关联应用')
list.value.unshift('关联应用')
list.value.push('使用方式')
navList.value.forEach((item) => {
console.log(item)
@ -125,8 +142,8 @@
if (val) {
list.value = []
let arr = [
'组件视频介绍',
'关联应用',
'组件视频介绍',
'功能介绍',
'应用场景',
'应用案例',
@ -151,7 +168,7 @@
list.value.push('组件展示')
}
})
list.value.push('关联应用')
list.value.unshift('关联应用')
list.value.push('使用方式')
navList.value.forEach((item) => {
console.log(item)
@ -166,9 +183,12 @@
}
})
if (list.value.length > 0) {
select.value = navList.value.filter(
(item) => item.name === list.value[0]
)[0].key
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter(
(item) =>
(item.name === '关联应用') | (item.name === list.value[0])
)[0].key
}
}
console.log('11111111111111111111111111', list.value, navList.value)
}

59
front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main">
<div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div
class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
</div>
</div>
</div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
@ -49,7 +92,8 @@
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
}
if (props.associatedComponents[0].dataList.length != 0) {
console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true
dataFrom.value = props.associatedComponents
@ -60,7 +104,7 @@
watch(
() => props.associatedComponents,
(val) => {
if (val.length != 0) {
if (val) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
@ -83,15 +127,18 @@
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-bottom: 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.3rem;
display: grid;
grid-template-columns: repeat(4, 25%);
display: flex;
justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card {
width: 3.2rem;
height: 2.78rem;

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

@ -21,17 +21,18 @@
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([
{
name: '组件展示',
key: 'eveloper-presentation',
},
{
name: '关联应用',
key: 'developer-associated-ability',
},
{
name: '功能介绍',
key: 'function-introduction',
@ -64,6 +65,22 @@
})
const select = ref('algorithm-display')
const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'developer-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
})
}
const selectNav = (key) => {
select.value = key
mybus.emit('flyToView', select.value)
@ -81,7 +98,7 @@
list.value.push('组件展示')
}
})
list.value.push('关联应用')
list.value.unshift('关联应用')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
@ -123,7 +140,7 @@
list.value.push('组件展示')
}
})
list.value.push('关联应用')
list.value.unshift('关联应用')
list.value.push('组件试用')
list.value.push('使用方式')
navList.value.forEach((item) => {
@ -139,9 +156,12 @@
}
})
if (list.value.length > 0) {
select.value = navList.value.filter(
(item) => item.name === list.value[0]
)[0].key
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter(
(item) =>
(item.name === '关联应用') | (item.name === list.value[0])
)[0].key
}
}
console.log('11111111111111111111111111', list.value, navList.value)
}

104
front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
View File

@ -1,30 +1,79 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="RELEVANCE"></detals-title>
<div class="application-associated-ability-main">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div
class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
<div class="associated-ability-card-content">
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
@ -34,17 +83,20 @@
const oldid = router.currentRoute.value.query.id
//点击查看详情
const switchFunction = (id) => {
router.push({
path: '/details',
query: {
id: id,
},
})
// router.push({
// path: '/details',
// query: {
// id: id,
// },
// })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
}
if (props.associatedComponents[0].dataList.length != 0) {
console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true
dataFrom.value = props.associatedComponents
debugger
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
@ -75,7 +127,7 @@
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-bottom: 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
@ -83,20 +135,31 @@
margin-top: 0.4rem;
width: 13.3rem;
display: flex;
justify-content: space-between;
justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card {
width: 3.2rem;
height: 2.78rem;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #e4e6f5;
border-radius: 0.1rem;
padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer;
.associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem;
font-size: 0.22rem;
text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.associated-ability-card-content {
width: 100%;
@ -107,6 +170,11 @@
color: #999;
margin-right: 0.15rem;
margin-top: 0.15rem;
text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
}
}

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

@ -21,13 +21,14 @@
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([
{
name: '关联应用',
key: 'layer-service-associated-ability',
},
{
name: '图层展示',
key: 'service-presentation',
@ -64,6 +65,22 @@
})
const select = ref('service-presentation')
const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'service-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
})
}
const selectNav = (key) => {
select.value = key
console.log(key, select.value)

2
front/src/views/home/details.vue
View File

@ -91,7 +91,7 @@
const router = useRouter()
const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
let showView = ref('details-view')
let showView = ref('')
const init = () => {
if (id) {
selectOne(id).then((res) => {