提交

src/api/index.js

@@ -315,13 +315,13 @@ export function trendList(data) {
  * @props {string} end
  * @return {AxjxPromise}
  */
-export function proportionList(data){
-    return ajax({
-      urlType: "adAPI",
-      url: "/ad/ratio",
-      method: "POST",
-      data,
-    });
+export function proportionList(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/ratio",
+    method: "POST",
+    data,
+  });
 }
 
 /**
@@ -331,16 +331,15 @@ export function proportionList(data){
  * @props {string} end
  * @return {AxjxPromise}
  */
-export function customerList(data){
-    return ajax({
-      urlType: "adAPI",
-      url: "/ad/detail",
-      method: "POST",
-      data,
-    });
+export function customerList(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/detail",
+    method: "POST",
+    data,
+  });
 }
 
-
 /**
  * 优势客户
  * @props {string} channelId
@@ -348,16 +347,15 @@ export function customerList(data){
  * @props {string} end
  * @return {AxjxPromise}
  */
-export function advantageousList(data){
-    return ajax({
-      urlType: "adAPI",
-      url: "/ad/youshi",
-      method: "POST",
-      data,
-    });
+export function advantageousList(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/youshi",
+    method: "POST",
+    data,
+  });
 }
 
-
 /**
  * 潜在客户
  * @props {string} channelId
@@ -365,16 +363,15 @@ export function advantageousList(data){
  * @props {string} end
  * @return {AxjxPromise}
  */
-export function potentialList(data){
-    return ajax({
-      urlType: "adAPI",
-      url: "/ad/qianzai",
-      method: "POST",
-      data,
-    });
+export function potentialList(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/qianzai",
+    method: "POST",
+    data,
+  });
 }
 
-
 /**
  * 饱和度
  * @props {string} channelId
@@ -382,44 +379,169 @@ export function potentialList(data){
  * @props {string} end
  * @return {AxjxPromise}
  */
- export function saturationList(data){
-    return ajax({
-      urlType: "adAPI",
-      url: "/ad/saturation",
-      method: "POST",
-      data,
-    });
+export function saturationList(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/saturation",
+    method: "POST",
+    data,
+  });
 }
 
 /**
  * 行业列表
  * @return {AxjxPromise}
  */
- export function allindustryList(data){
-    return ajax({
-      urlType: "adAPI",
-      url: "/ad/industry/list",
-      method: "GET",
-      data,
-    });
+export function allindustryList(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/list",
+    method: "GET",
+    data,
+  });
 }
 
 /**
  * 全行业
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
  * @return {AxjxPromise}
  */
- export function industryList(data){
-    return ajax({
-      urlType: "adAPI",
-      url: "/ad/market",
-      method: "POST",
-      data,
-    });
+export function industryList(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/market",
+    method: "POST",
+    data,
+  });
 }
 
 /***************************************分行业 */
 
+/**
+ * 分行业硬广
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
+ * @return {AxjxPromise}
+ */
+export function byIndustryTrendHard(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/TrendHard",
+    method: "POST",
+    data,
+  });
+}
+/**
+ * 分行业软广
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
+ * @return {AxjxPromise}
+ */
+export function byIndustryTrendSoft(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/TrendSoft",
+    method: "POST",
+    data,
+  });
+}
+
+/**
+ * 中小行业占比
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
+ * @return {AxjxPromise}
+ */
+export function smallIndustryProportion(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/MSIndustryProportion",
+    method: "POST",
+    data,
+  });
+}
+
+/**
+ * 媒体份额
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
+ * @return {AxjxPromise}
+ */
+export function MediaShare(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/MediaShare",
+    method: "POST",
+    data,
+  });
+}
+
+/**
+ * 频道份额
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
+ * @return {AxjxPromise}
+ */
+export function ChannelDistribution(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/ChannelDistribution",
+    method: "POST",
+    data,
+  });
+}
 
+/**
+ * 频道份额
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
+ * @return {AxjxPromise}
+ */
+export function ProgramTypeDistribution(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/ProgramTypeDistribution",
+    method: "POST",
+    data,
+  });
+}
+
+/**
+ * 重点客户
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
+ * @return {AxjxPromise}
+ */
+export function ImportantCustomer(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/ImportantCustomer",
+    method: "POST",
+    data,
+  });
+}
+
+/**
+ * 周走势
+ * @props {string} tableType
+ * @props {string} indexTime
+ * @props {string} dataType
+ * @return {AxjxPromise}
+ */
+export function LastWeekTrend(data) {
+  return ajax({
+    urlType: "adAPI",
+    url: "/ad/industry/LastWeekTrend",
+    method: "POST",
+    data,
+  });
+}

src/views/AdvertisingEye/AdvertisingEye.vue

@@ -67,33 +67,18 @@
           </el-row>
         </el-col>
       </el-row>
-      <template v-if="industry_list && industry_list.length">
-        <com-all-trend
+      <div v-if="industry_list && industry_list.length">
+        <all
+          v-if="industry_act === 0"
           :industryRang="active"
           :industry="industry_list[industry_act].industryId"
-          :title="industry_list[industry_act].industryId > 0 ? '行业投放趋势' : '全盘趋势'"
-        ></com-all-trend>
-        <com-structure
+        ></all>
+        <by
+          v-if="industry_act > 0"
           :industryRang="active"
           :industry="industry_list[industry_act].industryId"
-          title="行业结构"
-        ></com-structure>
-        <com-tranche
-          :industryRang="active"
-          :industry="industry_list[industry_act].industryId"
-          title="媒体份额"
-        ></com-tranche>
-        <com-distribution
-          :industryRang="active"
-          :industry="industry_list[industry_act].industryId"
-          title="软植栏目分布"
-        ></com-distribution>
-        <com-focus
-          :industryRang="active"
-          :industry="industry_list[industry_act].industryId"
-          title="重点客户"
-        ></com-focus>
-      </template>
+        ></by>
+      </div>
       <el-empty v-else description="数据跑丢了"></el-empty>
     </el-card>
   </div>
@@ -104,22 +89,15 @@
 // import config from "@/config/index";
 import { allindustryList } from "@/api/index.js";
 
-import comAllTrend from "@/views/AdvertisingEye/components/allTrend.vue";
-import comStructure from "@/views/AdvertisingEye/components/structure.vue";
-import comTranche from "@/views/AdvertisingEye/components/tranche.vue";
-import comDistribution from "@/views/AdvertisingEye/components/distribution.vue";
-import comFocus from "@/views/AdvertisingEye/components/focus.vue";
+import all from "./components/all.vue";
+import by from "./components/by.vue";
 
 export default {
   name: "AdvertisingEye",
   data() {
     return {
-      industry_list: [
-        {
-          industryId: 0,
-          industryName: "全行业",
-        },
-      ],
+      currentTabComponent: "",
+      industry_list: [],
       time_select: [],
       active: 0,
       soft_important_act: 0,
@@ -130,7 +108,13 @@ export default {
   mounted() {
     this.time_select = this.timeList();
     allindustryList().then(li => {
-      let industry_list = [...this.industry_list, ...(li || [])];
+      let industry_list = [
+        {
+          industryId: 0,
+          industryName: "全行业",
+        },
+        ...(li || []),
+      ];
       this.industry_list = industry_list;
     });
   },
@@ -146,6 +130,7 @@ export default {
     },
     selectIndustry(i) {
       this.active = i;
+      i > 0 ? (this.currentTabComponent = "by") : "all";
     },
     /**
      * 距离当前之前某天日期格式
@@ -200,11 +185,8 @@ export default {
   },
   beforeUnmount: function() {},
   components: {
-    comAllTrend,
-    comStructure,
-    comTranche,
-    comDistribution,
-    comFocus,
+    all,
+    by,
   },
 };
 </script>

src/views/AdvertisingEye/components/all.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <com-all-trend
+      :industryRang="industryRang"
+      :industry="industry"
+      title="全盘趋势"
+    ></com-all-trend>
+    <com-structure
+      :industryRang="industryRang"
+      :industry="industry"
+      title="行业结构"
+    ></com-structure>
+    <com-tranche
+      :industryRang="industryRang"
+      :industry="industry"
+      title="媒体份额"
+    ></com-tranche>
+    <com-distribution
+      :industryRang="industryRang"
+      :industry="industry"
+      title="软植栏目分布"
+    ></com-distribution>
+    <com-focus
+      :industryRang="industryRang"
+      :industry="industry"
+      title="重点客户"
+    ></com-focus>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import config from "@/config/index";
+
+import comAllTrend from "./allTrend.vue";
+import comStructure from "./structure.vue";
+import comTranche from "./tranche.vue";
+import comDistribution from "./distribution.vue";
+import comFocus from "./focus.vue";
+
+export default {
+  name: "all",
+  data() {
+    return {};
+  },
+  mounted() {
+  },
+  computed: {},
+  filter: {},
+  props: {
+    industry: Number,
+    industryRang: Number,
+  },
+  methods: {},
+  beforeUnmount: function() {},
+  components: {
+    comAllTrend,
+    comStructure,
+    comTranche,
+    comDistribution,
+    comFocus,
+  },
+};
+</script>
+
+<style></style>

src/views/AdvertisingEye/components/allTrend.vue

@@ -90,6 +90,7 @@ export default {
     title: String,
     industry: Number,
     industryRang: Number,
+    industryAct: Number,
   },
   watch: {
     industryRang() {

src/views/AdvertisingEye/components/allTrendB.vue

@@ -0,0 +1,347 @@
+<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 { byIndustryTrendHard, byIndustryTrendSoft } 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,
+    industryAct: Number,
+  },
+  watch: {
+    industryRang() {
+      this.init();
+    },
+    industry() {
+      this.init();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  filter: {},
+  methods: {
+    init() {
+      byIndustryTrendHard({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.hard_list[this.hard_act].type,
+      }).then(r => {
+        let org = r || [],
+          returnObj = {
+            before: org.harddatabase || [],
+            now: org.harddatacompare || [],
+          };
+        if (!org.harddatabase || !org.harddatacompare) return;
+        this.industryChart(returnObj);
+      });
+      byIndustryTrendSoft({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.soft_list[this.soft_act].type,
+      }).then(r => {
+        let org = r || [],
+          returnObj = {
+            before: org.softdatabase || [],
+            now: org.softdatacompare || [],
+          };
+        if (!org.softdatabase || !org.softdatacompare) return;
+        this.trendChart(returnObj);
+      });
+    },
+    hard_change(i) {
+      this.hard_act = i;
+      byIndustryTrendHard({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.hard_list[this.hard_act].type,
+      }).then(r => {
+        let org = r || [],
+          returnObj = {
+            before: org.harddatabase || [],
+            now: org.harddatacompare || [],
+          };
+        if (!org.harddatabase || !org.harddatacompare) return;
+        this.industryChart(returnObj);
+      });
+    },
+    soft_change(i) {
+      this.soft_act = i;
+      byIndustryTrendSoft({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.soft_list[this.soft_act].type,
+      }).then(r => {
+        let org = r || [],
+          returnObj = {
+            before: org.softdatabase || [],
+            now: org.softdatacompare || [],
+          };
+        if (!org.softdatabase || !org.softdatacompare) return;
+        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 > 1
+          ? keys.push(n.startTime)
+          : 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,
+      });
+      let unit = this.hard_list[this.hard_act].unit;
+      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 m0 = m[0] || {},
+              m1 = m[1] || undefined;
+            let tnow = list.now[m0.dataIndex] || {},
+              tbefore = list.before[m0.dataIndex] || {};
+            let out = `${tbefore.startTime || ""} ${m0.value || 0}${unit}`;
+            m1 &&
+              (out += ` <br />${tnow.startTime || ""} ${m1.value || 0}${unit}`);
+            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,
+      });
+      let unit = this.soft_list[this.soft_act].unit;
+      var option = {
+        legend: {
+          show: true,
+          data: chartData.lendata,
+        },
+        xAxis: {
+          type: "category",
+          data: chartData.keys,
+        },
+        tooltip: {
+          trigger: "axis",
+          formatter: m => {
+            let m0 = m[0] || {},
+              m1 = m[1] || undefined;
+            let tnow = list.now[m0.dataIndex] || {},
+              tbefore = list.before[m0.dataIndex] || {};
+            let out = `${tbefore.startTime || ""} ${m0.value || 0}${unit}`;
+            m1 &&
+              (out += ` <br />${tnow.startTime || ""} ${m1.value || 0}${unit}`);
+            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/by.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <com-all-trend
+      :industryRang="industryRang"
+      :industry="industry"
+      title="行业投放趋势"
+    ></com-all-trend>
+    <com-structure-b
+      :industryRang="industryRang"
+      :industry="industry"
+      title="中小行业占比"
+    ></com-structure-b>
+    <com-tranche
+      :industryRang="industryRang"
+      :industry="industry"
+      title="媒体份额"
+    ></com-tranche>
+    <com-tranche-b2
+      :industryRang="industryRang"
+      :industry="industry"
+      title="频道分布"
+    ></com-tranche-b2>
+    <com-focus
+      :industryRang="industryRang"
+      :industry="industry"
+      title="重点客户"
+    ></com-focus>
+    <com-distribution
+      :industryRang="industryRang"
+      :industry="industry"
+      title="节目类型分布"
+    ></com-distribution>
+    <com-trend-week
+      :industryRang="industryRang"
+      :industry="industry"
+      title="周走势"
+    ></com-trend-week>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import config from "@/config/index";
+
+import comAllTrend from "./allTrendB.vue";
+import comStructureB from "./structureB.vue";
+import comTranche from "./trancheB.vue";
+import comTrancheB2 from "./trancheB2.vue";
+import comDistribution from "./distributionB.vue";
+import comFocus from "./focusB.vue";
+import comTrendWeek from "./comTrendWeek.vue";
+
+export default {
+  name: "by",
+  data() {
+    return {};
+  },
+  mounted() {
+  },
+  computed: {},
+  filter: {},
+  props: {
+    industry: Number,
+    industryRang: Number,
+  },
+  methods: {},
+  beforeUnmount: function() {},
+  components: {
+    comAllTrend,
+    comStructureB,
+    comTranche,
+    comTrancheB2,
+    comDistribution,
+    comFocus,
+    comTrendWeek
+  },
+};
+</script>
+
+<style></style>

src/views/AdvertisingEye/components/comTrendWeek.vue

@@ -0,0 +1,163 @@
+<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 week_list"
+        :key="'share' + i"
+        :plain="week_act !== i"
+        @click="() => week_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 { LastWeekTrend } from "@/api/index.js";
+
+export default {
+  name: "AdvertisingEye_week",
+  data() {
+    return {
+      week_act: 0,
+      week_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          unit: "分",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          unit: "次",
+          type: 1,
+        },
+        {
+          text: "费用",
+          proportionType: "fee",
+          unit: "万",
+          type: 3,
+        },
+      ],
+      week_chart: undefined,
+    };
+  },
+  props: {
+    title: String,
+    industry: Number,
+    industryRang: Number,
+  },
+  watch: {
+    industryRang() {
+      this.init();
+    },
+    industry() {
+      this.init();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  filter: {},
+  methods: {
+    init() {
+      LastWeekTrend({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.week_list[this.week_act].type,
+      }).then(all => {
+        let hard = all.hardData || [],
+          soft = all.softData || [];
+        this.shareChart([hard, soft]);
+      });
+    },
+    week_change(i) {
+      this.week_act = i;
+      this.init();
+    },
+    shareChart(list) {
+        console.log(list)
+      if (!this.$refs.share) return;
+      if (this.week_chart && this.week_chart.dispose) {
+        this.week_chart.dispose();
+        this.week_chart = undefined;
+      }
+      this.week_chart = echarts.init(this.$refs.share);
+      this.week_chart.resize({
+        height: (this.$refs.share.offsetWidth * 6) / 16,
+      });
+      let o = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+      let k = list[0].map(item => {
+        return o[item.week];
+      });
+      let key = this.week_list[this.week_act].proportionType || ''
+      var option = {
+        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.week_list[this.week_act].unit
+            );
+          },
+        },
+        legend: {
+          left: "center",
+          top: 10,
+        },
+        xAxis: {
+          type: "category",
+          data: k,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: list.map((v, i) => {
+          return {
+            name: i === 1 ? "软广" : "硬广",
+            type: "bar",
+            barWidth: 30, //柱图宽度
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+            data: v.map(item=> item[key] || 0),
+          };
+        }),
+      };
+      option && this.week_chart.setOption(option);
+    },
+  },
+  beforeUnmount: function() {
+    this.week_chart && this.week_chart.dispose();
+    this.week_chart && (this.week_chart = undefined);
+  },
+  components: {},
+};
+</script>
+
+<style></style>

src/views/AdvertisingEye/components/distribution.vue

@@ -103,7 +103,7 @@
 // @ is an alias to /src
 // import config from "@/config/index";
 import * as echarts from "echarts";
-import comTable from "@/views/AdvertisingEye/components/table.vue";
+import comTable from "./table.vue";
 import { industryList } from "@/api/index.js";
 
 export default {
@@ -166,7 +166,6 @@ export default {
         }),
       ]).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] || []);
       });

src/views/AdvertisingEye/components/distributionB.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="programName"
+              label="栏目名称"
+            >
+              <template #default="scope">
+                {{ scope.row.programName || '--' }}
+              </template>
+            </el-table-column>
+            <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="customer" label="">
+              <template #header>
+                <span
+                  :style="
+                    soft_planting_list[soft_planting_act].type === 4
+                      ? 'color: red'
+                      : ''
+                  "
+                >
+                  客户数
+                </span>
+              </template>
+              <template #default="scope">
+                {{ numFor(scope.row.customer) }}
+              </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 "./table.vue";
+import { ProgramTypeDistribution } 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() {
+      ProgramTypeDistribution({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.soft_planting_list[this.soft_planting_act].type,
+      }).then(all => {
+        const li = (all || { data: [] }).data || [];
+        this.tableList = li;
+        li.length && (this.titleName = li[0].name || "");
+        this.softAdChart(li || []);
+      });
+    },
+    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.programType, 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 Number(num).toFixed(2);
+    },
+  },
+  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

@@ -495,7 +495,7 @@
 // @ is an alias to /src
 // import config from "@/config/index";
 
-import comTable from "@/views/AdvertisingEye/components/table.vue";
+import comTable from "./table.vue";
 import { industryList } from "@/api/index.js";
 
 export default {

src/views/AdvertisingEye/components/focusB.vue

@@ -0,0 +1,290 @@
+<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 important_list"
+        :key="'important' + i"
+        :plain="important_act !== i"
+        @click="() => important_change(i)"
+      >
+        {{ item.text }}
+      </el-button>
+    </el-button-group>
+    <br />
+    <el-row>
+      <el-col :span="12">
+        <com-table
+          title="硬广-品牌投放Top10"
+          v-if="softMarster && softMarster.length"
+          :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="companyName"
+              label="品牌名称"
+            >
+              <template #default="scope">
+                {{ scope.row.companyName || '--' }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="pinci">
+              <template #header>
+                <span
+                  :style="
+                    important_list[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="
+                    important_list[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.huanbi < 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.huanbi > 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"
+          v-if="softBrand && softBrand.length"
+          :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="companyName"
+              label="品牌名称"
+            >
+              <template #default="scope">
+                {{ scope.row.companyName || '--' }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="pinci">
+              <template #header>
+                <span
+                  :style="
+                    important_list[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="
+                    important_list[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.huanbi < 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.huanbi > 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 "./table.vue";
+import { ImportantCustomer } from "@/api/index.js";
+
+export default {
+  name: "AdvertisingEye",
+  data() {
+    return {
+      important_act: 0,
+      important_list: [
+        {
+          text: "时长",
+          proportionType: "timeSize",
+          type: 2,
+        },
+        {
+          text: "频次",
+          proportionType: "pinci",
+          type: 1,
+        },
+      ],
+      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() {
+      ImportantCustomer({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.important_list[this.important_act].type,
+      }).then(res => {
+        let marster = (res.harddata || []).splice(0, 10),
+          brand = (res.softdata || []).splice(0, 10);
+        this.softMarster = marster;
+        this.softBrand = brand;
+      });
+    },
+    important_change(i) {
+      this.important_act = i;
+      this.init();
+    },
+  },
+  beforeUnmount: function() {},
+  components: {
+    comTable,
+  },
+};
+</script>
+
+<style></style>

src/views/AdvertisingEye/components/structureB.vue

@@ -0,0 +1,173 @@
+<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 { smallIndustryProportion } 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() {
+      smallIndustryProportion({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.industry_list[this.industry_act].type,
+      }).then(res => {
+        let li = [[], [], [], []],
+          keys = Object.keys(res),
+          kv = {
+            softSdata: 3,
+            softMdata: 1,
+            hardSdata: 2,
+            hardMdata: 0,
+          },
+          key = this.industry_list[this.industry_act].proportionType;
+        for (let i = 0; i < keys.length; i++) {
+          const v = keys[i];
+          li[kv[v]] = (res[v] || []).map(item => {
+            let value = item[key];
+            if (!isNaN(value)) value = (value - 0).toFixed(2);
+            return {
+              name: item.midIndustryName || item.smallIndustryName,
+              value,
+            };
+          });
+        }
+        this.industryChart(li);
+      });
+    },
+    industry_change(i) {
+      this.industry_act = i;
+      this.init();
+    },
+    industryChart(li) {
+      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) / 8,
+      });
+      var option = {
+        legend: {
+          left: "center",
+          bottom: 10,
+        },
+        title: [
+          {
+            text: "硬广-中行业占比",
+            left: "20%",
+            top: "5%",
+          },
+          {
+            text: "软广-中行业占比",
+            left: "70%",
+            top: "5%",
+          },
+          {
+            text: "硬广-小行业占比",
+            left: "20%",
+            top: "50%",
+          },
+          {
+            text: "软广-小行业占比",
+            left: "70%",
+            top: "50%",
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+        },
+        series: li.map((v, i) => {
+          let h = Math.floor(i / 2);
+          return {
+            type: "pie",
+            radius: "30%",
+            center: [25 + 50 * (i % 2) + "%", 28 + 45 * h + "%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: v,
+          };
+        }),
+      };
+      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/trancheB.vue

@@ -0,0 +1,184 @@
+<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 { MediaShare } 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,
+        },
+      ],
+      share1_chart: undefined,
+    };
+  },
+  props: {
+    title: String,
+    industry: Number,
+    industryRang: Number,
+  },
+  watch: {
+    industryRang() {
+      this.init();
+    },
+    industry() {
+      this.init();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  filter: {},
+  methods: {
+    init() {
+      MediaShare({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.share_list[this.share_act].type,
+      }).then(res => {
+        let li = (res || { data: [] }).data || [];
+        this.share1Chart([
+          {
+            name: "央视",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              ((li[0].softY || 0) - 0).toFixed(2),
+              ((li[1].hardY || 0) - 0).toFixed(2),
+            ],
+          },
+          {
+            name: "卫视",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              ((li[0].softW || 0) - 0).toFixed(2),
+              ((li[1].hardW || 0) - 0).toFixed(2),
+            ],
+          },
+        ]);
+      });
+    },
+    share_change(i) {
+      this.share_act = i;
+      this.init();
+    },
+    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,
+      };
+      option && this.share1_chart.setOption(option);
+    },
+  },
+  beforeUnmount: function() {
+    this.share1_chart && this.share1_chart.dispose();
+    this.share1_chart && (this.share1_chart = undefined);
+  },
+  components: {},
+};
+</script>
+
+<style></style>

src/views/AdvertisingEye/components/trancheB2.vue

@@ -0,0 +1,237 @@
+<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 { ChannelDistribution } 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,
+        },
+      ],
+      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() {
+      ChannelDistribution({
+        industryId: this.industry,
+        dataType: this.industryRang + 1,
+        type: this.share_list[this.share_act].type,
+      }).then(all => {
+        let hard = all.harddata || [],
+          soft = all.softdata || [];
+        this.shareChart(hard);
+        this.share1Chart(soft);
+      });
+    },
+    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,
+      });
+      let k = [],
+        v = [];
+      list.map(item => {
+        let value = item[this.share_list[this.share_act].proportionType] || 0;
+        if (this.share_list[this.share_act].proportionType === "timeSize")
+          value = (value / 60).toFixed(2);
+        k.push(item.channelName);
+        v.push(value);
+      });
+      var option = {
+        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",
+          top: 10,
+        },
+        xAxis: {
+          type: "category",
+          data: k,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "硬广",
+            type: "bar",
+            barWidth : 30,//柱图宽度
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+            data: v,
+          },
+        ],
+      };
+
+      option && this.share_chart.setOption(option);
+    },
+    share1Chart(list) {
+      if (!this.$refs.share) 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.share.offsetWidth * 6) / 16,
+      });
+      let k = [],
+        v = [];
+      list.map(item => {
+        let value = item[this.share_list[this.share_act].proportionType] || 0;
+        if (this.share_list[this.share_act].proportionType === "timeSize")
+          value = (value / 60).toFixed(2);
+        k.push(item.channelName);
+        v.push(value);
+      });
+      var option = {
+        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",
+          top: 10,
+        },
+        xAxis: {
+          type: "category",
+          data: k,
+        },
+        yAxis: {
+          type: "value",
+        },
+        color: ["#ff0000"],
+        series: [
+          {
+            name: "软广",
+            barWidth: 30, //柱图宽度
+            type: "bar",
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+            data: v,
+          },
+        ],
+      };
+
+      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>