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

马来西亚光伏拓扑图配置

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

599
pages/tabbar/components/topology/ceshiS.vue → pages/tabbar/components/topology/pv8FourthTopCenter.vue
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: []
}
},
created() {
this.list = new Array(12).fill(0).reduce((pre, cur, index) => {
return [...pre, ...[{
text: '45.12',
x: 270,
y: 700 + index * 87
},
{
text: '45.12',
x: 540,
y: 700 + index * 87
},
{
text: '--',
x: 870,
y: 700 + index * 87
},
{
text: '--',
x: 1050,
y: 700 + index * 87
},
]]
}, [])
computed: {
currentStation() {
return this.vuex_currentStation;
},
},
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)
watch: {
stationId(newVal, oldVal) {
if (newVal) {
this.tags
this.getData(newVal);
}
return fragment
}
},
mounted() {
this.$refs.svgBoxss?.appendChild(this.createSvgText(this.tags))
created() {
// 初始化list的逻辑调整到getData中，避免重复初始化
},
beforeDestroy() {
// 原有销毁逻辑保留
},
methods: {
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
}
]
},
/**
* 重新渲染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);
}
},
/**
* 获取数据并重新渲染
* @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;