1094 lines
22 KiB
Vue
1094 lines
22 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:[],
|
|||
|
|
stationId:null,
|
|||
|
|
noloading:false,
|
|||
|
|
// 文字
|
|||
|
|
textCanvasData: [
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[185, 115]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.allActivePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:90
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
//1# 直流舱--1
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 75]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.grid"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
//1#PCS升压一体舱--2
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[285, 65]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.load"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 305]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "1#" + this.$t("homePage.home.cabinet"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 175]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.activePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:85
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 190]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.workStatus"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 205]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOH(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 220]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOC(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[95, 305]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "2#" + this.$t("homePage.home.cabinet"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[65, 320]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOC(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[65, 335]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOH(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[65, 350]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.workStatus"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[65, 365]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.activePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:85
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[183, 305]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "3#" + this.$t("homePage.home.cabinet"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[180, 320]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOC(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[180, 335]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOH(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[180, 350]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.workStatus"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[180, 365]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.activePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:85
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[272, 305]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "4#" + this.$t("homePage.home.cabinet"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[214, 175]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.activePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:85
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[240, 190]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.workStatus"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[245, 205]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOH(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[245, 220]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOC(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
// 图片
|
|||
|
|
imageCanvasData: [
|
|||
|
|
{
|
|||
|
|
//电网
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/dianwang.png",
|
|||
|
|
coord: [
|
|||
|
|
[10, 10],
|
|||
|
|
[40, 50],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
//负载
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/fuzai.png",
|
|||
|
|
coord: [
|
|||
|
|
[280, 10],
|
|||
|
|
[40, 40],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
//一体柜
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/yitigui.png",
|
|||
|
|
coord: [
|
|||
|
|
[145, 135],
|
|||
|
|
[40, 60],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
//一体舱
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/yiticang.png",
|
|||
|
|
coord: [
|
|||
|
|
[10, 240],
|
|||
|
|
[40, 50],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
//一体舱
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/yiticang.png",
|
|||
|
|
coord: [
|
|||
|
|
[98, 240],
|
|||
|
|
[40, 50],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
//一体舱
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/yiticang.png",
|
|||
|
|
coord: [
|
|||
|
|
[186, 240],
|
|||
|
|
[40, 50],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
//一体舱
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/yiticang.png",
|
|||
|
|
coord: [
|
|||
|
|
[274, 240],
|
|||
|
|
[40, 50],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
//电表
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/ammeter.png",
|
|||
|
|
coord: [
|
|||
|
|
[205, 60],
|
|||
|
|
[40, 40],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
// 线
|
|||
|
|
lineCanvasData: [
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
coord: [
|
|||
|
|
[55, 40],
|
|||
|
|
[275, 40],
|
|||
|
|
],
|
|||
|
|
color: "#19875c",
|
|||
|
|
width: 2,
|
|||
|
|
dash: [10, 5],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
//center
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
coord: [
|
|||
|
|
[165, 40],
|
|||
|
|
[165, 135],
|
|||
|
|
],
|
|||
|
|
color: "#19875c",
|
|||
|
|
width: 2,
|
|||
|
|
dash: [10, 5],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
coord: [
|
|||
|
|
[165, 80],
|
|||
|
|
[200, 80],
|
|||
|
|
],
|
|||
|
|
color: "#19875c",
|
|||
|
|
width: 2,
|
|||
|
|
dash: [10, 5],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
coord: [
|
|||
|
|
[165, 195],
|
|||
|
|
[165, 230],
|
|||
|
|
],
|
|||
|
|
color: "#19875c",
|
|||
|
|
width: 2,
|
|||
|
|
dash: [10, 5],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//bottom
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
coord: [
|
|||
|
|
[35, 230],
|
|||
|
|
[295, 230],
|
|||
|
|
],
|
|||
|
|
color: "#19875c",
|
|||
|
|
width: 2,
|
|||
|
|
dash: [10, 5],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
// 点
|
|||
|
|
circleCanvasData: [
|
|||
|
|
{
|
|||
|
|
type: "circle",
|
|||
|
|
coord: [[55,40]],
|
|||
|
|
color: "#3AECA1",
|
|||
|
|
isMove: false,
|
|||
|
|
r: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "circle",
|
|||
|
|
coord: [[275, 40]],
|
|||
|
|
color: "#3AECA1",
|
|||
|
|
isMove: false,
|
|||
|
|
r: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "circle",
|
|||
|
|
coord: [[35, 230]],
|
|||
|
|
color: "#3AECA1",
|
|||
|
|
isMove: false,
|
|||
|
|
r: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "circle",
|
|||
|
|
coord: [[123, 230]],
|
|||
|
|
color: "#3AECA1",
|
|||
|
|
isMove: false,
|
|||
|
|
r: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "circle",
|
|||
|
|
coord: [[211, 230]],
|
|||
|
|
color: "#3AECA1",
|
|||
|
|
isMove: false,
|
|||
|
|
r: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "circle",
|
|||
|
|
coord: [[295, 230]],
|
|||
|
|
color: "#3AECA1",
|
|||
|
|
isMove: false,
|
|||
|
|
r: 3,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
type: "circle",
|
|||
|
|
coord: [[200, 80]],
|
|||
|
|
color: "#3AECA1",
|
|||
|
|
isMove: false,
|
|||
|
|
r: 3,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
currentStation() {
|
|||
|
|
return this.vuex_currentStation;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
changeEnglish() {
|
|||
|
|
this.textCanvasData = [
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[185, 115]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.allActivePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:90
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
//1# 直流舱--1
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 75]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.grid"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
//1#PCS升压一体舱--2
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[285, 65]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.load"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 305]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "1#" + this.$t("homePage.home.cabinet"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 175]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.activePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:85
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 190]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.workStatus"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 205]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOH(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[10, 220]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOC(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[95, 305]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "2#" + this.$t("homePage.home.cabinet"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[65, 320]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOC(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[65, 335]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOH(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[65, 350]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.workStatus"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[65, 365]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.activePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:85
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[183, 305]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "3#" + this.$t("homePage.home.cabinet"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[180, 320]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOC(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[180, 335]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOH(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[180, 350]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.workStatus"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[180, 365]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.activePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:85
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[272, 305]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "4#" + this.$t("homePage.home.cabinet"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[214, 175]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.activePower"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:85
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[240, 190]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: this.$t("homePage.home.workStatus"),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:60
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[245, 205]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOH(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
left:50
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [[245, 220]],
|
|||
|
|
font: [
|
|||
|
|
{
|
|||
|
|
text: "SOC(%)：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#666666",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
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[12].font[1].text =''
|
|||
|
|
this.textCanvasData[11].font[1].text =''
|
|||
|
|
this.textCanvasData[10].font[1].text =''
|
|||
|
|
this.textCanvasData[9].font[1].text =''
|
|||
|
|
|
|||
|
|
this.textCanvasData[17].font[1].text =''
|
|||
|
|
this.textCanvasData[16].font[1].text =''
|
|||
|
|
this.textCanvasData[15].font[1].text =''
|
|||
|
|
this.textCanvasData[14].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 = ''
|
|||
|
|
},
|
|||
|
|
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.partList.length ? this.partList[0].activePowerPCS + '' : ''
|
|||
|
|
this.textCanvasData[5].font[1].text = this.partList.length ? this.workStatus(this.partList[0].activePowerPCS, 0) : ''
|
|||
|
|
this.textCanvasData[6].font[1].text = this.partList.length ? this.partList[0].soc + '' : ''
|
|||
|
|
this.textCanvasData[7].font[1].text = this.partList.length ? this.partList[0].soh + '' : ''
|
|||
|
|
|
|||
|
|
this.textCanvasData[12].font[1].text = this.partList.length ? this.partList[1].activePowerPCS + '' : ''
|
|||
|
|
this.textCanvasData[11].font[1].text = this.partList.length ? this.workStatus(this.partList[1].activePowerPCS, 1) : ''
|
|||
|
|
this.textCanvasData[10].font[1].text = this.partList.length ? this.partList[1].soc + '' : ''
|
|||
|
|
this.textCanvasData[9].font[1].text = this.partList.length ? this.partList[1].soh + '' : ''
|
|||
|
|
|
|||
|
|
this.textCanvasData[17].font[1].text = this.partList.length ? this.partList[1].activePowerPCS + '' : ''
|
|||
|
|
this.textCanvasData[16].font[1].text = this.partList.length ? this.workStatus(this.partList[1].activePowerPCS, 1) : ''
|
|||
|
|
this.textCanvasData[15].font[1].text = this.partList.length ? this.partList[1].soc + '' : ''
|
|||
|
|
this.textCanvasData[14].font[1].text = this.partList.length ? this.partList[1].soh + '' : ''
|
|||
|
|
|
|||
|
|
this.textCanvasData[19].font[1].text = this.partList.length ? this.partList[1].activePowerPCS + '' : ''
|
|||
|
|
this.textCanvasData[20].font[1].text = this.partList.length ? this.workStatus(this.partList[1].activePowerPCS, 1) : ''
|
|||
|
|
this.textCanvasData[21].font[1].text = this.partList.length ? this.partList[1].soc + '' : ''
|
|||
|
|
this.textCanvasData[22].font[1].text = this.partList.length ? this.partList[1].soh + '' : ''
|
|||
|
|
resolve()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
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 !== null ? res.data.activePower + '' : ''
|
|||
|
|
// this.rightDianBiao[3].font[1].text = res.data.activePower !== null ? res.data.activePower : ''
|
|||
|
|
resolve()
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
reject("错误");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
workStatus(val, index) {
|
|||
|
|
if (this.partList[index].flowDirection === 1) {
|
|||
|
|
if (+val > +0.1) {
|
|||
|
|
return this.$t("homePage.home.charge")
|
|||
|
|
}
|
|||
|
|
if (+val < -0.1) {
|
|||
|
|
return this.$t("homePage.home.disCharge")
|
|||
|
|
}
|
|||
|
|
if (val < 0.1 || +val.abs < 0.1) {
|
|||
|
|
return this.$t("homePage.home.standing")
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (+val > +0.1) {
|
|||
|
|
return this.$t("homePage.home.disCharge")
|
|||
|
|
}
|
|||
|
|
if (+val < -0.1) {
|
|||
|
|
return this.$t("homePage.home.charge")
|
|||
|
|
}
|
|||
|
|
if (val < 0.1 || +val.abs < 0.1) {
|
|||
|
|
return this.$t("homePage.home.standing")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.warp {
|
|||
|
|
width: 650rpx;
|
|||
|
|
height: 750rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
</style>
|