diff --git a/ruoyi-ui/src/views/dataStatistics/monthData/create-report.vue b/ruoyi-ui/src/views/dataStatistics/monthData/create-report.vue
new file mode 100644
index 0000000..4053f19
--- /dev/null
+++ b/ruoyi-ui/src/views/dataStatistics/monthData/create-report.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="create-report">
+    <el-row :gutter="10">
+      <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
+        <dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
+      </el-col>
+      <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
+        <!-- 时间范围选择 -->
+        <el-date-picker
+          v-model="dateValue"
+          type="monthrange"
+          format="yyyy-MM"
+          value-format="yyyy-MM"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+          @change="handleDateChange"
+        >
+        </el-date-picker>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import DeptTree from "@/components/DeptTree/index.vue";
+export default {
+  name: "CreateReport",
+  components: {
+    DeptTree,
+  },
+  data() {
+    return {
+      deptId: "",
+      dateValue: [],
+    };
+  },
+  created() {
+    this.initDate();
+  },
+  methods: {
+    handleDeptChange(value) {
+      this.deptId = value.deptId;
+      console.log(value);
+    },
+    handleDateChange(value) {
+      console.log(value);
+    },
+    initDate() {
+      const date = new Date();
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      this.dateValue = [`${year}-${month}`, `${year}-${month}`];
+    },
+  },
+};
+</script>
+
+<style scoped>
+.create-report {
+  min-height: 50vh;
+}
+</style>
diff --git a/ruoyi-ui/src/views/dataStatistics/monthData/data-detail.vue b/ruoyi-ui/src/views/dataStatistics/monthData/data-detail.vue
new file mode 100644
index 0000000..fc939fc
--- /dev/null
+++ b/ruoyi-ui/src/views/dataStatistics/monthData/data-detail.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h2>DataDetail</h2>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'DataDetail',
+    data() {
+      return {
+
+      }
+    },
+    created() {
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/ruoyi-ui/src/views/dataStatistics/monthData/data-overview.vue b/ruoyi-ui/src/views/dataStatistics/monthData/data-overview.vue
new file mode 100644
index 0000000..6d31b59
--- /dev/null
+++ b/ruoyi-ui/src/views/dataStatistics/monthData/data-overview.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h2>DataOverview</h2>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'DataOverview',
+    data() {
+      return {
+
+      }
+    },
+    created() {
+
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/ruoyi-ui/src/views/dataStatistics/monthData/index.vue b/ruoyi-ui/src/views/dataStatistics/monthData/index.vue
new file mode 100644
index 0000000..b51688d
--- /dev/null
+++ b/ruoyi-ui/src/views/dataStatistics/monthData/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="month-data">
+    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+      <el-tab-pane
+        v-for="tab in tabs"
+        :key="tab.cpn"
+        :label="tab.label"
+        :name="tab.cpn"
+      >
+        <component :is="tab.cpn" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import CreateReport from "./create-report.vue";
+import DataOverview from "./data-overview.vue";
+import DataDetail from "./data-detail.vue";
+export default {
+  name: "MonthData",
+  components: {
+    CreateReport,
+    DataOverview,
+    DataDetail,
+  },
+  data() {
+    return {
+      activeTab: "CreateReport",
+      tabs: [
+        {
+          label: "报表生成",
+          cpn: "CreateReport",
+        },
+        {
+          label: "数据总览",
+          cpn: "DataOverview",
+        },
+        {
+          label: "数据详情",
+          cpn: "DataDetail",
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    handleTabClick(tab) {
+      this.activeTab = tab.name;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.month-data {
+  padding: 10px 20px;
+}
+</style>