提交

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@element-plus/icons": "^0.0.11",
     "core-js": "^3.6.5",
     "echarts": "^5.2.1",
     "echarts-wordcloud": "^2.0.0",

src/views/Radio/Radio.vue

@@ -2,6 +2,29 @@
   <div class="radio">
     <el-loading></el-loading>
     <el-card class="box-card">
+      <el-scrollbar height="100%" always class="audioGroup">
+        <div class="audioPL" v-for="(item, i) in frequencyL" :key="item.imgUrl">
+          <el-image
+            class="play"
+            :src="item.imgUrl"
+            @click="() => selectGB(item, i)"
+            :style="{
+              'box-shadow':
+                form.frequency === item.code
+                  ? ' 0 0 30px #eee'
+                  : '0 0 10px #999',
+              'animation-play-state': !item.playState ? 'paused' : 'running',
+            }"
+          >
+            <template #error>
+              <div style="text-align: center;line-height: 50px">
+                <el-icon :size="40" color="#999"><picture-rounded /></el-icon>
+              </div>
+            </template>
+          </el-image>
+        </div>
+      </el-scrollbar>
+      <br />
       <el-form
         ref="form"
         :model="form"
@@ -18,17 +41,6 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="广播">
-          <el-select v-model="form.frequency" clearable placeholder="请选择">
-            <el-option
-              v-for="item in frequencyL"
-              :key="item.code"
-              :label="item.name"
-              :value="item.code"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item label="时段">
           <el-time-picker
             v-model="form.picker"
@@ -55,27 +67,6 @@
       style="width: 100%"
     >
       <el-table-column type="index" />
-      <el-table-column align="center" prop="name" label="频率" />
-      <el-table-column align="center" prop="name" label="" width="50">
-        <template #default="scope">
-          <img
-            :src="scope.row.imgUrl"
-            class="play"
-            :style="{
-              'animation-play-state':
-                playselect !== baseUrl + scope.row.savePath
-                  ? 'paused'
-                  : 'running',
-            }"
-            @click="
-              () =>
-                playselect === baseUrl + scope.row.savePath &&
-                pause(scope.$index, scope.row)
-            "
-            alt=""
-          />
-        </template>
-      </el-table-column>
       <el-table-column align="center" prop="programName" label="节目" />
       <el-table-column align="center" label="播出时间">
         <template #default="scope">
@@ -86,28 +77,80 @@
         <template #default="scope">
           <el-button
             size="mini"
-            v-if="playselect !== baseUrl + scope.row.savePath"
-            @click="() => play(scope.$index, scope.row)"
+            v-if="
+              playselect.localUrl !== baseUrl + scope.row.savePath
+                ? true
+                : !playselect.playState
+            "
+            @click="() => play(scope.row)"
           >
             播放
           </el-button>
           <el-button
             size="mini"
-            v-if="playselect === baseUrl + scope.row.savePath"
-            @click="() => pause(scope.$index, scope.row)"
+            v-if="
+              playselect.localUrl === baseUrl + scope.row.savePath
+                ? playselect.playState
+                : false
+            "
+            @click="() => pause(scope.row)"
           >
             暂停
           </el-button>
-          <el-button
-            size="mini"
-            @click="() => download(scope.$index, scope.row)"
-          >
+          <el-button size="mini" @click="() => download(scope.row)">
             下载
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <br />
+
+    <!-- audio ui -->
+    <el-row class="audioui">
+      <el-col :span="12">
+        <el-image
+          class="play"
+          :src="playselect.imgUrl"
+          :style="{
+            width: '50px',
+            height: '50px',
+            'animation-play-state': !playselect.playState
+              ? 'paused'
+              : 'running',
+          }"
+        >
+          <template #error>
+            <div style="text-align: center;line-height: 50px">
+              <el-icon :size="40" color="#999"><picture-rounded /></el-icon>
+            </div>
+          </template>
+        </el-image>
+
+        <el-icon
+          :size="30"
+          v-if="!playselect.playState"
+          @click="() => play(playselect)"
+          color="#333"
+        >
+          <video-play />
+        </el-icon>
+        <el-icon
+          :size="30"
+          v-else
+          color="#333"
+          @click="() => pause(playselect)"
+        >
+          <video-pause />
+        </el-icon>
+      </el-col>
+      <el-col :span="12" style="padding: 7px 0 0 15px;">
+        <el-slider
+          @input="volume"
+          :format-tooltip="v => vol(v)"
+          v-model="volumeNum"
+        ></el-slider>
+      </el-col>
+    </el-row>
     <el-pagination
       v-model:currentPage="page"
       :page-sizes="[10, 20, 30, 40]"
@@ -118,22 +161,24 @@
       @current-change="handleCurrentChange"
     >
     </el-pagination>
-    <br />
-    <audio v-if="playselect" id="playaudio" controls />
+    <audio v-if="playselect.localUrl" 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";
 import config from "@/config/index";
 export default {
   name: "radio",
   data() {
     return {
+      volumeNum: 0,
       baseUrl: "",
-      playselect: "",
+      playselect: {},
       form: {
         value: "",
         frequency: "",
@@ -160,18 +205,21 @@ export default {
     };
     frequencyList().then(res => {
       let li = res || [];
-      li.unshift({
-        code: "",
-        id: -1,
-        name: "全部",
-      });
       this.frequencyL = li;
+      this.form.frequency = li[0].code;
+      this.getlist();
+      this.baseUrl = config.base.url2 + "/";
     });
-    this.getlist();
-    this.baseUrl = config.base.url2 + "/";
   },
   computed: {},
   methods: {
+    vol(val) {
+      return "音量:" + val;
+    },
+    selectGB(item) {
+      this.form.frequency = item.code;
+      this.getlist();
+    },
     handleCurrentChange(page) {
       this.page = page;
       this.getlist();
@@ -181,9 +229,20 @@ export default {
       this.getlist();
     },
     getlist() {
-      //   radioList;
+      let dt = this.form.value;
+      if (typeof dt !== "string") {
+        dt = new Date(dt);
+        let Y = dt.getFullYear();
+        let M = dt.getMonth() + 1;
+        let D = dt.getDate();
+        M <= 9 ? (M = "0" + M) : "";
+        D <= 9 ? (D = "0" + D) : "";
+        dt = "" + Y + M + D;
+      } else {
+        dt = dt.replace(/-/g, "");
+      }
       let p = {
-        dt: this.form.value.replace(/-/g, ""),
+        dt,
         page: this.page,
         pageSize: this.pageSize,
       };
@@ -211,22 +270,24 @@ export default {
     },
     pause() {
       let audio = document.getElementById("playaudio");
-      if (!audio) return;
-      this.playselect = "";
-      audio.src = "";
-      audio.load();
-      audio.pause();
+      if (audio) audio.pause();
+      this.playselect.playState = false;
     },
-    play(index, row) {
-      this.playselect = this.baseUrl + row.savePath;
+    play(row) {
+      if (!row.imgUrl) return;
+      let playselect = row;
+      playselect.localUrl = this.baseUrl + row.savePath;
+      playselect.playState = true;
+      this.playselect = playselect;
       this.$nextTick(() => {
         let audio = document.getElementById("playaudio");
-        audio.src = this.playselect;
+        this.volumeNum = ((audio.volume || 0) * 100).toFixed(0) - 0;
+        audio.src = this.playselect.localUrl;
         audio.load();
         audio.play();
       });
     },
-    download(index, row) {
+    download(row) {
       let load = ElLoading.service({ fullscreen: true });
       let xhttp;
       if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
@@ -249,9 +310,13 @@ export default {
         load.close();
       };
     },
+    volume() {
+      if (!document.getElementById("playaudio")) return;
+      document.getElementById("playaudio").volume = this.volumeNum / 100;
+    },
   },
   beforeUnmount: function() {},
-  components: {},
+  components: { VideoPlay, VideoPause, PictureRounded },
 };
 </script>
 
@@ -272,16 +337,21 @@ export default {
   background-size: 100% 100%;
   background-repeat: no-repeat;
   vertical-align: middle;
-  width: 25px;
-  height: 25px;
   animation-name: example;
+  box-shadow: 0 0 10px #eee;
   animation-duration: 3s;
+  width: 100px;
+  height: 100px;
   animation-direction: normal;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
+  margin-right: 5px;
+  display: inline-block;
 }
-.el-pagination {
+.radio .el-icon {
+  vertical-align: middle;
+}
+.radio .el-pagination {
   text-align: right;
 }
 
@@ -293,4 +363,30 @@ export default {
     transform: rotate(360deg);
   }
 }
+
+.audioui {
+  float: left;
+  width: 200px;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  padding: 5px 20px 5px 8px;
+  line-height: 35px;
+}
+
+.audioGroup {
+  height: 200px;
+  white-space: nowrap;
+  background-image: linear-gradient(to right, #c55c60, #bd8946);
+}
+.audioGroup .audioPL {
+  display: inline-block;
+  width: 130px;
+  padding-top: 50px;
+  height: 200px;
+  text-align: center;
+}
+
+.audioGroup .el-scrollbar__thumb {
+  background-color: #fff;
+}
 </style>