From f2921a02270cfdf4f0155a6f1dc6a7a647a4f66c Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Thu, 30 Jun 2022 10:12:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E6=B3=95PK=E9=9A=90=E8=97=8F=E5=85=A8?=
 =?UTF-8?q?=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/modules/ability/bsdataresources.vue |   40 +-
 front/src/views/home/algorithmCompare.vue     | 1193 +++++++++--------
 2 files changed, 661 insertions(+), 572 deletions(-)

diff --git a/back/src/views/modules/ability/bsdataresources.vue b/back/src/views/modules/ability/bsdataresources.vue
index 7bb034dd..dcb29158 100644
--- a/back/src/views/modules/ability/bsdataresources.vue
+++ b/back/src/views/modules/ability/bsdataresources.vue
@@ -20,8 +20,8 @@
         </el-form-item>
       </el-form>
       <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column prop="orderId" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="productName" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="productName" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="orderId" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
         <el-table-column prop="payAmount" :label="$t('dataresources.resourcesProvide')" header-align="center" align="center"></el-table-column>
         <el-table-column prop="status" :label="$t('dataresources.resourcesAbstract')" header-align="center" align="center"></el-table-column>
         <el-table-column prop="payAt" :label="$t('dataresources.putOnDate')" header-align="center" align="center"></el-table-column>
@@ -50,8 +50,8 @@
 <script>
 import mixinViewModule from '@/mixins/view-module'
 // import AddOrUpdate from './order-add-or-update'
-import {addDynamicRoute} from "@/router";
-import RelateApplication from "./bsabilityai-relate-application.vue"
+import { addDynamicRoute } from '@/router'
+import RelateApplication from './bsabilityai-relate-application.vue'
 
 export default {
   mixins: [mixinViewModule],
@@ -68,7 +68,7 @@ export default {
         status: '',
         userId: ''
       },
-       // 关联应用弹窗
+      // 关联应用弹窗
       relateApplicationVisible: false,
       relateInfo: {
         id: '',
@@ -79,31 +79,31 @@ export default {
   },
   components: {
     // AddOrUpdate,
-    RelateApplication,
+    RelateApplication
   },
   methods: {
-     //重置
-     resetDataList(){
-        this.dataForm=this.noDataForm;
-        this.page=1;                    // 当前页码
-        this.query();
-     },
-      // 点击关联应用按钮
-    showRelateApplication(row){
+    // 重置
+    resetDataList () {
+      this.dataForm = this.noDataForm
+      this.page = 1 // 当前页码
+      this.query()
+    },
+    // 点击关联应用按钮
+    showRelateApplication (row) {
       this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
-        if( res && res.data ) {
-          this.relateApplicationVisible = true;
+        if (res && res.data) {
+          this.relateApplicationVisible = true
           this.relateInfo = {
             id: row.id,
             responseData: res.data,
             linkType: '2'
-          };
+          }
         }
       }).catch(() => { })
     },
-      // 是否展示关联应用弹窗
-    handleIsShowRelatePopup(type) {
-      this.relateApplicationVisible = type;
+    // 是否展示关联应用弹窗
+    handleIsShowRelatePopup (type) {
+      this.relateApplicationVisible = type
     }
   }
 }
diff --git a/front/src/views/home/algorithmCompare.vue b/front/src/views/home/algorithmCompare.vue
index 76ec432c..dbfa5141 100644
--- a/front/src/views/home/algorithmCompare.vue
+++ b/front/src/views/home/algorithmCompare.vue
@@ -1,576 +1,669 @@
 <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 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">
+        <a-anchor
+          :affix="false"
+          class="left"
+          :getContainer="getId"
+          @click="handleClickTab"
+        >
+          <a-anchor-link
+            class="left-item"
+            :href="`#${data}`"
+            :title="data"
+            v-for="(data, i) in leftNav"
+            :key="i"
+            :data-title="data"
+          />
+        </a-anchor>
+        <div class="right">
+          <div class="top no-border-right">
+            <div class="td-name">
+              <!-- selectedRowKeys -->
+              {{ `共选取${selectedRowKeys.length}个算法` }}
             </div>
-            <div class="content">
-                <a-anchor :affix="false" class="left" :getContainer="getId" @click="handleClickTab">
-                    <a-anchor-link class="left-item" :href="`#${data}`" :title="data" v-for="(data, i) in leftNav"
-                        :key="i" :data-title="data" />
-                </a-anchor>
-                <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" id="bottomRef" ref="bottomRef">
-                        <div class="bottom-item" v-for="(data, i) in tableData" :key="i">
-                            <div class="title" :id="data.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 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" id="bottomRef" ref="bottomRef">
+            <div class="bottom-item" v-for="(data, i) in tableData" :key="i">
+              <div
+                class="title"
+                :id="data.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>
-
-        <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>
     </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, onCreated } from 'vue';
-import { selectOne } from '@/api/home'
-import { message, Tooltip, Table, Spin } from 'ant-design-vue'
-import { useRouter } from 'vue-router';
+  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,
+    onCreated,
+  } 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();
+  const router = useRouter()
+  let queryId = router.currentRoute.value.query.id
+  const ctx = getCurrentInstance()
 
-// 最大4列
-const pagination = ref([])
-// 表格列名
-const columns = ref([
+  // 最大4列
+  const pagination = ref([])
+  // 表格列名
+  const columns = ref([
     {
-        title: '算法名称',
-        dataIndex: 'name',
+      title: '算法名称',
+      dataIndex: 'name',
     },
     {
-        title: '算法类型',
-        dataIndex: 'type',
+      title: '算法类型',
+      dataIndex: 'type',
     },
-])
-// 详情列表
-const detailArray = ref(['', '', '', ''])
+  ])
+  // 详情列表
+  const detailArray = ref(['', '', '', ''])
 
-const titleInfoObj = {
-    '基本信息': [
-        {
-            text: '算法名称', key: 'name'
-        },
-        {
-            text: '算法类别',
-        },
-        {
-            text: '部署位置',
-        },
-        {
-            text: '应用领域', key: '应用领域'
-        },
-        {
-            text: '共享条件', key: 'shareCondition'
-        },
-        {
-            text: '共享类型', key: 'shareType'
-        },
-        {
-            text: '算法描述', key: 'description'
-        },
-        {
-            text: '算法介绍视频', key: '算法介绍视频'
-        },
+  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: 'name',
+      },
+      {
+        text: '算法优势描述',
+        key: 'desc',
+      },
     ],
-    '应用场景': [
-        {
-            text: '场景名称', key: '场景名称'
-        },
-        {
-            text: '场景描述', key: '场景描述'
-        },
+    应用场景: [
+      {
+        text: '场景名称',
+        key: '场景名称',
+      },
+      {
+        text: '场景描述',
+        key: '场景描述',
+      },
     ],
-    '应用案例': [
-        {
-            text: '关联应用',
-        },
-        {
-            text: '算法需求背景',
-        },
-        {
-            text: '算法应用期望达成效果',
-        },
+    应用案例: [
+      {
+        text: '关联应用',
+      },
+      {
+        text: '算法需求背景',
+      },
+      {
+        text: '算法应用期望达成效果',
+      },
     ],
-    '计费标准信息': [
-        {
-            text: '是否收费',
-        },
-        {
-            text: '计费方式',
-        },
-        {
-            text: '计费描述',
-        },
-        // {
-        //     text: '计费标准信息', key: ''
-        // },
+    计费标准信息: [
+      {
+        text: '是否收费',
+      },
+      {
+        text: '计费方式',
+      },
+      {
+        text: '计费描述',
+      },
+      // {
+      //     text: '计费标准信息', key: ''
+      // },
     ],
-    '使用方式': [
-        {
-            text: '服务接口',
-        },
-        {
-            text: '接口请求方式', key: 'apiMethodType'
-        },
-        {
-            text: '技术文档', key: ''
-        },
-        {
-            text: '是否支持试用', key: ''
-        },
-        {
-            text: '试用描述', key: ''
-        },
-        {
-            text: '试用地址',
-        },
+    使用方式: [
+      {
+        text: '服务接口',
+      },
+      {
+        text: '接口请求方式',
+        key: 'apiMethodType',
+      },
+      {
+        text: '技术文档',
+        key: '',
+      },
+      {
+        text: '是否支持试用',
+        key: '',
+      },
+      {
+        text: '试用描述',
+        key: '',
+      },
+      {
+        text: '试用地址',
+      },
     ],
-    '服务商': [
-        {
-            text: '服务商名',
-        },
-        {
-            text: '服务商联系人',
-        },
-        {
-            text: '服务商联系电话',
-        },
+    服务商: [
+      {
+        text: '服务商名',
+      },
+      {
+        text: '服务商联系人',
+      },
+      {
+        text: '服务商联系电话',
+      },
     ],
-    '常见问题': [
-        {
-            text: '常见问题',
-        },
-        {
-            text: '回答',
-        },
-    ]
-}
-// 左侧导航
-const leftNav = ref([])
-Object.keys(titleInfoObj).map(v => leftNav.value.push(v))
+    常见问题: [
+      {
+        text: '常见问题',
+      },
+      {
+        text: '回答',
+      },
+    ],
+  }
+  // 左侧导航
+  const leftNav = ref([])
+  Object.keys(titleInfoObj).map((v) => leftNav.value.push(v))
 
-// 可能会有多组的数据
-const arrayStr = [
-    '算法优势', '应用场景', '计费标准信息', '常见问题'
-]
+  // 可能会有多组的数据
+  const arrayStr = ['算法优势', '应用场景', '计费标准信息', '常见问题']
 
-let textObj = {
-    '算法优势': {
-        name: '算法优势名称',
-        desc: '算法优势描述'
+  let textObj = {
+    算法优势: {
+      name: '算法优势名称',
+      desc: '算法优势描述',
     },
-    '应用场景': {
-        name: '场景名称',
-        desc: '场景描述',
+    应用场景: {
+      name: '场景名称',
+      desc: '场景描述',
     },
-    '计费标准信息': {
-        type: '计费方式',
-        price: '价格',
-        desc: '计费描述信息',
-        '是否收费': '是否收费'
+    计费标准信息: {
+      type: '计费方式',
+      price: '价格',
+      desc: '计费描述信息',
+      是否收费: '是否收费',
     },
-    '常见问题': {
-        question: '常见问题',
-        answer: '回答'
+    常见问题: {
+      question: '常见问题',
+      answer: '回答',
     },
-}
+  }
 
-const showAddModal = ref(false)
-const dataList = ref([])
-const selectedRowKeys = ref([]);
-let tableData = ref([])
-const loadingPage = ref(false)
+  const showAddModal = ref(false)
+  const dataList = ref([])
+  const selectedRowKeys = ref([])
+  let tableData = ref([])
+  const loadingPage = ref(false)
 
-const getId = () => {
+  const getId = () => {
     return window.document.getElementById('bottomRef')
-}
+  }
 
-const handleClickTab = (e, link) => {
+  const handleClickTab = (e, link) => {
     // 阻止点击的默认事件修改路由
-    e.preventDefault();
+    e.preventDefault()
     if (link.href) {
-        let ele = document.getElementById(link.href);
-        ele && ele.scrollIntoView({ block: 'start', behavior: 'smooth' });
+      let ele = document.getElementById(link.href)
+      ele && ele.scrollIntoView({ block: 'start', behavior: 'smooth' })
     }
-}
+  }
 
-// 初始化
-onMounted(() => {
+  // 初始化
+  onMounted(() => {
     selectedRowKeys.value.push(queryId)
     nextTick(() => {
-        getList().then(res => {
-            initData()
-        })
+      getList().then((res) => {
+        initData()
+      })
     })
-})
+  })
 
-
-const initData = () => {
-    loadingPage.value = true;
+  const initData = () => {
+    loadingPage.value = true
     // queryId
     // 获取详情
-    Promise.all(selectedRowKeys.value.map(id => getDetail(id))).then(data => {
+    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]))
-            }
+          if (data[index] == undefined) {
+            detailArray.value.push('')
+          } else {
+            detailArray.value.push(formatterData(data[index]))
+          }
         }
 
         nextTick(() => {
-            // 处理数据
-            getNewData()
+          // 处理数据
+          getNewData()
         })
 
         loadingPage.value = false
-    }).catch(err => {
+      })
+      .catch((err) => {
         loadingPage.value = false
         message.error(err || '获取算法详情失败，请重试！')
-    })
-}
+      })
+  }
 
-// 处理数组
-const getNewData = () => {
+  // 处理数组
+  const getNewData = () => {
     tableData.value = []
     Object.keys(titleInfoObj).map((titleKey, i) => {
-        // 标题
-        let _newObj = {
-            'title': titleKey,
+      // 标题
+      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)) {
-            _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;
+          obj.infoList = getInfoList(trName)
+          list.push(obj)
+        } else {
+          _newObj.groupList = getGroupList(titleKey, trName)
         }
-        tableData.value.push(_newObj)
+      })
+      if (!arrayStr.includes(titleKey)) {
+        _newObj.list = list
+      }
+      tableData.value.push(_newObj)
     })
-}
+  }
 
-// 基本信息等
-const getInfoList = (rowItem) => {
+  // 基本信息等
+  const getInfoList = (rowItem) => {
     let arr = []
-    detailArray.value.map(item => {
-        let val = undefined;
-        val = item[rowItem.key || rowItem.text]
-        arr.push(val)
+    detailArray.value.map((item) => {
+      let val = undefined
+      val = item[rowItem.key || rowItem.text]
+      arr.push(val)
     })
-    return arr;
-}
+    return arr
+  }
 
-// 算法优势：分组信息数组getGroupList
-const getGroupList = (titleKey, trName) => {
+  // 算法优势：分组信息数组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)
-        }
+    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;
-}
+    return _arr
+  }
 
-// 数组转化
-const translateArray = (list) => {
+  // 数组转化
+  const translateArray = (list) => {
     let arr = []
-    if (list.every(v => JSON.stringify(v) == '{}')) {
-        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
+      let itemObj = list.find((v) => JSON.stringify(v) !== '{}')
+      let obj = {}
+      Object.keys(itemObj).map((v) => {
+        let arr2 = []
+        list.map((item) => {
+          arr2.push(item[v] || '')
         })
-        arr.push(obj);
+        obj[v] = arr2
+      })
+      arr.push(obj)
     }
-    return arr;
-}
+    return arr
+  }
 
-// 获取算法列表
-const getList = () => {
+  // 获取算法列表
+  const getList = () => {
     const data = {
-        deptIds: [],
-        districtId: '',
-        infoList: [
-            { attrType: "组件类型", attrValue: "智能算法" }
-        ],
-        name: '',
-        orderField: 'total',
-        orderType: 'DESC',
-        pageNum: 1,
-        pageSize: 15,
-        // type: '组件服务',
-        type: '',
+      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)
+      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) => {
+  // 删除算法
+  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, '')
-            }
+      for (let index = 0; index < 4; index++) {
+        if (detailArray.value[index] == undefined) {
+          detailArray.value.splice(index, 1, '')
         }
-        getNewData()
+      }
+      getNewData()
     })
-}
+  }
 
-const addList = () => {
+  const addList = () => {
     showAddModal.value = true
-}
+  }
 
-const handleOk = () => {
-    if (selectedRowKeys.length > 4) {
-        message.error('最多选择四个算法！')
-        return false;
+  const handleOk = () => {
+    if (selectedRowKeys.value.length > 4) {
+      message.error('最多选择四个算法！')
+      return false
     }
     initData()
     showAddModal.value = false
-}
+  }
 
-const handleCancel = () => {
+  const handleCancel = () => {
     showAddModal.value = false
-}
+  }
 
-const rowSelection = computed(() => {
+  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,
-    };
-});
+      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) => {
+  // 动态获取高度
+  const getHeight = (name) => {
     if (name.indexOf('描述') != -1) {
-        return '120px'
+      return '120px'
     }
     if (name.indexOf('视频') != -1) {
-        return '230px'
+      return '230px'
     }
-}
+  }
 
-// 是否视频播放
-const showVideo = (name) => {
+  // 是否视频播放
+  const showVideo = (name) => {
     if (name.indexOf('视频') !== -1) {
-        return true
+      return true
     }
-    return false;
-}
+    return false
+  }
 
-
-// 获取详情
-const getDetail = (id) => {
+  // 获取详情
+  const getDetail = (id) => {
     return new Promise((resolve, reject) => {
-        selectOne(id).then((res) => {
-            resolve(res.data && res.data.data)
-        }).catch(err => {
-            reject(err)
+      selectOne(id)
+        .then((res) => {
+          resolve(res.data && res.data.data)
+        })
+        .catch((err) => {
+          reject(err)
         })
     })
-}
+  }
 
-// 判断是否json字符串
-const isJson = (str) => {
+  // 判断是否json字符串
+  const isJson = (str) => {
     if (typeof str == 'string') {
-        try {
-            let obj = JSON.parse(str)
-            return true
-        } catch (e) {
-            return false;
-        }
+      try {
+        let obj = JSON.parse(str)
+        return true
+      } catch (e) {
+        return false
+      }
     }
-}
+  }
 
-// infoList数组处理
-const formatterData = (obj) => {
+  // infoList数组处理
+  const formatterData = (obj) => {
     let _newObj = {}
-    obj.infoList.map(v => {
-        _newObj[v.attrType] = isJson(v.attrValue) ? JSON.parse(v.attrValue) : v.attrValue;
+    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 {
+  .bg {
     background: #fff;
     height: 100vh;
     width: 100%;
-}
+  }
 
-// @font-face {
-//     font-family: 'num-typeface';
-//     src: url('~@/assets/newHome/font/num-typeface.otf');
-// }
+  // @font-face {
+  //     font-family: 'num-typeface';
+  //     src: url('~@/assets/newHome/font/num-typeface.otf');
+  // }
 
-.border {
+  .border {
     border: 1px solid #dddee1;
     border-bottom: none;
     border-right: none;
-}
+  }
 
-.border-bottom {
+  .border-bottom {
     border-bottom: 1px solid #dddee1;
-}
+  }
 
-.no-border-right {
+  .no-border-right {
     border: 1px solid #dddee1;
     border-right: none;
-}
+  }
 
-.flex-row-start {
+  .flex-row-start {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-}
+  }
 
-.box-container {
+  .box-container {
     width: 1592px;
     margin: 0 auto;
     padding-top: 60px;
@@ -578,114 +671,111 @@ const formatterData = (obj) => {
     box-sizing: border-box;
 
     .content {
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        padding-top: 10px;
-        height: calc(100% - 60px);
-        width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      padding-top: 10px;
+      height: calc(100% - 60px);
+      width: 100%;
     }
 
     .nav-box {
-        height: 50px;
-        width: 100%;
-        font-size: 14px;
-        display: flex;
-        align-items: center;
-        background: rgba(244, 245, 248, 0.8);
-        padding-left: 10px;
+      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);
+      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;
+      .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;
-            }
+        &:hover {
+          cursor: pointer;
         }
+      }
 
-        .active {
-            background: #0058e1;
-            color: #fff !important;
-            margin: 0;
-        }
+      .active {
+        background: #0058e1;
+        color: #fff !important;
+        margin: 0;
+      }
     }
 
     .right {
-        width: 1370px;
-        margin-left: 32px;
-        height: 100%;
+      width: 1370px;
+      margin-left: 32px;
+      height: 100%;
 
-        .top {
-            width: 100%;
-            height: 100px;
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
+      .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;
-            }
+        .td-name {
+          height: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
 
-
-        .bottom {
-            width: 100%;
-            overflow-y: auto;
-            height: calc(100% - 130px);
-            padding-bottom: 10px;
-            box-sizing: border-box;
+        .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: calc(100% - 130px);
+        padding-bottom: 10px;
+        box-sizing: border-box;
+      }
     }
-}
+  }
 
-.title {
+  .title {
     font-size: 14px;
     padding: 20px 0 10px 10px;
     color: #212121;
     font-weight: bold;
     background: rgba(244, 245, 248, 0.8);
-}
+  }
 
-.td-name {
+  .td-name {
     border-right: 1px solid #dddee1;
     height: 60px;
     line-height: 60px;
@@ -695,10 +785,9 @@ const formatterData = (obj) => {
     display: flex;
     align-items: center;
     justify-content: center;
+  }
 
-}
-
-.td {
+  .td {
     border-right: 1px solid #dddee1;
     height: 60px;
     text-align: center;
@@ -709,10 +798,9 @@ const formatterData = (obj) => {
     font-size: 14px;
     box-sizing: border-box;
     table-layout: fixed;
-}
+  }
 
-
-.td-text {
+  .td-text {
     width: 290px;
     font-size: 14px;
     overflow: hidden;
@@ -720,80 +808,78 @@ const formatterData = (obj) => {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
-}
+  }
 
-.td-name-text {
+  .td-name-text {
     width: 200px;
-}
+  }
 
-
-.row-tr {
+  .row-tr {
     border: 1px solid #dddee1;
     border-right: none;
     border-bottom: none;
     background: #fff;
-}
+  }
 
-.border-bottom {
+  .border-bottom {
     border-bottom: 1px solid #dddee1;
-}
+  }
 
-.modal-box {
+  .modal-box {
     height: 650px;
     width: 800px;
-}
+  }
 
-.add-img {
+  .add-img {
     height: 60px;
     width: 60px;
     background: url('~@/assets/newHome/add-on.png');
     background-size: 100% 100%;
     cursor: pointer;
-}
+  }
 
-.no-data {
+  .no-data {
     height: 100px;
     width: 100%;
-    ;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #dddee1;
-}
+  }
 
-.loading-box {
+  .loading-box {
     width: 1592px;
     height: 500px;
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
-}
+  }
 
-.video-box {
+  .video-box {
     height: 140px;
     width: 240px;
-}
+  }
 
-.ant-anchor-wrapper {
+  .ant-anchor-wrapper {
     width: 200px;
     height: 600px;
     background: rgba(244, 245, 248, 0.8);
     padding-left: 0;
     position: static;
-}
+  }
 
-.ant-anchor-ink::before {
+  .ant-anchor-ink::before {
     content: ' ';
     width: 0 !important;
-}
+  }
 
-/deep/ .ant-anchor {
+  /deep/ .ant-anchor {
     position: static;
     padding-left: 0;
-}
+  }
 
-.ant-anchor-link {
+  .ant-anchor-link {
     padding: 0;
     margin: 0 14px;
     height: 60px;
@@ -803,5 +889,8 @@ const formatterData = (obj) => {
     font-size: 16px;
     color: #212121;
     border-bottom: 1px solid #dddee1;
-}
-</style>
\ No newline at end of file
+  }
+  :deep(.ant-checkbox-indeterminate) {
+    display: none;
+  }
+</style>