留言统计分析表

src/WebsiteManagement/dataStatistics/index.vue

@@ -48,6 +48,8 @@
       <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>
@@ -59,10 +61,16 @@
 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 },
+  components: {
+    visitorStatistics,
+    cordTop,
+    rankingList,
+    statisticalAnalysisOfMessage,
+  },
   data() {
     return {
       visitorTrend: null, //访客趋势

src/WebsiteManagement/dataStatistics/modules/statisticalAnalysisOfMessage.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="card">
+      <cord-top title="留言统计明细表" @returnWhere="getList" />
+      <div style="height: 20px" />
+      <tableTemplate
+        ref="table"
+        :layout="tablecols"
+        :data="list"
+        :opwidth="200"
+        :custom="true"
+      >
+        <template v-slot:customcol="scope">
+          <p
+            v-if="
+              ['allocationstatus', 'status'].includes(scope.column.columnname)
+            "
+            :style="
+              tool.getStatusColor(scope.column.data[scope.column.columnname])
+            "
+          >
+            {{ $t(scope.column.data[scope.column.columnname]) }}
+          </p>
+          <p v-else-if="['deleted'].includes(scope.column.columnname)">
+            {{
+              $t(scope.column.data[scope.column.columnname] == 0 ? "否" : "是")
+            }}
+          </p>
+          <p v-else>
+            {{ $t(scope.column.data[scope.column.columnname]) }}
+          </p>
+        </template>
+      </tableTemplate>
+      <div class="pagination-box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="content.pageNumbe"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="content.pageSize"
+          layout="total,sizes, prev, pager, next, jumper"
+          :total="content.total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import cordTop from "./header.vue";
+import tableTemplate from "@/views/salesData/components/table";
+
+export default {
+  components: {
+    cordTop,
+    tableTemplate,
+  },
+  data() {
+    return {
+      list: [],
+      tablecols: [],
+      content: {
+        pageSize: 10,
+        pageNumbe: 1,
+        total: 0,
+        where: {},
+        nocache: true,
+        type: "近七日",
+      },
+    };
+  },
+  created() {
+    this.content.siteid = JSON.parse(
+      sessionStorage.getItem("active_account")
+    ).siteid;
+    this.getList();
+    this.tablecols = this.tool.tabelCol(
+      this.$route.name
+    ).statisticalAnalysisOfMessage.tablecols;
+  },
+  methods: {
+    getList(detail) {
+      let content = this.content;
+      if (detail) {
+        if (detail.type) {
+          content.type = detail.type;
+          content.where = {};
+        } else {
+          content.type = "";
+          content.where = detail;
+        }
+      }
+      this.$api
+        .requested({
+          id: 2025021108560703,
+          content,
+        })
+        .then((res) => {
+          console.log("留言统计明细表", res);
+          if (res.code != 1) return;
+          this.list = res.data;
+          this.content.total = res.total;
+          this.content.pageNumbe = res.pageNumber;
+          this.content.pageSize = res.pageSize;
+        });
+    },
+    handleSizeChange(pageSize) {
+      this.content.pageSize = pageSize;
+      this.getList();
+    },
+    handleCurrentChange(pageNumbe) {
+      this.content.pageNumbe = pageNumbe;
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.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;
+}
+
+.pagination-box {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>