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

<template>
  <div style="font-size: 0; background-color: #fff">
    <img
      :src="
        'https://cxzx.smcic.net/zhoubao/assets/tv' + $route.query.date + '.jpg'
      "
      width="100%"
      class="content"
      style="margin-bottom: 1em; display: block"
      alt=""
    />
    <p
      class="content"
      :style="
        'font-weight: 700;word-break: normal;text-align: justify; padding: 0.5em 3px;font-size: ' +
        fontSize +
        'px;'
      "
      v-html="title.desc"
    ></p>
    <div :style="'height: ' + fontSize + 'px;'"></div>
    <div class="tv-list" :style="'font-size:' + fontSize + 'px'">
      <div class="content">
        <!-- <div class="titleTop">
        <p v-text="title.company"></p>
        <p v-text="title.name"></p>
        <p v-text="title.title"></p>
      </div> -->
        <div class="itemHead">
          <van-row>
            <van-col span="4" class="td"> 省排名 </van-col>
            <van-col span="6" class="td"> 频道 </van-col>
            <van-col span="5">
              <van-popover
                v-model="fene"
                trigger="click"
                @select="fene = !fene"
              >
                <div style="padding: 5px">
                  市场份额=本频道收视率/所有频道收视率
                </div>
                <template #reference>
                  <p class="td">市场份额</p>
                </template>
              </van-popover>
            </van-col>
            <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
            <van-col span="7">
              <van-popover
                v-model="shichang"
                trigger="click"
                @select="shichang = !shichang"
              >
                <div style="padding: 5px">
                  市场份额=本频道收视率/所有频道收视率
                </div>
                <template #reference>
                  <p class="td">周人均时长(分)</p>
                </template>
              </van-popover>
            </van-col>
            <van-col span="2" class="td">
              <img
                src="../../../assets/image/shou.gif"
                width="26px"
                alt=""
                style="vertical-align: middle; transform: rotate(45deg)"
              />
            </van-col>
          </van-row>
        </div>
        <div v-for="(v, o) in platfromData || []" :key="v.name">
          <div
            style="border-bottom: 1px dashed #eee; margin: 11px 0 0 0"
            v-if="o === 50"
          ></div>
          <van-row
            :style="v.shanxi_channel ? 'background:	#F5DEB3' : ''"
            class="item"
            @click="() => showPopup(o)"
          >
            <van-col
              span="4"
              :class="{ td: true }"
              :style="{ color: color[o] || '#000', fontWeight: 600 }"
            >
              {{ v.rank }}
            </van-col>
            <van-col
              :style="v.shanxi_channel ? 'font-weight: 600' : ''"
              span="6"
              :class="{ td: true }"
            >
              {{ v.channelname }}
            </van-col>
            <van-col span="5" :class="{ td: true }">
              {{ formatNum(v.occrate, 2) }}%
              <van-icon
                v-if="v.occrate_change !== '相等'"
                name="down"
                :color="v.occrate_change === '上升' ? '#f00' : '#04c15f'"
                :class="{ rise: v.occrate_change === '上升' }"
              />
            </van-col>
            <van-col span="7" :class="{ td: true }">
              {{ timeFormat(v.user_duration) }}
              <van-icon
                v-if="v.user_duration_change !== '相等'"
                name="down"
                :color="v.user_duration_change === '上升' ? '#f00' : '#04c15f'"
                :class="{ rise: v.user_duration_change === '上升' }"
              />
            </van-col>
            <van-col span="2" class="td" style="cursor: pointer">
              <van-icon name="arrow" />
            </van-col>
          </van-row>
        </div>
        <van-popup
          :style="{ height: '100%', width: '100%' }"
          position="right"
          v-model="show"
        >
          <div class="main">
            <van-cell
              title-style="flex: 3"
              :title="ratios.schedulename"
              :label="ratios.channelname"
            >
              <div
                @click="show = false"
                :style="
                  'float:left;color: #5470c6;word-break: normal;text-align: justify;cursor:pointer;font-size:' +
                  fontSize +
                  'px'
                "
              >
                <van-icon name="revoke" />
                返回
              </div>
              <div
                :style="
                  'width: 100%; text-align: center;font-size:' + fontSize + 'px'
                "
              >
                {{ ratios.channelname }}
              </div>
            </van-cell>
            <van-cell-group title="视听收视新指标">
              <van-row>
                <van-col span="7" class="td" style="text-align: right">
                  收视总时长：
                </van-col>
                <van-col span="5" class="td">
                  {{ ratios.timecount }}小时
                </van-col>
                <van-col span="7" class="td" style="text-align: right">
                  收视总次数：
                </van-col>
                <van-col span="5" class="td">
                  {{ ratios.hitcount }}
                </van-col>

                <van-col span="7" class="td" style="text-align: right">
                  周活跃户数：
                </van-col>
                <van-col span="5" class="td">
                  {{ ratios.usrcount }}
                </van-col>

                <van-col span="7" class="td" style="text-align: right">
                  周接触频次：
                </van-col>
                <van-col span="5" class="td">
                  {{ formatType1(ratios.touchfreq, 1) }}次
                </van-col>
              </van-row>
            </van-cell-group>
            <van-cell-group title="传统指标">
              <van-row>
                <van-col span="5" class="td"> 到达率： </van-col>
                <van-col span="5" class="td"
                  >{{ formatNum(ratios.reachrate, 2) }}%
                </van-col>
                <van-col span="7" class="td"> 周人均时长： </van-col>
                <van-col span="7" class="td"
                  >{{ timeFormat(ratios.user_duration, 0) }}分钟
                </van-col>
                <van-col span="5" class="td"> 收视率： </van-col>
                <van-col span="5" class="td">
                  {{ formatNum(ratios.watchrate, 2) }}%
                </van-col>
                <van-col span="7" class="td"> 市场占有率： </van-col>
                <van-col span="7" class="td"
                  >{{ formatNum(ratios.occrate, 2) }}%
                </van-col>
                <van-col span="5" class="td"> 忠诚度： </van-col>
                <van-col span="5" class="td"
                  >{{ formatNum(ratios.loyalty, 2) }}%
                </van-col>
              </van-row>
            </van-cell-group>
            <div ref="pie"></div>
            <div ref="day"></div>
          </div>

          <div class="bottom content">
            本数据由<span style="color: red"
              >“陕西广电融媒体集团大数据平台”</span
            >提供。
            <p>
              技术支持:
              <span style="white-space: nowrap">白帆13325452244 </span>
              <span style="white-space: nowrap">陈科18629350958。</span>
            </p>
          </div>
        </van-popup>
      </div>
      <div class="bottom content">
        本数据由<span style="color: red">“陕西广电融媒体集团大数据平台”</span
        >提供。
        <p>
          技术支持:
          <span style="white-space: nowrap">白帆13325452244 </span>
          <span style="white-space: nowrap">陈科18629350958。</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import watermark from "watermark-package";
import {
  Col as vanCol,
  Row as vanRow,
  Icon as vanIcon,
  Popup as vanPopup,
  cellGroup as vanCellGroup,
  Cell as vanCell,
  Popover as vanPopover,
} from "vant";
import "vant/lib/popover/style/index";
import "vant/lib/cell-group/style/index";
import "vant/lib/cell/style/index";
import "vant/lib/popup/style/index";
import "vant/lib/icon/style/index";
import "vant/lib/col/style/index";
import "vant/lib/row/style/index";
// import {} from "../utils/tool";
import Dayjs from "dayjs";
import { jsonZhou } from "../../../api/index";

import echarts from "../../../utils/echarts";

export default {
  name: "tv-list",
  data() {
    return {
      shichang: false,
      fene: false,
      fontSize: 17,
      show: false,
      charts: undefined,
      ratios: {},
      platfromData: [],
      color: ["#ff0036", "#ff9b00", "#ffcc00"],
      echarts: undefined,
      dayEcharts: undefined,
      title: {},
      width: document.body.offsetWidth || 0,
    };
  },
  watch: {},
  mounted() {
    if (
      this.$route.query.auto !==
      "06fd56cdf5a6cfc3a2139cc8514d05aa0439ee8c1fb4d81145bc9647"
    )
      return;
    this.fontSize = (document.body.offsetWidth / 24).toFixed(2) - 0;
    if (document.body.offsetWidth > 677) this.fontSize = 22;
    watermark.setWaterMark({
      w_texts: ["陕西视听大数据"],
      w_options: {
        w_opacity: "0.1",
      },
    });
    const time = new Date(this.$route.query.date);
    let D = new Date(time);
    const lasetDay = new Dayjs(D.getTime() - D.getDay() * 86400000);
    const firstDay = new Dayjs(lasetDay - 6 * 86400000);
    jsonZhou({
      start: firstDay.format("YYYYMMDD"),
      end: lasetDay.format("YYYYMMDD"),
      time: Date.now(),
    })
      .then(res => {
        const title = {
          company: res.company || "",
          name: res.name || "",
          title: res.title || "",
          desc: res.desc || "",
        };
        this.title = title;
        this.platfromData = res.list || [];
        this.$emit("start", {
          status: 200,
        });
      })
      .catch(err => {
        this.$emit("start", {
          status: err,
        });
      });

    window.onresize = () => {
      const doc = document.body;
      const width = doc.offsetWidth - 32;
      let height = (width / 4) * 3;
      this.width = document.body.offsetWidth || 0;
      this.dayEcharts &&
        this.dayEcharts.resize({
          width,
          height: width,
        });
      this.echarts &&
        this.echarts.resize({
          width,
          height,
        });
    };
  },
  computed: {},
  methods: {
    formatType1(num, W) {
      let N = this.formatNum(num, W || 0);
      if (N >= 100000000) {
        N = (N / 100000000).toFixed(W || 0) - 0 + "亿";
      } else if (N >= 10000) {
        N = (N / 10000).toFixed(W || 0) - 0 + "万";
      } else {
        N = Number(N).toFixed(W || 0) - 0;
      }
      return N;
    },
    formatNum(num, w) {
      if (isNaN(num)) return 0;
      return Number(num).toFixed(w || 4) - 0;
    },
    formatType(num, W) {
      let N = this.formatNum(num, 2);
      let wei = "";
      if (N >= 100000000) {
        N = (N / 100000000).toFixed(W || 2);
        wei = "亿";
      } else if (N >= 10000) {
        N = (N / 10000).toFixed(W || 2);
        wei = "万";
      }
      N = N.toString().split(".");
      return {
        N: (N[0] || 0) * 1,
        P: N[1] || 0,
        wei,
      };
    },
    timeFormat(t, w) {
      const Time = t || 0;
      let out = Time.toFixed(w || 0) - 0;
      return out;
    },
    showPopup(i) {
      this.show = true;
      const reaios = JSON.parse(JSON.stringify(this.platfromData[i] || {}));
      reaios.hitcount = this.formatType1(reaios.hitcount, 1);
      reaios.usrcount = this.formatType1(reaios.usrcount, 1);
      reaios.timecount = this.formatType1(reaios.timecount / 60, 0);
      this.ratios = reaios;
      this.$nextTick(() => {
        this.upEcharts();
        this.dayEchartsFun();
      });
    },
    dayEchartsFun() {
      this.dayEcharts && this.dayEcharts.clear && this.dayEcharts.clear();
      if (!this.dayEcharts) {
        const doc = document.body;
        const width = doc.offsetWidth - 32;
        let height = (width / 4) * 3;
        if (height > 400) height = 400;
        this.dayEcharts = echarts.init(
          this.$refs.day,
          {},
          {
            width,
            height,
          }
        );
      }
      const key = [],
        value = [];
      this.ratios.detail_list.map(v => {
        let val = v.usrcount;
        key.push(v.dt);
        value.push(val);
      });
      this.dayEcharts.setOption({
        title: {
          text: "家庭户收视规模",
          subtext: this.ratios.usrcount_compare
            ? this.ratios.usrcount_compare + " 单位：户"
            : "单位：户",
          textStyle: {
            fontSize: this.fontSize * 1.05,
          },
          subtextStyle: {
            fontSize: this.fontSize,
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: key,
          axisLabel: {
            interval: 0,
            rotate: 60,
          },
        },
        grid: {
          right: "5px",
          left: "40px",
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: e => {
              const T = this.formatType(e);
              let out = T.N;
              if (T.P > 0) out += "." + (T.P - 0);
              out += T.wei;
              return out;
            },
          },
        },
        series: [
          {
            type: "line",
            data: value,
          },
        ],
      });
    },
    upEcharts() {
      this.echarts && this.echarts.clear && this.echarts.clear();
      if (!this.echarts) {
        const doc = document.body;
        const width = doc.offsetWidth - 32;
        let height = width;
        if (height > 667) height = 667;
        this.echarts = echarts.init(
          this.$refs.pie,
          {},
          {
            width,
            height,
          }
        );
      }
      this.echarts.setOption({
        title: {
          text: "观看时长用户分布",
          subtext: "单位：%",
          textStyle: {
            fontSize: this.fontSize * 1.05,
          },
        },
        color: [
          "#87cefa",
          "#00bfff",
          "#1e90ff",
          "#0000ff",
          "#00008b",
          "#191970",
          "#000080",
          "#0000cd",
          "#4169e1",
          "#6495ed",
        ],
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [30, 70],
            center: ["50%", "50%"],
            emphasis: {
              //使用emphasis
              disable: false,
              scale: false, //不缩放
              scaleSize: 0, //为了防止失效直接设置未0
            },
            data: this.ratios.duration_list.map(v => {
              let bfb = (v.value * 100).toFixed(0) - 0;
              return {
                value: bfb,
                name: v.range + "\n 占比" + bfb + "%",
              };
            }),
          },
        ],
      });
    },
  },
  beforeUnmount() {},
  components: {
    vanCol,
    vanRow,
    vanIcon,
    vanPopup,
    vanCell,
    vanCellGroup,
    vanPopover,
  },
};
</script>

<style scoped>
.tv-list {
  background-color: #fff;
  padding: 5px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.bottom {
  border: 4px solid #0983a8;
  background-color: #cdcdcd;
  margin-top: 1em;
  padding: 10px;
  font-size: 0.85rem;
  padding-left: 5px;
  font-weight: 600;
  overflow: hidden;
}
.td {
  text-align: center;
  line-height: 2.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.td2 {
  line-height: 1.5em;
  white-space: initial;
}
.item {
  overflow: hidden;
  border-radius: 3px;
  margin-top: 11px;
  background-color: #f5f6f8;
}
.itemHead {
  margin-top: 0;
  background-color: #f5f6f8;
}
.main {
  padding: 0.5em;
}
.content {
  margin: 0 auto;
  max-width: 667px;
}
.rise {
  /* 上升 */
  transform: rotate(180deg);
}
.titleTop {
  padding: 1em 0;
  font-weight: 600;
  background-image: linear-gradient(to right, #014392, #008fc4, #00428c);
  color: #fff;
  text-align: center;
}
</style>
<style>
.van-cell-group__title {
  font-size: 1.1rem;
  padding-left: 8px;
  color: #000;
  font-weight: 600;
}
</style>