From 8eb13bbf74df6bb07660ba067c841a11e2abc406 Mon Sep 17 00:00:00 2001
From: hanyuqing <1106611654@qq.com>
Date: Tue, 6 Jan 2026 16:33:02 +0800
Subject: [PATCH] all

---
 vue/src/assets/下拉11.png  | Bin 0 -> 646 bytes
 vue/src/system/GraphDemo.vue | 150 +++++++++++++++++++++++++++++++------------
 2 files changed, 109 insertions(+), 41 deletions(-)
 create mode 100644 vue/src/assets/下拉11.png

diff --git a/vue/src/assets/下拉11.png b/vue/src/assets/下拉11.png
new file mode 100644
index 0000000000000000000000000000000000000000..453b4b9492fbdbe50324c08e8a3fe777714ca417
GIT binary patch
literal 646
zcmV;10(t$3P)<h;3K|Lk000e1NJLTq001BW0015c1^@s6O$r<-0006_Nkl<ZcwWty
zO=}uK7{_x;XnM+bhz%k=WLxYdC5VCK3)FxR$jc{)_TJ=TubSd|v=9jH_96ixlH3xo
z2W_t<7umjmr41!p^`vX(A9lC1PiMF5Mq>tku+BU$|8d@@rdUx`by`F&mz%Mu*Xy&L
zPAA&y^)~zc{+?kNc}CGBk2<u$2DZE}jcbA2H-$Fv&YGspvA{1_5}9%6lLCC;>m@`e
zfOqJ2yU)#@(gc3VBZixZe*{=YilRJVJ=hTh3<P2!CKcfjK$7p$Ah!iEsR*F}X1GP2
zM+J+$Efio?vhiA?PNN1ntb7gun6buiGd(D>wK^OE%%w(+#{zOW1XQclhsNFX-a<xB
zTL5-1fzen&PFuh@XTBTAX$xQ#uc(0tNqYJtlX+dE^*p7Lau$g^{zdC4I6HU&zQ(^?
zE?2|h$hD%Vr?d^!YVVI17Q)vD2XD@4n*f;?fD?@x2+3x%7opH29m)9mX0!QDlAiob
zrP3d%j|;^>0zf+b^26eybk%CL6#Q<t+efij{A(hyeo1XTa0u`<1UyI<kFR`YMNK9*
zKC$mFx~?BlI}iR2fqB882A-hTtE+3;{CwzlH2Unj^>6saF$se%!$zY~US5uUt5hl{
zwC#U5mf^%VB6BM)P@^&8+=?fD7~PBG_zo{5_9fL8K(1ul)M-?>UdisorBondhXx4>
zV$tM60lWxcK1^;iG3B8iCL$5$(=1^Ow@=_{mI(ATa}&ZnPPf=TzK`Aw27|W%->5?y
gY_Q3ACFTYE0d=fb`W4^*Hvj+t07*qoM6N<$f`tJhJ^%m!

literal 0
HcmV?d00001

diff --git a/vue/src/system/GraphDemo.vue b/vue/src/system/GraphDemo.vue
index d1d3c64..ccb9341 100644
--- a/vue/src/system/GraphDemo.vue
+++ b/vue/src/system/GraphDemo.vue
@@ -8,7 +8,7 @@
           <header class="top-nav">
             <div class="search-container">
               <input v-model="searchKeyword" type="text" placeholder="搜索......" @keydown.enter="search"/>
-              <img src="@/assets/搜索.png" class="search-btn" @click="search"/>
+              <img src="@/assets/搜索.png" style="cursor: pointer" class="search-btn" @click="search"/>
             </div>
             <div class="legend-box">
               <div v-for="(item, index) in legendItems" :key="index" class="legend-item">
@@ -37,34 +37,49 @@
                   <div v-if="typeRadio=== 'Drug'" class="d-count" :style="headerLabel">{{ drugCount.toLocaleString() }}种</div>
                   <div v-if="typeRadio=== 'Check'" class="d-count" :style="headerLabel">{{checkCount.toLocaleString()}}种</div>
                 </div>
-                <div >
-                  <div class="select-container">
-                    <select name="options" id="mySelect">
-                      <option value="1">疾病</option>
-                      <option value="2">药品</option>
-                      <option value="3">检查</option>
-                    </select>
-                    <img src="../assets/下拉.png" style="width: 32px"/>
+                <div>
+                  <!-- ✅ 替换开始：自定义下拉选择器（使用 div 实现） -->
+                  <div class="select-container" @click="toggleDropdown">
+                    <!-- 当前选中项显示 -->
+                    <div class="select-display">
+                      <span style="color: #000;    background: rgb(255 255 255 / 64%);
+    padding: 2px 13px;
+    border-radius: 15px;">{{ currentTypeLabel }}</span>
+                      <img src="../assets/下拉11.png" class="dropdown-icon" />
+                    </div>
+
+                    <!-- 下拉菜单 -->
+                    <div v-show="isDropdownOpen" class="select-dropdown">
+                      <div
+                          v-for="item in typeOptions"
+                          :key="item.value"
+                          class="select-option"
+                          @click.stop="selectType(item.value)"
+                      >
+                        {{ item.label }}
+                      </div>
+                    </div>
                   </div>
+                  <!-- ✅ 替换结束 -->
                 </div>
               </div>
-              <div>
-                <el-radio-group v-model="typeRadio" @change="changeTree">
-                  <el-radio
-                      value="Disease"
-                      :class="{'radio-disease': typeRadio === 'Disease'}"
-                  >疾病</el-radio>
-                  <el-radio
-                      value="Drug"
-                      :class="{'radio-drug': typeRadio === 'Drug'}"
-                  >药品</el-radio>
-                  <el-radio
-                      value="Check"
-                      :class="{'radio-check': typeRadio === 'Check'}"
-                  >检查</el-radio>
-                </el-radio-group>
-
-              </div>
+<!--              <div>-->
+<!--                <el-radio-group v-model="typeRadio" @change="changeTree">-->
+<!--                  <el-radio-->
+<!--                      value="Disease"-->
+<!--                      :class="{'radio-disease': typeRadio === 'Disease'}"-->
+<!--                  >疾病</el-radio>-->
+<!--                  <el-radio-->
+<!--                      value="Drug"-->
+<!--                      :class="{'radio-drug': typeRadio === 'Drug'}"-->
+<!--                  >药品</el-radio>-->
+<!--                  <el-radio-->
+<!--                      value="Check"-->
+<!--                      :class="{'radio-check': typeRadio === 'Check'}"-->
+<!--                  >检查</el-radio>-->
+<!--                </el-radio-group>-->
+
+<!--              </div>-->
               <div v-if="typeRadio === 'Disease'">
                 <el-radio-group v-model="DiseaseRadio" @change="changeTree">
                   <el-radio
@@ -211,10 +226,20 @@ export default {
       },
       searchKeyword:"",
       drugSubjectTree:[],
-      DrugRadio:"Subject"
+      DrugRadio:"Subject",
+      isDropdownOpen: false,
+      typeOptions: [
+        { value: 'Disease', label: '疾病' },
+        { value: 'Drug', label: '药品' },
+        { value: 'Check', label: '检查' }
+      ]
     }
   },
   computed: {
+    currentTypeLabel() {
+      const option = this.typeOptions.find(opt => opt.value === this.typeRadio);
+      return option ? option.label : '请选择';
+    },
     // 根据当前选择的类型返回不同的背景颜色
     headerStyle() {
       let backgroundColor = '#fff'; // 默认颜色
@@ -359,6 +384,19 @@ export default {
     edgeFontFamily: 'updateAllEdges',
   },
   methods: {
+    // 切换下拉菜单显隐
+    toggleDropdown() {
+      this.isDropdownOpen = !this.isDropdownOpen;
+    },
+
+// 选择类型并关闭下拉
+    selectType(value) {
+      if (this.typeRadio !== value) {
+        this.typeRadio = value;
+        this.changeTree(); // 触发数据更新
+      }
+      this.isDropdownOpen = false;
+    },
     search() {
       const keyword = this.searchKeyword?.trim();
       if (!keyword) {
@@ -1301,8 +1339,13 @@ button:hover {
 
 .search-btn {
   width: 16px;
-}
 
+}
+/*.search-btn:hover {
+ background-color: rgba(34, 101, 244, 0.64);
+  border-radius: 50%;
+  padding: 2px 0;
+}*/
 .legend-box {
   display: flex;
   gap: 20px;
@@ -1467,25 +1510,50 @@ button:hover {
 /deep/ .radio-check .el-radio__input.is-checked+.el-radio__label {
   color: #1890ff;
 }
+/* 自定义下拉样式 */
 .select-container {
   position: relative;
-  text-align: right;
-  display: flex;
-  align-items: center;
+  cursor: pointer;
+  user-select: none;
 }
 
-select {
-  padding: 4px 12px;
+.select-display {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 25px;
   border-radius: 20px;
-  background-color: rgba(255, 255, 255);
   font-size: 12px;
-  appearance: none; /* 移除默认下拉箭头 */
-  -webkit-appearance: none;
-  cursor: pointer;
-  height: 25px;
-  border: none;
 }
-select:focus {
-  outline: none;
+
+.dropdown-icon {
+  width: 23px;
+  margin-left: 6px;
 }
+
+.select-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: rgba(255, 255, 255, 0.64);
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 10;
+  min-width: 80px;
+  color: #000;
+  padding: 3px 0px;
+}
+
+.select-option {
+  padding: 7px 12px;
+  font-size: 13px;
+  text-align: center;
+}
+
+.select-option:hover {
+  background-color: #f5f7fa;
+}
+
 </style>
\ No newline at end of file