初次提交
This commit is contained in:
448
pages/tabbar/components/topology/runda230.vue
Normal file
448
pages/tabbar/components/topology/runda230.vue
Normal file
@ -0,0 +1,448 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="runda230" :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: [
|
||||
[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: [
|
||||
[150, 270]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
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],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电池
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[140, 212],
|
||||
[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: [
|
||||
[160, 170],
|
||||
[160, 210],
|
||||
],
|
||||
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,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
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: [
|
||||
[150, 270]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
]
|
||||
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(3)
|
||||
const api = [this.getAmmeter(), this.getAcdc(), 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: 'runda230-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[60, 135 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 70), 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: 'runda230-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()
|
||||
})
|
||||
})
|
||||
},
|
||||
getFz() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation: 'runda230-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 > 0 ? item.value : 0}`,
|
||||
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: 'runda230-battery'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[130, 290 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 140), 290 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 700rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user