From 1410884d61b8d7aebe701db2add723b916bd5cff Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Mon, 27 Jun 2022 13:52:16 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E6=B3=95=E5=AF=B9=E6=AF=94=EF=BC=8C?=
 =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/algorithmCompare.vue | 115 +++++++++++++++++-----
 1 file changed, 89 insertions(+), 26 deletions(-)

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 @@
             </div>
             <div class="content">
                 <div class="left">
-                    <div class="left-item" v-for="(data, i) in leftNav" :key="i"
+                    <div class="left-item" v-for="(data, i) in leftNav" :key="i" :data-title="data"
                         :class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)">
                         {{ data }}
                     </div>
@@ -33,7 +33,7 @@
                     </div>
                     <div class="bottom" ref="bottomRef">
                         <div class="bottom-item" v-for="(data, i) in tableData" :key="i">
-                            <div class="title" :ref="data.title">{{ data.title }}</div>
+                            <div class="title" :title="data.title" :ref="data.title">{{ data.title }}</div>
                             <!-- 算法优势 -->
                             <div class="group-data" v-if="data.groupName">
                                 <!-- <compare-group-view :dataList="data.groupList"></compare-group-view> -->
@@ -68,9 +68,7 @@
                                     <div class="td" v-for="(item, k) in rowData.infoList" :key="k"
                                         :style="{ height: getHeight(rowData.name) }">
                                         <video v-if="showVideo(rowData.name) && item" width="240" height="180" controls>
-                                            <source
-                                                :src="item"
-                                                type="video/mp4">
+                                            <source :src="item" type="video/mp4">
                                             您的浏览器不支持 HTML5 video 标签。
                                         </video>
                                         <a-tooltip v-else placement="top" :title="item">
@@ -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;
         }
     }