马来西亚光伏拓扑图配置

This commit is contained in:
huangjp
2026-02-27 09:13:55 +08:00
parent 4c3039ade7
commit b0a6891bce
4 changed files with 578 additions and 67 deletions

View File

@ -2,8 +2,8 @@
"name" : "Zeta Cloud",
"appid" : "__UNI__86592F3",
"description" : "Zetatech",
"versionName" : "2.0.13",
"versionCode" : 218,
"versionName" : "2.0.14",
"versionCode" : 219,
"transformPx" : false,
"sassImplementationName" : "node-sass",
"app-plus" : {

View File

@ -903,7 +903,19 @@
}
},
color: ['#009458', '#f0c252', '#0f94da'],
legend: {},
legend: {
type: 'scroll',
orient: 'horizontal',
icon: "rect",
bottom: 0,
left: 0,
right: 0,
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: 10,
}
},
xAxis: {
type: 'category',
boundaryGap: false,
@ -1085,7 +1097,19 @@
}
},
color: ['#009458', '#f0c252', '#0f94da'],
legend: {},
legend: {
type: 'scroll',
orient: 'horizontal',
icon: "rect",
bottom: 0,
left: 0,
right: 0,
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: 10,
}
},
xAxis: {
type: 'category',
boundaryGap: false,

View File

@ -1092,9 +1092,12 @@
<circle id="myCircle" cx="220" cy="64" r="16" fill="#0DA17D"></circle>
<circle id="myCircle" cx="960" cy="64" r="16" fill="#FB4444"></circle>
<!-- 动画元素 -->
<circle id="myCircle" cx="280" cy="64" r="10" fill="#FFFFFF">
<animate attributeName="cx" from="280" to="920" dur="800ms" fill="freeze" repeatCount="indefinite" />
</circle>
<!-- <circle id="myCircle" cx="280" cy="66" r="14" fill="rgb(0,128,127)">
<animate attributeName="cx" from="280" to="920" dur="3000ms" fill="freeze" repeatCount="indefinite" />
</circle> -->
<!-- 新增一个容器来存放动态文本方便管理 -->
<g ref="svgTextContainer"></g>
</svg>
</view>
@ -1104,43 +1107,34 @@
export default {
data() {
return {
stationId: '', // stationId
tags: [{
text: '100kW',
text:this.$t("homePage.home.grid"),
x: 0,
y: 194
},
{
text: '100kW',
text: this.$t("homePage.home.load"),
x: 1000,
y: 194
},
{
text: '计量电表功率(kW):100',
x: 540,
y: 370
},
{
text: '防逆流电表功率(kW):120',
x: 540,
y: 430
},
{
text: '运行功率',
text: this.$t('homePage.home.operatingPower'),
x: 240,
y: 560
},
{
text: '(kW):100',
text: '(kW)',
x: 240,
y: 620
},
{
text: '累计电量',
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
x: 520,
y: 560
},
{
text: '(kWh):100',
text: '(kWh)',
x: 520,
y: 620
},
@ -1168,52 +1162,541 @@
list: []
}
},
computed: {
currentStation() {
return this.vuex_currentStation;
},
},
watch: {
stationId(newVal, oldVal) {
if (newVal) {
this.tags
this.getData(newVal);
}
}
},
created() {
this.list = new Array(12).fill(0).reduce((pre, cur, index) => {
return [...pre, ...[{
text: '45.12',
x: 270,
y: 700 + index * 87
// listgetData
},
{
text: '45.12',
x: 540,
y: 700 + index * 87
},
{
text: '--',
x: 870,
y: 700 + index * 87
},
{
text: '--',
x: 1050,
y: 700 + index * 87
},
]]
}, [])
beforeDestroy() {
//
},
methods: {
createSvgText(tags) {
let fragment = new DocumentFragment() //
for (let tag of [...tags,...this.list]) {
let text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
text.innerHTML = tag.text
text.setAttribute('x', tag.x.toString())
text.setAttribute('y', tag.y.toString())
text.setAttribute('font-size', '48')
text.setAttribute('fill', '#7F7F7F')
fragment.appendChild(text)
changeEnglish() {
this.tags = [{
text:this.$t("homePage.home.grid"),
x: 0,
y: 194
},
{
text: this.$t("homePage.home.load"),
x: 1000,
y: 194
},
{
text: this.$t('homePage.home.operatingPower'),
x: 240,
y: 560
},
{
text: '(kW)',
x: 240,
y: 620
},
{
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
x: 520,
y: 560
},
{
text: '(kWh)',
x: 520,
y: 620
},
{
text: 'SOC',
x: 850,
y: 560
},
{
text: '%',
x: 850,
y: 620
},
{
text: 'SOH',
x: 1050,
y: 560
},
{
text: '%',
x: 1050,
y: 620
}
return fragment
]
},
/**
* 重新渲染SVG文本
* @param {Array} tags 静态文本数组
* @param {Array} list 动态数据数组
*/
async renderSvgText(tags, list) {
try {
//
const textContainer = this.$refs.svgTextContainer;
if (!textContainer) return;
//
while (textContainer.firstChild) {
textContainer.removeChild(textContainer.firstChild);
}
//
let fragment = new DocumentFragment();
//
const allText = [...tags, ...list];
//
for (let tag of allText) {
if (!tag || !tag.hasOwnProperty('x') || !tag.hasOwnProperty('y')) continue;
let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.textContent = tag.text || '--'; //
text.setAttribute('x', tag.x.toString());
text.setAttribute('y', tag.y.toString());
text.setAttribute('font-size', '48');
text.setAttribute('fill', '#7F7F7F');
fragment.appendChild(text);
}
//
textContainer.appendChild(fragment);
} catch (error) {
console.error('渲染SVG文本失败:', error);
}
},
mounted() {
this.$refs.svgBoxss?.appendChild(this.createSvgText(this.tags))
/**
* 获取数据并重新渲染
* @param {String} val 站点ID
*/
async getData(val) {
if (!val) return;
this.stationId = val;
this.list = []; //
try {
const api = [
this.getpv1(), this.getpv2(), this.getpv3(), this.getpv4(),
this.getpv5(), this.getpv6(), this.getpv7(), this.getpv8(),
this.getPcs1(), this.getPcs2(), this.getPcs3(), this.getPcs4(),
this.getacdcCenter(), this.getAmmeter()
];
//
await Promise.all(api);
// SVG
this.renderSvgText(this.tags, this.list);
} catch (error) {
console.error('获取数据失败:', error);
// 使
this.renderSvgText(this.tags, this.list);
}
},
// ========== ==========
getAmmeter() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-ammeter'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.name + item.value,
x: 540,
y: 370 + index * 60
})
//
})
}
resolve()
})
.catch(reject); //
})
},
getacdcCenter() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-acdc-center'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
//
})
}
resolve()
})
.catch(reject); //
})
},
getpv1() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pv-1'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: (index + 1) * 270,
y: 700 + 0 * 87
})
})
this.list.push(
{ text: '--', x: 870, y: 700 + 0 * 87 },
{ text: '--', x: 1050, y: 700 + 0 * 87 }
)
}
resolve()
})
.catch(reject); //
})
},
getpv2() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pv-2'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: (index + 1) * 270,
y: 700 + 1 * 87
})
})
this.list.push(
{ text: '--', x: 870, y: 700 + 1 * 87 },
{ text: '--', x: 1050, y: 700 + 1 * 87 }
)
}
resolve()
})
.catch(reject); //
})
},
getPcs1() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pcs-1'
})
.then((res) => {
if (res.data && res.data.length) {
this.list.push(
{ text: '--', x: 270, y: 700 + 2 * 87 },
{ text: '--', x: 540, y: 700 + 2 * 87 }
)
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: 870 + index * 180,
y: 700 + 2 * 87
})
})
}
resolve()
})
.catch(reject); //
})
},
getpv3() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pv-3'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: (index + 1) * 270,
y: 700 + 3 * 87
})
})
this.list.push(
{ text: '--', x: 870, y: 700 + 3 * 87 },
{ text: '--', x: 1050, y: 700 + 3 * 87 }
)
}
resolve()
})
.catch(reject); //
})
},
getpv4() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pv-4'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: (index + 1) * 270,
y: 700 + 4 * 87
})
})
this.list.push(
{ text: '--', x: 870, y: 700 + 4 * 87 },
{ text: '--', x: 1050, y: 700 + 4 * 87 }
)
}
resolve()
})
.catch(reject); //
})
},
getPcs2() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pcs-2'
})
.then((res) => {
if (res.data && res.data.length) {
this.list.push(
{ text: '--', x: 270, y: 700 + 5 * 87 },
{ text: '--', x: 540, y: 700 + 5 * 87 }
)
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: 870 + index * 180,
y: 700 + 5 * 87
})
})
}
resolve()
})
.catch(reject); //
})
},
getpv5() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pv-5'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: (index + 1) * 270,
y: 700 + 6 * 87
})
})
this.list.push(
{ text: '--', x: 870, y: 700 + 6 * 87 },
{ text: '--', x: 1050, y: 700 + 6 * 87 }
)
}
resolve()
})
.catch(reject); //
})
},
getpv6() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pv-6'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: (index + 1) * 270,
y: 700 + 7 * 87
})
})
this.list.push(
{ text: '--', x: 870, y: 700 + 7 * 87 },
{ text: '--', x: 1050, y: 700 + 7 * 87 }
)
}
resolve()
})
.catch(reject); //
})
},
getPcs3() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pcs-3'
})
.then((res) => {
if (res.data && res.data.length) {
this.list.push(
{ text: '--', x: 270, y: 700 + 8 * 87 },
{ text: '--', x: 540, y: 700 + 8 * 87 }
)
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: 870 + index * 180,
y: 700 + 8 * 87
})
})
}
resolve()
})
.catch(reject); //
})
},
getpv7() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pv-7'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: (index + 1) * 270,
y: 700 + 9 * 87
})
})
this.list.push(
{ text: '--', x: 870, y: 700 + 9 * 87 },
{ text: '--', x: 1050, y: 700 + 9 * 87 }
)
}
resolve()
})
.catch(reject); //
})
},
getpv8() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pv-8'
})
.then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: (index + 1) * 270,
y: 700 + 10 * 87
})
})
this.list.push(
{ text: '--', x: 870, y: 700 + 10 * 87 },
{ text: '--', x: 1050, y: 700 + 10 * 87 }
)
}
resolve()
})
.catch(reject); //
})
},
getPcs4() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetDynamicConfig({
stationId: this.stationId,
pageLocation: 'triad-pcs-4'
})
.then((res) => {
if (res.data && res.data.length) {
this.list.push(
{ text: '--', x: 270, y: 700 + 11 * 87 },
{ text: '--', x: 540, y: 700 + 11 * 87 }
)
res.data.forEach((item, index) => {
this.list.push({
text: item.value,
x: 870 + index * 180,
y: 700 + 11 * 87
})
})
}
resolve()
})
.catch(reject); //
})
}
},
async mounted() {
// stationId
if (this.stationId) {
await this.getData(this.stationId);
}
}
}
</script>
<style>
.label_tp01 {
font-family: Arial, sans-serif;

View File

@ -53,7 +53,7 @@
<runda215 v-else-if="topologyType === 12" ref="tuopu" />
<third v-else-if="topologyType === 13" ref="tuopu" />
<mdPviese v-else-if="topologyType === 14" ref="tuopu" />
<pv2first v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 3" ref="tuopu" />
<pv8FourthTopCenter v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 5" ref="tuopu" />
<standard v-else ref="tuopu" />
</view>
</view>
@ -124,7 +124,7 @@
import cixi from './components/topology/cixi'
import ceshiT from './components/topology/ceshiT.vue'
import ceshiL from './components/topology/ceshiL.vue'
import ceshiS from './components/topology/ceshiS.vue'
import pv8FourthTopCenter from './components/topology/pv8FourthTopCenter.vue'
import pv2first from './components/topology/pv2first.vue'
@ -155,7 +155,7 @@
components: {
ceshiT,
ceshiL,
ceshiS,
pv8FourthTopCenter,
pv2first,
myGrid,
stationDropdow,
@ -209,7 +209,8 @@
{name:'pv1AndStorage_261',value:1},
{name:'pv1AndStorage_sts_261',value:2},
{name:'pv2AndStorage_261',value:3},
{name:'pv2AndStorage_sts_261',value:4}
{name:'pv2AndStorage_sts_261',value:4},
{name:'pv8FourthTopCenter',value:5}
],
pvTopologyType:0,
society: [{
@ -300,6 +301,7 @@
if (val && val.id) {
this.stationId = val.id
this.userId = this.userData.userId
console.log('topologyType:',val);
this.topologyType = val.topologyType
// 重置加载状态,避免复用旧状态
this.componentsLoaded = false
@ -397,9 +399,11 @@
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
@ -578,7 +582,7 @@
.loading-tip {
width: 650rpx;
height: 710rpx;
// height: 710rpx;
position: relative;
}
.top-right-box {