添加引导界面
This commit is contained in:
parent
657aebdc99
commit
abb880d17c
|
|
@ -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-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
|
||||
<a-select v-model:value="entrydate" ref="step2" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
|
||||
<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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue