597 lines
11 KiB
Vue
597 lines
11 KiB
Vue
<template>
|
|
<view class="warp">
|
|
<topoCanvas cId="runda215" :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: {},
|
|
// 文字
|
|
textCanvasData: [{
|
|
type: "text",
|
|
coord: [
|
|
[270, 65]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.load"),
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[10, 65]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.grid"),
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[75, 120]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.gridMeter"),
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[78, 285]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.photovoltaic"),
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[220, 300]
|
|
],
|
|
font: [{
|
|
text: "电池",
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
],
|
|
|
|
// 图片
|
|
imageCanvasData: [{
|
|
//负载
|
|
type: "image",
|
|
url: "/static/topology/load.png",
|
|
coord: [
|
|
[260, 10],
|
|
[40, 40],
|
|
],
|
|
},
|
|
{
|
|
//电网
|
|
type: "image",
|
|
url: "/static/topology/dianwang.png",
|
|
coord: [
|
|
[15, 10],
|
|
[40, 40],
|
|
],
|
|
},
|
|
{
|
|
//电表
|
|
type: "image",
|
|
url: "/static/topology/ammeter.png",
|
|
coord: [
|
|
[85, 80],
|
|
[30, 30],
|
|
],
|
|
},
|
|
{
|
|
//ACDC
|
|
type: "image",
|
|
url: "/static/topology/DC.png",
|
|
coord: [
|
|
[145, 140],
|
|
[30, 30],
|
|
],
|
|
},
|
|
{
|
|
//MPPT
|
|
type: "image",
|
|
url: "/static/topology/MPPT.png",
|
|
coord: [
|
|
[75, 200],
|
|
[30, 15],
|
|
],
|
|
},
|
|
{
|
|
//光伏
|
|
type: "image",
|
|
url: "/static/topology/pv.png",
|
|
coord: [
|
|
[72, 235],
|
|
[40, 40],
|
|
],
|
|
},
|
|
{
|
|
//电池
|
|
type: "image",
|
|
url: "/static/topology/dianchi.png",
|
|
coord: [
|
|
[210, 250],
|
|
[40, 40],
|
|
],
|
|
}
|
|
|
|
],
|
|
lineCanvasData: [{
|
|
type: "line",
|
|
coord: [
|
|
[60, 30],
|
|
[255, 30],
|
|
],
|
|
color: "#19875c",
|
|
width: 3,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[100, 30],
|
|
[100, 80],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[160, 30],
|
|
[160, 140],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[152, 170],
|
|
[152, 190],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[152, 190],
|
|
[92, 190],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[92, 190],
|
|
[92, 210],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[92, 215],
|
|
[92, 240],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[168, 170],
|
|
[168, 190],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[168, 190],
|
|
[230, 190],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
{
|
|
type: "line",
|
|
coord: [
|
|
[230, 190],
|
|
[230, 250],
|
|
],
|
|
color: "#19875c",
|
|
width: 1,
|
|
// dash: [10, 5],
|
|
},
|
|
|
|
|
|
],
|
|
circleCanvasData: [{
|
|
type: "circle",
|
|
coord: [
|
|
[60, 30]
|
|
],
|
|
color: "#3AECA1",
|
|
isMove: false,
|
|
r: 3,
|
|
},
|
|
{
|
|
type: "circle",
|
|
coord: [
|
|
[255, 30]
|
|
],
|
|
color: "#3AECA1",
|
|
isMove: false,
|
|
r: 3,
|
|
},
|
|
],
|
|
noloading:false
|
|
}
|
|
},
|
|
computed: {
|
|
currentStation() {
|
|
return this.vuex_currentStation;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
changeEnglish(){
|
|
this.textCanvasData = [{
|
|
type: "text",
|
|
coord: [
|
|
[270, 65]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.load"),
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[10, 65]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.grid"),
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[75, 120]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.gridMeter"),
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[78, 285]
|
|
],
|
|
font: [{
|
|
text: this.$t("homePage.home.photovoltaic"),
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
{
|
|
type: "text",
|
|
coord: [
|
|
[220, 300]
|
|
],
|
|
font: [{
|
|
text: "电池",
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
},
|
|
]
|
|
|
|
},
|
|
getData(val) {
|
|
this.stationId = val
|
|
this.textCanvasData.splice(4)
|
|
const api = [this.getAmmeter(), this.getAcdc(), this.getGf(), this.getFz(), this.getBattery()]
|
|
Promise.all(api).finally((result) => {
|
|
this.$nextTick(() => {
|
|
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
|
.lineCanvasData, ...this.circleCanvasData
|
|
]
|
|
})
|
|
this.noloading = true
|
|
});
|
|
},
|
|
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 * 10) + (obj.otherCount * 8) + x
|
|
},
|
|
getAmmeter() {
|
|
let self = this;
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation: 'runda215-ammeter'
|
|
})
|
|
.then((res) => {
|
|
|
|
if (res.data && res.data.length) {
|
|
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[40, 135 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, {
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item
|
|
.name, 50), 135 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, )
|
|
|
|
})
|
|
}
|
|
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
getAcdc() {
|
|
let self = this;
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation: 'runda215-acdc'
|
|
})
|
|
.then((res) => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[180, 160 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, {
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item
|
|
.name, 190), 160 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, )
|
|
|
|
})
|
|
}
|
|
|
|
resolve()
|
|
})
|
|
})
|
|
|
|
},
|
|
getGf() {
|
|
let self = this;
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation: 'runda215-gf'
|
|
})
|
|
.then((res) => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[48, 300 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, {
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item
|
|
.name, 58), 300 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, )
|
|
|
|
})
|
|
}
|
|
|
|
resolve()
|
|
})
|
|
})
|
|
|
|
},
|
|
getFz() {
|
|
let self = this;
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation: 'runda215-fz'
|
|
})
|
|
.then((res) => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[200, 80 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, {
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item
|
|
.name, 210), 80 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, )
|
|
|
|
})
|
|
}
|
|
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
getBattery() {
|
|
let self = this;
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetDynamicConfig({
|
|
stationId: this.stationId,
|
|
pageLocation: 'runda215-battery'
|
|
})
|
|
.then((res) => {
|
|
if (res.data && res.data.length) {
|
|
res.data.forEach((item, index) => {
|
|
this.textCanvasData.push({
|
|
type: "text",
|
|
coord: [
|
|
[190, 320 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.name}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, {
|
|
type: "text",
|
|
coord: [
|
|
[this.countChineseAndEnglishCharacters(item
|
|
.name, 200), 320 + index * 15]
|
|
],
|
|
font: [{
|
|
text: `${item.value}`,
|
|
size: 12,
|
|
color: "#666666",
|
|
width: 50,
|
|
}]
|
|
}, )
|
|
|
|
})
|
|
}
|
|
|
|
resolve()
|
|
})
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.warp {
|
|
width: 650rpx;
|
|
height: 750rpx;
|
|
position: relative;
|
|
}
|
|
</style> |