样式 警告处理

This commit is contained in:
ym1026
2025-09-12 10:58:59 +08:00
parent 23b5352635
commit f0720439d2
12 changed files with 246 additions and 159 deletions

View File

@@ -20,7 +20,7 @@
>
<template #stationSelect="item">
<a-select
style="width: 120px;"
style="width: 120px"
:dropdown-match-select-width="false"
v-model:value="stationId"
allow-clear
@@ -39,17 +39,17 @@
</div>
<div class="main_content">
<a-spin :spinning="loading.chart || loading.table">
<energyEchart
:key="`${activeKey}_${renderKey}`"
:chart-options="echartsInfo[activeKey].chartOptions"
:chart-data="echartsInfo[activeKey].chartData"
:chart-datav="echartsInfo[activeKey].chartDatav"
:columns="tableList[activeKey].columns"
:page-option="tableList[activeKey].pageOption"
:table-info="tableList[activeKey].tableInfo"
:table-data="tableList[activeKey].tableData"
@pagesizeChange="pagesizeChange()"
></energyEchart>
<energyEchart
:key="`${activeKey}_${renderKey}`"
:chart-options="echartsInfo[activeKey].chartOptions"
:chart-data="echartsInfo[activeKey].chartData"
:chart-datav="echartsInfo[activeKey].chartDatav"
:columns="tableList[activeKey].columns"
:page-option="tableList[activeKey].pageOption"
:table-info="tableList[activeKey].tableInfo"
:table-data="tableList[activeKey].tableData"
@pagesizeChange="pagesizeChange()"
></energyEchart>
</a-spin>
</div>
</div>
@@ -166,7 +166,7 @@ export default {
}
],
chartData: {},
chartDatav: {},
chartDatav: {}
},
2: {
chartOptions: [
@@ -281,19 +281,20 @@ export default {
}
},
activeKey: 1,
interval:null,
interval: null,
tabList: [
{
key: 1,
name: '储能设备'
},
{
key: 2,
name: '光伏设备'
},
{
key: 3,
name: '充电设备'
},
{
key: 2,
name: '光伏设备'
}
],
tableList: {
@@ -505,123 +506,116 @@ export default {
watch: {
activeKey: {
handler(newVal) {
if (!newVal) return;
if (!newVal) return
// 清除之前的数据
this.resetDataForInactiveKey();
this.resetDataForInactiveKey()
// 并行加载新数据
Promise.all([
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
]).then(() => {
this.$nextTick(() => {
this.getStatCharts();
});
});
Promise.all([this.getEchartsListForActiveKey(), this.getTableListForActiveKey()]).then(
() => {
this.$nextTick(() => {
this.getStatCharts()
})
}
)
},
immediate: true // 添加立即执行
}
},
async mounted() {
// 优先加载第一个页面(activeKey=1)所需的数据
// 优先加载第一个页面(activeKey=1)所需的数据
await Promise.all([
this.getStationList(),
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
]);
])
// 初始化实时刷新
this.startRealtimeRefresh();
this.startRealtimeRefresh()
},
beforeUnmount() {
console.log('beforeUnmount')
clearInterval(this.interval); // 组件销毁时清除定时器
clearInterval(this.interval) // 组件销毁时清除定时器
},
methods: {
forceRerender() {
this.renderKey += 1;
this.renderKey += 1
},
resetDataForInactiveKey() {
// 重置非当前激活页面的数据,减少内存占用
// 重置非当前激活页面的数据,减少内存占用
Object.keys(this.echartsInfo).forEach((key) => {
if (key != this.activeKey) {
this.echartsInfo[key].chartData={}
this.echartsInfo[key].chartDatav={}
this.echartsInfo[key].chartData = {}
this.echartsInfo[key].chartDatav = {}
}
});
})
Object.keys(this.tableList).forEach((key) => {
if (key != this.activeKey) {
this.echartsInfo[key].tableData={}
this.echartsInfo[key].tableData = {}
}
});
})
},
async getEchartsListForActiveKey() {
if (!this.activeKey) return;
this.loading.chart = true;
const currentInfo = this.echartsInfo[this.activeKey];
if (!this.activeKey) return
this.loading.chart = true
const currentInfo = this.echartsInfo[this.activeKey]
const query = {
...this.paramsDate,
category: this.activeKey
};
}
try {
const res = await getReq('/queryStatDayList', query);
const res = await getReq('/queryStatDayList', query)
if (res.errcode === 0) {
this.echartsInfo[this.activeKey].chartData=res.data
this.loading.chart = false;
this.echartsInfo[this.activeKey].chartData = res.data
this.loading.chart = false
} else {
throw res;
throw res
}
} catch (error) {
this.loading.chart = false;
this.echartsInfo[this.activeKey].chartData={}
this.loading.chart = false
this.echartsInfo[this.activeKey].chartData = {}
}
},
// 专门获取当前激活页面的表格数据
async getTableListForActiveKey() {
this.loading.table = true;
if (!this.activeKey) return;
const currentInfo = this.tableList[this.activeKey];
this.loading.table = true
if (!this.activeKey) return
const currentInfo = this.tableList[this.activeKey]
const query = {
...this.paramsDate,
category: this.activeKey,
page_size: currentInfo.pageOption.pageSize,
pageNumber: currentInfo.pageOption.page
};
}
try {
const res = await getReq('/queryStatDayList', query);
const res = await getReq('/queryStatDayList', query)
if (res.errcode === 0) {
this.tableList[this.activeKey].tableData=res.data.list || res.data
this.tableList[this.activeKey].pageOption.count=res.data.count || 0
this.loading.table = false;
this.tableList[this.activeKey].tableData = res.data.list || res.data
this.tableList[this.activeKey].pageOption.count = res.data.count || 0
this.loading.table = false
} else {
throw res;
throw res
}
} catch (error) {
this.tableList[this.activeKey].tableData=[]
this.tableList[this.activeKey].pageOption.count= 0
this.loading.table = false;
this.tableList[this.activeKey].tableData = []
this.tableList[this.activeKey].pageOption.count = 0
this.loading.table = false
}
},
startRealtimeRefresh() {
this.interval = setInterval(() => {
if (this.activeKey) {
this.getStatCharts(); // 定时获取最新实时数据
this.getStatCharts() // 定时获取最新实时数据
}
}, 10000); // 30秒刷新一次
}, 10000) // 30秒刷新一次
},
async getStationList() {
const params = {
page_size: 1000,
@@ -655,21 +649,18 @@ export default {
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
this.tableList[this.activeKey].pageOption.page = e.page
this.getTableListForActiveKey()
},
onSearch(data) {
this.paramsDate.start_date = data.time ? data.time[0] : ''
this.paramsDate.end_date = data.time ? data.time[1] : ''
this.tableList[this.activeKey].pageOption.page = 1
this.getStationList(),
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
this.getStationList(), this.getEchartsListForActiveKey(), this.getTableListForActiveKey()
},
changeStation() {
this.getStatCharts();
this.getStatCharts()
},
// async getEchartsList() {
// const key = activeKey || this.activeKey;
// if (!key) return;
@@ -705,26 +696,23 @@ export default {
const res = await getReq('/queryStatCharts', query)
if (res.errcode === 0) {
this.echartsInfo[this.activeKey].chartDatav = {
"V":[100.0,100.0,100.0], // 电压曲线
"I":[10.0,10.0,10.0], // 电流曲线
"P":[1000.0,1000.0,1000.0], // 功率曲线
V: [100.0, 100.0, 100.0], // 电压曲线
I: [10.0, 10.0, 10.0], // 电流曲线
P: [1000.0, 1000.0, 1000.0] // 功率曲线
}
// x轴0点到24点
} else {
throw res
}
} catch (error) {
this.echartsInfo[this.activeKey].chartDatav = {
"V":[100.0,100.0,100.0], // 电压曲线
"I":[10.0,10.0,10.0], // 电流曲线
"P":[1000.0,1000.0,1000.0], // 功率曲线
V: [100.0, 100.0, 100.0], // 电压曲线
I: [10.0, 10.0, 10.0], // 电流曲线
P: [1000.0, 1000.0, 1000.0] // 功率曲线
}
}
},
}
// async getTableList() {
// const currentInfo = this.tableList[this.activeKey]

View File

@@ -3,7 +3,6 @@
<searchBox
:btn-option-list="btnOptionList"
@onSearch="onSearch"
:search-options="searchOptions"
@operateForm="operateForm"
></searchBox>

View File

@@ -3,7 +3,6 @@
<searchBox
:btn-option-list="btnOptionList"
@onSearch="onSearch"
:search-options="searchOptions"
@operateForm="operateForm"
></searchBox>
@@ -125,6 +124,8 @@ export default {
throw err
}
} catch (error) {
this.$refs.comTable.loading = false
//统一处理报错提示
}
},

View File

@@ -3,7 +3,6 @@
<searchBox
:btn-option-list="btnOptionList"
@onSearch="onSearch"
:search-options="searchOptions"
@operateForm="operateForm"
></searchBox>
@@ -145,6 +144,8 @@ export default {
}
} catch (error) {
//统一处理报错提示
this.$refs.comTable.loading = false
}
},
operateForm(type, record = {}) {

View File

@@ -3,7 +3,6 @@
<searchBox
:btn-option-list="btnOptionList"
@onSearch="onSearch"
:search-options="searchOptions"
@operateForm="operateForm"
></searchBox>
@@ -161,6 +160,8 @@ export default {
}
} catch (error) {
//统一处理报错提示
this.$refs.comTable.loading = false
}
},
operateForm(type, record = {}) {

View File

@@ -114,6 +114,8 @@ export default {
throw err
}
} catch (error) {
this.$refs.comTable.loading = false
//统一处理报错提示
}
},