|
@@ -18,11 +18,11 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="频率频道:">
|
|
<el-form-item label="频率频道:">
|
|
<div
|
|
<div
|
|
- :class="{ BKTag: true, BKTag_act: search.plpd === index }"
|
|
|
|
|
|
+ :class="{ BKTag: true, BKTag_act: search.plpd === item.channelId }"
|
|
v-for="(item, index) in pvpd[search.type]"
|
|
v-for="(item, index) in pvpd[search.type]"
|
|
:key="index + 'plpd'"
|
|
:key="index + 'plpd'"
|
|
- v-text="item.name"
|
|
|
|
- @click="() => changePlpdFunc(index)"
|
|
|
|
|
|
+ v-text="item.title"
|
|
|
|
+ @click="() => changePlpdFunc(item.channelId)"
|
|
></div>
|
|
></div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="模式:">
|
|
<el-form-item label="模式:">
|
|
@@ -39,7 +39,7 @@
|
|
节目单模式
|
|
节目单模式
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item v-if="search.mode === 1" label="日期:">
|
|
|
|
|
|
+ <el-form-item v-if="DateList.length && search.mode === 1" label="日期:">
|
|
<div
|
|
<div
|
|
:class="{ BKTag: true, BKTag_act: search.date === index }"
|
|
:class="{ BKTag: true, BKTag_act: search.date === index }"
|
|
v-for="(item, index) in DateList"
|
|
v-for="(item, index) in DateList"
|
|
@@ -50,10 +50,11 @@
|
|
<p class="text" v-text="'(' + item.week + ')'"></p>
|
|
<p class="text" v-text="'(' + item.week + ')'"></p>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item v-if="search.mode === 0" label="时间:">
|
|
|
|
|
|
+ <!-- <el-form-item v-if="search.mode === 0" label="时间:">
|
|
<div>
|
|
<div>
|
|
<el-date-picker
|
|
<el-date-picker
|
|
v-model="search.daterange"
|
|
v-model="search.daterange"
|
|
|
|
+ @change="pickerChange"
|
|
type="daterange"
|
|
type="daterange"
|
|
format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
@@ -63,148 +64,150 @@
|
|
end-placeholder="结束日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
+ </el-form-item> -->
|
|
|
|
+ <el-form-item v-if="search.mode === 0">
|
|
|
|
+ <el-button type="primary" @click="() => showAddFunc()"
|
|
|
|
+ >新增匹配</el-button
|
|
|
|
+ >
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</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
|
|
|
|
+ v-if="DateList[search.date]"
|
|
|
|
+ :data="DateList[search.date].list"
|
|
|
|
+ stripe
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column prop="title" label="节目" />
|
|
|
|
+ <el-table-column prop="startTime" label="播出时间" />
|
|
|
|
+ <el-table-column prop="address" label="是否回看">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-switch
|
|
|
|
+ v-model="scope.row.statusShow"
|
|
|
|
+ @change="key => changeEPG(key, scope.row, scope.$index)"
|
|
|
|
+ class=""
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <el-table
|
|
|
|
+ v-else-if="DatePPList"
|
|
|
|
+ :data="DatePPList"
|
|
|
|
+ stripe
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column prop="program" label="节目名称" />
|
|
|
|
+ <el-table-column prop="address" label="生效周期">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ {{
|
|
|
|
+ scope.row.startTime !== scope.row.endTime
|
|
|
|
+ ? scope.row.startTime + ' 至 ' + scope.row.endTime
|
|
|
|
+ : scope.row.endTime
|
|
|
|
+ }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
<el-table-column prop="address" label="是否回看">
|
|
<el-table-column prop="address" label="是否回看">
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
<el-switch
|
|
<el-switch
|
|
- v-model="tableData[scope.$index].isBack"
|
|
|
|
- class="ml-2"
|
|
|
|
- style="
|
|
|
|
- --el-switch-on-color: #13ce66;
|
|
|
|
- --el-switch-off-color: #ff4949;
|
|
|
|
- "
|
|
|
|
|
|
+ v-model="scope.row.statusShow"
|
|
|
|
+ @change="key => changeKeywords(key, scope.row, scope.$index)"
|
|
|
|
+ class=""
|
|
/>
|
|
/>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
<br />
|
|
<br />
|
|
- <el-pagination background layout="prev, pager, next" :total="1000" />
|
|
|
|
|
|
+ <el-pagination
|
|
|
|
+ v-if="search.mode === 0"
|
|
|
|
+ background
|
|
|
|
+ @current-change="chagnepage"
|
|
|
|
+ layout="prev, pager, next"
|
|
|
|
+ :page-size="pageSize"
|
|
|
|
+ :current-page="currentPage"
|
|
|
|
+ :total="total || 0"
|
|
|
|
+ />
|
|
|
|
+
|
|
|
|
+ <el-dialog v-model="showAdd" :title="changeItem.id ? '编辑' : '新增'">
|
|
|
|
+ <el-form :model="changeItem" label-width="120px">
|
|
|
|
+ <el-form-item label="匹配名称">
|
|
|
|
+ <el-input v-model="changeItem.title" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="生效周期">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="changeItem.daterange"
|
|
|
|
+ @change="pickerChange"
|
|
|
|
+ type="daterange"
|
|
|
|
+ format="YYYY-MM-DD"
|
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
|
+ range-separator="-"
|
|
|
|
+ :disabled-date="disabledDate"
|
|
|
|
+ start-placeholder="开始日期"
|
|
|
|
+ end-placeholder="结束日期"
|
|
|
|
+ />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-button type="primary" @click="onSubmit">创建</el-button>
|
|
|
|
+ <el-button @click="() => showAddFunc()">取消</el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
|
+
|
|
import Head from '@/components/head.vue';
|
|
import Head from '@/components/head.vue';
|
|
-import { reactive, ref, nextTick } from 'vue';
|
|
|
|
|
|
+import { ref, nextTick } from 'vue';
|
|
|
|
+import {
|
|
|
|
+ getFM,
|
|
|
|
+ getTV,
|
|
|
|
+ getAllEpg,
|
|
|
|
+ getKeywords,
|
|
|
|
+ createData,
|
|
|
|
+ disableEPG,
|
|
|
|
+ disableKeywords,
|
|
|
|
+} from '@/api/index';
|
|
|
|
+import dayjs from 'dayjs';
|
|
document.title = '回看配置';
|
|
document.title = '回看配置';
|
|
const search = ref({
|
|
const search = ref({
|
|
type: 0,
|
|
type: 0,
|
|
plpd: 0,
|
|
plpd: 0,
|
|
date: 0,
|
|
date: 0,
|
|
mode: 0,
|
|
mode: 0,
|
|
|
|
+ // daterange: [],
|
|
|
|
+});
|
|
|
|
+const currentPage = ref(1);
|
|
|
|
+const pageSize = ref(10);
|
|
|
|
+const showAdd = ref(false);
|
|
|
|
+const changeItem = ref({
|
|
|
|
+ title: '',
|
|
daterange: [],
|
|
daterange: [],
|
|
});
|
|
});
|
|
-const tableData = ref([
|
|
|
|
- {
|
|
|
|
- name: '狂飙',
|
|
|
|
- time: '08:30',
|
|
|
|
- isBack: false,
|
|
|
|
- },
|
|
|
|
-]);
|
|
|
|
|
|
+const pvpd = ref([]);
|
|
|
|
+const DateList = ref([]);
|
|
|
|
+const DatePPList = ref([]);
|
|
|
|
+const total = ref(0);
|
|
|
|
|
|
-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: '星期一',
|
|
|
|
- },
|
|
|
|
-];
|
|
|
|
|
|
+Promise.all([getFM({}), getTV({})]).then(li => {
|
|
|
|
+ pvpd.value = li || [];
|
|
|
|
+ search.value.plpd =
|
|
|
|
+ li[search.value.type] && li[search.value.type][0]
|
|
|
|
+ ? li[search.value.type][0].channelId
|
|
|
|
+ : undefined;
|
|
|
|
+
|
|
|
|
+ nextTick(() => getData());
|
|
|
|
+});
|
|
|
|
|
|
function changeTypeFunc(type) {
|
|
function changeTypeFunc(type) {
|
|
search.value = {
|
|
search.value = {
|
|
type,
|
|
type,
|
|
- plpd: 0,
|
|
|
|
|
|
+ plpd:
|
|
|
|
+ pvpd.value[type] && pvpd.value[type][0]
|
|
|
|
+ ? pvpd.value[type][0].channelId
|
|
|
|
+ : undefined,
|
|
date: 0,
|
|
date: 0,
|
|
|
|
+ mode: 0,
|
|
};
|
|
};
|
|
nextTick(() => getData());
|
|
nextTick(() => getData());
|
|
}
|
|
}
|
|
@@ -214,23 +217,117 @@ function changePlpdFunc(plpd) {
|
|
}
|
|
}
|
|
function changeDateFunc(date) {
|
|
function changeDateFunc(date) {
|
|
search.value.date = date;
|
|
search.value.date = date;
|
|
- nextTick(() => getData());
|
|
|
|
}
|
|
}
|
|
function changeModeFunc(mode) {
|
|
function changeModeFunc(mode) {
|
|
search.value.mode = mode;
|
|
search.value.mode = mode;
|
|
|
|
+ DateList.value = [];
|
|
nextTick(() => getData());
|
|
nextTick(() => getData());
|
|
}
|
|
}
|
|
|
|
+function showAddFunc(item) {
|
|
|
|
+ showAdd.value = !showAdd.value;
|
|
|
|
+ changeItem.value = item || {
|
|
|
|
+ title: '',
|
|
|
|
+ daterange: [],
|
|
|
|
+ };
|
|
|
|
+}
|
|
|
|
+function getData() {
|
|
|
|
+ DateList.value = [];
|
|
|
|
+ DatePPList.value = [];
|
|
|
|
+ if (search.value.mode === 1)
|
|
|
|
+ return getAllEpg(search.value.plpd).then(r => {
|
|
|
|
+ const list = r || [];
|
|
|
|
+ let week = ['日', '一', '二', '三', '四', '五', '六'];
|
|
|
|
+ const DateListValue = [];
|
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
|
+ const v = list[i];
|
|
|
|
+ const day = dayjs(v.date);
|
|
|
|
+ DateListValue.push({
|
|
|
|
+ dt: day.format('YYYY-MM-DD'),
|
|
|
|
+ week: '星期' + week[day.day()],
|
|
|
|
+ list: v.epg.map(item => {
|
|
|
|
+ item.statusShow = item.status === 1;
|
|
|
|
+ return item;
|
|
|
|
+ }),
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ DateList.value = DateListValue;
|
|
|
|
+ });
|
|
|
|
|
|
-function getData() {}
|
|
|
|
|
|
+ getKeywords({
|
|
|
|
+ channelId: search.value.plpd,
|
|
|
|
+ page: currentPage.value,
|
|
|
|
+ pageSize: pageSize.value,
|
|
|
|
+ }).then(r => {
|
|
|
|
+ const Data = r || {};
|
|
|
|
+ Data.records = Data.records.map(item => {
|
|
|
|
+ item.statusShow = item.status === 1;
|
|
|
|
+ return item;
|
|
|
|
+ });
|
|
|
|
+ DatePPList.value = Data.records;
|
|
|
|
+ total.value = Data.total || 0;
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+function onSubmit() {
|
|
|
|
+ if (!changeItem.value.title || !changeItem.value.daterange) {
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: '匹配名称或生效周期不能为空',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ });
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ createData({
|
|
|
|
+ channelId: search.value.plpd,
|
|
|
|
+ program: changeItem.value.title,
|
|
|
|
+ startTime: changeItem.value.daterange[0],
|
|
|
|
+ endTime: changeItem.value.daterange[1],
|
|
|
|
+ }).then(r => {
|
|
|
|
+ showAddFunc();
|
|
|
|
+ getData();
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+function chagnepage(p) {
|
|
|
|
+ currentPage.value = p;
|
|
|
|
+ getData();
|
|
|
|
+}
|
|
|
|
|
|
function disabledDate(time) {
|
|
function disabledDate(time) {
|
|
- return time.getTime() > Date.now() - 86400000;
|
|
|
|
|
|
+ // return time.getTime() > Date.now() - 86400000;
|
|
|
|
+ return false;
|
|
|
|
+}
|
|
|
|
+function pickerChange() {}
|
|
|
|
+
|
|
|
|
+function changeEPG(key, item, index) {
|
|
|
|
+ if (key === item.status) return;
|
|
|
|
+ disableEPG({
|
|
|
|
+ title: item.title,
|
|
|
|
+ channelId: search.value.plpd,
|
|
|
|
+ startTime: item.startTime,
|
|
|
|
+ status: item.statusShow ? 1 : 0,
|
|
|
|
+ }).then(() => {
|
|
|
|
+ // getData();
|
|
|
|
+ DateList.value[search.value.date].list[index].status = DateList.value[
|
|
|
|
+ search.value.date
|
|
|
|
+ ].list[index].statusShow
|
|
|
|
+ ? 1
|
|
|
|
+ : 0;
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+function changeKeywords(key, item, index) {
|
|
|
|
+ if (key === item.status) return;
|
|
|
|
+ disableKeywords({
|
|
|
|
+ id: item.id,
|
|
|
|
+ status: item.statusShow ? 1 : 0,
|
|
|
|
+ }).then(() => {
|
|
|
|
+ DatePPList.value[index].status = DatePPList.value[index].statusShow ? 1 : 0;
|
|
|
|
+ });
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
.BackLook_main {
|
|
.BackLook_main {
|
|
padding: 1em;
|
|
padding: 1em;
|
|
|
|
+ height: calc(100% - 56px);
|
|
|
|
+ overflow-y: auto;
|
|
}
|
|
}
|
|
.BackLook_main .BKTag {
|
|
.BackLook_main .BKTag {
|
|
padding: 0 1em;
|
|
padding: 0 1em;
|
|
@@ -245,6 +342,6 @@ function disabledDate(time) {
|
|
}
|
|
}
|
|
|
|
|
|
.BackLook_main .cell {
|
|
.BackLook_main .cell {
|
|
- color: #000!important;
|
|
|
|
|
|
+ color: #000 !important;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|