zzkj/smart_storage_app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

svg拓扑图修改为canvas拓扑图

Browse Source
This commit is contained in:
huangjp
2026-03-09 14:50:40 +08:00
parent b0a6891bce
commit ad1d898e7d
30 changed files with 5463 additions and 3395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
pages/tabbar/components/dischargeChart/index.vue
View File

@ -14,7 +14,11 @@
return {
charge_option: {},
stationId: null,
chartLoading: false
chartLoading: false,
chartChargePv:{
chartChargeEle:[],
chartPv:[]
}
}
},
props: {
@ -27,13 +31,16 @@
currentStation() {
return this.vuex_currentStation;
},
inverterFlag(){
return this.vuex_inverterFlag;
},
},
watch: {
currentStation: {
handler(val) {
if (val && val.id) {
this.stationId = val.id
this.GetChargeChart()
this.getData();
}
},
deep: true,
@ -42,7 +49,7 @@
activeTime: {
handler(val) {
if (val && this.stationId) {
this.GetChargeChart()
this.getData();
}
},
deep: true,
@ -51,8 +58,32 @@
},
methods: {
getData() {
this.GetChargeChart()
async getData() {
await this.GetChargeChart()
if(this.inverterFlag === 1){
this.GetPvChart()
}
},
async GetPvChart() {
this.chartLoading = true
//充放电曲线
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.getPvElecData({
stationId: this.stationId,
type: this.activeTime,
})
.then((res) => {
self.chartLoading = false;
self.chartChargePv.chartPv = res.data;
self.initChargeChart(self.chartChargePv);
resolve();
})
.catch((err) => {
reject("错误");
});
});
},
async GetChargeChart() {
this.chartLoading = true
@ -66,7 +97,11 @@
})
.then((res) => {
self.chartLoading = false
self.initChargeChart(res.data);
if(self.inverterFlag !== 1){
self.initChargeChart(res.data);
}else{
self.chartChargePv.chartChargeEle = res.data;
}
resolve();
})
.catch((err) => {
@ -80,12 +115,13 @@
let discharge_data = [];
let pv_data = [];
let benefit_data = [];
if (val && val.length > 0) {
val.forEach((item) => {
let self = this;
if (val.chartChargeEle && val.chartChargeEle.length > 0) {
val.chartChargeEle.forEach((item,idx) => {
x_data.push(item.date);
charge_data.push(item.chargeElec);
discharge_data.push(item.dischargeElec);
pv_data.push(item.pvChargeElec);
if(self.inverterFlag === 1){pv_data.push(val.chartPv.length > 0? val.chartPv[idx].powerGenerate:'0')};
benefit_data.push(item.income);
});
} else {
@ -95,6 +131,43 @@
pv_data = [0, 0, 0, 0, 0, 0, 0];
benefit_data = [0, 0, 0, 0, 0, 0, 0];
}
let optionConfigPv = {
color: ["#009458", "#BFE49F", "#3977B1"],
legend:[this.$t('homePage.home.charge'), this.$t('homePage.home.disCharge'), this.$t(
'homePage.home.photovoltaicCharge')],
series: [{
data: charge_data,
type: "bar",
name: this.$t('homePage.home.charge'),
},
{
data: discharge_data,
type: "bar",
name: this.$t('homePage.home.disCharge'),
},
{
data: pv_data,
type: "bar",
name: this.$t('homePage.home.photovoltaicCharge'),
}
]
};
let optionConfig = {
color: ["#009458", "#BFE49F"],
legend:[this.$t('homePage.home.charge'), this.$t('homePage.home.disCharge')],
series: [{
data: charge_data,
type: "bar",
name: this.$t('homePage.home.charge'),
},
{
data: discharge_data,
type: "bar",
name: this.$t('homePage.home.disCharge'),
}
]
};
//充放电图表
this.charge_option = {
tooltip: {
@ -144,7 +217,7 @@
return [x, y];
},
},
color: ["#009458", "#BFE49F", "#3977B1"],
color: self.inverterFlag === 1? optionConfigPv.color:optionConfig.color,
legend: {
animation: false,
right: "0",
@ -152,8 +225,7 @@
icon: "rect",
itemWidth: 10,
itemHeight: 10,
data: [this.$t('homePage.home.charge'), this.$t('homePage.home.disCharge'), this.$t(
'homePage.home.photovoltaicCharge')],
data: self.inverterFlag === 1? optionConfigPv.legend:optionConfig.legend,
},
grid: {
left: "15%",
@ -211,23 +283,7 @@
},
},
},
series: [{
data: charge_data,
type: "bar",
name: this.$t('homePage.home.charge'),
},
{
data: discharge_data,
type: "bar",
name: this.$t('homePage.home.disCharge'),
},
{
data: pv_data,
type: "bar",
name: this.$t('homePage.home.photovoltaicCharge'),
},
],
series: self.inverterFlag === 1? optionConfigPv.series:optionConfig.series,
};
},
},

4094
pages/tabbar/components/topology/ceshiL.vue
View File

File diff suppressed because one or more lines are too long

2
pages/tabbar/components/topology/cixi.vue
View File

@ -1014,7 +1014,7 @@
stationId: this.stationId,
})
.then((res) => {
console.log(this.textCanvasData);
// console.log(this.textCanvasData);
this.partList = res.data
this.textCanvasData[5].font[1].text = this.partList.length ? this.partList[0].soc + '' : "";
this.textCanvasData[6].font[1].text = this.partList.length ? this.partList[0].soh + '' : "";

1209
pages/tabbar/components/topology/pv2AndStorageSts.vue Normal file
View File

File diff suppressed because it is too large Load Diff

3270
pages/tabbar/components/topology/pv8FourthTopCenter.vue
View File

File diff suppressed because one or more lines are too long

16
pages/tabbar/dashboard.vue
View File

@ -54,6 +54,11 @@
<third v-else-if="topologyType === 13" ref="tuopu" />
<mdPviese v-else-if="topologyType === 14" ref="tuopu" />
<pv8FourthTopCenter v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 5" ref="tuopu" />
<pv2AndStorageSts v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 4" ref="tuopu" />
<!-- <third v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 4" ref="tuopu" /> -->
<!-- <cixi v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 3" ref="tuopu" /> -->
<!-- <ceshiL v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 2" ref="tuopu" /> -->
<!-- <cixi v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 1" ref="tuopu" /> -->
<standard v-else ref="tuopu" />
</view>
</view>
@ -122,7 +127,8 @@
import Section from "@/components/section/index";
import charts from "@/components/charts/index";
import cixi from './components/topology/cixi'
import ceshiT from './components/topology/ceshiT.vue'
import pv2AndStorageSts from './components/topology/pv2AndStorageSts.vue'
// import pv8FourthTopCenter from './components/topology/ceshiL.vue'
import ceshiL from './components/topology/ceshiL.vue'
import pv8FourthTopCenter from './components/topology/pv8FourthTopCenter.vue'
@ -153,7 +159,7 @@
export default {
components: {
ceshiT,
pv2AndStorageSts,
ceshiL,
pv8FourthTopCenter,
pv2first,
@ -301,7 +307,6 @@
if (val && val.id) {
this.stationId = val.id
this.userId = this.userData.userId
console.log('topologyType:',val);
this.topologyType = val.topologyType
// 重置加载状态，避免复用旧状态
this.componentsLoaded = false
@ -315,6 +320,9 @@
if (this.$refs.deviceFire) {
this.$refs.deviceFire.getData(this.stationId)
}
if (this.$refs.dischargeChart) {
this.$refs.dischargeChart.getData()
}
});
});
}
@ -399,11 +407,9 @@
try {
const { data } = await this.$u.api.homePageData.GetHomePageComponents(this.stationId);
if (data && data.length > 0) {
console.log(data)
this.rightCenter = data[0]?.rightCenter;
const matchedItem = this.topCenterPvArr.find(item => item.name === data[0]?.topCenter);
this.pvTopologyType = matchedItem ? matchedItem.value : this.pvTopologyType;
console.log(this.pvTopologyType)
}
// 接口完成，标记加载状态为true
this.componentsLoaded = true

8
pages/tabbar/mine.vue
View File

@ -12,7 +12,7 @@
<view class="bg-box">
<view class="userinfo">
<view class="image" @click="navTo('info')">
<image style="width: 100%" src="/static/aidex/login/bg-logo2.png"></image>
<image style="width: 100%" src="/static/aidex/login/bg-logo1.png"></image>
</view>
<view class="info" style="display: flex; justify-content: space-between">
<view>
@ -306,9 +306,9 @@
.image {
flex-shrink: 0;
width: 60%;
margin-top: 100rpx;
height: 150rpx;
width: 40%;
margin-top: 80rpx;
height: 200rpx;
image {
width: 100%;