✨ feat: 月度数据功能模块初始化

ruoyi-ui/src/components/DeptTree/index.vue

@@ -8,6 +8,11 @@
       placeholder="请选择组织部门"
       @select="handleDeptSelect"
     />
+    <el-button-group v-if="showQuickGroup">
+      <el-button v-for="child in firstChildList" :key="child.deptName" plain @click="quickSelect(child)">
+        {{ child.deptName }}
+      </el-button>
+    </el-button-group>
   </div>
 </template>
 
@@ -15,18 +20,25 @@
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import to from "@/utils/await-to.js";
-import { listDept} from "@/api/system/dept";
+import { listDept } from "@/api/system/dept";
 
 export default {
   name: "DeptTree",
   components: {
     Treeselect,
   },
+  props: {
+    showQuickGroup: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       deptId: "",
       // 部门树数据
       deptList: [],
+      firstChildList: [],
       normalizer(node) {
         return {
           id: node.deptId,
@@ -56,11 +68,14 @@ export default {
     //     this.$message.error("默认企业配置错误,请配置sys.user.defaultFactoryId");
     //   }
     // },
+    quickSelect(child) {
+      this.deptId = child.deptId;
+      this.$emit("deptChange", child);
+    },
     async initDeptList() {
       const [err, response] = await to(
         listDept({
           deptName: undefined,
-        
         })
       );
       if (err) {
@@ -71,7 +86,8 @@ export default {
       if (response.code === 200) {
         this.deptList = this.handleTree(response.data, "deptId");
         this.deptId = this.deptList[0].deptId;
-        this.$emit("deptChange",  this.deptList[0]);
+        this.firstChildList = this.deptList[0].children;
+        this.$emit("deptChange", this.deptList[0]);
       } else {
         console.error(response);
         this.$message.error(response.msg);
@@ -85,4 +101,14 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.dept-tree {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  .el-button-group {
+    margin-top: 5px;
+  }
+}
+</style>

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>

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>

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>

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>

ruoyi-ui/src/views/dataStatistics/realtime/search-bar.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="data-monitor">
     <el-row :gutter="10">
-      <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
-        <dept-tree @deptChange="handleDeptChange" />
+      <el-col :span="10" 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="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']" @change="handleDateChange">
+        <el-date-picker
+          v-model="dateValue"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="['00:00:00', '23:59:59']"
+          @change="handleDateChange"
+        >
         </el-date-picker>
       </el-col>
-      <el-col>
-        <el-radio-group v-model="deptId" @change="handleRadioDeptChange">
-  <el-radio-button :label="229">青岛港</el-radio-button>
-  <el-radio-button :label="230">日照港</el-radio-button>
-  <el-radio-button :label="231">烟台港</el-radio-button>
-  <el-radio-button  :label="232">渤海湾港</el-radio-button>
-</el-radio-group>
-
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -36,13 +33,6 @@ export default {
       // chooseDept:null,
       deptId: "",
       dateValue: [],
-      normalizer(node) {
-        return {
-          id: node.deptId,
-          label: node.deptName,
-          children: node.children,
-        };
-      },
     };
   },
   mounted() {
@@ -64,8 +54,8 @@ export default {
       ];
     },
     handleRadioDeptChange(value) {
-      this.deptId = value
-     this.emitChange();
+      this.deptId = value;
+      this.emitChange();
     },
     handleDeptChange(value) {
       this.deptId = value.deptId;