算法对比(暂存)

front/src/router/index.js

@@ -109,6 +109,16 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/algorithmCompare',
+    name: 'algorithmCompare',
+    hidden: true,
+    component: () => import('@/views/home/algorithmCompare'),
+    meta: {
+      title: '算法对比',
+      icon: 'error-warning-line',
+    },
+  },
   {
     path: '/addApplication',
     name: 'addApplication',

front/src/views/home/algorithmCompare.vue

@@ -2,47 +2,34 @@
     <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 tableData" :key="i"
+                    <div class="left-item" v-for="(data, i) in leftNav" :key="i"
                         :class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)">
-                        {{ data.title }}
+                        {{ data }}
                     </div>
                 </div>
                 <div class="right">
                     <div class="top no-border-right">
                         <div class="td-name">
-                            {{ `共选取${getLength(detailArray)}个算法` }}
+                            <!-- selectedRowKeys -->
+                            {{ `共选取${selectedRowKeys.length}个算法` }}
+                            <!-- {{ `共选取${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"
+                            <span v-if="item" @click="deleteList(k)" class="icon-delete">
-                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3248"
+                            </span>
-                                width="20" height="20">
+                            <span class="add-img" @click="addList"
-                                <path
+                                v-if="!item && k === detailArray.filter(v => v).length">
-                                    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"
+                            </span>
-                                    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">
@@ -50,7 +37,20 @@
                             <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>
+                                <!-- <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' : ''">
@@ -59,7 +59,7 @@
                                 </div>
                                 <div class="flex-row-start">
                                     <div class="td" v-for="(item, k) in rowData.infoList" :key="k">
-                                        {{ item || '--' }}
+                                        {{ item }}
                                     </div>
                                 </div>
                             </div>
@@ -69,31 +69,30 @@
             </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"
+            <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 { detailJson } from './temp'
 import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
-import { Table } from 'ant-design-vue';
+import { Table, Spin } from 'ant-design-vue';
 import { selectOne } from '@/api/home'
-import { getType } from '@turf/invariant';
+import { message } from 'ant-design-vue'
-
-
 const ctx = getCurrentInstance();
-// 最大4列
-const maxColumn = 4;
 
+// 最大4列
 const pagination = ref([])
+// 表格列名
 const columns = ref([
     {
         title: '算法名称',
@@ -105,119 +104,18 @@ const columns = ref([
     },
 ])
 // 详情列表
-const detailArray = ref([
+const detailArray = ref(['', '', '', ''])
-    '', '', '', ''
-])
 
-const dataObj = {
+const titleInfoObj = {
-    '基本信息': [
-        {
-            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: '算法类别',
         },
         {
-            text: '部署位置', key: '部署位置'
+            text: '部署位置',
         },
         {
             text: '应用领域', key: '应用领域'
@@ -253,35 +151,35 @@ const titleObj = {
     ],
     '应用案例': [
         {
-            text: '关联应用', key: ''
+            text: '关联应用',
         },
         {
-            text: '算法需求背景', key: ''
+            text: '算法需求背景',
         },
         {
-            text: '算法应用期望达成效果', key: ''
+            text: '算法应用期望达成效果',
         },
     ],
     '计费标准信息': [
         {
-            text: '是否计费', key: ''
+            text: '是否收费',
         },
         {
-            text: '计费方式', key: ''
+            text: '计费方式',
         },
         {
-            text: '计费描述', key: ''
+            text: '计费描述',
-        },
-        {
-            text: '计费标准信息', key: ''
         },
+        // {
+        //     text: '计费标准信息', key: ''
+        // },
     ],
     '使用方式': [
         {
-            text: '服务接口', key: ''
+            text: '服务接口',
         },
         {
-            text: '接口请求方式', key: ''
+            text: '接口请求方式', key: 'apiMethodType'
         },
         {
             text: '技术文档', key: ''
@@ -293,79 +191,146 @@ const titleObj = {
             text: '试用描述', key: ''
         },
         {
-            text: '试用地址', key: ''
+            text: '试用地址',
         },
     ],
     '服务商': [
         {
-            text: '服务商名', key: ''
+            text: '服务商名',
         },
         {
-            text: '服务商联系人', key: ''
+            text: '服务商联系人',
         },
         {
-            text: '服务商联系电话', key: ''
+            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([]); // Check here to configure the default column
+const selectedRowKeys = ref([]);
+let tableData = ref([])
+const loadingPage = ref(false)
 
 // 初始化
 onMounted(() => {
-    getDetail()
+
     getList().then(res => {
-        Promise.all(selectedRowKeys.value.map(v => getDetail(v))).then(data => {
+        loadingPage.value = true
-            data.map((v, i) => {
+        initData()
-                detailArray.value.splice(i, 1, formatterData(v));
+        // console.log('selectedRowKeys.value------------>', selectedRowKeys.value);
-            })
+
-            nextTick(() => {
+        // Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => {
-                getNewData()
+        //     data.map((v, i) => {
-            })
+        //         detailArray.value.splice(i, 1, formatterData(v));
-        })
+        //     })
+        //     // 处理数据
+        //     nextTick(() => {
+        //         getNewData()
+        //     })
+        //     loadingPage.value = false
+        // }).catch(err => {
+        //     loadingPage.value = false
+        //     message.error(err || '获取算法详情失败，请重试！')
+        // })
     })
 })
 
-let tableData = ref([])
+const initData = () => {
-const getNewData = () => {
+    loadingPage.value = true
-    Object.keys(titleObj).map((title, i) => {
+    selectedRowKeys.value.push('1539125877366808578')
-        // 标题
+    // 获取详情
-        let _newObj = {
+    Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => {
-            title: title,
+        data.map((v, i) => {
-            list: []
+            detailArray.value.splice(i, 1, formatterData(v));
-        }
-        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(() => {
-    })
+            getNewData()
-
+        })
-    nextTick(() => {
+        loadingPage.value = false
-        console.log('tableData----333-------->', tableData);
+    }).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 => {
-        console.log('item------------>', item);
         let val = undefined;
         val = item[rowItem.key || rowItem.text]
         arr.push(val)
@@ -373,10 +338,51 @@ const getInfoList = (rowItem) => {
     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 = {
@@ -406,36 +412,49 @@ const getList = () => {
         })
     })
 }
-// 删除
+
+// 删除算法
 const deleteList = (i) => {
+    selectedRowKeys.value.splice(i, 1)
     detailArray.value.splice(i, 1, '')
     nextTick(() => {
-        console.log('detailArray------------>', detailArray.value);
         getNewData()
     })
 }
+
 const addList = () => {
     showAddModal.value = true
 }
+
 const handleOk = () => {
-    if (getArrayLength(selectedRowKeys) > 4) {
+    console.log('selectedRowKeys------handleOk------>', selectedRowKeys);
-        alert('最多选择四个算法');
+    if (selectedRowKeys.length > 4) {
-        return;
+        message.error('最多选择四个算法！')
+        return false;
     }
+    initData()
     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);
+            console.log('changableRowKeys------------>', changableRowKeys);
-            selectedRowKeys.value = 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,
     };
@@ -445,22 +464,27 @@ const rowSelection = computed(() => {
 const changeTab = (n, data) => {
     activeNameIndex.value = n;
     // 获取元素距离父元素的距离
-    let realTop = ctx.refs[data.name][0].offsetTop;
+    let realTop = ctx.refs[data][0].offsetTop;
-    ctx.refs.bottomRef.scrollTo({
+    if (realTop || realTop === 0) {
-        'top': realTop - 250,
+        ctx.refs.bottomRef.scrollTo({
-        'behavior': 'smooth'
+            'top': realTop - 250,
-    })
+            'behavior': 'smooth'
+        })
+    }
 }
 
-//  ['1522550194535735298', '1522550194523152385']
+// 获取详情
-const getDetail = (id = '1539125877366808578') => {
+const getDetail = (id) => {
     return new Promise((resolve, reject) => {
         selectOne(id).then((res) => {
-            resolve(res.data.data)
+            resolve(res.data && res.data.data)
+        }).catch(err => {
+            reject(err)
         })
     })
 }
 
+// 判断是否json字符串
 const isJson = (str) => {
     if (typeof str == 'string') {
         try {
@@ -472,40 +496,26 @@ const isJson = (str) => {
     }
 }
 
-// 处扁平化数据
+// 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)
-    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>
 .bg {
     background: #fff;
@@ -548,6 +558,7 @@ const getLength = (array) => {
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
+        padding-top: 10px;
     }
 
     .nav-box {
@@ -563,7 +574,7 @@ const getLength = (array) => {
 
     .left {
         width: 200px;
-        height: 800px;
+        height: 600px;
         background: rgba(244, 245, 248, 0.8);
 
         .left-item {
@@ -578,7 +589,6 @@ const getLength = (array) => {
 
             &:hover {
                 cursor: pointer;
-                // color: #FFF;
             }
         }
 
@@ -596,20 +606,20 @@ const getLength = (array) => {
 
         .top {
             width: 100%;
-            height: 130px;
+            height: 100px;
             margin-bottom: 20px;
             display: flex;
             align-items: center;
             justify-content: flex-start;
 
             .td-name {
-                height: 130px;
+                height: 100px;
-                line-height: 130px;
+                line-height: 100px;
             }
 
             .td {
-                height: 130px;
+                height: 100px;
-                line-height: 130px;
+                line-height: 100px;
                 position: relative;
                 display: flex;
                 justify-content: center;
@@ -621,6 +631,11 @@ const getLength = (array) => {
                 position: absolute;
                 right: 10px;
                 top: 10px;
+                height: 12px;
+                width: 12px;
+                background: url('~@/assets/newHome/delete-on.png');
+                background-size: 100% 100%;
+                cursor: pointer;
             }
         }
 
@@ -628,11 +643,10 @@ const getLength = (array) => {
         .bottom {
             width: 100%;
             overflow-y: auto;
-            height: 680px;
+            height: 620px;
-            padding-bottom: 40px;
+            padding-bottom: 20px;
+            box-sizing: border-box;
         }
-
-
     }
 }
 
@@ -646,8 +660,8 @@ const getLength = (array) => {
 
 .td-name {
     border-right: 1px solid #dddee1;
-    height: 50px;
+    height: 60px;
-    line-height: 50px;
+    line-height: 60px;
     text-align: center;
     width: 200px;
     font-size: 14px;
@@ -655,8 +669,8 @@ const getLength = (array) => {
 
 .td {
     border-right: 1px solid #dddee1;
-    height: 50px;
+    height: 60px;
-    line-height: 50px;
+    line-height: 60px;
     text-align: center;
     width: 290px;
     font-size: 14px;
@@ -679,7 +693,33 @@ const getLength = (array) => {
 }
 
 .modal-box {
-    height: 500px;
+    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>

front/src/views/home/components/CompareGroupView.vue

@@ -1,77 +1,103 @@
 <template>
     <div>
-        <div class="group-box" v-for="(data, i) in tableArray" :key="i">
+        <div v-if="groupArray.length > 0">
-            <div class="flex-row-start row-tr" v-for="(item, j) in Object.keys(data)" :key="j"
+            <div class="group-box" v-for="(data, i) in groupArray" :key="i">
-                :class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''">
+                <div class="flex-row-start row-tr" v-for="(item, j) in Object.keys(data)" :key="j"
-                <div class="td-name">{{ item }}</div>
+                    :class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''">
-                <div class="flex-row-start">
+                    <div class="td-name">{{ item }}</div>
-                    <div class="td" v-for="(d, k) in data[item]" :key="k">{{ d || '--' }}</div>
+                    <div class="flex-row-start">
+                        <div class="td" v-for="(d, k) in data[item]" :key="k">{{ d || '--' }}</div>
+                    </div>
                 </div>
             </div>
         </div>
+        {{ '哈啊哈哈哈哈' + groupArray.length }}
+        <div v-if="groupArray.length == 0" class="no-data">暂无数据</div>
     </div>
 
 </template>
-<script setup>
-import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
 
-import { defineProps, defineEmit } from 'vue'
+<script>
-const props = defineProps({
+import { defineComponent, ref, onMounted, getCurrentInstance, computed, watch, nextTick } from 'vue'
-    dataList: Array,
+export default {
-})
+    props: ["dataList"],
-console.log('dataList------------>', props.dataList);
+    setup(props) {
+        let groupArray = ref([])
+        watch(
+            () => {
+                return props.dataList
+            },
+            (newVal) => {
+                console.log('newVal------------>', newVal);
+                groupArray = ref([])
+                newVal.map(v => {
+                    groupArray.value.push(v)
+                })
+                groupArray.value = groupArray.value.splice(0)
+                nextTick(() => {
+                    console.log('groupArray---子组件--------->', groupArray.value);
+                })
+            },
+            {
+                deep: true,
+                immediate: true
+            }
+        )
 
-const tableArray = ref([])
+        return {
-props.dataList.push(props.dataList[0])
+            groupArray,
-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)
     }
+}
+</script>
 
+<!-- <script setup>
+import { defineComponent, ref, onMounted, getCurrentInstance, computed, watch, reactive, nextTick, defineProps, defineEmit } from 'vue';
+
+const props = defineProps({
+    dataList: {
+        type: Array,
+        default: () => []
+    },
+})
+
+watch('dataList', (newVal, oldVal) => {
+    props.dataList = newVal;
+    let groupArray = ref([])
+    props.dataList.map(v => {
+        groupArray.value.push(v)
+    })
+})
+
+let groupArray = ref([])
+props.dataList.map(v => {
+    groupArray.value.push(v)
 })
 
 nextTick(() => {
-    console.log('tableArray---子组件--------->', tableArray);
-
 })
+</script> -->
 
-
-</script>
 <style lang="less" scoped>
 .group-box {
     margin-bottom: 20px;
 }
 
 .border {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-bottom: none;
     border-right: none;
 }
 
 
 .row-tr {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-right: none;
     border-bottom: none;
 }
 
 .no-border-right {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-right: none;
 }
 
@@ -82,7 +108,7 @@ nextTick(() => {
 }
 
 .td-name {
-    border-right: 1px solid #bbb;
+    border-right: 1px solid #dddee1;
     height: 50px;
     line-height: 50px;
     text-align: center;
@@ -91,7 +117,7 @@ nextTick(() => {
 }
 
 .td {
-    border-right: 1px solid #bbb;
+    border-right: 1px solid #dddee1;
     height: 50px;
     line-height: 50px;
     text-align: center;
@@ -105,6 +131,15 @@ nextTick(() => {
 }
 
 .border-bottom {
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid #dddee1;
+}
+
+.no-data {
+    height: 100px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #dddee1;
 }
 </style>