From 0326804dd7bf985d1912abbab10dec84923acef6 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 12 七月 2024 18:02:15 +0800
Subject: [PATCH] 1

---
 src/pages/inherit/index.vue |  112 +++++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 90 insertions(+), 22 deletions(-)

diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue
index 64c5077..998d145 100644
--- a/src/pages/inherit/index.vue
+++ b/src/pages/inherit/index.vue
@@ -10,7 +10,37 @@
 
     <div class="filterBox font-family">
       <div class="searchBox">
-        <input type="text" v-model="keyword" placeholder="璇疯緭鍏ュ叧閿瓧" />
+        <input
+          type="text"
+          v-model="keyword"
+          @confirm="search"
+          placeholder="璇疯緭鍏ュ叧閿瓧"
+          style="padding-right: 54px; box-sizing: border-box"
+        />
+        <span
+          class="cleanupBtn"
+          v-if="keyword"
+          @click="keyword = ''"
+          style="
+            position: absolute;
+            top: 50%;
+            margin-top: -10px;
+            right: 84px;
+            color: #fff;
+            z-index: 2;
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            background-color: #a5a5a5;
+            font-weight: bold;
+            border-radius: 50%;
+            font-size: 12px;
+            cursor: pointer;
+          "
+          >鉁�</span
+        >
         <button @click="search">鎼滅储</button>
       </div>
       <div class="dynasty">
@@ -65,7 +95,7 @@
           </div>
         </div>
       </div>
-      <div style="padding-left: 0.5rem; margin-top: 20px">
+      <div style="padding-left: 0.5rem; margin-top: 0.1rem">
         鍏� {{ totalCount }}涓笘鍖�
       </div>
     </div>
@@ -92,7 +122,13 @@
         :style="{ top: toolTop, left: toolLeft }"
       >
         <div class="toolItem" @click="gotoDetail(1)">涓汉淇℃伅</div>
-        <div class="toolItem" @click="gotoDetail(2)">涓栧尰鏂囧寲</div>
+        <div
+          class="toolItem"
+          style="position: relative; top: -40px"
+          @click="gotoDetail(2)"
+        >
+          涓栧尰鏂囧寲
+        </div>
         <div class="toolItem" @click="gotoDetail(3)">涓栧尰浼犳壙</div>
       </div>
     </div>
@@ -258,29 +294,59 @@
               friction: 0.1,
               repulsion: 500,
               edgeLength: 6
+            },
+            selectedMode: "single",
+            select: {
+              itemStyle: {
+                color: "#e8f3ff",
+                borderColor: "#284e74",
+                borderWidth: "3"
+              }
             }
           }
         ]
       };
+      let selectData = [];
       //杩涜娓叉煋
       myChart.setOption(option);
-      myChart.getZr().on("click", (params) => {
-        if (!params.target) {
+      // myChart.getZr().on("click", (params) => {
+      //   console.log(params);
+      //   console.log(selectData);
+      //   if (!params.target) {
+      //     this.showTool = false;
+      //   }
+      // });
+      myChart.on("click", (params) => {
+        if (selectData.length > 0) {
+          let x = params.event.target.transform[4];
+          let y = params.event.target.transform[5];
+          if (params.componentType === "series") {
+            this.showTool = true;
+            this.toolTop = y - 70 + "px";
+            this.toolLeft = x - 163 + "px";
+            this.toolInfo = {
+              id: params.data.identifier,
+              name: encodeURIComponent(params.data.name)
+            };
+          } else {
+            this.showTool = false;
+          }
+        }
+      });
+      myChart.on("selectchanged", (params) => {
+        if (params.fromAction == "select") {
+          selectData = params.selected[0].dataIndex;
+        } else {
+          selectData = [];
           this.showTool = false;
         }
       });
-      myChart.on("click", (params) => {
-        if (params.componentType === "series") {
-          this.showTool = true;
-          this.toolTop = params.event.offsetY + "px";
-          this.toolLeft = params.event.offsetX + "px";
-          this.toolInfo = {
-            id: params.data.identifier,
-            name: encodeURIComponent(params.data.name)
-          };
-        } else {
-          this.showTool = false;
-        }
+      myChart.on("graphroam", (params) => {
+        this.showTool = false;
+        myChart.dispatchAction({
+          type: "unselect",
+          dataIndex: selectData
+        });
       });
     },
     gotoDetail(type) {
@@ -391,6 +457,7 @@
   font-size: 0.12rem;
   cursor: pointer;
   background-color: #fff;
+  display: inline-block;
 }
 .toolItem:hover {
   background-color: #efefef;
@@ -411,6 +478,7 @@
   align-items: center;
   margin: 0 auto;
   margin-top: 0.2rem;
+  position: relative;
 }
 
 .searchBox > input {
@@ -433,12 +501,12 @@
   display: flex;
   margin-top: 0.2rem;
   width: 100%;
-  padding: 0.1rem 0.5rem;
+  padding: 0 0.5rem;
 }
 .condition {
   display: flex;
   width: 100%;
-  padding: 0.1rem 0.5rem;
+  padding: 0 0.5rem;
 }
 .filterList {
   flex: 1;
@@ -451,7 +519,6 @@
   box-shadow: 1px 1px 5px #888888;
   align-items: center;
   justify-content: center;
-  width: 1.4rem;
   height: 0.3rem;
   margin-left: 0.2rem;
   border-radius: 0.13rem;
@@ -459,13 +526,14 @@
   margin-top: 0.02rem;
   margin-bottom: 0.1rem;
   cursor: pointer;
+  padding: 0 0.1rem;
 }
 .conditionItem {
   display: flex;
   box-shadow: 1px 1px 5px #888888;
   align-items: center;
   justify-content: center;
-  width: 1.6rem;
+  padding: 0 0.1rem;
   height: 0.3rem;
   float: left;
   margin-left: 0.2rem;
@@ -486,7 +554,7 @@
 }
 .filterText {
   margin-left: 10px;
-  font-size: 0.16rem;
+  font-size: 0.14rem;
 }
 .fontColor {
   color: #827e44 !important;

--
Gitblit v1.9.1