日常开发

src/App.vue

@@ -11,9 +11,9 @@
 // const router = useRouter();
 
 // const data = reactive<any>({
-//   device_info: {},//设备信息
+//   deviceInfo: {},//设备信息
 // });
-// const { device_info } = toRefs(data);
+// const { deviceInfo } = toRefs(data);
 
 
 // /**
@@ -32,13 +32,13 @@
 //     }
 //     //接收设备信息
 //     if (e?.device_info) {
-//       device_info.value = e.device_info;
-//       let handcontroller_id = device_info.value.handcontroller_id;
+//       deviceInfo.value = e.device_info;
+//       let handcontroller_id = deviceInfo.value.handcontroller_id;
 //       stateHand(handcontroller_id);
 //     }
 //     //获取手势状态
 //     if (e?.cmd == 'get_handcontroller_state' && e?.state == 0) {
-//       let handcontroller_id = device_info.value.handcontroller_id;
+//       let handcontroller_id = deviceInfo.value.handcontroller_id;
 //       startHand(handcontroller_id);
 //     }
 //     //刷新

src/components/Header/index.vue

@@ -4,13 +4,20 @@
     <div class="toolList" v-if="showTool">
       <div class="li">{{ date }}</div>
       <div class="li btn speck" :class="{ 'on': voice, 'off': !voice }" @click="getVoice"></div>
+      <div class="li btn music" v-if="music.show">
+        <el-select v-model="music.id" :popper-append-to-body="false" placeholder="请选择" @change="changeMusic">
+          <el-option v-for="item in music.list" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </div>
       <div class="li btn screen" :class="{ 'on': screen, 'off': !screen }" @click="getFullScreen"></div>
     </div>
     <div class="ranking" v-if="props.type == 'ranking'">
       <img src="@/assets/images/ranking/ranking.png" />
     </div>
     <div class="logo" :class="{ logo2: logoClass == 'logo2' }" v-else>
-      <div class="title" v-if="parameter.project"><i></i><span>{{ dic.project[parameter.project] || "" }}</span></div>
+      <div class="title" v-if="parameter.project">
+        <i></i><span>{{ dic.project[parameter.project] || "" }}</span>
+      </div>
       <div class="logoBox" v-else>
         <template v-if="userInfo?.logo_url">
           <img v-if="userInfo?.logo_url" :src="userInfo.logo_url" />
@@ -24,20 +31,21 @@
   </div>
 </template>
 <script setup lang="ts">
-import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech'
-import dataDictionary from "@/utils/dataDictionary"
+import useAppStore from '@/store/modules/app';
+import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
+import dataDictionary from '@/utils/dataDictionary';
 const { proxy } = getCurrentInstance() as any;
-const emit = defineEmits(['confirmExit']);
+const emit = defineEmits(['confirmExit', 'setMusic']);
 const router = useRouter();
 const route = useRoute();
 const dic: any = dataDictionary;
-const myInfo: any = localStorage.getItem("userInfo");
+const myInfo: any = localStorage.getItem('userInfo');
 
 //父值
 const props = defineProps({
   type: {
     type: String,
-    default: ""
+    default: ''
   },
   showClose: {
     type: Boolean,
@@ -49,80 +57,111 @@ const props = defineProps({
   },
   closeClass: {
     type: String,
-    default: ""
+    default: ''
   },
   logoClass: {
     type: String,
-    default: ""
-  },
+    default: ''
+  }
 });
 
 const data = reactive<any>({
-  userInfo: {},//用户信息
-  timerManager: {},//计时器管理
-  parameter: {},//参数
-  date: "",//当前时间
+  userInfo: {}, //用户信息
+  timerManager: {}, //计时器管理
+  parameter: {}, //参数
+  date: '', //当前时间
   voice: true,
-  screen: true
+  screen: true,
+  music: { id: null, list: [], show: false }
 });
-const { userInfo, timerManager, parameter, date, voice, screen } = toRefs(data);
+const { userInfo, timerManager, parameter, date, voice, screen, music } = toRefs(data);
 
 /**
  * 更新时间
-*/
+ */
 const setDate = () => {
   setInterval(() => {
     date.value = proxy?.$utils.getDate();
-  }, 1000)
+  }, 1000);
 };
 
 /**
  * 声音控制
-*/
+ */
 const getVoice = () => {
   voice.value = !voice.value;
-  localStorage.setItem("voice", voice.value);
+  localStorage.setItem('voice', voice.value);
   controlMusic();
 };
 
 /**
  * 屏幕模式
-*/
+ */
 const getFullScreen = () => {
   screen.value = !screen.value;
-  localStorage.setItem("screen", screen.value);
+  localStorage.setItem('screen', screen.value);
   proxy?.$utils.fullScreen();
 };
 
 /**
  * 确定退出
-*/
+ */
 const confirmExit = () => {
   emit('confirmExit', {});
 };
 
+/**
+ * 选择音乐
+ */
+const changeMusic = (data: any) => {
+  emit('setMusic', data);
+};
+
+//获取音乐
+const getMusic = async () => {
+  const list: any = useAppStore().getMusic();
+  if (list.length) {
+    music.value.list = list;
+  } else {
+    await proxy?.$http.train.musicList().then((res: any) => {
+      if (res.data.length > 0) {
+        let myList: any = res.data;
+        music.value.list = myList;
+        useAppStore().setMusic(myList);
+      }
+    });
+  }
+  console.log('music.value', music.value);
+  music.value.show = true;
+};
+
 onBeforeMount(() => {
   setDate();
   parameter.value = route.query;
   //initSpeech();
   //音控
-  let voiceData: any = localStorage.getItem("voice");
+  let voiceData: any = localStorage.getItem('voice');
   if (voiceData != undefined && voiceData == 'false') {
     voice.value = false;
-    speckCancel()
+    speckCancel();
   } else {
     voice.value = true;
   }
   //屏幕
-  let screenData = localStorage.getItem("screen");
+  let screenData = localStorage.getItem('screen');
   if (screenData != undefined && screenData == 'false') {
     screen.value = false;
   } else {
     screen.value = true;
   }
+  //音乐
+  if (parameter.value.music) {
+    music.value.id = Number(parameter.value.music);
+    getMusic();
+  }
   //用户信息
   userInfo.value = JSON.parse(myInfo);
-})
+});
 </script>
 <style lang="scss" scoped>
 $topPadding: 5.19rem;
@@ -157,7 +196,7 @@ $waiPadding: 6.51rem;
     font-size: 2.5rem;
     height: 3rem;
     line-height: 3rem;
-    color: #00FFE8;
+    color: #00ffe8;
   }
 
   .title {
@@ -169,7 +208,7 @@ $waiPadding: 6.51rem;
     color: #ffffff;
     font-size: 1.7rem;
     // margin-left: 1rem;
-    background: linear-gradient(180deg, #FFB200 0%, #ED7905 72%);
+    background: linear-gradient(180deg, #ffb200 0%, #ed7905 72%);
     box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.5);
     display: flex;
     align-items: center;
@@ -178,7 +217,7 @@ $waiPadding: 6.51rem;
       width: 2.5rem;
       height: 2.1rem;
       margin-right: 0.8rem;
-      background-image: url("@/assets/images/test/ai.png");
+      background-image: url('@/assets/images/test/ai.png');
       background-position: center;
       background-repeat: no-repeat;
       background-size: 100% 100%;
@@ -193,8 +232,8 @@ $waiPadding: 6.51rem;
 .close {
   position: absolute;
   // right: calc($waiPadding - 3.2rem);
-  right: calc($topPadding / 2 - 3.2rem/4);
-  top: calc($topPadding / 2 - 3.2rem/4);
+  right: calc($topPadding / 2 - 3.2rem / 4);
+  top: calc($topPadding / 2 - 3.2rem / 4);
 }
 
 .close2 {
@@ -208,7 +247,7 @@ $waiPadding: 6.51rem;
   position: absolute;
   right: $waiPadding;
   top: calc($topPadding / 2);
-  color: #00FFE8;
+  color: #00ffe8;
   font-size: 1.1rem;
   display: flex;
   align-items: center;
@@ -235,11 +274,11 @@ $waiPadding: 6.51rem;
   }
 
   .speck.on {
-    background-image: url("@/assets/images/common/speck1.png");
+    background-image: url('@/assets/images/common/speck1.png');
   }
 
   .speck.off {
-    background-image: url("@/assets/images/common/speck2.png");
+    background-image: url('@/assets/images/common/speck2.png');
   }
 
   .screen {
@@ -249,11 +288,27 @@ $waiPadding: 6.51rem;
   }
 
   .screen.on {
-    background-image: url("@/assets/images/common/screen1.png");
+    background-image: url('@/assets/images/common/screen1.png');
   }
 
   .screen.off {
-    background-image: url("@/assets/images/common/screen2.png");
+    background-image: url('@/assets/images/common/screen2.png');
+  }
+
+  .music {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    background-image: url('@/assets/images/common/music.png');
+    ::v-deep(.el-select__wrapper) {
+      width: 0;
+      height: 0;
+      padding: 0 0 0 0;
+      min-height: 20px;
+      .el-select__suffix {
+        display: none;
+      }
+    }
   }
 }
 

src/components/OptionWindow/index.vue

@@ -87,7 +87,7 @@
               >
                 <span>音乐</span>
                 <el-select v-model="optionForm.music" :popper-append-to-body="false" placeholder="请选择" clearable>
-                  <el-option v-for="item in musicList" :key="item.id" :label="item.name" :value="item.url" />
+                  <el-option v-for="item in musicList" :key="item.id" :label="item.name" :value="item.id" />
                 </el-select>
               </div>
             </div>
@@ -240,7 +240,7 @@ const open = async (data: any) => {
     optionForm.value.gesture = true;
     optionForm.value.time = 60; //默认60秒
     if (musicList.value.length > 0) {
-      optionForm.value.music = musicList.value[0].url; //默认第一首
+      optionForm.value.music = musicList.value[0].id; //默认第一首
     }
   } else if (['heartbeat'].includes(project.value.key)) {
     optionForm.value.time = 45; //默认45分钟

src/views/train/device.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Header @confirmExit="confirmExit"></Header>
+    <Header @confirmExit="confirmExit" @setMusic="setMusic"></Header>
     <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
       <div class="time" v-show="[42].includes(examState)">
         {{
@@ -115,6 +115,7 @@
 </template>
 
 <script setup name="TrainTest" lang="ts">
+import useAppStore from '@/store/modules/app';
 import { useWs } from '@/utils/trainWs';
 // import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
 import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
@@ -159,7 +160,8 @@ const data = reactive<any>({
   showTestAgain: false, //再测一次按钮
   isLongRun: false, //是否为长跑项目
   isBackRun: false, //是否为折返跑项目
-  sid: null //WS的id
+  sid: null, //WS的id
+  musicList: [], //音乐列表
 });
 const {
   timerManager,
@@ -175,7 +177,8 @@ const {
   showTestAgain,
   isLongRun,
   isBackRun,
-  sid
+  sid,
+  musicList
 } = toRefs(data);
 
 /**
@@ -319,6 +322,14 @@ const getStartOneTest = () => {
     //计时项目才开
     if (needStart.value == true) {
     }
+    if (parameter.value.music && musicList.value.length) {
+      let obj = musicList.value.find((item: any) => {
+        return item.id == parameter.value.music;
+      });
+      if (obj != undefined) {
+        playMusic(obj.url);
+      }
+    }
     //时间为0的为正计时，大于0的为倒计时
     if (time.value.testTime == 0) {
       getCounting('+');
@@ -642,6 +653,32 @@ const countdownNumFormat = computed(() => {
   return proxy?.$utils.timeFormat(time.value.countdownNum);
 });
 
+/**
+ * 获取音乐
+ */
+const getMusic = async () => {
+  const list: any = useAppStore().getMusic();
+  if (list.length) {
+    musicList.value = list;
+  } else {
+    await proxy?.$http.train.musicList().then((res: any) => {
+      if (res.data.length > 0) {
+        let myList: any = res.data;
+        musicList.value = myList;
+        useAppStore().setMusic(myList);
+      }
+    });
+  }
+};
+
+/**
+ * 设置音乐
+ */
+const setMusic = async (data:any) => {
+  //console.log("data",data)
+  parameter.value.music = data;
+};
+
 onBeforeMount(() => {
   parameter.value = route.query;
   let project = parameter.value.project;

src/views/train/multiple.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Header @confirmExit="confirmExit"></Header>
+    <Header @confirmExit="confirmExit" @setMusic="setMusic"></Header>
     <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
       <div
         class="time"
@@ -93,6 +93,7 @@
 </template>
 
 <script setup name="Multiple" lang="ts">
+import useAppStore from '@/store/modules/app';
 import { useWs } from '@/utils/trainWs';
 // import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
 import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
@@ -136,7 +137,8 @@ const data = reactive<any>({
   exitStatus: 0, //退出响应次数
   sid: null, //WS的id
   chooseStudentArea: {}, //弹出手动选择对应的区号
-  device_info: {} //设备信息
+  deviceInfo: {}, //设备信息
+  musicList: [] //音乐列表
 });
 const {
   timerManager,
@@ -153,7 +155,8 @@ const {
   exitStatus,
   sid,
   chooseStudentArea,
-  device_info
+  deviceInfo,
+  musicList
 } = toRefs(data);
 
 /**
@@ -224,8 +227,13 @@ const getStartOneTest = () => {
     }
   }
   speckText('哨声');
-  if (parameter.value.music) {
-    playMusic(parameter.value.music);
+  if (parameter.value.music && musicList.value.length) {
+    let obj = musicList.value.find((item: any) => {
+      return item.id == parameter.value.music;
+    });
+    if (obj != undefined) {
+      playMusic(obj.url);
+    }
   }
   //显示再测一次按钮
   showTestAgain.value = true;
@@ -622,6 +630,32 @@ const getDevice = async () => {
   }
 };
 
+/**
+ * 获取音乐
+ */
+const getMusic = async () => {
+  const list: any = useAppStore().getMusic();
+  if (list.length) {
+    musicList.value = list;
+  } else {
+    await proxy?.$http.train.musicList().then((res: any) => {
+      if (res.data.length > 0) {
+        let myList: any = res.data;
+        musicList.value = myList;
+        useAppStore().setMusic(myList);
+      }
+    });
+  }
+};
+
+/**
+ * 设置音乐
+ */
+const setMusic = async (data: any) => {
+  //console.log("data",data)
+  parameter.value.music = data;
+};
+
 /**
  * 加载手势WS
  */
@@ -637,13 +671,13 @@ const initHand = () => {
     }
     //接收设备信息
     if (e?.device_info) {
-      device_info.value = e.device_info;
-      let handcontroller_id = device_info.value.handcontroller_id;
+      deviceInfo.value = e.device_info;
+      let handcontroller_id = deviceInfo.value.handcontroller_id;
       stateHand(handcontroller_id);
     }
     //获取手势状态
     if (e?.cmd == 'get_handcontroller_state' && e?.state == 0) {
-      let handcontroller_id = device_info.value.handcontroller_id;
+      let handcontroller_id = deviceInfo.value.handcontroller_id;
       startHand(handcontroller_id);
     }
     //刷新

src/views/train/test.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="test">
-    <Header @confirmExit="confirmExit"></Header>
+    <Header @confirmExit="confirmExit" @setMusic="setMusic"></Header>
     <div class="main">
       <div class="main-left">
         <div class="main-left-top">
@@ -122,6 +122,7 @@
 </template>
 
 <script setup name="TrainTest" lang="ts">
+import useAppStore from '@/store/modules/app';
 import { useWs } from '@/utils/trainWs';
 // import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
 import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
@@ -173,7 +174,8 @@ const data = reactive<any>({
   readyState: true, //倒计时按钮状态
   exitStatus: 0, //退出响应次数
   sid: null, //WS的id
-  device_info: {} //设备信息
+  deviceInfo: {}, //设备信息
+  musicList: [], //音乐列表
 });
 const {
   timerManager,
@@ -192,7 +194,8 @@ const {
   readyState,
   exitStatus,
   sid,
-  device_info
+  deviceInfo,
+  musicList
 } = toRefs(data);
 
 /**
@@ -397,8 +400,13 @@ const getStartOneTest = () => {
     //计时项目才开
     if (needStart.value == true) {
       speckText('哨声');
-      if (parameter.value.music) {
-        playMusic(parameter.value.music);
+      if (parameter.value.music && musicList.value.length) {
+        let obj = musicList.value.find((item: any) => {
+          return item.id == parameter.value.music;
+        });
+        if (obj != undefined) {
+          playMusic(obj.url);
+        }
       }
       //时间为0的为正计时，大于0的为倒计时
       if (time.value.testTime == 0) {
@@ -743,6 +751,32 @@ const getReady = () => {
   }
 };
 
+/**
+ * 获取音乐
+ */
+const getMusic = async () => {
+  const list: any = useAppStore().getMusic();
+  if (list.length) {
+    musicList.value = list;
+  } else {
+    await proxy?.$http.train.musicList().then((res: any) => {
+      if (res.data.length > 0) {
+        let myList: any = res.data;
+        musicList.value = myList;
+        useAppStore().setMusic(myList);
+      }
+    });
+  }
+};
+
+/**
+ * 设置音乐
+ */
+const setMusic = async (data:any) => {
+  //console.log("data",data)
+  parameter.value.music = data;
+};
+
 /**
  * 获取设备项目
  */
@@ -776,13 +810,13 @@ const initHand = () => {
     }
     //接收设备信息
     if (e?.device_info) {
-      device_info.value = e.device_info;
-      let handcontroller_id = device_info.value.handcontroller_id;
+      deviceInfo.value = e.device_info;
+      let handcontroller_id = deviceInfo.value.handcontroller_id;
       stateHand(handcontroller_id);
     }
     //获取手势状态
     if (e?.cmd == 'get_handcontroller_state' && e?.state == 0) {
-      let handcontroller_id = device_info.value.handcontroller_id;
+      let handcontroller_id = deviceInfo.value.handcontroller_id;
       startHand(handcontroller_id);
     }
     //刷新
@@ -1060,6 +1094,8 @@ onBeforeMount(() => {
   initSpeech();
   //初始化手势
   initHand();
+  //加载音乐
+  getMusic();
   //刷新关闭
   window.onbeforeunload = function (e) {
     var confirmationMessage = '刷新/关闭页面将会关闭页面,是否确认退出页面?';