big_data_ott/src/views/LiveChannel.vue

<template>
  <div class="program">
    <el-page-header :content="row.tv_name" @back="goBack" />
    <br />
    <el-tabs type="card" v-model="tabs">
      <el-tab-pane name="0" label="实时信息">
        <el-button-group>
          <el-button
            v-if="tab !== '2h'"
            size="mini"
            @click="() => tabBtn('2h')"
          >
            最近2h
          </el-button>
          <el-button
            v-if="tab === '2h'"
            color="#1989fa"
            type="primary"
            size="mini"
          >
            最近2h
          </el-button>
          <el-button
            v-if="tab !== '1min'"
            size="mini"
            @click="() => tabBtn('1min')"
          >
            最近1min
          </el-button>
          <el-button
            v-if="tab === '1min'"
            color="#1989fa"
            type="primary"
            size="mini"
          >
            最近1min
          </el-button>
        </el-button-group>
        <el-button
          style="float: right;margin-left: 1em"
          type="primary"
          size="small"
          @click="getlist"
        >
          查询
        </el-button>
        <el-select
          v-model="channel"
          placeholder="请选择频道"
          size="small"
          multiple
          style="float: right;"
          collapse-tags
          @change="channelSelect"
        >
          <el-option label="全部" value="all"> </el-option>
          <el-option
            v-for="item in channelNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
        <real-line-chart
          v-if="lineChart.length"
          :list="lineChart"
          :tab="tab"
          :channelId="[row.id, ...channel]"
          ref="chart"
        ></real-line-chart>
      </el-tab-pane>
      <el-tab-pane name="1" label="流入流出">
        <in-out
          v-if="tabs === '1' && inOut.length"
          :list="inOut"
          :chatList="inOutList"
        >
        </in-out>
      </el-tab-pane>
      <el-tab-pane name="2" v-if="epg.length" label="EPG信息">
        <el-table align="center" :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }" :data="epg" style="width: 100%">
          <el-table-column prop="epg_name" label="今日历史节目" />
          <el-table-column prop="pv" label="播出时间" :formatter="liveTime" />
          <el-table-column
            prop="tv_ratings"
            :formatter="matrerLive"
            label="收视率"
            width="180"
          />
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="3" v-if="advertisement.length" label="广告表现">
        <el-table :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }" :data="advertisement" style="width: 100%">
          <el-table-column align="center" prop="brand" label="品牌名称" />
          <el-table-column align="center" prop="pv" label="频次" />
          <el-table-column
            align="center"
            prop="grp"
            :formatter="matrer"
            label="GRP"
            width="180"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// @ is an alias to /src

import realLineChart from "@/components/realLineChart.vue";
import inOut from "@/components/inOut.vue";
import config from "@/config/index";

import {
  liveRealDataApi,
  liveRealDataMinApi,
  advertisementApi,
  epgApi,
  inOutApi,
} from "@/api/index.js";
let Interval = undefined;
let params = {};
export default {
  name: "LiveChannel",
  data() {
    return {
      tab: "2h",
      row: {},
      lineChart: [],
      channel: [],
      advertisement: [],
      epg: [],
      inOut: [],
      inOutList: [],
      tabs: "0",
    };
  },
  mounted() {
    this.row = JSON.parse(this.$route.query.row || "{}");
    const t = this.dateFormat();
    params = {
      tab: this.tab,
      channel: JSON.parse(JSON.stringify(this.channel)),
    };
    this.hourTime();

    advertisementApi({
      tv_id: this.row.id,
      day: [t.year, t.month, t.day].join("-"),
    })
      .then(r => {
        this.advertisement = r || [];
      })
      .catch(() => {
        this.advertisement = [];
      });
    epgApi({ tv_id: this.row.id })
      .then(r => {
        this.epg = r || [];
      })
      .catch(() => {
        this.epg = [];
      });
    inOutApi({
      tv_id: this.row.id,
      area_id: this.row.area_id,
    })
      .then(r => {
        this.inOut = r.high_low || [];
        this.inOutList = r.list || [];
      })
      .catch(() => {
        this.inOut = [];
        this.inOutList = [];
      });
  },
  computed: {
    channelNameList() {
      let li = [];
      for (let i = 0; i < config.channelNameList.length; i++) {
        const v = config.channelNameList[i];
        if (v.value === this.row.id) continue;
        li.push(v);
      }
      return li;
    },
  },
  methods: {
    liveTime(row) {
      let s = (row.end_time || "").split(" ")[1] || "",
        e = (row.end_time || "").split(" ")[1] || "";
      return s + "~" + e;
    },
    matrer(row, column, cellValue) {
      return cellValue.toFixed(4) + "%";
    },
    matrerLive(row, column, cellValue) {
      return (cellValue *100).toFixed(4) + "%";
    },
    dateFormat(date) {
      let D = date ? new Date(date) : new Date();
      let m = D.getMonth() + 1;
      let d = D.getDate();
      let h = D.getHours();
      let M = D.getMinutes();
      let s = D.getSeconds();
      m > 9 ? m : (m = "0" + m);
      d > 9 ? d : (d = "0" + d);
      h > 9 ? h : (h = "0" + h);
      M > 9 ? M : (M = "0" + M);
      s > 9 ? s : (s = "0" + s);
      return {
        year: D.getFullYear(),
        month: m,
        day: d,
        hour: h,
        minutes: M,
        seconds: s,
      };
    },
    getlist() {
      if (Interval) clearInterval(Interval);
      params = {
        tab: this.tab,
        channel: JSON.parse(JSON.stringify(this.channel)),
      };
      this.tab === "2h" ? this.hourTime() : this.realTime();
    },
    time() {
      if (!params.channel.length || params.tab === "2h") return "";
      const t = this.dateFormat();
      return t.year + t.month + t.day + t.hour + t.minutes + t.seconds;
      //   return "20210928171007";
    },
    channelSelect(a) {
      let select = a[a.length - 1];
      if (a[0] === "all") a.shift();
      if (select === "all") this.channel = ["all"];
      else this.channel = a;
    },
    tabBtn(type) {
      this.tab = type;
      if (Interval) clearInterval(Interval);
      type === "2h" ? this.hourTime() : this.realTime();
      params = {
        tab: this.tab,
        channel: JSON.parse(JSON.stringify(this.channel)),
      };
    },
    hourTime() {
      if (Interval) clearInterval(Interval);
      liveRealDataApi({
        tv_id: this.row.id,
        area: this.row.area_id,
        sd: '20231016',
        t: 2,
        vs: (params.channel.join(",") + ",")
          .replace(this.row.id + ",", "")
          .replace(/,$/, "")
          .split(","),
        // t: this.time(),
      }).then(r => {
        if (r.vs && r.vs.length) this.lineChart = [r.list, ...r.vs] || [];
        else this.lineChart = [r.list] || [];
        this.$refs.chart && this.$refs.chart.updata(this.lineChart);
      });
      Interval = setInterval(() => {
        liveRealDataApi({
          tv_id: this.row.id,
          area_id: this.row.area_id,
          vs: (params.channel.join(",") + ",")
            .replace(this.row.id + ",", "")
            .replace(/,$/, "")
            .split(","),
          // t: this.time(),
        }).then(r => {
          if (r.vs && r.vs.length) this.lineChart = [r.list, ...r.vs] || [];
          else this.lineChart = [r.list] || [];
          this.$refs.chart && this.$refs.chart.updata(this.lineChart);
        });
      }, 60000);
    },
    realTime() {
      if (Interval) clearInterval(Interval);
      liveRealDataMinApi({
        tv_id: this.row.id,
        area_id: this.row.area_id,
        vs: (params.channel.join(",") + ",")
          .replace(this.row.id + ",", "")
          .replace(/,$/, "")
          .split(","),
        //   t: this.time(),
      }).then(r => {
        if (r.vs && r.vs.length) this.lineChart = [r.list, ...r.vs] || [];
        else this.lineChart = [r.list] || [];
        this.$refs.chart.updata(this.lineChart);
      });
      Interval = setInterval(() => {
        liveRealDataMinApi({
          tv_id: this.row.id,
          area_id: this.row.area_id,
          vs: (params.channel.join(",") + ",")
            .replace(this.row.id + ",", "")
            .replace(/,$/, "")
            .split(","),
          //   t: this.time(),
        }).then(r => {
          if (r.vs && r.vs.length) this.lineChart = [r.list, ...r.vs] || [];
          else this.lineChart = [r.list] || [];
          this.$refs.chart.updata(this.lineChart);
        });
      }, 1000);
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  beforeUnmount: function() {
    if(Interval) clearInterval(Interval);
  },
  components: { realLineChart, inOut },
};
</script>

<style></style>