big_data_ott/src/views/Heightlight.vue

<template>
  <div class="heightlight">
    <el-page-header v-if="dataAll.n" :content="dataAll.n" @back="goBack" />
    <br />
    <trend-line-chart
      v-if="dataAll.i"
      :list="dataAll.i || []"
    ></trend-line-chart>

    <el-table v-if="dataAll.i" :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }" :data="dataAll.i" style="width: 100%">
      <el-table-column align="center" width="180" prop="t" label="日期" />
      <el-table-column align="center" prop="n" label="名称" />
      <el-table-column
        align="center"
        prop="r"
        :formatter="matrer"
        label="收视率"
        width="180"
      />
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import trendLineChart from "@/components/trendLineChart.vue";

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

export default {
  name: "Heightlight",
  data() {
    return {
      dataAll: {},
    };
  },
  mounted() {
    heightlightDataApi({
      tv_id: this.$route.query.t,
      ca_id: this.$route.query.id,
    })
      .then(r => {
        this.dataAll = r || {};
      })
      .catch(() => {
        this.dataAll ={};
      });
  },
  computed: {},
  methods: {
    playTime(row) {
      return row.start_time.split(" ")[1] + "~" + row.end_time.split(" ")[1];
    },
    goBack() {
      this.$router.go(-1);
    },
    matrer(row, column, cellValue) {
      return (cellValue * 100).toFixed(4) + "%";
    },
    matrerTime(row, column, cellValue) {
      return cellValue.split(" ")[0];
    },
  },
  beforeUnmount: function() {},
  components: { trendLineChart },
};
</script>

<style>
.heightlight {
  padding: 1em;
  min-height: 100%;
}
</style>