|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
- <div class="SingleDay">
|
|
|
+ <div class="AbstractProgram">
|
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
<el-breadcrumb-item>传统媒体</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>频道收视（34城）</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>频道分地收视（全国）</el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
<el-card class="box-card">
|
|
|
<el-form
|
|
|
@@ -19,80 +19,39 @@
|
|
|
type="daterange"
|
|
|
:disabled-date="time => disabledDate(time)"
|
|
|
range-separator="-"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="时间">
|
|
|
- <el-time-picker
|
|
|
- v-model="form.rangeTime"
|
|
|
- is-range
|
|
|
- format="HH:mm"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- >
|
|
|
- </el-time-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="时段">
|
|
|
- <el-select
|
|
|
- v-model="form.rangeTimeRange"
|
|
|
- placeholder="请选择时段"
|
|
|
- @change="timeSelect"
|
|
|
- >
|
|
|
- <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="v.name" v-for="(v, i) in searchDate" :key="i">
|
|
|
<el-select
|
|
|
- v-model="form.channel"
|
|
|
- placeholder="请选择频道组"
|
|
|
- @change="channelSelect"
|
|
|
+ v-model="form.filter[v.key]"
|
|
|
+ :placeholder="'请选择' + v.name"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ @change="se => select(v, se)"
|
|
|
>
|
|
|
- <el-option
|
|
|
- v-for="item in channelNameList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- :disabled="item.disabled"
|
|
|
- >
|
|
|
+ <el-option key="-1" v-if="v.id !== 'time'" label="全选" value="-1">
|
|
|
</el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="星期">
|
|
|
- <el-select
|
|
|
- v-model="form.week"
|
|
|
- placeholder="请选择星期"
|
|
|
- @change="weekSelect"
|
|
|
- >
|
|
|
<el-option
|
|
|
- v-for="item in weeks"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- :disabled="item.disabled"
|
|
|
+ v-for="item in v.list || []"
|
|
|
+ :key="item.id + ''"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.key + ''"
|
|
|
>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="区域">
|
|
|
- <el-cascader
|
|
|
- v-model="form.region"
|
|
|
- :options="region"
|
|
|
- :props="{ children: 'options' }"
|
|
|
- ></el-cascader>
|
|
|
- </el-form-item>
|
|
|
<el-form-item style="float: right">
|
|
|
- <el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
- <el-button type="primary" @click="onExport">导出</el-button>
|
|
|
+ <el-button type="primary" :loading="loading" @click="onSubmit"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" :loading="loading1" @click="onExport"
|
|
|
+ >导出</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
@@ -100,7 +59,8 @@
|
|
|
<el-card class="box-card">
|
|
|
<line-charts
|
|
|
:list="tableData"
|
|
|
- xName="channel_2"
|
|
|
+ v-if="tableData.length"
|
|
|
+ xName="day"
|
|
|
:keys="chartKeys"
|
|
|
></line-charts>
|
|
|
<el-table
|
|
|
@@ -111,24 +71,41 @@
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
show-overflow-tooltip
|
|
|
- prop="channel_2"
|
|
|
- label="省级卫视"
|
|
|
+ prop="channel_0"
|
|
|
+ label="全部频道"
|
|
|
class-name="nowrap"
|
|
|
/>
|
|
|
+ <el-table-column align="center" prop="day" label="日期" />
|
|
|
<el-table-column
|
|
|
- align="center"
|
|
|
- show-overflow-tooltip
|
|
|
- prop="area_c_9"
|
|
|
- label="34城"
|
|
|
- class-name="nowrap"
|
|
|
+ prop="indicators_arrive"
|
|
|
+ :formatter="matrer"
|
|
|
+ label="到达率"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
- v-for="(item, i) in chartKeys"
|
|
|
- :key="'table' + i"
|
|
|
- align="center"
|
|
|
- :prop="item.key"
|
|
|
+ prop="indicators_market_ratings_rank"
|
|
|
+ label="市占率排名"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="indicators_tv_ratings"
|
|
|
:formatter="matrer"
|
|
|
- :label="item.name"
|
|
|
+ label="直播关注度"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="indicators_tv_ratings"
|
|
|
+ :formatter="matrer"
|
|
|
+ label="市占率"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="indicators_tv_ratings_rank"
|
|
|
+ label="直播关注度排名"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="indicators_arrive_rank"
|
|
|
+ label="到达率排名"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="indicators_loyal_rank"
|
|
|
+ label="忠诚度排名"
|
|
|
/>
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
@@ -137,8 +114,7 @@
|
|
|
|
|
|
<script>
|
|
|
// @ is an alias to /src
|
|
|
-// import { } from "@/api/index";
|
|
|
-import { channelcsv } from "@/api/index";
|
|
|
+import { tvselectDate, tvcountry } from "@/api/kuyun";
|
|
|
|
|
|
import lineCharts from "@/views/Country/components/lineCharts";
|
|
|
|
|
|
@@ -147,189 +123,143 @@ export default {
|
|
|
name: "Channel",
|
|
|
data() {
|
|
|
return {
|
|
|
+ searchDate: [],
|
|
|
chartKeys: [
|
|
|
{
|
|
|
- key: "indicators_tv_ratings",
|
|
|
- name: "直播关注度",
|
|
|
+ key: "indicators_arrive",
|
|
|
+ name: "到达率",
|
|
|
},
|
|
|
{
|
|
|
key: "indicators_market_ratings",
|
|
|
name: "市占率",
|
|
|
},
|
|
|
{
|
|
|
- key: "indicators_arrive",
|
|
|
- name: "到达率",
|
|
|
+ key: "indicators_tv_ratings",
|
|
|
+ name: "直播关注度",
|
|
|
},
|
|
|
],
|
|
|
form: {
|
|
|
- rangeTime: [],
|
|
|
- channel: 5,
|
|
|
- date: [
|
|
|
- new Date(new Date() - 86400000),
|
|
|
- new Date(new Date() - 86400000),
|
|
|
+ filter: {},
|
|
|
+ date: [],
|
|
|
+ field: [
|
|
|
+ "channel_2",
|
|
|
+ "area_c_1",
|
|
|
+ "indicators_tv_ratings",
|
|
|
+ "indicators_market_ratings",
|
|
|
],
|
|
|
- region: -1,
|
|
|
- week: 1
|
|
|
+ info: 1,
|
|
|
+ org_id: 20,
|
|
|
},
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- area_c_9: "天津",
|
|
|
- channel_2: "陕西卫视",
|
|
|
- indicators_arrive: "",
|
|
|
- indicators_market_ratings: 0.002948,
|
|
|
- indicators_market_ratings_rank: 1,
|
|
|
- indicators_tv_ratings: 0.00063,
|
|
|
- indicators_tv_ratings_rank: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- area_c_9: "武汉",
|
|
|
- channel_2: "陕西卫视",
|
|
|
- indicators_arrive: "",
|
|
|
- indicators_market_ratings: 0.000852,
|
|
|
- indicators_market_ratings_rank: 1,
|
|
|
- indicators_tv_ratings: 0.000157,
|
|
|
- indicators_tv_ratings_rank: 1,
|
|
|
- },
|
|
|
- ],
|
|
|
+ tableData: [],
|
|
|
+ loading: false,
|
|
|
+ loading1: false,
|
|
|
};
|
|
|
},
|
|
|
- mounted() {},
|
|
|
- computed: {
|
|
|
- channelNameList() {
|
|
|
- return config.channelNameList;
|
|
|
- },
|
|
|
- region() {
|
|
|
- return config.region;
|
|
|
- },
|
|
|
- cycle(){
|
|
|
- return config.cycle
|
|
|
- },
|
|
|
- weeks(){
|
|
|
- console.log(config.weeks)
|
|
|
- return config.weeks
|
|
|
- }
|
|
|
+ mounted() {
|
|
|
+ const d = new Date(Date.now() - 86400000);
|
|
|
+ let Y = d.getFullYear(),
|
|
|
+ M = d.getMonth() + 1,
|
|
|
+ D = d.getDate();
|
|
|
+ M > 9 ? "" : (M = "0" + M);
|
|
|
+ D > 9 ? "" : (D = "0" + D);
|
|
|
+ this.form.date = [[Y, M, D].join("-"), [Y, M, D].join("-")];
|
|
|
+ tvselectDate({
|
|
|
+ date: this.form.date,
|
|
|
+ key: "channel_2,time,week",
|
|
|
+ org_id: 20,
|
|
|
+ }).then(r => {
|
|
|
+ let area = false;
|
|
|
+ this.searchDate = r || [];
|
|
|
+ for (let i = 0; i < this.searchDate.length; i++) {
|
|
|
+ const v = this.searchDate[i];
|
|
|
+ if (/area/.test(v.id)) {
|
|
|
+ if (area) continue;
|
|
|
+ area = true;
|
|
|
+ this.form.filter[v.id] = [v.list[0].key + ""];
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ this.form.filter[v.id] = [v.list[0].key + ""];
|
|
|
+ }
|
|
|
+ tvcountry(this.form)
|
|
|
+ .then(r => {
|
|
|
+ this.tableData = r || [];
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
+ computed: {},
|
|
|
methods: {
|
|
|
onExport() {
|
|
|
- channelcsv(this.formatListData());
|
|
|
- },
|
|
|
- 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(",");
|
|
|
+ this.loading1 = true;
|
|
|
+ let form = JSON.parse(JSON.stringify(this.form));
|
|
|
+ fetch(
|
|
|
+ config.base.kuyunApi +
|
|
|
+ "/api/evaluation/eye/download/performance/tvkpi/download",
|
|
|
+ {
|
|
|
+ method: "post",
|
|
|
+ responseType: "blob",
|
|
|
+ body: JSON.stringify(form),
|
|
|
}
|
|
|
- }
|
|
|
- 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),
|
|
|
- ];
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ return res.blob();
|
|
|
+ })
|
|
|
+ .then(blob => {
|
|
|
+ new Blob([blob]);
|
|
|
+ let fileName = "频道分地区收视.csv";
|
|
|
+ var link = document.createElement("a");
|
|
|
+ link.href = window.URL.createObjectURL(blob);
|
|
|
+ link.download = fileName;
|
|
|
+ link.click();
|
|
|
+ window.URL.revokeObjectURL(link.href);
|
|
|
+ this.loading1 = false;
|
|
|
+ });
|
|
|
},
|
|
|
-
|
|
|
disabledDate(time) {
|
|
|
return time.getTime() > Date.now() - 86400000;
|
|
|
},
|
|
|
onSubmit() {
|
|
|
- },
|
|
|
- matrer(row, column, cellValue) {
|
|
|
- return (cellValue * 100).toFixed(4) - 0 + "%";
|
|
|
- },
|
|
|
- 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'
|
|
|
+ this.loading = true;
|
|
|
+ let form = JSON.parse(JSON.stringify(this.form));
|
|
|
+ let keys = Object.keys(this.form.filter);
|
|
|
+ for (let i = 0; i < keys.length; i++) {
|
|
|
+ const v = keys[i];
|
|
|
+ if (form.filter[v] != -1) continue;
|
|
|
+ for (let o = 0; o < this.searchDate.length; o++) {
|
|
|
+ const item = this.searchDate[o];
|
|
|
+ if (v === item.key) {
|
|
|
+ form.filter[v] = item.list.map(v => v.key);
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
- time = start_hour + start_min + "_" + end_hour + end_min;
|
|
|
- } else {
|
|
|
- time = "0000_2400";
|
|
|
}
|
|
|
- return {
|
|
|
- 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, "channel", 0);
|
|
|
+ tvcountry(form)
|
|
|
+ .then(r => {
|
|
|
+ this.tableData = r || [];
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
},
|
|
|
- weekSelect(a){
|
|
|
- this.selectAll(a, "week", 0);
|
|
|
+ matrer(row, column, cellValue) {
|
|
|
+ if (typeof cellValue !== "number") return cellValue;
|
|
|
+ return (cellValue * 100).toFixed(4) - 0 + "%";
|
|
|
},
|
|
|
- regionSelect(a) {
|
|
|
- this.selectAll(a, "region", -1);
|
|
|
+ select(v, se) {
|
|
|
+ if (v.id === "time") {
|
|
|
+ this.timeSelect(se, v.id, "0000_2400");
|
|
|
+ } else this.timeSelect(se, v.id, "-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(",");
|
|
|
+ timeSelect(a, key, all) {
|
|
|
+ let ngx = new RegExp(all + ",?", "g");
|
|
|
+ let end = (a || [])[(a || []).length - 1],
|
|
|
+ s = (a || []).join(",").replace(ngx, "");
|
|
|
+ if (end !== all) this.form.filter[key] = s ? s.split(",") : [];
|
|
|
+ else this.form.filter[key] = [all];
|
|
|
},
|
|
|
},
|
|
|
components: { lineCharts },
|
|
|
@@ -337,10 +267,10 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.SingleDay {
|
|
|
+.AbstractProgram {
|
|
|
margin: 10px 15px;
|
|
|
}
|
|
|
-.SingleDay .nowrap .cell {
|
|
|
+.AbstractProgram .nowrap .cell {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
</style>
|
liyongli