big_data_ott/src/views/UnionList/index.vue

<template>
  <div class="Version">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <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-date-picker
            v-model="form.date"
            type="daterange"
            :disabled-date="time => disabledDate(time)"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="应用">
          <el-select v-model="form.app" placeholder="请选择时段">
            <el-option
              v-for="item in cycle"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <div style="text-align: right">
        <el-button
          size="small"
          style="margin-left: 0.5em"
          type="primary"
          @click="onExport"
        >
          导出
        </el-button>
      </div>
      <br />
      <br />
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="单日分析" name="first">
          <el-table
            :data="table.dt || []"
            style="width: 100%"
            :header-cell-style="{
              backgroundColor: '#f4f5f7',
              color: '#606266'
            }"
          >
            <el-table-column
              prop="dtf"
              header-align="center"
              align="center"
              label="日期"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span v-text="scope.row.dtf || '-'"></span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="pv"
              label="PV"
              header-align="center"
              align="center"
            >
              <template #default="scope">
                <countTo
                  :startVal="(scope.row.uv || 0) * 0.8"
                  :endVal="scope.row.uv || 0"
                ></countTo>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="uv"
              label="UV"
              header-align="center"
              align="center"
            >
              <template #default="scope">
                <countTo
                  :startVal="(scope.row.uv || 0) * 0.8"
                  :endVal="scope.row.uv || 0"
                ></countTo>
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              header-align="center"
              align="center"
              label="当日访问最高稿件标题"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="cpv"
              label="稿件浏览量"
              header-align="center"
              align="center"
            >
              <template #default="scope">
                <countTo
                  :startVal="(scope.row.cpv || 0) * 0.8"
                  :endVal="scope.row.cpv || 0"
                ></countTo>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="整月分析" name="second">
          <el-row :gutter="10">
            <el-col :span="span">
              <el-table
                :data="table.all"
                style="width: 100%"
                :header-cell-style="{
                  backgroundColor: '#f4f5f7',
                  color: '#606266'
                }"
              >
                <el-table-column
                  prop="title"
                  header-align="center"
                  align="center"
                  label="当日访问最高稿件标题"
                  show-overflow-tooltip
                  :cell-style="{}"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="cpv"
                  label="浏览量"
                  header-align="center"
                  align="center"
                  :cell-style="{}"
                >
                  <template #default="scope">
                    <countTo
                      :startVal="(scope.row.cpv || 0) * 0.8"
                      :endVal="scope.row.cpv || 0"
                    ></countTo>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="span">
              <el-table
                :data="table.web"
                style="width: 100%"
                :header-cell-style="{
                  backgroundColor: '#f4f5f7',
                  color: '#606266'
                }"
              >
                <el-table-column
                  prop="title"
                  header-align="center"
                  align="center"
                  label="当日访问最高稿件标题"
                  show-overflow-tooltip
                  :cell-style="{}"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="cpv"
                  label="浏览量"
                  header-align="center"
                  align="center"
                  :cell-style="{}"
                >
                  <template #default="scope">
                    <countTo
                      :startVal="(scope.row.cpv || 0) * 0.8"
                      :endVal="scope.row.cpv || 0"
                    ></countTo>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="span">
              <el-table
                :data="table.client"
                style="width: 100%"
                :header-cell-style="{
                  backgroundColor: '#f4f5f7',
                  color: '#606266'
                }"
              >
                <el-table-column
                  prop="title"
                  header-align="center"
                  align="center"
                  label="当日访问最高稿件标题"
                  show-overflow-tooltip
                  :cell-style="{}"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="cpv"
                  label="浏览量"
                  header-align="center"
                  align="center"
                  :cell-style="{}"
                >
                  <template #default="scope">
                    <countTo
                      :startVal="(scope.row.cpv || 0) * 0.8"
                      :endVal="scope.row.cpv || 0"
                    ></countTo>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
// @ is an alias to /src

import { getAppList, getUnionList, getRule } from '@/api/index';

import countTo from '@/components/counto/vue-countTo.vue';
import { defaultAppNameFunc } from '@/utils/tool.js';

// import config from "@/config/index";
export default {
  name: 'Version',
  data() {
    return {
      lastParams: {},
      activeName: 'first',
      span: 8,
      table: {},
      form: {
        app: '',
        date: []
      },
      cycle: [],
      showList: []
    };
  },
  mounted() {
    //   应用列表
    const roleid =
      JSON.parse(window.parent.localStorage.userinfo || '{}').roleid || '9999';
    getRule({
      db: 'authplat',
      exportMark: '0',
      menuid: 399,
      roleid
    }).then(res => {
      const data =
        res && res.output && res.output.data
          ? res.output.data.prvRolectrl || []
          : [];
      const source = { length: 0 };
      for (let i = 0; i < data.length; i++) {
        const v = data[i];
        if (v.controlid == 'RMT_SOURCE') {
          source[v.detid] = true;
          source.length = source.length + 1;
        }
      }
      getAppList({
        exportMark: '0',
        gcode: 'SOURCE',
        pageid: 1,
        pagesize: 1000
      }).then(r => {
        if (r && r.output && r.output.data.length > 0) {
          this.cycle = this.verifyList(
            r.output.data,
            source,
            {
              value: 'mname',
              label: 'mname'
            },
            false
          );

          this.form = {
            app: defaultAppNameFunc(this.cycle),
            date: [
              new Date(Date.now() - 604800000),
              new Date(Date.now() - 86400000)
            ]
          };
          //   this.onSubmit();
        }
      });
    });
  },
  computed: {},
  methods: {
    verifyList(list, verify, obj, more) {
      if (!obj) return;
      let li = list || [];
      const out = [];
      more && out.push({ value: -1, label: '不限' });
      for (let i = 0; i < li.length; i++) {
        const v = li[i];
        if (verify.length !== 0 && !verify[v.mcode]) continue;
        out.push({
          value: v[obj.value],
          label: v[obj.label]
        });
      }

      return out;
    },
    onSubmit() {
      this.lastParams = {
        app: this.form.app,
        start: this.FormData(this.form.date[0]),
        end: this.FormData(this.form.date[1])
      };

      getUnionList(this.lastParams).then(resChart => {
        this.table = resChart;
        let n = 0;
        this.table.all && this.table.all.length && n++;
        this.table.web && this.table.web.length && n++;
        this.table.client && this.table.client.length && n++;
        this.span = 24/(n || 1);
      });
    },
    disabledDate(time) {
      const first = new Date('2021-06-21 00:00:00');
      return (
        time.getTime() > Date.now() - 86400000 ||
        time.getTime() < first.getTime()
      );
    },
    FormData(date) {
      const d = new Date(date || Date.now() - 86400000);
      const year = d.getFullYear();
      const month =
        d.getMonth() <= 8 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1;
      const day = d.getDate() <= 9 ? '0' + d.getDate() : d.getDate();
      return [year, month, day].join('-');
    },
    onExport() {
      window.open = `http://172.16.101.20:8762/cxzx-program/union/export?start=${this.lastParams.start}&end=${this.lastParams.end}&app=${this.lastParams.app}`
    }
  },
  components: {
    countTo
  }
};
</script>

<style>
.Version {
  margin: 10px 15px;
}
.libTitle {
  color: tomato;
  font-weight: 700;
  font-size: 14px;
}
.btn-next i,
.btn-prev i {
  margin: 0 auto;
}
.caret-wrapper .ascending {
  display: none;
}
</style>