all

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">
@@ -38,33 +38,48 @@
                   <div v-if="typeRadio=== 'Check'" class="d-count" :style="headerLabel">{{checkCount.toLocaleString()}}种</div>
                 </div>
                 <div>
-                  <div class="select-container">
+                  <!-- ✅ 替换开始：自定义下拉选择器（使用 div 实现） -->
-                    <select name="options" id="mySelect">
+                  <div class="select-container" @click="toggleDropdown">
-                      <option value="1">疾病</option>
+                    <!-- 当前选中项显示 -->
-                      <option value="2">药品</option>
+                    <div class="select-display">
-                      <option value="3">检查</option>
+                      <span style="color: #000;    background: rgb(255 255 255 / 64%);
-                    </select>
+    padding: 2px 13px;
-                    <img src="../assets/下拉.png" style="width: 32px"/>
+    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>
-                <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>
+              </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;
+  cursor: pointer;
-  display: flex;
+  user-select: none;
-  align-items: center;
 }
 
-select {
+.select-display {
-  padding: 4px 12px;
+  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>