-
{{ 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;
}
}