|
|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <div class="SingleDay">
|
|
|
+ <el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
+ <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>频道全天节目</el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ label-width="120px"
|
|
|
+ class="demo-form-inline"
|
|
|
+ >
|
|
|
+ <el-form-item label="日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.date"
|
|
|
+ type="daterange"
|
|
|
+ :disabled-date="time => disabledDate(time)"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="频道">
|
|
|
+ <el-select
|
|
|
+ v-model="form.channel"
|
|
|
+ placeholder="请选择频道"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ @change="channelSelect"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in channelList"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="区域">
|
|
|
+ <el-select
|
|
|
+ v-model="form.region"
|
|
|
+ placeholder="请选择区域"
|
|
|
+ @change="regionSelect"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in region"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </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-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card class="box-card">
|
|
|
+ <line-charts
|
|
|
+ :list="tableDate"
|
|
|
+ xName="day"
|
|
|
+ :keys="chartKeys"
|
|
|
+ ></line-charts>
|
|
|
+ <el-table
|
|
|
+ :data="tableDate"
|
|
|
+ :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ width="400px"
|
|
|
+ prop="date"
|
|
|
+ label="日期"
|
|
|
+ class-name="nowrap"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, i) in tableKeys"
|
|
|
+ :key="'table' + i"
|
|
|
+ align="center"
|
|
|
+ :prop="item.key"
|
|
|
+ :formatter="matrer"
|
|
|
+ :label="item.name"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="(li, o) in item.children"
|
|
|
+ :key="i + '-' + o"
|
|
|
+ :prop="li.key"
|
|
|
+ :label="li.name"
|
|
|
+ :formatter="matrer"
|
|
|
+ />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<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: {
|
|
|
+ channel: 0,
|
|
|
+ date: [
|
|
|
+ new Date(new Date() - 86400000),
|
|
|
+ new Date(new Date() - 86400000),
|
|
|
+ ],
|
|
|
+ region: 9,
|
|
|
+ },
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ channel_2: "陕西卫视",
|
|
|
+ day: "2021-10-13",
|
|
|
+ indicators_arrive: 0.007999,
|
|
|
+ indicators_arrive_rank: 2,
|
|
|
+ indicators_market_ratings: 0.003225,
|
|
|
+ indicators_market_ratings_rank: 2,
|
|
|
+ indicators_tv_ratings: 0.000193,
|
|
|
+ indicators_tv_ratings_rank: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channel_2: "陕西卫视",
|
|
|
+ day: "2021-10-14",
|
|
|
+ indicators_arrive: 0.009549,
|
|
|
+ indicators_arrive_rank: 2,
|
|
|
+ indicators_market_ratings: 0.003733,
|
|
|
+ indicators_market_ratings_rank: 2,
|
|
|
+ indicators_tv_ratings: 0.000228,
|
|
|
+ indicators_tv_ratings_rank: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channel_2: "安徽卫视",
|
|
|
+ day: "2021-10-13",
|
|
|
+ indicators_arrive: 0.017338,
|
|
|
+ indicators_arrive_rank: 1,
|
|
|
+ indicators_market_ratings: 0.009368,
|
|
|
+ indicators_market_ratings_rank: 1,
|
|
|
+ indicators_tv_ratings: 0.000561,
|
|
|
+ indicators_tv_ratings_rank: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channel_2: "安徽卫视",
|
|
|
+ day: "2021-10-14",
|
|
|
+ indicators_arrive: 0.019002,
|
|
|
+ indicators_arrive_rank: 1,
|
|
|
+ indicators_market_ratings: 0.009943,
|
|
|
+ indicators_market_ratings_rank: 1,
|
|
|
+ indicators_tv_ratings: 0.000608,
|
|
|
+ indicators_tv_ratings_rank: 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ computed: {
|
|
|
+ channelList() {
|
|
|
+ return config.channelNameList;
|
|
|
+ },
|
|
|
+ region() {
|
|
|
+ let reg = config.region || [],
|
|
|
+ li = [];
|
|
|
+ for (let i = 0; i < reg.length; i++) {
|
|
|
+ const v = reg[i];
|
|
|
+ if (v.label === "行业分城") {
|
|
|
+ li = v.options || [];
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return li;
|
|
|
+ },
|
|
|
+ tableDate() {
|
|
|
+ const obj = {};
|
|
|
+
|
|
|
+ const b = [
|
|
|
+ {
|
|
|
+ key: "indicators_tv_ratings",
|
|
|
+ name: "直播关注度",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "indicators_market_ratings",
|
|
|
+ name: "市占率",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "indicators_arrive",
|
|
|
+ name: "到达率",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ for (let i = 0; i < this.tableData.length; i++) {
|
|
|
+ const v = this.tableData[i];
|
|
|
+ if (typeof obj[v.channel_2] !== "object") obj[v.channel_2] = {};
|
|
|
+ obj[v.channel_2][v.day] = v;
|
|
|
+ }
|
|
|
+ let li = [],
|
|
|
+ keys = Object.keys(obj),
|
|
|
+ dataLen = Object.keys(obj[keys[0]]);
|
|
|
+ for (let i = 0; i < dataLen.length; i++) {
|
|
|
+ let p = {};
|
|
|
+ for (let o = 0; o < keys.length; o++) {
|
|
|
+ const v = obj[keys[o]][dataLen[i]];
|
|
|
+ b.map(k => {
|
|
|
+ p[keys[o] + "_" + k.key] = v[k.key];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ li.push({
|
|
|
+ date: dataLen[i],
|
|
|
+ ...p,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return li;
|
|
|
+ },
|
|
|
+ chartKeys() {
|
|
|
+ const obj = {},
|
|
|
+ li = [];
|
|
|
+ for (let i = 0; i < this.tableData.length; i++) {
|
|
|
+ const b = [
|
|
|
+ {
|
|
|
+ key: "indicators_tv_ratings",
|
|
|
+ name: "直播关注度",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "indicators_market_ratings",
|
|
|
+ name: "市占率",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "indicators_arrive",
|
|
|
+ name: "到达率",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const v = this.tableData[i];
|
|
|
+ if (obj[v.channel_2] === true) continue;
|
|
|
+ obj[v.channel_2] = true;
|
|
|
+ li.push(
|
|
|
+ ...b.map(k => {
|
|
|
+ k.key = v.channel_2 + "_" + k.key;
|
|
|
+ k.name = v.channel_2 + "_" + k.name;
|
|
|
+ return k;
|
|
|
+ })
|
|
|
+ );
|
|
|
+ }
|
|
|
+ console.log(li);
|
|
|
+ return li;
|
|
|
+ },
|
|
|
+ tableKeys() {
|
|
|
+ const obj = {},
|
|
|
+ li = [];
|
|
|
+ for (let i = 0; i < this.tableData.length; i++) {
|
|
|
+ const b = [
|
|
|
+ {
|
|
|
+ key: "indicators_tv_ratings",
|
|
|
+ name: "直播关注度",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "indicators_market_ratings",
|
|
|
+ name: "市占率",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "indicators_arrive",
|
|
|
+ name: "到达率",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const v = this.tableData[i];
|
|
|
+ if (obj[v.channel_2] === true) continue;
|
|
|
+ obj[v.channel_2] = true;
|
|
|
+ li.push({
|
|
|
+ name: v.channel_2,
|
|
|
+ children: b.map(k => {
|
|
|
+ k.key = v.channel_2 + "_" + k.key;
|
|
|
+ return k;
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return li;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onExport() {},
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now() - 86400000;
|
|
|
+ },
|
|
|
+ onSubmit() {},
|
|
|
+ matrer(row, column, cellValue) {
|
|
|
+ return (cellValue * 100).toFixed(4) - 0 + "%";
|
|
|
+ },
|
|
|
+ channelSelect(a) {
|
|
|
+ this.selectAll(a, "channel", 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: { lineCharts },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.SingleDay {
|
|
|
+ margin: 10px 15px;
|
|
|
+}
|
|
|
+.SingleDay .nowrap .cell {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+</style>
|
liyongli