From 083eea49b123f59cf67cfe802053db5efb57163d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?= <14103883+leaf-phos@user.noreply.gitee.com> Date: Mon, 28 Apr 2025 16:34:03 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=AF=BC=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/api/system/user.js | 9 ++ src/components/Avatar/index.vue | 5 +- src/store/getters.js | 1 + src/store/modules/user.js | 36 ++--- src/utils/guide.js | 161 +++++++++++++++++++ src/views/bst/area/index.vue | 6 +- src/views/bst/area/view/view.vue | 10 +- src/views/bst/areaSub/components/AreaMap.vue | 4 +- src/views/bst/areaSub/index.vue | 5 + src/views/bst/customerService/index.vue | 2 +- src/views/bst/index/MchIndex.vue | 12 +- src/views/bst/order/index.vue | 25 ++- src/views/bst/order/view/view.vue | 157 +++++++++++++----- src/views/monitor/operlog/index.vue | 16 +- src/views/system/user/UserLink.vue | 35 ---- src/views/system/user/index.vue | 17 +- src/views/system/user/view/view.vue | 13 +- 18 files changed, 381 insertions(+), 134 deletions(-) create mode 100644 src/utils/guide.js delete mode 100644 src/views/system/user/UserLink.vue diff --git a/package.json b/package.json index 1832293..46f88af 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "clipboard": "2.0.8", "core-js": "3.37.1", "decimal.js": "^10.4.3", + "driver.js": "^1.3.5", "echarts": "5.4.0", "element-ui": "2.15.14", "file-saver": "2.0.5", diff --git a/src/api/system/user.js b/src/api/system/user.js index 3ce258b..bab6628 100644 --- a/src/api/system/user.js +++ b/src/api/system/user.js @@ -152,3 +152,12 @@ export function deptTreeSelect() { method: 'get' }) } + +// 已读导览 +export function readGuide(key) { + return request({ + url: '/system/user/guide', + method: 'put', + params: { key } + }) +} diff --git a/src/components/Avatar/index.vue b/src/components/Avatar/index.vue index 21c6031..4067106 100644 --- a/src/components/Avatar/index.vue +++ b/src/components/Avatar/index.vue @@ -72,13 +72,16 @@ export default { align-items: center; justify-content: center; border-radius: 50%; + overflow: hidden; + vertical-align: middle; ::v-deep .el-avatar { - display: flex; + display: inline-flex; align-items: center; justify-content: center; background-color: inherit; font-size: 16px; + vertical-align: middle; } } \ No newline at end of file diff --git a/src/store/getters.js b/src/store/getters.js index 74490a9..44b63b0 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -10,6 +10,7 @@ const getters = { userId: state => state.user.id, name: state => state.user.name, nickName: state => state.user.nickName, + guides: state => state.user.guides, introduction: state => state.user.introduction, roles: state => state.user.roles, permissions: state => state.user.permissions, diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 270b02b..90f6f4f 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -1,4 +1,5 @@ import { getInfo, login, logout } from '@/api/login'; +import { readGuide } from '@/api/system/user'; import { getToken, removeToken, setToken } from '@/utils/auth'; // import { Watermark } from '@pansy/watermark'; @@ -15,6 +16,7 @@ const user = { permissions: [], deptId: null, userType: null, + guides: [], }, mutations: { @@ -41,31 +43,12 @@ const user = { }, SET_NICK_NAME: (state, nickName) => { state.nickName = nickName; - - // if (watermark) { - // watermark.destroy(); - // } - // // 创建水印 - // watermark = new Watermark({ - // // 水印文案,支持多行 - // text: nickName, - // // 水印文案样式 - // font: { - // fontSize: 16, - // color: 'rgba(0, 0, 0)', - // fontFamily: 'sans-serif' - // }, - // // 水印之间的间距 - // gap: [300, 300], - // // 旋转角度 - // rotate: -20, - // // 设置水印层级 - // zIndex: 9999, - // opacity: 0.1, - // }) }, SET_USER_TYPE: (state, userType) => { state.userType = userType; + }, + SET_GUIDES: (state, guides) => { + state.guides = guides; } }, @@ -105,6 +88,7 @@ const user = { commit('SET_AVATAR', avatar) commit('SET_DEPT_ID', user.deptId) commit('SET_USER_TYPE', user.userType) + commit('SET_GUIDES', user.guides) resolve(res) }).catch(error => { reject(error) @@ -134,6 +118,14 @@ const user = { removeToken() resolve() }) + }, + // 添加导览 + ADD_GUIDES({commit, state}, key) { + return new Promise((resolve, reject) => { + readGuide(key).then(() => { + commit('SET_GUIDES', [...state.guides, key]) + }); + }); } } } diff --git a/src/utils/guide.js b/src/utils/guide.js new file mode 100644 index 0000000..c5c9574 --- /dev/null +++ b/src/utils/guide.js @@ -0,0 +1,161 @@ +/** + * 用户引导 + */ + +import store from "@/store"; +import { driver } from "driver.js"; +import "driver.js/dist/driver.css"; +export function startGuide(guideKey) { + let guides = store.getters.guides; + if (guides == null || !guides.includes(guideKey)) { + let guide = guideSet[guideKey]; + if (guide) { + guide.start(); + } + } +} + +const guideSet = { + MchIndex: { + start() { + const driverObj = driver({ + showProgress: true, + animate: true, + nextBtnText: '下一步', + prevBtnText: '上一步', + doneBtnText: '完成', + closeBtnText: '关闭', + allowClose: false, + onDestroyed: () => { + // 导览完成后调用接口 + store.dispatch("ADD_GUIDES", "MchIndex"); + }, + steps: [ + { + popover: { + title: '欢迎使用小鹿骑行管理系统', + description: '接下来我们将带您了解系统的主要功能区域', + side: "center", + align: 'center' + } + }, + { + element: '#mch-stat', + popover: { + title: '运营统计', + description: '这里显示您的运营数据统计信息,包括订单数量、金额等关键指标。', + side: "bottom", + align: 'start' + } + }, + { + element: '#device-stat', + popover: { + title: '车辆统计', + description: '这里展示设备相关的统计信息,包括设备总数、在线状态等。', + side: "bottom", + align: 'start' + } + }, + { + element: '#order-daily-stat', + popover: { + title: '每日流水统计', + description: '这里展示每日的订单流水统计图表,帮助您了解业务趋势。', + side: "left", + align: 'start' + } + }, + { + element: '#balance-panel', + popover: { + title: '账户信息', + description: '这里显示您的账户余额、待分润金额等信息,方便您随时查看收益情况。', + side: "right", + align: 'start' + } + }, + { + popover: { + title: '小程序管理', + description: ` +
+

您还可以通过小鹿骑行小程序随时随地管理您的业务,扫码即可体验。

+ +
+ `, + side: "center", + align: 'center' + } + } + ] + }); + + driverObj.drive(); + } + }, + AreaSub: { + start() { + const driverObj = driver({ + showProgress: true, + animate: true, + nextBtnText: '下一步', + prevBtnText: '上一步', + doneBtnText: '完成', + closeBtnText: '关闭', + allowClose: false, + onDestroyed: () => { + store.dispatch("ADD_GUIDES", "AreaSub"); + }, + steps: [ + { + popover: { + title: '子区域管理', + description: '欢迎使用子区域管理功能,这里您可以管理运营区下的子区域和电子围栏。', + side: "center", + align: 'center' + } + }, + { + element: '.sub-area-list', + popover: { + title: '子区域列表', + description: '左侧显示当前运营区下的所有子区域列表,您可以在这里查看和管理子区域。', + side: "right", + align: 'start' + } + }, + { + element: '.map-container', + popover: { + title: '地图操作区', + description: '右侧地图区域是您的主要操作区域,您可以在这里进行以下操作:\n1. 点击地图空白处添加新的子区域\n2. 点击已有区域进行编辑\n3. 拖动边界点调整区域范围\n4. 查看电子围栏分布', + side: "left", + align: 'start' + } + }, + { + element: '#add-sub', + popover: { + title: '新增子区域', + description: '点击按钮,即可开始在地图上绘制区域(停车区、禁行区、禁停区)', + side: "left", + align: 'start' + } + }, + { + element: '#area-edit', + popover: { + title: '电子围栏操作', + description: '点击此处可以编辑电子围栏', + side: "left", + align: 'start' + } + } + ] + }); + + driverObj.drive(); + } + } +} diff --git a/src/views/bst/area/index.vue b/src/views/bst/area/index.vue index 83275f9..a18e895 100644 --- a/src/views/bst/area/index.vue +++ b/src/views/bst/area/index.vue @@ -104,7 +104,7 @@ {{d.row[column.key]}} @@ -162,13 +162,24 @@ - + + + @@ -194,10 +198,14 @@ diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue index c390b8a..2b0adfa 100644 --- a/src/views/system/user/index.vue +++ b/src/views/system/user/index.vue @@ -119,12 +119,6 @@ - - @@ -147,7 +141,10 @@