zzkj/smart_storage_app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
00fb627dd3f3fda9f1947835470ff3edb2a149cd
smart_storage_app/pages/tabbar/components/topology/weishanhu.vue

599 lines
10 KiB
Vue
Raw Normal View History

初次提交
2025-06-30 10:21:25 +08:00
<template>
<view class="warp">
<topoCanvas cId="wshcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
</view>
</template>
<script>
import topoCanvas from '@/components/new-canvas/index.vue'
export default {
components: {
topoCanvas
},
data() {
return {
canvasData: [],
noloading:false,
partList: {},
// 文字
textCanvasData: [{
type: "text",
coord: [
[8, 25]
],
font: [{
text: "380" + this.$t("homePage.home.busbar"),
size: 12,
color: "#333333",
}]
},
{
type: "text",
coord: [
[28, 170]
],
font: [{
text: this.$t("homePage.home.load"),
size: 12,
color: "#666666",
width: 50,
}]
},
{
type: "text",
coord: [
[12, 185]
],
font: [{
text: "P(kW)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 40
},
]
},
{
type: "text",
coord: [
[155, 80]
],
font: [{
text: "P(kW)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 40
},
]
},
{
type: "text",
coord: [
[99, 170]
],
font: [{
text: this.$t("homePage.home.dieselGenerator"),
size: 12,
color: "#666666",
width: 50,
}],
},
{
type: "text",
coord: [
[100, 185]
],
font: [{
text: "P(kW)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 40
},
],
},
{
type: "text",
coord: [
[196, 195]
],
font: [{
text: this.$t("homePage.home.photovoltaic"),
size: 12,
color: "#666666",
width: 50,
}],
},
{
type: "text",
coord: [
[170, 210]
],
font: [{
text: "P(kW)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 40
},
],
},
{
type: "text",
coord: [
[288, 195]
],
font: [{
text: this.$t("homePage.home.battery"),
size: 12,
color: "#666666",
width: 50,
}],
},
{
type: "text",
coord: [
[250, 210]
],
font: [{
text: "SOC(%)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 50
},
],
},
{
type: "text",
coord: [
[250, 225]
],
font: [{
text: "SOH(%)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 50
},
],
}
],
// 图片
imageCanvasData: [{
//负载
type: "image",
url: "/static/topology/load.png",
coord: [
[18, 111],
[40, 40],
],
},
//ACDC
{
type: "image",
url: "/static/topology/DC.png",
coord: [
[229, 54],
[40, 40],
],
},
//发电机
{
type: "image",
url: "/static/topology/electric.png",
coord: [
[104, 111],
[40, 40],
],
},
{
//光伏
type: "image",
url: "/static/topology/pv.png",
coord: [
[186, 135],
[40, 40],
],
},
{
//电表
type: "image",
url: "/static/topology/dianchi.png",
coord: [
[279, 135],
[40, 40],
],
},
],
// 线
lineCanvasData: [{
type: "line",
coord: [
[8, 30],
[318, 30],
],
color: "#19875c",
width: 2,
dash: [10, 5],
},
{
type: "line",
coord: [
[38, 30],
[38, 110],
],
color: "#19875c",
width: 2,
dash: [10, 5],
},
{
type: "line",
coord: [
[124, 30],
[124, 110],
],
color: "#19875c",
width: 2,
dash: [10, 5],
},
{
type: "line",
coord: [
[250, 30],
[250, 55],
],
color: "#19875c",
width: 2,
dash: [10, 5],
},
{
type: "line",
coord: [
[250, 96],
[250, 104],
],
color: "#19875c",
width: 2,
dash: [10, 5],
},
{
type: "line",
coord: [
[204, 132],
[204, 104],
],
color: "#19875c",
width: 2,
dash: [10, 5],
},
{
type: "line",
coord: [
[204, 104],
[298, 104],
],
color: "#19875c",
width: 2,
dash: [10, 5],
},
{
type: "line",
coord: [
[298, 132],
[298, 104],
],
color: "#19875c",
width: 2,
dash: [10, 5],
}
],
// 点
circleCanvasData: [
{
type: "circle",
coord: [
[38, 30]
],
color: "#3AECA1",
isMove: false,
r: 3,
},
{
type: "circle",
coord: [
[124, 30]
],
color: "#3AECA1",
isMove: false,
r: 3,
},
{
type: "circle",
coord: [
[250, 30]
],
color: "#3AECA1",
isMove: false,
r: 3,
},
]
}
},
computed: {
currentStation() {
return this.vuex_currentStation;
},
},
methods: {
changeEnglish(){
this.textCanvasData = [{
type: "text",
coord: [
[8, 25]
],
font: [{
text: "380" + this.$t("homePage.home.busbar"),
size: 12,
color: "#333333",
}]
},
{
type: "text",
coord: [
[28, 170]
],
font: [{
text: this.$t("homePage.home.load"),
size: 12,
color: "#666666",
width: 50,
}]
},
{
type: "text",
coord: [
[12, 185]
],
font: [{
text: "P(kW)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 40
},
]
},
{
type: "text",
coord: [
[155, 80]
],
font: [{
text: "P(kW)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 40
},
]
},
{
type: "text",
coord: [
[99, 170]
],
font: [{
text: this.$t("homePage.home.dieselGenerator"),
size: 12,
color: "#666666",
width: 50,
}],
},
{
type: "text",
coord: [
[100, 185]
],
font: [{
text: "P(kW)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 40
},
],
},
{
type: "text",
coord: [
[196, 195]
],
font: [{
text: this.$t("homePage.home.photovoltaic"),
size: 12,
color: "#666666",
width: 50,
}],
},
{
type: "text",
coord: [
[170, 210]
],
font: [{
text: "P(kW)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 40
},
],
},
{
type: "text",
coord: [
[288, 195]
],
font: [{
text: this.$t("homePage.home.battery"),
size: 12,
color: "#666666",
width: 50,
}],
},
{
type: "text",
coord: [
[250, 210]
],
font: [{
text: "SOC(%)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 50
},
],
},
{
type: "text",
coord: [
[250, 225]
],
font: [{
text: "SOH(%)：",
size: 12,
color: "#666666",
width: 50,
},
{
text: "",
size: 12,
color: "#333333",
left: 50
},
],
}
]
},
getData(val){
this.stationId = val
this.clearData()
const api = [this.getMiddleData()]
Promise.all(api).finally((result) => {
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
.lineCanvasData, ...this.circleCanvasData
]
this.noloading = true
});
},
clearData(){
this.textCanvasData[2].font[1].text = ''
//ACDC
this.textCanvasData[3].font[1].text = ''
//柴油发电机
this.textCanvasData[5].font[1].text = ''
//光伏
this.textCanvasData[7].font[1].text = ''
// 电池
this.textCanvasData[9].font[1].text = ''
this.textCanvasData[10].font[1].text = ''
},
getMiddleData() {
let self = this;
return new Promise((resolve, reject) => {
self.$u.api.homePageData
.GetWSHStatus({
stationId: this.stationId,
})
.then((res) => {
//负载
this.textCanvasData[2].font[1].text = res.data.epsActivePower !== null ? res.data.epsActivePower + '': ''
//ACDC
this.textCanvasData[3].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
//柴油发电机
this.textCanvasData[5].font[1].text = res.data.cfActivePower !== null ? res.data.cfActivePower + '' : ''
//光伏
this.textCanvasData[7].font[1].text = res.data.acActivePower !== null ? res.data.acActivePower + '' : ''
// 电池
this.textCanvasData[9].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
this.textCanvasData[10].font[1].text = res.data.soc !== null ? res.data.soh + '' : ''
resolve()
})
})
}
}
}
</script>
<style lang="scss" scoped>
.warp {
width: 650rpx;
height: 500rpx;
position: relative;
}
</style>
Reference in New Issue Copy Permalink