|
@@ -0,0 +1,515 @@
|
|
|
+<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>
|
|
|
+
|
|
|
+ <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 { Line, Column, Pie } from "@antv/g2plot";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { visitorStatistics, cordTop, rankingList },
|
|
|
+ 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.visitorcount,
|
|
|
+ type: type[0],
|
|
|
+ });
|
|
|
+ list.push({
|
|
|
+ date: v.date,
|
|
|
+ count: v.logincount,
|
|
|
+ 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>
|