添加引导界面

src/views/cet/universityDashboard.vue

@@ -15,7 +15,7 @@
           <!--<a-cascader v-model:value="collegeMajor" expand-trigger="hover" :options="collegeMajorOptions" change-on-select />-->
 
           <!-- 主外层容器：包括一级和二级菜单并排 -->
-          <div class="dropdown-wrapper" @blur="loseFocus" tabindex="0">
+          <div class="dropdown-wrapper" ref="step1" @blur="loseFocus" tabindex="0">
             <div class="dropdown-trigger" @click="toggleDropdown">
               <span class="trigger-label">{{ selectedLabel || '请选择学院' }}</span>
               <DownOutlined class="trigger-icon" />
@@ -45,8 +45,8 @@
             </div>
           </div>
 
-          <a-select v-model:value="entrydate" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
+          <a-select v-model:value="entrydate" ref="step2" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
-          <a-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
+          <a-button style="margin-left: 10px" type="primary" ref="step3" @click="query">查询</a-button>
           <div class="stats-container">
             <span style="padding-left: 240px">{{ totalName }}总人数：{{ total }}</span>
             <span>累计通过人数: {{ passNumberBottom }}</span>
@@ -59,7 +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" ref="step4" :pagination="false" bordered :scroll="{ y: 290 }">
               <template #passRateSlot>
                 累计总通过率
                 <a-tooltip :title="'累计通过人数 / ' + totalName + '总人数'" placement="top">
@@ -70,7 +70,7 @@
           </div>
         </a-col>
         <a-col :xl="10">
-          <a-card class="card-with-piechart">
+          <a-card class="card-with-piechart" ref="step5">
             <div style="width: 100%; height: 200px" class="piechart" id="piechart"> </div>
           </a-card>
         </a-col>
@@ -82,14 +82,14 @@
   </div>
   <div class="bottom-box">
     <div class="left-side">
-      <a-card :loading="loading" :bordered="false">
+      <a-card :loading="loading" :bordered="false" ref="step6">
         <div style="width: 100%; height: 350px" id="map2"> </div>
       </a-card>
     </div>
     <div class="right-side">
       <!-- <a-row :gutter="12"> -->
       <!-- <a-col :xl="16"> -->
-      <a-card :loading="map1loading">
+      <a-card :loading="map1loading" ref="step7">
         <!-- <div class="query">
           <span
             style="font-size: 15px; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold">年级:
@@ -103,6 +103,7 @@
       <!-- </a-row> -->
     </div>
   </div>
+  <Tour :current="currentStep" :open="stepOpen" :steps="steps" @close="handleOpen(false)" @update:current="updateCurrent" />
 </template>
 
 <script>
@@ -111,14 +112,19 @@
   import { message } from 'ant-design-vue';
   import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
   import { getThirdUserBindByWechat } from '../system/appconfig/ThirdApp.api';
+  import { Tour } from 'ant-design-vue'; // 从 ant-design-vue 导入 Tour 组件
 
   export default {
     components: {
       DownOutlined,
       RightOutlined,
+      Tour,
     },
     data() {
       return {
+        stepOpen: false,
+        currentStep: 0,
+        steps: [],
         activeKey: '1',
         allCollege: [],
         showBox: false,
@@ -341,11 +347,84 @@
       // this.allQuery();
       this.getCollegeOptions();
       this.getEntrydate();
+      this.$nextTick(() => {
+        this.initStep();
+      });
+      this.isFirstAsk();
     },
     methods: {
+      isFirstAsk() {
+        const isFirstAsk = localStorage.getItem('isFirstAsk');
+        // 如果是第一次访问（isFirstAsk 为空或为 true）
+        //测试引导功能放开注释
+        //this.handleOpen(true);
+        console.log('isFirstAsk', isFirstAsk);
+        if (isFirstAsk === null || isFirstAsk === 'true') {
+          this.handleOpen(true);
+          // 将 isFirstAsk 存入 localStorage，确保下一次不会再执行
+          localStorage.setItem('isFirstAsk', 'false');
+        }
+      },
+      initStep() {
+        console.log('initstep');
+        this.steps = [
+          {
+            title: '选择学院/专业',
+            description: '请点击选择框选择学院和专业',
+            // Vue 2 中可以通过传入一个渲染函数来生成封面元素
+            //cover: function (h) {
+            //  return h('img', {
+            //    attrs: {
+            //      alt: 'tour.png',
+            //      src: 'https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png'
+            //    }
+            //  });
+            //},
+            // 通过箭头函数保持 this 指向 Vue 实例，从而获取 ref
+            target: () => this.$refs.step1,
+          },
+          {
+            title: '选择年级',
+            description: '请点击选择框选择年级',
+            target: () => this.$refs.step2.$el,
+          },
+          {
+            title: '确认查询',
+            description: '请点击查询按钮进行查询并绘制图表',
+            target: () => this.$refs.step3.$el,
+          },
+          {
+            title: '表单介绍',
+            description: '该学院/专业该年级各个批次的成绩情况',
+            target: () => this.$refs.step4.$el,
+          },
+          {
+            title: '图表介绍',
+            description: '该学院/专业该年级在不同年级通过考试的人数占比',
+            target: () => this.$refs.step5.$el,
+          },
+          {
+            title: '图表介绍',
+            description: '该学院/专业该年级各个批次的通过率折线图',
+            target: () => this.$refs.step6.$el,
+          },
+          {
+            title: '图表介绍',
+            description: '本年级全校各学院通过率排名，点击学院柱状图可查看该学院的其他信息',
+            target: () => this.$refs.step7.$el,
+          },
+        ];
+      },
       loseFocus() {
         this.dropdownVisible = false;
       },
+      handleOpen(val) {
+        console.log('handleOpen');
+        this.stepOpen = val;
+      },
+      updateCurrent(val) {
+        this.currentStep = val;
+      },
       toggleDropdown() {
         this.dropdownVisible = !this.dropdownVisible;
         this.subMenuVisible = false;