From b0a6891bceac9730c51c162efa90f9f88f2a8979 Mon Sep 17 00:00:00 2001 From: huangjp Date: Fri, 27 Feb 2026 09:13:55 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A9=AC=E6=9D=A5=E8=A5=BF=E4=BA=9A=E5=85=89?= =?UTF-8?q?=E4=BC=8F=E6=8B=93=E6=89=91=E5=9B=BE=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 4 +- .../device-detail/components/ammeter.vue | 28 +- .../{ceshiS.vue => pv8FourthTopCenter.vue} | 599 ++++++++++++++++-- pages/tabbar/dashboard.vue | 14 +- 4 files changed, 578 insertions(+), 67 deletions(-) rename pages/tabbar/components/topology/{ceshiS.vue => pv8FourthTopCenter.vue} (91%) diff --git a/manifest.json b/manifest.json index be967d9..f372011 100644 --- a/manifest.json +++ b/manifest.json @@ -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" : { diff --git a/pages/home-page/device-detail/components/ammeter.vue b/pages/home-page/device-detail/components/ammeter.vue index c5bf18b..d1252cf 100644 --- a/pages/home-page/device-detail/components/ammeter.vue +++ b/pages/home-page/device-detail/components/ammeter.vue @@ -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, diff --git a/pages/tabbar/components/topology/ceshiS.vue b/pages/tabbar/components/topology/pv8FourthTopCenter.vue similarity index 91% rename from pages/tabbar/components/topology/ceshiS.vue rename to pages/tabbar/components/topology/pv8FourthTopCenter.vue index ec09adb..923f882 100644 --- a/pages/tabbar/components/topology/ceshiS.vue +++ b/pages/tabbar/components/topology/pv8FourthTopCenter.vue @@ -1092,9 +1092,12 @@ - - - + + + + @@ -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); + } + } } -