✨ feat: 月度数据-数据详情前后端
This commit is contained in:
parent
f10cb687fa
commit
5c341d8133
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,3 +23,11 @@ export function dataOverview(params) {
|
|||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function getDataDetail(params) {
|
||||
return request({
|
||||
url: '/statistics/monthData/dataDetail',
|
||||
params: params,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
name: 'DataDetail',
|
||||
data() {
|
||||
return {
|
||||
|
||||
import * as XLSX from "xlsx";
|
||||
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]);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue