big_data_ott/src/views/History/index.vue

<template>
  <div class="RealOnline">
    <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-date-picker
            v-if="form.date.length"
            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="请选择时段"
            @change="change"
          >
            <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 label="版本">
          <el-select
            multiple
            collapse-tags
            clearable
            v-model="form.version"
            placeholder="请选择版本"
            @change="changeversion"
          >
            <el-option
              v-for="item in version"
              :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
            multiple
            collapse-tags
            clearable
            v-model="form.channel"
            @change="changechannel"
            placeholder="请选择渠道"
          >
            <el-option
              v-for="item in channel"
              :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-button type="primary" @click="onExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <div class="head" v-if="oriData.total">
        <div
          class="head-item"
          @click="
            () => type !== 'activeUser' && changeData('activeUser', '活跃用户')
          "
          :style="{
            borderTopColor: type === 'activeUser' ? '#396fff' : '#fff',
          }"
        >
          <div>活跃用户</div>
          <div class="value">
            <!-- oriData.total.activeUser -->
            <countTo
              :startVal="0"
              :endVal="oriData.total.activeUser"
              :duration="1500"
            ></countTo>
          </div>
        </div>
        <div
          class="head-item"
          @click="() => type !== 'newUser' && changeData('newUser', '新增用户')"
          :style="{ borderTopColor: type === 'newUser' ? '#396fff' : '#fff' }"
        >
          <div>新增用户</div>
          <div class="value">
            <countTo
              :startVal="0"
              :endVal="oriData.total.newUser"
              :duration="1500"
            ></countTo>
          </div>
        </div>
        <div
          class="head-item"
          @click="
            () => type !== 'totalUser' && changeData('totalUser', '累计用户')
          "
          :style="{ borderTopColor: type === 'totalUser' ? '#396fff' : '#fff' }"
        >
          <div>累计用户</div>
          <div class="value">
            <countTo
              :startVal="0"
              :endVal="oriData.total.totalUser"
              :duration="1500"
            ></countTo>
          </div>
        </div>
        <div
          class="head-item"
          @click="
            () => type !== 'duration' && changeData('duration', '人均使用时长')
          "
          :style="{ borderTopColor: type === 'duration' ? '#396fff' : '#fff' }"
        >
          <div>人均使用时长</div>
          <div class="value">
            {{ timeFormat(oriData.total.duration) }}
          </div>
        </div>
      </div>

      <div class="realLineChart" ref="realLineChart"></div>
      <el-table
        v-if="this.oriData && this.oriData.list && this.oriData.list.length"
        :data="showList"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
      >
        <el-table-column prop="dt" label="日期" />
        <el-table-column prop="activeUser" label="活跃用户">
          <template #default="scope">
            <countTo
              :startVal="scope.row.activeUser"
              :endVal="scope.row.activeUser"
              :duration="100"
            ></countTo>
          </template>
        </el-table-column>
        <el-table-column prop="newUser" label="新增用户">
          <template #default="scope">
            <countTo
              :startVal="scope.row.newUser"
              :endVal="scope.row.newUser"
              :duration="100"
            ></countTo>
          </template>
        </el-table-column>
        <el-table-column prop="totalUser" label="累计用户">
          <template #default="scope">
            <countTo
              :startVal="scope.row.totalUser"
              :endVal="scope.row.totalUser"
              :duration="100"
            ></countTo>
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="人均使用时长">
          <template #default="scope">
            {{ timeFormat(scope.row.duration) }}
          </template>
        </el-table-column>
      </el-table>
      <div v-if="oriData.list && oriData.list.length">
        <el-pagination
          v-if="Math.ceil(oriData.list.length / 10) > 1"
          :current-page="page"
          layout="prev, pager, next"
          :total="oriData.list.length"
          @current-change="pagechange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
// @ is an alias to /src
import { getRule, getAppList, getHistory, getSearchData } from "@/api/index";

import countTo from "@/components/counto/vue-countTo.vue";

import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  ToolboxComponent,
]);

// import config from "@/config/index";
let chart = undefined;
export default {
  name: "RealOnline",
  data() {
    return {
      type: "activeUser",
      lastParams: {},
      page: 1,
      form: {
        app: "",
        version: [],
        channel: [],
        date: [],
      },
      cycle: [],
      oriData: {},
      showList: [],
      version: [],
      channel: [],
    };
  },
  async mounted() {
    if (chart && chart.dispose) chart.dispose();
    const { source, appV, appC, appli, appCLi, appVLi } =
      await this.getAppListFunc();
    const keys = {
      value: "mname",
      label: "mname",
    };
    this.cycle = this.verifyList(appli, source, keys, false);
    this.channel = this.verifyList(appCLi, appC, keys, true);
    this.version = this.verifyList(appVLi, appV, keys, true);
    this.form = {
      app: (this.cycle[0] || { value: "" }).value,
      version: [(this.version[0] || { value: "" }).value],
      channel: [(this.channel[0] || { value: "" }).value],
      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;
    },
    pagechange(p) {
      this.page = p;
      this.pushShowList();
    },
    pushShowList() {
      let s = this.page - 1 < 0 ? 0 : (this.page - 1) * 10;
      let e = this.page * 10;
      let li = JSON.parse(JSON.stringify(this.oriData.list || []));
      let out = [];
      li = li.reverse();
      for (let i = s; i < e; i++) {
        li[i] && out.push(li[i]);
      }
      this.showList = out;
    },
    onSubmit() {
      this.lastParams = {
        app: this.form.app,
        start: this.FormData(this.form.date[0]),
        end: this.FormData(this.form.date[1]),
        manufacturer: this.form.channel == -1 ? undefined : this.form.channel,
        version: this.form.version == -1 ? undefined : this.form.version,
      };
      getHistory(this.lastParams)
        .then(r => {
          if (!this.$refs.realLineChart) return;
          this.oriData = r || {};
          this.changeData("activeUser", "活跃用户");
          chart.hideLoading();
          this.page = 1;
          this.pushShowList();
        })
        .catch(() => {
          this.oriData = {};
          this.pushShowList();
          chart && chart.clear() && chart.hideLoading();
        });
    },
    changeData(type, title) {
      this.type = type;
      const keyList = [],
        valueList = [];
      (this.oriData.list || []).map(v => {
        keyList.push(v.dt);
        valueList.push(v[this.type]);
      });
      chart && chart.clear();
      this.createImage(keyList, valueList, title);
    },
    createImage(keyList, valueList, title) {
      !chart && (chart = echarts.init(this.$refs.realLineChart));
      chart.resize({
        height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
      });
      const _this = this;
      chart.setOption({
        tooltip: {
          trigger: "axis",
          formatter(v) {
            const item = v[0] || {};
            let val = item.data || 0;
            if (_this.type === "duration") val = _this.timeFormat(val);
            return item.axisValue + "<br />" + title + "：" + val;
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {
              type: "jpg",
              name: "趋势",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: keyList,
        },
        yAxis: {
          type: "value",
          scale: true,
          minInterval: 1,
          axisLabel: {
            formatter(v) {
              let val = v;
              if (_this.type === "duration") val = _this.timeFormat(val);
              else {
                if (val >= 100000000) {
                  val = (val / 100000000).toFixed(2) + "亿";
                } else if (val >= 10000) {
                  val = (val / 10000).toFixed(2) + "万";
                }
              }
              return val;
            },
          },
        },
        series: [
          {
            data: valueList,
            symbolSize: 0,
            lineStyle: {
              width: 1,
            },
            type: "line",
            smooth: true,
            color: "rgba(58,132,255,.9)",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(58,132,255, 0.8)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,132,255, 0.1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      });
    },
    async getAppListFunc() {
      const { r, li, appVersion, channel } = await this.getAppListOri();
      let source = { length: 0 },
        appli = [];
      let appV = { length: 0 },
        appVLi = [];
      let appC = { length: 0 },
        appCLi = [];
      let prvList = r.output.data.prvRolectrl || [];
      for (let i = 0; i < prvList.length; i++) {
        const v = prvList[i];
        if (v.controlid == "RMT_SOURCE")
          (source[v.detid] = true), (source.length = source.length + 1);
        if (v.controlid == "APP_VERSION")
          (appV[v.detid] = true), (appV.length = appV.length + 1);
        if (v.controlid == "CHANNEL")
          (appC[v.detid] = true), (appC.length = appC.length + 1);
      }
      if (li.status === "0") appli = li.output.data || [];
      if (appVersion.length) appVLi = appVersion || [];
      if (channel.length) appCLi = channel || [];
      return {
        source,
        appV,
        appC,
        appli,
        appVLi,
        appCLi,
      };
    },
    async getAppListOri() {
      const roleid = JSON.parse(
        window.parent.localStorage.userinfo || "{}"
      ).roleid;
      const r = await getRule({
        db: "authplat",
        exportMark: "0",
        menuid: 399,
        roleid,
      });
      //   应用列表
      const li = await getAppList({
        exportMark: "0",
        gcode: "SOURCE",
        pageid: 1,
        pagesize: 1000,
      });
      const defaultAppName = li.status == "0" ? li.output.data[0].mname : "";
      //   应用版本列表
      const appVersion = await getSearchData({
        gcode: "APP_VERSION",
        source: defaultAppName,
      });
      //   应用渠道列表
      const channel = await getSearchData({
        gcode: "CHANNEL",
        source: defaultAppName,
      });
      return { r, li, appVersion, channel };
    },
    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("-");
    },
    timeFormat(t) {
      const Time = t || 0;
      const mH = Time % 3600;
      let hour = (Time - mH) / 3600;
      let min = (mH - (mH % 60)) / 60;
      let son = Number(mH % 60).toFixed(0);
      hour = hour <= 9 ? "0" + hour : hour;
      min = min <= 9 ? "0" + min : min;
      son = son <= 9 ? "0" + son : son;
      let out = [];
      if (hour * 1 > 0) out.push(hour);
      out.push(...[min, son]);
      return out.join(":");
    },
    change() {
      const roleid = JSON.parse(
        window.parent.localStorage.userinfo || "{}"
      ).roleid;
      const appV = {
        length: 0,
      };
      getRule({
        db: "authplat",
        exportMark: "0",
        menuid: 399,
        roleid,
      }).then(rule => {
        let prvList = rule.output.data.prvRolectrl || [];
        for (let i = 0; i < prvList.length; i++) {
          const v = prvList[i];
          if (v.controlid == "APP_VERSION")
            (appV[v.detid] = true), (appV.length = appV.length + 1);
        }
        getSearchData({
          gcode: "APP_VERSION",
          source: this.form.app,
        }).then(r => {
          let version = [
            {
              label: "不限",
              value: -1,
            },
          ];
          r.map(v => {
            if ((appV.length && appV[v.mcode]) || appV.length === 0)
              version.push({
                value: v.mname,
                label: v.mname,
              });
          });
          this.version = version;
          this.form = {
            ...this.form,
            version: [-1],
          };
        });
      });
    },
    changeversion(v) {
      if (!v.length) return (this.form.version = [-1]);
      const last = v[v.length - 1];
      if (last == -1) return (this.form.version = [-1]);
      let ver = [];
      for (let i = 0; i < v.length; i++) {
        const element = v[i];
        if (element == -1) continue;
        ver.push(element);
      }
      this.form.version = ver;
    },
    changechannel(v) {
      if (!v.length) return (this.form.channel = [-1]);
      const last = v[v.length - 1];
      if (last == -1) return (this.form.channel = [-1]);
      let ver = [];
      for (let i = 0; i < v.length; i++) {
        const element = v[i];
        if (element == -1) continue;
        ver.push(element);
      }
      this.form.channel = ver;
    },
    onExport() {
      const S = this.form.date[0]
        ? this.FormData(this.form.date[0])
        : undefined;
      const E = this.form.date[1]
        ? this.FormData(this.form.date[1])
        : undefined;
      let p = this.lastParams.app
        ? this.lastParams
        : {
            app: this.form.app,
            start: S,
            end: E,
            manufacturer:
              this.form.channel == -1 ? undefined : this.form.channel,
            version: this.form.version == -1 ? undefined : this.form.version,
          };
      getHistory(p).then(r => {
        // 生成数据
        let strcsv =
          "data:text/csv;charset=utf-8,日期,活跃用户,新增用户,累计用户,人均使用时长\r\n";
        (r.list || []).map(v => {
          strcsv += [
            v.dt,
            v.activeUser,
            v.newUser,
            v.totalUser,
            v.duration,
            "\r\n",
          ].join(",");
        });
        // 导出
        let link = document.createElement("a");
        link.id = "download-csv";
        link.setAttribute("href", encodeURI(strcsv));
        link.setAttribute(
          "download",
          p.app + "用户趋势" + S + "_" + E + ".csv"
        );
        // document.body.appendChild(link);
        link.click();
      });
    },
  },
  components: {
    countTo,
  },
};
</script>

<style>
.RealOnline {
  margin: 10px 15px;
}
.RealOnline .has-seconds .el-time-spinner__wrapper:last-child {
  display: none;
}
.head {
  display: flex;
  font-weight: 500;
}
.head .head-item {
  flex: 1;
  text-align: center;
  font-size: 0.8em;
  border-top: 3px solid #fff;
  padding-top: 10px;
}
.head .value {
  margin: 15px 0;
  color: #396fff;
  font-size: 25px;
}
</style>