diff --git a/ruoyi-ui/src/api/statistics/avgTable.js b/ruoyi-ui/src/api/statistics/avgTable.js
new file mode 100644
index 0000000..bf5bda3
--- /dev/null
+++ b/ruoyi-ui/src/api/statistics/avgTable.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getDeviceAvgByMonth(params) {
+  return request({
+    url: '/statistics/getDeviceAvgByMonth',
+    params: params,
+    method: 'get',
+  })
+}
diff --git a/ruoyi-ui/src/api/statistics/reportCenter.js b/ruoyi-ui/src/api/statistics/reportCenter.js
new file mode 100644
index 0000000..ae93f32
--- /dev/null
+++ b/ruoyi-ui/src/api/statistics/reportCenter.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+export function reportCenterApi(params) {
+  console.log(params);
+  return request({
+    url: '/statistics/reportCenter',
+    params: params,
+    method: 'get',
+  })
+}
diff --git a/ruoyi-ui/src/views/dataStatistics/avgTable/index.vue b/ruoyi-ui/src/views/dataStatistics/avgTable/index.vue
new file mode 100644
index 0000000..daea76a
--- /dev/null
+++ b/ruoyi-ui/src/views/dataStatistics/avgTable/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="avg-table">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <dept-tree @deptChange="handleDeptChange" />
+      </el-col>
+      <el-col :span="6">
+        <el-date-picker
+          v-model="dateRange"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+          format="yyyy-MM"
+          value-format="yyyy-MM"
+          @change="handleDateChange"
+        >
+        </el-date-picker>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+        <el-table-column
+          v-for="column in tableColumn"
+          :key="column.prop"
+          :prop="column.prop"
+          :label="column.label"
+          :formatter="column.formatter"
+        >
+        </el-table-column>
+      </el-table>
+      <div class="pager">
+        <el-pagination
+          layout="prev, pager, next"
+          :total="pager.total"
+          :page-size="pager.pageSize"
+          @current-change="handleCurrentChange"
+        >
+        </el-pagination>
+      </div>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import DeptTree from "@/components/DeptTree/index.vue";
+import { getDeviceAvgByMonth } from "@/api/statistics/avgTable.js";
+import to from "@/utils/await-to.js";
+export default {
+  name: "AvgTable",
+  components: {
+    DeptTree,
+  },
+  data() {
+    return {
+      dateRange: [],
+      dept: {},
+      tableData: [],
+      pager: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+      },
+      tableColumn: [
+        {
+          prop: "dept_name",
+          label: "部门",
+        },
+        {
+          prop: "name",
+          label: "设备名称",
+        },
+        {
+          prop: "sn",
+          label: "设备编号",
+        },
+        {
+          prop: "avg_ds",
+          label: "平均读数",
+          formatter: this.dataFormatter,
+        },
+        {
+          prop: "avg_dbz",
+          label: "平均低报值",
+          formatter: this.dataFormatter,
+        },
+        {
+          prop: "avg_gbz",
+          label: "平均高报值",
+          formatter: this.dataFormatter,
+        },
+      ],
+      loading: false,
+    };
+  },
+  mounted() {
+    this.initDateRange();
+  },
+  methods: {
+    dataFormatter (row, column, cellValue, index) {
+      return cellValue.toFixed(2);
+    },
+    initDateRange() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth() + 1;
+      this.dateRange = [`${year}-01`, `${year}-${month}`];
+    },
+    handleCurrentChange(val) {
+      this.pager.pageNum = val;
+      this.fetchData();
+    },
+    async fetchData() {
+      this.loading = true;
+      const [startMonth, endMonth] = this.dateRange;
+      const [err, res] = await to(
+        getDeviceAvgByMonth({
+          deptId: this.dept.deptId,
+          startMonth,
+          endMonth,
+          ...this.pager,
+        })
+      );
+
+      if (err) {
+        this.$message.error("获取数据失败");
+        this.loading = false;
+        return;
+      }
+      this.tableData = res.rows;
+      this.pager.total = res.total;
+      this.loading = false;
+
+    },
+    handleDeptChange(dept) {
+      this.dept = dept;
+      this.pager.pageNum = 1;
+      this.fetchData();
+    },
+    handleDateChange() {
+      this.pager.pageNum = 1;
+      this.fetchData();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.avg-table {
+  padding: 20px;
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .pager {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/dataStatistics/reportCenter/index.vue b/ruoyi-ui/src/views/dataStatistics/reportCenter/index.vue
new file mode 100644
index 0000000..37f3c12
--- /dev/null
+++ b/ruoyi-ui/src/views/dataStatistics/reportCenter/index.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="report-center">
+    <el-row :gutter="10">
+      <el-col :span="6" style="margin-bottom: 10px;">
+        <dept-tree @deptChange="handleDeptChange" />
+      </el-col>
+      <el-col :span="6">
+        <el-date-picker
+          v-model="month"
+          type="month"
+          value-format="yyyy-MM"
+          format="yyyy-MM"
+          placeholder="选择月"
+          @change="getReportCenterData"
+        >
+        </el-date-picker>
+      </el-col>
+    </el-row>
+    <el-row>
+      <div class="report-center__header ">
+        <span>{{ this.month.replace("-", "年") + "月" }}</span>
+      </div>
+      <el-table
+        :data="tableData1"
+        style="width: 100%"
+        :border="true"
+        :header-cell-style="headerStyle"
+
+      >
+        <el-table-column prop="month" label="名称">
+          <template slot-scope="scope">
+            {{ getTableFirstColumnName(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="avg_ds"
+          label="读数"
+          align="center"
+          :formatter="dataFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="avg_dbz"
+          label="低报值"
+          align="center"
+          :formatter="dataFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="avg_gbz"
+          label="高报值"
+          align="center"
+          :formatter="dataFormatter"
+        ></el-table-column>
+      </el-table>
+      <el-table
+        :data="tableData2"
+        style="width: 100%"
+        :border="true"
+        :header-cell-style="headerStyle"
+      >
+        <el-table-column prop="dept_name" label="部门名"></el-table-column>
+        <el-table-column
+          prop="avg_ds"
+          label="读数"
+          align="center"
+          :formatter="dataFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="avg_dbz"
+          label="低报值"
+          align="center"
+          :formatter="dataFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="avg_gbz"
+          label="高报值"
+          align="center"
+          :formatter="dataFormatter"
+        ></el-table-column>
+      </el-table>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import DeptTree from "@/components/DeptTree/index.vue";
+import { reportCenterApi } from "@/api/statistics/reportCenter.js";
+import to from "@/utils/await-to.js";
+export default {
+  name: "ReportCenter",
+  components: {
+    DeptTree,
+  },
+  data() {
+    return {
+      month: "",
+      deptId: "",
+      tableData1: [],
+      tableData2: [],
+      tableColumn2: [],
+      headerStyle: {
+        fontSize: '14px',
+        backgroundColor: '#f8f8f8',
+        color: '#333',
+      }
+    };
+  },
+  created() {
+    this.initDate();
+  },
+  methods: {
+    initDate() {
+      const date = new Date();
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      this.month = `${year}-${month < 10 ? "0" + month : month}`;
+    },
+    handleDeptChange(dept) {
+      this.deptId = dept.deptId;
+      this.getReportCenterData();
+    },
+    getTableFirstColumnName(row) {
+      if (row.month && row.month === this.month) {
+        return "本月均值";
+      }
+      if (row.month && row.month !== this.month) {
+        return "上月均值";
+      }
+      return "变化率";
+    },
+    dataFormatter(row, column, cellValue, index) {
+      if (row.month === "") {
+        return cellValue;
+      }
+      return cellValue.toFixed(2);
+    },
+    async getReportCenterData() {
+      if (!this.deptId) return;
+      const [err, res] = await to(
+        reportCenterApi({
+          month: this.month,
+          deptId: this.deptId,
+        })
+      );
+      if (err) {
+        this.$message.error(err);
+        return;
+      }
+      console.log(res);
+      const { currMonth: cm, lastMonth: lm, deptAvg } = res.data;
+      const currMonth = Object.assign({}, cm[0]);
+      const lastMonth = Object.assign({}, lm[0]);
+      const changeRate = {
+        month: "",
+        avg_ds:
+          (
+            ((currMonth.avg_ds - lastMonth.avg_ds) / lastMonth.avg_ds) *
+            100
+          ).toFixed(2) + "%",
+        avg_dbz:
+          (
+            ((currMonth.avg_dbz - lastMonth.avg_dbz) / lastMonth.avg_dbz) *
+            100
+          ).toFixed(2) + "%",
+        avg_gbz:
+          (
+            ((currMonth.avg_gbz - lastMonth.avg_gbz) / lastMonth.avg_gbz) *
+            100
+          ).toFixed(2) + "%",
+      };
+
+      this.tableData1 = [currMonth, lastMonth, changeRate];
+      this.tableData2 = deptAvg;
+      console.log(this.tableData1);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.report-center {
+  padding: 20px;
+
+}
+.report-center__header {
+    border: 1px solid #EBEEF5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 45px;
+    span {
+      font-size: 18px;
+      color: #333;
+    }
+  }
+</style>