首页增加新手引导的功能

jshERP-web/package.json

@@ -22,6 +22,7 @@
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
     "xlsx": "^0.14.3",
+    "intro.js": "^4.2.2",
     "viser-vue": "^2.4.4",
     "vue": "^2.6.10",
     "vue-area-linkage": "^5.1.0",

jshERP-web/src/main.js

@@ -16,6 +16,7 @@ import Print from 'vue-print-nb-jeecg'
 /*import '@babel/polyfill'*/
 import preview from 'vue-photo-preview'
 import 'vue-photo-preview/dist/skin.css'
+import 'intro.js/introjs.css'
 
 import {
   ACCESS_TOKEN,
@@ -47,8 +48,8 @@ Vue.use(hasPermission)
 Vue.use(Print)
 Vue.use(preview)
 Vue.use(vueBus);
-Vue.use(JeecgComponents);
-Vue.use(VueAreaLinkage);
+Vue.use(JeecgComponents)
+Vue.use(VueAreaLinkage)
 
 new Vue({
   router,

jshERP-web/src/utils/util.js

@@ -1,6 +1,8 @@
 import * as api from '@/api/api'
 import { isURL } from '@/utils/validate'
 import XLSX from 'xlsx'
+import Vue from 'vue'
+import introJs from 'intro.js'
 
 export function timeFix() {
   const time = new Date()
@@ -653,4 +655,30 @@ export function sheet2blob (aoa, sheetName) {
     return buf
   }
   return blob
+}
+
+/**
+ * 新手引导步骤
+ * @param module 这个变量可以用来存取版本号， 系统更新时候改变相应值
+ * @param cur_version 这个变量可以用来存取版本号， 系统更新时候改变相应值
+ */
+export function handleIntroJs(module, cur_version) {
+  //每个页面设置不同的缓存变量名称，不可以重复，有新版本时，更新cur_version
+  //有新版本更新时才出现一次引导页， 第二次进入进不再出现， 这里有缓存来判断
+  if (Vue.ls.get('intro_cache_' + module) === cur_version) {
+    return;
+  }
+  introJs().setOptions({
+    prevLabel: '← 上一步',
+    nextLabel: '下一步 →',
+    skipLabel: '跳过',
+    doneLabel: '知道了',
+    exitOnOverlayClick: false //点击空白区域是否关闭提示组件
+  }).oncomplete(function(){
+    //点击跳过按钮后执行的事件(这里保存对应的版本号到缓存,并且设置有效期为100天）
+    Vue.ls.set('intro_cache_' + module, cur_version, 100 * 24 * 60 * 60 * 1000);
+  }).onexit(function(){
+    //点击结束按钮后， 执行的事件
+    Vue.ls.set('intro_cache_' + module, cur_version, 100 * 24 * 60 * 60 * 1000);
+  }).start()
 }

jshERP-web/src/views/dashboard/IndexChart.vue

@@ -2,32 +2,32 @@
   <div class="page-header-index-wide">
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="今日累计销售">
-          <a-tooltip title="统计今日零售和销售单据数据" slot="action">
+        <chart-card :loading="loading" title="今日累计销售" data-step="1" data-intro="统计今日零售和销售单据的总金额">
+          <a-tooltip title="统计今日零售和销售单据的总金额" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <head-info :content="statistics.todaySale"></head-info>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="本月累计销售">
-          <a-tooltip title="统计本月零售和销售单据数据" slot="action">
+        <chart-card :loading="loading" title="本月累计销售" data-step="2" data-intro="统计本月零售和销售单据的总金额">
+          <a-tooltip title="统计本月零售和销售单据的总金额" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <head-info :content="statistics.thisMonthSale"></head-info>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="今日累计采购">
-          <a-tooltip title="统计今日采购单据数据" slot="action">
+        <chart-card :loading="loading" title="今日累计采购" data-step="3" data-intro="统计今日采购单据的总金额">
+          <a-tooltip title="统计今日采购单据的总金额" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <head-info :content="statistics.todayBuy"></head-info>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="本月累计采购">
-          <a-tooltip placement="left" title="统计本月采购单据数据" slot="action">
+        <chart-card :loading="loading" title="本月累计采购" data-step="4" data-intro="统计本月采购单据的总金额">
+          <a-tooltip placement="left" title="统计本月采购单据的总金额" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <head-info :content="statistics.thisMonthBuy"></head-info>
@@ -36,19 +36,20 @@
     </a-row>
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
-        <a-card :loading="loading" :bordered="false" :body-style="{paddingRight: '5'}">
+        <a-card :loading="loading" :bordered="false" :body-style="{paddingRight: '5'}" data-step="5" data-intro="统计往前6个月每月销售的总金额">
           <bar title="销售统计" :height="410" :yaxisText="yaxisText" :dataSource="salePriceData"/>
         </a-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
-        <a-card :loading="loading" :bordered="false" :body-style="{paddingRight: '5'}">
+        <a-card :loading="loading" :bordered="false" :body-style="{paddingRight: '5'}" data-step="6" data-intro="统计往前6个月每月采购的总金额">
           <bar title="采购统计" :height="410" :yaxisText="yaxisText" :dataSource="buyPriceData"/>
         </a-card>
       </a-col>
     </a-row>
     <a-row :gutter="24">
       <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '5px' }">
-        <a-card :bordered="false" :body-style="{padding: '5'}">
+        <a-card :bordered="false" :body-style="{padding: '5'}" data-step="7" data-intro="展示服务到期时间（快到期时会出现续费链接，请注意及时续费）、
+          用户数量（是指最多可以录入的用户数量）、版权信息">
           <div class="hidden-xs" style="float:right;">&copy; 2015-2030 {{systemTitle}} V3.0</div>
           <a-tag v-if="tenant.type==0" color="blue">试用到期：{{tenant.expireTime}}</a-tag>
           <a-tag v-if="tenant.type==0" color="blue">试用用户：{{tenant.userCurrentNum}}/{{tenant.userNumLimit}}</a-tag>
@@ -72,6 +73,7 @@
   import HeadInfo from '@/components/tools/HeadInfo.vue'
   import Trend from '@/components/Trend'
   import { getBuyAndSaleStatistics, buyOrSalePrice, getPlatformConfigByKey } from '@/api/api'
+  import { handleIntroJs } from "@/utils/util"
   import { getAction } from '../../api/manage'
 
   export default {
@@ -117,6 +119,9 @@
       this.initInfo()
       this.initWithTenant()
     },
+    mounted() {
+      handleIntroJs('indexChart', 1)
+    },
     methods: {
       initInfo () {
         getBuyAndSaleStatistics(null).then((res)=>{

jshERP-web/yarn.lock

@@ -6253,6 +6253,11 @@ intersperse@^1.0.0:
   resolved "https://registry.npmjs.org/intersperse/-/intersperse-1.0.0.tgz#f2561fb1cfef9f5277cc3347a22886b4351a5181"
   integrity sha1-8lYfsc/vn1J3zDNHoiiGtDUaUYE=
 
+intro.js@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.nlark.com/intro.js/download/intro.js-4.2.2.tgz#9077549cc6ef697e78d18d1c05003b7471281e1a"
+  integrity sha1-kHdUnMbvaX540Y0cBQA7dHEoHho=
+
 invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"