bug
This commit is contained in:
gaoyuanwei
parent
5035cc074a
commit
2bbfac3363
|
|
@ -8,191 +8,161 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||||
<!-- 头部基本信息 -->
|
<!-- 头部基本信息 -->
|
||||||
<application-top-details
|
<application-top-details :dataList="dataList.data"></application-top-details>
|
||||||
:dataList="dataList.data"
|
|
||||||
></application-top-details>
|
|
||||||
<!-- 导航 -->
|
<!-- 导航 -->
|
||||||
<application-navigation
|
<application-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||||
:dataList="dataList.data"
|
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation>
|
||||||
:associatedComponents="associatedComponents"
|
|
||||||
:class="{ fixed: scrollTop >= 600 }"
|
|
||||||
:selectNow="selectNow"
|
|
||||||
></application-navigation>
|
|
||||||
<!-- 应用展示 视频 -->
|
|
||||||
<application-presentation
|
|
||||||
:dataList="dataList.data"
|
|
||||||
id="application-presentation"
|
|
||||||
class="scrollBox"
|
|
||||||
></application-presentation>
|
|
||||||
<!-- 关联组件 -->
|
|
||||||
<application-associated-components
|
|
||||||
:dataList="dataList.data"
|
|
||||||
id="application-associated-components"
|
|
||||||
class="scrollBox"
|
|
||||||
v-if="false"
|
|
||||||
></application-associated-components>
|
|
||||||
<!-- 关联能力 -->
|
<!-- 关联能力 -->
|
||||||
<application-associated-ability
|
<application-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||||
v-if="!loading"
|
id="application-associated-ability" class="scrollBox"></application-associated-ability>
|
||||||
:associatedComponents="associatedComponents"
|
<!-- 应用展示 视频 -->
|
||||||
id="application-associated-ability"
|
<application-presentation :dataList="dataList.data" id="application-presentation" class="scrollBox">
|
||||||
class="scrollBox"
|
</application-presentation>
|
||||||
></application-associated-ability>
|
<!-- 关联组件 -->
|
||||||
|
<application-associated-components :dataList="dataList.data" id="application-associated-components"
|
||||||
|
class="scrollBox" v-if="false"></application-associated-components>
|
||||||
|
|
||||||
<!-- 功能介绍-->
|
<!-- 功能介绍-->
|
||||||
<application-function-intorduction
|
<application-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||||
:dataList="dataList.data"
|
</application-function-intorduction>
|
||||||
id="function-introduction"
|
|
||||||
class="scrollBox"
|
|
||||||
></application-function-intorduction>
|
|
||||||
<!-- 使用能力 -->
|
<!-- 使用能力 -->
|
||||||
<application-ability-toise
|
<application-ability-toise :dataList="dataList.data" id="ability-to-use" class="scrollBox">
|
||||||
:dataList="dataList.data"
|
</application-ability-toise>
|
||||||
id="ability-to-use"
|
|
||||||
class="scrollBox"
|
|
||||||
></application-ability-toise>
|
|
||||||
<!-- 部署与安全-->
|
<!-- 部署与安全-->
|
||||||
<application-deployment-and-security
|
<application-deployment-and-security :dataList="dataList.data" id="deployment-and-security" class="scrollBox">
|
||||||
:dataList="dataList.data"
|
</application-deployment-and-security>
|
||||||
id="deployment-and-security"
|
|
||||||
class="scrollBox"
|
|
||||||
></application-deployment-and-security>
|
|
||||||
<!-- 归属部门与服务商-->
|
<!-- 归属部门与服务商-->
|
||||||
<application-owning-department-and-service-provider
|
<application-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
|
||||||
:dataList="dataList.data"
|
class="scrollBox"></application-owning-department-and-service-provider>
|
||||||
id="department-and-service-provider"
|
|
||||||
class="scrollBox"
|
|
||||||
></application-owning-department-and-service-provider>
|
|
||||||
<!-- 常见问题-->
|
<!-- 常见问题-->
|
||||||
<application-common-problem
|
<application-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||||
:dataList="dataList.data"
|
</application-common-problem>
|
||||||
id="common-problem"
|
|
||||||
class="scrollBox"
|
|
||||||
></application-common-problem>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
|
import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
|
||||||
import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
|
import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
|
||||||
import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
|
import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
|
||||||
import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
|
import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
|
||||||
import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
|
import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
|
||||||
import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
|
import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
|
||||||
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
|
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
|
||||||
import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
|
import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
|
||||||
import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
|
import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
|
||||||
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
||||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
|
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
|
const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
|
||||||
let loading = ref(true)
|
let loading = ref(true)
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const scrollTop = ref(0)
|
const scrollTop = ref(0)
|
||||||
const domArr = ref([])
|
const domArr = ref([])
|
||||||
const selectNow = ref('')
|
const selectNow = ref('')
|
||||||
const dataList = reactive({ data: {} })
|
const dataList = reactive({ data: {} })
|
||||||
const id = router.currentRoute.value.query.id
|
const id = router.currentRoute.value.query.id
|
||||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||||
document.documentElement.style.transition = 'all 0.3s ease'
|
document.documentElement.style.transition = 'all 0.3s ease'
|
||||||
document.documentElement.scrollTop = 0
|
document.documentElement.scrollTop = 0
|
||||||
document.body.style.transition = 'all 0.3s ease'
|
document.body.style.transition = 'all 0.3s ease'
|
||||||
document.body.scrollTop = 0
|
document.body.scrollTop = 0
|
||||||
mybus.on('flyToView', (id) => {
|
mybus.on('flyToView', (id) => {
|
||||||
let top = document.querySelector('#' + id).offsetTop - 50
|
let top = document.querySelector('#' + id).offsetTop - 50
|
||||||
// console.log(top, document.querySelector('#' + id).offsetTop-50)
|
// console.log(top, document.querySelector('#' + id).offsetTop-50)
|
||||||
document.documentElement.scrollTop = top
|
document.documentElement.scrollTop = top
|
||||||
document.body.scrollTop = top
|
document.body.scrollTop = top
|
||||||
})
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// console.clear()
|
// console.clear()
|
||||||
window.addEventListener('scroll', () => {
|
window.addEventListener('scroll', () => {
|
||||||
domArr.value = document.querySelectorAll('.scrollBox')
|
domArr.value = document.querySelectorAll('.scrollBox')
|
||||||
scrollTop.value =
|
scrollTop.value =
|
||||||
document.documentElement.scrollTop || document.body.scrollTop
|
document.documentElement.scrollTop || document.body.scrollTop
|
||||||
for (let i = 0; i < domArr.value.length; i++) {
|
for (let i = 0; i < domArr.value.length; i++) {
|
||||||
if (i === 0) {
|
if (i === 0) {
|
||||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||||
selectNow.value = domArr.value[i].id
|
selectNow.value = domArr.value[i].id
|
||||||
}
|
}
|
||||||
} else if (i == domArr.value.length - 1) {
|
} else if (i == domArr.value.length - 1) {
|
||||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||||
selectNow.value = domArr.value[i].id
|
selectNow.value = domArr.value[i].id
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (
|
if (
|
||||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||||
) {
|
) {
|
||||||
selectNow.value = domArr.value[i].id
|
selectNow.value = domArr.value[i].id
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
|
||||||
const init = (id) => {
|
const init = (id) => {
|
||||||
if (id) {
|
if (id) {
|
||||||
selectOne(id).then((res) => {
|
selectOne(id).then((res) => {
|
||||||
// console.clear()
|
// console.clear()
|
||||||
dataList.data = res.data.data
|
dataList.data = res.data.data
|
||||||
const arrList = ref([])
|
const arrList = ref([])
|
||||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||||
console.log(
|
console.log(
|
||||||
'初始化详情页=========================>',
|
'初始化详情页=========================>',
|
||||||
dataList.data,
|
dataList.data,
|
||||||
arrList.value
|
arrList.value
|
||||||
)
|
)
|
||||||
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||||
arrList.value.push(id)
|
arrList.value.push(id)
|
||||||
updateVisits({
|
updateVisits({
|
||||||
id: res.data.data.id,
|
id: res.data.data.id,
|
||||||
visits: res.data.data.visits || '0',
|
visits: res.data.data.visits || '0',
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
window.sessionStorage.setItem(
|
window.sessionStorage.setItem(
|
||||||
'visits',
|
'visits',
|
||||||
JSON.stringify(arrList.value)
|
JSON.stringify(arrList.value)
|
||||||
)
|
)
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
associatedComponents.value.map((item, index) => {
|
|
||||||
let queryPartAppByKeyIdParams = {
|
|
||||||
keyId: id,
|
|
||||||
type: item.type,
|
|
||||||
}
|
|
||||||
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
|
|
||||||
associatedComponents.value[0].dataList = res.data.data
|
|
||||||
loading.value = false
|
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
associatedComponents.value.map((item, index) => {
|
||||||
|
let queryPartAppByKeyIdParams = {
|
||||||
|
keyId: id,
|
||||||
|
type: item.type,
|
||||||
|
}
|
||||||
|
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
|
||||||
|
associatedComponents.value[0].dataList = res.data.data
|
||||||
|
loading.value = false
|
||||||
})
|
})
|
||||||
} else if (obj) {
|
})
|
||||||
dataList.data = obj
|
} else if (obj) {
|
||||||
console.log('预览==============', obj)
|
dataList.data = obj
|
||||||
}
|
console.log('预览==============', obj)
|
||||||
}
|
}
|
||||||
const associatedComponentsFunction = () => {
|
}
|
||||||
if (
|
const associatedComponentsFunction = () => {
|
||||||
associatedComponents.value[0].dataList.length > 0 ||
|
if (
|
||||||
associatedComponents.value[1].dataList.length > 0 ||
|
associatedComponents.value[0].dataList.length > 0 ||
|
||||||
associatedComponents.value[2].dataList.length > 0
|
associatedComponents.value[1].dataList.length > 0 ||
|
||||||
) {
|
associatedComponents.value[2].dataList.length > 0
|
||||||
return associatedComponents.value
|
) {
|
||||||
}
|
return associatedComponents.value
|
||||||
}
|
}
|
||||||
init(id)
|
}
|
||||||
onBeforeUnmount(() => {
|
init(id)
|
||||||
mybus.off('flyToView')
|
onBeforeUnmount(() => {
|
||||||
})
|
mybus.off('flyToView')
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.fixed {
|
.fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.fixed2 > div:nth-of-type(3) {
|
|
||||||
margin-top: 0.84rem;
|
.fixed2>div:nth-of-type(3) {
|
||||||
}
|
margin-top: 0.84rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -39,11 +39,6 @@ let dataFrom = ref({
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
let objUrl = {
|
|
||||||
attrType: '访问地址',
|
|
||||||
attrValue: '' || '------',
|
|
||||||
}
|
|
||||||
dataFrom.value.content[0].childrenContent.push(objUrl)
|
|
||||||
//数据初始化
|
//数据初始化
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataList: { type: Object, default: null },
|
dataList: { type: Object, default: null },
|
||||||
|
|
@ -62,7 +57,11 @@ if (props.dataList.infoList) {
|
||||||
) {
|
) {
|
||||||
dataFrom.value.content[1].childrenContent.push(item)
|
dataFrom.value.content[1].childrenContent.push(item)
|
||||||
} else if (item.attrType === '访问地址') {
|
} else if (item.attrType === '访问地址') {
|
||||||
objUrl.value = item.value
|
let obj = {
|
||||||
|
attrType: '访问地址',
|
||||||
|
attrValue: item.attrValue || '------',
|
||||||
|
}
|
||||||
|
dataFrom.value.content[0].childrenContent.push(obj)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if (dataFrom.value.content[1].childrenContent.length <= 0) {
|
if (dataFrom.value.content[1].childrenContent.length <= 0) {
|
||||||
|
|
@ -85,11 +84,6 @@ watch(
|
||||||
() => props.dataList,
|
() => props.dataList,
|
||||||
(val) => {
|
(val) => {
|
||||||
if (val) {
|
if (val) {
|
||||||
let obj = {
|
|
||||||
attrType: '访问地址',
|
|
||||||
attrValue: props.dataList.link || '------',
|
|
||||||
}
|
|
||||||
dataFrom.value.content[0].childrenContent.push(obj)
|
|
||||||
dataFrom.value.content[0].childrenContent = []
|
dataFrom.value.content[0].childrenContent = []
|
||||||
dataFrom.value.content[1].childrenContent = []
|
dataFrom.value.content[1].childrenContent = []
|
||||||
props.dataList.infoList.map((item) => {
|
props.dataList.infoList.map((item) => {
|
||||||
|
|
@ -105,7 +99,11 @@ watch(
|
||||||
) {
|
) {
|
||||||
dataFrom.value.content[1].childrenContent.push(item)
|
dataFrom.value.content[1].childrenContent.push(item)
|
||||||
} else if (item.attrType === '访问地址') {
|
} else if (item.attrType === '访问地址') {
|
||||||
objUrl.value = item.value
|
let obj = {
|
||||||
|
attrType: '访问地址',
|
||||||
|
attrValue: item.attrValue || '------',
|
||||||
|
}
|
||||||
|
dataFrom.value.content[0].childrenContent.push(obj)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if (dataFrom.value.content[1].childrenContent.length <= 0) {
|
if (dataFrom.value.content[1].childrenContent.length <= 0) {
|
||||||
|
|
@ -123,6 +121,11 @@ watch(
|
||||||
dataFrom.value.content[1].childrenContent.push(itemContent)
|
dataFrom.value.content[1].childrenContent.push(itemContent)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// let obj = {
|
||||||
|
// attrType: '访问地址',
|
||||||
|
// attrValue: props.dataList.link || '------',
|
||||||
|
// }
|
||||||
|
// dataFrom.value.content[0].childrenContent.push(obj)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue