折线图完成

src/WebsiteManagement/dataStatistics/index.vue

@@ -0,0 +1,170 @@
+<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>

src/WebsiteManagement/dataStatistics/modules/visitorStatistics.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div>
     <div class="cards" v-if="visitor && visits">
       <div class="card" v-if="visitor">
         <div class="title">{{ $t("访客统计") }}（uv）</div>
@@ -220,8 +220,9 @@ export default {
         .then((res) => {
           console.log("获取访客趋势", res);
           if (res.code != 1) return;
+          let type = "UV" + this.$t("访客数量");
           let list = res.data.map((v) => {
-            v.type = "UV" + this.$t("访客数量");
+            v.type = type;
             return v;
           });
           if (detail) {
@@ -240,7 +241,7 @@ export default {
               tooltip: {
                 formatter: (datum) => {
                   return {
-                    name: "UV" + this.$t("访客数量"),
+                    name: type,
                     value: datum.count,
                   };
                 },
@@ -276,8 +277,9 @@ export default {
         .then((res) => {
           console.log("获取访问量趋势", res);
           if (res.code != 1) return;
+          let type = this.$t("重复访客数量");
           let list = res.data.map((v) => {
-            v.type = this.$t("重复访客数量");
+            v.type = type;
             return v;
           });
           if (detail) {
@@ -295,7 +297,7 @@ export default {
               seriesField: "type",
               tooltip: {
                 formatter: (datum) => {
-                  return { name: this.$t("重复访客数量"), value: datum.count };
+                  return { name: type, value: datum.count };
                 },
               },
               point: {
@@ -311,11 +313,6 @@ export default {
 </script>
 
 <style scoped>
-.container {
-  padding: 20px;
-  box-sizing: border-box;
-}
-
 .text-ellipsis {
   overflow: hidden;
   white-space: nowrap;