hi-ucs/front/src/views/home/algorithmCompare.vue

725 lines
19 KiB
Vue
Raw Normal View History

2022-06-23 12:43:02 +08:00
<template>
2022-06-23 13:19:52 +08:00
<div class="bg">
2022-06-23 12:43:02 +08:00
<home-header></home-header>
<div class="box-container">
2022-06-23 19:58:44 +08:00
<!-- <a-spin size="large" class="loading-box" :spinning="loadingPage" /> -->
2022-06-23 13:19:52 +08:00
<div class="nav-box">
<a-breadcrumb>
<a-breadcrumb-item>能力集市</a-breadcrumb-item>
<a-breadcrumb-item>算法对比</a-breadcrumb-item>
</a-breadcrumb>
</div>
2022-06-23 12:43:02 +08:00
<div class="content">
<div class="left">
2022-06-23 19:58:44 +08:00
<div class="left-item" v-for="(data, i) in leftNav" :key="i"
2022-06-23 12:43:02 +08:00
:class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)">
2022-06-23 19:58:44 +08:00
{{ data }}
2022-06-23 12:43:02 +08:00
</div>
</div>
<div class="right">
<div class="top no-border-right">
<div class="td-name">
2022-06-23 19:58:44 +08:00
<!-- selectedRowKeys -->
{{ `共选取${selectedRowKeys.length}个算法` }}
<!-- {{ `共选取${getLength(detailArray)}个算法` }} -->
2022-06-23 12:43:02 +08:00
</div>
<div class="td" v-for="(item, k) in detailArray" :key="k">
<span v-if="item">{{ item.name || '--' }}</span>
2022-06-23 19:58:44 +08:00
<span v-if="item" @click="deleteList(k)" class="icon-delete">
</span>
<span class="add-img" @click="addList"
v-if="!item && k === detailArray.filter(v => v).length">
</span>
2022-06-23 12:43:02 +08:00
</div>
</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="group-data" v-if="data.groupName">
2022-06-23 19:58:44 +08:00
<!-- <compare-group-view :dataList="data.groupList"></compare-group-view> -->
<div v-if="data.groupList.length > 0">
<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="flex-row-start">
<div class="td" v-for="(d, k) in data[item]" :key="k">{{ d }}
</div>
</div>
</div>
</div>
</div>
<div v-if="data.groupList.length == 0" class="no-data">暂无数据</div>
2022-06-23 12:43:02 +08:00
</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>
<div class="flex-row-start">
<div class="td" v-for="(item, k) in rowData.infoList" :key="k">
2022-06-23 19:58:44 +08:00
{{ item }}
2022-06-23 12:43:02 +08:00
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a-modal class="modal-box" title="请选择" :visible="showAddModal" :onOk='handleOk' :onCancel='handleCancel'>
2022-06-23 19:58:44 +08:00
<a-table :columns="columns" :data-source="dataList" style="height:610px;overflow-y:scroll"
2022-06-23 12:43:02 +08:00
:row-selection="rowSelection" rowKey="id">
</a-table>
</a-modal>
2022-06-23 19:58:44 +08:00
<HomeFooter></HomeFooter>
2022-06-23 12:43:02 +08:00
</div>
</template>
<script setup>
2022-06-23 19:58:44 +08:00
import HomeFooter from '@/views/newHome/components/Footer'
2022-06-23 12:43:02 +08:00
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';
2022-06-23 19:58:44 +08:00
import { Table, Spin } from 'ant-design-vue';
2022-06-23 12:43:02 +08:00
import { selectOne } from '@/api/home'
2022-06-23 19:58:44 +08:00
import { message } from 'ant-design-vue'
2022-06-23 12:43:02 +08:00
const ctx = getCurrentInstance();
2022-06-23 19:58:44 +08:00
// 最大4列
2022-06-23 12:43:02 +08:00
const pagination = ref([])
2022-06-23 19:58:44 +08:00
// 表格列名
2022-06-23 12:43:02 +08:00
const columns = ref([
{
title: '算法名称',
dataIndex: 'name',
},
{
title: '算法类型',
dataIndex: 'type',
},
])
// 详情列表
2022-06-23 19:58:44 +08:00
const detailArray = ref(['', '', '', ''])
2022-06-23 12:43:02 +08:00
2022-06-23 19:58:44 +08:00
const titleInfoObj = {
2022-06-23 12:43:02 +08:00
'基本信息': [
{
text: '算法名称', key: 'name'
},
{
2022-06-23 19:58:44 +08:00
text: '算法类别',
2022-06-23 12:43:02 +08:00
},
{
2022-06-23 19:58:44 +08:00
text: '部署位置',
2022-06-23 12:43:02 +08:00
},
{
text: '应用领域', key: '应用领域'
},
{
text: '共享条件', key: 'shareCondition'
},
{
text: '共享类型', key: 'shareType'
},
{
text: '算法描述', key: 'description'
},
{
text: '算法介绍视频', key: '算法介绍视频'
},
],
'算法优势': [
{
text: '算法优势名称', key: 'name'
},
{
text: '算法优势描述', key: 'desc'
},
],
'应用场景': [
{
text: '场景名称', key: '场景名称'
},
{
text: '场景描述', key: '场景描述'
},
],
'应用案例': [
{
2022-06-23 19:58:44 +08:00
text: '关联应用',
2022-06-23 12:43:02 +08:00
},
{
2022-06-23 19:58:44 +08:00
text: '算法需求背景',
2022-06-23 12:43:02 +08:00
},
{
2022-06-23 19:58:44 +08:00
text: '算法应用期望达成效果',
2022-06-23 12:43:02 +08:00
},
],
2022-06-23 13:19:52 +08:00
'计费标准信息': [
2022-06-23 12:43:02 +08:00
{
2022-06-23 19:58:44 +08:00
text: '是否收费',
2022-06-23 12:43:02 +08:00
},
{
2022-06-23 19:58:44 +08:00
text: '计费方式',
2022-06-23 12:43:02 +08:00
},
{
2022-06-23 19:58:44 +08:00
text: '计费描述',
2022-06-23 12:43:02 +08:00
},
2022-06-23 19:58:44 +08:00
// {
// text: '计费标准信息', key: ''
// },
2022-06-23 12:43:02 +08:00
],
'使用方式': [
{
2022-06-23 19:58:44 +08:00
text: '服务接口',
2022-06-23 12:43:02 +08:00
},
{
2022-06-23 19:58:44 +08:00
text: '接口请求方式', key: 'apiMethodType'
2022-06-23 12:43:02 +08:00
},
{
text: '技术文档', key: ''
},
{
text: '是否支持试用', key: ''
},
{
text: '试用描述', key: ''
},
{
2022-06-23 19:58:44 +08:00
text: '试用地址',
2022-06-23 12:43:02 +08:00
},
],
'服务商': [
{
2022-06-23 19:58:44 +08:00
text: '服务商名',
},
{
text: '服务商联系人',
2022-06-23 12:43:02 +08:00
},
{
2022-06-23 19:58:44 +08:00
text: '服务商联系电话',
},
],
'常见问题': [
{
text: '常见问题',
2022-06-23 12:43:02 +08:00
},
{
2022-06-23 19:58:44 +08:00
text: '回答',
2022-06-23 12:43:02 +08:00
},
]
}
2022-06-23 19:58:44 +08:00
// 左侧导航
const leftNav = ref([])
Object.keys(titleInfoObj).map(v => leftNav.value.push(v))
2022-06-23 12:43:02 +08:00
2022-06-23 19:58:44 +08:00
// 可能会有多组的数据
2022-06-23 12:43:02 +08:00
const arrayStr = [
2022-06-23 19:58:44 +08:00
'算法优势', '应用场景', '计费标准信息', '常见问题'
2022-06-23 12:43:02 +08:00
]
2022-06-23 19:58:44 +08:00
let textObj = {
'算法优势': {
name: '算法优势名称',
desc: '算法优势描述'
},
'应用场景': {
name: '场景名称',
desc: '场景描述'
},
'计费标准信息': {
type: '计费方式',
price: '价格',
desc: '计费描述信息',
'是否收费': '是否收费'
},
'常见问题': {
question: '常见问题',
answer: '回答'
},
}
2022-06-23 12:43:02 +08:00
const activeNameIndex = ref(0)
const showAddModal = ref(false)
const dataList = ref([])
2022-06-23 19:58:44 +08:00
const selectedRowKeys = ref([]);
let tableData = ref([])
const loadingPage = ref(false)
2022-06-23 12:43:02 +08:00
// 初始化
onMounted(() => {
2022-06-23 19:58:44 +08:00
2022-06-23 12:43:02 +08:00
getList().then(res => {
2022-06-23 19:58:44 +08:00
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 || '获取算法详情失败,请重试!')
// })
2022-06-23 12:43:02 +08:00
})
})
2022-06-23 19:58:44 +08:00
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));
})
// 处理数据
nextTick(() => {
getNewData()
})
loadingPage.value = false
}).catch(err => {
loadingPage.value = false
message.error(err || '获取算法详情失败,请重试!')
})
}
// 处理数组
2022-06-23 12:43:02 +08:00
const getNewData = () => {
2022-06-23 19:58:44 +08:00
tableData.value = []
Object.keys(titleInfoObj).map((titleKey, i) => {
2022-06-23 12:43:02 +08:00
// 标题
let _newObj = {
2022-06-23 19:58:44 +08:00
'title': titleKey,
2022-06-23 12:43:02 +08:00
}
2022-06-23 19:58:44 +08:00
if (arrayStr.includes(titleKey)) {
_newObj.groupName = titleKey;
_newObj.groupList = []
} else {
_newObj.list = []
2022-06-23 12:43:02 +08:00
}
2022-06-23 19:58:44 +08:00
let list = [];
titleInfoObj[titleKey].map(trName => {
2022-06-23 12:43:02 +08:00
let obj = {
2022-06-23 19:58:44 +08:00
name: trName.text,
}
if (!arrayStr.includes(titleKey)) {
obj.infoList = getInfoList(trName)
list.push(obj)
} else {
_newObj.groupList = getGroupList(titleKey, trName)
2022-06-23 12:43:02 +08:00
}
})
2022-06-23 19:58:44 +08:00
if (!arrayStr.includes(titleKey)) {
_newObj.list = list;
}
2022-06-23 12:43:02 +08:00
tableData.value.push(_newObj)
})
}
2022-06-23 19:58:44 +08:00
// 基本信息等
2022-06-23 12:43:02 +08:00
const getInfoList = (rowItem) => {
let arr = []
detailArray.value.map(item => {
let val = undefined;
val = item[rowItem.key || rowItem.text]
arr.push(val)
})
return arr;
}
2022-06-23 19:58:44 +08:00
// 算法优势分组信息数组getGroupList
const getGroupList = (titleKey, trName) => {
let arr = []
detailArray.value.map(item => {
if (arrayStr.includes(titleKey)) {
let groupItemObj = {}
let _list = item[titleKey] || [];
let textInfo = textObj[titleKey]
_list.map(v => {
Object.keys(v).map(d => {
groupItemObj[textInfo[d]] = v[d]
})
})
arr.push(groupItemObj)
}
})
let _arr = translateArray(arr)
return _arr;
}
// 数组转化
const translateArray = (list) => {
let arr = []
if (list.every(v => JSON.stringify(v) == '{}')) {
arr = []
} else {
let itemObj = list.find(v => JSON.stringify(v) !== '{}')
let obj = {}
Object.keys(itemObj).map(v => {
let arr2 = []
list.map(item => {
arr2.push(item[v] || '')
})
obj[v] = arr2
})
arr.push(obj);
}
return arr;
}
2022-06-23 12:43:02 +08:00
const getArrayLength = (list) => {
let _newList = list.filter(v => v) || []
return _newList.length
}
2022-06-23 19:58:44 +08:00
2022-06-23 12:43:02 +08:00
// 获取算法列表
const getList = () => {
const data = {
deptIds: [],
districtId: '',
infoList: [
{ attrType: "组件类型", attrValue: "智能算法" }
],
name: '',
orderField: 'total',
orderType: 'DESC',
pageNum: 1,
pageSize: 15,
type: '组件服务',
}
return new Promise((resolve, reject) => {
pageWithAttrs(data).then((res) => {
dataList.value = res.data.data.records || []
nextTick(() => {
// 默认前两个
selectedRowKeys.value.push(dataList.value[0].id)
selectedRowKeys.value.push(dataList.value[1].id)
})
resolve(res)
}).catch(err => {
reject(err)
})
})
}
2022-06-23 19:58:44 +08:00
// 删除算法
2022-06-23 12:43:02 +08:00
const deleteList = (i) => {
2022-06-23 19:58:44 +08:00
selectedRowKeys.value.splice(i, 1)
2022-06-23 12:43:02 +08:00
detailArray.value.splice(i, 1, '')
nextTick(() => {
getNewData()
})
}
2022-06-23 19:58:44 +08:00
2022-06-23 12:43:02 +08:00
const addList = () => {
showAddModal.value = true
}
2022-06-23 19:58:44 +08:00
2022-06-23 12:43:02 +08:00
const handleOk = () => {
2022-06-23 19:58:44 +08:00
console.log('selectedRowKeys------handleOk------>', selectedRowKeys);
if (selectedRowKeys.length > 4) {
message.error('最多选择四个算法!')
return false;
2022-06-23 12:43:02 +08:00
}
2022-06-23 19:58:44 +08:00
initData()
2022-06-23 12:43:02 +08:00
showAddModal.value = false
}
2022-06-23 19:58:44 +08:00
2022-06-23 12:43:02 +08:00
const handleCancel = () => {
showAddModal.value = false
}
const rowSelection = computed(() => {
return {
selectedRowKeys: unref(selectedRowKeys),
onChange: changableRowKeys => {
2022-06-23 19:58:44 +08:00
console.log('changableRowKeys------------>', changableRowKeys);
if (changableRowKeys.length > 4) {
message.error('最多选择四个算法!')
} else {
selectedRowKeys.value = changableRowKeys;
}
if (selectedRowKeys.value.length > 4) {
selectedRowKeys.value = selectedRowKeys.value.splice(4)
}
console.log('selectedRowKeys------------>', selectedRowKeys.value);
2022-06-23 12:43:02 +08:00
},
hideDefaultSelections: true,
};
});
// 切换左侧
const changeTab = (n, data) => {
activeNameIndex.value = n;
// 获取元素距离父元素的距离
2022-06-23 19:58:44 +08:00
let realTop = ctx.refs[data][0].offsetTop;
if (realTop || realTop === 0) {
ctx.refs.bottomRef.scrollTo({
'top': realTop - 250,
'behavior': 'smooth'
})
}
2022-06-23 12:43:02 +08:00
}
2022-06-23 19:58:44 +08:00
// 获取详情
const getDetail = (id) => {
2022-06-23 12:43:02 +08:00
return new Promise((resolve, reject) => {
selectOne(id).then((res) => {
2022-06-23 19:58:44 +08:00
resolve(res.data && res.data.data)
}).catch(err => {
reject(err)
2022-06-23 12:43:02 +08:00
})
})
}
2022-06-23 19:58:44 +08:00
// 判断是否json字符串
2022-06-23 12:43:02 +08:00
const isJson = (str) => {
if (typeof str == 'string') {
try {
let obj = JSON.parse(str)
return true
} catch (e) {
return false;
}
}
}
2022-06-23 19:58:44 +08:00
// infoList数组处理
2022-06-23 12:43:02 +08:00
const formatterData = (obj) => {
let _newObj = {}
obj.infoList.map(v => {
_newObj[v.attrType] = isJson(v.attrValue) ? JSON.parse(v.attrValue) : v.attrValue;
})
let _obj = Object.assign({}, obj, _newObj)
return _obj
}
2022-06-23 19:58:44 +08:00
// 获取数组非空长度
2022-06-23 12:43:02 +08:00
const getLength = (array) => {
let newArr = array.filter(v => v !== '')
return newArr.length
}
</script>
<style lang="less" scoped>
2022-06-23 13:19:52 +08:00
.bg {
background: #fff;
// background: rgba(244,245,248, 0.8);
}
2022-06-23 12:43:02 +08:00
// @font-face {
// font-family: 'num-typeface';
// src: url('~@/assets/newHome/font/num-typeface.otf');
// }
.border {
2022-06-23 13:19:52 +08:00
border: 1px solid #dddee1;
2022-06-23 12:43:02 +08:00
border-bottom: none;
border-right: none;
}
.border-bottom {
2022-06-23 13:19:52 +08:00
border-bottom: 1px solid #dddee1;
2022-06-23 12:43:02 +08:00
}
.no-border-right {
2022-06-23 13:19:52 +08:00
border: 1px solid #dddee1;
2022-06-23 12:43:02 +08:00
border-right: none;
}
.flex-row-start {
display: flex;
justify-content: flex-start;
align-items: center;
}
.box-container {
width: 1592px;
height: 900px;
margin: 0 auto;
padding-top: 60px;
.content {
display: flex;
justify-content: flex-start;
align-items: flex-start;
2022-06-23 19:58:44 +08:00
padding-top: 10px;
2022-06-23 12:43:02 +08:00
}
.nav-box {
2022-06-23 13:19:52 +08:00
height: 50px;
2022-06-23 12:43:02 +08:00
width: 100%;
2022-06-23 13:19:52 +08:00
font-size: 14px;
display: flex;
align-items: center;
background: rgba(244, 245, 248, 0.8);
padding-left: 10px;
2022-06-23 12:43:02 +08:00
}
.left {
width: 200px;
2022-06-23 19:58:44 +08:00
height: 600px;
2022-06-23 12:43:02 +08:00
background: rgba(244, 245, 248, 0.8);
.left-item {
margin: 0 14px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #212121;
border-bottom: 1px solid #dddee1;
&:hover {
cursor: pointer;
}
}
.active {
background: #0058e1;
color: #fff;
margin: 0;
}
}
.right {
width: 1360px;
height: 800px;
margin-left: 32px;
.top {
width: 100%;
2022-06-23 19:58:44 +08:00
height: 100px;
2022-06-23 12:43:02 +08:00
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
.td-name {
2022-06-23 19:58:44 +08:00
height: 100px;
line-height: 100px;
2022-06-23 12:43:02 +08:00
}
.td {
2022-06-23 19:58:44 +08:00
height: 100px;
line-height: 100px;
2022-06-23 12:43:02 +08:00
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.icon-delete {
position: absolute;
right: 10px;
top: 10px;
2022-06-23 19:58:44 +08:00
height: 12px;
width: 12px;
background: url('~@/assets/newHome/delete-on.png');
background-size: 100% 100%;
cursor: pointer;
2022-06-23 12:43:02 +08:00
}
}
.bottom {
width: 100%;
overflow-y: auto;
2022-06-23 19:58:44 +08:00
height: 620px;
padding-bottom: 20px;
box-sizing: border-box;
2022-06-23 12:43:02 +08:00
}
}
}
.title {
font-size: 14px;
padding: 20px 0 10px 10px;
color: #212121;
font-weight: bold;
2022-06-23 13:19:52 +08:00
background: rgba(244, 245, 248, 0.8);
2022-06-23 12:43:02 +08:00
}
.td-name {
2022-06-23 13:19:52 +08:00
border-right: 1px solid #dddee1;
2022-06-23 19:58:44 +08:00
height: 60px;
line-height: 60px;
2022-06-23 12:43:02 +08:00
text-align: center;
width: 200px;
font-size: 14px;
}
.td {
2022-06-23 13:19:52 +08:00
border-right: 1px solid #dddee1;
2022-06-23 19:58:44 +08:00
height: 60px;
line-height: 60px;
2022-06-23 12:43:02 +08:00
text-align: center;
width: 290px;
font-size: 14px;
box-sizing: border-box;
table-layout: fixed;
word-wrap: break-all;
word-break: normal;
overflow: hidden;
}
.row-tr {
2022-06-23 13:19:52 +08:00
border: 1px solid #dddee1;
2022-06-23 12:43:02 +08:00
border-right: none;
border-bottom: none;
2022-06-23 13:19:52 +08:00
background: #fff;
2022-06-23 12:43:02 +08:00
}
.border-bottom {
2022-06-23 13:19:52 +08:00
border-bottom: 1px solid #dddee1;
2022-06-23 12:43:02 +08:00
}
.modal-box {
2022-06-23 19:58:44 +08:00
height: 650px;
2022-06-23 12:43:02 +08:00
width: 800px;
}
2022-06-23 19:58:44 +08:00
.add-img {
height: 60px;
width: 60px;
background: url('~@/assets/newHome/add-on.png');
background-size: 100% 100%;
cursor: pointer;
}
.no-data {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dddee1;
}
.loading-box {
width: 1592px;
height: 500px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
2022-06-23 12:43:02 +08:00
</style>