big_data_ott/src/views/RealData.vue

<template>
  <div class="program">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
      <el-breadcrumb-item>智能电视</el-breadcrumb-item>
      <el-breadcrumb-item>实时数据</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form
        ref="form"
        :model="form"
        size="small"
        :inline="true"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-form-item label="频道组">
          <el-select
            v-model="form.channelGroup"
            placeholder="请选择频道组"
            @change="channelSelect"
          >
            <el-option
              v-for="item in channelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域">
          <el-select
            v-model="form.region"
            placeholder="请选择区域"
            @change="regionSelect"
          >
            <el-option-group
              v-for="group in region"
              :key="group.value"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <!-- <el-button type="primary" @click="onExport">导出</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <bilateral-bar-chart
        v-if="tableData.length"
        keyName="tv_name"
        :list="tableData"
      ></bilateral-bar-chart>
      <el-table :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }" :data="tableData" style="width: 100%" @row-click="clickRow">
        <el-table-column align="center" prop="" label="" width="30">
          <template #default>
            <div style="height: 1em;width:1em;">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1024 1024"
                data-v-066465b6=""
              >
                <path
                  fill="currentColor"
                  d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
                ></path>
              </svg>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" />
        <el-table-column align="center" prop="tv_name" label="频道" />
        <el-table-column align="center" prop="epg_name" label="节目" />
        <el-table-column
          align="center"
          prop="tv_ratings"
          :formatter="matrer"
          label="收视率"
          width="180"
        />
        <el-table-column
          align="center"
          prop="market_ratings"
          :formatter="matrer"
          label="市占率"
          width="180"
        />
      </el-table>
    </el-card>
  </div>
</template>

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

import { liveDataApi } from "@/api/index";

import bilateralBarChart from "@/components/bilateralBarChart";

import config from "@/config/index";
export default {
  name: "RealData",
  data() {
    return {
      form: {
        channelGroup: 0,
        region: -1,
      },
      tableData: [],
    };
  },
  mounted() {
    this.onSubmit();
  },
  computed: {
    channelList() {
      return config.channelList;
    },
    region() {
      return config.region;
    },
  },
  methods: {
    onExport() {
      //   channelcsv(this.formatListData());
    },
    disabledDate(time) {
      return time.getTime() > Date.now() - 86400000;
    },
    onSubmit() {
      liveDataApi(this.formatListData())
        .then(r => {
          this.tableData = r || [];
        })
        .catch(err => {
          this.tableData = [];
          console.log("===", err);
        });
    },
    matrer(row, column, cellValue) {
      return (cellValue * 100).toFixed(4) + "%";
    },
    dateFormat(date) {
      let D = new Date(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,
      };
    },
    formatListData() {
      return {
        tv_type: this.form.channelGroup || this.channelList[0].value,
        area_id: this.form.region || this.region[0].value,
      };
    },
    channelSelect(a) {
      this.selectAll(a, "channelGroup", 0);
    },
    regionSelect(a) {
      this.selectAll(a, "region", -1);
    },
    selectAll(a, key, val) {
      if (!a.length) return;
      let select = a[a.length - 1];
      if (select === val) this.form[key] = [val];
      else
        this.form[key] = a
          .join(",")
          .replace(val + ",", "")
          .split(",")
          .map(v => v * 1);
    },
    clickRow(row) {
      row.area_id = this.form.region;
      this.$router.push({
        path: "/liveChannel",
        query: { row: JSON.stringify(row) },
      });
    },
  },
  components: { bilateralBarChart },
};
</script>

<style>
</style>