From 96f2b8b1f3f2a7eabaad932e4727377023c5f2ab Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Thu, 23 Jun 2022 12:43:02 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E7=AE=97=E6=B3=95=E5=AF=B9=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/algorithmCompare.vue     | 670 ++++++++++++++++++
 .../home/components/CompareGroupView.vue      | 110 +++
 2 files changed, 780 insertions(+)
 create mode 100644 front/src/views/home/algorithmCompare.vue
 create mode 100644 front/src/views/home/components/CompareGroupView.vue

diff --git a/front/src/views/home/algorithmCompare.vue b/front/src/views/home/algorithmCompare.vue
new file mode 100644
index 00000000..1f8381c3
--- /dev/null
+++ b/front/src/views/home/algorithmCompare.vue
@@ -0,0 +1,670 @@
+<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>
\ No newline at end of file
diff --git a/front/src/views/home/components/CompareGroupView.vue b/front/src/views/home/components/CompareGroupView.vue
new file mode 100644
index 00000000..ac15a438
--- /dev/null
+++ b/front/src/views/home/components/CompareGroupView.vue
@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <div class="group-box" v-for="(data, i) in tableArray" :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>
+
+</template>
+<script setup>
+import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
+
+import { defineProps, defineEmit } from 'vue'
+const props = defineProps({
+    dataList: Array,
+})
+console.log('dataList------------>', props.dataList);
+
+const tableArray = ref([])
+props.dataList.push(props.dataList[0])
+props.dataList.push(props.dataList[1])
+
+props.dataList.push(props.dataList[0])
+props.dataList.push(props.dataList[1])
+
+props.dataList.map((v, i) => {
+    console.log('v, i------------>', v, i);
+    if (i % 2 == 0) {
+
+        // console.log('props.dataList[i + 1]------------>', props.dataList[i + 1]);
+
+        let _keyDesc = props.dataList[i + 1].name;
+        let _keyList = props.dataList[i + 1].infoList;
+        let obj = {
+            [v.name]: v.infoList,
+            [_keyDesc]: _keyList
+        }
+        tableArray.value.push(obj)
+    }
+
+})
+
+nextTick(() => {
+    console.log('tableArray---子组件--------->', tableArray);
+
+})
+
+
+</script>
+<style lang="less" scoped>
+.group-box {
+    margin-bottom: 20px;
+}
+
+.border {
+    border: 1px solid #bbb;
+    border-bottom: none;
+    border-right: none;
+}
+
+
+.row-tr {
+    border: 1px solid #bbb;
+    border-right: none;
+    border-bottom: none;
+}
+
+.no-border-right {
+    border: 1px solid #bbb;
+    border-right: none;
+}
+
+.flex-row-start {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.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;
+}
+
+.border-bottom {
+    border-bottom: 1px solid #bbb;
+}
+</style>
\ No newline at end of file