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-25 14:00:45 +08:00
|
|
|
|
<a-spin size="large" v-if="loadingPage" 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-27 13:52:16 +08:00
|
|
|
|
<div class="left-item" v-for="(data, i) in leftNav" :key="i" :data-title="data"
|
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}个算法` }}
|
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>
|
2022-06-27 14:47:23 +08:00
|
|
|
|
<div class="bottom bottomRef" ref="bottomRef" @scroll="(event) => scrollAction(event)">
|
2022-06-23 12:43:02 +08:00
|
|
|
|
<div class="bottom-item" v-for="(data, i) in tableData" :key="i">
|
2022-06-27 13:52:16 +08:00
|
|
|
|
<div class="title" :title="data.title" :ref="data.title">{{ data.title }}</div>
|
2022-06-23 12:43:02 +08:00
|
|
|
|
<!-- 算法优势 -->
|
|
|
|
|
<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' : ''">
|
2022-06-25 14:00:45 +08:00
|
|
|
|
<div class="td-name" :style="{ height: getHeight(item) }">
|
|
|
|
|
<span class="td-text td-name-text">{{ item }}</span>
|
|
|
|
|
</div>
|
2022-06-23 19:58:44 +08:00
|
|
|
|
<div class="flex-row-start">
|
2022-06-25 14:00:45 +08:00
|
|
|
|
<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>
|
2022-06-23 19:58:44 +08:00
|
|
|
|
</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' : ''">
|
2022-06-25 14:00:45 +08:00
|
|
|
|
<div class="td-name" :style="{ height: getHeight(rowData.name) }">
|
|
|
|
|
<span class="td-text td-name-text">
|
|
|
|
|
{{ rowData.name }}
|
|
|
|
|
</span>
|
2022-06-23 12:43:02 +08:00
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-row-start">
|
2022-06-25 14:00:45 +08:00
|
|
|
|
<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>
|
2022-06-27 13:52:16 +08:00
|
|
|
|
<source :src="item" type="video/mp4">
|
2022-06-25 14:00:45 +08:00
|
|
|
|
您的浏览器不支持 HTML5 video 标签。
|
|
|
|
|
</video>
|
|
|
|
|
<a-tooltip v-else placement="top" :title="item">
|
|
|
|
|
<span class="td-text">{{ item }}</span>
|
|
|
|
|
</a-tooltip>
|
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
|
|
|
|
|
2022-06-25 14:46:04 +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';
|
|
|
|
|
import { selectOne } from '@/api/home'
|
2022-06-25 14:00:45 +08:00
|
|
|
|
import { message, Tooltip, Table, Spin } from 'ant-design-vue'
|
2022-06-27 14:47:23 +08:00
|
|
|
|
import { useRouter } from 'vue-router';
|
2022-06-27 13:52:16 +08:00
|
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
let queryId = router.currentRoute.value.query.id;
|
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: '场景名称',
|
2022-06-25 14:00:45 +08:00
|
|
|
|
desc: '场景描述',
|
2022-06-23 19:58:44 +08:00
|
|
|
|
},
|
|
|
|
|
'计费标准信息': {
|
|
|
|
|
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-27 13:52:16 +08:00
|
|
|
|
selectedRowKeys.value.push(queryId)
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
getList().then(res => {
|
|
|
|
|
initData()
|
|
|
|
|
})
|
2022-06-23 12:43:02 +08:00
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
2022-06-27 14:47:23 +08:00
|
|
|
|
// 滚动事件
|
|
|
|
|
const scrollAction = (event) => {
|
|
|
|
|
isScrollFlag.value = true;
|
|
|
|
|
if (!isScrollFlag.value) {
|
|
|
|
|
rrturn
|
|
|
|
|
}
|
|
|
|
|
const _scrollTop = event.target.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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-27 13:52:16 +08:00
|
|
|
|
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
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let isScrollFlag = ref(false)
|
|
|
|
|
// 切换左侧
|
|
|
|
|
const changeTab = (n, data) => {
|
|
|
|
|
isScrollFlag.value = false;
|
|
|
|
|
activeNameIndex.value = n;
|
|
|
|
|
// 获取元素距离父元素的距离
|
|
|
|
|
let realTop = ctx.refs[data][0].offsetTop;
|
|
|
|
|
if (realTop || realTop === 0) {
|
|
|
|
|
ctx.refs.bottomRef.scrollTo({
|
|
|
|
|
'top': realTop - 240,
|
|
|
|
|
'behavior': 'smooth'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-23 19:58:44 +08:00
|
|
|
|
const initData = () => {
|
2022-06-27 13:52:16 +08:00
|
|
|
|
loadingPage.value = true;
|
|
|
|
|
// queryId
|
2022-06-23 19:58:44 +08:00
|
|
|
|
// 获取详情
|
|
|
|
|
Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => {
|
2022-06-25 14:00:45 +08:00
|
|
|
|
detailArray.value = []
|
|
|
|
|
for (let index = 0; index < 4; index++) {
|
|
|
|
|
if (data[index] == undefined) {
|
|
|
|
|
detailArray.value.push('')
|
|
|
|
|
} else {
|
|
|
|
|
detailArray.value.push(formatterData(data[index]))
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-06-23 19:58:44 +08:00
|
|
|
|
// 处理数据
|
2022-06-27 13:52:16 +08:00
|
|
|
|
getNewData()
|
|
|
|
|
|
2022-06-23 19:58:44 +08:00
|
|
|
|
nextTick(() => {
|
2022-06-27 13:52:16 +08:00
|
|
|
|
getNavscrollTop()
|
2022-06-23 19:58:44 +08:00
|
|
|
|
})
|
2022-06-27 13:52:16 +08:00
|
|
|
|
|
2022-06-23 19:58:44 +08:00
|
|
|
|
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 => {
|
2022-06-25 14:00:45 +08:00
|
|
|
|
if (textInfo[d] !== undefined) {
|
|
|
|
|
groupItemObj[textInfo[d]] = v[d]
|
|
|
|
|
}
|
2022-06-23 19:58:44 +08:00
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
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 getList = () => {
|
|
|
|
|
const data = {
|
|
|
|
|
deptIds: [],
|
|
|
|
|
districtId: '',
|
|
|
|
|
infoList: [
|
2022-06-27 13:52:16 +08:00
|
|
|
|
{ attrType: "组件类型", attrValue: "智能算法" }
|
2022-06-23 12:43:02 +08:00
|
|
|
|
],
|
|
|
|
|
name: '',
|
|
|
|
|
orderField: 'total',
|
|
|
|
|
orderType: 'DESC',
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 15,
|
2022-06-25 14:00:45 +08:00
|
|
|
|
// type: '组件服务',
|
|
|
|
|
type: '',
|
2022-06-23 12:43:02 +08:00
|
|
|
|
}
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
pageWithAttrs(data).then((res) => {
|
|
|
|
|
dataList.value = res.data.data.records || []
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
// 默认前两个
|
2022-06-27 13:52:16 +08:00
|
|
|
|
// selectedRowKeys.value.push(dataList.value[0].id)
|
|
|
|
|
// selectedRowKeys.value.push(dataList.value[1].id)
|
2022-06-23 12:43:02 +08:00
|
|
|
|
})
|
|
|
|
|
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-25 14:00:45 +08:00
|
|
|
|
detailArray.value.splice(i, 1)
|
2022-06-23 12:43:02 +08:00
|
|
|
|
nextTick(() => {
|
2022-06-25 14:00:45 +08:00
|
|
|
|
for (let index = 0; index < 4; index++) {
|
|
|
|
|
if (detailArray.value[index] == undefined) {
|
|
|
|
|
detailArray.value.splice(index, 1, '')
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-06-23 12:43:02 +08:00
|
|
|
|
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
|
|
|
|
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
|
|
|
|
if (changableRowKeys.length > 4) {
|
|
|
|
|
message.error('最多选择四个算法!')
|
|
|
|
|
} else {
|
|
|
|
|
selectedRowKeys.value = changableRowKeys;
|
|
|
|
|
}
|
|
|
|
|
if (selectedRowKeys.value.length > 4) {
|
|
|
|
|
selectedRowKeys.value = selectedRowKeys.value.splice(4)
|
|
|
|
|
}
|
2022-06-23 12:43:02 +08:00
|
|
|
|
},
|
|
|
|
|
hideDefaultSelections: true,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
2022-06-25 14:00:45 +08:00
|
|
|
|
|
|
|
|
|
// 动态获取高度
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
2022-06-23 13:19:52 +08:00
|
|
|
|
.bg {
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
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 {
|
2022-06-25 14:00:45 +08:00
|
|
|
|
width: 1370px;
|
|
|
|
|
height: 780px;
|
2022-06-23 12:43:02 +08:00
|
|
|
|
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;
|
2022-06-25 14:00:45 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
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-27 13:52:16 +08:00
|
|
|
|
// height: 7rem;
|
|
|
|
|
height: calc(100vh - 300px);
|
|
|
|
|
padding-bottom: 10px;
|
2022-06-23 19:58:44 +08:00
|
|
|
|
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;
|
2022-06-25 14:00:45 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
2022-06-23 12:43:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.td {
|
2022-06-23 13:19:52 +08:00
|
|
|
|
border-right: 1px solid #dddee1;
|
2022-06-23 19:58:44 +08:00
|
|
|
|
height: 60px;
|
2022-06-23 12:43:02 +08:00
|
|
|
|
text-align: center;
|
2022-06-25 14:00:45 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2022-06-23 12:43:02 +08:00
|
|
|
|
width: 290px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
table-layout: fixed;
|
2022-06-25 14:00:45 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.td-text {
|
|
|
|
|
width: 290px;
|
|
|
|
|
font-size: 14px;
|
2022-06-23 12:43:02 +08:00
|
|
|
|
overflow: hidden;
|
2022-06-25 14:00:45 +08:00
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
|
-webkit-box-orient: vertical;
|
2022-06-23 12:43:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
2022-06-25 14:00:45 +08:00
|
|
|
|
.td-name-text {
|
|
|
|
|
width: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2022-06-23 12:43:02 +08:00
|
|
|
|
.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-25 14:00:45 +08:00
|
|
|
|
|
|
|
|
|
.video-box {
|
|
|
|
|
height: 140px;
|
|
|
|
|
width: 240px;
|
|
|
|
|
}
|
2022-06-23 12:43:02 +08:00
|
|
|
|
</style>
|