首页的顶部优化1

src/views/cet/universityDashboard.vue

@@ -12,14 +12,46 @@
             <span style="color: red; font-size: 18px">{{ topEntrydate }}</span>
             <span style="font-size: 15px"> 级数据</span>
           </div> -->
+          <!--<a-cascader v-model:value="collegeMajor" expand-trigger="hover" :options="collegeMajorOptions" change-on-select />-->
+
+          <!-- 主外层容器：包括一级和二级菜单并排 -->
+          <div class="dropdown-wrapper">
+            <div class="dropdown-trigger" @click="toggleDropdown">
+              <span class="trigger-label">{{ selectedLabel || '请选择学院' }}</span>
+              <DownOutlined class="trigger-icon" />
+            </div>
+
+            <div v-if="dropdownVisible" class="dropdown-panel">
+              <!-- 一级菜单独立一列 -->
+              <div class="main-menu">
+                <div class="main-menu-scroll">
+                  <div v-for="item in collegeMajorOptions" :key="item.key" class="menu-item">
+                    <span @click.stop="selectItem(item)">{{ item.label }}</span>
+                    <span v-if="item.children" class="expand-icon" @click.stop="expandSubMenu(item)">
+                      <RightOutlined />
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 二级菜单独立一列 -->
+              <div v-if="subMenuVisible" class="sub-menu">
+                <div class="sub-menu-scroll">
+                  <div v-for="subItem in currentSubMenu" :key="subItem.key" class="menu-item">
+                    <span @click.stop="selectItem(subItem)">{{ subItem.label }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <a-select v-model:value="entrydate" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
+          <a-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
           <div class="stats-container" v-if="total && total > 0">
-            <span>{{ totalName }}总人数：{{ total }}</span>
+            <span style="padding-left: 240px">{{ totalName }}总人数：{{ total }}</span>
             <span>累计通过人数: {{ passNumberBottom }}</span>
             <span>累计总通过率: {{ passRateBottom }}</span>
           </div>
-            <a-cascader v-model:value="collegeMajor" :options="collegeMajorOptions" change-on-select />
-            <a-select v-model:value="entrydate" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
-            <a-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
         </div>
         <!-- <a-button @click=test()>test</a-button> -->
       </template>
@@ -27,9 +59,7 @@
       <a-row :gutter="12">
         <a-col :xl="14">
           <div style="padding-left: 10px; min-height: 200px">
-
+            <a-table size="small" :dataSource="dataSourceCet4" :columns="columns" :pagination="false" bordered :scroll="{ y: 290 }">
-            <a-table size="small" :dataSource="dataSourceCet4" :columns="columns" :pagination="false" bordered
-              :scroll="{ y: 290 }">
               <template #passRateSlot>
                 累计总通过率
                 <a-tooltip :title="'累计通过人数 / ' + totalName + '总人数'" placement="top">
@@ -39,11 +69,10 @@
             </a-table>
           </div>
         </a-col>
-        <a-col :xl="10" >
+        <a-col :xl="10">
           <a-card class="card-with-piechart">
             <div style="width: 100%; height: 200px" class="piechart" id="piechart"> </div>
           </a-card>
-
         </a-col>
       </a-row>
       <!-- <div style="height: 300px;">
@@ -74,16 +103,19 @@
       <!-- </a-row> -->
     </div>
   </div>
-
-
 </template>
 
 <script>
-import { defHttp } from '/@/utils/http/axios';
+  import { defHttp } from '/@/utils/http/axios';
-import * as echarts from 'echarts';
+  import * as echarts from 'echarts';
-import { message } from 'ant-design-vue';
+  import { message } from 'ant-design-vue';
+  import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
 
-export default {
+  export default {
+    components: {
+      DownOutlined,
+      RightOutlined,
+    },
     data() {
       return {
         activeKey: '1',
@@ -98,9 +130,106 @@ export default {
         collegetab2: [],
         collegeMajorOptions: [],
         collegeMajor: [],
-
         loading: false,
         dataSourceCet4: [],
+        dropdownVisible: false,
+        subMenuVisible: false,
+        subSubMenuVisible: false,
+        selectedLabel: '全校',
+        currentSubMenu: [],
+        currentSubSubMenu: [],
+        //测试构造数据
+        //menuData: [
+        //  { key: '1', label: '全校' },
+        //  { key: '2', label: '专升本' },
+        //  {
+        //    key: '3',
+        //    label: '东语学院',
+        //    children: [
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //    ],
+        //  },
+        //  {
+        //    key: '4',
+        //    label: '东语学院',
+        //    children: [
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //    ],
+        //  },
+        //  {
+        //    key: '5',
+        //    label: '东语学院',
+        //    children: [
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //    ],
+        //  },
+        //  {
+        //    key: '6',
+        //    label: '东语学院',
+        //    children: [
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //    ],
+        //  },
+        //  {
+        //    key: '7',
+        //    label: '东语学院',
+        //    children: [
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //    ],
+        //  },
+        //  {
+        //    key: '8',
+        //    label: '东语学院',
+        //    children: [
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //    ],
+        //  },
+        //  {
+        //    key: '9',
+        //    label: '东语学院',
+        //    children: [
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //    ],
+        //  },
+        //  {
+        //    key: '10',
+        //    label: '东语学院',
+        //    children: [
+        //      { key: '3-1', label: '朝鲜语' },
+        //      { key: '3-2', label: '日语' },
+        //      { key: '3-3', label: '阿拉伯语' },
+        //    ],
+        //  },
+        //],
         columns: [
           {
             title: '学年',
@@ -210,9 +339,40 @@ export default {
       // this.allQuery();
       this.getCollegeOptions();
       this.getEntrydate();
-
     },
     methods: {
+      toggleDropdown() {
+        this.dropdownVisible = !this.dropdownVisible;
+        this.subMenuVisible = false;
+        this.subSubMenuVisible = false;
+      },
+      selectItem(item) {
+        // 如果是二级菜单（来自 currentSubMenu），找到它的父级
+        const parent = this.collegeMajorOptions.find((p) => p.children && p.children.some((child) => child.value === item.value));
+        //console.log('1111', parent.label);
+        console.log('2222', this.collegeMajorOptions);
+        if (parent) {
+          this.selectedLabel = `${parent.label} / ${item.label}`;
+          this.collegeMajor[0] = parent.value;
+          this.collegeMajor[1] = item.value;
+        } else {
+          this.selectedLabel = item.label;
+          this.collegeMajor[0] = item.value;
+        }
+        this.dropdownVisible = false;
+        this.subMenuVisible = false;
+        this.subSubMenuVisible = false;
+        console.log('444', this.selectedLabel);
+      },
+      expandSubMenu(item) {
+        this.currentSubMenu = item.children || [];
+        this.subMenuVisible = true;
+        this.subSubMenuVisible = false;
+      },
+      expandSubSubMenu(item) {
+        this.currentSubSubMenu = item.children || [];
+        this.subSubMenuVisible = true;
+      },
       allQuery() {
         this.map1loading = true;
         console.log('查询===========ddddddddddd');
@@ -299,14 +459,12 @@ export default {
         this.entrydateOptions = getEntrydate.entrydates;
 
         const name = ['西语学院'];
-
       },
 
       // 各专业通过率
       async majorPassRate() {
         this.map3loading = true;
         const name = '西语学院';
-
       },
       dataChart(data, tab) {
         let seriesData = [];
@@ -616,7 +774,7 @@ export default {
           // });
           console.log('data', result.data);
         } finally {
-        this.map1loading=false;
+          this.map1loading = false;
           this.$nextTick(() => {
             console.log('调用==============');
             this.dataChart(result.data, query);
@@ -668,6 +826,7 @@ export default {
           this.topCollege = this.collegeMajor[0];
           this.topMajor = major;
           this.topEntrydate = this.entrydate;
+          console.log('55555', this.collegeMajor);
           if (this.college) this.loading = true;
           let params = {
             college: this.collegeMajor[0],
@@ -879,59 +1038,59 @@ export default {
         myChart.setOption(option);
       },
     },
-};
+  };
 </script>
 
 <style lang="less" scoped>
-* {
+  * {
     font-size: 12px;
-}
+  }
 
-::v-deep .ant-card-body {
+  ::v-deep .ant-card-body {
     padding: 4px;
-}
+  }
 
-::v-deep {
+  ::v-deep {
     .ant-table-cell {
       font-size: 12px;
     }
-}
+  }
-.card-with-piechart {
+  .card-with-piechart {
     margin-top: 1px;
     margin-bottom: 20px;
     padding-top: 10px;
-  height:100%; /* 调整高度 */
+    height: 100%; /* 调整高度 */
-}
+  }
-.container {
+  .container {
     display: flex;
     background-color: #fff;
     // padding: 15px;
     padding: 5px 15px;
     border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-}
+  }
 
-.title {
+  .title {
     font-size: 34px;
     color: rgb(8, 8, 8);
     font-weight: bold;
-}
+  }
 
-.stats-container {
+  .stats-container {
-  margin-right:270px;
+    margin-right: 270px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 90px;
     // margin-top: 10px;
-  // padding: 10px;
+    //padding-right: px;
     // background-color: #f8f8f8f8;
     // /* 背景颜色 */
     // border-radius: 12px;
     // /* 圆角边框 */
-}
+  }
 
-.stats-container span {
+  .stats-container span {
     padding: 15px 30px;
     /* 调整内边距 */
     font-size: 15px;
@@ -943,11 +1102,11 @@ export default {
     /* 每个项目占据相同的空间 */
     text-align: center;
     /* 文本居中 */
-  margin: 0 10px;
+    margin: 0 5px;
     /* 调整外边距 */
-}
+  }
 
-.bottom-box {
+  .bottom-box {
     display: flex;
     column-gap: 10px;
     padding: 0 5px;
@@ -961,14 +1120,14 @@ export default {
       position: relative;
       flex: 1;
     }
-}
+  }
 
-.search-row {
+  .search-row {
     display: flex;
     align-items: center;
-}
+  }
 
-.query {
+  .query {
     right: 3%;
     top: 10px;
     position: absolute;
@@ -976,7 +1135,58 @@ export default {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
-  z-index:9999;
+    z-index: 9999;
-}
+  }
+  .dropdown-wrapper {
+    position: relative; /* ✅ 让下拉菜单基于此定位 */
+    display: inline-block;
+  }
+  .dropdown-trigger {
+    width: 160px; /* ✅ 设置选择框宽度 */
+    height: 32px;
+    border: 1px solid #ccc; /* ✅ 添加边框 */
+    padding: 6px 12px;
+    border-radius: 4px;
+    background-color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 
+  .dropdown-panel {
+    position: absolute;
+    top: 100%; /* ✅ 紧贴选择框底部 */
+    left: 0;
+    background: white;
+    border: 1px solid #ddd;
+    z-index: 1000;
+    display: flex;
+  }
+  .main-menu,
+  .sub-menu {
+    min-width: 160px;
+    max-height: 300px; /* ✅ 控制每一级高度 */
+    overflow-y: auto; /* ✅ 各自独立滚动 */
+    overflow-x: hidden;
+    border-right: 1px solid #eee;
+  }
+
+  .menu-item {
+    padding: 6px 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .menu-item:hover {
+    background: #f5f5f5;
+  }
+
+  .expand-icon {
+    margin-left: 8px;
+    color: #999;
+  }
 </style>