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

<template>
    <div class="bg">
        <home-header></home-header>
        <div class="box-container">
            <!-- <a-spin size="large" class="loading-box" :spinning="loadingPage" /> -->
            <div class="nav-box">
                <a-breadcrumb>
                    <a-breadcrumb-item>能力集市</a-breadcrumb-item>
                    <a-breadcrumb-item>算法对比</a-breadcrumb-item>
                </a-breadcrumb>
            </div>
            <div class="content">
                <div class="left">
                    <div class="left-item" v-for="(data, i) in leftNav" :key="i"
                        :class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)">
                        {{ data }}
                    </div>
                </div>
                <div class="right">
                    <div class="top no-border-right">
                        <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>
                            <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" 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.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>
                            </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>

        <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>
    </div>
</template>

<script setup>
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 } from 'vue';
import { Table, Spin } from 'ant-design-vue';
import { selectOne } from '@/api/home'
import { message } from 'ant-design-vue'
const ctx = getCurrentInstance();

// 最大4列
const pagination = ref([])
// 表格列名
const columns = ref([
    {
        title: '算法名称',
        dataIndex: 'name',
    },
    {
        title: '算法类型',
        dataIndex: 'type',
    },
])
// 详情列表
const detailArray = ref(['', '', '', ''])

const titleInfoObj = {
    '基本信息': [
        {
            text: '算法名称', key: 'name'
        },
        {
            text: '算法类别',
        },
        {
            text: '部署位置',
        },
        {
            text: '应用领域', key: '应用领域'
        },
        {
            text: '共享条件', key: 'shareCondition'
        },
        {
            text: '共享类型', key: 'shareType'
        },
        {
            text: '算法描述', key: 'description'
        },
        {
            text: '算法介绍视频', key: '算法介绍视频'
        },
    ],
    '算法优势': [
        {
            text: '算法优势名称', key: 'name'
        },
        {
            text: '算法优势描述', key: 'desc'
        },
    ],
    '应用场景': [
        {
            text: '场景名称', key: '场景名称'
        },
        {
            text: '场景描述', key: '场景描述'
        },
    ],
    '应用案例': [
        {
            text: '关联应用',
        },
        {
            text: '算法需求背景',
        },
        {
            text: '算法应用期望达成效果',
        },
    ],
    '计费标准信息': [
        {
            text: '是否收费',
        },
        {
            text: '计费方式',
        },
        {
            text: '计费描述',
        },
        // {
        //     text: '计费标准信息', key: ''
        // },
    ],
    '使用方式': [
        {
            text: '服务接口',
        },
        {
            text: '接口请求方式', key: 'apiMethodType'
        },
        {
            text: '技术文档', key: ''
        },
        {
            text: '是否支持试用', key: ''
        },
        {
            text: '试用描述', key: ''
        },
        {
            text: '试用地址',
        },
    ],
    '服务商': [
        {
            text: '服务商名',
        },
        {
            text: '服务商联系人',
        },
        {
            text: '服务商联系电话',
        },
    ],
    '常见问题': [
        {
            text: '常见问题',
        },
        {
            text: '回答',
        },
    ]
}
// 左侧导航
const leftNav = ref([])
Object.keys(titleInfoObj).map(v => leftNav.value.push(v))

// 可能会有多组的数据
const arrayStr = [
    '算法优势', '应用场景', '计费标准信息', '常见问题'
]

let textObj = {
    '算法优势': {
        name: '算法优势名称',
        desc: '算法优势描述'
    },
    '应用场景': {
        name: '场景名称',
        desc: '场景描述'
    },
    '计费标准信息': {
        type: '计费方式',
        price: '价格',
        desc: '计费描述信息',
        '是否收费': '是否收费'
    },
    '常见问题': {
        question: '常见问题',
        answer: '回答'
    },
}

const activeNameIndex = ref(0)
const showAddModal = ref(false)
const dataList = ref([])
const selectedRowKeys = ref([]);
let tableData = ref([])
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));
        })
        // 处理数据
        nextTick(() => {
            getNewData()
        })
        loadingPage.value = false
    }).catch(err => {
        loadingPage.value = false
        message.error(err || '获取算法详情失败，请重试！')
    })
}

// 处理数组
const getNewData = () => {
    tableData.value = []
    Object.keys(titleInfoObj).map((titleKey, i) => {
        // 标题
        let _newObj = {
            'title': titleKey,
        }
        if (arrayStr.includes(titleKey)) {
            _newObj.groupName = titleKey;
            _newObj.groupList = []
        } else {
            _newObj.list = []
        }
        let list = [];
        titleInfoObj[titleKey].map(trName => {
            let obj = {
                name: trName.text,
            }
            if (!arrayStr.includes(titleKey)) {
                obj.infoList = getInfoList(trName)
                list.push(obj)
            } else {
                _newObj.groupList = getGroupList(titleKey, trName)
            }
        })
        if (!arrayStr.includes(titleKey)) {
            _newObj.list = list;
        }
        tableData.value.push(_newObj)
    })
}

// 基本信息等
const getInfoList = (rowItem) => {
    let arr = []
    detailArray.value.map(item => {
        let val = undefined;
        val = item[rowItem.key || rowItem.text]
        arr.push(val)
    })
    return arr;
}

// 算法优势：分组信息数组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;
}

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) => {
    selectedRowKeys.value.splice(i, 1)
    detailArray.value.splice(i, 1, '')
    nextTick(() => {
        getNewData()
    })
}

const addList = () => {
    showAddModal.value = true
}

const handleOk = () => {
    console.log('selectedRowKeys------handleOk------>', selectedRowKeys);
    if (selectedRowKeys.length > 4) {
        message.error('最多选择四个算法！')
        return false;
    }
    initData()
    showAddModal.value = false
}

const handleCancel = () => {
    showAddModal.value = false
}

const rowSelection = computed(() => {
    return {
        selectedRowKeys: unref(selectedRowKeys),
        onChange: changableRowKeys => {
            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);
        },
        hideDefaultSelections: true,
    };
});

// 切换左侧
const changeTab = (n, data) => {
    activeNameIndex.value = n;
    // 获取元素距离父元素的距离
    let realTop = ctx.refs[data][0].offsetTop;
    if (realTop || realTop === 0) {
        ctx.refs.bottomRef.scrollTo({
            'top': realTop - 250,
            'behavior': 'smooth'
        })
    }
}

// 获取详情
const getDetail = (id) => {
    return new Promise((resolve, reject) => {
        selectOne(id).then((res) => {
            resolve(res.data && res.data.data)
        }).catch(err => {
            reject(err)
        })
    })
}

// 判断是否json字符串
const isJson = (str) => {
    if (typeof str == 'string') {
        try {
            let obj = JSON.parse(str)
            return true
        } catch (e) {
            return false;
        }
    }
}

// infoList数组处理
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
}

// 获取数组非空长度
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 {
//     font-family: 'num-typeface';
//     src: url('~@/assets/newHome/font/num-typeface.otf');
// }

.border {
    border: 1px solid #dddee1;
    border-bottom: none;
    border-right: none;
}

.border-bottom {
    border-bottom: 1px solid #dddee1;
}

.no-border-right {
    border: 1px solid #dddee1;
    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;
        padding-top: 10px;
    }

    .nav-box {
        height: 50px;
        width: 100%;
        font-size: 14px;
        display: flex;
        align-items: center;
        background: rgba(244, 245, 248, 0.8);
        padding-left: 10px;
    }


    .left {
        width: 200px;
        height: 600px;
        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%;
            height: 100px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .td-name {
                height: 100px;
                line-height: 100px;
            }

            .td {
                height: 100px;
                line-height: 100px;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }


            .icon-delete {
                position: absolute;
                right: 10px;
                top: 10px;
                height: 12px;
                width: 12px;
                background: url('~@/assets/newHome/delete-on.png');
                background-size: 100% 100%;
                cursor: pointer;
            }
        }


        .bottom {
            width: 100%;
            overflow-y: auto;
            height: 620px;
            padding-bottom: 20px;
            box-sizing: border-box;
        }
    }
}

.title {
    font-size: 14px;
    padding: 20px 0 10px 10px;
    color: #212121;
    font-weight: bold;
    background: rgba(244, 245, 248, 0.8);
}

.td-name {
    border-right: 1px solid #dddee1;
    height: 60px;
    line-height: 60px;
    text-align: center;
    width: 200px;
    font-size: 14px;
}

.td {
    border-right: 1px solid #dddee1;
    height: 60px;
    line-height: 60px;
    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 #dddee1;
    border-right: none;
    border-bottom: none;
    background: #fff;
}

.border-bottom {
    border-bottom: 1px solid #dddee1;
}

.modal-box {
    height: 650px;
    width: 800px;
}

.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;
}
</style>