yos_web/src/WebsiteManagement/dataStatistics/index.vue

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

    <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 { Line } from "@antv/g2plot";

export default {
  components: { visitorStatistics, cordTop },
  data() {
    return {
      messageAnalysis: null, //留言分析
      serviceRequestAnalysis: null, //服务申请分析
      siteid: "", //站点id
    };
  },
  created() {
    this.siteid = JSON.parse(sessionStorage.getItem("active_account")).siteid;
    this.getMessageAnalysis();
    this.getServiceRequestAnalysis();
  },
  methods: {
    // 获取留言分析
    getMessageAnalysis(detail) {
      let content = {
        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) => {
          console.log("获取留言分析", 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.changeData(list);
          } else {
            this.messageAnalysis = new Line(this.$refs.messageAnalysis, {
              height: 300,
              data: list,
              xField: "date",
              scrollbar: {
                type: "horizontal",
              },
              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 = {
        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) => {
          console.log("获取申请量分析", 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.changeData(list);
          } else {
            this.serviceRequestAnalysis = new Line(
              this.$refs.serviceRequestAnalysis,
              {
                height: 300,
                data: list,
                xField: "date",
                scrollbar: {
                  type: "horizontal",
                },
                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;
}
</style>