From 587d25c4a1d1a5d240e7750aa0c043a702a737d5 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期四, 18 七月 2024 10:47:30 +0800
Subject: [PATCH] 1

---
 src/pages/character/index.vue |   60 ++++++++++++++++++++++++++++++++++++------------------------
 1 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/pages/character/index.vue b/src/pages/character/index.vue
index fded48b..676fcff 100644
--- a/src/pages/character/index.vue
+++ b/src/pages/character/index.vue
@@ -2,9 +2,9 @@
   <view
     style="width: 100%; height: 100%; display: flex; flex-direction: column"
   >
-    <headNav idIndex="1" text="涓尰浜虹墿鏁版嵁搴�" />
+    <headNav idIndex="1" text="鍘嗕唬浜虹墿" />
     <!-- 楂樼骇鎼滅储 -->
-    <view style="margin: 0.35rem 0 0.16rem 0">
+    <view style="margin-top: 0.1rem">
       <advancedSearch
         @onSearch="onSearch"
         @onSubmit="onSubmit"
@@ -19,21 +19,22 @@
       鐑棬鎼滅储锛�
       <ul class="flex" style="margin-right: 10rpx">
         <li
-          @click="onSearch({ text: item })"
-          class="cursor"
-          v-for="item in hotKeyList"
+          @click="onSearch({ text: item }, index)"
+          :class="{ cursor: true, active: hotAciveIndex === index }"
+          v-for="(item, index) in hotKeyList"
           :key="item"
         >
           {{ item }}
         </li>
       </ul>
     </view>
-    <view  style="margin-left: 0.2rem">涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�</view>
+    <view style="margin-left: 0.2rem">涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�</view>
     <!-- 鍏崇郴琛ㄥ湴鍥� -->
     <view
       id="relation"
-      style="margin-top: 0.2rem; flex: 1; width: 100%; position: relative"
-      ><div
+      style="margin-top: 0.1rem; flex: 1; width: 100%; position: relative"
+    >
+      <div
         v-if="!loading && relationships.length == 0"
         style="
           position: absolute;
@@ -46,8 +47,8 @@
         "
       >
         鏆傛棤鐩稿叧鏁版嵁
-      </div></view
-    >
+      </div>
+    </view>
 
     <!-- 鏈濅唬 -->
     <!-- <view
@@ -105,6 +106,7 @@
   data() {
     return {
       loading: true,
+      hotAciveIndex: "",
       // echarts鏁版嵁
       nodes: [],
       // echarts涓よ�呯殑鍏崇郴
@@ -170,7 +172,7 @@
           },
           {
             type: "input",
-            label: "鏃堕棿",
+            label: "鏃舵湡",
             name: "period",
             value: ""
           },
@@ -282,10 +284,10 @@
   },
   mounted() {
     this.getData();
-    this.echartsArr();
+    // this.echartsArr();
     this.hotSearch();
     // 鐩戝惉绐楀彛澶у皬鍙樺寲
-    // window.addEventListener("resize", this.relation);
+    window.addEventListener("resize", this.relation);
     this.innt();
   },
   onLoad(options) {
@@ -293,6 +295,7 @@
   },
   methods: {
     getData(key) {
+      this.loading = true;
       getFuzzySearch({
         keyword: key ? key : this.searchKey ? this.searchKey : ""
       }).then((res) => {
@@ -307,13 +310,13 @@
               (node) => node.id === item.identifier2 && node.name === item.name2
             );
             // 璇佹槑涓嶅瓨鍦�
-            if (exists1 !== true) {
+            if (item.name1 && exists1 !== true) {
               this.nodes.push({
                 name: item.name1,
                 id: item.identifier1
               });
             }
-            if (exists2 !== true) {
+            if (item.name2 && exists2 !== true) {
               this.nodes.push({
                 name: item.name2,
                 id: item.identifier2
@@ -345,17 +348,17 @@
       let Distance = 10;
       // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
       if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
-        FontSize = 28;
+        FontSize = 20;
         BorderWidth = 5;
-        SymbolSize = 100;
+        SymbolSize = 90;
         Distance = 33;
       } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
-        FontSize = 28;
+        FontSize = 18;
         BorderWidth = 4;
-        SymbolSize = 90;
+        SymbolSize = 80;
         Distance = 22;
       } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
-        FontSize = 18;
+        FontSize = 14;
         BorderWidth = 4;
         SymbolSize = 70;
         Distance = 22;
@@ -408,7 +411,6 @@
           }
         };
       });
-
       var option;
       option = {
         title: {
@@ -461,8 +463,8 @@
               }
             },
             force: {
-              initLayout: null,
-              // gravity: 0
+              // layoutAnimation: false,
+              // friction: 1,
               repulsion: 800,
               edgeLength: 400
             }
@@ -481,7 +483,13 @@
       option && myChart.setOption(option);
     },
     // 鍩虹鎼滅储
-    onSearch(val) {
+    onSearch(val, index) {
+      if (index !== undefined) {
+        this.searchKey = "";
+        this.hotAciveIndex = index;
+      } else {
+        this.hotAciveIndex = "";
+      }
       // this.searchKey = val.text;
       this.getData(val.text);
     },
@@ -591,6 +599,10 @@
     color: #244a7b;
     margin: 0 0.1rem;
     color: #244a7b;
+    &.active{
+      color: #027EDC;
+      font-weight: bold;
+    }
   }
 }
 </style>

--
Gitblit v1.9.1