广播

src/api/index.js

@@ -190,3 +190,29 @@ export function defaultAjax(props) {
     data: props.data,
   });
 }
+
+/**
+ * 频率列表
+ * @props {}
+ * @return {AxjxPromise}
+ */
+ export function frequencyList() {
+    return ajax({
+      urlType: "url2",
+      url: "/broadcast/dict",
+      method: "get",
+    });
+  }
+  /**
+   * 频率查询
+   * @props {}
+   * @return {AxjxPromise}
+   */
+  export function PLList(data) {
+    return ajax({
+      urlType: "url2",
+      url: "/broadcast/list",
+      method: "get",
+      data
+    });
+  }

src/router/index.js

@@ -35,6 +35,11 @@ const routes = [
     path: "/activity",
     name: 'Activity',
     component: () => import('../views/Activity/Activity.vue')
+  },
+  {
+    path: "/radio",
+    name: 'Radio',
+    component: () => import('../views/Radio/Radio.vue')
   }
 ]
 

src/views/Radio/Radio.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="radio">
+    <el-loading></el-loading>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="80px"
+      >
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="form.value"
+            type="date"
+            :clearable="false"
+            placeholder="请选择日期"
+          >
+          </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"
+            is-range
+            clearable
+            editable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          >
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item label="节目名称">
+          <el-input v-model="form.title" placeholder="请输入节目名称" />
+        </el-form-item>
+        <el-form-item style="float: right">
+          <el-button type="primary" @click="getlist">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-table
+      :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
+      :data="radioList"
+      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">
+          {{ scope.row.startTime }} - {{ scope.row.endTime }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            size="mini"
+            v-if="playselect !== baseUrl + scope.row.savePath"
+            @click="() => play(scope.$index, scope.row)"
+          >
+            播放
+          </el-button>
+          <el-button
+            size="mini"
+            v-if="playselect === baseUrl + scope.row.savePath"
+            @click="() => pause(scope.$index, scope.row)"
+          >
+            暂停
+          </el-button>
+          <el-button
+            size="mini"
+            @click="() => download(scope.$index, scope.row)"
+          >
+            下载
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <br />
+    <el-pagination
+      v-model:currentPage="page"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+    <br />
+    <audio v-if="playselect" id="playaudio" controls />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { ElLoading } from "element-plus";
+import { frequencyList, PLList } from "@/api/index.js";
+import config from "@/config/index";
+export default {
+  name: "radio",
+  data() {
+    return {
+      baseUrl: "",
+      playselect: "",
+      form: {
+        value: "",
+        frequency: "",
+        title: "",
+        picker: [],
+      },
+      page: 1,
+      pageSize: 10,
+      total: 0,
+      frequencyL: [],
+      radioList: [],
+    };
+  },
+  mounted() {
+    let D = new Date(new Date() - 86400000);
+    let Y = D.getFullYear();
+    let M = D.getMonth() + 1;
+    let Day = D.getDate();
+    M <= 9 ? (M = "0" + M) : "";
+    Day <= 9 ? (Day = "0" + Day) : "";
+    this.form = {
+      value: [Y, M, Day].join("-"),
+      frequency: "",
+    };
+    frequencyList().then(res => {
+      let li = res || [];
+      li.unshift({
+        code: "",
+        id: -1,
+        name: "全部",
+      });
+      this.frequencyL = li;
+    });
+    this.getlist();
+    this.baseUrl = config.base.url2 + "/";
+  },
+  computed: {},
+  methods: {
+    handleCurrentChange(page) {
+      this.page = page;
+      this.getlist();
+    },
+    handleSizeChange(pageSize) {
+      this.pageSize = pageSize;
+      this.getlist();
+    },
+    getlist() {
+      //   radioList;
+      let p = {
+        dt: this.form.value.replace(/-/g, ""),
+        page: this.page,
+        pageSize: this.pageSize,
+      };
+      this.form.frequency && (p.code = this.form.frequency);
+      this.form.title && (p.programName = this.form.title);
+      if (this.form.picker && this.form.picker.length) {
+        p.startTime = this.formatpicker(0);
+        p.endTime = this.formatpicker(1);
+      }
+
+      PLList(p).then(res => {
+        this.total = res.total || 0;
+        this.radioList = res.data || [];
+      });
+    },
+    formatpicker(num) {
+      let T = this.form.picker[num],
+        H = T.getHours(),
+        M = T.getMinutes(),
+        D = T.getSeconds();
+      H > 9 ? "" : (H = "0" + H);
+      M > 9 ? "" : (M = "0" + M);
+      D > 9 ? "" : (D = "0" + D);
+      return H + ":" + M + ":" + D;
+    },
+    pause() {
+      let audio = document.getElementById("playaudio");
+      if (!audio) return;
+      this.playselect = "";
+      audio.src = "";
+      audio.load();
+      audio.pause();
+    },
+    play(index, row) {
+      this.playselect = this.baseUrl + row.savePath;
+      this.$nextTick(() => {
+        let audio = document.getElementById("playaudio");
+        audio.src = this.playselect;
+        audio.load();
+        audio.play();
+      });
+    },
+    download(index, row) {
+      let load = ElLoading.service({ fullscreen: true });
+      let xhttp;
+      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.onreadystatechange = function() {
+        if (this.readyState != 4 || this.status != 200) return;
+        // 组装a标签
+        let elink = document.createElement("a");
+        // 设置下载文件名
+        elink.download =
+          row.dt + "-" + row.name + "-" + row.programName + ".mp3";
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(this.response);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        load.close();
+      };
+    },
+  },
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style>
+.radio {
+  margin: 10px 15px;
+  background: #fff;
+}
+#playaudio {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+
+.play {
+  cursor: pointer;
+  border-radius: 50%;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  vertical-align: middle;
+  width: 25px;
+  height: 25px;
+  animation-name: example;
+  animation-duration: 3s;
+  animation-direction: normal;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
+}
+.el-pagination {
+  text-align: right;
+}
+
+@keyframes example {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>