diff --git a/front/src/views/home/algorithmCompare.vue b/front/src/views/home/algorithmCompare.vue index f0955699..c1e32113 100644 --- a/front/src/views/home/algorithmCompare.vue +++ b/front/src/views/home/algorithmCompare.vue @@ -11,7 +11,7 @@
-
{{ data }}
@@ -33,7 +33,7 @@
-
{{ data.title }}
+
{{ data.title }}
@@ -68,9 +68,7 @@
@@ -103,6 +101,12 @@ import { pageWithAttrs } from '@/api/abilityStatistics' import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue'; import { selectOne } from '@/api/home' import { message, Tooltip, Table, Spin } from 'ant-design-vue' +import { useRouter } from 'vue-router' + +const router = useRouter() +let queryId = router.currentRoute.value.query.id; + +console.log('111---->', router) const ctx = getCurrentInstance(); // 最大4列 @@ -268,13 +272,80 @@ const loadingPage = ref(false) // 初始化 onMounted(() => { - getList().then(res => { - initData() + selectedRowKeys.value.push(queryId) + nextTick(() => { + getList().then(res => { + initData() + }) + // 滚动条 + window.addEventListener('scroll', handleScroll, true) }) + + }) +let navScrollTopArray = ref([]) +// 获取元素距离顶部的位置 +const getNavscrollTop = () => { + navScrollTopArray = ref([]) + leftNav.value.map((title, index) => { + let realTop = ctx.refs[title][0].offsetTop; + navScrollTopArray.value.push({ + scrollTop: realTop - 240, + index: index + }) + }) +} + +// 滚动 +const handleScroll = () => { + isScrollFlag.value = true; + if(isScrollFlag.value) { + let _scrollTop = ctx.refs.bottomRef && ctx.refs.bottomRef.scrollTop; + nextTick(() => { + let len = navScrollTopArray.value.length; + let min = navScrollTopArray.value[1].scrollTop + let max = navScrollTopArray.value[len - 2].scrollTop; + for (let index = 0; index < navScrollTopArray.value.length; index++) { + const item = navScrollTopArray.value[index]; + if (index < len - 1) { + if (_scrollTop > item.scrollTop && _scrollTop < navScrollTopArray.value[index + 1].scrollTop) { + activeNameIndex.value = index + 1; + break; + } + } + if (_scrollTop >= max) { + activeNameIndex.value = len - 1; + break; + } + if (_scrollTop <= min) { + activeNameIndex.value = 0; + break; + } + } + }) + } +} + +let isScrollFlag = ref(false) +// 切换左侧 +const changeTab = (n, data) => { + isScrollFlag.value = false; + activeNameIndex.value = n; + // 获取元素距离父元素的距离 + let realTop = ctx.refs[data][0].offsetTop; + console.log('realTop------------>', realTop); + if (realTop || realTop === 0) { + ctx.refs.bottomRef.scrollTo({ + 'top': realTop - 240, + 'behavior': 'smooth' + }) + } +} + const initData = () => { - loadingPage.value = true + loadingPage.value = true; + // queryId // 获取详情 Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => { detailArray.value = [] @@ -286,9 +357,12 @@ const initData = () => { } } // 处理数据 + getNewData() + nextTick(() => { - getNewData() + getNavscrollTop() }) + loadingPage.value = false }).catch(err => { loadingPage.value = false @@ -388,7 +462,7 @@ const getList = () => { deptIds: [], districtId: '', infoList: [ - // { attrType: "组件类型", attrValue: "智能算法" } + { attrType: "组件类型", attrValue: "智能算法" } ], name: '', orderField: 'total', @@ -403,8 +477,8 @@ const getList = () => { dataList.value = res.data.data.records || [] nextTick(() => { // 默认前两个 - selectedRowKeys.value.push(dataList.value[0].id) - selectedRowKeys.value.push(dataList.value[1].id) + // selectedRowKeys.value.push(dataList.value[0].id) + // selectedRowKeys.value.push(dataList.value[1].id) }) resolve(res) }).catch(err => { @@ -480,18 +554,6 @@ const showVideo = (name) => { return false; } -// 切换左侧 -const changeTab = (n, data) => { - activeNameIndex.value = n; - // 获取元素距离父元素的距离 - let realTop = ctx.refs[data][0].offsetTop; - if (realTop || realTop === 0) { - ctx.refs.bottomRef.scrollTo({ - 'top': realTop - 240, - 'behavior': 'smooth' - }) - } -} // 获取详情 const getDetail = (id) => { @@ -657,8 +719,9 @@ const formatterData = (obj) => { .bottom { width: 100%; overflow-y: auto; - height: 620px; - padding-bottom: 20px; + // height: 7rem; + height: calc(100vh - 300px); + padding-bottom: 10px; box-sizing: border-box; } }