算法对比，暂存
This commit is contained in:
parent
01f05b1963
commit
1410884d61
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue