xiaoshi_system/src/views/layout/components/guide.js

/**
 * intro.js新手指引工具
 * introOption.steps = steps[title]
 * this.$intro().setOptions(introOption).start()
 */
// const introOption= { // 参数对象
//     prevLabel: '上一步',
//     nextLabel: '下一步',
//     skipLabel: '跳过',
//     doneLabel: '完成',
//     tooltipClass: 'intro-tooltip', /* 引导说明文本框的样式 */
//     // highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
//     exitOnEsc: true, /* 是否使用键盘Esc退出 */
//     exitOnOverlayClick: false, /* 是否允许点击空白处退出 */
//     keyboardNavigation: true, /* 是否允许键盘来操作 */
//     showBullets: true, /* 是否使用点显示进度 */
//     showProgress: false, /* 是否显示进度条 */
//     showStepNumbers: false,//是否显示说明的数据步骤
//     scrollToElement: true, /* 是否滑动到高亮的区域 */
//     overlayOpacity: 0.75, // 遮罩层的透明度 0-1之间
//     positionPrecedence: ['bottom', 'top', 'right', 'left'], /* 当位置选择自动的时候，位置排列的优先级 */
//     disableInteraction: false, /* 是否禁止与元素的相互关联 */
//     hidePrev: true, /* 是否在第一步隐藏上一步 */
//     hideNext: true, /* 是否在最后一步隐藏下一步 */
//     steps: [], /* steps步骤，可以写个工具类保存起来 */
//     helperElementPadding: 2,//提示边框的 padding
//     disableInteraction: false,//是否禁止与元素的相互关联
//   }
// const steps = {
//     '首页':[
//         { title: '系统使用指导', element: '#step1', intro: `鼠标悬浮在各个功能模块上，可快速查找系统对应操作SOP以及运维人员。`},
//         { title: '个人信息', element: '#step2', intro: `点击个人头像/下拉图标，选择个人信息，初始密码为******，建议修改为个人账号密码。`, },
//         { title: '重新引导', element: '#step3', intro: '点击此处可重新查看引导流程。', },
//     ],
// }

const steps = {
    'home':[
        {
            element: "#step1", // 需要引导展示的iD
            popover: {
                title: "轮播图", //展示模块标题
                description: "介绍系统的功能。", // 展示模块类容
                side: "right" // 模块的位置 可以定位 看自己了
            } 
        },
        {
            element: "#step2", // 需要引导展示的iD
            popover: {
                title: "检索框", //展示模块标题
                description: "可以搜索想要搜索的信息。", // 展示模块类容
                side: "right" // 模块的位置 可以定位 看自己了
            } 
        },
        {
            element: "#step3", // 需要引导展示的iD
            popover: {
                title: "报告统计", //展示模块标题
                description: "统计各种类型报告的数量。", // 展示模块类容
                side: "right" // 模块的位置 可以定位 看自己了
            } 
        },
        {
            element: "#step4", // 需要引导展示的iD
            popover: {
                title: "任务统计", //展示模块标题
                description: "统计自己完成与未完成的任务数量。", // 展示模块类容
                side: "right" // 模块的位置 可以定位 看自己了
            } 
        },
        {
            element: "#step5", // 需要引导展示的iD
            popover: {
                title: "事件统计", //展示模块标题
                description: "统计八大应用场景下事件的数量。", // 展示模块类容
                side: "right" // 模块的位置 可以定位 看自己了
            } 
        },
    ],
    //场景可视化
    'visual':[],
    //专利数据库首页
    'project':[
        {
            element: "#step1", 
            popover: {
                title: "检索专利数据库",
                description: "选择需要检索的字段，填入检索信息后点击搜索按钮",
                side: "right" 
            }  
        },
        {
            element: "#step2", 
            popover: {
                title: "分组",
                description: "选择需要分组的字段进行分组查看",
                side: "right" 
            }  
        },
        {
            element: "#step3", 
            popover: {
                title: "视图",
                description: "有两种查看专利数据库类别的视图方式可以查看",
                side: "right" 
            }  
        },
        {
            element: "#step4", 
            popover: {
                title: "操作按钮",
                description: "",
                side: "right" 
            }  
        },
    ],
    //产品首页
    'product':[
        {
            element: "#step1", 
            popover: {
                title: "检索",
                description: "选择需要检索的字段，填入检索信息后点击搜索按钮",
                side: "right" 
            }  
        },
        {
            element: "#step2", 
            popover: {
                title: "新增类别",
                description: "点击按钮会弹出弹窗添加需要添加的产品类别",
                side: "right" 
            }  
        },
    ],
    //事件首页
    'event':[
        {
            element: "#step1", 
            popover: {
                title: "检索",
                description: "选择需要检索的字段，填入检索信息后点击搜索按钮",
                side: "right" 
            }  
        },
        {
            element: "#step2", 
            popover: {
                title: "分组",
                description: "选择需要分组的字段进行分组查看",
                side: "right" 
            }  
        },
        {
            element: "#step3", 
            popover: {
                title: "视图",
                description: "有三种查看事件的视图方式可以查看",
                side: "right" 
            }  
        },
        {
            element: "#step4", 
            popover: {
                title: "操作按钮",
                description: "",
                side: "right" 
            }  
        },
    ],
    //报告首页
    'report':[
        {
            element: "#step1", 
            popover: {
                title: "检索",
                description: "选择需要检索的字段，填入检索信息后点击搜索按钮",
                side: "right" 
            }  
        },
        {
            element: "#step2", 
            popover: {
                title: "分组",
                description: "选择需要分组的字段进行分组查看",
                side: "right" 
            }  
        },
        {
            element: "#step3", 
            popover: {
                title: "视图",
                description: "有三种查看报告的视图方式可以查看",
                side: "right" 
            }  
        },
        {
            element: "#step4", 
            popover: {
                title: "操作按钮",
                description: "",
                side: "right" 
            }  
        },
    ],
    //专利挖掘首页
    'patentMining':[
        {
            element: "#step1", 
            popover: {
                title: "检索",
                description: "选择需要检索的字段，填入检索信息后点击搜索按钮",
                side: "right" 
            }  
        },
        {
            element: "#step2", 
            popover: {
                title: "分组",
                description: "选择需要分组的字段进行分组查看",
                side: "right" 
            }  
        },
        {
            element: "#step3", 
            popover: {
                title: "视图",
                description: "有三种查看专利挖掘项目的视图方式可以查看",
                side: "right" 
            }  
        },
        {
            element: "#step4", 
            popover: {
                title: "操作按钮",
                description: "",
                side: "right" 
            }  
        },
    ],
    
}
/**
 * driver.js v1.3.0 新手指引工具
 */
import {driver} from 'driver.js'
import 'driver.js/dist/driver.css'
//配置
const config ={
    overlayOpacity: 0.75,
    popoverClass: "scoped-class",
    stagePadding: 10,
    // showButtons: [ 'next','prev', 'close'], //1 pass an array of buttons to show
    allowKeyboardControl:true,
    allowClose: true, // 禁止点击外部关闭
    showProgress:true,
    progressText:'{{current}}/{{total}}',
    doneBtnText: '完成', // 结束按钮的文字
    animate: true, // 动画
    stageBackground: '#ffffff', // 突出显示元素的背景颜色
    nextBtnText: '下一步', // 下一步按钮的文字
    prevBtnText: '上一步', // 上一步按钮的文字
    closeBtnText: '关闭', // 关闭按钮的文字
    // overlayColor:'#f40',
    smoothScroll:true,  
}
    
export const guide = {
    methods: {
         //打开新手指引
         openGuide(title){
            var userinfo = this.$store.state.user.userinfo
            var firstRoute = localStorage.firstRoute
            if(firstRoute){
                var arr = JSON.parse(firstRoute)
                if(arr[userinfo.id]){
                    var index = arr[userinfo.id].indexOf(title)
                    if(index != -1){
                        return false
                    }
                }else{
                    arr[userinfo.id] = []
                }
                
            }else{
                var arr = {}
                arr[userinfo.id] = []
            }
            this.startGuide(title,arr,userinfo)
            
        },
        //开始新手指引(title:当前路由标识，arr:需要展示的指引步骤，userinfo:用户信息)
        startGuide(title,arr,userinfo){
            this.$nextTick(()=>{
                if(!steps[title]){
                    return false
                }
                var step = steps[title].filter(item=>{
                    return !item.sign || this.$permission(item.sign)
                })
                const drivers =  driver({
                    ...config,
                    steps:step,
                    // onCloseClick:() => {
                    //     arr.push(title)
                    //     localStorage.firstRoute = JSON.stringify(arr)
                    //     drivers.destroy();
                    // },
                    onDestroyed:()=>{
                        if(userinfo){
                            if(arr[userinfo.id]){
                                arr[userinfo.id].push(title)
                                localStorage.firstRoute = JSON.stringify(arr)  
                            }
                        }
                        drivers.destroy();
                    }
                })
                drivers.drive()
            })
        }
    }
  }