|
|
@@ -0,0 +1,250 @@
|
|
|
+<template>
|
|
|
+ <Head />
|
|
|
+ <div class="BackLook_main">
|
|
|
+ <el-form style="border-bottom: 1px solid #ccc" label-width="120px">
|
|
|
+ <el-form-item label="类别:">
|
|
|
+ <div
|
|
|
+ @click="() => changeTypeFunc(0)"
|
|
|
+ :class="{ BKTag: true, BKTag_act: search.type === 0 }"
|
|
|
+ >
|
|
|
+ 频道
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="() => changeTypeFunc(1)"
|
|
|
+ :class="{ BKTag: true, BKTag_act: search.type === 1 }"
|
|
|
+ >
|
|
|
+ 频率
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="频率频道:">
|
|
|
+ <div
|
|
|
+ :class="{ BKTag: true, BKTag_act: search.plpd === index }"
|
|
|
+ v-for="(item, index) in pvpd[search.type]"
|
|
|
+ :key="index + 'plpd'"
|
|
|
+ v-text="item.name"
|
|
|
+ @click="() => changePlpdFunc(index)"
|
|
|
+ ></div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模式:">
|
|
|
+ <div
|
|
|
+ @click="() => changeModeFunc(0)"
|
|
|
+ :class="{ BKTag: true, BKTag_act: search.mode === 0 }"
|
|
|
+ >
|
|
|
+ 匹配模式
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="() => changeModeFunc(1)"
|
|
|
+ :class="{ BKTag: true, BKTag_act: search.mode === 1 }"
|
|
|
+ >
|
|
|
+ 节目单模式
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="search.mode === 1" label="日期:">
|
|
|
+ <div
|
|
|
+ :class="{ BKTag: true, BKTag_act: search.date === index }"
|
|
|
+ v-for="(item, index) in DateList"
|
|
|
+ :key="index + 'plpd'"
|
|
|
+ @click="() => changeDateFunc(index)"
|
|
|
+ >
|
|
|
+ <p class="text" v-text="item.dt"></p>
|
|
|
+ <p class="text" v-text="'(' + item.week + ')'"></p>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="search.mode === 0" label="时间:">
|
|
|
+ <div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="search.daterange"
|
|
|
+ type="daterange"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ range-separator="-"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table :data="tableData" stripe style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ :label="search.mode === 0 ? '匹配名称' : '节目名称'"
|
|
|
+ />
|
|
|
+ <el-table-column prop="time" v-if="search.mode === 1" label="播出时间" />
|
|
|
+ <el-table-column prop="address" label="是否回看">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-switch
|
|
|
+ v-model="tableData[scope.$index].isBack"
|
|
|
+ class="ml-2"
|
|
|
+ style="
|
|
|
+ --el-switch-on-color: #13ce66;
|
|
|
+ --el-switch-off-color: #ff4949;
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <br />
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="1000" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import Head from '@/components/head.vue';
|
|
|
+import { reactive, ref, nextTick } from 'vue';
|
|
|
+document.title = '回看配置';
|
|
|
+const search = ref({
|
|
|
+ type: 0,
|
|
|
+ plpd: 0,
|
|
|
+ date: 0,
|
|
|
+ mode: 0,
|
|
|
+ daterange: [],
|
|
|
+});
|
|
|
+const tableData = ref([
|
|
|
+ {
|
|
|
+ name: '狂飙',
|
|
|
+ time: '08:30',
|
|
|
+ isBack: false,
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const pvpd = [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: '陕西卫视',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '陕西一套',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '陕西二套',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '陕西三套',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '陕西四套',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '陕西五套',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '陕西六套',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '陕西七套',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '陕西八套',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '农林卫视',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: '都市广播-陕广新闻',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '故事广播',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '交通广播',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '经济广播-汽车调频',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '秦腔广播',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '青少广播',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '戏曲广播',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '新闻广播',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+];
|
|
|
+const DateList = [
|
|
|
+ {
|
|
|
+ dt: '8月1号',
|
|
|
+ week: '星期二',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dt: '8月2号',
|
|
|
+ week: '星期三',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dt: '8月3号',
|
|
|
+ week: '星期四',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dt: '8月4号',
|
|
|
+ week: '星期五',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dt: '8月5号',
|
|
|
+ week: '星期六',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dt: '8月6号',
|
|
|
+ week: '星期日',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dt: '8月7号',
|
|
|
+ week: '星期一',
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+function changeTypeFunc(type) {
|
|
|
+ search.value = {
|
|
|
+ type,
|
|
|
+ plpd: 0,
|
|
|
+ date: 0,
|
|
|
+ };
|
|
|
+ nextTick(() => getData());
|
|
|
+}
|
|
|
+function changePlpdFunc(plpd) {
|
|
|
+ search.value.plpd = plpd;
|
|
|
+ nextTick(() => getData());
|
|
|
+}
|
|
|
+function changeDateFunc(date) {
|
|
|
+ search.value.date = date;
|
|
|
+ nextTick(() => getData());
|
|
|
+}
|
|
|
+function changeModeFunc(mode) {
|
|
|
+ search.value.mode = mode;
|
|
|
+ nextTick(() => getData());
|
|
|
+}
|
|
|
+
|
|
|
+function getData() {}
|
|
|
+
|
|
|
+function disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now() - 86400000;
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.BackLook_main {
|
|
|
+ padding: 1em;
|
|
|
+}
|
|
|
+.BackLook_main .BKTag {
|
|
|
+ padding: 0 1em;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.BackLook_main .BKTag_act {
|
|
|
+ color: #539fe7;
|
|
|
+}
|
|
|
+.BackLook_main .text {
|
|
|
+ line-height: 1.3em;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.BackLook_main .cell {
|
|
|
+ color: #000!important;
|
|
|
+}
|
|
|
+</style>
|
liyongli