1371 lines
24 KiB
Vue
1371 lines
24 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: [],
|
||
partList:[],
|
||
noloading:false,
|
||
// 文字
|
||
textCanvasData: [{
|
||
type: "text",
|
||
coord: [
|
||
[155, 100]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.allActivePower"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 90
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[5, 70]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.grid"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
}],
|
||
}, {
|
||
type: "text",
|
||
coord: [
|
||
[258, 65]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.load"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
}],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[0, 340]
|
||
],
|
||
font: [{
|
||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[21, 355]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
},
|
||
{
|
||
text: "123",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[11, 370]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[1, 385]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[0, 400]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[68, 340]
|
||
],
|
||
font: [{
|
||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[62, 242]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[52, 227]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[42, 212]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[41, 198]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[137, 340]
|
||
],
|
||
font: [{
|
||
text: "3#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[142, 355]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[132, 370]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[122, 385]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[121, 400]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[206, 340]
|
||
],
|
||
font: [{
|
||
text: "4#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[227, 242]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[217, 227]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[207, 212]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[206, 198]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[275, 340]
|
||
],
|
||
font: [{
|
||
text: "5#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[264, 355]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[254, 370]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[244, 385]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[243, 400]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
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/dianchi.png",
|
||
coord: [
|
||
[5, 283],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/dianchi.png",
|
||
coord: [
|
||
[74, 283],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/dianchi.png",
|
||
coord: [
|
||
[143, 283],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/dianchi.png",
|
||
coord: [
|
||
[212, 283],
|
||
[40, 40],
|
||
],
|
||
},
|
||
{
|
||
type: "image",
|
||
url: "/static/topology/dianchi.png",
|
||
coord: [
|
||
[281, 283],
|
||
[40, 40],
|
||
],
|
||
},
|
||
],
|
||
// 线
|
||
lineCanvasData: [
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[45, 36],
|
||
[245, 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, 150],
|
||
[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: [
|
||
[22, 251],
|
||
[22, 282],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[22, 251],
|
||
[298, 251],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[95, 251],
|
||
[95, 282],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[161, 251],
|
||
[161, 282],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[229, 251],
|
||
[229, 282],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
{
|
||
type: "line",
|
||
coord: [
|
||
[298, 251],
|
||
[298, 282],
|
||
],
|
||
color: "#19875c",
|
||
width: 2,
|
||
dash: [10, 5],
|
||
},
|
||
],
|
||
// 点
|
||
circleCanvasData: [
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[45, 36]
|
||
],
|
||
color: "#3AECA1",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[245, 36]
|
||
],
|
||
color: "#3AECA1",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[22, 251]
|
||
],
|
||
color: "#3AECA1",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[95, 251]
|
||
],
|
||
color: "#3AECA1",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[162, 251]
|
||
],
|
||
color: "#3AECA1",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[229, 251]
|
||
],
|
||
color: "#3AECA1",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[298, 251]
|
||
],
|
||
color: "#3AECA1",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
currentStation() {
|
||
return this.vuex_currentStation;
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
changeEnglish(){
|
||
this.textCanvasData = [{
|
||
type: "text",
|
||
coord: [
|
||
[155, 100]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.allActivePower"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 90
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[5, 70]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.grid"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
}],
|
||
}, {
|
||
type: "text",
|
||
coord: [
|
||
[258, 65]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.load"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
}],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[0, 340]
|
||
],
|
||
font: [{
|
||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[21, 355]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
},
|
||
{
|
||
text: "123",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[11, 370]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[1, 385]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[0, 400]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[68, 340]
|
||
],
|
||
font: [{
|
||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[62, 242]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[52, 227]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[42, 212]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[41, 198]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[137, 340]
|
||
],
|
||
font: [{
|
||
text: "3#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[142, 355]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[132, 370]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[122, 385]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[121, 400]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[206, 340]
|
||
],
|
||
font: [{
|
||
text: "4#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[227, 242]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[217, 227]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[207, 212]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[206, 198]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[275, 340]
|
||
],
|
||
font: [{
|
||
text: "5#" + this.$t("homePage.home.cabinet"),
|
||
size: 12,
|
||
color: "#333333",
|
||
}, ],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[264, 355]
|
||
],
|
||
font: [{
|
||
text: this.$t("homePage.home.status"),
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 30
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[254, 370]
|
||
],
|
||
font: [{
|
||
text: "P(kW)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 40
|
||
},
|
||
],
|
||
},
|
||
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[244, 385]
|
||
],
|
||
font: [{
|
||
text: "SOC(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[243, 400]
|
||
],
|
||
font: [{
|
||
text: "SOH(%)：",
|
||
size: 12,
|
||
color: "#666666",
|
||
|
||
},
|
||
{
|
||
text: "",
|
||
size: 12,
|
||
color: "#333333",
|
||
left: 50
|
||
},
|
||
],
|
||
}
|
||
]
|
||
},
|
||
getData(val){
|
||
this.stationId = val
|
||
this.clearData()
|
||
const api = [this.getMiddleData(), this.getDianBiaoStatus()]
|
||
Promise.all(api).finally((result) => {
|
||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||
.lineCanvasData, ...this.circleCanvasData
|
||
]
|
||
this.noloading = true
|
||
});
|
||
},
|
||
clearData(){
|
||
this.textCanvasData[4].font[1].text = ''
|
||
this.textCanvasData[5].font[1].text = ''
|
||
this.textCanvasData[6].font[1].text = ''
|
||
this.textCanvasData[7].font[1].text = ''
|
||
|
||
this.textCanvasData[9].font[1].text = ''
|
||
this.textCanvasData[10].font[1].text = ''
|
||
this.textCanvasData[11].font[1].text = ''
|
||
this.textCanvasData[12].font[1].text = ''
|
||
|
||
this.textCanvasData[14].font[1].text = ''
|
||
this.textCanvasData[15].font[1].text = ''
|
||
this.textCanvasData[16].font[1].text = ''
|
||
this.textCanvasData[17].font[1].text = ''
|
||
|
||
this.textCanvasData[19].font[1].text = ''
|
||
this.textCanvasData[20].font[1].text = ''
|
||
this.textCanvasData[21].font[1].text = ''
|
||
this.textCanvasData[22].font[1].text = ''
|
||
|
||
this.textCanvasData[24].font[1].text = ''
|
||
this.textCanvasData[25].font[1].text = ''
|
||
this.textCanvasData[26].font[1].text = ''
|
||
this.textCanvasData[27].font[1].text = ''
|
||
},
|
||
getMiddleData() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetOpenStationMiddlePart({
|
||
stationId: this.stationId
|
||
})
|
||
.then((res) => {
|
||
this.partList = res.data
|
||
this.textCanvasData[4].font[1].text = this.workStatus(this.partList[0].activePowerPCS,0)
|
||
this.textCanvasData[5].font[1].text = this.partList[0].activePowerPCS !== null ? this.partList[0].activePowerPCS + '' : ''
|
||
this.textCanvasData[6].font[1].text = this.partList[0].soc !== null ? this.partList[0].soc + '' : ''
|
||
this.textCanvasData[7].font[1].text = this.partList[0].soh !== null ? this.partList[0].soh + '' : ''
|
||
|
||
this.textCanvasData[9].font[1].text = this.workStatus(this.partList[1].activePowerPCS,1)
|
||
this.textCanvasData[10].font[1].text = this.partList[1].activePowerPCS !== null ? this.partList[1].activePowerPCS + '' : ''
|
||
this.textCanvasData[11].font[1].text = this.partList[1].soc !== null ? this.partList[1].soc + '' : ''
|
||
this.textCanvasData[12].font[1].text = this.partList[1].soh !== null ? this.partList[1].soh + '' : ''
|
||
|
||
this.textCanvasData[14].font[1].text = this.workStatus(this.partList[2].activePowerPCS,2)
|
||
this.textCanvasData[15].font[1].text = this.partList[2].activePowerPCS !== null ? this.partList[2].activePowerPCS + '' : ''
|
||
this.textCanvasData[16].font[1].text = this.partList[2].soc !== null ? this.partList[2].soc + '' : ''
|
||
this.textCanvasData[17].font[1].text = this.partList[2].soh !== null ? this.partList[2].soh + '' : ''
|
||
|
||
this.textCanvasData[19].font[1].text = this.workStatus(this.partList[3].activePowerPCS,3)
|
||
this.textCanvasData[20].font[1].text = this.partList[3].activePowerPCS !== null ? this.partList[3].activePowerPCS + '' : ''
|
||
this.textCanvasData[21].font[1].text = this.partList[3].soc !== null ? this.partList[3].soc + '' : ''
|
||
this.textCanvasData[22].font[1].text = this.partList[3].soh !== null ? this.partList[3].soh + '' : ''
|
||
|
||
this.textCanvasData[24].font[1].text = this.workStatus(this.partList[4].activePowerPCS,4)
|
||
this.textCanvasData[25].font[1].text = this.partList[4].activePowerPCS !== null ? this.partList[4].activePowerPCS + '' : ''
|
||
this.textCanvasData[26].font[1].text = this.partList[4].soc !== null ? this.partList[4].soc + '' : ''
|
||
this.textCanvasData[27].font[1].text = this.partList[4].soh !== null ? this.partList[4].soh + '' : ''
|
||
|
||
resolve()
|
||
|
||
})
|
||
})
|
||
|
||
},
|
||
workStatus(val, index) {
|
||
if (this.partList[index].flowDirection === 1) {
|
||
if (+val > +1) {
|
||
return this.$t("homePage.home.charge")
|
||
}
|
||
if (+val < -1) {
|
||
return this.$t("homePage.home.disCharge")
|
||
}
|
||
if (val < 1 || +val.abs < 1) {
|
||
return this.$t("homePage.home.standing")
|
||
}
|
||
} else {
|
||
if (+val > +1) {
|
||
return this.$t("homePage.home.disCharge")
|
||
}
|
||
if (+val < -1) {
|
||
return this.$t("homePage.home.charge")
|
||
}
|
||
if (val < 1 || +val.abs < 1) {
|
||
return this.$t("homePage.home.standing")
|
||
}
|
||
}
|
||
},
|
||
getDianBiaoStatus() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetMiddlePart({
|
||
stationId: this.stationId,
|
||
})
|
||
.then((res) => {
|
||
this.textCanvasData[0].font[1].text = res.data.activePower
|
||
resolve()
|
||
})
|
||
.catch((err) => {
|
||
reject("错误");
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.warp {
|
||
width: 650rpx;
|
||
height: 850rpx;
|
||
position: relative;
|
||
}
|
||
</style> |