|
|
@@ -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>
|
liyongli