优化对比算法

front/src/views/home/algorithmCompare.vue

@@ -2,7 +2,7 @@
     <div class="bg">
         <home-header></home-header>
         <div class="box-container">
-            <!-- <a-spin size="large" class="loading-box" :spinning="loadingPage" /> -->
+            <a-spin size="large" v-if="loadingPage" class="loading-box" :spinning="loadingPage" />
             <div class="nav-box">
                 <a-breadcrumb>
                     <a-breadcrumb-item>能力集市</a-breadcrumb-item>
@@ -21,7 +21,6 @@
                         <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>
@@ -42,9 +41,15 @@
                                     <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="td-name" :style="{ height: getHeight(item) }">
+                                                <span class="td-text td-name-text">{{ item }}</span>
+                                            </div>
                                             <div class="flex-row-start">
-                                                <div class="td" v-for="(d, k) in data[item]" :key="k">{{ d }}
+                                                <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>
@@ -54,12 +59,23 @@
                             </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">
+                                <div class="td-name" :style="{ height: getHeight(rowData.name) }">
-                                    {{ 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">
+                                    <div class="td" v-for="(item, k) in rowData.infoList" :key="k"
-                                        {{ item }}
+                                        :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>
@@ -85,9 +101,8 @@ 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'
+import { message, Tooltip, Table, Spin } from 'ant-design-vue'
 const ctx = getCurrentInstance();
 
 // 最大4列
@@ -230,7 +245,7 @@ let textObj = {
     },
     '应用场景': {
         name: '场景名称',
-        desc: '场景描述'
+        desc: '场景描述',
     },
     '计费标准信息': {
         type: '计费方式',
@@ -253,36 +268,23 @@ 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 = []
-            detailArray.value.splice(i, 1, formatterData(v));
+        for (let index = 0; index < 4; index++) {
-        })
+            if (data[index] == undefined) {
+                detailArray.value.push('')
+            } else {
+                detailArray.value.push(formatterData(data[index]))
+            }
+        }
         // 处理数据
         nextTick(() => {
             getNewData()
@@ -348,7 +350,9 @@ const getGroupList = (titleKey, trName) => {
             let textInfo = textObj[titleKey]
             _list.map(v => {
                 Object.keys(v).map(d => {
-                    groupItemObj[textInfo[d]] = v[d]
+                    if (textInfo[d] !== undefined) {
+                        groupItemObj[textInfo[d]] = v[d]
+                    }
                 })
             })
             arr.push(groupItemObj)
@@ -378,25 +382,21 @@ const translateArray = (list) => {
     return arr;
 }
 
-const getArrayLength = (list) => {
-    let _newList = list.filter(v => v) || []
-    return _newList.length
-}
-
 // 获取算法列表
 const getList = () => {
     const data = {
         deptIds: [],
         districtId: '',
         infoList: [
-            { attrType: "组件类型", attrValue: "智能算法" }
+            // { attrType: "组件类型", attrValue: "智能算法" }
         ],
         name: '',
         orderField: 'total',
         orderType: 'DESC',
         pageNum: 1,
         pageSize: 15,
-        type: '组件服务',
+        // type: '组件服务',
+        type: '',
     }
     return new Promise((resolve, reject) => {
         pageWithAttrs(data).then((res) => {
@@ -416,8 +416,13 @@ const getList = () => {
 // 删除算法
 const deleteList = (i) => {
     selectedRowKeys.value.splice(i, 1)
-    detailArray.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()
     })
 }
@@ -427,7 +432,6 @@ const addList = () => {
 }
 
 const handleOk = () => {
-    console.log('selectedRowKeys------handleOk------>', selectedRowKeys);
     if (selectedRowKeys.length > 4) {
         message.error('最多选择四个算法！')
         return false;
@@ -444,8 +448,6 @@ const rowSelection = computed(() => {
     return {
         selectedRowKeys: unref(selectedRowKeys),
         onChange: changableRowKeys => {
-            console.log('changableRowKeys------------>', changableRowKeys);
-
             if (changableRowKeys.length > 4) {
                 message.error('最多选择四个算法！')
             } else {
@@ -454,12 +456,30 @@ const rowSelection = computed(() => {
             if (selectedRowKeys.value.length > 4) {
                 selectedRowKeys.value = selectedRowKeys.value.splice(4)
             }
-            console.log('selectedRowKeys------------>', selectedRowKeys.value);
         },
         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 changeTab = (n, data) => {
     activeNameIndex.value = n;
@@ -467,7 +487,7 @@ const changeTab = (n, data) => {
     let realTop = ctx.refs[data][0].offsetTop;
     if (realTop || realTop === 0) {
         ctx.refs.bottomRef.scrollTo({
-            'top': realTop - 250,
+            'top': realTop - 240,
             'behavior': 'smooth'
         })
     }
@@ -506,20 +526,12 @@ const formatterData = (obj) => {
     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 {
@@ -600,8 +612,8 @@ const getLength = (array) => {
     }
 
     .right {
-        width: 1360px;
+        width: 1370px;
-        height: 800px;
+        height: 780px;
         margin-left: 32px;
 
         .top {
@@ -614,7 +626,9 @@ const getLength = (array) => {
 
             .td-name {
                 height: 100px;
-                line-height: 100px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
 
             .td {
@@ -665,22 +679,41 @@ const getLength = (array) => {
     text-align: center;
     width: 200px;
     font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
 }
 
 .td {
     border-right: 1px solid #dddee1;
     height: 60px;
-    line-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;
-    word-wrap: break-all;
-    word-break: normal;
-    overflow: hidden;
 }
 
+
+.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;
@@ -722,4 +755,9 @@ const getLength = (array) => {
     align-items: center;
     justify-content: center;
 }
+
+.video-box {
+    height: 140px;
+    width: 240px;
+}
 </style>