<template> <div> <home-header></home-header> <div class="box-container"> <div class="nav-box">能力集市 / 算法对比</div> <div class="content"> <div class="left"> <div class="left-item" v-for="(data, i) in tableData" :key="i" :class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)"> {{ data.title }} </div> </div> <div class="right"> <div class="top no-border-right"> <div class="td-name"> {{ `共选取${getLength(detailArray)}个算法` }} </div> <div class="td" v-for="(item, k) in detailArray" :key="k"> <span v-if="item">{{ item.name || '--' }}</span> <svg v-if="item" t="1655780098058" @click="deleteList(k)" class="icon-delete" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3248" width="20" height="20"> <path d="M966.128 181.12H840.96c-0.168 0-0.32-0.096-0.488-0.096-0.16 0-0.312 0.096-0.48 0.096H184.064c-0.176 0-0.32-0.096-0.48-0.096-0.16 0-0.304 0.096-0.48 0.096H57.872a32.6 32.6 0 1 0 0 65.208h93.104v651.928c0 69.32 56.392 125.744 125.712 125.744h470.688c69.32 0 125.712-56.424 125.712-125.744V246.328h93.04a32.6 32.6 0 1 0 0-65.208z m-158.256 717.136c0 33.376-27.136 60.528-60.504 60.528H276.688c-33.352 0-60.496-27.16-60.496-60.528V246.328h591.68v651.928z" fill="#838384" p-id="3249"></path> <path d="M346.488 814.744a32.608 32.608 0 0 0 32.608-32.608V422.888a32.6 32.6 0 0 0-65.216 0v359.24a32.6 32.6 0 0 0 32.608 32.616zM512 814.744a32.6 32.6 0 0 0 32.608-32.608V422.888a32.6 32.6 0 0 0-65.216 0v359.24A32.6 32.6 0 0 0 512 814.744zM677.544 814.744a32.584 32.584 0 0 0 32.6-32.608V422.888c0-18.008-14.576-32.6-32.6-32.6s-32.608 14.592-32.608 32.6v359.24a32.592 32.592 0 0 0 32.608 32.616zM318.848 157.6a32.608 32.608 0 0 0 32.608-32.6c0-23.808 64.048-59.792 160.576-59.792 96.512 0 160.544 35.984 160.544 59.792a32.6 32.6 0 0 0 32.608 32.6 32.592 32.592 0 0 0 32.6-32.6C737.792 53.736 640.736 0 512.032 0 383.312 0 286.24 53.736 286.24 125a32.608 32.608 0 0 0 32.608 32.6z" fill="#838384" p-id="3250"></path> </svg> <svg @click="addList" v-if="!item && k === detailArray.filter(v => v).length" t="1655780573478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1373" width="50" height="50"> <path d="M960.083 512.001c0 21.998-17.834 39.829-39.832 39.829H103.745c-21.998 0-39.829-17.831-39.829-39.829s17.831-39.829 39.829-39.829h816.506c21.999 0.001 39.832 17.832 39.832 39.829z" fill="#838384" p-id="1374"></path> <path d="M512 63.915c21.995 0 39.829 17.834 39.829 39.835v816.503c0 22.001-17.834 39.832-39.829 39.832-21.998 0-39.832-17.831-39.832-39.832V103.75c0-22.001 17.834-39.835 39.832-39.835z" fill="#838384" p-id="1375"></path> </svg> </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"> <compare-group-view :dataList="data.list"></compare-group-view> </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"> {{ item || '--' }} </div> </div> </div> </div> </div> </div> </div> </div> <!-- :pagination="pagination" :loading="loading" --> <a-modal class="modal-box" title="请选择" :visible="showAddModal" :onOk='handleOk' :onCancel='handleCancel'> <a-table :columns="columns" :data-source="dataList" style="height:500px;overflow-y:auto" :row-selection="rowSelection" rowKey="id"> </a-table> </a-modal> </div> </template> <script setup> import HomeHeader from '@/views/home/components/header' import CompareGroupView from '@/views/home/components/CompareGroupView' import { pageWithAttrs } from '@/api/abilityStatistics' import { detailJson } from './temp' import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue'; import { Table } from 'ant-design-vue'; import { selectOne } from '@/api/home' import { getType } from '@turf/invariant'; const ctx = getCurrentInstance(); // 最大4列 const maxColumn = 4; const pagination = ref([]) const columns = ref([ { title: '算法名称', dataIndex: 'name', }, { title: '算法类型', dataIndex: 'type', }, ]) // 详情列表 const detailArray = ref([ '', '', '', '' ]) const dataObj = { '基本信息': [ { name: '算法名称', key: 'name' }, { name: '算法类别', key: 'type' }, { name: '部署位置', }, { name: '应用领域' }, { name: '共享条件', key: 'shareCondition' }, { name: '共享类型', key: 'shareType' }, { name: '算法介绍视频' }, ], "算法优势": [ { name: '算法优势名称', key: 'name' }, { name: '算法优势描述', key: 'desc' }, ] } const listArray = [ { name: '算法名称', list: [ { value: '人脸识别' }, { value: '犯罪嫌疑人追踪' }, ] }, { name: '算法类别', list: [ { value: '智能算法' }, { value: '图形服务' }, ] }, { name: '算法优势名称', groupName: '算法优势', list: [ { value: '人脸识别精准', }, { value: '犯罪嫌疑人追踪比较快', }, ] }, { name: '算法优势描述', groupName: '算法优势', list: [ { value: '人脸识别精准', }, { value: '犯罪嫌疑人追踪比较快', }, ] }, { name: '是否计费', list: [ { value: '是', }, { value: '否', }, ] } ] const titleObj = { '基本信息': [ { text: '算法名称', key: 'name' }, { text: '算法类别', key: '算法类别' }, { text: '部署位置', key: '部署位置' }, { text: '应用领域', key: '应用领域' }, { text: '共享条件', key: 'shareCondition' }, { text: '共享类型', key: 'shareType' }, { text: '算法描述', key: 'description' }, { text: '算法介绍视频', key: '算法介绍视频' }, ], '算法优势': [ { text: '算法优势名称', key: 'name' }, { text: '算法优势描述', key: 'desc' }, ], '应用场景': [ { text: '场景名称', key: '场景名称' }, { text: '场景描述', key: '场景描述' }, ], '应用案例': [ { text: '关联应用', key: '' }, { text: '算法需求背景', key: '' }, { text: '算法应用期望达成效果', key: '' }, ], '计费标准': [ { text: '是否计费', key: '' }, { text: '计费方式', key: '' }, { text: '计费描述', key: '' }, { text: '计费标准', key: '' }, ], '使用方式': [ { text: '服务接口', key: '' }, { text: '接口请求方式', key: '' }, { text: '技术文档', key: '' }, { text: '是否支持试用', key: '' }, { text: '试用描述', key: '' }, { text: '试用地址', key: '' }, ], '服务商': [ { text: '服务商名', key: '' }, { text: '服务商联系人', key: '' }, { text: '服务商联系电话', key: '' }, ] } const arrayStr = [ '算法优势', '应用场景', '计费标准信息', '常见问题' ] const activeNameIndex = ref(0) const showAddModal = ref(false) const dataList = ref([]) const selectedRowKeys = ref([]); // Check here to configure the default column // 初始化 onMounted(() => { getDetail() getList().then(res => { Promise.all(selectedRowKeys.value.map(v => getDetail(v))).then(data => { data.map((v, i) => { detailArray.value.splice(i, 1, formatterData(v)); }) nextTick(() => { getNewData() }) }) }) }) let tableData = ref([]) const getNewData = () => { Object.keys(titleObj).map((title, i) => { // 标题 let _newObj = { title: title, list: [] } if (arrayStr.includes(title)) { _newObj.groupName = title } let list = [] titleObj[title].map(v => { let obj = { name: v.text, infoList: getInfoList(v) } list.push(obj) }) _newObj.list = list; tableData.value.push(_newObj) }) nextTick(() => { console.log('tableData----333-------->', tableData); }) } const getInfoList = (rowItem) => { let arr = [] detailArray.value.map(item => { console.log('item------------>', item); let val = undefined; val = item[rowItem.key || rowItem.text] arr.push(val) }) return arr; } const getArrayLength = (list) => { let _newList = list.filter(v => v) || [] return _newList.length } // 获取算法列表 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) }) }) } // 删除 const deleteList = (i) => { detailArray.value.splice(i, 1, '') nextTick(() => { console.log('detailArray------------>', detailArray.value); getNewData() }) } const addList = () => { showAddModal.value = true } const handleOk = () => { if (getArrayLength(selectedRowKeys) > 4) { alert('最多选择四个算法'); return; } showAddModal.value = false } const handleCancel = () => { showAddModal.value = false console.log('showAddModal------------>', showAddModal); } const rowSelection = computed(() => { return { selectedRowKeys: unref(selectedRowKeys), onChange: changableRowKeys => { console.log('selectedRowKeys changed: ', changableRowKeys); selectedRowKeys.value = changableRowKeys; }, hideDefaultSelections: true, }; }); // 切换左侧 const changeTab = (n, data) => { activeNameIndex.value = n; // 获取元素距离父元素的距离 let realTop = ctx.refs[data.name][0].offsetTop; ctx.refs.bottomRef.scrollTo({ 'top': realTop - 250, 'behavior': 'smooth' }) } // ['1522550194535735298', '1522550194523152385'] const getDetail = (id = '1539125877366808578') => { return new Promise((resolve, reject) => { selectOne(id).then((res) => { resolve(res.data.data) }) }) } const isJson = (str) => { if (typeof str == 'string') { try { let obj = JSON.parse(str) return true } catch (e) { return false; } } } // 处扁平化数据 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) console.log('_obj-----处扁平化数据------->', _obj); return _obj } const isArrayAction = (name, itemData) => { if (Array.isArray(itemData[name])) { return true } else { return false } } const getLength = (array) => { let newArr = array.filter(v => v !== '') return newArr.length } </script> <style lang="less" scoped> // @font-face { // font-family: 'num-typeface'; // src: url('~@/assets/newHome/font/num-typeface.otf'); // } .border { border: 1px solid #bbb; border-bottom: none; border-right: none; } .border-bottom { border-bottom: 1px solid #bbb; } .no-border-right { border: 1px solid #bbb; 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; } .nav-box { height: 30px; line-height: 30px; width: 100%; margin-bottom: 10px; font-size: 12px; } .left { width: 200px; height: 800px; 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; // color: #FFF; } } .active { background: #0058e1; color: #fff; margin: 0; } } .right { width: 1360px; height: 800px; margin-left: 32px; .top { width: 100%; height: 130px; margin-bottom: 20px; display: flex; align-items: center; justify-content: flex-start; .td-name { height: 130px; line-height: 130px; } .td { height: 130px; line-height: 130px; position: relative; display: flex; justify-content: center; align-items: center; } .icon-delete { position: absolute; right: 10px; top: 10px; } } .bottom { width: 100%; overflow-y: auto; height: 800px; padding-bottom: 40px; } } } .title { font-size: 14px; padding: 20px 0 10px 10px; color: #212121; font-weight: bold; } .td-name { border-right: 1px solid #bbb; height: 50px; line-height: 50px; text-align: center; width: 200px; font-size: 14px; } .td { border-right: 1px solid #bbb; height: 50px; line-height: 50px; 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 { border: 1px solid #bbb; border-right: none; border-bottom: none; } .border-bottom { border-bottom: 1px solid #bbb; } .modal-box { height: 500px; width: 800px; } </style>