From 3ceb5b59de3274bf6b839ca459a2f35a34aeb7b1 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Thu, 23 Jun 2022 13:19:52 +0800
Subject: [PATCH] =?UTF-8?q?=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/assets/newHome/pk-down.png          |  Bin 0 -> 1375 bytes
 front/src/assets/newHome/pk-on.png            |  Bin 0 -> 1376 bytes
 front/src/views/home/algorithmCompare.vue     |   49 +-
 .../home/components/searchResultList.vue      | 1173 +++++++++--------
 4 files changed, 631 insertions(+), 591 deletions(-)
 create mode 100644 front/src/assets/newHome/pk-down.png
 create mode 100644 front/src/assets/newHome/pk-on.png

diff --git a/front/src/assets/newHome/pk-down.png b/front/src/assets/newHome/pk-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c7203200dd950d0a398a079d06dbccabad9e4ea
GIT binary patch
literal 1375
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%!-*I5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;Ts+(+JXrf?lsb^?v
zXkuZgqhMrUXsmBwtZ!(nYiML;U}<G&ssIH_K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4mih)p`bI{&Koz>hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83
zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0<RzFwUtj!6b93RUi%Wu15$?rmaB)aw
zL8^XGYH@yPQ8F;%(v(3~6<9eJr6!i-7lq{K=fFZSAS1sdzc?emK*8BrK_fgfFD1Xc
zSQD(=*VoE3uec;JFFDoI#a0PufL>;1ij|YIlc|}rv74Krk(r^PtFxuKu_;i<&DGJ=
z%+%S?0;bm`Ke;qFHLnDwHwCWO!~myWP)f)x0NU)5T9jFqn&MWJpQ`}&u~jB+x47Um
z52`l>r(29&aq86vIz}H9uSoF>69Oh45EGtifgE_cPt5}+_99@aE{O07U|?Xp;_2cT
zQgJIOrK94-(E|qz*gI4uUvST3F62_az<9naq{};M#iq+wzX@-zH>%jOzvdjvC(FIM
z?2IesPV(Vl=5doXc-0WdzTv^76Z8LcB|iKquaU&H$A{<NFBzVF)9&!7&6-nC*to<!
z!Rp?G=ES6R5;Ok3J#OFjV4673@%eulU*Ep0aZo|&fKw!g&5u9*iH|1c^XT1OFS$+b
zZ%=sc^G)RmryUdg+6=-@ca|OaXjN!%Z-z3@H(rjA^}jlTZBG;`v^P2UGw6F|Onl1V
z%UWiz&HPc?iZ4%F+u6(t{vPyid$IHV!JK$gvo;ZX$5(2H&fov{a7y*}uky|*|FbKq
zW=1Nw)hW4r7v+fA^|^Ur3bV>P-K7Rw^Y(q^R^8hmq$JKR{FHA)PF1JkwdqPe0r8(7
zm4AqFoXDKOAhNuTYYmSgUky)@(3%^Y*Yk=q+lwnZUtYKVL5@uIU+a4=9#fd@&P-N5
z)wm!-vtNj5v$*VkzP`3wOW#XgySCwR57(+`Em@Cr61p8ErbRoX9(<-e|7E;L`|b~i
zg|mKb>gUO~`?Ih<wqZ_yBd3rwgQ?elVd>*n*cMo&Y_XCnJ+OkAt(AFRvsKp@wgBt-
q#!kDR8#hL@oy)6WJaUqOk&R&q<BXfxJ%M4MBG1#+&t;ucLK6UySL;sz

literal 0
HcmV?d00001

diff --git a/front/src/assets/newHome/pk-on.png b/front/src/assets/newHome/pk-on.png
new file mode 100644
index 0000000000000000000000000000000000000000..dade5b226811492732b6b1e46150233b6ede38dc
GIT binary patch
literal 1376
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%!-*I5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;Ts+(+JXrf?lsb^?v
zXkuZgqhMrUXsmBwtZ!(nYiML;U}<G&ssIH_K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4mih)p`bI{&Koz>hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83
zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0<RzFwUtj!6b93RUi%Wu15$?rmaB)aw
zL8^XGYH@yPQ8F;%(v(3~6<9eJr6!i-7lq{K=fFZSAS1sdzc?emK*8BrK_fgfFD1Xc
zSQD(=*VoE3uec;JFFDoI#a0PufL>;1ij|Y0g@u8Ik(ryJk(r^PtFx1%tC59^i>r}=
ziIbs;i4#n(OMY@`Zfaf$Om7N8uQ^V=pp=kX0JPa9wJ5VJHN~wcKUV?lW2;QuZZW}W
z9#n4%Znv1?)T<A4j6Nt{k>VL91WY_2COp*wIq-C!ng>kmMZi?evu)iE1_s8fo-U3d
z6}OU7Ix1eAJaE83yhBy;1@}DWLL=o1jOWWjy1b)SY`T2)oACB}qlzv2YtFHJvfQi7
z&bVUkBp)7T9yeKoR}F#e8y-y3nE9<M@!U*#jihZxIy_=pIXs#Bn0OX7aja$X?3W1g
zv5=_RbmT$O{klKNCuaWXdiZFwJ&*M(m4GY4PZ=a41oRow<7<C(FZ_MLysh+k{R2}G
zmRHaACPtM16+e72%W%&t4l9KN^Y{<4CBByDxwdw_MA*CEM<xjCw1l2t^j7}B!tG|k
z9gfj6n|Eb0q&;Y!Ucceg{5_v~74yHUw~6J;v84ygy;47P{k@_X_osxc+7EBUo2&0j
z7epNtwGy#pNOAl*$9%$z4Q^lWo)xc`Xxbg$c(Z-}AI8;7HN+K`7nC&U<~dH&`fS`N
z9D8SqIghXReZw=_Qy1J}Jh9UuXhy4Jcx!WGH*@s?-BW^$)@#ff`V|u&vbVjs9M7?g
zc~TLh9fKBo!a}A?$-BREJKx;I&(mJIv%qS`GSx)i84QQ-_Wzf-_U6Bdf$PSdeBu@%
z4v|9BieJQuKVfmWbbifQ`GQr9re6Q+XQ-Pihze@7_l6x`%qLNLU_rrw;sE!F_ZYIC
ra|bv+VSPK#`@&6L|3(X5g#!$0)n+{DZ8_KtD)T&D{an^LB{Ts5>h<Z(

literal 0
HcmV?d00001

diff --git a/front/src/views/home/algorithmCompare.vue b/front/src/views/home/algorithmCompare.vue
index 1f8381c3..8cce4d95 100644
--- a/front/src/views/home/algorithmCompare.vue
+++ b/front/src/views/home/algorithmCompare.vue
@@ -1,8 +1,14 @@
 <template>
-    <div>
+    <div class="bg">
         <home-header></home-header>
         <div class="box-container">
-            <div class="nav-box">能力集市 / 算法对比</div>
+            <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"
@@ -256,7 +262,7 @@ const titleObj = {
             text: '算法应用期望达成效果', key: ''
         },
     ],
-    '计费标准': [
+    '计费标准信息': [
         {
             text: '是否计费', key: ''
         },
@@ -267,7 +273,7 @@ const titleObj = {
             text: '计费描述', key: ''
         },
         {
-            text: '计费标准', key: ''
+            text: '计费标准信息', key: ''
         },
     ],
     '使用方式': [
@@ -304,7 +310,7 @@ const titleObj = {
 }
 
 const arrayStr = [
-    '算法优势', '应用场景', '计费标准信息', '常见问题'
+    '算法优势', '应用场景', '计费标准信息信息', '常见问题'
 ]
 
 const activeNameIndex = ref(0)
@@ -501,23 +507,28 @@ const getLength = (array) => {
 
 
 <style lang="less" scoped>
+.bg {
+    background: #fff;
+    // background: rgba(244,245,248, 0.8);
+}
+
 // @font-face {
 //     font-family: 'num-typeface';
 //     src: url('~@/assets/newHome/font/num-typeface.otf');
 // }
 
 .border {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-bottom: none;
     border-right: none;
 }
 
 .border-bottom {
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid #dddee1;
 }
 
 .no-border-right {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-right: none;
 }
 
@@ -540,11 +551,13 @@ const getLength = (array) => {
     }
 
     .nav-box {
-        height: 30px;
-        line-height: 30px;
+        height: 50px;
         width: 100%;
-        margin-bottom: 10px;
-        font-size: 12px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        background: rgba(244, 245, 248, 0.8);
+        padding-left: 10px;
     }
 
 
@@ -615,7 +628,7 @@ const getLength = (array) => {
         .bottom {
             width: 100%;
             overflow-y: auto;
-            height: 800px;
+            height: 680px;
             padding-bottom: 40px;
         }
 
@@ -628,10 +641,11 @@ const getLength = (array) => {
     padding: 20px 0 10px 10px;
     color: #212121;
     font-weight: bold;
+    background: rgba(244, 245, 248, 0.8);
 }
 
 .td-name {
-    border-right: 1px solid #bbb;
+    border-right: 1px solid #dddee1;
     height: 50px;
     line-height: 50px;
     text-align: center;
@@ -640,7 +654,7 @@ const getLength = (array) => {
 }
 
 .td {
-    border-right: 1px solid #bbb;
+    border-right: 1px solid #dddee1;
     height: 50px;
     line-height: 50px;
     text-align: center;
@@ -654,13 +668,14 @@ const getLength = (array) => {
 }
 
 .row-tr {
-    border: 1px solid #bbb;
+    border: 1px solid #dddee1;
     border-right: none;
     border-bottom: none;
+    background: #fff;
 }
 
 .border-bottom {
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid #dddee1;
 }
 
 .modal-box {
diff --git a/front/src/views/home/components/searchResultList.vue b/front/src/views/home/components/searchResultList.vue
index c29ae7ff..ecb046b1 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -6,72 +6,43 @@
         检测结果:
         <span>{{ resourceTotal || '' }}</span>
         个{{
-          cardType == '组件服务' ? '组件' : cardType == '应用资源' ? '应用' : ''
+            cardType == '组件服务' ? '组件' : cardType == '应用资源' ? '应用' : ''
         }}
       </div>
       <div class="condition" :key="showKey">
         <ul>
-          <li
-            v-for="item in selList"
-            :key="item.value"
-            @click="changeCondition(item.value)"
-          >
+          <li v-for="item in selList" :key="item.value" @click="changeCondition(item.value)">
             {{ item.name }}
-            <span
-              class="arrow"
-              :class="item.value == selData ? 'down' : ''"
-            ></span>
+            <span class="arrow" :class="item.value == selData ? 'down' : ''"></span>
           </li>
         </ul>
       </div>
     </div>
-    <div
-      class="result-list"
-      v-for="(item, index) in resourceList.data"
-      :key="item.index"
-    >
+    <div class="result-list" v-for="(item, index) in resourceList.data" :key="item.index">
       <div class="item">
-        <div
-          class="left"
-          :class="
-            item.type == '应用资源'
-              ? 'yyzy'
-              : item.applicationType == '智能算法'
+        <div class="left" :class="
+          item.type == '应用资源'
+            ? 'yyzy'
+            : item.applicationType == '智能算法'
               ? 'znsf'
               : 'gis'
-          "
-        ></div>
+        "></div>
         <div class="right">
           <div class="header">
             <span style="display: flex; align-items: center">
               {{ item.name }}
-              <svg
-                t="1652322568870"
-                class="icon"
-                viewBox="0 0 3072 1024"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                p-id="3062"
-                width="40"
-                height="40"
-                v-if="item.applyState == '通过'"
-                style="margin-left: 10px"
-              >
+              <svg t="1652322568870" class="icon" viewBox="0 0 3072 1024" version="1.1"
+                xmlns="http://www.w3.org/2000/svg" p-id="3062" width="40" height="40" v-if="item.applyState == '通过'"
+                style="margin-left: 10px">
                 <path
                   d="M2958.222222 0a113.777778 113.777778 0 0 1 113.777778 113.777778v796.444444a113.777778 113.777778 0 0 1-113.777778 113.777778H500.053333a113.777778 113.777778 0 0 1-85.617777-38.798222L32.824889 549.432889a56.888889 56.888889 0 0 1 0-74.922667L414.435556 38.798222A113.777778 113.777778 0 0 1 499.996444 0H2958.222222z m0 56.888889H500.053333a56.888889 56.888889 0 0 0-42.837333 19.399111L75.605333 512l381.610667 435.712a56.888889 56.888889 0 0 0 42.780444 19.399111H2958.222222a56.888889 56.888889 0 0 0 56.888889-56.888889V113.777778a56.888889 56.888889 0 0 0-56.888889-56.888889z"
-                  fill="#d81e06"
-                  p-id="3063"
-                ></path>
+                  fill="#d81e06" p-id="3063"></path>
                 <path
                   d="M398.222222 398.222222a113.777778 113.777778 0 1 1 0 227.555556 113.777778 113.777778 0 0 1 0-227.555556z m0 56.888889a56.888889 56.888889 0 1 0 0 113.777778 56.888889 56.888889 0 0 0 0-113.777778z"
-                  fill="#d81e06"
-                  p-id="3064"
-                ></path>
+                  fill="#d81e06" p-id="3064"></path>
                 <path
                   d="M1309.582222 491.064889v-273.066667h-505.173333v47.786667h455.338667v178.176h-378.88V342.926222h-49.152v358.4c0 55.978667 27.306667 84.650667 82.602666 84.650667h370.005334c28.672-1.365333 51.2-8.874667 66.218666-23.210667 16.384-17.749333 27.989333-68.266667 34.816-152.917333l-47.786666-15.018667-1.706667 26.737778c-4.664889 58.766222-12.970667 93.582222-24.917333 104.334222-10.24 8.192-23.893333 12.288-40.277334 12.288h-342.698666c-31.402667 0-47.104-15.701333-47.104-45.738666v-201.386667h428.714666z m430.08-307.2v102.4h-219.136v386.389333h48.469334v-46.421333h170.666666v178.858667h50.517334v-178.858667h167.936v41.642667h48.469333V286.264889h-216.405333v-102.4h-50.517334z m-170.666666 395.946667v-102.4h170.666666v102.4h-170.666666z m221.184 0v-102.4h167.936v102.4h-167.936z m-221.184-146.773334V332.003556h170.666666v101.034666h-170.666666z m221.184 0V332.003556h167.936v101.034666h-167.936z m733.866666-251.221333v44.373333h-165.205333v40.277334h165.205333v45.738666h-137.898666v39.594667h137.898666V398.222222h-184.32v40.96h417.792V398.222222h-186.368v-46.421333h144.725334v-39.594667h-144.725334v-45.738666h169.301334v-40.277334h-169.301334v-44.373333h-47.104z m-85.333333 429.397333h220.501333v49.834667h-220.501333v-49.834667z m220.501333-38.229333h-220.501333v-50.517333h220.501333v50.517333z m-220.501333 126.293333h220.501333v38.912c0 15.701333-8.874667 23.893333-25.258666 23.893334l-54.613334-2.048 11.605334 43.690666h57.344c38.229333 0 58.026667-18.432 58.026666-55.296v-266.24H2391.608889V807.822222h47.104v-108.544z m-222.549333-509.952l-34.816 33.450667c49.152 36.864 88.064 71.68 116.736 104.448l33.450666-34.133333a795.079111 795.079111 0 0 0-115.370666-103.765334z m-82.602667 201.386667h144.725333v299.690667c20.48-19.114667 41.642667-40.277333 64.853334-64.170667l12.970666 51.882667a923.932444 923.932444 0 0 1-121.514666 105.813333l-19.114667-43.690667c10.24-9.557333 15.701333-19.797333 15.701333-31.402666V437.816889h-97.621333v-47.104z"
-                  fill="#d81e06"
-                  p-id="3065"
-                ></path>
+                  fill="#d81e06" p-id="3065"></path>
               </svg>
             </span>
 
@@ -106,51 +77,37 @@
                 <!-- <template #title>
                 <span>{{ item.score || 0 }}分</span>
               </template> -->
-                <a-rate
-                  :value="item.score || 0"
-                  disabled
-                  v-if="item.score != 0"
-                />
+                <a-rate :value="item.score || 0" disabled v-if="item.score != 0" />
               </a-tooltip>
             </div>
           </div>
           <div class="btn">
             <div class="right">
-              <div class="shopping" :key="shoppingKey">
-                <span class="shopping-down" v-if="item.isInShoppingCart"></span>
-                <span
-                  class="shopping-on"
-                  v-else
-                  @click="addShoppingCart(item, index)"
-                ></span>
+              <div class="shopping">
+                <div class="shopping" :key="shoppingKey">
+                  <span class="shopping-down" v-if="item.isInShoppingCart"></span>
+                  <span class="shopping-on" v-else @click="addShoppingCart(item, index)"></span>
+                </div>
               </div>
               <div class="sc">
-                <span
-                  class="sc-down"
-                  v-if="item.isCollect == 'false'"
-                  @click="addCollect(item)"
-                ></span>
-                <span
-                  class="sc-on"
-                  v-if="item.isCollect == 'true'"
-                  @click="addCollect(item)"
-                ></span>
-                <a-button
-                  style="margin-left: 10px"
-                  v-show="
-                    cardType == '组件服务' &&
-                    findComponentName(item, '智能算法')
-                  "
-                >
+                <span class="sc-down" v-if="item.isCollect == 'false'" @click="addCollect(item)"></span>
+                <span class="sc-on" v-if="item.isCollect == 'true'" @click="addCollect(item)"></span>
+                <a-button style="margin-left: 10px" v-show="
+                  cardType == '组件服务' &&
+                  findComponentName(item, '智能算法')
+                ">
                   免费试用
                 </a-button>
               </div>
+              <div class="shopping pk" :key="pk">
+                <span class="pk-on" @click="goComparePk(item, index)"></span>
+              </div>
               <a-button type="primary" @click="toView('details', item)">
                 查看详情
               </a-button>
               <a-button type="primary" @click="toView('apply', item)">
                 {{
-                  item.shareCondition == '免批申请' ? '免批申请' : '立即申请'
+                    item.shareCondition == '免批申请' ? '免批申请' : '立即申请'
                 }}
               </a-button>
             </div>
@@ -162,527 +119,595 @@
 </template>
 
 <script>
-  import { ref } from 'vue'
-  import { message } from 'ant-design-vue'
-  import { useRouter } from 'vue-router'
-  import { getUser, sgcInsert } from '@/api/home'
-  import { scInsert, scDel } from '@/api/personalCenter'
-  import mybus from '@/myplugins/mybus'
+import { ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
+import { getUser, sgcInsert } from '@/api/home'
+import { scInsert, scDel } from '@/api/personalCenter'
+import mybus from '@/myplugins/mybus'
 
-  export default {
-    name: '',
-    // props: ['resourceList', 'resourceTotal', 'selectCardsname'],
-    props: {
-      resourceList: {
-        type: Object,
-        default: () => {},
-      },
-      resourceTotal: {
-        type: String,
-        default: '0',
-      },
-      selectCardsname: {
-        type: String,
-        default: '组件服务',
-      },
+export default {
+  name: '',
+  // props: ['resourceList', 'resourceTotal', 'selectCardsname'],
+  props: {
+    resourceList: {
+      type: Object,
+      default: () => { },
     },
-    computed: {
-      dataList() {
-        const newArr = []
-        for (let i = 0; i < this.resourceList.data.length; i++) {
-          let arr = [
-            {
-              name: '应用名称',
-              value: '',
-            },
-            {
-              name: '应用ID',
-              value: '',
-              dataResourceId: '',
-            },
-            {
-              name: '应用领域',
-              value: '',
-            },
-            {
-              name: '组件类型',
-              value: '',
-            },
-            {
-              name: '技术领域',
-              value: '',
-            },
-            {
-              name: '共享类型',
-              value: '',
-            },
-            {
-              name: '共享条件',
-              value: '',
-            },
-          ]
-          arr.map((item) => {
-            if (item.name === '应用名称') {
-              item.value = this.resourceList.data[i].name
-            }
-            if (item.name === '应用ID') {
-              item.value = this.resourceList.data[i].id
-              item.dataResourceId =
-                this.resourceList.data[i].infoList[0].dataResourceId
-            }
-            if (item.name === '应用领域') {
-              this.resourceList.data[i].infoList.map((aa) => {
-                aa.attrType === '应用领域' ? (item.value = aa.attrValue) : ''
-              })
-            }
-            if (item.name === '组件类型') {
-              this.resourceList.data[i].infoList.map((aa) => {
-                aa.attrType === '组件类型' ? (item.value = aa.attrValue) : ''
-              })
-            }
-            if (item.name === '技术领域') {
-              this.resourceList.data[i].infoList.map((aa) => {
-                aa.attrType === '技术领域' ? (item.value = aa.attrValue) : ''
-              })
-            }
-            if (item.name === '共享类型') {
-              this.resourceList.data[i].infoList.map((aa) => {
-                aa.attrType === '共享类型' ? (item.value = aa.attrValue) : ''
-              })
-            }
-            if (item.name === '共享条件') {
-              this.resourceList.data[i].infoList.map((aa) => {
-                aa.attrType === '共享条件' ? (item.value = aa.attrValue) : ''
-              })
-            }
-          })
-          newArr.push(arr)
-        }
-        console.log(
-          'dataList======================>',
-          newArr,
-          this.resourceList
-        )
-        return newArr
-      },
-      isShoppingCartOrNot() {
-        return ''
-      },
+    resourceTotal: {
+      type: String,
+      default: '0',
     },
-    components: {},
-    setup(props) {
-      let shoppingKey = ref(1)
-      // 购物车id列表
-      const selList = ref([
-        { name: '发布时间', value: 'tdr.create_date' },
-        { name: '浏览量', value: 'visits' },
-        { name: '申请量', value: 'applyCount' },
-        { name: '收藏量', value: 'collectCount' },
-        { name: '评分', value: 'score' },
-      ])
-      const findComponentName = (list, name) => {
-        if (list.infoList) {
-          return list.infoList.find((item) => {
-            if (item.attrType === '组件类型') {
-              return item.attrValue === name
-            }
-          })
-        }
-      }
-      const selData = ref('total')
-      const flag = ref(true)
-      // userId
-      const userId = ref('')
-      getUser().then((res) => {
-        console.log('getUser============>', res)
-        userId.value = res.data.data.id
-      })
-      const resultList = [1, 2, 3, 4]
-      const router = useRouter()
-      const cardType = router.currentRoute.value.query.select
-      const onSearch = (searchValue) => {
-        console.log('use value', searchValue)
-        console.log('or use this.value', searchValue.value)
-      }
-
-      function toView(type, item) {
-        if (type === 'apply') {
-          // window.open(newpage.href, '_blank')
-          router.push({
-            path: '/apply',
-            query: {
-              name: [item.name],
-              resourceId: [item.id],
-            },
-          })
-        } else {
-          console.log(
-            '111111111111111111===========>',
-            router,
-            props.selectCardsname
-          )
-          router.push({
-            path: '/details',
-            query: {
-              id: item.id,
-            },
-          })
-        }
-      }
-      // 加入申购车
-      const addShoppingCart = (item, index) => {
-        console.log('item===============>', item)
-        mybus.emit('changeSelcted', index)
-        if (flag.value && item.id) {
-          flag.value = false
-          sgcInsert({
-            delFlag: '0',
-            resourceId: item.id,
-            // userId: userId.value,
-          }).then((res) => {
-            console.log(res)
-            message.success('添加申购车成功！')
-            mybus.emit('getSgcNum')
-            flag.value = true
-          })
-        }
-        shoppingKey.value++
-        // 查询申购车中已有id,用于过滤图标
-      }
-      // 添加收藏
-      const addCollect = (item) => {
-        console.log('收藏===============>', item, flag.value)
-        if (flag.value && item.id) {
-          flag.value = false
-          if (item.isCollect == 'true') {
-            scDel([item.id]).then((res) => {
-              if (res.data.msg === 'success') {
-                message.success('取消成功')
-                item.isCollect = 'false'
-                item.collectCount--
-                flag.value = true
-                console.log('收藏2===============>', res.data, flag.value)
-              }
-            })
-          } else {
-            scInsert([
-              {
-                resourceId: item.id,
-              },
-            ]).then((res) => {
-              if (res.data.msg === 'success') {
-                message.success('添加收藏成功！')
-                item.isCollect = 'true'
-                item.collectCount++
-                flag.value = true
-                console.log('收藏2===============>', res.data, flag.value)
-              }
+    selectCardsname: {
+      type: String,
+      default: '组件服务',
+    },
+  },
+  computed: {
+    dataList() {
+      const newArr = []
+      for (let i = 0; i < this.resourceList.data.length; i++) {
+        let arr = [
+          {
+            name: '应用名称',
+            value: '',
+          },
+          {
+            name: '应用ID',
+            value: '',
+            dataResourceId: '',
+          },
+          {
+            name: '应用领域',
+            value: '',
+          },
+          {
+            name: '组件类型',
+            value: '',
+          },
+          {
+            name: '技术领域',
+            value: '',
+          },
+          {
+            name: '共享类型',
+            value: '',
+          },
+          {
+            name: '共享条件',
+            value: '',
+          },
+        ]
+        arr.map((item) => {
+          if (item.name === '应用名称') {
+            item.value = this.resourceList.data[i].name
+          }
+          if (item.name === '应用ID') {
+            item.value = this.resourceList.data[i].id
+            item.dataResourceId =
+              this.resourceList.data[i].infoList[0].dataResourceId
+          }
+          if (item.name === '应用领域') {
+            this.resourceList.data[i].infoList.map((aa) => {
+              aa.attrType === '应用领域' ? (item.value = aa.attrValue) : ''
             })
           }
+          if (item.name === '组件类型') {
+            this.resourceList.data[i].infoList.map((aa) => {
+              aa.attrType === '组件类型' ? (item.value = aa.attrValue) : ''
+            })
+          }
+          if (item.name === '技术领域') {
+            this.resourceList.data[i].infoList.map((aa) => {
+              aa.attrType === '技术领域' ? (item.value = aa.attrValue) : ''
+            })
+          }
+          if (item.name === '共享类型') {
+            this.resourceList.data[i].infoList.map((aa) => {
+              aa.attrType === '共享类型' ? (item.value = aa.attrValue) : ''
+            })
+          }
+          if (item.name === '共享条件') {
+            this.resourceList.data[i].infoList.map((aa) => {
+              aa.attrType === '共享条件' ? (item.value = aa.attrValue) : ''
+            })
+          }
+        })
+        newArr.push(arr)
+      }
+      console.log(
+        'dataList======================>',
+        newArr,
+        this.resourceList
+      )
+      return newArr
+    },
+    isShoppingCartOrNot() {
+      return ''
+    },
+  },
+  components: {},
+  setup(props) {
+    let shoppingKey = ref(1)
+    // 购物车id列表
+    const selList = ref([
+      { name: '发布时间', value: 'tdr.create_date' },
+      { name: '浏览量', value: 'visits' },
+      { name: '申请量', value: 'applyCount' },
+      { name: '收藏量', value: 'collectCount' },
+      { name: '评分', value: 'score' },
+    ])
+    const findComponentName = (list, name) => {
+      if (list.infoList) {
+        return list.infoList.find((item) => {
+          if (item.attrType === '组件类型') {
+            return item.attrValue === name
+          }
+        })
+      }
+    }
+    const selData = ref('total')
+    const flag = ref(true)
+    // userId
+    const userId = ref('')
+    getUser().then((res) => {
+      console.log('getUser============>', res)
+      userId.value = res.data.data.id
+    })
+    const resultList = [1, 2, 3, 4]
+    const router = useRouter()
+    const cardType = router.currentRoute.value.query.select
+    const onSearch = (searchValue) => {
+      console.log('use value', searchValue)
+      console.log('or use this.value', searchValue.value)
+    }
+
+    function toView(type, item) {
+      if (type === 'apply') {
+        // window.open(newpage.href, '_blank')
+        router.push({
+          path: '/apply',
+          query: {
+            name: [item.name],
+            resourceId: [item.id],
+          },
+        })
+      } else {
+        console.log(
+          '111111111111111111===========>',
+          router,
+          props.selectCardsname
+        )
+        router.push({
+          path: '/details',
+          query: {
+            id: item.id,
+          },
+        })
+      }
+    }
+    // 加入申购车
+    const addShoppingCart = (item, index) => {
+      console.log('item===============>', item)
+      mybus.emit('changeSelcted', index)
+      if (flag.value && item.id) {
+        flag.value = false
+        sgcInsert({
+          delFlag: '0',
+          resourceId: item.id,
+          // userId: userId.value,
+        }).then((res) => {
+          console.log(res)
+          message.success('添加申购车成功！')
+          mybus.emit('getSgcNum')
+          flag.value = true
+        })
+      }
+      shoppingKey.value++
+      // 查询申购车中已有id,用于过滤图标
+    }
+    // 添加收藏
+    const addCollect = (item) => {
+      console.log('收藏===============>', item, flag.value)
+      if (flag.value && item.id) {
+        flag.value = false
+        if (item.isCollect == 'true') {
+          scDel([item.id]).then((res) => {
+            if (res.data.msg === 'success') {
+              message.success('取消成功')
+              item.isCollect = 'false'
+              item.collectCount--
+              flag.value = true
+              console.log('收藏2===============>', res.data, flag.value)
+            }
+          })
+        } else {
+          scInsert([
+            {
+              resourceId: item.id,
+            },
+          ]).then((res) => {
+            if (res.data.msg === 'success') {
+              message.success('添加收藏成功！')
+              item.isCollect = 'true'
+              item.collectCount++
+              flag.value = true
+              console.log('收藏2===============>', res.data, flag.value)
+            }
+          })
         }
       }
-      // 更换查询条件
-      const changeCondition = (val) => {
-        selData.value = selData.value == val ? 'total' : val
-        const orderType = selData.value == val ? 'ASC' : 'DESC'
-        mybus.emit('changeCondition', {
-          orderField: val,
-          orderType: orderType,
-        })
-        console.log('选择===========》', val, selData.value)
-      }
-      mybus.on('chongzhi', () => {
-        selData.value = 'total'
+    }
+    // 更换查询条件
+    const changeCondition = (val) => {
+      selData.value = selData.value == val ? 'total' : val
+      const orderType = selData.value == val ? 'ASC' : 'DESC'
+      mybus.emit('changeCondition', {
+        orderField: val,
+        orderType: orderType,
       })
-      return {
-        onSearch,
-        resultList,
-        toView,
-        addShoppingCart,
-        changeCondition,
-        selData,
-        selList,
-        addCollect,
-        cardType,
-        findComponentName,
-        shoppingKey,
-      }
-    },
-    beforeUnmount() {
-      mybus.off('chongzhi')
-      mybus.emit('changeSelcted')
-    },
-  }
+      console.log('选择===========》', val, selData.value)
+    }
+    mybus.on('chongzhi', () => {
+      selData.value = 'total'
+    })
+
+    // 算法对比
+    const goComparePk = (item) => {
+      router.push({
+        path: '/algorithmCompare',
+        query: {
+          name: [item.name],
+          resourceId: [item.id],
+        },
+      })
+    }
+
+    return {
+      onSearch,
+      resultList,
+      toView,
+      addShoppingCart,
+      changeCondition,
+      selData,
+      selList,
+      addCollect,
+      cardType,
+      findComponentName,
+      shoppingKey,
+      goComparePk,
+    }
+  },
+  beforeUnmount() {
+    mybus.off('chongzhi')
+    mybus.emit('changeSelcted')
+  },
+}
 </script>
 
 <style scoped lang="less">
-  #search-result-list-container {
-    width: 1088px;
-    padding: 0 20px;
-    background: #f3f5f9;
-    .detail-content {
-      // 超出
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 130px;
-      display: inline-block;
+#search-result-list-container {
+  width: 1088px;
+  padding: 0 20px;
+  background: #f3f5f9;
+
+  .detail-content {
+    // 超出
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 130px;
+    display: inline-block;
+  }
+
+  .shai-xuan {
+    width: 1047px;
+    height: 36px;
+    // margin: 11px 0 20px;
+    // background: #e5f2ff;
+    // padding-left: 20px;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .circle {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background-color: #0087ff;
+      text-align: center;
+      color: #fff;
+      line-height: 16px;
+      margin-right: 21px;
     }
-    .shai-xuan {
-      width: 1047px;
-      height: 36px;
-      // margin: 11px 0 20px;
-      // background: #e5f2ff;
-      // padding-left: 20px;
-      display: flex;
-      align-items: center;
-      position: relative;
-      .circle {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background-color: #0087ff;
-        text-align: center;
-        color: #fff;
-        line-height: 16px;
-        margin-right: 21px;
-      }
-      .result {
-        font-size: 14px;
-        font-weight: 500;
-        color: #212121;
-        span {
-          font-size: 18px;
-          color: #0087ff;
-        }
-      }
-      .condition {
-        position: absolute;
-        right: 20px;
-        top: 10px;
-        ul li {
-          list-style-type: none;
-        }
-        ul {
-          display: flex;
-          li {
-            width: 90px;
-            height: 12px;
-            text-align: center;
-            cursor: pointer;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            .arrow {
-              display: inline-block;
-              width: 12px;
-              height: 12px;
-              background: url('~@/assets/newHome/arrow.png');
-              margin-left: 10px;
-            }
-            .down {
-              background: url('~@/assets/newHome/down.png');
-              margin-top: 6px;
-            }
-          }
-        }
+
+    .result {
+      font-size: 14px;
+      font-weight: 500;
+      color: #212121;
+
+      span {
+        font-size: 18px;
+        color: #0087ff;
       }
     }
-    .result-list {
-      width: 1048px;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      border-bottom: 1px rgba(150, 144, 144, 0.3) solid;
-      border-top: 1px rgba(150, 144, 144, 0.3) solid;
-      padding: 10px 0;
-      .item {
-        width: 100%;
-        margin-top: 10px;
+
+    .condition {
+      position: absolute;
+      right: 20px;
+      top: 10px;
+
+      ul li {
+        list-style-type: none;
+      }
+
+      ul {
         display: flex;
-        .left {
-          display: inline-block;
-          width: 120px;
-          height: 110px;
-          margin-right: 16px;
-        }
-        .right {
-          width: 100%;
-        }
-        .yyzy {
-          background: url('~@/assets/home/yyzy-bg.png') no-repeat;
-          background-size: 120px 110px;
-        }
-        .znsf {
-          background: url('~@/assets/home/znsf-bg.png') no-repeat;
-          background-size: 120px 110px;
-        }
-        .gis {
-          background: url('~@/assets/home/gis-bg.png') no-repeat;
-          background-size: 120px 110px;
-        }
-        .header {
+
+        li {
+          width: 90px;
+          height: 12px;
+          text-align: center;
+          cursor: pointer;
           display: flex;
-          justify-content: space-between;
+          justify-content: center;
           align-items: center;
-          margin: 0 10px 0 0;
-          .header-right {
-            display: flex;
-            font-size: 14px;
-            color: #212121;
-            span {
-              font-size: 14px;
-              color: #212121;
-            }
-            div {
-              margin-right: 24px;
-            }
+
+          .arrow {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            background: url('~@/assets/newHome/arrow.png');
+            margin-left: 10px;
           }
-          .header-right:last-child {
-            div {
-              margin-right: 16px;
-            }
-          }
-          span {
-            font-size: 20px;
-            font-weight: 600;
-            // color: #0087ff;
+
+          .down {
+            background: url('~@/assets/newHome/down.png');
+            margin-top: 6px;
           }
         }
-        .dec {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          // white-space: nowrap;
-          color: #0058e1;
-          display: flex;
-          margin-top: 10px;
-          div {
-            margin-right: 10px;
-            background: rgba(0, 88, 225, 0.1);
-            padding-left: 10px;
-            padding-right: 10px;
-          }
-          div:nth-child(3) {
-            max-width: 200px;
-            display: -webkit-box;
-            /*设置为弹性盒子*/
-            -webkit-line-clamp: 1;
-            /*最多显示3行*/
-            overflow: hidden;
-            /*超出隐藏*/
-            text-overflow: ellipsis;
-            /*超出显示为省略号*/
-            -webkit-box-orient: vertical;
-          }
-        }
-        .btn {
-          display: flex;
-          justify-content: space-between;
-          font-size: 14px;
-          margin: 5px 0;
-          // .left {
-          //   width: 600px;
-          //   display: flex;
-          //   justify-content: space-between;
-          //   flex-wrap: wrap;
-          //   & > div {
-          //     width: 300px;
-          //     & > span {
-          //       color: #0087ff;
-          //       font-weight: 600;
-          //     }
-          //   }
-          // }
-          .right {
-            flex: 1;
-            display: flex;
-            justify-content: flex-end;
-            margin: 0 10px;
-            align-items: center;
-            .shopping {
-              span {
-                display: inline-block;
-                height: 32px;
-                width: 32px;
-                margin-right: 10px;
-                margin-top: 5px;
-              }
-              .shopping-on {
-                background: url('~@/assets/newHome/shopping-on.png');
-                cursor: pointer;
-              }
-              .shopping-down {
-                background: url('~@/assets/newHome/shopping-down.png');
-              }
-            }
-            .sc {
-              // margin-top: 4px;
-              cursor: pointer;
-              display: flex;
-              align-items: center;
-              .sc-down {
-                display: inline-block;
-                height: 32px;
-                width: 32px;
-                background: url('~@/assets/newHome/sc-down.png');
-              }
-              .sc-on {
-                display: inline-block;
-                height: 32px;
-                width: 32px;
-                background: url('~@/assets/newHome/sc-on.png');
-              }
-            }
-            .ant-btn {
-              background: transparent;
-              background: #0058e1;
-              color: white;
-              width: 80px;
-              height: 32px;
-              font-weight: 600;
-              border-radius: 2px;
-              text-align: center;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-left: 10px;
-            }
-            .ant-btn:last-child {
-              background: #0058e1;
-              color: white;
-            }
-          }
-        }
-        .bottom {
-          display: flex;
-          justify-content: space-between;
-          margin-top: 10px;
-          align-items: center;
-          & > div {
-            display: flex;
-            align-items: center;
-            & > div {
-              margin: 0 10px;
-            }
-          }
-          .pingfen {
-            :deep(span) {
-              display: flex;
-              align-items: center;
-              :deep(ul) {
-                display: flex;
-                align-items: center;
-                :deep(.ant-rate-star:not(:last-child)) {
-                  margin-right: 4px;
-                }
-              }
-            }
-          }
-        }
-      }
-      .item:nth-of-type(1) {
-        margin-top: 0;
       }
     }
   }
+
+  .result-list {
+    width: 1048px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    border-bottom: 1px rgba(150, 144, 144, 0.3) solid;
+    border-top: 1px rgba(150, 144, 144, 0.3) solid;
+    padding: 10px 0;
+
+    .item {
+      width: 100%;
+      margin-top: 10px;
+      display: flex;
+
+      .left {
+        display: inline-block;
+        width: 120px;
+        height: 110px;
+        margin-right: 16px;
+      }
+
+      .right {
+        width: 100%;
+      }
+
+      .yyzy {
+        background: url('~@/assets/home/yyzy-bg.png') no-repeat;
+        background-size: 120px 110px;
+      }
+
+      .znsf {
+        background: url('~@/assets/home/znsf-bg.png') no-repeat;
+        background-size: 120px 110px;
+      }
+
+      .gis {
+        background: url('~@/assets/home/gis-bg.png') no-repeat;
+        background-size: 120px 110px;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 10px 0 0;
+
+        .header-right {
+          display: flex;
+          font-size: 14px;
+          color: #212121;
+
+          span {
+            font-size: 14px;
+            color: #212121;
+          }
+
+          div {
+            margin-right: 24px;
+          }
+        }
+
+        .header-right:last-child {
+          div {
+            margin-right: 16px;
+          }
+        }
+
+        span {
+          font-size: 20px;
+          font-weight: 600;
+          // color: #0087ff;
+        }
+      }
+
+      .dec {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        // white-space: nowrap;
+        color: #0058e1;
+        display: flex;
+        margin-top: 10px;
+
+        div {
+          margin-right: 10px;
+          background: rgba(0, 88, 225, 0.1);
+          padding-left: 10px;
+          padding-right: 10px;
+        }
+
+        div:nth-child(3) {
+          max-width: 200px;
+          display: -webkit-box;
+          /*设置为弹性盒子*/
+          -webkit-line-clamp: 1;
+          /*最多显示3行*/
+          overflow: hidden;
+          /*超出隐藏*/
+          text-overflow: ellipsis;
+          /*超出显示为省略号*/
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      .btn {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+        margin: 5px 0;
+
+        // .left {
+        //   width: 600px;
+        //   display: flex;
+        //   justify-content: space-between;
+        //   flex-wrap: wrap;
+        //   & > div {
+        //     width: 300px;
+        //     & > span {
+        //       color: #0087ff;
+        //       font-weight: 600;
+        //     }
+        //   }
+        // }
+        .right {
+          flex: 1;
+          display: flex;
+          justify-content: flex-end;
+          margin: 0 10px;
+          align-items: center;
+
+          .shopping {
+            span {
+              display: inline-block;
+              height: 32px;
+              width: 32px;
+              margin-right: 10px;
+              margin-top: 5px;
+            }
+
+            .shopping-on {
+              background: url('~@/assets/newHome/shopping-on.png');
+              cursor: pointer;
+            }
+
+            .shopping-down {
+              background: url('~@/assets/newHome/shopping-down.png');
+            }
+          }
+
+          .pk-on {
+            display: inline-block;
+            height: 32px;
+            width: 32px;
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-top: 5px;
+            background: url('~@/assets/newHome/pk-on.png');
+            cursor: pointer;
+          }
+
+          .sc {
+            // margin-top: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+
+            .sc-down {
+              display: inline-block;
+              height: 32px;
+              width: 32px;
+              background: url('~@/assets/newHome/sc-down.png');
+            }
+
+            .sc-on {
+              display: inline-block;
+              height: 32px;
+              width: 32px;
+              background: url('~@/assets/newHome/sc-on.png');
+            }
+          }
+
+          .ant-btn {
+            background: transparent;
+            background: #0058e1;
+            color: white;
+            width: 80px;
+            height: 32px;
+            font-weight: 600;
+            border-radius: 2px;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 10px;
+          }
+
+          .ant-btn:last-child {
+            background: #0058e1;
+            color: white;
+          }
+        }
+      }
+
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        align-items: center;
+
+        &>div {
+          display: flex;
+          align-items: center;
+
+          &>div {
+            margin: 0 10px;
+          }
+        }
+
+        .pingfen {
+          :deep(span) {
+            display: flex;
+            align-items: center;
+
+            :deep(ul) {
+              display: flex;
+              align-items: center;
+
+              :deep(.ant-rate-star:not(:last-child)) {
+                margin-right: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .item:nth-of-type(1) {
+      margin-top: 0;
+    }
+  }
+}
 </style>