|
@@ -1,9 +1,8 @@
|
|
|
<template>
|
|
|
- <div class="channel">
|
|
|
+ <div class="channelEPG">
|
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
<el-breadcrumb-item>传统媒体</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>智能电视</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>收视分析</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>频道全天节目</el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
<el-card class="box-card">
|
|
|
<el-form
|
|
@@ -25,86 +24,104 @@
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="频道">
|
|
|
- <el-select
|
|
|
- v-model="form.channel"
|
|
|
- placeholder="Activity zone"
|
|
|
- collapse-tags
|
|
|
- multiple
|
|
|
- reserve-keyword
|
|
|
- >
|
|
|
- <el-option label="Zone one" value="shanghai"></el-option>
|
|
|
- <el-option label="Zone one1" value="shanghai1"></el-option>
|
|
|
- <el-option label="Zone one2" value="shanghai2"></el-option>
|
|
|
- <el-option label="Zone two" value="beijing"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="固定时刻">
|
|
|
- <el-select
|
|
|
- v-model="form.timerange"
|
|
|
- placeholder="Activity zone"
|
|
|
- collapse-tags
|
|
|
- multiple
|
|
|
- reserve-keyword
|
|
|
- >
|
|
|
- <el-option label="Zone one" value="shanghai"></el-option>
|
|
|
- <el-option label="Zone one1" value="shanghai1"></el-option>
|
|
|
- <el-option label="Zone one2" value="shanghai2"></el-option>
|
|
|
- <el-option label="Zone two" value="beijing"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="时段">
|
|
|
+ <el-form-item label="时间">
|
|
|
<el-time-picker
|
|
|
- v-model="form.value1"
|
|
|
+ v-model="form.rangeTime"
|
|
|
is-range
|
|
|
+ format="HH:mm"
|
|
|
+ @change="() => (form.rangeTimeRange = [])"
|
|
|
range-separator="-"
|
|
|
- start-placeholder="开始时刻"
|
|
|
- end-placeholder="结束时刻"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
>
|
|
|
</el-time-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="行业分城">
|
|
|
+ <el-form-item label="时段">
|
|
|
<el-select
|
|
|
- v-model="form.city"
|
|
|
- placeholder="Activity zone"
|
|
|
- collapse-tags
|
|
|
+ v-model="form.rangeTimeRange"
|
|
|
+ placeholder="请选择时段"
|
|
|
multiple
|
|
|
- reserve-keyword
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ @change="timeSelect"
|
|
|
>
|
|
|
- <el-option label="Zone one" value="shanghai"></el-option>
|
|
|
- <el-option label="Zone one1" value="shanghai1"></el-option>
|
|
|
- <el-option label="Zone one2" value="shanghai2"></el-option>
|
|
|
- <el-option label="Zone two" value="beijing"></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in cycle"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="全国大区">
|
|
|
+ <el-form-item label="频道组">
|
|
|
+ <el-select
|
|
|
+ v-model="form.channelGroup"
|
|
|
+ placeholder="请选择频道组"
|
|
|
+ @change="channelSelect"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in channelList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="区域">
|
|
|
<el-select
|
|
|
v-model="form.region"
|
|
|
- placeholder="Activity zone"
|
|
|
- collapse-tags
|
|
|
- multiple
|
|
|
- reserve-keyword
|
|
|
+ placeholder="请选择区域"
|
|
|
+ @change="regionSelect"
|
|
|
>
|
|
|
- <el-option label="Zone one" value="shanghai"></el-option>
|
|
|
- <el-option label="Zone one1" value="shanghai1"></el-option>
|
|
|
- <el-option label="Zone one2" value="shanghai2"></el-option>
|
|
|
- <el-option label="Zone two" value="beijing"></el-option>
|
|
|
+ <el-option-group
|
|
|
+ v-for="group in region"
|
|
|
+ :key="group.value"
|
|
|
+ :label="group.label"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in group.options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-option-group>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item style="float: right">
|
|
|
- <el-button type="primary">查询</el-button>
|
|
|
- <el-button type="primary">导出</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
+ <el-button type="primary" @click="onExport">导出</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
<br />
|
|
|
<el-card class="box-card">
|
|
|
- <canvas id="linechart"></canvas>
|
|
|
- <br />
|
|
|
- <el-table :data="tableData" style="width: 100%">
|
|
|
- <el-table-column prop="date" label="Date" />
|
|
|
- <el-table-column prop="name" label="Name" />
|
|
|
- <el-table-column prop="address" label="Address" />
|
|
|
+ <line-charts :list="tableData" :keys="chartKeys"></line-charts>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ width="400px"
|
|
|
+ prop="epg"
|
|
|
+ label="具体节目"
|
|
|
+ class-name="nowrap"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, i) in chartKeys"
|
|
|
+ :key="'table' + i"
|
|
|
+ align="center"
|
|
|
+ :prop="item.key"
|
|
|
+ :formatter="matrer"
|
|
|
+ :label="item.name"
|
|
|
+ />
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</div>
|
|
@@ -112,52 +129,239 @@
|
|
|
|
|
|
<script>
|
|
|
// @ is an alias to /src
|
|
|
+// import { } from "@/api/index";
|
|
|
+
|
|
|
+import lineCharts from "@/views/Country/components/lineCharts";
|
|
|
+
|
|
|
import config from "@/config/index";
|
|
|
export default {
|
|
|
name: "Channel",
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {
|
|
|
- date: [],
|
|
|
- },
|
|
|
- tableData: [
|
|
|
+ chartKeys: [
|
|
|
{
|
|
|
- date: "2016-05-03",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
+ key: "indicators_tv_ratings",
|
|
|
+ name: "直播关注度",
|
|
|
},
|
|
|
{
|
|
|
- date: "2016-05-02",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
+ key: "indicators_market_ratings",
|
|
|
+ name: "市占率",
|
|
|
},
|
|
|
{
|
|
|
- date: "2016-05-04",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
+ key: "indicators_arrive",
|
|
|
+ name: "到达率",
|
|
|
},
|
|
|
{
|
|
|
- date: "2016-05-01",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
+ key: "indicators_loyal",
|
|
|
+ name: "忠诚度",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "indicators_column_remain",
|
|
|
+ name: "上期节目留存",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "indicators_traction",
|
|
|
+ name: "用户牵引",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ form: {
|
|
|
+ rangeTime: [],
|
|
|
+ channelGroup: 0,
|
|
|
+ date: [
|
|
|
+ new Date(new Date() - 86400000),
|
|
|
+ new Date(new Date() - 86400000),
|
|
|
+ ],
|
|
|
+ region: -1,
|
|
|
+ },
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ tv_id: "38",
|
|
|
+ week: "星期六",
|
|
|
+ indicators_market_ratings: 0.006637,
|
|
|
+ year: "2022",
|
|
|
+ indicators_tv_ratings: 0.000556,
|
|
|
+ epg_id: 64844469,
|
|
|
+ indicators_traction: 0.018811,
|
|
|
+ weekrange: "12-27 ~ 01-02",
|
|
|
+ ca_types: "电视剧",
|
|
|
+ start_time: 1640997660000,
|
|
|
+ default: "34城",
|
|
|
+ month: "2022-01",
|
|
|
+ channel_0: "黑龙江卫视",
|
|
|
+ abs_epg: "罗龙镇女人",
|
|
|
+ is_live: "重播",
|
|
|
+ indicators_loyal: 0.051348,
|
|
|
+ epg: "罗龙镇女人 - 黑龙江卫视 - 2022-01-01 08:41~18:03",
|
|
|
+ day: "2022-01-01",
|
|
|
+ indicators_column_remain: 0.016143,
|
|
|
+ indicators_arrive: 0.010798,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tv_id: "46",
|
|
|
+ week: "星期六",
|
|
|
+ indicators_market_ratings: 0.005599,
|
|
|
+ year: "2022",
|
|
|
+ indicators_tv_ratings: 0.000507,
|
|
|
+ epg_id: 64841031,
|
|
|
+ indicators_traction: 0.035236,
|
|
|
+ weekrange: "12-27 ~ 01-02",
|
|
|
+ ca_types: "电视剧",
|
|
|
+ start_time: 1641010680000,
|
|
|
+ default: "34城",
|
|
|
+ month: "2022-01",
|
|
|
+ channel_0: "山东卫视",
|
|
|
+ abs_epg: "前行者",
|
|
|
+ is_live: "重播",
|
|
|
+ indicators_loyal: 0.05778,
|
|
|
+ epg: "前行者 - 山东卫视 - 2022-01-01 12:18~18:03",
|
|
|
+ day: "2022-01-01",
|
|
|
+ indicators_column_remain: 0.062379,
|
|
|
+ indicators_arrive: 0.008762,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- console.log(config);
|
|
|
+ this.onSubmit();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ cycle() {
|
|
|
+ return config.cycle;
|
|
|
+ },
|
|
|
+ channelList() {
|
|
|
+ return config.channelList;
|
|
|
+ },
|
|
|
+ region() {
|
|
|
+ return config.region;
|
|
|
+ },
|
|
|
},
|
|
|
- computed: {},
|
|
|
methods: {
|
|
|
- disabledDate() {},
|
|
|
+ timeSelect(a) {
|
|
|
+ let end = (a || [])[(a || []).length - 1];
|
|
|
+ if (this.form.rangeTimeRange.length === config.cycle.length - 1) {
|
|
|
+ this.form.rangeTimeRange = ["0000_2400"];
|
|
|
+ } else {
|
|
|
+ let n = (this.form.rangeTimeRange || []).sort((a, b) => {
|
|
|
+ let aNum = a.split("_")[0];
|
|
|
+ let bNum = b.split("_")[0];
|
|
|
+ return aNum - bNum;
|
|
|
+ });
|
|
|
+ let isSelect = true;
|
|
|
+ for (let i = 0; i < n.length - 1; i++) {
|
|
|
+ let aNum = n[i].split("_")[1];
|
|
|
+ let bNum = n[i + 1].split("_")[0];
|
|
|
+ if (aNum !== bNum) {
|
|
|
+ isSelect = false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!isSelect) {
|
|
|
+ let arr = (n.join(",") + ",")
|
|
|
+ .replace(end + ",", "")
|
|
|
+ .replace(/,$/, "");
|
|
|
+ this.form.rangeTimeRange = arr.split(",");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!this.form.rangeTimeRange.length) return;
|
|
|
+ let s = this.form.rangeTimeRange[0].split("_")[0];
|
|
|
+ let e = this.form.rangeTimeRange[
|
|
|
+ this.form.rangeTimeRange.length - 1
|
|
|
+ ].split("_");
|
|
|
+ e = e[e.length - 1];
|
|
|
+ if (e == "2400") e = "2359";
|
|
|
+ this.form.rangeTime = [
|
|
|
+ new Date(1970, 1, 1, s[0] + s[1] - 0, s[2] + s[3] - 0),
|
|
|
+ new Date(1970, 1, 1, e[0] + e[1] - 0, e[2] + e[3] - 0),
|
|
|
+ ];
|
|
|
+ },
|
|
|
+
|
|
|
+ onExport() {},
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now() - 86400000;
|
|
|
+ },
|
|
|
+ onSubmit() {},
|
|
|
+ matrer(row, column, cellValue) {
|
|
|
+ return (cellValue * 100).toFixed(4) + "%";
|
|
|
+ },
|
|
|
+ dateFormat(date) {
|
|
|
+ let D = new Date(date);
|
|
|
+ let m = D.getMonth() + 1;
|
|
|
+ let d = D.getDate();
|
|
|
+ let h = D.getHours();
|
|
|
+ let M = D.getMinutes();
|
|
|
+ let s = D.getSeconds();
|
|
|
+ m > 9 ? m : (m = "0" + m);
|
|
|
+ d > 9 ? d : (d = "0" + d);
|
|
|
+ h > 9 ? h : (h = "0" + h);
|
|
|
+ M > 9 ? M : (M = "0" + M);
|
|
|
+ s > 9 ? s : (s = "0" + s);
|
|
|
+ return {
|
|
|
+ year: D.getFullYear(),
|
|
|
+ month: m,
|
|
|
+ day: d,
|
|
|
+ hour: h,
|
|
|
+ minutes: M,
|
|
|
+ seconds: s,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ formatListData() {
|
|
|
+ let e = new Date(this.form.date[1]);
|
|
|
+ let d1 = this.dateFormat(this.form.date[0]);
|
|
|
+ let d2 = this.dateFormat(e.getTime() + 86400000);
|
|
|
+ let time = "";
|
|
|
+ if (this.form.rangeTime.length) {
|
|
|
+ let start = new Date(this.form.rangeTime[0]);
|
|
|
+ let end = new Date(this.form.rangeTime[1]);
|
|
|
+ let start_hour = start.getHours();
|
|
|
+ let start_min = start.getMinutes();
|
|
|
+ let end_hour = end.getHours();
|
|
|
+ let end_min = end.getMinutes();
|
|
|
+ start_hour = start_hour > 9 ? start_hour + "" : "0" + start_hour;
|
|
|
+ start_min = start_min > 9 ? start_min + "" : "0" + start_min;
|
|
|
+ end_hour = end_hour > 9 ? end_hour + "" : "0" + end_hour;
|
|
|
+ end_min = end_min > 9 ? end_min + "" : "0" + end_min;
|
|
|
+ if (end_hour + end_min === "2359") {
|
|
|
+ end_hour = "24";
|
|
|
+ end_min = "00";
|
|
|
+ }
|
|
|
+ time = start_hour + start_min + "_" + end_hour + end_min;
|
|
|
+ } else {
|
|
|
+ time = "0000_2400";
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ tv_type: this.form.channelGroup || this.channelList[0].value,
|
|
|
+ time_range: time,
|
|
|
+ area_id: this.form.region || this.region[0].value,
|
|
|
+ start: [d1.year, d1.month, d1.day].join("-"),
|
|
|
+ end: [d2.year, d2.month, d2.day].join("-"),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ channelSelect(a) {
|
|
|
+ this.selectAll(a, "channelGroup", 0);
|
|
|
+ },
|
|
|
+ regionSelect(a) {
|
|
|
+ this.selectAll(a, "region", -1);
|
|
|
+ },
|
|
|
+ selectAll(a, key, val) {
|
|
|
+ if (!a.length) return;
|
|
|
+ let select = a[a.length - 1];
|
|
|
+ if (select === val) this.form[key] = [val];
|
|
|
+ else
|
|
|
+ this.form[key] = (a.join(",") + ",")
|
|
|
+ .replace(val + ",", "")
|
|
|
+ .replace(/,$/, "")
|
|
|
+ .split(",");
|
|
|
+ },
|
|
|
},
|
|
|
- components: {},
|
|
|
+ components: { lineCharts },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.channel {
|
|
|
- padding: 10px 15px;
|
|
|
- height: 100vh;
|
|
|
+.channelEPG {
|
|
|
+ margin: 10px 15px;
|
|
|
+}
|
|
|
+.channelEPG .nowrap .cell {
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
</style>
|