599 lines
10 KiB
Vue
599 lines
10 KiB
Vue
<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> |