diff --git a/package.json b/package.json index 72df3bc8..ebc9d559 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "codemirror": "5.32.0", "dayjs": "^1.8.29", "decimal.js": "^10.2.0", + "driver.js": "^0.9.8", "dropzone": "5.2.0", "echarts": "3.8.5", "element-ui": "^2.13.0", diff --git a/src/components/Guider/Index.js b/src/components/Guider/Index.js new file mode 100644 index 00000000..ae39493a --- /dev/null +++ b/src/components/Guider/Index.js @@ -0,0 +1,61 @@ + + + import Driver from 'driver.js'; + import 'driver.js/dist/driver.min.css'; + import guiderData from './guiderData' + + var driver = new Driver({ + className: 'driver-popover', + doneBtnText: '知道了', // 结束按钮的文字 + allowClose: false, // 是否可以通过点击遮罩层关闭指引 + stageBackground: '#ffffff', // 突出显示元素的背景颜色 + nextBtnText: '下一步', // 下一步按钮的文字 + prevBtnText: '上一步', // 上一步按钮的文字 + closeBtnText: '关闭', // 关闭按钮的文字 + keyboardControl: false, // 是否允许键盘操控 + xCloseButton: true, // 将关闭按钮作为X放在弹出 + onReset: (Element) => { + }, + }); + + +export default { + initDriver:function(guiderName){ + var driver = new Driver({ + className: 'driver-popover', + doneBtnText: '知道了', // 结束按钮的文字 + allowClose: false, // 是否可以通过点击遮罩层关闭指引 + stageBackground: '#ffffff', // 突出显示元素的背景颜色 + nextBtnText: '下一步', // 下一步按钮的文字 + prevBtnText: '上一步', // 上一步按钮的文字 + closeBtnText: '永远关闭', // 关闭按钮的文字 + keyboardControl: false, // 是否允许键盘操控 + xCloseButton: true, // 将关闭按钮作为X放在弹出 + onReset: (e) => { + var event= window.event; + if(event){ + var target=event.target; + if(target && target.className=='driver-close-btn'){ + localStorage.setItem("guider-"+guiderName,"1"); + } + } + } + }); + return driver; + }, + startBySteps: function(steps) { + driver.defineSteps(steps); + driver.start(); + }, + + startByName: function(guiderName,forceDisplayWhileClosed) { + var localExists=localStorage.getItem('guider-'+guiderName) + if(localExists=='1' && !forceDisplayWhileClosed){ + return; + } + var driver2=this.initDriver(guiderName); + var steps=guiderData.getSteps(guiderName); + driver2.defineSteps(steps); + driver2.start(); + }, +} diff --git a/src/components/Guider/guiderData.js b/src/components/Guider/guiderData.js new file mode 100644 index 00000000..a2731e00 --- /dev/null +++ b/src/components/Guider/guiderData.js @@ -0,0 +1,187 @@ +var xmHomePage=[ + { + element: '#XmProductAllMng', + popover: { + title: ' ', + description: '这里可以创建新产品，支持手工、复制现有项目、复制模板三种模式快速一键创建项目', + position: 'left' + } + }, + { + element: '#XmMenuMng', + popover: { + title: ' ', + description: '这里可以进行需求管理，包括需求设计、需求迭代、需求细化、需求变更等。', + position: 'left' + }, + padding: 5, + }, + { + element: '#XmProjectAllMng', + popover: { + title: ' ', + description: '这里可以进行项目管理、计划管理、任务管理，可以通过复制项目模板、复制现有项目快速创建项目。', + position: 'left', + }, + padding: 5, + }, + { + element: '#XmMyTaskCenter', + popover: { + title: ' ', + description: '这里可以进行任务管理，包括填报任务进度、分配任务执行人、工作量填报等', + position: 'left', + }, + padding: 5, + }, + { + element: '#XmProjectGroupAllMng', + popover: { + title: ' ', + description: '这里可以快速创建项目、产品团队、快速管理团队成员。', + position: 'left', + }, + padding: 5, + } , + { + element: '#XmQuestionMng', + popover: { + title: ' ', + description: '这里可以进行测试管理、测试设计、测试执行等。', + position: 'left', + }, + padding: 5, + } , + { + element: '#TaskListAssigneeToMe', + popover: { + title: ' ', + description: '关于审批的所有事项，都可以从这里一站式管理。', + position: 'left', + }, + padding: 5, + } +]; + +var xmProductMng=[ + { + element: '#guider-one', + popover: { + title: ' ', + description: '这里可以创建新产品，支持手工、复制现有产品、复制模板三种模式快速一键创建产品', + position: 'bottom' + } + }, + { + element: '#guider-two', + popover: { + title: ' ', + description: '这里可以选择更多的查询条件，或者更多的操作。', + position: 'bottom' + }, + padding: 5, + }, + { + element: '#guider-three', + popover: { + title: ' ', + description: '这里可以跳转到产品视图，查看更多信息、做产品相关的各种操作。', + position: 'top', + }, + padding: 5, + }, + { + element: '#guider-four', + popover: { + title: ' ', + description: '这里可以统计产品的总体进度、工作量等所有统计数据。', + position: 'left', + }, + padding: 5, + }, + { + element: '#guider-five', + popover: { + title: ' ', + description: '这里可以将产品快速复制为新的共享模板、新的产品，达到快速创建产品的效果。', + position: 'left', + }, + padding: 5, + } + ]; + + +var xmProjectMng=[ + { + element: '#prj-plus-btn', + popover: { + title: ' ', + description: '这里可以创建新项目，支持手工、复制现有项目、复制模板三种模式快速一键创建项目', + position: 'bottom' + } + }, + { + element: '#prj-more-btn', + popover: { + title: ' ', + description: '这里可以选择更多的查询条件，或者更多的操作。', + position: 'bottom' + }, + padding: 5, + }, + { + element: '#prj-copy-btn', + popover: { + title: ' ', + description: '这里可以通过复制快速创建项目(同步复制项目计划、项目任务、项目团队及成员)', + position: 'right', + }, + padding: 5, + }, + { + element: '#prj-del-btn', + popover: { + title: ' ', + description: '这里可以把项目放入回收站(支持从回收站恢复)', + position: 'right', + }, + padding: 5, + }, + { + element: '#prj-calc-btn', + popover: { + title: ' ', + description: '这里可以把项目的所有统计数据更新为最新的汇总数据(包括进度、任务数、需求数、工作量等)', + position: 'right', + }, + padding: 5, + }, + { + element: '#prj-view-box', + popover: { + title: ' ', + description: '点击这个区域可以跳转到项目视图（可以管理项目计划、项目任务、项目变更、项目迭代、项目缺陷等）', + position: 'right', + }, + padding: 5, + } +]; + export default { + //请在下面添加数据 + steps:{ + xmHomePage, + xmProductMng, + xmProjectMng, + }, + + getSteps:function(guiderName){ + if(this.steps[guiderName]){ + return this.steps[guiderName] + }else{ + return [] + } + } + + } + + diff --git a/src/views/xm/XmOverview.vue b/src/views/xm/XmOverview.vue index e3f2e146..cc16ec82 100644 --- a/src/views/xm/XmOverview.vue +++ b/src/views/xm/XmOverview.vue @@ -130,55 +130,49 @@  快捷菜单
-
-
-
- -
-
项目管理
-
- -
+
+
产品管理
-
- -
+
+
需求管理
-
- -
+
+
- +
-
缺陷管理
-
- -
+
项目管理
+
+
+
+ +
+
开发任务
+
+
团队管理
+
+
+
+ +
+
缺陷管理
- -
+
待审事项
- -
-
- -
-
开发任务
-
@@ -343,6 +337,8 @@ import util from "@/common/js/util"; // 全局公共库 import { mapGetters } from "vuex"; import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询 import { listXmBranchState,loadProjectStateToXmBranchState } from '@/api/xm/core/xmBranchState'; + + import Guider from '@/components/Guider/Index.js'; export default { computed: { ...mapGetters(["userInfo"]), @@ -810,11 +806,17 @@ export default { gotolink(link) { this.$router.replace(link); }, + + /**end 自定义函数请在上面加**/ + guiderStart(forceDisplayWhileClosed) { // 初始化引导页 + Guider.startByName('xmHomePage',forceDisplayWhileClosed); + }, }, mounted() { this.$nextTick(() => { - this.maxTableHeight=util.calcTableMaxHeight(this.$refs.table.$el) + this.maxTableHeight=util.calcTableMaxHeight(this.$refs.table.$el) + this.guiderStart(); }); this.drawAllBar(); this.drawTaskByDate(); diff --git a/src/views/xm/core/xmProduct/XmProductMng.vue b/src/views/xm/core/xmProduct/XmProductMng.vue index 769f86df..b1f9e312 100644 --- a/src/views/xm/core/xmProduct/XmProductMng.vue +++ b/src/views/xm/core/xmProduct/XmProductMng.vue @@ -5,7 +5,7 @@ - + @@ -30,7 +30,7 @@ - 通过【产品-复制】一键创建新的产品 + 通过【产品-复制】一键创建新的产品 @@ -39,7 +39,7 @@ - 产品 + 产品 - 查询{{templateVisible?"隐藏模板":"显示模板"}} + 查询 + {{templateVisible?"隐藏模板":"显示模板"}} + 新手导航 - + @@ -153,9 +155,9 @@ - -