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>
|