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

<template>
    <div class="bg">
        <home-header></home-header>
        <div class="box-container">
            <a-spin size="large" v-if="loadingPage" 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" :data-title="data"
                        :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}个算法` }}
                        </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 bottomRef" ref="bottomRef" @scroll="(event) => scrollAction(event)">
                        <div class="bottom-item" v-for="(data, i) in tableData" :key="i">
                            <div class="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="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">
                                                    <a-tooltip placement="top" :title="d">
                                                        <span class="td-text">{{ d }}</span>
                                                    </a-tooltip>
                                                </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" :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">
                                            您的浏览器不支持 HTML5 video 标签。
                                        </video>
                                        <a-tooltip v-else placement="top" :title="item">
                                            <span class="td-text">{{ item }}</span>
                                        </a-tooltip>
                                    </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 { selectOne } from '@/api/home'
import { message, Tooltip, Table, Spin } from 'ant-design-vue'
import { useRouter } from 'vue-router';

const router = useRouter()
let queryId = router.currentRoute.value.query.id;
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(() => {
    selectedRowKeys.value.push(queryId)
    nextTick(() => {
        getList().then(res => {
            initData()
        })
    })
})

// 滚动事件
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;
            }
        }
    })
}

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'
        })
    }
}

const initData = () => {
    loadingPage.value = true;
    // queryId
    // 获取详情
    Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => {
        detailArray.value = []
        for (let index = 0; index < 4; index++) {
            if (data[index] == undefined) {
                detailArray.value.push('')
            } else {
                detailArray.value.push(formatterData(data[index]))
            }
        }
        // 处理数据
        getNewData()

        nextTick(() => {
            getNavscrollTop()
        })

        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 => {
                    if (textInfo[d] !== undefined) {
                        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 getList = () => {
    const data = {
        deptIds: [],
        districtId: '',
        infoList: [
            { attrType: "组件类型", attrValue: "智能算法" }
        ],
        name: '',
        orderField: 'total',
        orderType: 'DESC',
        pageNum: 1,
        pageSize: 15,
        // type: '组件服务',
        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(() => {
        for (let index = 0; index < 4; index++) {
            if (detailArray.value[index] == undefined) {
                detailArray.value.splice(index, 1, '')
            }
        }
        getNewData()
    })
}

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

const handleOk = () => {
    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 => {
            if (changableRowKeys.length > 4) {
                message.error('最多选择四个算法！')
            } else {
                selectedRowKeys.value = changableRowKeys;
            }
            if (selectedRowKeys.value.length > 4) {
                selectedRowKeys.value = selectedRowKeys.value.splice(4)
            }
        },
        hideDefaultSelections: true,
    };
});


// 动态获取高度
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;
}


// 获取详情
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
}

</script>


<style lang="less" scoped>
.bg {
    background: #fff;
}

// @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: 1370px;
        height: 780px;
        margin-left: 32px;

        .top {
            width: 100%;
            height: 100px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-start;

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

            .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: 7rem;
            height: calc(100vh - 300px);
            padding-bottom: 10px;
            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;
    display: flex;
    align-items: center;
    justify-content: center;

}

.td {
    border-right: 1px solid #dddee1;
    height: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 290px;
    font-size: 14px;
    box-sizing: border-box;
    table-layout: fixed;
}


.td-text {
    width: 290px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.td-name-text {
    width: 200px;
}


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

.video-box {
    height: 140px;
    width: 240px;
}
</style>