589 lines
11 KiB
Vue
589 lines
11 KiB
Vue
<template>
|
||
<view class="warp">
|
||
<topoCanvas cId="canvas" :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,
|
||
// 文字
|
||
textCanvasData: [
|
||
{
|
||
type: "text",
|
||
coord: [[80, 128]],
|
||
font: [
|
||
{
|
||
text: "STS",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[172, 100]],
|
||
font: [
|
||
{
|
||
text: this.$t("homePage.home.ammeter"),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[155, 115]],
|
||
font: [
|
||
{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left:40
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[258, 65]],
|
||
font: [
|
||
{
|
||
text: this.$t("homePage.home.load"),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[149, 215]],
|
||
font: [
|
||
{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[35, 325]],
|
||
font: [
|
||
{
|
||
text: this.$t("homePage.home.photovoltaic"),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[30, 340]],
|
||
font: [
|
||
{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[281, 325]],
|
||
font: [
|
||
{
|
||
text: this.$t("homePage.home.battery"),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[245, 340]],
|
||
font: [
|
||
{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[245, 355]],
|
||
font: [
|
||
{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
|
||
// 图片
|
||
imageCanvasData: [
|
||
{
|
||
//电网
|
||
type: "image",
|
||
url: "/static/topology/dianwang.png",
|
||
coord: [
|
||
[4, 15],
|
||
[40, 40],
|
||
],
|
||
},
|
||
//STS
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/STS.png",
|
||
coord: [
|
||
[115, 108],
|
||
[23, 40],
|
||
],
|
||
},
|
||
{
|
||
//电表
|
||
type: "image",
|
||
url: "/static/topology/ammeter.png",
|
||
coord: [
|
||
[164, 48],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/load.png",
|
||
coord: [
|
||
[250, 15],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/DC.png",
|
||
coord: [
|
||
[106, 188],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
//电表
|
||
type: "image",
|
||
url: "/static/topology/pv.png",
|
||
coord: [
|
||
[27, 274],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
//电表
|
||
type: "image",
|
||
url: "/static/topology/dianchi.png",
|
||
coord: [
|
||
[273, 274],
|
||
[40, 40],
|
||
],
|
||
},
|
||
],
|
||
// 线
|
||
lineCanvasData: [
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[38, 36],
|
||
[274, 36],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[125, 36],
|
||
[125, 119],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[125, 156],
|
||
[125, 186],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[125, 225],
|
||
[125, 250],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[125, 68],
|
||
[173, 68],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[47, 251],
|
||
[47, 271],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[47, 251],
|
||
[292, 251],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[292, 251],
|
||
[292, 271],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/load.png",
|
||
coord: [
|
||
[250, 15],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/DC.png",
|
||
coord: [
|
||
[106, 188],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
//电表
|
||
type: "image",
|
||
url: "/static/topology/pv.png",
|
||
coord: [
|
||
[27, 274],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
//电表
|
||
type: "image",
|
||
url: "/static/topology/dianchi.png",
|
||
coord: [
|
||
[273, 274],
|
||
[40, 40],
|
||
],
|
||
},
|
||
],
|
||
// 点
|
||
circleCanvasData: [
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
currentStation() {
|
||
return this.vuex_currentStation;
|
||
},
|
||
},
|
||
|
||
methods:{
|
||
changeEnglish(){
|
||
this.textCanvasData = [
|
||
{
|
||
type: "text",
|
||
coord: [[80, 128]],
|
||
font: [
|
||
{
|
||
text: "STS",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[172, 100]],
|
||
font: [
|
||
{
|
||
text: this.$t("homePage.home.ammeter"),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[155, 115]],
|
||
font: [
|
||
{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left:40
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[258, 65]],
|
||
font: [
|
||
{
|
||
text: this.$t("homePage.home.load"),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[149, 215]],
|
||
font: [
|
||
{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[35, 325]],
|
||
font: [
|
||
{
|
||
text: this.$t("homePage.home.photovoltaic"),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[30, 340]],
|
||
font: [
|
||
{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[281, 325]],
|
||
font: [
|
||
{
|
||
text: this.$t("homePage.home.battery"),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[245, 340]],
|
||
font: [
|
||
{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [[245, 355]],
|
||
font: [
|
||
{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50,
|
||
},
|
||
],
|
||
},
|
||
]
|
||
|
||
},
|
||
clearData(){
|
||
this.textCanvasData[2].font[1].text = ''
|
||
|
||
//ACDC
|
||
this.textCanvasData[4].font[1].text = ''
|
||
|
||
//光伏
|
||
this.textCanvasData[6].font[1].text = ''
|
||
|
||
//电池
|
||
this.textCanvasData[8].font[1].text = ''
|
||
this.textCanvasData[9].font[1].text = ''
|
||
},
|
||
getData(val){
|
||
this.stationId = val.id
|
||
this.clearData()
|
||
const api = [this.getMiddleData()]
|
||
Promise.all(api).finally((result) => {
|
||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||
.lineCanvasData, ...this.circleCanvasData
|
||
]
|
||
this.noloading = true
|
||
});
|
||
},
|
||
getMiddleData(){
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetZzhbtatus({
|
||
stationId: this.stationId,
|
||
})
|
||
.then((res) => {
|
||
|
||
|
||
//电表
|
||
this.textCanvasData[2].font[1].text = res.data.activePower !== null ? res.data.activePower + '' : ''
|
||
|
||
//ACDC
|
||
this.textCanvasData[4].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
|
||
|
||
//光伏
|
||
this.textCanvasData[6].font[1].text = res.data.acActivePower !== null ? res.data.acActivePower + '' : ''
|
||
|
||
//电池
|
||
this.textCanvasData[8].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
|
||
this.textCanvasData[9].font[1].text = res.data.soh !== null ? res.data.soh + '' : ''
|
||
|
||
// this.textCanvasData[3].font[1].text = this.partList.acActivePower !== null ? this.partList.acActivePower + '' : ''
|
||
// //ACDC
|
||
// this.textCanvasData[1].font[1].text = this.partList.activePowerPCS !== null ? this.partList.activePowerPCS + '' : ''
|
||
// //电池
|
||
// this.batteryData[2].font[1].text = this.partList.soc !== null ? this.partList.soc + '' : ''
|
||
// this.batteryData[3].font[1].text = this.partList.soh !== null ? this.partList.soh + '' : ''
|
||
|
||
resolve();
|
||
})
|
||
.catch((err) => {
|
||
reject("错误");
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.warp {
|
||
width: 650rpx;
|
||
height: 770rpx;
|
||
position: relative;
|
||
}
|
||
</style> |