queenstat/src/modules/count/control.ts

import { Dict_Apis } from "@/dict/apis";
import { reactive } from "vue";

export class MapCountCtrl {
  _originData = { areas: [] as any[] };

  tabs = [
    {
      label: "浏览量（PV）",
      value: "pv" as const,
    },
    {
      label: "访客量（UV）",
      value: "uv" as const,
    },
    {
      label: "IP数",
      value: "ip" as const,
    },
  ];

  state = reactive({
    total: {
      uv: 0,
      pv: 0,
      ip: 0,
    } as Record<string, number>,
    currType: "pv",
    currMapData: [] as any[],
  });

  init(id: string) {
    fetch(`${Dict_Apis.promotion}/count/${id}`).then((res) => {
      res.json().then((ret) => {
        if (ret.errorNo === 200) {
          this._originData.areas = ret.result.areas || [];
          const total = { uv: 0, pv: 0, ip: 0 };
          this._originData.areas.forEach((item) => {
            total.pv += item.PV;
            total.uv += item.UV.length;
            total.ip += item.IP.length;
          });
          this.state.total = total;
          this.state.currMapData = this.createMapData();
        }
      });
    });
  }

  createMapData() {
    const data: any[] = [];
    this._originData.areas.forEach((item) => {
      const itemNum: any = {
        pv: item.PV,
        uv: item.UV.length,
        ip: item.IP.length,
      };

      data.push({
        name: item.Province,
        value: itemNum[this.state.currType] || 0,
      });
    });
    return data;
  }

  switchStatType(type: string) {
    this.state.currType = type;
    this.state.currMapData = this.createMapData();
  }
}