全行业

src/api/index.js

@@ -382,7 +382,7 @@ export function potentialList(data){
  * @props {string} end
  * @return {AxjxPromise}
  */
-export function saturationList(data){
+ export function saturationList(data){
     return ajax({
       urlType: "adAPI",
       url: "/ad/saturation",
@@ -390,3 +390,36 @@ export function saturationList(data){
       data,
     });
 }
+
+/**
+ * 行业列表
+ * @return {AxjxPromise}
+ */
+ export function allindustryList(data){
+    return ajax({
+      urlType: "adAPI",
+      url: "/ad/industry/list",
+      method: "GET",
+      data,
+    });
+}
+
+/**
+ * 全行业
+ * @props {string} channelId
+ * @props {string} start
+ * @props {string} end
+ * @return {AxjxPromise}
+ */
+ export function industryList(data){
+    return ajax({
+      urlType: "adAPI",
+      url: "/ad/market",
+      method: "POST",
+      data,
+    });
+}
+
+/***************************************分行业 */
+
+

src/views/AdvertisingEye/components/allTrend.vue

@@ -0,0 +1,371 @@
+<template>
+  <br />
+  <el-card style="margin: 0 1em;">
+    <div class="title_card" v-text="title"></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>
+</template>
+
+<script>
+// @ is an alias to /src
+import { industryList } from "@/api/index.js";
+// import config from "@/config/index";
+import * as echarts from "echarts";
+let hard_chart = undefined;
+let soft_chart = undefined;
+export default {
+  name: "AdvertisingEye_trend",
+  data() {
+    return {
+      hard_act: 0,
+      soft_act: 0,
+      hard_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          unit: "分",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          unit: "次",
+          type: 1,
+        },
+        {
+          text: "费用",
+          proportionType: "fee",
+          unit: "万",
+          type: 3,
+        },
+      ],
+      soft_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          unit: "分",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          unit: "次",
+          type: 1,
+        },
+      ],
+    };
+  },
+  props: {
+    title: String,
+    industry: Number,
+    industryRang: Number,
+  },
+  watch: {
+    industryRang() {
+      this.init();
+    },
+    industry() {
+      this.init();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  filter: {},
+  methods: {
+    init() {
+      industryList({
+        tableType: 1,
+        dataType: this.hard_list[this.hard_act].type,
+        indexTime: this.industryRang + 1,
+      }).then(r => {
+        let org = r || [],
+          before = (org[0] || {}).linkType || "",
+          returnObj = { before: [], now: [] };
+        if (!org.length) return;
+        for (let i = 0; i < org.length; i++) {
+          const v = org[i];
+          if (v.linkType === before) returnObj.before.push(v);
+          else returnObj.now.push(v);
+        }
+        this.industryChart(returnObj);
+      });
+      industryList({
+        tableType: 2,
+        dataType: this.soft_list[this.soft_act].type,
+        indexTime: this.industryRang + 1,
+      }).then(r => {
+        let org = r || [],
+          before = (org[0] || {}).linkType || "",
+          returnObj = { before: [], now: [] };
+        if (!org.length) return;
+        for (let i = 0; i < org.length; i++) {
+          const v = org[i];
+          if (v.linkType === before) returnObj.before.push(v);
+          else returnObj.now.push(v);
+        }
+        this.trendChart(returnObj);
+      });
+    },
+    hard_change(i) {
+      this.hard_act = i;
+      industryList({
+        tableType: 1,
+        dataType: this.hard_list[this.hard_act].type,
+        indexTime: this.industryRang + 1,
+      }).then(r => {
+        let org = r || [],
+          before = org[0].linkType,
+          returnObj = { before: [], now: [] };
+        for (let i = 0; i < org.length; i++) {
+          const v = org[i];
+          if (v.linkType === before) returnObj.before.push(v);
+          else returnObj.now.push(v);
+        }
+        this.industryChart(returnObj);
+      });
+    },
+    soft_change(i) {
+      this.soft_act = i;
+      industryList({
+        tableType: 2,
+        dataType: this.soft_list[this.soft_act].type,
+        indexTime: this.industryRang + 1,
+      }).then(r => {
+        let org = r || [],
+          before = org[0].linkType,
+          returnObj = { before: [], now: [] };
+        for (let i = 0; i < org.length; i++) {
+          const v = org[i];
+          if (v.linkType === before) returnObj.before.push(v);
+          else returnObj.now.push(v);
+        }
+        this.trendChart(returnObj);
+      });
+    },
+    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] || {};
+        this.industryRang + 1 > 2
+          ? keys.push(n.name)
+          : keys.push(`第${i + 1}天`);
+        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) {
+        let sDate = old[0].name,
+          eDate = old[old.length - 1].name;
+        if (sDate === eDate) lendata.push(sDate);
+        else lendata.push(`${sDate}到${eDate}`);
+      }
+      if (now && now.length) {
+        let sDate = now[0].name,
+          eDate = now[now.length - 1].name;
+        if (sDate === eDate) lendata.push(sDate);
+        else lendata.push(`${sDate}到${eDate}`);
+      }
+      return {
+        keys,
+        realKey,
+        lendata,
+        value,
+      };
+    },
+    formatNum(num) {
+      if (isNaN(num)) return 0;
+      if (num >= 100000000) return (num / 10000).toFixed(2) - 0 + "亿";
+      if (num >= 10000) return (num / 10000).toFixed(2) - 0 + "万";
+      return num;
+    },
+    industryChart(list) {
+      if (!this.$refs.launch) return;
+      if (hard_chart && hard_chart.dispose) {
+        hard_chart.dispose();
+        hard_chart = undefined;
+      }
+      hard_chart = echarts.init(this.$refs.launch);
+      let chartData = this.launchtrendData(list, "hard");
+      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,
+        },
+        yAxis: {
+          type: "value",
+          scale: true,
+          axisLabel: {
+            formatter: arr => {
+              return this.formatNum(arr);
+            },
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          formatter: m => {
+            let out = "";
+            for (let i = 0; i < m.length; i++) {
+              const v = m[i];
+              let time = (v.seriesName.split("到")[0] || "").split("-"),
+                day = v.dataIndex > 9 ? v.dataIndex : "0" + v.dataIndex,
+                val = (v.value - 0)
+                  .toFixed(2)
+                  .replace(/(?=(\B)(\d{3})+\.)/g, ",");
+              out += time[0] + "-" + time[1];
+              this.industryRang + 1 > 2 ? (out += "-" + day) : "";
+              out += " " + val + this.hard_list[this.hard_act].unit + "<br />";
+            }
+            return out;
+          },
+        },
+        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 && hard_chart.setOption(option);
+    },
+    trendChart(list) {
+      if (!this.$refs.trend) return;
+      if (soft_chart && soft_chart.dispose) {
+        soft_chart.dispose();
+        soft_chart = undefined;
+      }
+      soft_chart = echarts.init(this.$refs.trend);
+      let chartData = this.launchtrendData(list, "soft");
+      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: "axis",
+          formatter: m => {
+            let out = "";
+            for (let i = 0; i < m.length; i++) {
+              const v = m[i];
+              let time = (v.seriesName.split("到")[0] || "").split("-"),
+                day = v.dataIndex > 9 ? v.dataIndex : "0" + v.dataIndex,
+                val = (v.value - 0)
+                  .toFixed(2)
+                  .replace(/(?=(\B)(\d{3})+\.)/g, ",");
+              out +=
+                time[0] +
+                "-" +
+                time[1] +
+                "-" +
+                day +
+                " " +
+                val +
+                this.hard_list[this.hard_act].unit +
+                "<br />";
+            }
+            return out;
+          },
+        },
+        yAxis: {
+          type: "value",
+          scale: true,
+          axisLabel: {
+            formatter: arr => {
+              return this.formatNum(arr);
+            },
+          },
+        },
+        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 && soft_chart.setOption(option);
+    },
+  },
+  beforeUnmount: function() {
+    hard_chart && hard_chart.dispose();
+    soft_chart && soft_chart.dispose();
+    hard_chart && (hard_chart = undefined);
+    soft_chart && (soft_chart = undefined);
+  },
+  components: {},
+};
+</script>
+
+<style>
+.AdvertisingEye .title_card {
+  background-color: #1989fa;
+  height: 40px;
+  line-height: 40px;
+  color: #fff;
+  font-size: 18px;
+  padding-left: 12px;
+}
+</style>

src/views/AdvertisingEye/components/distribution.vue

@@ -0,0 +1,277 @@
+<template>
+  <br />
+  <el-card style="margin: 0 1em;">
+    <div class="title_card" v-text="title"></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">
+        <com-table
+          :title="'栏目排名top10-' + titleName"
+          :tableList="tableList"
+          :child="true"
+        >
+          <template #cols>
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column
+              show-overflow-tooltip
+              align="center"
+              property="name"
+              label="栏目主名称"
+            />
+            <el-table-column align="center" property="pinci">
+              <template #header>
+                <span
+                  :style="
+                    soft_planting_list[soft_planting_act].type === 1
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  频次(次)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.pinci) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="timeSize">
+              <template #header>
+                <span
+                  :style="
+                    soft_planting_list[soft_planting_act].type === 2
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  时长(秒)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.timeSize) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="custom" label="">
+              <template #header>
+                <span
+                  :style="
+                    soft_planting_list[soft_planting_act].type === 4
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  客户数
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.custom) }}
+              </template>
+            </el-table-column>
+          </template>
+        </com-table>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+// @ is an alias to /src
+// import config from "@/config/index";
+import * as echarts from "echarts";
+import comTable from "@/views/AdvertisingEye/components/table.vue";
+import { industryList } from "@/api/index.js";
+
+export default {
+  name: "AdvertisingEye_distribution",
+  data() {
+    return {
+      titleName: "",
+      tableList: [],
+      soft_planting_act: 0,
+      soft_planting_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          type: 1,
+        },
+        {
+          text: "客户数",
+          proportionType: "custom",
+          type: 4,
+        },
+      ],
+      softAd_chart: undefined,
+    };
+  },
+  props: {
+    title: String,
+    industry: Number,
+    industryRang: Number,
+  },
+  watch: {
+    industryRang() {
+      this.init();
+    },
+    industry() {
+      this.init();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  filter: {},
+  methods: {
+    init() {
+      Promise.all([
+        industryList({
+          tableType: 7,
+          dataType: this.soft_planting_list[this.soft_planting_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+        industryList({
+          tableType: 17,
+          dataType: this.soft_planting_list[this.soft_planting_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+      ]).then(all => {
+        this.tableList = (all[1] || []).splice(0, 10);
+        console.log(all[0]);
+        all[0].length && (this.titleName = all[0][0].name || "");
+        this.softAdChart(all[0] || []);
+      });
+    },
+    soft_planting_change(i) {
+      this.soft_planting_act = i;
+      this.init();
+    },
+    softAdChart(list) {
+      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: 524,
+      });
+      let k = [],
+        item = [], 
+        max = list[0][this.soft_planting_list[this.soft_planting_act].proportionType] || 0;
+      list.map(v => {
+        k.push({ name: v.name , max });
+        let val = (
+          v[this.soft_planting_list[this.soft_planting_act].proportionType] - 0
+        ).toFixed(2);
+        item.push(val);
+      });
+      var option = {
+        radar: {
+          // shape: 'circle',
+          indicator: k,
+          radius: 130,
+          shape: "circle",
+          splitNumber: 5,
+          splitArea: {
+            show: true,
+          },
+          axisName: {
+            color: "#0000ee",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            type: "radar",
+            lineStyle: {
+              width: 1,
+              opacity: 0.5,
+            },
+            areaStyle: {
+              color: "rgba(157,200,241,.5)",
+            },
+            itemStyle: {
+              color: "#7cb5ec",
+            },
+            data: [
+              {
+                value: item,
+              },
+            ],
+          },
+        ],
+      };
+
+      option && this.softAd_chart.setOption(option);
+    },
+    numFor(num) {
+      if (isNaN(num)) return 0;
+      if (num >= 100000000) return (num / 100000000).toFixed(2) + "亿";
+      if (num >= 10000) return (num / 10000).toFixed(2) + "万";
+      return num;
+    },
+  },
+  beforeUnmount: function() {
+    this.softAd_chart && this.softAd_chart.dispose();
+    this.softAd_chart && (this.softAd_chart = undefined);
+  },
+  components: {
+    comTable,
+  },
+};
+</script>
+
+<style scoped>
+.customer_list {
+  width: 500px;
+  margin: 30px auto;
+  border: 1px solid #d2e7fc;
+  border-top: 3px solid #40a1f3;
+}
+.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;
+}
+.headStyle .cell {
+  font-weight: 600;
+  color: #000;
+}
+</style>

src/views/AdvertisingEye/components/focus.vue

@@ -0,0 +1,654 @@
+<template>
+  <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">
+        <com-table
+          title="硬广-广告主投放top10"
+          :child="true"
+          :tableList="hardMarster"
+        >
+          <template #cols>
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column
+              show-overflow-tooltip
+              align="center"
+              property="name"
+              label="栏目主名称"
+            />
+            <el-table-column align="center" property="pinci">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 1
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  频次(次)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.pinci) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="timeSize">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 2
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  时长(秒)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.timeSize) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="fee" label="">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 3
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  费用
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.fee) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="fee" label="环比">
+              <template #default="scope">
+                 <svg
+                  t="1646702687390"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2028"
+                  width="20"
+                  v-if="scope.row[
+                    hard_important_list[hard_important_act].proportionType
+                  ] -
+                    scope.row.compare[
+                      hard_important_list[hard_important_act].proportionType
+                    ] <
+                    0"
+                  height="20"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                >
+                  <path
+                    d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
+                    fill="#50b1e6"
+                    p-id="2029"
+                  ></path>
+                </svg>
+                <svg
+                  t="1646702847605"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2299"
+                  width="20"
+                  v-if="scope.row[
+                    hard_important_list[hard_important_act].proportionType
+                  ] -
+                    scope.row.compare[
+                      hard_important_list[hard_important_act].proportionType
+                    ] >
+                    0"
+                  height="20"
+                >
+                  <path
+                    d="M507.733333 213.333333v725.333334h42.666667V204.8l145.066667 145.066667 29.866666-29.866667L533.333333 128 341.333333 320l29.866667 29.866667L507.733333 213.333333z"
+                    fill="#ff5757"
+                    p-id="2300"
+                  ></path>
+                </svg>
+              </template>
+            </el-table-column>
+          </template>
+        </com-table>
+      </el-col>
+      <el-col :span="12">
+        <com-table
+          title="硬广-品牌投放top10"
+          :tableList="hardBrand"
+          :child="true"
+        >
+          <template #cols>
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column
+              show-overflow-tooltip
+              align="center"
+              property="name"
+              label="品牌名称"
+            />
+            <el-table-column align="center" property="pinci">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 1
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  频次(次)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.pinci) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="timeSize">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 2
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  时长(秒)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.timeSize) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="fee" label="">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 3
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  费用
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.fee) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="fee" label="环比">
+              <template #default="scope">
+                 <svg
+                  t="1646702687390"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2028"
+                  width="20"
+                  v-if="scope.row[
+                    hard_important_list[hard_important_act].proportionType
+                  ] -
+                    scope.row.compare[
+                      hard_important_list[hard_important_act].proportionType
+                    ] <
+                    0"
+                  height="20"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                >
+                  <path
+                    d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
+                    fill="#50b1e6"
+                    p-id="2029"
+                  ></path>
+                </svg>
+                <svg
+                  t="1646702847605"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2299"
+                  width="20"
+                  v-if="scope.row[
+                    hard_important_list[hard_important_act].proportionType
+                  ] -
+                    scope.row.compare[
+                      hard_important_list[hard_important_act].proportionType
+                    ] >
+                    0"
+                  height="20"
+                >
+                  <path
+                    d="M507.733333 213.333333v725.333334h42.666667V204.8l145.066667 145.066667 29.866666-29.866667L533.333333 128 341.333333 320l29.866667 29.866667L507.733333 213.333333z"
+                    fill="#ff5757"
+                    p-id="2300"
+                  ></path>
+                </svg>
+              </template>
+            </el-table-column>
+          </template>
+        </com-table>
+      </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">
+        <com-table
+          title="软广-广告主投放top10"
+          :tableList="softMarster"
+          :child="true"
+        >
+          <template #cols>
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column
+              show-overflow-tooltip
+              align="center"
+              property="name"
+              label="栏目主名称"
+            />
+            <el-table-column align="center" property="pinci">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 1
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  频次(次)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.pinci) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="timeSize">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 2
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  时长(秒)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.timeSize) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="fee" label="环比">
+              <template #default="scope">
+                <svg
+                  t="1646702687390"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2028"
+                  width="20"
+                  v-if="scope.row[
+                   soft_important_list[this.soft_important_act].proportionType
+                  ] -
+                    scope.row.compare[
+                      soft_important_list[this.soft_important_act].proportionType
+                    ] <
+                    0"
+                  height="20"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                >
+                  <path
+                    d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
+                    fill="#50b1e6"
+                    p-id="2029"
+                  ></path>
+                </svg>
+                <svg
+                  t="1646702847605"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2299"
+                  width="20"
+                  v-if="scope.row[
+                    soft_important_list[this.soft_important_act].proportionType
+                  ] -
+                    scope.row.compare[
+                      soft_important_list[this.soft_important_act].proportionType
+                    ] >
+                    0"
+                  height="20"
+                >
+                  <path
+                    d="M507.733333 213.333333v725.333334h42.666667V204.8l145.066667 145.066667 29.866666-29.866667L533.333333 128 341.333333 320l29.866667 29.866667L507.733333 213.333333z"
+                    fill="#ff5757"
+                    p-id="2300"
+                  ></path>
+                </svg>
+              </template>
+            </el-table-column>
+          </template>
+        </com-table>
+      </el-col>
+      <el-col :span="12">
+        <com-table
+          title="软广-品牌投放top10"
+          :tableList="softBrand"
+          :child="true"
+        >
+          <template #cols>
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column
+              show-overflow-tooltip
+              align="center"
+              property="name"
+              label="品牌名称"
+            />
+            <el-table-column align="center" property="pinci">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 1
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  频次(次)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.pinci) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="timeSize">
+              <template #header>
+                <span
+                  :style="
+                    hard_important_list[hard_important_act].type === 2
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  时长(秒)
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.timeSize) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="环比">
+              <template #default="scope">
+                <svg
+                  t="1646702687390"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2028"
+                  width="20"
+                  v-if="scope.row[
+                    soft_important_list[this.soft_important_act].proportionType
+                  ] -
+                    scope.row.compare[
+                      soft_important_list[this.soft_important_act].proportionType
+                    ] <
+                    0"
+                  height="20"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                >
+                  <path
+                    d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
+                    fill="#50b1e6"
+                    p-id="2029"
+                  ></path>
+                </svg>
+                <svg
+                  t="1646702847605"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2299"
+                  width="20"
+                  v-if="scope.row[
+                    soft_important_list[this.soft_important_act].proportionType
+                  ] -
+                    scope.row.compare[
+                      soft_important_list[this.soft_important_act].proportionType
+                    ] >
+                    0"
+                  height="20"
+                >
+                  <path
+                    d="M507.733333 213.333333v725.333334h42.666667V204.8l145.066667 145.066667 29.866666-29.866667L533.333333 128 341.333333 320l29.866667 29.866667L507.733333 213.333333z"
+                    fill="#ff5757"
+                    p-id="2300"
+                  ></path>
+                </svg>
+              </template>
+            </el-table-column>
+          </template>
+        </com-table>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+// @ is an alias to /src
+// import config from "@/config/index";
+
+import comTable from "@/views/AdvertisingEye/components/table.vue";
+import { industryList } from "@/api/index.js";
+
+export default {
+  name: "AdvertisingEye",
+  data() {
+    return {
+      soft_important_act: 0,
+      hard_important_act: 0,
+      hard_important_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          type: 1,
+        },
+        {
+          text: "费用",
+          proportionType: "fee",
+          type: 3,
+        },
+      ],
+      soft_important_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          type: 1,
+        },
+      ],
+      hardMarster: [],
+      hardBrand: [],
+      softMarster: [],
+      softBrand: [],
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  props: {
+    title: String,
+    industry: Number,
+    industryRang: Number,
+  },
+  watch: {
+    industryRang() {
+      this.init();
+    },
+    industry() {
+      this.init();
+    },
+  },
+  filter: {},
+  methods: {
+    numFor(num) {
+      if (!num) return 0;
+      if (isNaN(num)) return 0;
+      if (num >= 100000000) return (num / 100000000).toFixed(2) + "亿";
+      if (num >= 10000) return (num / 10000).toFixed(2) + "万";
+      return num;
+    },
+    init() {
+      this.getHard();
+      this.getSoft();
+    },
+    getHard() {
+      Promise.all([
+        industryList({
+          tableType: 8,
+          dataType: this.hard_important_list[this.hard_important_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+        industryList({
+          tableType: 9,
+          dataType: this.hard_important_list[this.hard_important_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+      ]).then(([marster, brand]) => {
+        let realBrand = brand.filter(v => v.linkType === "2");
+        for (let i = 0; i < brand.length; i++) {
+          const v = brand[i];
+          if (v.linkType === "2") continue;
+          realBrand.map((item, o) => {
+            if (item.name === v.name) realBrand[o].compare = v;
+          });
+        }
+        let realMarster = marster.filter(v => v.linkType === "2");
+        for (let i = 0; i < marster.length; i++) {
+          const v = marster[i];
+          if (v.linkType === "2") continue;
+          realMarster.map((item, o) => {
+            if (item.name === v.name) realMarster[o].compare = v;
+          });
+        }
+        this.hardMarster = realMarster || [];
+        this.hardBrand = realBrand || [];
+      });
+    },
+    getSoft() {
+      Promise.all([
+        industryList({
+          tableType: 10,
+          dataType: this.soft_important_list[this.soft_important_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+        industryList({
+          tableType: 11,
+          dataType: this.soft_important_list[this.soft_important_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+      ]).then(([marster, brand]) => {
+        let realBrand = brand.filter(v => v.linkType === "2");
+        for (let i = 0; i < brand.length; i++) {
+          const v = brand[i];
+          if (v.linkType === "2") continue;
+          realBrand.map((item, o) => {
+            if (item.name === v.name) realBrand[o].compare = v;
+          });
+        }
+        let realMarster = marster.filter(v => v.linkType === "2");
+        for (let i = 0; i < marster.length; i++) {
+          const v = marster[i];
+          if (v.linkType === "2") continue;
+          realMarster.map((item, o) => {
+            if (item.name === v.name) realMarster[o].compare = v;
+          });
+        }
+        this.softMarster = realMarster || [];
+        this.softBrand = realBrand || [];
+      });
+    },
+    hard_important_change(i) {
+      this.hard_important_act = i;
+      this.getHard();
+    },
+    soft_important_change(i) {
+      this.soft_important_act = i;
+      this.getSoft();
+    },
+  },
+  beforeUnmount: function() {},
+  components: {
+    comTable,
+  },
+};
+</script>
+
+<style></style>

src/views/AdvertisingEye/components/structure.vue

@@ -0,0 +1,177 @@
+<template>
+  <br />
+  <el-card style="margin: 0 1em;">
+    <div class="title_card" v-text="title"></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>
+</template>
+
+<script>
+// @ is an alias to /src
+// import config from "@/config/index";
+import * as echarts from "echarts";
+import { industryList } from "@/api/index.js";
+let industry_chart = undefined;
+export default {
+  name: "AdvertisingEye_structure",
+  data() {
+    return {
+      industry_act: 0,
+      industry_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          type: 1,
+        },
+        {
+          text: "客户数",
+          proportionType: "custom",
+          type: 4,
+        },
+      ],
+    };
+  },
+  props: {
+    title: String,
+    industry: Number,
+    industryRang: Number,
+  },
+  watch: {
+    industryRang() {
+      this.init();
+    },
+    industry() {
+      this.init();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  filter: {},
+  methods: {
+    init() {
+      Promise.all([
+        industryList({
+          tableType: 3,
+          dataType: this.industry_list[this.industry_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+        industryList({
+          tableType: 4,
+          dataType: this.industry_list[this.industry_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+      ]).then(all => {
+        let r = all[0] || [],
+          y = all[1] || [];
+        r = r.map(v => {
+          let value =  v[this.industry_list[this.industry_act].proportionType];
+          if(!isNaN(value)) value = (value - 0).toFixed(2);
+          return {
+            name: v.name,
+            value,
+          };
+        });
+        y = y.map(v => {
+          let value =  v[this.industry_list[this.industry_act].proportionType];
+          if(!isNaN(value)) value = (value - 0).toFixed(2);
+          return {
+            name: v.name,
+            value,
+          };
+        });
+        Math.max(r.length, y.length) && this.industryChart(r, y);
+      });
+    },
+    industry_change(i) {
+      this.industry_act = i;
+      this.init()
+    },
+    industryChart(r,y) {
+      if (!this.$refs.industry) return;
+      if (industry_chart && industry_chart.dispose) {
+        industry_chart.dispose();
+        industry_chart = undefined;
+      }
+      industry_chart = echarts.init(this.$refs.industry);
+      industry_chart.resize({
+        height: (this.$refs.industry.offsetWidth * 6) / 16,
+      });
+      var option = {
+        legend: {
+          left: "center",
+          bottom: 10,
+        },
+        title: [
+          {
+            text: "硬广行业结构",
+            left: "20%",
+          },
+          {
+            text: "软广行业结构",
+            left: "70%",
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            type: "pie",
+            center: ["25%", "45%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: y,
+          },
+          {
+            type: "pie",
+            center: ["75%", "45%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: r,
+          },
+        ],
+      };
+
+      option && industry_chart.setOption(option);
+    },
+  },
+  beforeUnmount: function() {
+    industry_chart && industry_chart.dispose();
+    industry_chart && (industry_chart = undefined);
+  },
+  components: {},
+};
+</script>
+
+<style></style>

src/views/AdvertisingEye/components/table.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="customer_list">
+    <div class="customer_list_head" v-text="title"></div>
+    <el-table
+      ref="singleTableRef"
+      :data="tableList"
+      header-row-class-name="headStyle"
+      highlight-current-row
+      style="width: 100%"
+    >
+      <slot v-if="child" name="cols"> </slot>
+      <template v-else>
+        <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="客户数" />
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import config from "@/config/index";
+
+export default {
+  name: "AdvertisingEye_table",
+  data() {
+    return {};
+  },
+  props: {
+    title: String,
+    child: {
+      type: Boolean,
+      value: false,
+    },
+    tableList: {
+      type: Array,
+      value: () => [],
+    },
+  },
+  mounted() {},
+  computed: {},
+  filter: {},
+  methods: {},
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style scoped>
+.customer_list {
+  width: 500px;
+  margin: 30px auto;
+  border: 1px solid #d2e7fc;
+  border-top: 3px solid #40a1f3;
+}
+.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;
+}
+.headStyle .cell {
+  font-weight: 600;
+  color: #000;
+}
+</style>

src/views/AdvertisingEye/components/tranche.vue

@@ -0,0 +1,287 @@
+<template>
+  <br />
+  <el-card style="margin: 0 1em;">
+    <div class="title_card" v-text="title"></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>
+</template>
+
+<script>
+// @ is an alias to /src
+// import config from "@/config/index";
+import * as echarts from "echarts";
+import { industryList } from "@/api/index.js";
+
+export default {
+  name: "AdvertisingEye_tranche",
+  data() {
+    return {
+      share_act: 0,
+      share_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          unit: "分",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          unit: "次",
+          type: 1,
+        },
+        {
+          text: "费用",
+          proportionType: "fee",
+          unit: "万",
+          type: 3,
+        },
+        {
+          text: "客户数",
+          proportionType: "custom",
+          unit: "个",
+          type: 4,
+        },
+      ],
+      share_chart: undefined,
+      share1_chart: undefined,
+    };
+  },
+  props: {
+    title: String,
+    industry: Number,
+    industryRang: Number,
+  },
+  watch: {
+    industryRang() {
+      this.init();
+    },
+    industry() {
+      this.init();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  filter: {},
+  methods: {
+    init() {
+      Promise.all([
+        industryList({
+          tableType: 5,
+          dataType: this.share_list[this.share_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+        industryList({
+          tableType: 15,
+          dataType: this.share_list[this.share_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+        industryList({
+          tableType: 6,
+          dataType: this.share_list[this.share_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+        industryList({
+          tableType: 16,
+          dataType: this.share_list[this.share_act].type,
+          indexTime: this.industryRang + 1,
+        }),
+      ]).then(all => {
+        let barAll = [...(all[1] || []), ...(all[3] || [])],
+          barGroup = [];
+        let k = {};
+        for (let i = 0; i < barAll.length; i++) {
+          const v = barAll[i];
+          if (isNaN(k[v.name])) {
+            k[v.name] = barGroup.length;
+            barGroup.push([]);
+          }
+          barGroup[k[v.name]].push(v);
+        }
+        this.share1Chart(barGroup);
+        let share = [[], []],
+          s = 0;
+        all[0].map((v, i) => {
+          if (i >= 9)
+            s += v[this.share_list[this.share_act].proportionType] - 0;
+          i < 9 && share[0].push(v);
+        });
+        share[0].push({
+          name: "其它",
+          [this.share_list[this.share_act].proportionType]: s,
+        });
+        s = 0;
+        all[2].map((v, i) => {
+          if (i >= 9)
+            s += v[this.share_list[this.share_act].proportionType] - 0;
+          i < 9 && share[1].push(v);
+        });
+        share[1].push({
+          name: "其它",
+          [this.share_list[this.share_act].proportionType]: s,
+        });
+        this.shareChart([share[0], share[1]]);
+      });
+    },
+    share_change(i) {
+      this.share_act = i;
+      this.init();
+    },
+    shareChart(list) {
+      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",
+          formatter: obj => {
+            let v = obj.value || 0;
+            if (!isNaN(v)) v = v - 0;
+            return (
+              obj.seriesName +
+              "<br />" +
+              obj.name +
+              "<br />" +
+              v.toFixed(2) +
+              this.share_list[this.share_act].unit
+            );
+          },
+        },
+        legend: {
+          left: "center",
+          bottom: 10,
+        },
+        series: list.map((v, i) => {
+          return {
+            name: i === 0 ? "硬广" : "软广",
+            type: "pie",
+            radius: ["40%", "70%"],
+            center: [25 + i * 50 + "%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+            data: v.map(item => {
+              return {
+                name: item.name,
+                value:
+                  item[this.share_list[this.share_act].proportionType] || 0,
+              };
+            }),
+          };
+        }),
+      };
+
+      option && this.share_chart.setOption(option);
+    },
+    share1Chart(list) {
+      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",
+          },
+          formatter: item => {
+            return (
+              item.name +
+              "<br />" +
+              item.seriesName +
+              "<br />" +
+              "占比：" +
+              item.value +
+              "%"
+            );
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+        },
+        yAxis: {
+          type: "category",
+          data: ["硬广", "软广"],
+        },
+        series: list.map(v => {
+          const item = v[0] || {};
+          return {
+            name: item.name,
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: v.map(o =>
+              (
+                (o[this.share_list[this.share_act].proportionType] || 0) * 100
+              ).toFixed(2)
+            ),
+          };
+        }),
+      };
+      option && this.share1_chart.setOption(option);
+    },
+  },
+  beforeUnmount: function() {
+    this.share1_chart && this.share1_chart.dispose();
+    this.share_chart && this.share_chart.dispose();
+    this.share1_chart && (this.share1_chart = undefined);
+    this.share_chart && (this.share_chart = undefined);
+  },
+  components: {},
+};
+</script>
+
+<style></style>

src/views/HardAdvertisement/HardAdvertisement.vue

@@ -465,6 +465,7 @@
 
 <script>
 // @ is an alias to /src
+let launch_chart = undefined, trend_chart= undefined, proportion_chart= undefined, saturation_chart= undefined;
 import {
   adChannelList,
   launchList,
@@ -493,18 +494,22 @@ export default {
         {
           text: "费用",
           proportionType: "fee",
+          type: 3,
         },
         {
           text: "时长",
           proportionType: "timeSize",
+          type: 2,
         },
         {
           text: "频次",
           proportionType: "pinci",
+          type: 1,
         },
         {
           text: "客户量",
           proportionType: "customer",
+          type: 4,
         },
       ],
       customer_list: [
@@ -512,21 +517,21 @@ export default {
           text: "费用",
           customerType: "fee",
           company: "万元",
+          type: 3,
         },
         {
           text: "时长",
           customerType: "timeSize",
           company: "分",
+          type: 2,
         },
         {
           text: "频次",
           customerType: "pinci",
           company: "次",
+          type: 1,
         },
       ],
-      launch_chart: undefined,
-      trend_chart: undefined,
-      proportion_chart: undefined,
       saturation_chart: undefined,
 
       proportionData: [],
@@ -578,6 +583,7 @@ export default {
           channelId: this.channleList[this.active].channelId,
           start: sel.startDate,
           end: sel.endDate,
+          order: this.launch_list[this.proportion_act].type,
         }).then(proportion => {
           let pro = proportion.sort((a, b) => {
             return (
@@ -593,6 +599,7 @@ export default {
           channelId: this.channleList[this.active].channelId,
           start: sel.startDate,
           end: sel.endDate,
+          order: this.customer_list[this.customer_act].type,
         }).then(customer => {
           this.customerData = customer || { before: [], now: [] };
         });
@@ -666,6 +673,15 @@ export default {
     },
     customer_change(i) {
       this.customer_act = i;
+      let sel = this.timeSelect[this.active];
+      customerList({
+        channelId: this.channleList[this.active].channelId,
+        start: sel.startDate,
+        end: sel.endDate,
+        order: this.customer_list[this.customer_act].type,
+      }).then(customer => {
+        this.customerData = customer || { before: [], now: [] };
+      });
     },
     launch_change(i) {
       this.launch_act = i;
@@ -696,6 +712,7 @@ export default {
         channelId: this.channleList[this.active].channelId,
         start: sel.startDate,
         end: sel.endDate,
+        order: this.launch_list[this.proportion_act].type,
       }).then(proportion => {
         this.proportionData = proportion || [];
         this.proportionChart();
@@ -749,13 +766,13 @@ export default {
     },
     launchChart(list) {
       if (!this.$refs.launch) return;
-      if (this.launch_chart && this.launch_chart.dispose) {
-        this.launch_chart.dispose();
-        this.launch_chart = undefined;
+      if (launch_chart && launch_chart.dispose) {
+        launch_chart.dispose();
+        launch_chart = undefined;
       }
-      this.launch_chart = echarts.init(this.$refs.launch);
+      launch_chart = echarts.init(this.$refs.launch);
       let chartData = this.launchtrendData(list, "launch");
-      this.launch_chart.resize({
+      launch_chart.resize({
         height: (this.$refs.launch.offsetWidth * 6) / 16,
       });
       var option = {
@@ -790,17 +807,17 @@ export default {
           };
         }),
       };
-      option && this.launch_chart.setOption(option);
+      option && 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;
+      if (trend_chart && trend_chart.dispose) {
+        trend_chart.dispose();
+        trend_chart = undefined;
       }
-      this.trend_chart = echarts.init(this.$refs.trend);
+      trend_chart = echarts.init(this.$refs.trend);
       let chartData = this.launchtrendData(list, "trend");
-      this.trend_chart.resize({
+      trend_chart.resize({
         height: (this.$refs.trend.offsetWidth * 6) / 16,
       });
       var option = {
@@ -830,17 +847,17 @@ export default {
         }),
       };
 
-      option && this.trend_chart.setOption(option);
+      option && 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;
+      if (saturation_chart && saturation_chart.dispose) {
+        saturation_chart.dispose();
+        saturation_chart = undefined;
       }
-      this.saturation_chart = echarts.init(this.$refs.saturation);
+      saturation_chart = echarts.init(this.$refs.saturation);
       let chartData = this.saturationData(list);
-      this.saturation_chart.resize({
+      saturation_chart.resize({
         height: (this.$refs.saturation.offsetWidth * 6) / 16,
       });
       var option = {
@@ -881,17 +898,17 @@ export default {
         ],
       };
 
-      option && this.saturation_chart.setOption(option);
+      option && 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;
+      if (proportion_chart && proportion_chart.dispose) {
+        proportion_chart.dispose();
+        proportion_chart = undefined;
       }
-      this.proportion_chart = echarts.init(this.$refs.pieProportion);
+      proportion_chart = echarts.init(this.$refs.pieProportion);
       let chartData = this.proportionData;
-      this.proportion_chart.resize({
+      proportion_chart.resize({
         height: 40 * chartData.length,
       });
       var option = {
@@ -923,18 +940,18 @@ export default {
         ],
       };
 
-      option && this.proportion_chart.setOption(option);
+      option && proportion_chart.setOption(option);
     },
   },
   beforeUnmount: function() {
-    this.launch_chart.dispose();
-    this.trend_chart.dispose();
-    this.proportion_chart.dispose();
-    this.saturation_chart.dispose();
-    this.launch_chart = undefined;
-    this.trend_chart = undefined;
-    this.proportion_chart = undefined;
-    this.saturation_chart = undefined;
+    launch_chart.dispose();
+    trend_chart.dispose();
+    proportion_chart.dispose();
+    saturation_chart.dispose();
+    launch_chart = undefined;
+    trend_chart = undefined;
+    proportion_chart = undefined;
+    saturation_chart = undefined;
   },
   components: {},
 };