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

算法PK隐藏全选

This commit is contained in:
a0049873 2022-06-30 10:12:28 +08:00
parent 08b971c411
commit f2921a0227
2 changed files with 661 additions and 572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
back/src/views/modules/ability/bsdataresources.vue
View File

@ -20,8 +20,8 @@
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column prop="orderId" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
<el-table-column prop="productName" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
<el-table-column prop="productName" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
<el-table-column prop="orderId" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
<el-table-column prop="payAmount" :label="$t('dataresources.resourcesProvide')" header-align="center" align="center"></el-table-column>
<el-table-column prop="status" :label="$t('dataresources.resourcesAbstract')" header-align="center" align="center"></el-table-column>
<el-table-column prop="payAt" :label="$t('dataresources.putOnDate')" header-align="center" align="center"></el-table-column>
@ -50,8 +50,8 @@
<script>
import mixinViewModule from '@/mixins/view-module'
// import AddOrUpdate from './order-add-or-update'
import {addDynamicRoute} from "@/router";
import RelateApplication from "./bsabilityai-relate-application.vue"
import { addDynamicRoute } from '@/router'
import RelateApplication from './bsabilityai-relate-application.vue'
export default {
mixins: [mixinViewModule],
@ -79,31 +79,31 @@ export default {
},
components: {
// AddOrUpdate,
RelateApplication,
RelateApplication
},
methods: {
// 重置
resetDataList () {
this.dataForm=this.noDataForm;
this.page=1; // 当前页码
this.query();
this.dataForm = this.noDataForm
this.page = 1 // 当前页码
this.query()
},
// 点击关联应用按钮
showRelateApplication (row) {
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
if (res && res.data) {
this.relateApplicationVisible = true;
this.relateApplicationVisible = true
this.relateInfo = {
id: row.id,
responseData: res.data,
linkType: '2'
};
}
}
}).catch(() => { })
},
// 是否展示关联应用弹窗
handleIsShowRelatePopup (type) {
this.relateApplicationVisible = type;
this.relateApplicationVisible = type
}
}
}

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

@ -2,7 +2,12 @@
<div class="bg">
<home-header></home-header>
<div class="box-container">
<a-spin size="large" v-if="loadingPage" 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>
@ -10,9 +15,20 @@
</a-breadcrumb>
</div>
<div class="content">
<a-anchor :affix="false" class="left" :getContainer="getId" @click="handleClickTab">
<a-anchor-link class="left-item" :href="`#${data}`" :title="data" v-for="(data, i) in leftNav"
:key="i" :data-title="data" />
<a-anchor
:affix="false"
class="left"
:getContainer="getId"
@click="handleClickTab"
>
<a-anchor-link
class="left-item"
:href="`#${data}`"
:title="data"
v-for="(data, i) in leftNav"
:key="i"
:data-title="data"
/>
</a-anchor>
<div class="right">
<div class="top no-border-right">
@ -22,30 +38,55 @@
</div>
<div class="td" v-for="(item, k) in detailArray" :key="k">
<span v-if="item">{{ item.name || '--' }}</span>
<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>
<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>
</div>
</div>
<div class="bottom bottomRef" id="bottomRef" ref="bottomRef">
<div class="bottom-item" v-for="(data, i) in tableData" :key="i">
<div class="title" :id="data.title" :title="data.title" :ref="data.title">{{ data.title }}
<div
class="title"
:id="data.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> -->
<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="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" :style="{ height: getHeight(item) }">
<span class="td-text td-name-text">{{ item }}</span>
</div>
<div class="flex-row-start">
<div class="td" :style="{ height: getHeight(item) }"
v-for="(d, k) in data[item]" :key="k">
<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>
@ -54,20 +95,39 @@
</div>
</div>
</div>
<div v-if="data.groupList.length == 0" class="no-data">暂无数据</div>
<div v-if="data.groupList.length == 0" class="no-data">
暂无数据
</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" :style="{ height: getHeight(rowData.name) }">
</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"
: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"
:style="{ height: getHeight(rowData.name) }">
<video v-if="showVideo(rowData.name) && item" width="240" height="180" controls>
<source :src="item" type="video/mp4">
<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">
@ -82,10 +142,20 @@
</div>
</div>
<a-modal class="modal-box" title="请选择" :visible="showAddModal" :onOk='handleOk' :onCancel='handleCancel'>
<a-table :columns="columns" :data-source="dataList" style="height:610px;overflow-y:scroll"
:row-selection="rowSelection" rowKey="id">
</a-table>
<a-modal
class="modal-box"
title="请选择"
:visible="showAddModal"
:onOk="handleOk"
:onCancel="handleCancel"
>
<a-table
:columns="columns"
:data-source="dataList"
style="height: 610px; overflow-y: scroll"
:row-selection="rowSelection"
rowKey="id"
></a-table>
</a-modal>
<!-- <HomeFooter></HomeFooter> -->
@ -97,14 +167,24 @@ import HomeFooter from '@/views/newHome/components/Footer'
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, onCreated } from 'vue';
import {
defineComponent,
ref,
onMounted,
getCurrentInstance,
computed,
unref,
reactive,
nextTick,
onCreated,
} from 'vue'
import { selectOne } from '@/api/home'
import { message, Tooltip, Table, Spin } from 'ant-design-vue'
import { useRouter } from 'vue-router';
import { useRouter } from 'vue-router'
const router = useRouter()
let queryId = router.currentRoute.value.query.id;
const ctx = getCurrentInstance();
let queryId = router.currentRoute.value.query.id
const ctx = getCurrentInstance()
// 最大4列
const pagination = ref([])
@ -123,9 +203,10 @@ const columns = ref([
const detailArray = ref(['', '', '', ''])
const titleInfoObj = {
'基本信息': [
基本信息: [
{
text: '算法名称', key: 'name'
text: '算法名称',
key: 'name',
},
{
text: '算法类别',
@ -134,38 +215,47 @@ const titleInfoObj = {
text: '部署位置',
},
{
text: '应用领域', key: '应用领域'
text: '应用领域',
key: '应用领域',
},
{
text: '共享条件', key: 'shareCondition'
text: '共享条件',
key: 'shareCondition',
},
{
text: '共享类型', key: 'shareType'
text: '共享类型',
key: 'shareType',
},
{
text: '算法描述', key: 'description'
text: '算法描述',
key: 'description',
},
{
text: '算法介绍视频', key: '算法介绍视频'
text: '算法介绍视频',
key: '算法介绍视频',
},
],
'算法优势': [
算法优势: [
{
text: '算法优势名称', key: 'name'
text: '算法优势名称',
key: 'name',
},
{
text: '算法优势描述', key: 'desc'
text: '算法优势描述',
key: 'desc',
},
],
'应用场景': [
应用场景: [
{
text: '场景名称', key: '场景名称'
text: '场景名称',
key: '场景名称',
},
{
text: '场景描述', key: '场景描述'
text: '场景描述',
key: '场景描述',
},
],
'应用案例': [
应用案例: [
{
text: '关联应用',
},
@ -176,7 +266,7 @@ const titleInfoObj = {
text: '算法应用期望达成效果',
},
],
'计费标准信息': [
计费标准信息: [
{
text: '是否收费',
},
@ -190,27 +280,31 @@ const titleInfoObj = {
// text: '计费标准信息', key: ''
// },
],
'使用方式': [
使用方式: [
{
text: '服务接口',
},
{
text: '接口请求方式', key: 'apiMethodType'
text: '接口请求方式',
key: 'apiMethodType',
},
{
text: '技术文档', key: ''
text: '技术文档',
key: '',
},
{
text: '是否支持试用', key: ''
text: '是否支持试用',
key: '',
},
{
text: '试用描述', key: ''
text: '试用描述',
key: '',
},
{
text: '试用地址',
},
],
'服务商': [
服务商: [
{
text: '服务商名',
},
@ -221,48 +315,46 @@ const titleInfoObj = {
text: '服务商联系电话',
},
],
'常见问题': [
常见问题: [
{
text: '常见问题',
},
{
text: '回答',
},
]
],
}
// 左侧导航
const leftNav = ref([])
Object.keys(titleInfoObj).map(v => leftNav.value.push(v))
Object.keys(titleInfoObj).map((v) => leftNav.value.push(v))
// 可能会有多组的数据
const arrayStr = [
'算法优势', '应用场景', '计费标准信息', '常见问题'
]
const arrayStr = ['算法优势', '应用场景', '计费标准信息', '常见问题']
let textObj = {
'算法优势': {
算法优势: {
name: '算法优势名称',
desc: '算法优势描述'
desc: '算法优势描述',
},
'应用场景': {
应用场景: {
name: '场景名称',
desc: '场景描述',
},
'计费标准信息': {
计费标准信息: {
type: '计费方式',
price: '价格',
desc: '计费描述信息',
'是否收费': '是否收费'
是否收费: '是否收费',
},
'常见问题': {
常见问题: {
question: '常见问题',
answer: '回答'
answer: '回答',
},
}
const showAddModal = ref(false)
const dataList = ref([])
const selectedRowKeys = ref([]);
const selectedRowKeys = ref([])
let tableData = ref([])
const loadingPage = ref(false)
@ -272,10 +364,10 @@ const getId = () => {
const handleClickTab = (e, link) => {
// 阻止点击的默认事件修改路由
e.preventDefault();
e.preventDefault()
if (link.href) {
let ele = document.getElementById(link.href);
ele && ele.scrollIntoView({ block: 'start', behavior: 'smooth' });
let ele = document.getElementById(link.href)
ele && ele.scrollIntoView({ block: 'start', behavior: 'smooth' })
}
}
@ -283,18 +375,18 @@ const handleClickTab = (e, link) => {
onMounted(() => {
selectedRowKeys.value.push(queryId)
nextTick(() => {
getList().then(res => {
getList().then((res) => {
initData()
})
})
})
const initData = () => {
loadingPage.value = true;
loadingPage.value = true
// queryId
// 获取详情
Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => {
Promise.all(selectedRowKeys.value.map((id) => getDetail(id)))
.then((data) => {
detailArray.value = []
for (let index = 0; index < 4; index++) {
if (data[index] == undefined) {
@ -310,7 +402,8 @@ const initData = () => {
})
loadingPage.value = false
}).catch(err => {
})
.catch((err) => {
loadingPage.value = false
message.error(err || '获取算法详情失败，请重试！')
})
@ -322,16 +415,16 @@ const getNewData = () => {
Object.keys(titleInfoObj).map((titleKey, i) => {
// 标题
let _newObj = {
'title': titleKey,
title: titleKey,
}
if (arrayStr.includes(titleKey)) {
_newObj.groupName = titleKey;
_newObj.groupName = titleKey
_newObj.groupList = []
} else {
_newObj.list = []
}
let list = [];
titleInfoObj[titleKey].map(trName => {
let list = []
titleInfoObj[titleKey].map((trName) => {
let obj = {
name: trName.text,
}
@ -343,7 +436,7 @@ const getNewData = () => {
}
})
if (!arrayStr.includes(titleKey)) {
_newObj.list = list;
_newObj.list = list
}
tableData.value.push(_newObj)
})
@ -352,24 +445,24 @@ const getNewData = () => {
// 基本信息等
const getInfoList = (rowItem) => {
let arr = []
detailArray.value.map(item => {
let val = undefined;
detailArray.value.map((item) => {
let val = undefined
val = item[rowItem.key || rowItem.text]
arr.push(val)
})
return arr;
return arr
}
// 算法优势：分组信息数组getGroupList
const getGroupList = (titleKey, trName) => {
let arr = []
detailArray.value.map(item => {
detailArray.value.map((item) => {
if (arrayStr.includes(titleKey)) {
let groupItemObj = {}
let _list = item[titleKey] || [];
let _list = item[titleKey] || []
let textInfo = textObj[titleKey]
_list.map(v => {
Object.keys(v).map(d => {
_list.map((v) => {
Object.keys(v).map((d) => {
if (textInfo[d] !== undefined) {
groupItemObj[textInfo[d]] = v[d]
}
@ -379,27 +472,27 @@ const getGroupList = (titleKey, trName) => {
}
})
let _arr = translateArray(arr)
return _arr;
return _arr
}
// 数组转化
const translateArray = (list) => {
let arr = []
if (list.every(v => JSON.stringify(v) == '{}')) {
if (list.every((v) => JSON.stringify(v) == '{}')) {
arr = []
} else {
let itemObj = list.find(v => JSON.stringify(v) !== '{}')
let itemObj = list.find((v) => JSON.stringify(v) !== '{}')
let obj = {}
Object.keys(itemObj).map(v => {
Object.keys(itemObj).map((v) => {
let arr2 = []
list.map(item => {
list.map((item) => {
arr2.push(item[v] || '')
})
obj[v] = arr2
})
arr.push(obj);
arr.push(obj)
}
return arr;
return arr
}
// 获取算法列表
@ -407,9 +500,7 @@ const getList = () => {
const data = {
deptIds: [],
districtId: '',
infoList: [
{ attrType: "组件类型", attrValue: "智能算法" }
],
infoList: [{ attrType: '组件类型', attrValue: '智能算法' }],
name: '',
orderField: 'total',
orderType: 'DESC',
@ -419,7 +510,8 @@ const getList = () => {
type: '',
}
return new Promise((resolve, reject) => {
pageWithAttrs(data).then((res) => {
pageWithAttrs(data)
.then((res) => {
dataList.value = res.data.data.records || []
nextTick(() => {
// 默认前两个
@ -427,7 +519,8 @@ const getList = () => {
// selectedRowKeys.value.push(dataList.value[1].id)
})
resolve(res)
}).catch(err => {
})
.catch((err) => {
reject(err)
})
})
@ -452,9 +545,9 @@ const addList = () => {
}
const handleOk = () => {
if (selectedRowKeys.length > 4) {
if (selectedRowKeys.value.length > 4) {
message.error('最多选择四个算法！')
return false;
return false
}
initData()
showAddModal.value = false
@ -467,20 +560,19 @@ const handleCancel = () => {
const rowSelection = computed(() => {
return {
selectedRowKeys: unref(selectedRowKeys),
onChange: changableRowKeys => {
onChange: (changableRowKeys) => {
if (changableRowKeys.length > 4) {
message.error('最多选择四个算法！')
} else {
selectedRowKeys.value = changableRowKeys;
selectedRowKeys.value = changableRowKeys
}
if (selectedRowKeys.value.length > 4) {
selectedRowKeys.value = selectedRowKeys.value.splice(4)
}
},
hideDefaultSelections: true,
};
});
}
})
// 动态获取高度
const getHeight = (name) => {
@ -497,16 +589,17 @@ const showVideo = (name) => {
if (name.indexOf('视频') !== -1) {
return true
}
return false;
return false
}
// 获取详情
const getDetail = (id) => {
return new Promise((resolve, reject) => {
selectOne(id).then((res) => {
selectOne(id)
.then((res) => {
resolve(res.data && res.data.data)
}).catch(err => {
})
.catch((err) => {
reject(err)
})
})
@ -519,7 +612,7 @@ const isJson = (str) => {
let obj = JSON.parse(str)
return true
} catch (e) {
return false;
return false
}
}
}
@ -527,16 +620,16 @@ const isJson = (str) => {
// infoList数组处理
const formatterData = (obj) => {
let _newObj = {}
obj.infoList.map(v => {
_newObj[v.attrType] = isJson(v.attrValue) ? JSON.parse(v.attrValue) : v.attrValue;
obj.infoList.map((v) => {
_newObj[v.attrType] = isJson(v.attrValue)
? JSON.parse(v.attrValue)
: v.attrValue
})
let _obj = Object.assign({}, obj, _newObj)
return _obj
}
</script>
<style lang="less" scoped>
.bg {
background: #fff;
@ -596,7 +689,6 @@ const formatterData = (obj) => {
padding-left: 10px;
}
.left {
width: 200px;
height: 600px;
@ -653,7 +745,6 @@ const formatterData = (obj) => {
align-items: center;
}
.icon-delete {
position: absolute;
right: 10px;
@ -666,7 +757,6 @@ const formatterData = (obj) => {
}
}
.bottom {
width: 100%;
overflow-y: auto;
@ -695,7 +785,6 @@ const formatterData = (obj) => {
display: flex;
align-items: center;
justify-content: center;
}
.td {
@ -711,7 +800,6 @@ const formatterData = (obj) => {
table-layout: fixed;
}
.td-text {
width: 290px;
font-size: 14px;
@ -726,7 +814,6 @@ const formatterData = (obj) => {
width: 200px;
}
.row-tr {
border: 1px solid #dddee1;
border-right: none;
@ -754,7 +841,6 @@ const formatterData = (obj) => {
.no-data {
height: 100px;
width: 100%;
;
display: flex;
align-items: center;
justify-content: center;
@ -804,4 +890,7 @@ const formatterData = (obj) => {
color: #212121;
border-bottom: 1px solid #dddee1;
}
:deep(.ant-checkbox-indeterminate) {
display: none;
}
</style>