wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

优化对比算法

This commit is contained in:
guoyue 2022-06-25 14:00:45 +08:00
parent 8f8387c80d
commit b379c87cd4
1 changed files with 99 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
front/src/views/home/algorithmCompare.vue
View File

@ -2,7 +2,7 @@
<div class="bg">
<home-header></home-header>
<div class="box-container">
<!-- <a-spin size="large" class="loading-box" :spinning="loadingPage" /> -->
<a-spin size="large" v-if="loadingPage" class="loading-box" :spinning="loadingPage" />
<div class="nav-box">
<a-breadcrumb>
<a-breadcrumb-item>能力集市</a-breadcrumb-item>
@ -21,7 +21,6 @@
<div class="td-name">
<!-- selectedRowKeys -->
{{ `共选取${selectedRowKeys.length}个算法` }}
<!-- {{ `共选取${getLength(detailArray)}个算法` }} -->
</div>
<div class="td" v-for="(item, k) in detailArray" :key="k">
<span v-if="item">{{ item.name || '--' }}</span>
@ -42,9 +41,15 @@
<div class="group-box" v-for="(data, i) in data.groupList" :key="i">
<div class="flex-row-start row-tr" v-for="(item, j) in Object.keys(data)"
:key="j" :class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''">
<div class="td-name">{{ item }}</div>
<div class="td-name" :style="{ height: getHeight(item) }">
<span class="td-text td-name-text">{{ item }}</span>
</div>
<div class="flex-row-start">
<div class="td" v-for="(d, k) in data[item]" :key="k">{{ d }}
<div class="td" :style="{ height: getHeight(item) }"
v-for="(d, k) in data[item]" :key="k">
<a-tooltip placement="top" :title="d">
<span class="td-text">{{ d }}</span>
</a-tooltip>
</div>
</div>
</div>
@ -54,12 +59,23 @@
</div>
<div class="flex-row-start row-tr" v-else v-for="(rowData, j) in data.list" :key="j"
:class="j == data.list.length - 1 ? 'border-bottom' : ''">
<div class="td-name">
{{ rowData.name }}
<div class="td-name" :style="{ height: getHeight(rowData.name) }">
<span class="td-text td-name-text">
{{ rowData.name }}
</span>
</div>
<div class="flex-row-start">
<div class="td" v-for="(item, k) in rowData.infoList" :key="k">
{{ item }}
<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">
您的浏览器不支持 HTML5 video 标签。
</video>
<a-tooltip v-else placement="top" :title="item">
<span class="td-text">{{ item }}</span>
</a-tooltip>
</div>
</div>
</div>
@ -85,9 +101,8 @@ import HomeHeader from '@/views/home/components/header'
import CompareGroupView from '@/views/home/components/CompareGroupView'
import { pageWithAttrs } from '@/api/abilityStatistics'
import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
import { Table, Spin } from 'ant-design-vue';
import { selectOne } from '@/api/home'
import { message } from 'ant-design-vue'
import { message, Tooltip, Table, Spin } from 'ant-design-vue'
const ctx = getCurrentInstance();
// 最大4列
@ -230,7 +245,7 @@ let textObj = {
},
'应用场景': {
name: '场景名称',
desc: '场景描述'
desc: '场景描述',
},
'计费标准信息': {
type: '计费方式',
@ -253,36 +268,23 @@ const loadingPage = ref(false)
// 初始化
onMounted(() => {
getList().then(res => {
loadingPage.value = true
initData()
// console.log('selectedRowKeys.value------------>', selectedRowKeys.value);
// Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => {
// data.map((v, i) => {
// detailArray.value.splice(i, 1, formatterData(v));
// })
// // 处理数据
// nextTick(() => {
// getNewData()
// })
// loadingPage.value = false
// }).catch(err => {
// loadingPage.value = false
// message.error(err || '获取算法详情失败，请重试！')
// })
})
})
const initData = () => {
loadingPage.value = true
selectedRowKeys.value.push('1539125877366808578')
// 获取详情
Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => {
data.map((v, i) => {
detailArray.value.splice(i, 1, formatterData(v));
})
detailArray.value = []
for (let index = 0; index < 4; index++) {
if (data[index] == undefined) {
detailArray.value.push('')
} else {
detailArray.value.push(formatterData(data[index]))
}
}
// 处理数据
nextTick(() => {
getNewData()
@ -348,7 +350,9 @@ const getGroupList = (titleKey, trName) => {
let textInfo = textObj[titleKey]
_list.map(v => {
Object.keys(v).map(d => {
groupItemObj[textInfo[d]] = v[d]
if (textInfo[d] !== undefined) {
groupItemObj[textInfo[d]] = v[d]
}
})
})
arr.push(groupItemObj)
@ -378,25 +382,21 @@ const translateArray = (list) => {
return arr;
}
const getArrayLength = (list) => {
let _newList = list.filter(v => v) || []
return _newList.length
}
// 获取算法列表
const getList = () => {
const data = {
deptIds: [],
districtId: '',
infoList: [
{ attrType: "组件类型", attrValue: "智能算法" }
// { attrType: "组件类型", attrValue: "智能算法" }
],
name: '',
orderField: 'total',
orderType: 'DESC',
pageNum: 1,
pageSize: 15,
type: '组件服务',
// type: '组件服务',
type: '',
}
return new Promise((resolve, reject) => {
pageWithAttrs(data).then((res) => {
@ -416,8 +416,13 @@ const getList = () => {
// 删除算法
const deleteList = (i) => {
selectedRowKeys.value.splice(i, 1)
detailArray.value.splice(i, 1, '')
detailArray.value.splice(i, 1)
nextTick(() => {
for (let index = 0; index < 4; index++) {
if (detailArray.value[index] == undefined) {
detailArray.value.splice(index, 1, '')
}
}
getNewData()
})
}
@ -427,7 +432,6 @@ const addList = () => {
}
const handleOk = () => {
console.log('selectedRowKeys------handleOk------>', selectedRowKeys);
if (selectedRowKeys.length > 4) {
message.error('最多选择四个算法！')
return false;
@ -444,8 +448,6 @@ const rowSelection = computed(() => {
return {
selectedRowKeys: unref(selectedRowKeys),
onChange: changableRowKeys => {
console.log('changableRowKeys------------>', changableRowKeys);
if (changableRowKeys.length > 4) {
message.error('最多选择四个算法！')
} else {
@ -454,12 +456,30 @@ const rowSelection = computed(() => {
if (selectedRowKeys.value.length > 4) {
selectedRowKeys.value = selectedRowKeys.value.splice(4)
}
console.log('selectedRowKeys------------>', selectedRowKeys.value);
},
hideDefaultSelections: true,
};
});
// 动态获取高度
const getHeight = (name) => {
if (name.indexOf('描述') != -1) {
return '120px'
}
if (name.indexOf('视频') != -1) {
return '230px'
}
}
// 是否视频播放
const showVideo = (name) => {
if (name.indexOf('视频') !== -1) {
return true
}
return false;
}
// 切换左侧
const changeTab = (n, data) => {
activeNameIndex.value = n;
@ -467,7 +487,7 @@ const changeTab = (n, data) => {
let realTop = ctx.refs[data][0].offsetTop;
if (realTop || realTop === 0) {
ctx.refs.bottomRef.scrollTo({
'top': realTop - 250,
'top': realTop - 240,
'behavior': 'smooth'
})
}
@ -506,20 +526,12 @@ const formatterData = (obj) => {
return _obj
}
// 获取数组非空长度
const getLength = (array) => {
let newArr = array.filter(v => v !== '')
return newArr.length
}
</script>
<style lang="less" scoped>
.bg {
background: #fff;
// background: rgba(244,245,248, 0.8);
}
// @font-face {
@ -600,8 +612,8 @@ const getLength = (array) => {
}
.right {
width: 1360px;
height: 800px;
width: 1370px;
height: 780px;
margin-left: 32px;
.top {
@ -614,7 +626,9 @@ const getLength = (array) => {
.td-name {
height: 100px;
line-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.td {
@ -665,22 +679,41 @@ const getLength = (array) => {
text-align: center;
width: 200px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.td {
border-right: 1px solid #dddee1;
height: 60px;
line-height: 60px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
width: 290px;
font-size: 14px;
box-sizing: border-box;
table-layout: fixed;
word-wrap: break-all;
word-break: normal;
overflow: hidden;
}
.td-text {
width: 290px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.td-name-text {
width: 200px;
}
.row-tr {
border: 1px solid #dddee1;
border-right: none;
@ -722,4 +755,9 @@ const getLength = (array) => {
align-items: center;
justify-content: center;
}
.video-box {
height: 140px;
width: 240px;
}
</style>