hair/src/views/report/Advertisement/index.vue

<template>
  <div style="font-size: 0; background-color: #fff">
    <div class="Advertisement">
      <img
        class="item"
        src="https://cxzx.smcic.net/zhoubao/assets/guanggao01.jpg"
        width="100%"
        style="margin-bottom: 1em; display: block"
        alt=""
      />
      <div :style="'height: ' + fontSize + 'px;'"></div>
    </div>
    <div
      v-if="orgin.html"
      :style="'font-size: ' + fontSize + 'px;'"
      class="Advertisement"
    >
      <!-- <div class="item" style="text-align: center; padding-top: 1em">
      <p v-text="orgin.company"></p>
      <p v-text="orgin.name"></p>
      <p v-text="orgin.cycle"></p>
    </div> -->
      <div class="item">
        <section class="title">
          <section>电视广告投放简析</section>
          <img
            src="../../../assets/image/640.png"
            width="96.9922px"
            style="float: right"
          />
        </section>
        <br />
        <div class="article" v-html="orgin.html"></div>
      </div>
      <div class="item">
        <section class="title">
          <section>细分信息对比</section>
          <img
            src="../../../assets/image/640.png"
            width="96.9922px"
            style="float: right"
          />
        </section>
        <div class="card">
          <h4 class="xifenxinxiTitle">
            <div class="right"></div>
            <div class="left">
              <span v-text="orgin.day_hb.name"> </span>
            </div>
          </h4>
          <br />
          <div ref="adRingRatioCanvas"></div>
          <p
            :style="
              'text-indent: 2em; font-weight: 700; padding: 0.5em 3px;font-size: ' +
              fontSize +
              'px;'
            "
            v-html="orgin.day_hb.desc"
          ></p>
        </div>
        <div class="card">
          <h4 class="xifenxinxiTitle">
            <div class="right"></div>
            <div class="left">
              <span v-text="orgin.brand_top.name"> </span>
            </div>
          </h4>
          <br />
          <van-row v-if="orgin.brand_top" class="tableHead">
            <van-col span="3">排名</van-col>
            <van-col span="7">品牌</van-col>
            <van-col span="7">费用(元)</van-col>
            <van-col span="7" style="text-align: right; padding-right: 3px"
              >环比</van-col
            >
          </van-row>
          <div v-if="orgin.brand_top">
            <van-row
              class="tableBody"
              v-for="(item, i) in orgin.brand_top.list || []"
              :key="item.name + i"
            >
              <van-col span="3" v-text="i + 1"></van-col>
              <van-col span="7" v-text="item.name"></van-col>
              <van-col
                span="7"
                :style="
                  item.huanbi > 0
                    ? 'color: red'
                    : item.huanbi < 0
                    ? 'color: green'
                    : ''
                "
              >
                {{ item.fee }}
              </van-col>
              <van-col
                span="7"
                :style="
                  item.huanbi > 0
                    ? 'color: red;text-align: right;padding-right: 3px;'
                    : item.huanbi < 0
                    ? 'color: green;text-align: right;padding-right: 3px;'
                    : ''
                "
              >
                {{ item.huanbi }}%
              </van-col>
            </van-row>
          </div>
          <p
            :style="
              'text-indent: 2em; font-weight: 700; padding: 0.5em 3px;font-size: ' +
              fontSize +
              'px;'
            "
            v-html="orgin.brand_top.desc"
          ></p>
        </div>
        <div class="card">
          <h4 class="xifenxinxiTitle">
            <div class="right"></div>
            <div class="left">
              <span v-text="orgin.brand_hb.name"> </span>
            </div>
          </h4>
          <br />
          <div ref="adTop10" class="">
            <div ref="adTop10Canvas"></div>
          </div>
          <p
            :style="
              'text-indent: 2em; font-weight: 700; padding: 0.5em 3px;font-size: ' +
              fontSize +
              'px;'
            "
            v-html="orgin.brand_hb.desc"
          ></p>
        </div>
        <div class="card">
          <h4 class="xifenxinxiTitle">
            <div class="right"></div>
            <div class="left">
              <span v-text="orgin.month_thb.name"> </span>
            </div>
          </h4>
          <br />
          <div ref="adTop10" class="">
            <div ref="adFeeCanvas"></div>
          </div>
          <p
            :style="
              'text-indent: 2em; font-weight: 700; padding: 0.5em 3px;font-size: ' +
              fontSize +
              'px;'
            "
            v-html="orgin.month_thb.desc"
          ></p>
        </div>
        <div class="bottom">
          本数据由“陕西广电融媒体集团大数据平台”提供。
          <p>
            技术支持 <span style="white-space: nowrap">白帆13325452244;</span
            ><span style="white-space: nowrap">陈科18629350958。</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import watermark from "watermark-package";
import { Col as vanCol, Row as vanRow } from "vant";
import "vant/lib/col/style/index";
import "vant/lib/row/style/index";

import dayJs from "dayjs";

import {
  advertisementSpendInit,
  advertisementRingRatioInit,
  advertisementFeeInit,
} from "./Charts";
import { jsonAdvertisement } from "@/api/index";

export default {
  name: "Advertisement",
  data() {
    return {
      orgin: {},
      fontSize: 17,
    };
  },
  mounted() {
    if (
      this.$route.query.auto !==
      "06fd56cdf5a6cfc3a2139cc8514d05aa0439ee8c1fb4d81145bc9647"
    )
      return;
    this.fontSize = (document.body.offsetWidth / 24).toFixed(2) - 0;
    if (document.body.offsetWidth > 677) this.fontSize = 20;
    const time = new dayJs(this.$route.query.date);
    watermark.setWaterMark({
      w_texts: ["陕西视听大数据"],
      w_options: {
        w_opacity: "0.1",
        w_width: 360,
        w_height: 280,
      },
    });
    jsonAdvertisement({
      date: time.format("YYYY-MM"),
      time: Date.now()
    }).then(r => {
      const Res = r || {};
      const brand_top = Res.brand_top || { list: [] };
      for (let i = 0; i < brand_top.list.length; i++) {
        brand_top.list[i].fee = this.formatType(brand_top.list[i].fee, 2, true);
        brand_top.list[i].huanbi = (brand_top.list[i].huanbi * 100).toFixed(2);
      }
      Res.brand_top = brand_top;
      this.orgin = Res;
      console.log(this.orgin);
      this.$nextTick(() => {
        this.createChart();
        window.onresize = () => {
          watermark.setWaterMark({
            w_texts: ["陕西视听大数据"],
            w_options: {
              w_opacity: "0.1",
            },
          });
        };
      });
    });
  },
  computed: {},
  methods: {
    formatNum(num, w) {
      if (isNaN(num)) return 0;
      return Number(num).toFixed(w || 4) - 0;
    },
    formatType(num, W) {
      let N = this.formatNum(num, 2);
      if (N >= 100000000) {
        N = (N / 100000000).toFixed(W || 2) + "亿";
      } else if (N >= 10000) {
        N = (N / 10000).toFixed(W || 2) + "万";
      }
      return N;
    },
    createChart() {
      let width = this.$refs.adTop10.offsetWidth,
        height = (width / 16) * 9;
      this.$refs.adTop10Canvas.style = `width:${width}px;height:${width}px`;
      this.$refs.adFeeCanvas.style = `width:${width}px;height:${width}px`;
      this.$refs.adRingRatioCanvas.style = `width:${width}px;height:${height}px`;

      const ringRatioF = [];
      const ringRatioL = [];
      const day_hb = this.orgin.day_hb ? this.orgin.day_hb.list : [];
      for (let i = 0; i < day_hb.length; i++) {
        const v = day_hb[i];
        const type = (v.pdt || "").split("-");
        const type1 = (v.dt || "").split("-");
        v.pfee &&
          ringRatioF.push({
            date: v.pdt || "",
            type: [type[0], type[1]].join("-"),
            value: v.pfee * 1,
          });
        v.fee &&
          ringRatioL.push({
            date: v.dt || "",
            type: [type1[0], type1[1]].join("-"),
            value: v.fee * 1,
          });
      }
      const lineF = [];
      const lineL = [];
      const brand_hb = this.orgin.brand_hb ? this.orgin.brand_hb.list : [];
      for (let i = 0; i < brand_hb.length; i++) {
        const v = brand_hb[i];
        // lineF.push({
        //   date: v.industry_name || "",
        //   type: v.pstart_time,
        //   value: v.pfee * 1,
        // });
        lineL.push({
          date: v.industry_name || "",
          type: "环比" + v.start_time + " vs " + v.pstart_time,
          value: v.huanbi * 100,
        });
      }
      const line1F = [];
      const line1L = [];
      const month_thb = this.orgin.month_thb ? this.orgin.month_thb.list : [];
      for (let i = 0; i < month_thb.length; i++) {
        const v = month_thb[i];
        line1F.push({
          date: v.name || "",
          type: "同比",
          t: "同比",
          value: v.tb * 100,
        });
        line1L.push({
          date: v.name || "",
          type: "环比",
          t: "环比",
          value: v.hb * 100,
        });
      }

      lineL.length &&
        advertisementSpendInit(this.$refs.adTop10Canvas, {
          L: lineL,
          F: lineF,
          name: this.orgin.brand_hb.name,
        });
      ringRatioF.length &&
        ringRatioL.length &&
        advertisementRingRatioInit(this.$refs.adRingRatioCanvas, {
          L: ringRatioL,
          F: ringRatioF,
          name: this.orgin.day_hb.name,
        });
      line1L.length &&
        line1F.length &&
        advertisementFeeInit(this.$refs.adFeeCanvas, {
          L: line1L,
          F: line1F,
          name: this.orgin.month_thb.name,
        });
    },
  },
  beforeUnmount: function () {},
  components: { vanCol, vanRow },
};
</script>

<style>
.Advertisement {
  height: 100%;
  padding: 0px 5px 12px 5px;
  background-color: #fff;
}
.Advertisement .item {
  max-width: 677px;
  margin: 0 auto;
  font-weight: 700;
  padding-bottom: 1em;
}
.Advertisement section {
  font-weight: 700;
}
.Advertisement .title {
  background-color: #ff6827;
  width: 196px;
  margin: 0 auto;
}
.Advertisement .title section {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  height: 35px;
  line-height: 35px;
  width: 166px;
  text-align: center;
}
.xifenxinxiTitle {
  color: #ffffff;
  height: 34px;
  line-height: 34px;
  position: relative;
}
.xifenxinxiTitle .left {
  background-color: #d11e16;
  padding-left: 1em;
  width: 90%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.xifenxinxiTitle .right {
  background-color: #595959;
  width: 10%;
  height: 34px;
  line-height: 34px;
  position: absolute;
  z-index: 0;
  right: 0;
  top: 5px;
}

.Advertisement .tableHead {
  color: #fff;
  background-color: #cf827f;
}
.tableHead .van-col,
.tableBody .van-col {
  height: 2em;
  line-height: 2em;
  text-align: center;
  white-space: nowrap;
}
.card {
  box-shadow: 0 0 5px 5px #eee;
  margin-top: 1em;
  padding: 1em 0;
}
.bottom {
  border: 4px solid #0983a8;
  margin-top: 1em;
  padding: 10px;
  font-size: 0.9rem;
  padding-left: 5px;
  font-weight: 600;
  overflow: hidden;
}
</style>