优化

src/views/Radio/Radio.vue

@@ -11,8 +11,12 @@
             :style="{
               'box-shadow':
                 form.frequency === item.code
-                  ? ' 0 0 30px #eee'
-                  : '0 0 10px #999',
+                  ? ' 0 0 60px #eee'
+                  : '0 0 10px #666',
+              'opacity':
+                form.frequency === item.code
+                  ? '1'
+                  : '0.8',
               'animation-play-state': !item.playState ? 'paused' : 'running',
             }"
           >
@@ -67,6 +71,7 @@
       style="width: 100%"
     >
       <el-table-column type="index" />
+      <el-table-column align="center" prop="name" label="广播" />
       <el-table-column align="center" prop="programName" label="节目" />
       <el-table-column align="center" label="播出时间">
         <template #default="scope">
@@ -97,7 +102,11 @@
           >
             暂停
           </el-button>
-          <el-button size="mini" @click="() => download(scope.row)">
+          <el-button
+            size="mini"
+            :loading="load['download' + scope.row.savePath] ? true : false"
+            @click="() => download(scope.row)"
+          >
             下载
           </el-button>
         </template>
@@ -129,7 +138,7 @@
         <el-icon
           :size="30"
           v-if="!playselect.playState"
-          @click="() => play(playselect)"
+          @click="() => pplay(playselect)"
           color="#333"
         >
           <video-play />
@@ -161,13 +170,12 @@
       @current-change="handleCurrentChange"
     >
     </el-pagination>
-    <audio v-if="playselect.localUrl" id="playaudio" controls />
+    <audio id="playaudio" controls />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import { ElLoading } from "element-plus";
 import { VideoPlay, VideoPause, PictureRounded } from "@element-plus/icons";
 
 import { frequencyList, PLList } from "@/api/index.js";
@@ -179,6 +187,7 @@ export default {
       volumeNum: 0,
       baseUrl: "",
       playselect: {},
+      load: {},
       form: {
         value: "",
         frequency: "",
@@ -193,6 +202,8 @@ export default {
     };
   },
   mounted() {
+    this.volumeNum = window.localStorage.volumeNum || 0;
+    this.volume();
     let D = new Date(new Date() - 86400000);
     let Y = D.getFullYear();
     let M = D.getMonth() + 1;
@@ -274,6 +285,7 @@ export default {
       this.playselect.playState = false;
     },
     play(row) {
+      // 重新播放
       if (!row.imgUrl) return;
       let playselect = row;
       playselect.localUrl = this.baseUrl + row.savePath;
@@ -282,19 +294,40 @@ export default {
       this.$nextTick(() => {
         let audio = document.getElementById("playaudio");
         this.volumeNum = ((audio.volume || 0) * 100).toFixed(0) - 0;
+        window.localStorage.volumeNum = this.volumeNum;
         audio.src = this.playselect.localUrl;
         audio.load();
         audio.play();
       });
     },
+    pplay(row) {
+      // 播放
+      if (!row.imgUrl) return;
+      let playselect = row;
+      playselect.localUrl = this.baseUrl + row.savePath;
+      playselect.playState = true;
+      this.playselect = playselect;
+      document.getElementById("playaudio").play();
+    },
     download(row) {
-      let load = ElLoading.service({ fullscreen: true });
-      let xhttp;
+      // download
+      this.load["download" + row.savePath] = true;
+      let xhttp,
+        that = this;
       if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
       else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
       xhttp.responseType = "blob";
       xhttp.open("GET", this.baseUrl + row.savePath, true);
       xhttp.send();
+      xhttp.addEventListener(
+        "progress",
+        res => {
+          console.log(res, (res.loaded / res.total) * 100);
+          that.load["download" + row.savePath] =
+            ((res.loaded / res.total) * 100).toFixed(0) - 0;
+        },
+        false
+      );
       xhttp.onreadystatechange = function() {
         if (this.readyState != 4 || this.status != 200) return;
         // 组装a标签
@@ -307,7 +340,7 @@ export default {
         document.body.appendChild(elink);
         elink.click();
         document.body.removeChild(elink);
-        load.close();
+        delete that.load["download" + row.savePath];
       };
     },
     volume() {
@@ -325,6 +358,9 @@ export default {
   margin: 10px 15px;
   background: #fff;
 }
+.radio .el-loading-spinner {
+  height: 100%;
+}
 #playaudio {
   opacity: 0;
   position: absolute;