hi-ucs/front/src/views/detailsAll/StandardDoc.vue

139 lines
4.3 KiB
Vue

<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:32:22
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-07-18 18:48:32
* @Description: 数据标准详情页
-->
<template>
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
<!-- 头部基本信息 -->
<layer-service-top-details
:dataList="dataList.data"
></layer-service-top-details>
<!-- 数据标准信息-->
<layer-service-information
:dataList="dataList.data"
id="service-information"
class="scrollBox"
></layer-service-information>
</div>
</template>
<script setup>
import LayerServiceInformation from '@/views/detailsAll/components/StandardDoc/StandardDocInformation.vue' //数据标准信息
import LayerServiceTopDetails from '@/views/detailsAll/components/StandardDoc/StandardDocTopDetails.vue' //头部基本信息
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
updateVisits,
selectOne,
queryPartAppByKeyId2,
browsingInsert,
} from '@/api/home'
import mybus from '@/myplugins/mybus'
const router = useRouter()
const scrollTop = ref(0)
const domArr = ref([])
const selectNow = ref('')
const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let loading = ref(true)
document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease'
document.body.scrollTop = 0
mybus.on('flyToView', (id) => {
let top = document.querySelector('#' + id).offsetTop - 50
// console.log(top, document.querySelector('#' + id).offsetTop)
document.documentElement.scrollTop = top
document.body.scrollTop = top
})
onMounted(() => {
// console.clear()
window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll('.scrollBox')
scrollTop.value =
document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < domArr.value.length; i++) {
if (i === 0) {
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
selectNow.value = domArr.value[i].id
}
} else if (i == domArr.value.length - 1) {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
selectNow.value = domArr.value[i].id
}
} else {
if (
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) {
selectNow.value = domArr.value[i].id
}
}
}
})
})
const init = (id) => {
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
})
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
loading.value = false
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
}
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
})
</script>
<style lang="less" scoped>
.fixed {
position: fixed;
z-index: 2000;
top: 0;
left: 50%;
margin-left: -9.56rem;
}
.fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem;
}
</style>