Browse Source

feat: 评测流程异常优化处理

TIANYONG 1 year ago
parent
commit
271db74c5d

+ 9 - 2
src/page-instrument/evaluat-model/delay-check/index.tsx

@@ -1,6 +1,6 @@
 import { Button, Popup } from "vant";
 import styles from "./index.module.less";
-import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
+import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { api_toggleTune, getEarphone, removeResult, sendResult, addCheckPlayEnd, removeCheckPlayEnd } from "/src/helpers/communication";
 import { Vue3Lottie } from "vue3-lottie";
 import bg from "./json/bg.json";
@@ -190,7 +190,14 @@ export default defineComponent({
 			data.count = 0
 			data.startTuneResult = false
 		}
-
+		watch(
+			() => evaluatingData.delayCheckSocketError,
+			() => {
+				if (evaluatingData.delayCheckSocketError) {
+					resetCheck()
+				}
+			}
+		);
 		return () => (
 			<Popup
 				teleport="body"

+ 51 - 0
src/view/abnormal-pop/icon_cancel.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="117px" height="37px" viewBox="0 0 117 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>button-normal备份</title>
+    <defs>
+        <linearGradient x1="50%" y1="2.13785238%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#E9E9E9" offset="0%"></stop>
+            <stop stop-color="#C9C9C9" offset="100%"></stop>
+        </linearGradient>
+        <path d="M0,17 C0,7.61115925 7.60904153,0 16.9971663,0 L100.002834,0 C109.390109,0 117,7.60909491 117,17 L117,17 C117,26.3888407 109.390958,34 100.002834,34 L16.9971663,34 C7.60989058,34 0,26.3909051 0,17 L0,17 Z" id="path-2"></path>
+        <filter x="-0.9%" y="-2.9%" width="101.7%" height="111.8%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.804223987   0 0 0 0 0.804223987   0 0 0 0 0.804223987  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <filter x="-1.7%" y="-5.9%" width="103.4%" height="117.6%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <text id="text-5" font-family="STYuanti-SC-Bold, Yuanti SC" font-size="16" font-weight="bold" letter-spacing="0.914285714" fill="#FFFFFF">
+            <tspan x="41.5857143" y="22">取消</tspan>
+        </text>
+        <filter x="-7.9%" y="-18.2%" width="115.9%" height="145.5%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.510962887   0 0 0 0 0.510962887   0 0 0 0 0.510962887  0 0 0 0.597490644 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="曲谱评测(按钮合集)" transform="translate(-80.000000, -250.000000)">
+            <g id="弹窗备份" transform="translate(70.000000, 135.300000)">
+                <g id="button-normal备份" transform="translate(10.000000, 115.608737)">
+                    <g id="button-normal">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                        <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                    </g>
+                    <path d="M5.29281147,8.58018897 C7.4390966,13.9921969 10.1571046,16.6982008 13.4468356,16.6982008 C18.2676985,16.6982008 95.1625096,16.6982008 101.90185,16.6982008 C106.394743,16.6982008 109.960365,13.7988005 112.598716,8 C113.992892,13.5751446 114.565408,17.2438095 114.316264,19.0059945 C114.316264,19.0059945 114.316264,19.0059945 114.316264,19.0059945 C113.296432,26.2192179 107.122625,31.58155 99.8376644,31.5815344 L11.3446737,31.5815344 C5.11489123,25.4571796 2,20.6627351 2,17.1982008 C2,13.7336665 3.09760382,10.8609959 5.29281147,8.58018897 Z" id="矩形" fill="#EBEBEB" opacity="0.499798729"></path>
+                    <g id="编组-6" opacity="0.85" transform="translate(7.706999, 10.293001) rotate(-5.000000) translate(-7.706999, -10.293001) translate(1.477345, 3.038666)" fill="#FFFFFF">
+                        <ellipse id="椭圆形" opacity="0.882866269" transform="translate(7.522655, 4.961334) rotate(44.000000) translate(-7.522655, -4.961334) " cx="7.52265471" cy="4.96133431" rx="3" ry="4"></ellipse>
+                        <ellipse id="椭圆形备份-3" opacity="0.882866269" transform="translate(3.175326, 11.321004) rotate(44.000000) translate(-3.175326, -11.321004) " cx="3.17532553" cy="11.3210042" rx="2" ry="2.5"></ellipse>
+                    </g>
+                    <g id="取消" fill="#FFFFFF" fill-opacity="1">
+                        <use filter="url(#filter-6)" xlink:href="#text-5"></use>
+                        <use xlink:href="#text-5"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

+ 51 - 0
src/view/abnormal-pop/icon_confirm.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="117px" height="37px" viewBox="0 0 117 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>button-normal备份 4</title>
+    <defs>
+        <linearGradient x1="47.3839597%" y1="0%" x2="47.3839597%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#5BECFF" offset="0%"></stop>
+            <stop stop-color="#259CFE" offset="100%"></stop>
+        </linearGradient>
+        <path d="M0,17 C0,7.61115925 7.60904153,0 16.9971663,0 L100.002834,0 C109.390109,0 117,7.60909491 117,17 L117,17 C117,26.3888407 109.390958,34 100.002834,34 L16.9971663,34 C7.60989058,34 0,26.3909051 0,17 L0,17 Z" id="path-2"></path>
+        <filter x="-0.9%" y="-2.9%" width="101.7%" height="111.8%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.140022123   0 0 0 0 0.580018696   0 0 0 0 0.741724871  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <filter x="-1.7%" y="-5.9%" width="103.4%" height="117.6%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <text id="text-5" font-family="STYuanti-SC-Bold, Yuanti SC" font-size="16" font-weight="bold" letter-spacing="0.914285714" fill="#FFFFFF">
+            <tspan x="41.5857143" y="22">确定</tspan>
+        </text>
+        <filter x="-3.2%" y="-4.5%" width="106.3%" height="118.2%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.161975631   0 0 0 0 0.583690214   0 0 0 0 0.702658833  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="曲谱评测(按钮合集)" transform="translate(-203.000000, -250.000000)">
+            <g id="弹窗备份" transform="translate(70.000000, 135.300000)">
+                <g id="button-normal备份-4" transform="translate(133.000000, 115.608737)">
+                    <g id="button-normal">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                        <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                    </g>
+                    <path d="M5.29281147,8.58018897 C7.4390966,13.9921969 10.1571046,16.6982008 13.4468356,16.6982008 C18.2676985,16.6982008 95.1625096,16.6982008 101.90185,16.6982008 C106.394743,16.6982008 109.960365,13.7988005 112.598716,8 C113.992892,13.5751446 114.565408,17.2438095 114.316264,19.0059945 C114.316264,19.0059945 114.316264,19.0059945 114.316264,19.0059945 C113.296432,26.2192179 107.122625,31.58155 99.8376644,31.5815344 L11.3446737,31.5815344 C5.11489123,25.4571796 2,20.6627351 2,17.1982008 C2,13.7336665 3.09760382,10.8609959 5.29281147,8.58018897 Z" id="矩形" fill="#1CACF1" opacity="0.499798729"></path>
+                    <g id="编组-6" opacity="0.85" transform="translate(7.706999, 10.293001) rotate(-5.000000) translate(-7.706999, -10.293001) translate(1.477345, 3.038666)" fill="#FFFFFF">
+                        <ellipse id="椭圆形" opacity="0.882866269" transform="translate(7.522655, 4.961334) rotate(44.000000) translate(-7.522655, -4.961334) " cx="7.52265471" cy="4.96133431" rx="3" ry="4"></ellipse>
+                        <ellipse id="椭圆形备份-3" opacity="0.882866269" transform="translate(3.175326, 11.321004) rotate(44.000000) translate(-3.175326, -11.321004) " cx="3.17532553" cy="11.3210042" rx="2" ry="2.5"></ellipse>
+                    </g>
+                    <g id="确定" fill="#FFFFFF" fill-opacity="1">
+                        <use filter="url(#filter-6)" xlink:href="#text-5"></use>
+                        <use xlink:href="#text-5"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

+ 49 - 0
src/view/abnormal-pop/icon_title.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="32px" viewBox="0 0 100 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>提示</title>
+    <defs>
+        <linearGradient x1="47.3839597%" y1="0%" x2="47.3839597%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#5BECFF" offset="0%"></stop>
+            <stop stop-color="#259CFE" offset="100%"></stop>
+        </linearGradient>
+        <path d="M96.7823788,0 L90.5846608,22.7759342 C89.8240153,26.0573606 86.9400515,28.7174823 84.1431474,28.7174823 L14.9318296,28.7174823 C12.1349256,28.7174823 9.25096178,26.0573606 8.4903162,22.7759342 L2.2925983,0 L96.7823788,0 Z" id="path-2"></path>
+        <filter x="-1.1%" y="-3.5%" width="102.1%" height="113.9%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.140022123   0 0 0 0 0.580018696   0 0 0 0 0.741724871  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <filter x="-2.1%" y="-7.0%" width="104.2%" height="120.9%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <text id="text-5" font-family="STYuanti-SC-Bold, Yuanti SC" font-size="16" font-weight="bold" letter-spacing="0.888888889" fill="#FFFFFF">
+            <tspan x="33.219328" y="18.8437604">提示</tspan>
+        </text>
+        <filter x="-8.4%" y="-11.4%" width="116.7%" height="131.8%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.0669194505   0 0 0 0 0.604883166   0 0 0 0 0.531826365  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="曲谱评测(按钮合集)" transform="translate(-152.000000, -135.000000)">
+            <g id="弹窗备份" transform="translate(70.000000, 135.300000)">
+                <g id="提示" transform="translate(82.000000, 0.000000)">
+                    <g id="编组-18">
+                        <path d="M95.5553244,0 C97.3792994,7.65854702e-15 99.0141649,1.12535386 99.665355,2.82912494 L100,3.705 L0.001,3.705 L0.335992412,2.82912494 C0.987182575,1.12535386 2.62204809,2.1114156e-15 4.44602301,0 L95.5553244,0 Z" id="形状结合" fill="#2494BD"></path>
+                        <g id="矩形">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        </g>
+                    </g>
+                    <g fill="#FFFFFF" fill-opacity="1">
+                        <use filter="url(#filter-6)" xlink:href="#text-5"></use>
+                        <use xlink:href="#text-5"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

+ 43 - 0
src/view/abnormal-pop/index.module.less

@@ -0,0 +1,43 @@
+.fraction {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #fff;
+    background-color: #fff;
+    border-radius: 18px;
+    width: 244px;
+}
+
+.title {
+    position: relative;
+    width: 100px;
+    height: 30px;
+    top: -4.5px;
+
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.tip {
+    font-size: 13px;
+    color: #808080;
+    padding: 20px 0;
+}
+.btns{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+}
+.btn {
+    width: 40%;
+    height: 31px;
+    margin: 11px 0 17px 0;
+    line-height: 31px;
+    text-align: center;
+    border-radius: 36px;
+    font-size: 13px;
+}

+ 37 - 0
src/view/abnormal-pop/index.tsx

@@ -0,0 +1,37 @@
+import { defineComponent } from "vue";
+import styles from "./index.module.less";
+import state from "/src/state";
+import icon_title from './icon_title.svg'
+import icon_cancel from './icon_cancel.svg'
+import icon_confirm from './icon_confirm.svg'
+
+export default defineComponent({
+	name: "abnormal-pop",
+	props:{
+		contents: {
+			type: String,
+			default: () => ''
+		},
+		confirmBtn: {
+			type: Boolean,
+			default: false
+		}
+    },
+	emits: ["close"],
+	setup(props, { emit }) {
+		return () => (
+			<div class={styles.fraction}>
+				<div class={styles.title}>
+					<img src={icon_title} />
+				</div>
+				<div class={styles.tip}>{props.contents}</div>
+				{
+					props.confirmBtn && 
+					<div class={styles.btns}>
+						<img src={icon_confirm} class={styles.btn} onClick={() => emit("close", true)} />
+					</div>					
+				}
+			</div>
+		);
+	},
+});

+ 38 - 14
src/view/evaluating/index.tsx

@@ -1,6 +1,6 @@
 import styles from "./index.module.less";
 import { Snackbar } from "@varlet/ui";
-import { closeToast, showLoadingToast, showToast } from "vant";
+import { closeToast, showLoadingToast, showToast, Popup } from "vant";
 import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { getLeveByScore, getLeveByScoreMeasure, IEvaluatings } from "./evaluatResult";
 import {
@@ -41,6 +41,7 @@ import { usePageVisibility } from "@vant/use";
 import { browser } from "/src/utils";
 import { getAudioCurrentTime, toggleMutePlayAudio } from "../audio-list";
 import { handleStartTick } from "../tick";
+import AbnormalPop from "../abnormal-pop";
 
 const browserInfo = browser();
 export const evaluatingData = reactive({
@@ -71,6 +72,9 @@ export const evaluatingData = reactive({
 	isDisabledPlayMusic: false,
 	/** socket异常状态弹窗 */
 	socketErrorPop: false,
+	errorContents: '',
+	showConfirmBtn: false,
+	delayCheckSocketError: false,
 });
 
 /** 点击开始评测按钮 */
@@ -85,6 +89,7 @@ export const handleStartEvaluat = async () => {
 		} else {
 			// socket未连接
 			evaluatingData.socketErrorPop = true
+			evaluatingData.errorContents = '网络异常,正在重新链接...'
 		}
 		
 	}
@@ -354,7 +359,7 @@ export const handleEndEvaluat = (isComplete = false) => {
 	if (!evaluatingData.startBegin || state.modeType !== "evaluating") return;
 	evaluatingData.startBegin = false;
 	// 结束录音
-	api_stopRecording();
+	// api_stopRecording();
 	// 结束评测
 	setTimeout(() => {
 		endEvaluating({
@@ -388,7 +393,7 @@ export const handleEndBegin = () => {
  */
 export const handleCancelEvaluat = () => {
 	evaluatingData.evaluatings = {};
-	evaluatingData.startBegin = false;
+	evaluatingData.startBegin = true;
 	// 关闭提示
 	closeToast();
 	// 取消记录
@@ -403,6 +408,11 @@ export const handleCancelEvaluat = () => {
 	cancelEvaluating();
 	// 停止播放
 	handleStopPlay();
+	// 如果开启了摄像头, 结束录制视频
+	if (state.setting.camera) {
+		console.log("结束录制视频");
+		api_endCapture();
+	}
 };
 
 /** 查看报告 */
@@ -453,15 +463,23 @@ const handleAccompanyError = (res?: IPostMessage) => {
 		switch (type) {
 			case "playError":
 				// 播放异常
-				break;
 			case "enterBackground":
 				// App退到后台
-				break;
 			case "socketError":
 				// socket连接断开,评测中,则取消评测
+				// 延迟检测中
+				if (evaluatingData.soundEffectMode) {
+					evaluatingData.errorContents = '网络异常,正在重新链接...'
+					evaluatingData.delayCheckSocketError = true
+					api_checkSocketStatus()
+					return
+				}
+				// 评测中
 				if (state.modeType === "evaluating") {
 					handleCancelEvaluat();
+					evaluatingData.errorContents = '网络异常,重新开始评测?'
 					evaluatingData.socketErrorPop = true
+					evaluatingData.showConfirmBtn = true
 				}
 				break;	
 			case "recordError":
@@ -480,6 +498,13 @@ const handleSocketStatus = (res?: IPostMessage) => {
 	}
 }
 
+// 评测出现异常,再试一次
+const hanldeClosePop = async () => {
+	api_checkSocketStatus();
+	evaluatingData.errorContents = '正在重新链接...'
+	evaluatingData.showConfirmBtn = false
+}
+
 export default defineComponent({
 	name: "evaluating",
 	setup() {
@@ -561,14 +586,13 @@ export default defineComponent({
 			removeSocketStatus(handleSocketStatus);
 			console.log("卸载评测模块成功");
 		});
-		return () => <div>
-				{
-					evaluatingData.socketErrorPop && 
-					<div class={styles.tipBox}>
-						<div class={styles.tipContent}>网络异常,正在重新链接...</div>
-						{/* <div class={styles.tipBtn} onClick={resetCheck}>再来一次</div> */}
-					</div>
-				}
-		</div>;
+		return () => (
+			<div>
+				<Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={evaluatingData.socketErrorPop}>
+					<AbnormalPop onClose={hanldeClosePop} contents={evaluatingData.errorContents} confirmBtn={evaluatingData.showConfirmBtn} />
+				</Popup>
+
+			</div>
+		);
 	},
 });