|
|
@@ -0,0 +1,1034 @@
|
|
|
+<template>
|
|
|
+ <div class="hardAdvertisement">
|
|
|
+ <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 launch_list"
|
|
|
+ :key="'launch' + i"
|
|
|
+ :plain="launch_act !== i"
|
|
|
+ @click="() => launch_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <br />
|
|
|
+ <div ref="launch" id="launch"></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 launch_list"
|
|
|
+ :key="'trend' + i"
|
|
|
+ :plain="trend_act !== i"
|
|
|
+ @click="() => trend_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>
|
|
|
+ <el-row class="proportion">
|
|
|
+ <el-col :span="10">
|
|
|
+ <br />
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in launch_list"
|
|
|
+ :key="'launch' + i"
|
|
|
+ :plain="proportion_act !== i"
|
|
|
+ @click="() => proportion_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <div ref="pieProportion"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-table
|
|
|
+ :data="proportionData"
|
|
|
+ header-row-class-name="headStyle"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ prop="industry"
|
|
|
+ label="大行业名称"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" label="费用（万元）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ (scope.row.fee / 10000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="时长（秒）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ (scope.row.timeSize / 1000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="pinci" label="频次（次）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ scope.row.pinci
|
|
|
+ .toFixed(0)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="品牌数（个）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ scope.row.customer
|
|
|
+ .toFixed(0)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">客户投放详情</div>
|
|
|
+ <br />
|
|
|
+ <div>
|
|
|
+ <el-button-group style="margin-left: 1.5em">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-for="(item, i) in customer_list"
|
|
|
+ :key="'customer' + i"
|
|
|
+ :plain="customer_act !== i"
|
|
|
+ @click="() => customer_change(i)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12" v-if="customerData.now && customerData.now.length">
|
|
|
+ <div class="customer_list">
|
|
|
+ <div class="customer_list_head">
|
|
|
+ {{ customerData.now[0].dt }}至{{
|
|
|
+ customerData.now[customerData.now.length - 1].dt
|
|
|
+ }}
|
|
|
+ 单位（{{ customer_list[customer_act].company }}）
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="customerData.now"
|
|
|
+ :show-header="false"
|
|
|
+ style="width: 100%;"
|
|
|
+ max-height="400"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" prop="brand" />
|
|
|
+ <el-table-column align="center" prop="state" />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :prop="customer_list[customer_act].customerType"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <span
|
|
|
+ v-if="customer_list[customer_act].customerType === 'fee'"
|
|
|
+ >{{
|
|
|
+ (scope.row.fee / 10000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ customer_list[customer_act].customerType === 'timeSize'
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ (scope.row.timeSize / 1000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ customer_list[customer_act].customerType === 'pinci'
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ scope.row.pinci
|
|
|
+ .toString()
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="12"
|
|
|
+ v-if="customerData.before && customerData.before.length"
|
|
|
+ >
|
|
|
+ <div class="customer_list">
|
|
|
+ <div class="customer_list_head">
|
|
|
+ {{ customerData.before[0].dt }}至{{
|
|
|
+ customerData.before[customerData.before.length - 1].dt
|
|
|
+ }}
|
|
|
+ 单位（{{ customer_list[customer_act].company }}）
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="customerData.before"
|
|
|
+ :show-header="false"
|
|
|
+ style="width: 100%;"
|
|
|
+ max-height="400"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" prop="brand" />
|
|
|
+ <el-table-column align="center" prop="state" />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :prop="customer_list[customer_act].customerType"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <span
|
|
|
+ v-if="customer_list[customer_act].customerType === 'fee'"
|
|
|
+ >{{
|
|
|
+ (scope.row.fee / 10000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ customer_list[customer_act].customerType === 'timeSize'
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ (scope.row.timeSize / 1000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ customer_list[customer_act].customerType === 'pinci'
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ scope.row.pinci
|
|
|
+ .toString()
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">
|
|
|
+ 优势客户Top10（本频道有投放其他频道无投放）
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="advantageous"
|
|
|
+ border
|
|
|
+ header-row-class-name="headStyle"
|
|
|
+ row-class-name="darkRow"
|
|
|
+ style="width: 100%"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ prop="brand"
|
|
|
+ label="品牌名称"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ prop="pruducter"
|
|
|
+ label="厂商名称"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" prop="customer" label="产品数量" />
|
|
|
+ <el-table-column align="center" prop="fee" label="费用（万元）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ (scope.row.fee / 10000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="timeSize" label="时长（秒）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ (scope.row.timeSize / 1000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="pinci" label="频次（次）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ scope.row.pinci.toFixed(0).replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">潜在客户Top10</div>
|
|
|
+ <el-table
|
|
|
+ :data="potentialData"
|
|
|
+ border
|
|
|
+ header-row-class-name="headStyle"
|
|
|
+ row-class-name="darkRow"
|
|
|
+ style="width: 100%"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ prop="brand"
|
|
|
+ label="品牌名称"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ prop="pruducter"
|
|
|
+ label="厂商名称"
|
|
|
+ />
|
|
|
+ <el-table-column align="center" prop="fee" label="费用（万元）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ (scope.row.fee / 10000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="timeSize" label="时长（秒）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ (scope.row.timeSize / 1000)
|
|
|
+ .toFixed(2)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="pinci" label="频次（次）">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ scope.row.pinci.toFixed(0).replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="投放频道数">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ scope.row.customer
|
|
|
+ .toFixed(0)
|
|
|
+ .replace(/(?=(\B)(\d{3})+\.)/g, ",")
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card style="margin: 0 1em;">
|
|
|
+ <div class="title_card">频道饱和度</div>
|
|
|
+ <br />
|
|
|
+ <div ref="saturation"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// @ is an alias to /src
|
|
|
+import {
|
|
|
+ adChannelList,
|
|
|
+ launchList,
|
|
|
+ trendList,
|
|
|
+ proportionList,
|
|
|
+ customerList,
|
|
|
+ advantageousList,
|
|
|
+ potentialList,
|
|
|
+ saturationList,
|
|
|
+} from "@/api/index.js";
|
|
|
+// import config from "@/config/index";
|
|
|
+import * as echarts from "echarts";
|
|
|
+export default {
|
|
|
+ name: "hardAdvertisement",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ channleList: [],
|
|
|
+ active: 0,
|
|
|
+ timeSelect: [],
|
|
|
+ channel_act: 0,
|
|
|
+ proportion_act: 0,
|
|
|
+ customer_act: 0,
|
|
|
+ launch_act: 0,
|
|
|
+ trend_act: 0,
|
|
|
+ launch_list: [
|
|
|
+ {
|
|
|
+ text: "费用",
|
|
|
+ proportionType: "fee",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ proportionType: "timeSize",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ proportionType: "pinci",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "客户量",
|
|
|
+ proportionType: "customer",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ customer_list: [
|
|
|
+ {
|
|
|
+ text: "费用",
|
|
|
+ customerType: "fee",
|
|
|
+ company: "万元",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "时长",
|
|
|
+ customerType: "timeSize",
|
|
|
+ company: "分",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "频次",
|
|
|
+ customerType: "pinci",
|
|
|
+ company: "次",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ launch_chart: undefined,
|
|
|
+ trend_chart: undefined,
|
|
|
+ proportion_chart: undefined,
|
|
|
+ saturation_chart: undefined,
|
|
|
+
|
|
|
+ proportionData: [],
|
|
|
+ advantageous: [],
|
|
|
+ potentialData: [],
|
|
|
+ customerData: { before: [], now: [] },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.timeSelect = this.timeList();
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+
|
|
|
+ proportionList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(proportion => {
|
|
|
+ let pro = proportion.sort((a, b) => {
|
|
|
+ return (
|
|
|
+ b[this.launch_list[this.proportion_act].proportionType] -
|
|
|
+ a[this.launch_list[this.proportion_act].proportionType]
|
|
|
+ );
|
|
|
+ });
|
|
|
+ this.proportionData = pro || [];
|
|
|
+ this.proportionChart();
|
|
|
+ });
|
|
|
+
|
|
|
+ customerList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(customer => {
|
|
|
+ this.customerData = customer || { before: [], now: [] };
|
|
|
+ });
|
|
|
+
|
|
|
+ advantageousList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(advantageous => {
|
|
|
+ this.advantageous = advantageous || [];
|
|
|
+ });
|
|
|
+
|
|
|
+ potentialList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(potential => {
|
|
|
+ this.potentialData = potential || [];
|
|
|
+ });
|
|
|
+
|
|
|
+ saturationList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(saturation => {
|
|
|
+ this.saturationChart(saturation);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 距离当前之前某天日期格式
|
|
|
+ * @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),
|
|
|
+ oldT = this.dateFommat(7),
|
|
|
+ timeSelect = [
|
|
|
+ {
|
|
|
+ text: "最近7天",
|
|
|
+ startDate: oldT.join("-"),
|
|
|
+ endDate: o.join("-"),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ for (let i = 1; i <= 3; i++) {
|
|
|
+ let T = this.dateFommat(30 * i),
|
|
|
+ lastDay = new Date(T[0], T[1], 0);
|
|
|
+ timeSelect.push({
|
|
|
+ text: `${T[0]}年${T[1]}月`,
|
|
|
+ startDate: `${T[0]}-${T[1]}-01`,
|
|
|
+ endDate: `${T[0]}-${T[1]}-${lastDay.getDate()}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return timeSelect;
|
|
|
+ },
|
|
|
+ tableRowClassName({ rowIndex }) {
|
|
|
+ if (rowIndex % 2 !== 0) return "darkRow";
|
|
|
+ return "";
|
|
|
+ },
|
|
|
+ customer_change(i) {
|
|
|
+ this.customer_act = i;
|
|
|
+ },
|
|
|
+ launch_change(i) {
|
|
|
+ this.launch_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);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ trend_change(i) {
|
|
|
+ this.trend_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);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ proportion_change(i) {
|
|
|
+ this.proportion_act = i;
|
|
|
+ let sel = this.timeSelect[this.active];
|
|
|
+ proportionList({
|
|
|
+ channelId: this.channleList[this.active].channelId,
|
|
|
+ start: sel.startDate,
|
|
|
+ end: sel.endDate,
|
|
|
+ }).then(proportion => {
|
|
|
+ this.proportionData = proportion || [];
|
|
|
+ this.proportionChart();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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.launch_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,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ saturationData(list = []) {
|
|
|
+ const org = list;
|
|
|
+ let keys = [],
|
|
|
+ value = [];
|
|
|
+ for (let i = 0; i < org.length; i++) {
|
|
|
+ let o = org[i] || {};
|
|
|
+ keys.push(o.hour);
|
|
|
+ value.push(o.timeSize * 100);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ keys,
|
|
|
+ value,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ launchChart(list) {
|
|
|
+ if (!this.$refs.launch) return;
|
|
|
+ if (this.launch_chart && this.launch_chart.dispose) {
|
|
|
+ this.launch_chart.dispose();
|
|
|
+ this.launch_chart = undefined;
|
|
|
+ }
|
|
|
+ this.launch_chart = echarts.init(this.$refs.launch);
|
|
|
+ let chartData = this.launchtrendData(list, "launch");
|
|
|
+ this.launch_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.launch_chart.setOption(option);
|
|
|
+ },
|
|
|
+ trendChart(list) {
|
|
|
+ if (!this.$refs.trend) return;
|
|
|
+ if (this.trend_chart && this.trend_chart.dispose) {
|
|
|
+ this.trend_chart.dispose();
|
|
|
+ this.trend_chart = undefined;
|
|
|
+ }
|
|
|
+ this.trend_chart = echarts.init(this.$refs.trend);
|
|
|
+ let chartData = this.launchtrendData(list, "trend");
|
|
|
+ this.trend_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: "bar",
|
|
|
+ smooth: true,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.trend_chart.setOption(option);
|
|
|
+ },
|
|
|
+ saturationChart(list) {
|
|
|
+ if (!this.$refs.saturation) return;
|
|
|
+ if (this.saturation_chart && this.saturation_chart.dispose) {
|
|
|
+ this.saturation_chart.dispose();
|
|
|
+ this.saturation_chart = undefined;
|
|
|
+ }
|
|
|
+ this.saturation_chart = echarts.init(this.$refs.saturation);
|
|
|
+ let chartData = this.saturationData(list);
|
|
|
+ this.saturation_chart.resize({
|
|
|
+ height: (this.$refs.saturation.offsetWidth * 6) / 16,
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ data: ["饱和度"],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: chartData.keys,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ },
|
|
|
+ grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "饱和度",
|
|
|
+ data: chartData.value,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ markLine: {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: "平均值",
|
|
|
+ yAxis: chartData.value[chartData.value.length - 1] || 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.saturation_chart.setOption(option);
|
|
|
+ },
|
|
|
+ proportionChart() {
|
|
|
+ if (!this.$refs.pieProportion) return;
|
|
|
+ if (this.proportion_chart && this.proportion_chart.dispose) {
|
|
|
+ this.proportion_chart.dispose();
|
|
|
+ this.proportion_chart = undefined;
|
|
|
+ }
|
|
|
+ this.proportion_chart = echarts.init(this.$refs.pieProportion);
|
|
|
+ let chartData = this.proportionData;
|
|
|
+ this.proportion_chart.resize({
|
|
|
+ height: 40 * chartData.length,
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ left: "center",
|
|
|
+ bottom: 10,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: "50%",
|
|
|
+ data: chartData.map(v => {
|
|
|
+ return {
|
|
|
+ value: v[this.launch_list[this.proportion_act].proportionType],
|
|
|
+ name: v.industry,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.proportion_chart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeUnmount: function() {
|
|
|
+ this.launch_chart.dispose();
|
|
|
+ this.launch_chart = undefined;
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.hardAdvertisement {
|
|
|
+ margin: 10px 15px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.hardAdvertisement .el-card__body {
|
|
|
+ padding: 0 0 20px 0;
|
|
|
+}
|
|
|
+.hardAdvertisement .colTime,
|
|
|
+.hardAdvertisement .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;
|
|
|
+}
|
|
|
+.hardAdvertisement .colTime:not(:first-child) {
|
|
|
+ border-left: 1px solid #fff;
|
|
|
+}
|
|
|
+.hardAdvertisement .colTime:hover,
|
|
|
+.hardAdvertisement .active {
|
|
|
+ background-color: rgba(25, 137, 250, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.hardAdvertisement .channelSelect {
|
|
|
+ position: relative;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+
|
|
|
+.hardAdvertisement .channelSelect .el-dropdown-link {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+}
|
|
|
+.hardAdvertisement .channelSelect:hover {
|
|
|
+ background-color: rgba(25, 137, 250, 0.5);
|
|
|
+}
|
|
|
+.hardAdvertisement .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;
|
|
|
+}
|
|
|
+.hardAdvertisement .channelSelect:hover .channelSelctList {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.hardAdvertisement .channelSelctitem {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16.6%;
|
|
|
+ padding: 1em 2px;
|
|
|
+ line-height: 1.5em;
|
|
|
+}
|
|
|
+.hardAdvertisement .channelSelctitem:hover,
|
|
|
+.hardAdvertisement .channelSelctactive {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #40a1f3;
|
|
|
+}
|
|
|
+.hardAdvertisement .title_card {
|
|
|
+ background-color: #1989fa;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ padding-left: 12px;
|
|
|
+}
|
|
|
+.hardAdvertisement .darkRow:nth-child(even) {
|
|
|
+ background-color: #f3f3f3;
|
|
|
+}
|
|
|
+.hardAdvertisement .customer_list {
|
|
|
+ width: 437px;
|
|
|
+ margin: 30px 0 30px 90px;
|
|
|
+ border: 1px solid #d2e7fc;
|
|
|
+ border-top: 3px solid #40a1f3;
|
|
|
+}
|
|
|
+.hardAdvertisement .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;
|
|
|
+}
|
|
|
+.hardAdvertisement .headStyle .cell {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+</style>
|
liyongli