✨ feat: 月度数据-数据详情前后端

RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/OilStatisticsController.java

@@ -130,4 +130,32 @@ public class OilStatisticsController extends BaseController {
         resultMap.put("monthReportDataOverviewDeviceDs", monthReportDataOverviewDeviceDs);
         return success(resultMap);
     }
+
+    @GetMapping("/monthData/dataDetail")
+    public AjaxResult dataDetail(Long deptId, String month) {
+        // 本月ds均值
+        List<Map<String, Object>> currentMonthDs = oilThDeviceReportService.monthReportDataOverviewDeviceDs(deptId, month);
+        // 上月ds均值
+        List<Map<String, Object>> preMonthDs = oilThDeviceReportService.monthReportDataOverviewDeviceDs(deptId, getPreviousMonth(month));
+        // 去年同月ds均值
+        List<Map<String, Object>> lastYearDs = oilThDeviceReportService.monthReportDataOverviewDeviceDs(deptId, getLastYearMonth(month));
+
+        Map<String, Object> resultMap = new HashMap<>();
+        resultMap.put("currentMonthDs", currentMonthDs);
+        resultMap.put("preMonthDs", preMonthDs);
+        resultMap.put("lastYearDs", lastYearDs);
+        return success(resultMap);
+     }
+
+    /**
+     * 获取去年同月
+     * @param month 2024-09
+     * @return 2023-09
+     */
+    private String getLastYearMonth(String month) {
+        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM");
+        LocalDate date = LocalDate.parse(month + "-01", DateTimeFormatter.ofPattern("yyyy-MM-dd"));
+        LocalDate lastYearDate = date.minus(1, ChronoUnit.YEARS);
+        return lastYearDate.format(formatter);
+    }
 }

ruoyi-ui/src/api/statistics/monthData.js

@@ -23,3 +23,11 @@ export function dataOverview(params) {
     method: 'get',
   })
 }
+
+export function getDataDetail(params) {
+  return request({
+    url: '/statistics/monthData/dataDetail',
+    params: params,
+    method: 'get',
+  })
+}

ruoyi-ui/src/views/dataStatistics/monthData/data-detail.vue

@@ -1,23 +1,253 @@
 <template>
   <div>
-    <h2>DataDetail</h2>
+    <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="month"
+          format="yyyy-MM"
+          value-format="yyyy-MM"
+          placeholder="选择月份"
+          @change="handleDateChange"
+        >
+        </el-date-picker>
+      </el-col>
+      <el-col :span="12">
+        <div class="export_btn">
+          <el-button
+            type="primary"
+            icon="eel-icon-download"
+            @click="exportToExcel"
+            >导出</el-button
+          >
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="24">
+        <el-table :data="tableData" :header-cell-style="headerStyle" :loading="loading" @sort-change="sortChange">
+          <el-table-column
+            prop="gangQu"
+            label="港区"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="deptName"
+            label="企业"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="sn"
+            label="编号"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="currAvgDs"
+            label="本月均值"
+            sortable
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="preMonthAvgDs"
+            label="上月均值"
+            sortable
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="mom"
+            label="环比%"
+            sortable
+            :sortMethod="sortMomMethod"
+            align="center"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.mom }}%
+            </template>
+        </el-table-column>
+          <el-table-column
+            prop="lastYearAvgDs"
+            label="去年同月均值"
+            sortable
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="yoy"
+            label="同比%"
+            sortable
+            :sortMethod="sortYoyMethod"
+            align="center"
+          >
+          <template slot-scope="scope">
+            {{ scope.row.yoy }}%
+          </template>
+        </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-  export default {
+import * as XLSX from "xlsx";
-    name: 'DataDetail',
+import { getDataDetail } from "@/api/statistics/monthData.js";
+export default {
+  name: "DataDetail",
   data() {
     return {
-
+      deptId: "",
-      }
+      deptName: "",
+      dateValue: "",
+      tableData: [],
+      loading: false,
+      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;
+      const monthStr = month < 10 ? `0${month}` : month;
+      this.dateValue = `${year}-${monthStr}`;
+    },
+    handleDeptChange(value) {
+      this.deptId = value.deptId;
+      this.deptName = value.deptName;
+      this.queryData();
+    },
+    handleDateChange(value) {
+      this.queryData();
+    },
+    sortMomMethod(a, b) {
+      return parseFloat(a.mom) - parseFloat(b.mom);
+    },
+    sortYoyMethod(a, b) {
+      return parseFloat(a.yoy) - parseFloat(b.yoy);
+    },
+    sortChange({ prop, order }) {
+      if (order === "ascending") {
+        this.tableData.sort((a, b) => a[prop] - b[prop]);
+      } else {
+        this.tableData.sort((a, b) => b[prop] - a[prop]);
+      }
+    },
+    queryData() {
+      this.tableData = [];
+      this.loading = true;
+      getDataDetail({
+        deptId: this.deptId,
+        month: this.dateValue,
+      }).then((res) => {
+        if (res.code === 200) {
+          const { currentMonthDs, lastYearDs, preMonthDs } = res.data;
+          // const minLength = Math.min(currentMonthDs.length, lastYearDs.length, preMonthDs.length);
+          // 比较三个数组的长度，得到最小的数组
+          // const minLength = Math.min(currentMonthDs.length, lastYearDs.length, preMonthDs.length);
+          // 获取本月ds均值，上月ds均值，环比%，去年同月ds均值，同比% ，同比增减
+          // mom 环比% = (本月均值 - 上月均值) / 上月均值 *100%
+          // yoy 同比% = (本月均值 - 去年同月均值) / 去年同月均值 *100%
+          // 同比增减＝本月均值 - 去年同月均值
+          for (let i = 0; i < currentMonthDs.length; i++) {
+            const dataItem = {};
+            const currentMonthDsItem = currentMonthDs[i];
+            dataItem.sn = currentMonthDsItem.sn;
+            dataItem.deptName = currentMonthDsItem.deptName;
+            dataItem.gangQu = currentMonthDsItem.gangQu;
+            dataItem.currAvgDs = currentMonthDsItem.avgDs;
+            const lastYearDsItem = lastYearDs.find(
+              (item) => item.sn === currentMonthDsItem.sn
+            );
+            if (lastYearDsItem) {
+              dataItem.lastYearAvgDs = lastYearDsItem.avgDs;
+              dataItem.yoy =
+                (
+                  ((currentMonthDsItem.avgDs - lastYearDsItem.avgDs) /
+                    lastYearDsItem.avgDs) *
+                  100
+                ).toFixed(2);
+            } else {
+              dataItem.lastYearAvgDs = 0;
+              dataItem.yoy = 0;
+            }
+            const preMonthDsItem = preMonthDs.find(
+              (item) => item.sn === currentMonthDsItem.sn
+            );
+            if (preMonthDsItem) {
+              dataItem.preMonthAvgDs = preMonthDsItem.avgDs;
+              dataItem.mom =
+                (
+                  ((currentMonthDsItem.avgDs - preMonthDsItem.avgDs) /
+                    preMonthDsItem.avgDs) *
+                  100
+                ).toFixed(2);
+            } else {
+              dataItem.preMonthAvgDs = 0;
+              dataItem.mom = 0;
+            }
+            this.tableData.push(dataItem);
           }
         }
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    exportToExcel() {
+      // 创建一个新的工作簿
+      const wb = XLSX.utils.book_new();
+      const filename = `${this.deptName} ${this.dateValue.replace("-", "年") + "月"} 数据详情`;
+      // // 创建一个新的工作表
+      const ws_name = "SheetJS";
+      const ws_data = [
+        [filename],
+        ["港区", "企业", "编号", "本月均值", "上月均值", "环比%", "去年同月均值", "同比%"],
+        ...this.tableData.map((row) => [
+          row.gangQu,
+          row.deptName,
+          row.sn,
+          row.currAvgDs,
+          row.preMonthAvgDs,
+          row.mom,
+          row.lastYearAvgDs,
+          row.yoy,
+        ]),
+      ];
+      const ws = XLSX.utils.aoa_to_sheet(ws_data);
+      // // 合并第一行的前8列
+      if(!ws['!merges']) ws['!merges'] = [];
+      ws['!merges'].push({s: {r: 0, c: 0}, e: {r: 0, c: 7}});
+      // // 将工作表添加到工作簿中
+      XLSX.utils.book_append_sheet(wb, ws, ws_name);
+      XLSX.writeFile(wb, `${filename}.xlsx`);
+    },
+  },
+};
 </script>
 
 <style scoped>
-
+.table-title {
+  border: 1px solid #ebeef5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 45px;
+  span {
+    font-size: 18px;
+    color: #333;
+  }
+}
+.export_btn {
+  padding: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>