|
|
@@ -0,0 +1,1176 @@
|
|
|
+<template>
|
|
|
+ <div class="AdvertisingEye">
|
|
|
+ <el-loading></el-loading>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="2" class="colTime channelSelect">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <svg
|
|
|
+ style="margin-top: 15px"
|
|
|
+ t="1646296405629"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="2170"
|
|
|
+ width="32"
|
|
|
+ height="32"
|
|
|
+ xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 476H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 760H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
|
|
|
+ p-id="2171"
|
|
|
+ fill="#ffffff"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M160 228m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
|
|
|
+ p-id="2172"
|
|
|
+ fill="#ffffff"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M160 512m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
|
|
|
+ p-id="2173"
|
|
|
+ fill="#ffffff"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M160 796m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
|
|
|
+ p-id="2174"
|
|
|
+ fill="#ffffff"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
+ <div class="channelSelctList">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ channelSelctitem: true,
|
|
|
+ channelSelctactive: channel_act === i,
|
|
|
+ }"
|
|
|
+ v-for="(item, i) in channleList"
|
|
|
+ @click="() => selectChannel1(i)"
|
|
|
+ :key="'channel' + i"
|
|
|
+ >
|
|
|
+ {{ item.channelName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22">
|
|
|
+ <el-row>
|
|
|
+ <el-col
|
|
|
+ v-for="(item, i) in timeSelect"
|
|
|
+ @click="() => selectChannel(i)"
|
|
|
+ :key="i"
|
|
|
+ :span="colWidth"
|
|
|
+ :class="{ colTime: true, active: active === i }"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">全盘趋势</div>
|
|
|
+ <br />
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in hard_list"
|
|
|
+ :key="'launch' + i"
|
|
|
+ :plain="hard_act !== i"
|
|
|
+ @click="() => hard_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <br />
|
|
|
+ <div ref="launch" id="launch"></div>
|
|
|
+ <br />
|
|
|
+ <div style="border-top: 1px dashed #eee"></div>
|
|
|
+ <br />
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in soft_list"
|
|
|
+ :key="'trend' + i"
|
|
|
+ :plain="soft_act !== i"
|
|
|
+ @click="() => soft_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <br />
|
|
|
+ <div ref="trend"></div>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">行业结构</div>
|
|
|
+ <br />
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in industry_list"
|
|
|
+ :key="'industry' + i"
|
|
|
+ :plain="industry_act !== i"
|
|
|
+ @click="() => industry_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <br />
|
|
|
+ <div ref="industry"></div>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">媒体份额</div>
|
|
|
+ <br />
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in share_list"
|
|
|
+ :key="'share' + i"
|
|
|
+ :plain="share_act !== i"
|
|
|
+ @click="() => share_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <br />
|
|
|
+ <div ref="share1"></div>
|
|
|
+ <br />
|
|
|
+ <div ref="share"></div>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">软植栏目分布</div>
|
|
|
+ <br />
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in soft_planting_list"
|
|
|
+ :key="'soft_planting' + i"
|
|
|
+ :plain="soft_planting_act !== i"
|
|
|
+ @click="() => soft_planting_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <br />
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="customer_list">
|
|
|
+ <div class="customer_list_head">
|
|
|
+ 软广-节目类型占比
|
|
|
+ </div>
|
|
|
+ <div ref="softAd"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="customer_list">
|
|
|
+ <div class="customer_list_head">
|
|
|
+ 栏目排名top10-真人秀
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="singleTableRef"
|
|
|
+ :data="[]"
|
|
|
+ header-row-class-name="headStyle"
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ property="date"
|
|
|
+ label="栏目主名称"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="频次(次)"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="时长(秒)"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="客户数"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">重点客户</div>
|
|
|
+ <br />
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in hard_important_list"
|
|
|
+ :key="'hard_important' + i"
|
|
|
+ :plain="hard_important_act !== i"
|
|
|
+ @click="() => hard_important_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <br />
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="customer_list">
|
|
|
+ <div class="customer_list_head">
|
|
|
+ 硬广-广告主投放top10
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="singleTableRef"
|
|
|
+ :data="[]"
|
|
|
+ header-row-class-name="headStyle"
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ property="date"
|
|
|
+ label="广告主名称"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="频次(次)"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="时长(秒)"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" property="name" label="费用" />
|
|
|
+ <el-table-column align="center" property="name" label="环比" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="customer_list">
|
|
|
+ <div class="customer_list_head">
|
|
|
+ 硬广-品牌投放top10
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="singleTableRef"
|
|
|
+ :data="[]"
|
|
|
+ header-row-class-name="headStyle"
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ property="date"
|
|
|
+ label="品牌名称"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="频次(次)"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="时长(秒)"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" property="name" label="费用" />
|
|
|
+ <el-table-column align="center" property="name" label="环比" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <br />
|
|
|
+ <div style="border-top: 1px dashed #eee"></div>
|
|
|
+ <br />
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in soft_important_list"
|
|
|
+ :key="'soft_important' + i"
|
|
|
+ :plain="soft_important_act !== i"
|
|
|
+ @click="() => soft_important_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <br />
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="customer_list">
|
|
|
+ <div class="customer_list_head">
|
|
|
+ 软广-广告主投放top10
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="singleTableRef"
|
|
|
+ :data="[]"
|
|
|
+ header-row-class-name="headStyle"
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ property="date"
|
|
|
+ label="广告主名称"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="频次(次)"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="时长(秒)"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" property="name" label="费用" />
|
|
|
+ <el-table-column align="center" property="name" label="环比" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="customer_list">
|
|
|
+ <div class="customer_list_head">
|
|
|
+ 软广-品牌投放top10
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="singleTableRef"
|
|
|
+ :data="[]"
|
|
|
+ header-row-class-name="headStyle"
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ property="date"
|
|
|
+ label="品牌名称"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="频次(次)"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ property="name"
|
|
|
+ label="时长(秒)"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" property="name" label="费用" />
|
|
|
+ <el-table-column align="center" property="name" label="环比" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// @ is an alias to /src
|
|
|
+import { adChannelList, launchList, trendList } from "@/api/index.js";
|
|
|
+// import config from "@/config/index";
|
|
|
+import * as echarts from "echarts";
|
|
|
+export default {
|
|
|
+ name: "AdvertisingEye",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ channleList: [],
|
|
|
+ active: 0,
|
|
|
+ timeSelect: [],
|
|
|
+ channel_act: 0,
|
|
|
+ hard_act: 0,
|
|
|
+ share_act: 0,
|
|
|
+ soft_important_act: 0,
|
|
|
+ soft_planting_act: 0,
|
|
|
+ hard_important_act: 0,
|
|
|
+ industry_act: 0,
|
|
|
+ soft_act: 0,
|
|
|
+ hard_list: [
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ proportionType: "timeSize",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ proportionType: "pinci",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "费用",
|
|
|
+ proportionType: "fee",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ soft_list: [
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ proportionType: "timeSize",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ proportionType: "pinci",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ industry_list: [
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ proportionType: "timeSize",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ proportionType: "pinci",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "客户数",
|
|
|
+ proportionType: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ share_list: [
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ proportionType: "timeSize",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ proportionType: "pinci",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "费用",
|
|
|
+ proportionType: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "客户数",
|
|
|
+ proportionType: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ soft_planting_list: [
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ proportionType: "timeSize",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ proportionType: "pinci",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "客户数",
|
|
|
+ proportionType: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ hard_important_list: [
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ proportionType: "timeSize",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ proportionType: "pinci",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "费用",
|
|
|
+ proportionType: "fee",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ soft_important_list: [
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ proportionType: "timeSize",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ proportionType: "pinci",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ hard_chart: undefined,
|
|
|
+ soft_chart: undefined,
|
|
|
+ softAd_chart: undefined,
|
|
|
+ share_chart: undefined,
|
|
|
+ share1_chart: undefined,
|
|
|
+ industry_chart: undefined,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.timeSelect = this.timeList();
|
|
|
+ this.init();
|
|
|
+ this.industryChart();
|
|
|
+ this.shareChart();
|
|
|
+ this.share1Chart();
|
|
|
+ this.softAdChart();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ colWidth() {
|
|
|
+ return 6;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filter: {},
|
|
|
+ methods: {
|
|
|
+ selectChannel1(i) {
|
|
|
+ this.channel_act = i;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ selectChannel(i) {
|
|
|
+ this.active = i;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ adChannelList().then(r => {
|
|
|
+ this.channleList = r || [];
|
|
|
+ let sel = this.timeSelect[this.active];
|
|
|
+ launchList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(launch => {
|
|
|
+ this.launchChart(launch);
|
|
|
+ });
|
|
|
+
|
|
|
+ trendList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(trend => {
|
|
|
+ this.trendChart(trend);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 距离当前之前某天日期格式
|
|
|
+ * @param {number} clearDay
|
|
|
+ * @returns [dateString]
|
|
|
+ */
|
|
|
+ dateFommat(clearDay = 0) {
|
|
|
+ // 格式化日期 【年，月，日】
|
|
|
+ let nowDate = new Date(new Date() - clearDay * 86400000),
|
|
|
+ month =
|
|
|
+ nowDate.getMonth() + 1 > 9
|
|
|
+ ? nowDate.getMonth() + 1
|
|
|
+ : "0" + (nowDate.getMonth() + 1),
|
|
|
+ day =
|
|
|
+ nowDate.getDate() > 9 ? nowDate.getDate() : "0" + nowDate.getDate();
|
|
|
+ return [nowDate.getFullYear(), month, day];
|
|
|
+ },
|
|
|
+ timeList() {
|
|
|
+ let o = this.dateFommat(1),
|
|
|
+ timeSelect = [
|
|
|
+ {
|
|
|
+ text: "近1个月",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ o[1] === 1 ? (o[0] = o[0] - 1) : "";
|
|
|
+ o[1] > 1 ? --o[1] : (o[1] = 12);
|
|
|
+ let lastMonth = new Date(o[0], o[1], 0);
|
|
|
+ timeSelect[0].start = `${o[0]}-${o[1] > 9 ? o[1] : "0" + o[1]}-01`;
|
|
|
+ timeSelect[0].end = `${o[0]}-${
|
|
|
+ o[1] > 9 ? o[1] : "0" + o[1]
|
|
|
+ }-${lastMonth.getDate()}`;
|
|
|
+ let len = [3, 6];
|
|
|
+ for (let i = 0; i < len.length; i++) {
|
|
|
+ let v = len[i];
|
|
|
+ var date = new Date();
|
|
|
+ date.setMonth(date.getMonth() - v - 1);
|
|
|
+ timeSelect.push({
|
|
|
+ text: v === 3 ? "近三个月" : "近半年",
|
|
|
+ startDate: `${date.getFullYear()}-${
|
|
|
+ date.getMonth() > 9 ? date.getMonth() : "0" + date.getMonth()
|
|
|
+ }-01`,
|
|
|
+ endDate: timeSelect[0].end,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ timeSelect.push({
|
|
|
+ text: `${o[0]}年`,
|
|
|
+ startDate: `${o[0]}-01-01`,
|
|
|
+ endDate: `${o[0]}-12-31`,
|
|
|
+ });
|
|
|
+ return timeSelect;
|
|
|
+ },
|
|
|
+ share_change(i) {
|
|
|
+ this.share_act = i;
|
|
|
+ this.shareChart();
|
|
|
+ this.share1Chart();
|
|
|
+ },
|
|
|
+ soft_planting_change(i) {
|
|
|
+ this.soft_planting_act = i;
|
|
|
+ },
|
|
|
+ hard_important_change(i) {
|
|
|
+ this.hard_important_act = i;
|
|
|
+ },
|
|
|
+ soft_important_change(i) {
|
|
|
+ this.soft_important_act = i;
|
|
|
+ },
|
|
|
+ hard_change(i) {
|
|
|
+ this.hard_act = i;
|
|
|
+ let sel = this.timeSelect[this.active];
|
|
|
+ launchList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(launch => {
|
|
|
+ this.launchChart(launch);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ soft_change(i) {
|
|
|
+ this.soft_act = i;
|
|
|
+ let sel = this.timeSelect[this.active];
|
|
|
+ trendList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(trend => {
|
|
|
+ this.trendChart(trend);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ industry_change(i) {
|
|
|
+ this.industry_act = i;
|
|
|
+ this.industryChart();
|
|
|
+ },
|
|
|
+ launchtrendData(list = { before: [], now: [] }, keyName) {
|
|
|
+ const org = list;
|
|
|
+ let old = org.before || [];
|
|
|
+ let now = org.now || [];
|
|
|
+ let len = Math.max(old.length, now.length),
|
|
|
+ key = this.hard_list[this[keyName + "_act"]].proportionType;
|
|
|
+ let keys = [],
|
|
|
+ realKey = [[], []],
|
|
|
+ value = [[], []],
|
|
|
+ lendata = [];
|
|
|
+ for (let i = 0; i < len; i++) {
|
|
|
+ let o = old[i] || {},
|
|
|
+ n = now[i] || {},
|
|
|
+ realItem = o.dt ? o : n;
|
|
|
+ if (keyName === "launch") keys.push(`第${i + 1}天`);
|
|
|
+ if (keyName === "trend") keys.push(realItem.hour);
|
|
|
+ o.dt && realKey[0].push(o.dt);
|
|
|
+ n.dt && realKey[1].push(n.dt);
|
|
|
+ o[key] >= 0 && value[0].push(o[key]);
|
|
|
+ n[key] >= 0 && value[1].push(n[key]);
|
|
|
+ }
|
|
|
+ if (old && old.length)
|
|
|
+ lendata.push(`${old[0].dt}到${old[old.length - 1].dt}`);
|
|
|
+ if (now && now.length)
|
|
|
+ lendata.push(`${now[0].dt}到${now[now.length - 1].dt}`);
|
|
|
+ return {
|
|
|
+ keys,
|
|
|
+ realKey,
|
|
|
+ lendata,
|
|
|
+ value,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ launchChart(list) {
|
|
|
+ if (!this.$refs.launch) return;
|
|
|
+ if (this.hard_chart && this.hard_chart.dispose) {
|
|
|
+ this.hard_chart.dispose();
|
|
|
+ this.hard_chart = undefined;
|
|
|
+ }
|
|
|
+ this.hard_chart = echarts.init(this.$refs.launch);
|
|
|
+ let chartData = this.launchtrendData(list, "launch");
|
|
|
+ this.hard_chart.resize({
|
|
|
+ height: (this.$refs.launch.offsetWidth * 6) / 16,
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ data: chartData.lendata,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: chartData.keys,
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: arr => {
|
|
|
+ return arr.split(" ")[0];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
|
|
|
+ series: chartData.value.map((data, i) => {
|
|
|
+ return {
|
|
|
+ name: chartData.lendata[i],
|
|
|
+ data,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ option && this.hard_chart.setOption(option);
|
|
|
+ },
|
|
|
+ trendChart(list) {
|
|
|
+ if (!this.$refs.trend) return;
|
|
|
+ if (this.soft_chart && this.soft_chart.dispose) {
|
|
|
+ this.soft_chart.dispose();
|
|
|
+ this.soft_chart = undefined;
|
|
|
+ }
|
|
|
+ this.soft_chart = echarts.init(this.$refs.trend);
|
|
|
+ let chartData = this.launchtrendData(list, "trend");
|
|
|
+ this.soft_chart.resize({
|
|
|
+ height: (this.$refs.trend.offsetWidth * 6) / 16,
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ data: chartData.lendata,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: chartData.keys,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ },
|
|
|
+ grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
|
|
|
+ series: chartData.value.map((v, i) => {
|
|
|
+ return {
|
|
|
+ name: chartData.lendata[i],
|
|
|
+ data: v,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.soft_chart.setOption(option);
|
|
|
+ },
|
|
|
+ industryChart() {
|
|
|
+ if (!this.$refs.industry) return;
|
|
|
+ if (this.industry_chart && this.industry_chart.dispose) {
|
|
|
+ this.industry_chart.dispose();
|
|
|
+ this.industry_chart = undefined;
|
|
|
+ }
|
|
|
+ this.industry_chart = echarts.init(this.$refs.industry);
|
|
|
+ this.industry_chart.resize({
|
|
|
+ height: (this.$refs.industry.offsetWidth * 6) / 16,
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ legend: {
|
|
|
+ left: "center",
|
|
|
+ bottom: 10,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ center: ["25%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: "40",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: "食品" },
|
|
|
+ { value: 735, name: "药品" },
|
|
|
+ { value: 580, name: "饮料" },
|
|
|
+ { value: 484, name: "快消" },
|
|
|
+ { value: 300, name: "互联网" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ center: ["75%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: "40",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: "化妆品" },
|
|
|
+ { value: 735, name: "家居" },
|
|
|
+ { value: 580, name: "工业" },
|
|
|
+ { value: 484, name: "数码" },
|
|
|
+ { value: 300, name: "房地产" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.industry_chart.setOption(option);
|
|
|
+ },
|
|
|
+ shareChart() {
|
|
|
+ if (!this.$refs.share) return;
|
|
|
+ if (this.share_chart && this.share_chart.dispose) {
|
|
|
+ this.share_chart.dispose();
|
|
|
+ this.share_chart = undefined;
|
|
|
+ }
|
|
|
+ this.share_chart = echarts.init(this.$refs.share);
|
|
|
+ this.share_chart.resize({
|
|
|
+ height: (this.$refs.share.offsetWidth * 6) / 16,
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ title: [
|
|
|
+ {
|
|
|
+ text: "重点媒体份额",
|
|
|
+ top: 10,
|
|
|
+ left: 50,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ left: "center",
|
|
|
+ bottom: 10,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ center: ["25%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: "40",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: "食品" },
|
|
|
+ { value: 735, name: "药品" },
|
|
|
+ { value: 580, name: "饮料" },
|
|
|
+ { value: 484, name: "快消" },
|
|
|
+ { value: 300, name: "互联网" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ center: ["75%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: "40",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: "化妆品" },
|
|
|
+ { value: 735, name: "家居" },
|
|
|
+ { value: 580, name: "工业" },
|
|
|
+ { value: 484, name: "数码" },
|
|
|
+ { value: 300, name: "房地产" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.share_chart.setOption(option);
|
|
|
+ },
|
|
|
+ share1Chart() {
|
|
|
+ if (!this.$refs.share1) return;
|
|
|
+ if (this.share1_chart && this.share1_chart.dispose) {
|
|
|
+ this.share1_chart.dispose();
|
|
|
+ this.share1_chart = undefined;
|
|
|
+ }
|
|
|
+ this.share1_chart = echarts.init(this.$refs.share1);
|
|
|
+ this.share1_chart.resize({
|
|
|
+ height: (this.$refs.share1.offsetWidth * 6) / 25,
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: ["硬广", "软广"],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "硬广",
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [60, 40],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "软广",
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [40, 60],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.share1_chart.setOption(option);
|
|
|
+ },
|
|
|
+ softAdChart() {
|
|
|
+ if (!this.$refs.softAd) return;
|
|
|
+ if (this.softAd_chart && this.softAd_chart.dispose) {
|
|
|
+ this.softAd_chart.dispose();
|
|
|
+ this.softAd_chart = undefined;
|
|
|
+ }
|
|
|
+ this.softAd_chart = echarts.init(this.$refs.softAd);
|
|
|
+ this.softAd_chart.resize({
|
|
|
+ height: 500,
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ indicator: [
|
|
|
+ { name: "真人秀", max: 6500 },
|
|
|
+ { name: "科教", max: 16000 },
|
|
|
+ { name: "调解", max: 30000 },
|
|
|
+ { name: "综艺", max: 38000 },
|
|
|
+ { name: "剧场", max: 52000 },
|
|
|
+ { name: "脱口秀", max: 25000 },
|
|
|
+ ],
|
|
|
+ shape: "circle",
|
|
|
+ splitNumber: 5,
|
|
|
+ axisName: {
|
|
|
+ color: "rgb(238, 197, 102)",
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: ["rgba(238, 197, 102, 0.1)"].reverse(),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(238, 197, 102, 0.5)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "radar",
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ opacity: 0.5,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: [4200, 3000, 20000, 35000, 50000, 18000],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.softAd_chart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeUnmount: function() {
|
|
|
+ this.hard_chart && this.hard_chart.dispose();
|
|
|
+ this.soft_chart && this.soft_chart.dispose();
|
|
|
+ this.share1_chart && this.share1_chart.dispose();
|
|
|
+ this.share_chart && this.share_chart.dispose();
|
|
|
+ this.industry_chart && this.industry_chart.dispose();
|
|
|
+ this.share1_chart && (this.share1_chart = undefined);
|
|
|
+ this.share_chart && (this.share_chart = undefined);
|
|
|
+ this.industry_chart && (this.industry_chart = undefined);
|
|
|
+ this.hard_chart && (this.hard_chart = undefined);
|
|
|
+ this.soft_chart && (this.soft_chart = undefined);
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.AdvertisingEye {
|
|
|
+ margin: 10px 15px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.AdvertisingEye .el-card__body {
|
|
|
+ padding: 0 0 20px 0;
|
|
|
+}
|
|
|
+.AdvertisingEye .colTime,
|
|
|
+.AdvertisingEye .channelSelect .el-dropdown-link {
|
|
|
+ height: 62px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 30px;
|
|
|
+ line-height: 62px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(25, 137, 250, 0.5);
|
|
|
+ -moz-user-select: none; /*火狐*/
|
|
|
+ -webkit-user-select: none; /*webkit浏览器*/
|
|
|
+ -ms-user-select: none; /*IE10*/
|
|
|
+ -khtml-user-select: none; /*早期浏览器*/
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+.AdvertisingEye .colTime:not(:first-child) {
|
|
|
+ border-left: 1px solid #fff;
|
|
|
+}
|
|
|
+.AdvertisingEye .colTime:hover,
|
|
|
+.AdvertisingEye .active {
|
|
|
+ background-color: rgba(25, 137, 250, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.AdvertisingEye .channelSelect {
|
|
|
+ position: relative;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+
|
|
|
+.AdvertisingEye .channelSelect .el-dropdown-link {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+}
|
|
|
+.AdvertisingEye .channelSelect:hover {
|
|
|
+ background-color: rgba(25, 137, 250, 0.5);
|
|
|
+}
|
|
|
+.AdvertisingEye .channelSelect .channelSelctList {
|
|
|
+ display: none;
|
|
|
+ width: 600px;
|
|
|
+ margin-top: -5px;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5em;
|
|
|
+ color: #000;
|
|
|
+ box-shadow: 5px 5px 5px #ddd;
|
|
|
+}
|
|
|
+.AdvertisingEye .channelSelect:hover .channelSelctList {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.AdvertisingEye .channelSelctitem {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16.6%;
|
|
|
+ padding: 1em 2px;
|
|
|
+ line-height: 1.5em;
|
|
|
+}
|
|
|
+.AdvertisingEye .channelSelctitem:hover,
|
|
|
+.AdvertisingEye .channelSelctactive {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #40a1f3;
|
|
|
+}
|
|
|
+.AdvertisingEye .title_card {
|
|
|
+ background-color: #1989fa;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ padding-left: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.AdvertisingEye .customer_list {
|
|
|
+ width: 500px;
|
|
|
+ margin: 30px auto;
|
|
|
+ border: 1px solid #d2e7fc;
|
|
|
+ border-top: 3px solid #40a1f3;
|
|
|
+}
|
|
|
+.AdvertisingEye .customer_list_head {
|
|
|
+ line-height: 42px;
|
|
|
+ height: 42px;
|
|
|
+ color: #378ee8;
|
|
|
+ border-bottom: none;
|
|
|
+ font-family: "Microsoft YaHei";
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ background-color: #d9efff;
|
|
|
+}
|
|
|
+.AdvertisingEye .headStyle .cell {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+</style>
|
liyongli