统计报表优化

This commit is contained in:
白菜
2026-01-28 21:34:58 +08:00
parent ac1d1ae154
commit 814103c881
5 changed files with 378 additions and 302 deletions

View File

@ -1,4 +1,3 @@
<template>
<div style="width:100%" v-loading="loading">
<!-- 搜索栏-->
@ -22,6 +21,9 @@
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTable" native-type="button">导出</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table
@ -29,7 +31,7 @@
:data="tableData"
stripe
style="width: 100%;margin-top:25px;">
<!-- 汇总列-->
<!-- 汇总列-->
<el-table-column label="汇总">
<el-table-column
prop="dataTime"
@ -37,7 +39,7 @@
width="120">
</el-table-column>
</el-table-column>
<!--充电量列-->
<!--充电量列-->
<el-table-column label="充电量" align="center">
<el-table-column
align="center"
@ -93,7 +95,7 @@
label="总">
</el-table-column>
</el-table-column>
<!-- 效率-->
<!-- 效率-->
<el-table-column label="效率(%)" align="center">
<el-table-column
align="center"
@ -120,74 +122,84 @@
<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterData} from '@/api/ems/dzjk'
import {getAmmeterData} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
export default {
name:'DzjkTjbbDbbb',
name: 'DzjkTjbbDbbb',
mixins: [getQuerySiteId],
data() {
return {
loading:false,
pickerOptions:{
loading: false,
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
defaultDateRange:[],//默认展示的时间
dateRange:[],
tableData:[],
pageSize:10,//分页栏当前每个数据总数
pageNum:1,//分页栏当前页数
totalSize:0,//table表格数据总数
defaultDateRange: [],//默认展示的时间
dateRange: [],
tableData: [],
pageSize: 10,//分页栏当前每个数据总数
pageNum: 1,//分页栏当前页数
totalSize: 0,//table表格数据总数
}
},
methods:{
methods: {
// 导出表格
exportTable() {
if (!this.dateRange?.length) return
const [startTime, endTime] = this.dateRange
this.download('ems/statsReport/exportAmmeterData', {
siteId: this.siteId,
startTime,
endTime,
}, `电表报表_${startTime}-${endTime}.xlsx`)
},
// 搜索
onSearch(){
this.pageNum =1//每次搜索从1开始搜索
onSearch() {
this.pageNum = 1//每次搜索从1开始搜索
this.getData()
},
// 重置
onReset(){
this.dateRange=this.defaultDateRange
this.pageNum =1//每次搜索从1开始搜索
onReset() {
this.dateRange = this.defaultDateRange
this.pageNum = 1//每次搜索从1开始搜索
this.getData()
},
// 分页
handleSizeChange(val) {
this.pageSize = val;
this.$nextTick(()=>{
this.$nextTick(() => {
this.getData()
})
},
handleCurrentChange(val) {
this.pageNum = val
this.$nextTick(()=>{
this.$nextTick(() => {
this.getData()
})
},
// 获取数据
getData(){
this.loading=true
const {siteId,pageNum,pageSize} =this
const [startTime='',endTime='']=(this.dateRange || [])
getAmmeterData({siteId:siteId,startTime,endTime,pageSize,pageNum}).then(response=>{
this.tableData=response?.rows || [];
getData() {
this.loading = true
const {siteId, pageNum, pageSize} = this
const [startTime = '', endTime = ''] = (this.dateRange || [])
getAmmeterData({siteId: siteId, startTime, endTime, pageSize, pageNum}).then(response => {
this.tableData = response?.rows || [];
this.totalSize = response?.total || 0
}).finally(()=> {
}).finally(() => {
this.loading = false
})
},
init(){
this.dateRange=[]
this.tableData=[]
this.totalSize=0
this.pageSize=10
init() {
this.dateRange = []
this.tableData = []
this.totalSize = 0
this.pageSize = 10
this.pageNum = 1
const now = new Date().getTime();
const lastMonth = new Date(now-30 * 24 * 60 * 60 * 1000).getTime();
this.defaultDateRange = [formatDate(lastMonth), formatDate(now)];
this.dateRange=[formatDate(lastMonth), formatDate(now)];
let now = new Date(), lastDay = now.getTime(), firstDay = new Date(now.setDate(1)).getTime();
this.defaultDateRange = [formatDate(firstDay), formatDate(lastDay)];
this.dateRange = [formatDate(firstDay), formatDate(lastDay)];
this.getData()
},
},
@ -195,8 +207,8 @@ export default {
</script>
<style scoped lang="scss">
::v-deep{
.common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{
::v-deep {
.common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th {
border-bottom: 1px solid #dfe6ec;
}
}

View File

@ -6,7 +6,7 @@
>
<div slot="header" class="time-range-header">
<span class="card-title"> </span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate" />
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div class="card-main" v-loading="loading">
<el-button-group class="ems-btns-group">
@ -16,7 +16,8 @@
size="mini"
:class="{ activeBtn: activeBtn === item.id }"
@click="changeDataType(item.id)"
>{{ item.name }}</el-button
>{{ item.name }}
</el-button
>
</el-button-group>
<div id="dcdEchart" style="height: 310px"></div>
@ -28,12 +29,13 @@
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getStackData, getStackNameList } from "@/api/ems/dzjk";
import { formatDate } from "@/filters/ems";
import {getStackData} from "@/api/ems/dzjk";
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name: "DzjkTjbbDcdqx",
components: { DateRangeSelect },
components: {DateRangeSelect},
mixins: [resize, getQuerySiteId],
data() {
return {
@ -46,10 +48,10 @@ export default {
loading: false,
activeBtn: "1",
btnList: [
{ name: "堆平均维度", id: "1", attr: ["temp"], source: ["有功功率"] },
{ name: "堆电压", id: "2", attr: ["voltage"], source: ["堆电压"] },
{ name: "堆电流", id: "3", attr: ["current"], source: ["堆电流"] },
{ name: "堆soc", id: "4", attr: ["soc"], source: ["堆soc"] },
{name: "堆平均维度", id: "1", attr: ["temp"], source: ["有功功率"]},
{name: "堆电压", id: "2", attr: ["voltage"], source: ["堆电压"]},
{name: "堆电流", id: "3", attr: ["current"], source: ["堆电流"]},
{name: "堆soc", id: "4", attr: ["soc"], source: ["堆soc"]},
],
};
},
@ -66,7 +68,7 @@ export default {
this.getData();
},
getData() {
const { siteId, activeBtn } = this;
const {siteId, activeBtn} = this;
const [start = "", end = ""] = this.dateRange || [];
//接口调用完成之后 设置图表、结束loading
this.loading = true;
@ -142,7 +144,7 @@ export default {
},
legend: {
left: "center",
bottom: "15",
top: "10",
},
tooltip: {
trigger: "axis",
@ -160,10 +162,25 @@ export default {
yAxis: {
type: "value",
},
dataset: { source },
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
dataset: {source},
series: source[0].slice(1).map((item) => {
return {
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
};
}),
},
@ -176,7 +193,7 @@ export default {
init() {
this.$nextTick(() => {
this.initChart();
this.$refs.dateRangeSelect.init();
this.$refs.dateRangeSelect.init(true);
});
},
},

View File

@ -8,7 +8,6 @@
<span class="card-title">功率曲线</span>
<date-range-select
ref="dateRangeSelect"
@reset="resetTime"
@updateDate="updateDate"
/>
</div>
@ -22,12 +21,13 @@
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getPcsNameList, getPowerData } from "@/api/ems/dzjk";
import { formatDate } from "@/filters/ems";
import {getPowerData} from "@/api/ems/dzjk";
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name: "DzjkTjbbGlqx",
components: { DateRangeSelect },
components: {DateRangeSelect},
mixins: [resize, getQuerySiteId],
data() {
return {
@ -38,7 +38,6 @@ export default {
},
dateRange: [],
loading: false,
dateRangeInit: true,
};
},
methods: {
@ -47,19 +46,11 @@ export default {
this.dateRange = data || [];
this.getData();
},
resetTime() {
this.dateRangeInit = true;
},
getData() {
const { siteId } = this;
const {siteId} = this;
let [start = "", end = ""] = this.dateRange || [];
//接口调用完成之后 设置图表、结束loading
this.loading = true;
if (this.dateRangeInit) {
start = "";
end = "";
this.dateRangeInit = false;
}
getPowerData({
siteId,
startDate: formatDate(start),
@ -90,7 +81,7 @@ export default {
},
legend: {
left: "center",
bottom: "15",
top: "10",
},
tooltip: {
trigger: "axis",
@ -108,19 +99,46 @@ export default {
yAxis: {
type: "value",
},
dataset: { source },
dataset: {source},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
},
{
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
},
{
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
},
{
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
},
],
},
@ -133,7 +151,6 @@ export default {
},
init() {
this.$nextTick(() => {
this.dateRangeInit = true;
this.initChart();
this.$refs.dateRangeSelect.init();
});

View File

@ -6,7 +6,7 @@
>
<div slot="header" class="time-range-header">
<span class="card-title"> </span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate" />
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div class="card-main" v-loading="loading">
<el-button-group class="ems-btns-group">
@ -16,7 +16,8 @@
size="mini"
:class="{ activeBtn: activeBtn === item.id }"
@click="changeDataType(item.id)"
>{{ item.name }}</el-button
>{{ item.name }}
</el-button
>
</el-button-group>
<div id="pcsEchart" style="height: 310px"></div>
@ -28,12 +29,13 @@
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getPCSData, getPcsNameList } from "@/api/ems/dzjk";
import { formatDate } from "@/filters/ems";
import {getPCSData} from "@/api/ems/dzjk";
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name: "DzjkTjbbPcsqx",
components: { DateRangeSelect },
components: {DateRangeSelect},
mixins: [resize, getQuerySiteId],
data() {
return {
@ -82,7 +84,7 @@ export default {
this.getData();
},
getData() {
const { siteId, activeBtn } = this;
const {siteId, activeBtn} = this;
const [start = "", end = ""] = this.dateRange || [];
this.loading = true;
//接口调用完成之后 设置图表、结束loading
@ -158,7 +160,7 @@ export default {
},
legend: {
left: "center",
bottom: "15",
top: "10",
},
tooltip: {
trigger: "axis",
@ -176,10 +178,25 @@ export default {
yAxis: {
type: "value",
},
dataset: { source },
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
dataset: {source},
series: source[0].slice(1).map((item) => {
return {
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
};
}),
},
@ -192,7 +209,7 @@ export default {
init() {
this.$nextTick(() => {
this.initChart();
this.$refs.dateRangeSelect.init();
this.$refs.dateRangeSelect.init(true);
});
},
},

View File

@ -21,6 +21,9 @@
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTable" native-type="button">导出</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table
@ -144,6 +147,16 @@ export default {
}
},
methods: {
// 导出表格
exportTable() {
if (!this.dateRange?.length) return
const [startTime, endTime] = this.dateRange
this.download('ems/statsReport/exportAmmeterRevenueData', {
siteId: this.siteId,
startTime,
endTime,
}, `收益报表_${startTime}-${endTime}.xlsx`)
},
// 搜索
onSearch() {
this.pageNum = 1//每次搜索从1开始搜索