big_data_ott/src/views/AdvertisingEye/components/focus.vue

<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 "./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>