|
|
@@ -1,4 +1,4 @@
|
|
|
-import { Teleport, defineComponent, nextTick, onMounted, ref } from "vue";
|
|
|
+import { PropType, Teleport, defineComponent, nextTick, onMounted, ref } from "vue";
|
|
|
import { Config, DriveStep, PopoverDOM, State, driver } from "driver.js";
|
|
|
import "driver.js/dist/driver.css";
|
|
|
import state from "/src/state";
|
|
|
@@ -12,10 +12,28 @@ const endGuide = (guideInfo: any) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+/**
|
|
|
+ * 按钮状态
|
|
|
+ */
|
|
|
+type ButtonStatus = {
|
|
|
+ /** 声部状态 */
|
|
|
+ subjectStatus?: Boolean;
|
|
|
+ /** 练习模式 */
|
|
|
+ modelTypeStatus?: Boolean;
|
|
|
+};
|
|
|
+
|
|
|
/** 练习模式 */
|
|
|
export const PractiseDriver = defineComponent({
|
|
|
name: "PractiseDriver",
|
|
|
- setup() {
|
|
|
+ props: {
|
|
|
+ // 按钮状态
|
|
|
+ statusAll: {
|
|
|
+ type: Object as PropType<ButtonStatus>,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const driverNextStatus = ref(false);
|
|
|
// 初始化部分引导位置
|
|
|
const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
options.config.stageRadius = 5;
|
|
|
@@ -27,27 +45,19 @@ export const PractiseDriver = defineComponent({
|
|
|
};
|
|
|
|
|
|
const driverOptions = (): Config => {
|
|
|
- let length = state.setting.displayFingering ? 9 : 8;
|
|
|
+ // 指法
|
|
|
+ let length = state.setting.displayFingering ? 10 : 9;
|
|
|
+ // 声部
|
|
|
+ if (!props.statusAll.subjectStatus) {
|
|
|
+ length -= 1;
|
|
|
+ }
|
|
|
+ // 练习模式
|
|
|
+ if(!props.statusAll.modelTypeStatus) {
|
|
|
+ length -= 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(props.statusAll, 'statusAll', length)
|
|
|
|
|
|
- // 乐器方向不一样引导位置不一样
|
|
|
- const instrumentDirection: DriveStep = {
|
|
|
- element: ".driver-7",
|
|
|
- popover: {
|
|
|
- title: "",
|
|
|
- description: "",
|
|
|
- popoverClass: `popoverClass ${state.fingeringInfo.direction === "transverse" ? "popoverClass7" : "popoverClass7-1"}`,
|
|
|
- align: state.fingeringInfo.direction === "transverse" ? "start" : "center",
|
|
|
- side: state.fingeringInfo.direction === "transverse" ? "top" : "left",
|
|
|
- nextBtnText: "下一步7/" + length,
|
|
|
- showButtons: ["next"],
|
|
|
- onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
- if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
|
|
|
- },
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
let options: Config = {
|
|
|
showProgress: false,
|
|
|
allowClose: false,
|
|
|
@@ -56,6 +66,12 @@ export const PractiseDriver = defineComponent({
|
|
|
onCloseClick: () => {
|
|
|
onDriverClose();
|
|
|
},
|
|
|
+ onHighlightStarted: () => {
|
|
|
+ driverNextStatus.value = true;
|
|
|
+ },
|
|
|
+ onHighlighted: () => {
|
|
|
+ driverNextStatus.value = false;
|
|
|
+ },
|
|
|
steps: [
|
|
|
{
|
|
|
element: ".driver-1",
|
|
|
@@ -133,75 +149,97 @@ export const PractiseDriver = defineComponent({
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
- {
|
|
|
- element: ".driver-6",
|
|
|
- popover: {
|
|
|
- title: "",
|
|
|
- description: "",
|
|
|
- popoverClass: "popoverClass popoverClass6",
|
|
|
- align: "start",
|
|
|
- side: "top",
|
|
|
- nextBtnText: "下一步6/" + length,
|
|
|
- showButtons: ["next"],
|
|
|
- onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
- driverInitialPosition(popover, options);
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
] as DriveStep[],
|
|
|
};
|
|
|
+
|
|
|
+
|
|
|
+ if (props.statusAll.subjectStatus) {
|
|
|
+ options.steps?.push({
|
|
|
+ element: ".driver-10",
|
|
|
+ popover: {
|
|
|
+ title: "",
|
|
|
+ description: "",
|
|
|
+ popoverClass: "popoverClass popoverClass10",
|
|
|
+ align: "start",
|
|
|
+ side: "top",
|
|
|
+ nextBtnText: `下一步${options.steps.length + 1}/${length}`,
|
|
|
+ showButtons: ["next"],
|
|
|
+ onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
+ driverInitialPosition(popover, options);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ options.steps?.push({
|
|
|
+ element: ".driver-6",
|
|
|
+ popover: {
|
|
|
+ title: "",
|
|
|
+ description: "",
|
|
|
+ popoverClass: "popoverClass popoverClass6",
|
|
|
+ align: "start",
|
|
|
+ side: "top",
|
|
|
+ nextBtnText: `下一步${options.steps.length + 1}/${length}`, //"下一步6/" + length,
|
|
|
+ showButtons: ["next"],
|
|
|
+ onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
+ driverInitialPosition(popover, options);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
// 是否有指法图
|
|
|
if (state.setting.displayFingering) {
|
|
|
+ // 乐器方向不一样引导位置不一样
|
|
|
options.steps?.push(
|
|
|
- instrumentDirection,
|
|
|
{
|
|
|
- element: ".driver-8",
|
|
|
+ element: ".driver-7",
|
|
|
popover: {
|
|
|
title: "",
|
|
|
description: "",
|
|
|
- popoverClass: "popoverClass popoverClass8",
|
|
|
- align: "start",
|
|
|
- side: "bottom",
|
|
|
- nextBtnText: "下一步8/" + length,
|
|
|
+ popoverClass: `popoverClass ${state.fingeringInfo.direction === "transverse" ? "popoverClass7" : "popoverClass7-1"}`,
|
|
|
+ align: state.fingeringInfo.direction === "transverse" ? "start" : "center",
|
|
|
+ side: state.fingeringInfo.direction === "transverse" ? "top" : "left",
|
|
|
+ nextBtnText: `下一步${options.steps?.length + 1}/${length}`,
|
|
|
showButtons: ["next"],
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
- options.config.stageRadius = 1000;
|
|
|
- options.config.stagePadding = 0;
|
|
|
- try {
|
|
|
- const rect = options.state.activeElement?.getBoundingClientRect();
|
|
|
- popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
|
|
|
- } catch {}
|
|
|
+ if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
|
|
|
},
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- element: ".driver/" + length,
|
|
|
- popover: {
|
|
|
- title: "",
|
|
|
- description: "",
|
|
|
- popoverClass: "popoverClass popoverClass9 popoverClose",
|
|
|
- align: "end",
|
|
|
- side: "bottom",
|
|
|
- prevBtnText: "再看一遍",
|
|
|
- doneBtnText: "完成",
|
|
|
- showButtons: ["next", "previous"],
|
|
|
- onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
- options.config.stageRadius = 1000;
|
|
|
- options.config.stagePadding = 0;
|
|
|
- try {
|
|
|
- const rect = options.state.activeElement?.getBoundingClientRect();
|
|
|
- popover.wrapper.style.marginLeft = -((rect?.width || 0) / 2 - 8) + "px";
|
|
|
- } catch {}
|
|
|
- },
|
|
|
- onPrevClick: () => {
|
|
|
- driverObj.drive(0);
|
|
|
- },
|
|
|
- onNextClick: () => {
|
|
|
+ onCloseClick: () => {
|
|
|
onDriverClose();
|
|
|
},
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(props.statusAll.modelTypeStatus) {
|
|
|
+ options.steps?.push({
|
|
|
+ element: ".driver-8",
|
|
|
+ popover: {
|
|
|
+ title: "",
|
|
|
+ description: "",
|
|
|
+ popoverClass: "popoverClass popoverClass8 popoverClose",
|
|
|
+ align: "start",
|
|
|
+ side: "bottom",
|
|
|
+ prevBtnText: "再看一遍",
|
|
|
+ doneBtnText: "完成",
|
|
|
+ showButtons: ["next", "previous"],
|
|
|
+ onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
+ options.config.stageRadius = 1000;
|
|
|
+ options.config.stagePadding = 0;
|
|
|
+ try {
|
|
|
+ const rect = options.state.activeElement?.getBoundingClientRect();
|
|
|
+ popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
|
|
|
+ } catch {}
|
|
|
+ },
|
|
|
+ onPrevClick: () => {
|
|
|
+ driverObj.drive(0);
|
|
|
+ },
|
|
|
+ onNextClick: () => {
|
|
|
+ onDriverClose();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
} else {
|
|
|
options.steps?.push(
|
|
|
{
|
|
|
@@ -212,7 +250,7 @@ export const PractiseDriver = defineComponent({
|
|
|
popoverClass: "popoverClass popoverClass8",
|
|
|
align: "start",
|
|
|
side: "bottom",
|
|
|
- nextBtnText: "下一步8/9",
|
|
|
+ nextBtnText: `下一步${options.steps.length + 1}/${length}`,
|
|
|
showButtons: ["next"],
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
options.config.stageRadius = 1000;
|
|
|
@@ -253,19 +291,22 @@ export const PractiseDriver = defineComponent({
|
|
|
}
|
|
|
);
|
|
|
}
|
|
|
+
|
|
|
return options;
|
|
|
};
|
|
|
|
|
|
let driverObj: any;
|
|
|
|
|
|
const handleClickOutside = (event: any) => {
|
|
|
- if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
|
|
|
- if (driverObj.isLastStep()) {
|
|
|
- onDriverClose();
|
|
|
- } else {
|
|
|
- driverObj.moveNext(); // 跳转到下一步
|
|
|
+ // 如果高亮没有结束则下进行下一步
|
|
|
+ if (driverNextStatus.value) return;
|
|
|
+ if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
|
|
|
+ if (driverObj.isLastStep()) {
|
|
|
+ onDriverClose();
|
|
|
+ } else {
|
|
|
+ driverObj.moveNext(); // 跳转到下一步
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
};
|
|
|
|
|
|
const guideInfo = ref({} as any);
|
|
|
@@ -287,8 +328,9 @@ export const PractiseDriver = defineComponent({
|
|
|
document.addEventListener("click", handleClickOutside, true);
|
|
|
driverObj = driver(driverOptions());
|
|
|
nextTick(() => {
|
|
|
- driverObj.drive(0);
|
|
|
+ driverObj.drive(6);
|
|
|
showCloseBtn.value = true;
|
|
|
+ state.hasDriverPop = true;
|
|
|
});
|
|
|
}
|
|
|
} catch (e) {
|
|
|
@@ -309,6 +351,7 @@ export const PractiseDriver = defineComponent({
|
|
|
driverObj.destroy();
|
|
|
document.querySelector(".driver-popover-close-btn-custom")?.remove();
|
|
|
document.removeEventListener("click", handleClickOutside);
|
|
|
+ state.hasDriverPop = false
|
|
|
};
|
|
|
|
|
|
return () => (
|
|
|
@@ -329,7 +372,15 @@ export const PractiseDriver = defineComponent({
|
|
|
/** 跟练模式 */
|
|
|
export const FollowDriver = defineComponent({
|
|
|
name: "FollowDriver",
|
|
|
- setup() {
|
|
|
+ props: {
|
|
|
+ // 按钮状态
|
|
|
+ statusAll: {
|
|
|
+ type: Object as PropType<ButtonStatus>,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const driverNextStatus = ref(false);
|
|
|
// 初始化部分引导位置
|
|
|
const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
options.config.stageRadius = 5;
|
|
|
@@ -340,11 +391,22 @@ export const FollowDriver = defineComponent({
|
|
|
} catch {}
|
|
|
};
|
|
|
|
|
|
+ // 声部
|
|
|
+ let length = props.statusAll.subjectStatus ? 4 : 3;
|
|
|
const driverOptions: Config = {
|
|
|
showProgress: false,
|
|
|
allowClose: false,
|
|
|
popoverOffset: 3,
|
|
|
disableActiveInteraction: true,
|
|
|
+ onCloseClick: () => {
|
|
|
+ onDriverClose();
|
|
|
+ },
|
|
|
+ onHighlightStarted: () => {
|
|
|
+ driverNextStatus.value = true;
|
|
|
+ },
|
|
|
+ onHighlighted: () => {
|
|
|
+ driverNextStatus.value = false;
|
|
|
+ },
|
|
|
steps: [
|
|
|
{
|
|
|
element: ".follow-1",
|
|
|
@@ -354,15 +416,12 @@ export const FollowDriver = defineComponent({
|
|
|
popoverClass: "popoverClass popoverClassF1",
|
|
|
align: "end",
|
|
|
side: "top",
|
|
|
- nextBtnText: "下一步1/3",
|
|
|
+ nextBtnText: `下一步1/${length}`,
|
|
|
showButtons: ["next"],
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
options.config.stageRadius = 1000;
|
|
|
options.config.stagePadding = 0;
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -373,47 +432,61 @@ export const FollowDriver = defineComponent({
|
|
|
popoverClass: "popoverClass popoverClass5",
|
|
|
align: "start",
|
|
|
side: "top",
|
|
|
- nextBtnText: "下一步2/3",
|
|
|
+ nextBtnText: `下一步2/${length}`,
|
|
|
showButtons: ["next"],
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
driverInitialPosition(popover, options);
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- element: ".driver-6",
|
|
|
- popover: {
|
|
|
- title: "",
|
|
|
- description: "",
|
|
|
- popoverClass: "popoverClass popoverClass6 popoverClose",
|
|
|
- align: "start",
|
|
|
- side: "top",
|
|
|
- prevBtnText: "再看一遍",
|
|
|
- doneBtnText: "完成",
|
|
|
- showButtons: ["next", "previous"],
|
|
|
- onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
- driverInitialPosition(popover, options);
|
|
|
- },
|
|
|
- onPrevClick: () => {
|
|
|
- driverObj.drive(0);
|
|
|
- },
|
|
|
- onNextClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
+ if (props.statusAll.subjectStatus) {
|
|
|
+ driverOptions.steps?.push({
|
|
|
+ element: ".driver-10",
|
|
|
+ popover: {
|
|
|
+ title: "",
|
|
|
+ description: "",
|
|
|
+ popoverClass: "popoverClass popoverClass10",
|
|
|
+ align: "start",
|
|
|
+ side: "top",
|
|
|
+ nextBtnText: `下一步${driverOptions.steps.length + 1}/${length}`,
|
|
|
+ showButtons: ["next"],
|
|
|
+ onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
+ driverInitialPosition(popover, options);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ driverOptions.steps?.push({
|
|
|
+ element: ".driver-6",
|
|
|
+ popover: {
|
|
|
+ title: "",
|
|
|
+ description: "",
|
|
|
+ popoverClass: "popoverClass popoverClass6 popoverClose",
|
|
|
+ align: "start",
|
|
|
+ side: "top",
|
|
|
+ prevBtnText: "再看一遍",
|
|
|
+ doneBtnText: "完成",
|
|
|
+ showButtons: ["next", "previous"],
|
|
|
+ onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
+ driverInitialPosition(popover, options);
|
|
|
+ },
|
|
|
+ onPrevClick: () => {
|
|
|
+ driverObj.drive(0);
|
|
|
+ },
|
|
|
+ onNextClick: () => {
|
|
|
+ onDriverClose();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
let driverObj: any;
|
|
|
|
|
|
const handleClickOutside = (event: any) => {
|
|
|
+ if (driverNextStatus.value) return;
|
|
|
if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
|
|
|
if (driverObj.isLastStep()) {
|
|
|
onDriverClose();
|
|
|
@@ -438,10 +511,11 @@ export const FollowDriver = defineComponent({
|
|
|
}
|
|
|
if (!(guideInfo.value && guideInfo.value.followDriver)) {
|
|
|
document.addEventListener("click", handleClickOutside, true);
|
|
|
- driverObj = driver(driverOptions);
|
|
|
nextTick(() => {
|
|
|
+ driverObj = driver(driverOptions);
|
|
|
driverObj.drive(0);
|
|
|
showCloseBtn.value = true;
|
|
|
+ state.hasDriverPop = true;
|
|
|
});
|
|
|
}
|
|
|
} catch (e) {
|
|
|
@@ -462,6 +536,7 @@ export const FollowDriver = defineComponent({
|
|
|
driverObj.destroy();
|
|
|
document.querySelector(".driver-popover-close-btn-custom")?.remove();
|
|
|
document.removeEventListener("click", handleClickOutside);
|
|
|
+ state.hasDriverPop = false
|
|
|
};
|
|
|
|
|
|
return () => (
|
|
|
@@ -482,7 +557,15 @@ export const FollowDriver = defineComponent({
|
|
|
// 评测模式
|
|
|
export const EvaluatingDriver = defineComponent({
|
|
|
name: "EvaluatingDriver",
|
|
|
- setup() {
|
|
|
+ props: {
|
|
|
+ // 按钮状态
|
|
|
+ statusAll: {
|
|
|
+ type: Object as PropType<ButtonStatus>,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const driverNextStatus = ref(false);
|
|
|
// 初始化部分引导位置
|
|
|
const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
options.config.stageRadius = 5;
|
|
|
@@ -493,11 +576,23 @@ export const EvaluatingDriver = defineComponent({
|
|
|
} catch {}
|
|
|
};
|
|
|
|
|
|
+ // 声部
|
|
|
+ let length = props.statusAll.subjectStatus ? 5 : 4;
|
|
|
+
|
|
|
const driverOptions: Config = {
|
|
|
showProgress: false,
|
|
|
allowClose: false,
|
|
|
popoverOffset: 3,
|
|
|
disableActiveInteraction: true,
|
|
|
+ onCloseClick: () => {
|
|
|
+ onDriverClose();
|
|
|
+ },
|
|
|
+ onHighlightStarted: () => {
|
|
|
+ driverNextStatus.value = true;
|
|
|
+ },
|
|
|
+ onHighlighted: () => {
|
|
|
+ driverNextStatus.value = false;
|
|
|
+ },
|
|
|
steps: [
|
|
|
{
|
|
|
element: ".evaluting-1",
|
|
|
@@ -507,65 +602,92 @@ export const EvaluatingDriver = defineComponent({
|
|
|
popoverClass: "popoverClass popoverClassE1",
|
|
|
align: "end",
|
|
|
side: "top",
|
|
|
- nextBtnText: "下一步1/3",
|
|
|
+ nextBtnText: `下一步1/${length}`,
|
|
|
showButtons: ["next"],
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
options.config.stageRadius = 1000;
|
|
|
options.config.stagePadding = 0;
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- element: ".driver-5",
|
|
|
+ element: ".driver-4",
|
|
|
popover: {
|
|
|
title: "",
|
|
|
description: "",
|
|
|
- popoverClass: "popoverClass popoverClass5",
|
|
|
+ popoverClass: "popoverClass popoverClassE2",
|
|
|
align: "start",
|
|
|
side: "top",
|
|
|
- nextBtnText: "下一步2/3",
|
|
|
+ nextBtnText: `下一步2/${length}`,
|
|
|
showButtons: ["next"],
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
driverInitialPosition(popover, options);
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- element: ".driver-6",
|
|
|
+ element: ".driver-5",
|
|
|
popover: {
|
|
|
title: "",
|
|
|
description: "",
|
|
|
- popoverClass: "popoverClass popoverClass6 popoverClose",
|
|
|
+ popoverClass: "popoverClass popoverClass5",
|
|
|
align: "start",
|
|
|
side: "top",
|
|
|
- prevBtnText: "再看一遍",
|
|
|
- doneBtnText: "完成",
|
|
|
- showButtons: ["next", "previous"],
|
|
|
+ nextBtnText: `下一步3/${length}`,
|
|
|
+ showButtons: ["next"],
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
driverInitialPosition(popover, options);
|
|
|
},
|
|
|
- onPrevClick: () => {
|
|
|
- driverObj.drive(0);
|
|
|
- },
|
|
|
- onNextClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
- },
|
|
|
+ }
|
|
|
],
|
|
|
};
|
|
|
+
|
|
|
+ if (props.statusAll.subjectStatus) {
|
|
|
+ driverOptions.steps?.push({
|
|
|
+ element: ".driver-10",
|
|
|
+ popover: {
|
|
|
+ title: "",
|
|
|
+ description: "",
|
|
|
+ popoverClass: "popoverClass popoverClass10",
|
|
|
+ align: "start",
|
|
|
+ side: "top",
|
|
|
+ nextBtnText: `下一步${driverOptions.steps.length + 1}/${length}`,
|
|
|
+ showButtons: ["next"],
|
|
|
+ onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
+ driverInitialPosition(popover, options);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ driverOptions.steps?.push({
|
|
|
+ element: ".driver-6",
|
|
|
+ popover: {
|
|
|
+ title: "",
|
|
|
+ description: "",
|
|
|
+ popoverClass: "popoverClass popoverClass6 popoverClose",
|
|
|
+ align: "start",
|
|
|
+ side: "top",
|
|
|
+ prevBtnText: "再看一遍",
|
|
|
+ doneBtnText: "完成",
|
|
|
+ showButtons: ["next", "previous"],
|
|
|
+ onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
+ driverInitialPosition(popover, options);
|
|
|
+ },
|
|
|
+ onPrevClick: () => {
|
|
|
+ driverObj.drive(0);
|
|
|
+ },
|
|
|
+ onNextClick: () => {
|
|
|
+ onDriverClose();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
let driverObj: any;
|
|
|
|
|
|
const handleClickOutside = (event: any) => {
|
|
|
+ if (driverNextStatus.value) return;
|
|
|
if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
|
|
|
if (driverObj.isLastStep()) {
|
|
|
onDriverClose();
|
|
|
@@ -591,10 +713,11 @@ export const EvaluatingDriver = defineComponent({
|
|
|
}
|
|
|
if (!(guideInfo.value && guideInfo.value.evaluatingDriver)) {
|
|
|
document.addEventListener("click", handleClickOutside, true);
|
|
|
- driverObj = driver(driverOptions);
|
|
|
nextTick(() => {
|
|
|
+ driverObj = driver(driverOptions);
|
|
|
driverObj.drive(0);
|
|
|
showCloseBtn.value = true;
|
|
|
+ state.hasDriverPop = true;
|
|
|
});
|
|
|
} else {
|
|
|
driverObj.destroy();
|
|
|
@@ -615,7 +738,9 @@ export const EvaluatingDriver = defineComponent({
|
|
|
}
|
|
|
endGuide(guideInfo.value);
|
|
|
driverObj?.destroy();
|
|
|
+ document.querySelector(".driver-popover-close-btn-custom")?.remove();
|
|
|
document.removeEventListener("click", handleClickOutside);
|
|
|
+ state.hasDriverPop = false;
|
|
|
};
|
|
|
|
|
|
return () => (
|
|
|
@@ -637,6 +762,7 @@ export const EvaluatingDriver = defineComponent({
|
|
|
export const EvaluatingResultDriver = defineComponent({
|
|
|
name: "EvaluatingResultDriver",
|
|
|
setup() {
|
|
|
+ const driverNextStatus = ref(false);
|
|
|
// 初始化部分引导位置
|
|
|
const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }, position = 1) => {
|
|
|
options.config.stageRadius = 1000;
|
|
|
@@ -652,6 +778,15 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
allowClose: false,
|
|
|
popoverOffset: 3,
|
|
|
disableActiveInteraction: true,
|
|
|
+ onCloseClick: () => {
|
|
|
+ onDriverClose();
|
|
|
+ },
|
|
|
+ onHighlightStarted: () => {
|
|
|
+ driverNextStatus.value = true;
|
|
|
+ },
|
|
|
+ onHighlighted: () => {
|
|
|
+ driverNextStatus.value = false;
|
|
|
+ },
|
|
|
steps: [
|
|
|
{
|
|
|
element: ".evaluting-result-1",
|
|
|
@@ -667,9 +802,6 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
options.config.stageRadius = 12;
|
|
|
options.config.stagePadding = 10;
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -690,9 +822,6 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
|
|
|
} catch {}
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -708,9 +837,6 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
driverInitialPosition(popover, options, -1);
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -733,9 +859,6 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
onNextClick: () => {
|
|
|
onDriverClose();
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
@@ -743,6 +866,7 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
let driverObj: any;
|
|
|
|
|
|
const handleClickOutside = (event: any) => {
|
|
|
+ if (driverNextStatus.value) return;
|
|
|
if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
|
|
|
if (driverObj.isLastStep()) {
|
|
|
onDriverClose();
|
|
|
@@ -767,10 +891,11 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
}
|
|
|
if (!(guideInfo.value && guideInfo.value.evaluatingResultDriver)) {
|
|
|
document.addEventListener("click", handleClickOutside, true);
|
|
|
- driverObj = driver(driverOptions);
|
|
|
nextTick(() => {
|
|
|
+ driverObj = driver(driverOptions);
|
|
|
driverObj.drive(0);
|
|
|
showCloseBtn.value = true;
|
|
|
+ state.hasDriverPop = true;
|
|
|
});
|
|
|
}
|
|
|
} catch (e) {
|
|
|
@@ -778,7 +903,11 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- getAllGuidance();
|
|
|
+ onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ getAllGuidance();
|
|
|
+ })
|
|
|
+ })
|
|
|
|
|
|
// 结束关闭弹窗
|
|
|
const onDriverClose = () => {
|
|
|
@@ -791,6 +920,7 @@ export const EvaluatingResultDriver = defineComponent({
|
|
|
driverObj.destroy();
|
|
|
document.querySelector(".driver-popover-close-btn-custom")?.remove();
|
|
|
document.removeEventListener("click", handleClickOutside);
|
|
|
+ state.hasDriverPop = false
|
|
|
};
|
|
|
|
|
|
return () => (
|
|
|
@@ -819,6 +949,7 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
},
|
|
|
},
|
|
|
setup(props) {
|
|
|
+ const driverNextStatus = ref(false);
|
|
|
// state.isPercussion 是否为打击乐
|
|
|
// 初始化部分引导位置
|
|
|
const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }, position = 1) => {
|
|
|
@@ -848,9 +979,6 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
driverInitialPosition(popover, options);
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -878,9 +1006,6 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
onNextClick: () => {
|
|
|
onDriverClose();
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
@@ -905,9 +1030,6 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
onNextClick: () => {
|
|
|
onDriverClose();
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
@@ -928,9 +1050,6 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
driverInitialPosition(popover, options);
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -946,9 +1065,6 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
driverInitialPosition(popover, options);
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
@@ -967,9 +1083,6 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
|
|
|
driverInitialPosition(popover, options);
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -997,9 +1110,6 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
onNextClick: () => {
|
|
|
onDriverClose();
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
}
|
|
|
);
|
|
|
@@ -1024,9 +1134,6 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
onNextClick: () => {
|
|
|
onDriverClose();
|
|
|
},
|
|
|
- onCloseClick: () => {
|
|
|
- onDriverClose();
|
|
|
- },
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
@@ -1037,6 +1144,15 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
allowClose: false,
|
|
|
popoverOffset: 3,
|
|
|
disableActiveInteraction: true,
|
|
|
+ onCloseClick: () => {
|
|
|
+ onDriverClose();
|
|
|
+ },
|
|
|
+ onHighlightStarted: () => {
|
|
|
+ driverNextStatus.value = true;
|
|
|
+ },
|
|
|
+ onHighlighted: () => {
|
|
|
+ driverNextStatus.value = false;
|
|
|
+ },
|
|
|
steps: steps,
|
|
|
};
|
|
|
|
|
|
@@ -1045,6 +1161,7 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
const guideInfo = ref({} as any);
|
|
|
|
|
|
const handleClickOutside = (event: any) => {
|
|
|
+ if (driverNextStatus.value) return;
|
|
|
if (driverObj.isActive() && (event.target.nodeName === "path" || event.target.classList.contains("driver-popover") || event.target.classList.contains("driver-overlay"))) {
|
|
|
if (driverObj.isLastStep()) {
|
|
|
onDriverClose();
|
|
|
@@ -1069,10 +1186,10 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
if (!(guideInfo.value && guideInfo.value.evaluatingReportDriver)) {
|
|
|
// 监听点击事件以实现点击空白区域跳转到下一步
|
|
|
document.addEventListener("click", handleClickOutside, true);
|
|
|
- driverObj = driver(driverOptions);
|
|
|
nextTick(() => {
|
|
|
+ driverObj = driver(driverOptions);
|
|
|
driverObj.drive();
|
|
|
-
|
|
|
+ state.hasDriverPop = true;
|
|
|
showCloseBtn.value = true;
|
|
|
});
|
|
|
}
|
|
|
@@ -1094,6 +1211,7 @@ export const EvaluatingReportDriver = defineComponent({
|
|
|
driverObj.destroy();
|
|
|
document.querySelector(".driver-popover-close-btn-custom")?.remove();
|
|
|
document.removeEventListener("click", handleClickOutside);
|
|
|
+ state.hasDriverPop = false
|
|
|
};
|
|
|
|
|
|
return () => (
|
