yos_web/src/WebsiteManagement/dataStatistics/index.vue

<template>
  <div class="container">
    <visitorStatistics />

    <div class="card">
      <cord-top title="访客趋势分析" @returnWhere="getVisitorTrend" />
      <div ref="visitorTrend" style="margin-top: 20px"></div>
    </div>
    <div class="card">
      <cord-top title="访问量趋势分析" @returnWhere="getPageViewTrend" />
      <div ref="pageViewTrend" style="margin-top: 20px"></div>
    </div>

    <div class="card">
      <cord-top title="用户类型分析" @returnWhere="getUserTypeAnalysis" />
      <div ref="userTypeAnalysis" style="margin-top: 20px"></div>
    </div>

    <div class="card">
      <cord-top
        title="各模块点击量分析"
        @returnWhere="getModuleClicksAnalysis"
      />
      <div class="module-clicks">
        <div
          class="pie-chart"
          ref="moduleClicksAnalysis"
          style="margin-top: 20px"
        ></div>

        <el-table :data="moduleClicksAnalysisTable" border style="width: 100%">
          <el-table-column prop="module" :label="$t('模块名称')">
          </el-table-column>
          <el-table-column prop="clickcount" :label="$t('当前时段模块点击量')">
          </el-table-column>
          <el-table-column prop="sumclickcount" :label="$t('模块总点击量')">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="card">
      <rankingList />
    </div>

    <div class="card">
      <cord-top title="留言分析" @returnWhere="getMessageAnalysis" />
      <div ref="messageAnalysis" style="margin-top: 20px"></div>
    </div>

    <statisticalAnalysisOfMessage />

    <div class="card">
      <cord-top title="服务申请分析" @returnWhere="getServiceRequestAnalysis" />
      <div ref="serviceRequestAnalysis" style="margin-top: 20px"></div>
    </div>
  </div>
</template>

<script>
import cordTop from "./modules/header.vue";
import visitorStatistics from "./modules/visitorStatistics";
import rankingList from "./modules/rankingList";
import statisticalAnalysisOfMessage from "./modules/statisticalAnalysisOfMessage";
import { Line, Column, Pie } from "@antv/g2plot";

export default {
  components: {
    visitorStatistics,
    cordTop,
    rankingList,
    statisticalAnalysisOfMessage,
  },
  data() {
    return {
      visitorTrend: null, //访客趋势
      pageViewTrend: null, //访问量趋势
      userTypeAnalysis: null, //用户类型分析
      moduleClicksAnalysis: null, //各模块点击量分析
      moduleClicksAnalysisTable: null, //各模块点击量分析表格
      messageAnalysis: null, //留言分析
      serviceRequestAnalysis: null, //服务申请分析
      siteid: "", //站点id
    };
  },
  created() {
    this.siteid = JSON.parse(sessionStorage.getItem("active_account")).siteid;
    // 获取访客趋势
    this.getVisitorTrend();
    // 获取访问量趋势
    this.getPageViewTrend();
    // 获取用户类型分析
    this.getUserTypeAnalysis();
    // 获取各模块点击量分析
    this.getModuleClicksAnalysis();
    // 获取留言分析
    this.getMessageAnalysis();
    // 获取服务申请分析
    this.getServiceRequestAnalysis();
  },
  methods: {
    // 获取访客趋势
    getVisitorTrend(detail) {
      let content = {
        nocache: true,
        siteid: this.siteid,
        type: "近七日",
        datatype: "访客",
      };
      if (detail) {
        if (detail.type) {
          content.type = detail.type;
        } else {
          content.type = "";
          content.where = detail;
        }
      }
      this.$api
        .requested({
          id: 2025010214275903,
          content,
        })
        .then((res) => {
          if (res.code != 1) return;
          let type = this.$t("访客数量");
          let list = res.data.map((v) => {
            v.type = type;
            return v;
          });
          if (detail) {
            this.visitorTrend.update({
              scrollbar: list.length > 14 ? { type: "horizontal" } : null,
            });
            this.visitorTrend.changeData(list);
          } else {
            this.visitorTrend = new Line(this.$refs.visitorTrend, {
              height: 300,
              data: list,
              xField: "date",
              seriesField: "type",
              yField: "count",
              color: "#5588F7",
              tooltip: {
                formatter: (datum) => {
                  return {
                    name: type,
                    value: datum.count,
                  };
                },
              },
              point: {
                shape: "breath-point",
              },
            });
            this.visitorTrend.render();
          }
        });
    },
    // 获取访问量趋势
    getPageViewTrend(detail) {
      let content = {
        nocache: true,
        siteid: this.siteid,
        type: "近七日",
        datatype: "访问量",
      };
      if (detail) {
        if (detail.type) {
          content.type = detail.type;
        } else {
          content.type = "";
          content.where = detail;
        }
      }
      this.$api
        .requested({
          id: 2025010214275903,
          content,
        })
        .then((res) => {
          if (res.code != 1) return;
          let type = this.$t("访问量");
          let list = res.data.map((v) => {
            v.type = type;
            return v;
          });
          if (detail) {
            this.pageViewTrend.update({
              scrollbar: list.length > 14 ? { type: "horizontal" } : null,
            });
            this.pageViewTrend.changeData(list);
          } else {
            this.pageViewTrend = new Line(this.$refs.pageViewTrend, {
              height: 300,
              data: list,
              xField: "date",
              yField: "count",
              color: "#F29C37",
              seriesField: "type",
              tooltip: {
                formatter: (datum) => {
                  return { name: type, value: datum.count };
                },
              },
              point: {
                shape: "breath-point",
              },
            });
            this.pageViewTrend.render();
          }
        });
    },
    // 获取各模块点击量分析
    getModuleClicksAnalysis(detail) {
      let content = {
        siteid: this.siteid,
        nocache: true,
        type: "近七日",
      };
      if (detail) {
        if (detail.type) {
          content.type = detail.type;
        } else {
          content.type = "";
          content.where = detail;
        }
      }
      this.$api
        .requested({
          id: 2025010309594403,
          content,
        })
        .then((res) => {
          if (res.code != 1) return;
          let list = res.data.map((v) => {
            v.module = this.$t(v.module);
            return v;
          });
          this.moduleClicksAnalysisTable = list;
          if (detail) {
            this.moduleClicksAnalysis.changeData(list);
          } else {
            this.moduleClicksAnalysis = new Pie(
              this.$refs.moduleClicksAnalysis,
              {
                height: 400,
                appendPadding: 10,
                angleField: "clickcount",
                colorField: "module",
                radius: 1,
                innerRadius: 0.64,
                data: list,
                label: {
                  type: "inner",
                  offset: "-50%",
                  autoRotate: false,
                  style: { textAlign: "center" },
                  formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
                },
                statistic: {
                  title: {
                    offsetY: -8,
                    customHtml: (container, view, datum) => {
                      const text = datum ? datum.module : this.$t("点击量总数");
                      return text;
                    },
                  },
                  content: {
                    offsetY: -4,
                  },
                },
                legend: {
                  layout: "horizontal",
                  position: "bottom",
                  flipPage: false,
                },
                // 添加 中心统计文本 交互
                interactions: [
                  { type: "element-selected" },
                  { type: "element-active" },
                  {
                    type: "pie-statistic-active",
                    cfg: {
                      start: [
                        {
                          trigger: "element:mouseenter",
                          action: "pie-statistic:change",
                        },
                        {
                          trigger: "legend-item:mouseenter",
                          action: "pie-statistic:change",
                        },
                      ],
                      end: [
                        {
                          trigger: "element:mouseleave",
                          action: "pie-statistic:reset",
                        },
                        {
                          trigger: "legend-item:mouseleave",
                          action: "pie-statistic:reset",
                        },
                      ],
                    },
                  },
                ],
              }
            );
            this.moduleClicksAnalysis.render();
          }
        });
    },
    // 获取用户类型分析
    getUserTypeAnalysis(detail) {
      let content = {
        nocache: true,
        siteid: this.siteid,
        type: "近七日",
      };
      if (detail) {
        if (detail.type) {
          content.type = detail.type;
        } else {
          content.type = "";
          content.where = detail;
        }
      }
      this.$api
        .requested({
          id: 2025010309354603,
          content,
        })
        .then((res) => {
          if (res.code != 1) return;
          let type = [this.$t("登录用户"), this.$t("游客")];
          let list = [];
          res.data.filter((v) => {
            list.push({
              date: v.date,
              count: v.logincount,
              type: type[0],
            });
            list.push({
              date: v.date,
              count: v.visitorcount,
              type: type[1],
            });
          });
          if (detail) {
            this.userTypeAnalysis.update({
              scrollbar: list.length > 28 ? { type: "horizontal" } : null,
            });
            this.userTypeAnalysis.changeData(list);
          } else {
            this.userTypeAnalysis = new Column(this.$refs.userTypeAnalysis, {
              height: 300,
              data: list,
              isGroup: true,
              xField: "date",
              yField: "count",
              color: ["#3874F6", "#F29C37"],
              seriesField: "type",
              label: {
                // 可手动配置 label 数据标签位置
                position: "top", // 'top', 'middle', 'bottom'
                // 可配置附加的布局方法
                layout: [
                  // 柱形图数据标签位置自动调整
                  { type: "interval-adjust-position" },
                  // 数据标签防遮挡
                  { type: "interval-hide-overlap" },
                  // 数据标签文颜色自动调整
                  { type: "adjust-color" },
                ],
              },
            });
            this.userTypeAnalysis.render();
          }
        });
    },
    // 获取留言分析
    getMessageAnalysis(detail) {
      let content = {
        nocache: true,
        siteid: this.siteid,
        type: "近七日",
      };
      if (detail) {
        if (detail.type) {
          content.type = detail.type;
        } else {
          content.type = "";
          content.where = detail;
        }
      }
      this.$api
        .requested({
          id: 2025010310381303,
          content,
        })
        .then((res) => {
          if (res.code != 1) return;
          let type = this.$t("留言量");
          let list = res.data.map((v) => {
            v.type = type;
            return v;
          });
          if (detail) {
            this.messageAnalysis.update({
              scrollbar: list.length > 14 ? { type: "horizontal" } : null,
            });
            this.messageAnalysis.changeData(list);
          } else {
            this.messageAnalysis = new Line(this.$refs.messageAnalysis, {
              height: 300,
              data: list,
              xField: "date",
              seriesField: "type",
              yField: "count",
              color: "#5588F7",
              tooltip: {
                formatter: (datum) => {
                  return {
                    name: type,
                    value: datum.count,
                  };
                },
              },
              point: {
                shape: "breath-point",
              },
            });
            this.messageAnalysis.render();
          }
        });
    },
    // 获取服务申请分析
    getServiceRequestAnalysis(detail) {
      let content = {
        nocache: true,
        siteid: this.siteid,
        type: "近七日",
      };
      if (detail) {
        if (detail.type) {
          content.type = detail.type;
        } else {
          content.type = "";
          content.where = detail;
        }
      }
      this.$api
        .requested({
          id: 2025010310402603,
          content,
        })
        .then((res) => {
          if (res.code != 1) return;
          let type = this.$t("申请量");
          let list = res.data.map((v) => {
            v.type = type;
            return v;
          });
          if (detail) {
            this.serviceRequestAnalysis.update({
              scrollbar: list.length > 14 ? { type: "horizontal" } : null,
            });
            this.serviceRequestAnalysis.changeData(list);
          } else {
            this.serviceRequestAnalysis = new Line(
              this.$refs.serviceRequestAnalysis,
              {
                height: 300,
                data: list,
                xField: "date",
                seriesField: "type",
                yField: "count",
                color: "#F29C37",
                tooltip: {
                  formatter: (datum) => {
                    return {
                      name: type,
                      value: datum.count,
                    };
                  },
                },
                point: {
                  shape: "breath-point",
                },
              }
            );
            this.serviceRequestAnalysis.render();
          }
        });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  box-sizing: border-box;
}
.card {
  width: 100%;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.module-clicks {
  display: flex;
  align-items: center;
}

.pie-chart {
  width: 450px;
}
</style>