771 lines
14 KiB
Vue
771 lines
14 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: [
|
|
// // 并网柜--0
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[280, 65]
|
|
],
|
|
font: [{
|
|
text: "负载",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
// //1# 直流舱--1
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[5, 60]
|
|
],
|
|
font: [{
|
|
text: "用户配电",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
// //1#PCS升压一体舱--2
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[200, 85]
|
|
],
|
|
font: [{
|
|
text: "负载电表",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[50, 195]
|
|
],
|
|
font: [{
|
|
text: "柴发电表",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[230, 225]
|
|
],
|
|
font: [{
|
|
text: "储能电表",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[210, 280]
|
|
],
|
|
font: [{
|
|
text: "储能柜",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[70, 280]
|
|
],
|
|
font: [{
|
|
text: "柴油发电机",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[215, 170]
|
|
],
|
|
font: [{
|
|
text: "PCS",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[155, 95]
|
|
],
|
|
font: [{
|
|
text: "ATS",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[155, 45]
|
|
],
|
|
font: [{
|
|
text: "ATS",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
}
|
|
|
|
],
|
|
// 图片
|
|
imageCanvasData: [{
|
|
//电网
|
|
type: "image",
|
|
url: "/static/topology/dianwang.png",
|
|
coord: [
|
|
[10, 5],
|
|
[30, 40]
|
|
]
|
|
},
|
|
{
|
|
//负载
|
|
type: "image",
|
|
url: "/static/topology/fuzai.png",
|
|
coord: [
|
|
[270, 5],
|
|
[45, 40]
|
|
]
|
|
},
|
|
{
|
|
//负载
|
|
type: "image",
|
|
url: "/static/topology/none.png",
|
|
coord: [
|
|
[150, 15],
|
|
[30, 25]
|
|
]
|
|
},
|
|
{
|
|
//负载
|
|
type: "image",
|
|
url: "/static/topology/none.png",
|
|
coord: [
|
|
[150, 65],
|
|
[30, 25]
|
|
]
|
|
},
|
|
{
|
|
//柴发
|
|
type: "image",
|
|
url: "/static/topology/electric.png",
|
|
coord: [
|
|
[80, 230],
|
|
[35, 35]
|
|
]
|
|
},
|
|
{
|
|
//柴发
|
|
type: "image",
|
|
url: "/static/topology/dianchi.png",
|
|
coord: [
|
|
[210, 230],
|
|
[35, 35]
|
|
]
|
|
},
|
|
{
|
|
//柴发电表
|
|
type: "image",
|
|
url: "/static/topology/ammeter.png",
|
|
coord: [
|
|
[55, 150],
|
|
[30, 30]
|
|
]
|
|
},
|
|
{
|
|
//储能电表
|
|
type: "image",
|
|
url: "/static/topology/ammeter.png",
|
|
coord: [
|
|
[240, 180],
|
|
[30, 30]
|
|
]
|
|
},
|
|
{
|
|
//负载电表
|
|
type: "image",
|
|
url: "/static/topology/ammeter.png",
|
|
coord: [
|
|
[210, 40],
|
|
[30, 30]
|
|
]
|
|
},
|
|
{
|
|
//PCS
|
|
type: "image",
|
|
url: "/static/topology/STS.png",
|
|
coord: [
|
|
[215, 120],
|
|
[20, 40]
|
|
]
|
|
}
|
|
],
|
|
// 线
|
|
lineCanvasData: [
|
|
// 顶部
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[40, 27],
|
|
[159, 27]
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[225, 27],
|
|
[225, 40]
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[180, 27],
|
|
[270, 27]
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
|
|
// 1中部
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[164, 30],
|
|
[164, 70]
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[164, 80],
|
|
[164, 100],
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[162, 100],
|
|
[97, 100],
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[85, 165],
|
|
[97, 165]
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[162, 100],
|
|
[227, 100],
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[97, 100],
|
|
[97, 230],
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[227, 100],
|
|
[227, 120],
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[227, 195],
|
|
[240, 195],
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[227, 160],
|
|
[227, 230],
|
|
],
|
|
color: "#19875c",
|
|
width: 2,
|
|
dash: 1
|
|
},
|
|
|
|
],
|
|
// 点
|
|
circleCanvasData: [
|
|
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
currentStation() {
|
|
return this.vuex_currentStation;
|
|
},
|
|
},
|
|
methods: {
|
|
changeEnglish() {
|
|
this.textCanvasData = [
|
|
// // 并网柜--0
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[280, 65]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.load"),
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
// //1# 直流舱--1
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[5, 60]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.grid"),
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
// //1#PCS升压一体舱--2
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[200, 85]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.loadAmmeter"),
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[50, 195]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.dieselGeneratorMeter"),
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[230, 225]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.energyStorageMeter"),
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[210, 280]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.cabinet"),
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[70, 280]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.dieselGenerator"),
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[215, 170]
|
|
],
|
|
font: [{
|
|
text: "PCS",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[155, 95]
|
|
],
|
|
font: [{
|
|
text: "ATS",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[155, 45]
|
|
],
|
|
font: [{
|
|
text: "ATS",
|
|
size: 12,
|
|
color: "#333333",
|
|
width: 50
|
|
}]
|
|
}
|
|
]
|
|
},
|
|
getData(val) {
|
|
this.stationId = val
|
|
this.textCanvasData.splice(10)
|
|
const api = [this.getAmmeter1(),this.getAmmeter2(),this.getAmmeter3(),this.getCf(),this.getPcs()]
|
|
Promise.all(api).finally((result) => {
|
|
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
|
.lineCanvasData, ...this.circleCanvasData
|
|
]
|
|
this.noloading = true
|
|
});
|
|
},
|
|
clearData() {
|
|
// this.textCanvasData[3].font[1].text = ''
|
|
// this.textCanvasData[4].font[1].text = ''
|
|
// this.textCanvasData[5].font[1].text = ''
|
|
// this.textCanvasData[6].font[1].text = ''
|
|
},
|
|
workStatus(val, data) {
|
|
if (data === 1) {
|
|
if (+val > +1) {
|
|
return '充电'
|
|
}
|
|
if (+val < -1) {
|
|
return '放电'
|
|
}
|
|
if (val < 1 || +val.abs < 1) {
|
|
return '静置'
|
|
}
|
|
} else {
|
|
if (+val > +1) {
|
|
return '放电'
|
|
}
|
|
if (+val < -1) {
|
|
return '充电'
|
|
}
|
|
if (val < 1 || +val.abs < 1) {
|
|
return '静置'
|
|
}
|
|
}
|
|
},
|
|
countChineseAndEnglishCharacters(str, x) {
|
|
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
|
|
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
|
|
var otherCount = str.length - chineseCount - englishCount
|
|
const obj = { otherCount: otherCount, chineseCount: chineseCount, englishCount: englishCount }
|
|
return (obj.englishCount * 4) + (obj.chineseCount * 11 ) + (obj.otherCount * 9) + x
|
|
},
|
|
getAmmeter1() {
|
|
let self = this
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation:'md-ammeter-1'
|
|
})
|
|
.then(res => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[250, 80 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item.name,250), 80 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},)
|
|
|
|
})
|
|
}
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
getAmmeter2() {
|
|
let self = this
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation:'md-ammeter-2'
|
|
})
|
|
.then(res => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[30, 210 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item.name,30), 210 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},)
|
|
|
|
})
|
|
}
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
getAmmeter3() {
|
|
let self = this
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation:'md-ammeter-3'
|
|
})
|
|
.then(res => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[150, 200 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item.name,150), 200 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},)
|
|
|
|
})
|
|
}
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
getCf() {
|
|
let self = this
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation:'md-pcs'
|
|
})
|
|
.then(res => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[250, 250 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item.name,250), 250 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},)
|
|
|
|
})
|
|
}
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
getPcs() {
|
|
let self = this
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation:'md-dynamo'
|
|
})
|
|
.then(res => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[130, 250 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item.name,130), 250 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},)
|
|
|
|
})
|
|
}
|
|
resolve()
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.warp {
|
|
width: 650rpx;
|
|
height: 580rpx;
|
|
position: relative;
|
|
}
|
|
</style> |