|
|
@@ -0,0 +1,470 @@
|
|
|
+<template>
|
|
|
+ <div class="tutorial">
|
|
|
+ <el-row style="padding: 5px; font-size: larger">Developer使用指南
|
|
|
+ <el-button size="small" class="closeButton" @click="closeTutorial"></el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-divider style="margin: 4px; height: 2px"/>
|
|
|
+ <div id="taskContainer" class="introduction" v-if="showTask">
|
|
|
+ <div v-for="(task, index) in taskList" :key="index" class="taskLine" @click="beginTask(index)">
|
|
|
+ <el-tag type="info" size="mini" effect="light" round v-if="task.status === 0">未开始</el-tag>
|
|
|
+ <el-tag type="danger" size="mini" effect="light" round v-if="task.status === 1">进行中</el-tag>
|
|
|
+ <el-tag type="success" size="mini" effect="light" round v-if="task.status === 2">已完成</el-tag>
|
|
|
+ {{task.description}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="stepContainer" class="introduction" v-if="showStep">
|
|
|
+ <div style="float: left; padding: 6px; left: 5px">{{stepIndex+1}}.</div>
|
|
|
+ <div style="padding: 4px; margin-left:20px; margin-bottom: 8px">{{ currentSteps[stepIndex].description }}</div>
|
|
|
+ <div style="padding: 4px; margin-left:20px; margin-bottom: 8px">请按照下列指示进行操作：</div>
|
|
|
+ <div class="actionDisplay" v-show="!stepFinish">{{currentSteps[stepIndex].action}}</div>
|
|
|
+ <div class="actionDisplaySuccess" v-show="stepFinish">{{currentSteps[stepIndex].action}}</div>
|
|
|
+ <el-button size="small" type="primary" plain
|
|
|
+ :disabled="!stepFinish" style="float: right; right: 5px; margin-top: 10px" @click="nextStep">
|
|
|
+ 下一步
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="shade" style="height: 60px; width: 100%"></div>
|
|
|
+ <div class="shade" style="top: 60px; height: 100%; width: 100%;"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'Tutorial',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showTask: true,
|
|
|
+ showStep: false,
|
|
|
+ // status 表示某一个任务是否被完成，0表示未开始，1表示进行中，2表示已完成
|
|
|
+ taskList: [
|
|
|
+ { name: 'taskList', description: '学习使用任务列表模块', status: 0 },
|
|
|
+ { name: 'git', description: '学习使用提交记录模块', status: 0 },
|
|
|
+ { name: 'pipeline', description: '学习使用流水线模块', status: 0 },
|
|
|
+ { name: 'database', description: '学习使用数据库模块', status: 0 },
|
|
|
+ { name: 'apitest', description: '学习使用测试模块', status: 0 },
|
|
|
+ { name: 'bugList', description: '学习使用缺陷模块', status: 0 },
|
|
|
+ { name: 'codereview', description: '学习开展分支评审任务', status: 0 },
|
|
|
+ ],
|
|
|
+ instructions: {
|
|
|
+ taskList: [
|
|
|
+ {
|
|
|
+ id: 'taskList', popUpId: 'sidebar', description: 'Developer系统提供了任务列表模块，用户可以管理项目开发过程中的所有任务。', action: '点击左边栏中的"任务列表"按钮', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'taskListTable', popUpId: 'taskListTable', description: '在此模块中可以看到所有存在的任务，以及其预计耗时、优先级等信息', action: '查看表中的任务信息', type: 'display',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ git: [
|
|
|
+ {
|
|
|
+ id: 'git', popUpId: 'sidebar', description: 'Developer系统的模块选择位于最左侧的选择栏中', action: '点击左边栏中的"提交记录"按钮', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'gitCommitTree', popUpId: 'gitCommitTree', description: '提交记录模块中展示了项目的所有git commit记录', action: '查看当前分支的commit信息', type: 'display',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'gitBranchSelect', popUpId: 'gitSelectRow', description: '提交记录模块允许选择分支来单独展示分支上的变更', action: '选择master分支', type: 'select', value: 'master',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'gitFilterButton', popUpId: 'gitSelectRow', description: '', action: '点击\'过滤\'按钮确认筛选', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'gitAuthorSelect', popUpId: 'gitSelectRow', description: '提交记录模块允许在分支的基础上通过提交人进行筛选', action: '选择任意的提交者', type: 'select',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'gitFilterButton', popUpId: 'gitSelectRow', description: '', action: '点击\'过滤\'按钮确认筛选', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'gitTitleFilter', popUpId: 'gitSelectRow', description: '提交记录模块允许根据commit信息以及哈希码进行过滤', action: '输入需要筛选的message或者哈希码', type: 'input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'gitFilterButton', popUpId: 'gitSelectRow', description: '', action: '点击\'过滤\'按钮确认筛选', type: 'click',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pipeline: [
|
|
|
+ {
|
|
|
+ id: 'pipeline', popUpId: 'sidebar', description: 'Developer系统提供了流水线模块，用户可以创建并触发部署流水线，查看部署产物。', action: '点击左边栏中的"流水线"按钮', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineCreateButton', popUpId: 'pipelineElTable', description: '为了使用流水线模块的功能，我们首先创建一个新的流水线', action: '点击创建按钮', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineCreateTitle', popUpId: 'pipelineCreateTitle', description: '', action: '填写流水线标题为"springboot"', type: 'input', input: 'springboot',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineCreateTemplate', popUpId: 'pipelineCreateTemplate', description: '', action: '选择流水线模版"SpringBoot"', type: 'select', value: 'SPRINGBOOT_JAVA8',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineCreateConfirm', popUpId: 'pipelineCreateConfirm', description: '', action: '点击确认创建流水线', type: 'select',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineTable', popUpId: 'pipelineTabs', description: '在此表中可以看到所有的流水线信息', action: '查看流水线列表', type: 'display',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditButton-springboot', popUpId: 'pipelineElTable', description: '为了使用流水线任务，我们还需要配置一些必要信息，比如代码仓库地址、端口等', action: '点击编辑按钮', type: 'click', selectBy: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditInput-branchOrHash', popUpId: 'pipelineEditInput-branchOrHash', description: '代码检查镜像会在构建前检查指定的分支或提交的代码', action: '输入需要生成检查镜像的分支或hash', type: 'input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditNextStep', popUpId: 'pipelineEditNextStep', description: '', action: '点击按钮进行后续配置', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditInput-repoUrl', popUpId: 'pipelineEditInput-repoUrl', description: '在触发流水线任务时，Developer系统会在指定仓库、指定分支拉取代码并进行构建', action: '输入需要构建的代码仓库地址', type: 'input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditInput-branchName', popUpId: 'pipelineEditInput-branchName', description: '', action: '输入需要构建的代码分支', type: 'input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditNextStep', popUpId: 'pipelineEditNextStep', description: '', action: '点击按钮进行后续配置', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditInput-port', popUpId: 'pipelineEditInput-port', description: '此处需要填写springboot后端项目将要占用的端口', action: '填写8080', type: 'input', value: '8080',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditNextStep', popUpId: 'pipelineEditNextStep', description: '', action: '点击按钮进行后续配置', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditInput-testSelect', popUpId: 'pipelineEditInput-testSelect', description: '此处可以选择需要进行的自动化接口测试，可以在测试模块中创建API测试', action: '选择需要进行的API测试任务，可以不选择', type: 'display',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineEditFinish', popUpId: 'pipelineEditFinish', description: '', action: '点击按钮完成配置', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineActivateButton-springboot', popUpId: 'pipelineActivateButton-springboot', description: '点击触发按钮后，系统会根据配置拉取代码并进行构建', action: '点击触发按钮', type: 'click', selectBy: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'tab-production', popUpId: 'projectContainer', description: '可以在"部署产物"标签页中查看所有的部署产物', action: '点击切换标签页', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'productTable', popUpId: 'productTable', description: '此处以表格形式展示了所有的部署产物，可以看到其URL以及部署状态', action: '无需进行操作', type: 'display',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ database: [
|
|
|
+ {
|
|
|
+ id: 'pipeline', popUpId: 'sidebar', description: '在使用数据库模块之前需要先通过流水线部署一个数据库实例', action: '点击左边栏中的"流水线"按钮', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineCreateButton', popUpId: 'pipelineElTable', description: '', action: '点击按钮新建流水线', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineCreateTitle', popUpId: 'pipelineCreateTitle', description: '', action: '填写流水线标题为"mysql"', type: 'input', input: 'mysql',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineCreateTemplate', popUpId: 'pipelineCreateTemplate', description: '', action: '选择流水线模版"MYSQL"', type: 'select', value: 'MYSQL',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineCreateConfirm', popUpId: 'pipelineCreateConfirm', description: '', action: '点击确认创建流水线', type: 'select',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'pipelineActivateButton-mysql', popUpId: 'pipelineElTable', description: '默认的数据库占用3306端口，root账户的密码默认为root，可以在编辑中进行修改。', action: '点击确认触发数据库部署', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'database', popUpId: 'sidebar', description: 'Developer系统提供了数据库模块，用户可以在此模块中执行SQL语句，直观的对数据库进行操作', action: '点击左边栏中的"数据库"按钮', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'databaseSelect', popUpId: 'projectContainer', description: '用户在此处需要选择要操作的数据库，必须在流水线模块中部署后才可以选择', action: '选择mysql数据库实例', type: 'select', value: 'mysql',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'databasePassword', popUpId: 'projectContainer', description: '用户在此处需要输入数据库的密码', action: '输入root用户的密码', type: 'input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'databaseSQL', popUpId: 'projectContainer', description: '用户在此处输入要执行的SQL语句', action: '输入SQL语句', type: 'input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'databaseExec', popUpId: 'projectContainer', description: '', action: '点击按钮执行SQL语句', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'databaseHistory', popUpId: 'databaseHistory', description: '', action: '在此处可以看到SQL语句执行历史以及结果', type: 'display',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ apitest: [
|
|
|
+ {
|
|
|
+ id: 'apitest', popUpId: 'sidebar', description: '', action: '点击左边栏中的"测试"', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'testCreateButton', popUpId: 'testElTable', description: '测试模块包括接口测试与黑盒测试两个部分，首先使用接口测试部分', action: '点击按钮新建接口测试任务', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'testCreateTitle', popUpId: 'testCreateTitle', description: '此处填写测试的名称，在构建时可以根据此名称选择需要进行的自动化测试', action: '输入"tutorial"', type: 'input', value: 'tutorial',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // eslint-disable-next-line max-len
|
|
|
+ id: 'testCreateUrl', popUpId: 'testCreateUrl', description: '此处填写接口测试使用的URL, 触发测试时会想此处发送请求', action: '输入"http://backend.todolist-backend-877.devcloud.seec.seecoder.cn/hello"', type: 'input', value: 'http://backend.todolist-backend-877.devcloud.seec.seecoder.cn/hello',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'testCreateMethod', popUpId: 'testCreateMethod', description: '此处填写接口使用的Http方法类型', action: '选择GET', type: 'select', value: 'GET',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'testCreateParam', popUpId: 'testCreateParam', description: '此处填写Http需要填写的参数，POST方法中是指RequestBody', action: '在此方法中无需填写', type: 'display',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'testCreateConfirm', popUpId: 'testCreateConfirm', description: '', action: '点击按钮创建测试', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'testExec-tutorial', popUpId: 'testElTable', description: '触发测试后，系统会按照配置发送Http请求并返回结果', action: '点击按钮触发测试', type: 'click', selectBy: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'testDetail-tutorial', popUpId: 'testElTable', description: '用户可以查看测试的执行历史等信息', action: '点击按钮查看详情', type: 'click', selectBy: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'testExecHistory', popUpId: 'testExecHistory', description: '', action: '查看接口测试的执行历史，点击前面的按钮可以查看测试执行返回结果', type: 'display',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ bugList: [
|
|
|
+ {
|
|
|
+ id: 'bugList', popUpId: 'sidebar', description: 'Developer系统提供了缺陷管理模块用于管理开发过程中发现的各种问题', action: '点击左边栏中的"缺陷列表"', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'generalTableCreateButton', popUpId: 'projectContainer', description: '', action: '点击按钮创建新的缺陷', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'bugAddTitle', popUpId: 'bugAddTitle', description: '', action: '填写缺陷的名称', type: 'input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'bugAddDescription', popUpId: 'bugAddDescription', description: '此处需要描述缺陷出现的场景，可能出现的原因，方便其余人员进行修复', action: '填写缺陷描述(非必填)', type: 'display',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'bugAddTime', popUpId: 'bugAddTime', description: '此处填写预计解决缺陷需要花费的事件，以"人月"作为单位', action: '选择需要的时间', type: 'display',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'bugAddPriority', popUpId: 'bugAddPriority', description: '此处需要选择缺陷需要处理的优先级', action: '选择优先级', type: 'select',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'bugAddProcessor', popUpId: 'bugAddProcessor', description: '此处可以指定项目中的开发人员负责修复这个缺陷', action: '选择经办人', type: 'select',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'bugAddConfirm', popUpId: 'bugAddConfirm', description: '', action: '点击按钮创建缺陷', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'bugTable', popUpId: 'projectContainer', description: '在此处展示了当前项目的缺陷列表，点击其中一列可以查看缺陷的详情', action: '点击任意一列', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'bugEditSwitch', popUpId: 'bugEditSwitch', description: '在此处展示了某一个缺陷的详情，点击上方的开关按钮可以对缺陷进行编辑', action: '查看缺陷详情，对缺陷进行编辑', type: 'display',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ codereview: [
|
|
|
+ {
|
|
|
+ id: 'codereview', popUpId: 'sidebar', description: '分支评审任务属于代码评审模块的一部分', action: '点击左边栏中的"代码评审"按钮', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'addBranchReview', popUpId: 'codeReviewButtonRow', description: '', action: '点击新建分支评审任务', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'selectSourceBranch', popUpId: 'branchSelectDrawer', description: '分支评审基于项目的不同分支进行，在创建分支评审时需要首先选择分支，目标分支与源分支不能相同', action: '选择master分支', type: 'select', value: 'master',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'selectTargetBranch', popUpId: 'branchSelectDrawer', description: '当分支评审任务结束时，会将源分支上的改动合并至目标分支中', action: '选择dev分支', type: 'select', value: 'dev',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'confirmSelectBranch', popUpId: 'branchSelectDrawer', description: '', action: '点击继续按钮', type: 'click',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'branchAddCodeDiff', popUpId: 'branchReviewDrawer', description: '在此处可以预览分支间的代码差异', action: '查看分支代码差异预览', type: 'display',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'branchReviewTitle', popUpId: 'branchReviewDrawer', description: '', action: '填写评审任务的的标题', type: 'input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'branchReviewer', popUpId: 'branchReviewDrawer', description: '分支评审任务只可以选择项目内部的开发人员作为评审人', action: '选择任意的评审人', type: 'select',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'confirmCreateBranchReview', popUpId: 'branchReviewDrawer', description: '', action: '点击确认创建新的分支评审任务', type: 'click',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ currentSteps: [],
|
|
|
+ eventListeners: [],
|
|
|
+ stepFinish: false,
|
|
|
+ stepIndex: -1,
|
|
|
+ taskIndex: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beginTask(index) {
|
|
|
+ this.currentSteps = this.instructions[this.taskList[index].name];
|
|
|
+ this.taskList[index].status = 1;
|
|
|
+ this.taskIndex = index;
|
|
|
+ this.nextStep();
|
|
|
+ this.showTask = false;
|
|
|
+ this.showStep = true;
|
|
|
+ },
|
|
|
+ nextStep() {
|
|
|
+ if (this.stepIndex !== -1) {
|
|
|
+ // 存在前一个步骤，需要先消除之前的闪烁边框以及z-index提前
|
|
|
+ let preElement;
|
|
|
+ if (this.currentSteps[this.stepIndex].selectBy === 'name') {
|
|
|
+ // eslint-disable-next-line prefer-destructuring
|
|
|
+ preElement = document.getElementsByName(this.currentSteps[this.stepIndex].id)[0];
|
|
|
+ } else {
|
|
|
+ preElement = document.getElementById(this.currentSteps[this.stepIndex].id);
|
|
|
+ }
|
|
|
+ preElement.classList.remove('border-glow');
|
|
|
+ document.getElementById(this.currentSteps[this.stepIndex].popUpId).classList.remove('pop-up');
|
|
|
+ // 去除事件监听器
|
|
|
+ if (this.eventListeners[this.stepIndex] !== null) {
|
|
|
+ preElement.removeEventListener(this.eventListeners[this.stepIndex].type, this.eventListeners[this.stepIndex].func);
|
|
|
+ // document.getElementById(this.currentSteps[this.stepIndex].id).removeEventListener(this.eventListeners[this.stepIndex].type, this.eventListeners[this.stepIndex].func);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.stepIndex === this.currentSteps.length - 1) {
|
|
|
+ // 所有的步骤都被遍历完，可以直接推出步骤引导，返回任务列表
|
|
|
+ this.stepIndex = -1;
|
|
|
+ this.taskList[this.taskIndex].status = 2;
|
|
|
+ this.showStep = false;
|
|
|
+ this.showTask = true;
|
|
|
+ this.eventListeners = [];
|
|
|
+ this.currentSteps = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.stepIndex += 1;
|
|
|
+ this.stepFinish = false;
|
|
|
+ // 更改元素的样式，增加闪烁边框以及增加z-index
|
|
|
+ let curElement;
|
|
|
+ if (this.currentSteps[this.stepIndex].selectBy === 'name') {
|
|
|
+ // eslint-disable-next-line prefer-destructuring
|
|
|
+ curElement = document.getElementsByName(this.currentSteps[this.stepIndex].id)[0];
|
|
|
+ } else {
|
|
|
+ curElement = document.getElementById(this.currentSteps[this.stepIndex].id);
|
|
|
+ }
|
|
|
+ curElement.classList.add('border-glow');
|
|
|
+ // document.getElementById(this.currentSteps[this.stepIndex].id).classList.add('border-glow');
|
|
|
+ document.getElementById(this.currentSteps[this.stepIndex].popUpId).classList.add('pop-up');
|
|
|
+ const { type } = this.currentSteps[this.stepIndex];
|
|
|
+ let event;
|
|
|
+ const that = this;
|
|
|
+ if (type === 'display') {
|
|
|
+ // 操作类型为仅展示，不需要操作
|
|
|
+ this.stepFinish = true;
|
|
|
+ event = null;
|
|
|
+ this.eventListeners.push(event);
|
|
|
+ } else if (type === 'click') {
|
|
|
+ event = function () {
|
|
|
+ that.stepFinish = true;
|
|
|
+ document.getElementById(that.currentSteps[that.stepIndex].popUpId).classList.remove('pop-up');
|
|
|
+ };
|
|
|
+ curElement.addEventListener('click', event);
|
|
|
+ // document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('click', event);
|
|
|
+ this.eventListeners.push({ type: 'click', func: event });
|
|
|
+ } else if (type === 'select') {
|
|
|
+ event = function () {
|
|
|
+ const expectedV = that.currentSteps[that.stepIndex].value;
|
|
|
+ const actualV = document.getElementById(that.currentSteps[that.stepIndex].id).value;
|
|
|
+ if (expectedV === null || expectedV === undefined) {
|
|
|
+ that.stepFinish = true;
|
|
|
+ } else {
|
|
|
+ that.stepFinish = expectedV === actualV;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ curElement.addEventListener('focus', event);
|
|
|
+ // document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('focus', event);
|
|
|
+ this.eventListeners.push({ type: 'focus', func: event });
|
|
|
+ } else if (type === 'input') {
|
|
|
+ event = function () {
|
|
|
+ const expectedV = that.currentSteps[that.stepIndex].value;
|
|
|
+ const actualV = document.getElementById(that.currentSteps[that.stepIndex].id).value;
|
|
|
+ if (expectedV === null || expectedV === undefined) {
|
|
|
+ that.stepFinish = true;
|
|
|
+ } else {
|
|
|
+ that.stepFinish = expectedV === actualV;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ curElement.addEventListener('change', event);
|
|
|
+ // document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('change', event);
|
|
|
+ this.eventListeners.push({ type: 'change', func: event });
|
|
|
+ } else if (type === 'row-click') {
|
|
|
+ event = function () {
|
|
|
+ that.stepFinish = true;
|
|
|
+ document.getElementById(that.currentSteps[that.stepIndex].popUpId).classList.remove('pop-up');
|
|
|
+ };
|
|
|
+ curElement.addEventListener('row-click', event);
|
|
|
+ // document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('row-click', event);
|
|
|
+ this.eventListeners.push({ type: 'row-click', func: event });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeTutorial() {
|
|
|
+ this.currentSteps = [];
|
|
|
+ this.showStep = false;
|
|
|
+ this.showTask = true;
|
|
|
+ if (this.stepIndex !== -1 && this.eventListeners[this.stepIndex] !== null) {
|
|
|
+ document.getElementById(this.currentSteps[this.stepIndex].id).removeEventListener(this.eventListeners[this.stepIndex].type, this.eventListeners[this.stepIndex].func);
|
|
|
+ }
|
|
|
+ this.eventListeners = [];
|
|
|
+ this.stepIndex = -1;
|
|
|
+ this.stepFinish = false;
|
|
|
+ this.$emit('close');
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emits: ['close'],
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.shade {
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ background-color: rgba(0,0,0,0);
|
|
|
+ z-index: 2000;
|
|
|
+}
|
|
|
+.tutorial {
|
|
|
+ width: 300px;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 5000;
|
|
|
+ padding: 5px;
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+}
|
|
|
+.introduction {
|
|
|
+ padding: 5px;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #444444;
|
|
|
+}
|
|
|
+.taskLine {
|
|
|
+ padding: 8px 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: solid 1px #eeeeee;
|
|
|
+}
|
|
|
+.taskLine:hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.actionDisplay {
|
|
|
+ margin-left: 20px;
|
|
|
+ border-left: 5px solid #909090;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background-color: whitesmoke;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: smaller;
|
|
|
+}
|
|
|
+.actionDisplaySuccess {
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ border-left: 5px solid #67C23A;
|
|
|
+ background-color: #F0F9EB;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: smaller;
|
|
|
+}
|
|
|
+.closeButton {
|
|
|
+ background-image: url("../assets/icon/close.svg");
|
|
|
+ background-size: 25px 25px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ border: none;
|
|
|
+ margin-left: 70px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.border-glow {
|
|
|
+ animation: glow 800ms ease-out infinite alternate;
|
|
|
+}
|
|
|
+@keyframes glow {
|
|
|
+ 0% {
|
|
|
+ border-color: yellow;
|
|
|
+ box-shadow: 0 0 1px 3px yellow inset;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ border-color: yellow;
|
|
|
+ box-shadow: 0 0 1px 5px yellow inset;
|
|
|
+ }
|
|
|
+}
|
|
|
+.pop-up {
|
|
|
+ z-index: 3000;
|
|
|
+}
|
|
|
+</style>
|
shanshan