初次提交
This commit is contained in:
1071
pages/tabbar/components/topology/cixi.vue
Normal file
1071
pages/tabbar/components/topology/cixi.vue
Normal file
File diff suppressed because it is too large
Load Diff
347
pages/tabbar/components/topology/devicemonitoring.vue
Normal file
347
pages/tabbar/components/topology/devicemonitoring.vue
Normal file
@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="devicecanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" ref="canvas"
|
||||
:noloading="noloading" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
// 文字
|
||||
textCanvasData: [],
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
type: "image",
|
||||
url: "/static/topology/device-monitoring.png",
|
||||
coord: [
|
||||
[0, 120],
|
||||
[320, 340],
|
||||
],
|
||||
}, ],
|
||||
rectCanvasData: [],
|
||||
// 线
|
||||
lineCanvasData: [],
|
||||
// 点
|
||||
circleCanvasData: [],
|
||||
timmer: null,
|
||||
defaultCanvasData: [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[0, 480]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.legend"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
coord: [
|
||||
[0, 490],
|
||||
[10, 10]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#009C77",
|
||||
background: "#009C77"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[20, 500]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.normal"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
coord: [
|
||||
[0, 510],
|
||||
[10, 10]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#E52F1B",
|
||||
background: "#E52F1B"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[20, 520]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.fault"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
coord: [
|
||||
[0, 530],
|
||||
[10, 10]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#FFC900",
|
||||
background: "#FFC900"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[20, 540]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.overhaul"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
coord: [
|
||||
[0, 550],
|
||||
[10, 10]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#15A1E3",
|
||||
background: "#15A1E3"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[20, 560]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.shutStan"),
|
||||
size: 12,
|
||||
color: "#282828",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
|
||||
],
|
||||
key: 0,
|
||||
noloading: false
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getData(val) {
|
||||
this.stationId = val
|
||||
const api = [this.getConfigData()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData, ...this.rectCanvasData, ...this
|
||||
.textCanvasData, ...this.defaultCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
|
||||
},
|
||||
statusColor(item, value) {
|
||||
// console.log(123,item,value);
|
||||
let result = null
|
||||
if (!item.color?.length) {
|
||||
return 'transparent'
|
||||
} else {
|
||||
for (let i = 0; i < item.color.length; i++) {
|
||||
if (isNaN(+item.color[i].max) && isNaN(+item.color[i].min)) {
|
||||
if (item.color[i].max === item.color[i].min) {
|
||||
if (item.color[i].max === value) {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
if (!result) {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
} else {
|
||||
result = item.errorColor
|
||||
}
|
||||
} else {
|
||||
if (+item.color[i].max === +item.color[i].min) {
|
||||
if (+item.color[i].min === +value && value !== '') {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
if (!result) {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (+item.color[i].min <= +value && +item.color[i].max > +value && value !== '') {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
},
|
||||
getConfigData() {
|
||||
this.key++
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetFireConfig({
|
||||
stationId: this.stationId,
|
||||
pageNumber: 2,
|
||||
pageLocation: 'fire',
|
||||
isWeb: 2
|
||||
})
|
||||
.then((res) => {
|
||||
if (this.canvasData.length) {
|
||||
// this.$refs.canvas.clear()
|
||||
this.$refs.canvas.getSystemInfo()
|
||||
}
|
||||
this.textCanvasData = []
|
||||
this.rectCanvasData = []
|
||||
this.circleCanvasData = []
|
||||
res.data.forEach((item) => {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
if (item.type === 'text') {
|
||||
const obj = {
|
||||
type: "text",
|
||||
coord: [
|
||||
[arr[0], arr[1]]
|
||||
],
|
||||
font: [{
|
||||
text: item.value ? item.value ? item.value :
|
||||
'' : item.dataValue ? item.dataValue : '',
|
||||
size: 12,
|
||||
color: item.borderColor ? item.borderColor :
|
||||
this.statusColor(item.lightColorObject,
|
||||
item.dataValue)
|
||||
}]
|
||||
}
|
||||
this.textCanvasData.push(obj)
|
||||
|
||||
}
|
||||
if (item.type === 'battery') {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
const objFill = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0] + 10, arr[1] - 8],
|
||||
[14, 6]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: item.borderColor,
|
||||
background: item.borderColor
|
||||
}
|
||||
const valueObj = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], this.getY(arr[1] - 1, +item.dataValue ? +
|
||||
item.dataValue : 0)],
|
||||
[35, this.getHeight(+item.dataValue)]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#009C77",
|
||||
background: "#009C77"
|
||||
}
|
||||
const textObj = {
|
||||
type: "text",
|
||||
coord: [
|
||||
[arr[0] + 5, arr[1] + 30]
|
||||
],
|
||||
font: [{
|
||||
text: item.dataValue ? +item.dataValue + '%' :
|
||||
'0%',
|
||||
size: 12,
|
||||
color: '#000000'
|
||||
}]
|
||||
}
|
||||
const strokeFill = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], arr[1]],
|
||||
[35, 40]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'stroke',
|
||||
borderColor: item.borderColor,
|
||||
background: "transparent"
|
||||
}
|
||||
this.rectCanvasData.push(textObj)
|
||||
this.rectCanvasData.push(objFill)
|
||||
this.rectCanvasData.push(valueObj)
|
||||
this.rectCanvasData.push(strokeFill)
|
||||
}
|
||||
if (item.type === 'break') {
|
||||
|
||||
const obj = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], arr[1]],
|
||||
JSON.parse(item.size),
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: item.borderColor,
|
||||
background: this.statusColor(item.lightColorObject, item
|
||||
.dataValue)
|
||||
}
|
||||
this.rectCanvasData.push(obj)
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
getY(height, val) {
|
||||
if (+val > 0 && +val <= 100) {
|
||||
return height + (43 - this.getHeight(val))
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
|
||||
},
|
||||
getHeight(value) {
|
||||
return (value / 100) * 53
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 1160rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
253
pages/tabbar/components/topology/fire.vue
Normal file
253
pages/tabbar/components/topology/fire.vue
Normal file
@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="firecanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" ref="canvas" :noloading="noloading" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import topoCanvas from '@/components/new-canvas/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
topoCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
// 文字
|
||||
textCanvasData: [],
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
type: "image",
|
||||
url: "/static/topology/fire.png",
|
||||
coord: [
|
||||
[20, 140],
|
||||
[280, 340],
|
||||
],
|
||||
}, ],
|
||||
rectCanvasData: [
|
||||
|
||||
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [],
|
||||
// 点
|
||||
circleCanvasData: [],
|
||||
timmer: null,
|
||||
key: 1,
|
||||
noloading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getData(val) {
|
||||
this.stationId = val
|
||||
const api = [this.getConfigData()]
|
||||
|
||||
this.key++
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData, ...this.rectCanvasData, ...this
|
||||
.textCanvasData,
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
|
||||
},
|
||||
statusColor(item, value) {
|
||||
// console.log(123,item,value);
|
||||
let result = null
|
||||
if (!item.color?.length) {
|
||||
return 'transparent'
|
||||
} else {
|
||||
for (let i = 0; i < item.color.length; i++) {
|
||||
if (isNaN(+item.color[i].max) && isNaN(+item.color[i].min)) {
|
||||
if (item.color[i].max === item.color[i].min) {
|
||||
if (item.color[i].max === value) {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
if (!result) {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
} else {
|
||||
result = item.errorColor
|
||||
}
|
||||
} else {
|
||||
if (+item.color[i].max === +item.color[i].min) {
|
||||
if (+item.color[i].min === +value && value !== '') {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
if (!result) {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (+item.color[i].min <= +value && +item.color[i].max > +value && value !== '') {
|
||||
result = item.color[i].color
|
||||
} else {
|
||||
result = item.errorColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
},
|
||||
getConfigData() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetFireConfig({
|
||||
stationId: this.stationId,
|
||||
pageNumber: 1,
|
||||
pageLocation: 'fire',
|
||||
isWeb: 2
|
||||
})
|
||||
.then((res) => {
|
||||
this.textCanvasData = []
|
||||
this.rectCanvasData = []
|
||||
this.circleCanvasData = []
|
||||
res.data.forEach((item) => {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
if (item.type === 'text') {
|
||||
const obj = {
|
||||
type: "text",
|
||||
coord: [
|
||||
[arr[0], arr[1]]
|
||||
],
|
||||
font: [{
|
||||
text: item.value ? item.value ? item.value :
|
||||
'' : item.dataValue ? item.dataValue : '',
|
||||
size: JSON.parse(item.size),
|
||||
color: item.borderColor ? item.borderColor :
|
||||
this.statusColor(item.lightColorObject,
|
||||
item.dataValue)
|
||||
}]
|
||||
}
|
||||
this.textCanvasData.push(obj)
|
||||
|
||||
}
|
||||
if (item.type === 'battery') {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
const objFill = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0] + 10, arr[1] - 8],
|
||||
[20, 8]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: item.borderColor,
|
||||
background: item.borderColor
|
||||
}
|
||||
const valueObj = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], this.getY(arr[1] - 1, +item.dataValue ? +
|
||||
item.dataValue : 0)],
|
||||
[40, this.getHeight(+item.dataValue)]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: "#009C77",
|
||||
background: "#009C77"
|
||||
}
|
||||
const textObj = {
|
||||
type: "text",
|
||||
coord: [
|
||||
[arr[0] + 5, arr[1] + 30]
|
||||
],
|
||||
font: [{
|
||||
text: item.dataValue ? +item.dataValue + '%' :
|
||||
'0%',
|
||||
size: 12,
|
||||
color: '#000000'
|
||||
}]
|
||||
}
|
||||
const strokeFill = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], arr[1]],
|
||||
[40, 50]
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'stroke',
|
||||
borderColor: item.borderColor,
|
||||
background: "transparent"
|
||||
}
|
||||
this.rectCanvasData.push(textObj)
|
||||
this.rectCanvasData.push(objFill)
|
||||
this.rectCanvasData.push(valueObj)
|
||||
this.rectCanvasData.push(strokeFill)
|
||||
}
|
||||
if (item.type === 'break') {
|
||||
|
||||
const obj = {
|
||||
type: "rect",
|
||||
coord: [
|
||||
[arr[0], arr[1]],
|
||||
JSON.parse(item.size),
|
||||
],
|
||||
width: 2,
|
||||
rectType: 'fill',
|
||||
borderColor: item.borderColor,
|
||||
background: this.statusColor(item.lightColorObject, item
|
||||
.dataValue)
|
||||
}
|
||||
this.rectCanvasData.push(obj)
|
||||
}
|
||||
if (item.type === 'light') {
|
||||
let arr = []
|
||||
arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
|
||||
const obj = {
|
||||
type: "circle",
|
||||
coord: [
|
||||
[arr[0], arr[1]]
|
||||
],
|
||||
color: this.statusColor(item.lightColorObject, item
|
||||
.dataValue),
|
||||
isMove: false,
|
||||
r: 3,
|
||||
}
|
||||
this.circleCanvasData.push(obj)
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
getY(height, val) {
|
||||
if (+val > 0 && +val <= 100) {
|
||||
return height + (53 - this.getHeight(val))
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
|
||||
},
|
||||
getHeight(value) {
|
||||
return (value / 100) * 53
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 1260rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
406
pages/tabbar/components/topology/jingke.vue
Normal file
406
pages/tabbar/components/topology/jingke.vue
Normal file
@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<view class="station-box">
|
||||
<u-tabs
|
||||
ref="uTabs"
|
||||
name="name"
|
||||
:list="tabList"
|
||||
:is-scroll="false"
|
||||
:current="currentTab"
|
||||
@change="changeTab"
|
||||
active-color="#009C77"
|
||||
></u-tabs>
|
||||
|
||||
<swiper
|
||||
style="height: 340px"
|
||||
:current="swiperCurrent"
|
||||
@animationfinish="swiperAnimationfinish"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in tabList" :key="index">
|
||||
<div :id="'wrap' + index">
|
||||
<view class="detail-box">
|
||||
<div class="detail-data-box">
|
||||
<div class="detail-title">
|
||||
<image :src="gui" />
|
||||
<div>{{ index * 2 + 1 }}#PCS</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.workStatus" )}}</span>
|
||||
<span
|
||||
v-if="statusList[index * 2].workStatus === 0"
|
||||
class="error-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="statusList[index * 2].workStatus === 1"
|
||||
class="warning-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="statusList[index * 2].workStatus === 2"
|
||||
class="error-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
statusList[index * 2].workStatus === 3 ||
|
||||
statusList[index * 2].workStatus === 4 ||
|
||||
statusList[index * 2].workStatus === 5 ||
|
||||
statusList[index * 2].workStatus === 6
|
||||
"
|
||||
class="run-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2].workStatus)
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.activePower" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].activePowerPCS
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.reactivePower" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].reactivePowerPCS
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-data-box">
|
||||
<div class="detail-title margin-top-10">
|
||||
<image :src="battery" />
|
||||
<div>
|
||||
<span>SOC：</span>
|
||||
<span class="value"
|
||||
>{{ statusList[index * 2].soc }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name"> {{ $t("homePage.home.totalV" )}} </span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].bmsTotalVol
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.current" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].bmsTotalCurrent
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.maxCellVol" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].bmsMaxVol
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.minCellVol" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2].bmsMinVol
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="detail-box">
|
||||
<div class="detail-data-box">
|
||||
<div class="detail-title">
|
||||
<image :src="gui" />
|
||||
<div>{{ (index + 1) * 2 }}#PCS</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.workStatus" )}}</span>
|
||||
<span
|
||||
v-if="statusList[index * 2 + 1].workStatus === 0"
|
||||
class="error-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2 + 1].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="statusList[index * 2 + 1].workStatus === 1"
|
||||
class="warning-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2 + 1].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="statusList[index * 2 + 1].workStatus === 2"
|
||||
class="error-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2 + 1].workStatus)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
statusList[index * 2 + 1].workStatus === 3 ||
|
||||
statusList[index * 2 + 1].workStatus === 4 ||
|
||||
statusList[index * 2 + 1].workStatus === 5 ||
|
||||
statusList[index * 2 + 1].workStatus === 6
|
||||
"
|
||||
class="run-value"
|
||||
>{{
|
||||
workStatus(statusList[index * 2 + 1].workStatus)
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.activePower" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].activePowerPCS
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.reactivePower" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].reactivePowerPCS
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-data-box">
|
||||
<div class="detail-title margin-top-10">
|
||||
<image :src="battery" />
|
||||
<div>
|
||||
<span>SOC：</span
|
||||
><span class="value"
|
||||
>{{ statusList[index * 2 + 1].soc }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.totalV" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].bmsTotalVol
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.current" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].bmsTotalCurrent
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-box">
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.maxCellVol" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].bmsMaxVol
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="name">{{ $t("homePage.home.minCellVol" )}}</span
|
||||
><span class="value">{{
|
||||
statusList[index * 2 + 1].bmsMinVol
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</div>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import battery from "static/aidex/device/battery.png";
|
||||
import gui from "static/aidex/device/gui.png";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
statusList: [{}, {}, {}, {}, {}, {}, {}, {}],
|
||||
tabList: [
|
||||
{ name: "1#箱变", value: 1 },
|
||||
{ name: "2#箱变", value: 2 },
|
||||
{ name: "3#箱变", value: 3 },
|
||||
{ name: "4#箱变", value: 4 },
|
||||
],
|
||||
currentTab: 0,
|
||||
swiperCurrent: 0,
|
||||
swiperHeight: 290,
|
||||
battery,
|
||||
gui,
|
||||
stationId:null
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight(); // 动态设置 swiper 的高度
|
||||
});
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight(); // 动态设置 swiper 的高度
|
||||
});
|
||||
this.getJingKeData()
|
||||
},
|
||||
workStatus(val) {
|
||||
if (val === 0) {
|
||||
return this.$t("homePage.home.shutdown");
|
||||
} else if (val === 1) {
|
||||
return this.$t("homePage.home.standby");
|
||||
} else if (val === 2) {
|
||||
return this.$t("homePage.home.fault");
|
||||
} else if (val === 3 || val === 4 || val === 5 || val === 6) {
|
||||
return this.$t("homePage.home.run");
|
||||
}
|
||||
},
|
||||
async getJingKeData() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetJingKeData({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.statusList = res.data;
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
},
|
||||
toFix(val) {
|
||||
if (val) {
|
||||
const result = Number(val).toFixed(2);
|
||||
return result;
|
||||
} else if (val === 0) {
|
||||
return 0;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
changeTab(index) {
|
||||
this.currentTab = index;
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
swiperAnimationfinish(e) {
|
||||
let current = e.detail.current;
|
||||
this.swiperCurrent = current;
|
||||
this.currentTab = current;
|
||||
},
|
||||
/* 动态设置 swiper 的高度 */
|
||||
setSwiperHeight() {
|
||||
const element = "#wrap" + this.swiperCurrent;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select(element).boundingClientRect();
|
||||
query.exec((res) => {
|
||||
if (res && res[0]) this.swiperHeight = res[0].height;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.station-box {
|
||||
width: 100%;
|
||||
|
||||
.swiper-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
width: 100%;
|
||||
border-top: 1px solid #93d5c5;
|
||||
margin-top: 30rpx;
|
||||
background: linear-gradient(
|
||||
rgba(0, 156, 119, 0.05),
|
||||
rgba(0, 156, 119, 0)
|
||||
);
|
||||
margin-bottom: 34rpx;
|
||||
padding-top: 12rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.detail-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #ffb800;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-data-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.data-item {
|
||||
width: 50%;
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.name {
|
||||
width: 210rpx;
|
||||
text-align: end;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #ffb800;
|
||||
}
|
||||
.run-value {
|
||||
color: green;
|
||||
}
|
||||
.error-value {
|
||||
color: red;
|
||||
}
|
||||
.warning-value {
|
||||
color: #ffb800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
418
pages/tabbar/components/topology/kejiyuan.vue
Normal file
418
pages/tabbar/components/topology/kejiyuan.vue
Normal file
@ -0,0 +1,418 @@
|
||||
<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: [
|
||||
[145, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[15, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[265, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.esiCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//---3
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 155]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.workStatus"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:55
|
||||
}
|
||||
]
|
||||
},
|
||||
//---4
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[194, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.activePower"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:80
|
||||
}
|
||||
]
|
||||
},
|
||||
//---5
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:50
|
||||
}
|
||||
]
|
||||
},
|
||||
//---6
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 200]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:50
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
],
|
||||
// 图片
|
||||
imageCanvasData: [
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[10, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
{
|
||||
//一体柜
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[140, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[270, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
// 电网---并网柜
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[50, 110],
|
||||
[140, 110]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5]
|
||||
},
|
||||
// 1直流舱--并网柜
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[260, 110],
|
||||
[185, 110]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5]
|
||||
},
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[50, 110]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
r: 3
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[260, 110]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
r: 3
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
changeEnglish() {
|
||||
this.textCanvasData = [
|
||||
// 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[145, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[15, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[265, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.esiCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//---3
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 155]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.workStatus"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:55
|
||||
}
|
||||
]
|
||||
},
|
||||
//---4
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[194, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.activePower"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:80
|
||||
}
|
||||
]
|
||||
},
|
||||
//---5
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:50
|
||||
}
|
||||
]
|
||||
},
|
||||
//---6
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 200]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:50
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.clearData()
|
||||
const api = [
|
||||
this.getMiddleData()
|
||||
];
|
||||
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 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")
|
||||
}
|
||||
}
|
||||
},
|
||||
getMiddleData(){
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetbozhouTuopuStatus({
|
||||
stationId: this.stationId
|
||||
})
|
||||
.then(res => {
|
||||
this.textCanvasData[3].font[1].text = this.workStatus(res.data.activePowerPCS,res.data.flowDirection)
|
||||
this.textCanvasData[4].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
|
||||
this.textCanvasData[5].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
|
||||
this.textCanvasData[6].font[1].text = res.data.soh !== null ? res.data.soh + '' : ''
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 550rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
1094
pages/tabbar/components/topology/lingchao.vue
Normal file
1094
pages/tabbar/components/topology/lingchao.vue
Normal file
File diff suppressed because it is too large
Load Diff
771
pages/tabbar/components/topology/mdPvdieseTopCenter.vue
Normal file
771
pages/tabbar/components/topology/mdPvdieseTopCenter.vue
Normal file
@ -0,0 +1,771 @@
|
||||
<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>
|
||||
616
pages/tabbar/components/topology/runda100.vue
Normal file
616
pages/tabbar/components/topology/runda100.vue
Normal file
@ -0,0 +1,616 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="runda" :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: [
|
||||
[270, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.standing"),
|
||||
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: 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],
|
||||
],
|
||||
},
|
||||
{
|
||||
//MPPT
|
||||
type: "image",
|
||||
url: "/static/topology/MPPT.png",
|
||||
coord: [
|
||||
[75, 200],
|
||||
[30, 15],
|
||||
],
|
||||
},
|
||||
{
|
||||
//DCDC
|
||||
type: "image",
|
||||
url: "/static/topology/DCDC.png",
|
||||
coord: [
|
||||
[215, 200],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//光伏
|
||||
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, 200],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 1,
|
||||
// dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[230, 230],
|
||||
[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,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[270, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.standing"),
|
||||
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: this.$t("homePage.home.battery"),
|
||||
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: self.stationId,
|
||||
pageLocation: 'runda100-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
if (res.data && res.data.length) {
|
||||
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[60, 135 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.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: self.stationId,
|
||||
pageLocation: 'runda100-acdc'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[180, 160 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.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: self.stationId,
|
||||
pageLocation: 'runda100-gf'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[48, 300 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.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: self.stationId,
|
||||
pageLocation: 'runda100-fz'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[200, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.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: self.stationId,
|
||||
pageLocation: 'runda100-battery'
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
self.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[190, 320 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[self.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>
|
||||
597
pages/tabbar/components/topology/runda215.vue
Normal file
597
pages/tabbar/components/topology/runda215.vue
Normal file
@ -0,0 +1,597 @@
|
||||
<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>
|
||||
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>
|
||||
1371
pages/tabbar/components/topology/sanmenxia.vue
Normal file
1371
pages/tabbar/components/topology/sanmenxia.vue
Normal file
File diff suppressed because it is too large
Load Diff
502
pages/tabbar/components/topology/second.vue
Normal file
502
pages/tabbar/components/topology/second.vue
Normal file
@ -0,0 +1,502 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="secondcanvas" :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: [
|
||||
[260, 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: [
|
||||
[30, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[240, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [
|
||||
{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[250, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[15, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[45, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[255, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[170, 35],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//sts
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[95, 85],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 30],
|
||||
[240, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 30],
|
||||
[110, 85],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 125],
|
||||
[110, 150],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 150],
|
||||
[60, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 150],
|
||||
[270, 150],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[270, 150],
|
||||
[270, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 55],
|
||||
[160, 55],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
}
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[110, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[240, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[110, 150]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[270, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[160, 55]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 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: [
|
||||
[30, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[240, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(3)
|
||||
const api = [this.getLeftPcs(),this.getRightPcs(),this.getAmmeter()]
|
||||
Promise.all(api).finally((result) => {
|
||||
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:'second-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[120, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,130), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getLeftPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'second-pcs-left'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[30, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,30), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getRightPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'second-pcs-right'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[200, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,200), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 650rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
426
pages/tabbar/components/topology/standard.vue
Normal file
426
pages/tabbar/components/topology/standard.vue
Normal file
@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas :cId="canvasId" :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 {
|
||||
noloading: false,
|
||||
canvasData: [],
|
||||
canvasId:'canvas',
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
// 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[145, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[15, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
// //1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.esiCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//---3
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[190, 155]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.workStatus"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 55
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
//---4
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[187, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.activePower"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 80
|
||||
}
|
||||
]
|
||||
},
|
||||
//---5
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
// //---6
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 200]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
],
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[10, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
{
|
||||
//一体柜
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[140, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[270, 80],
|
||||
[40, 50]
|
||||
]
|
||||
},
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
// 电网---并网柜
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[50, 110],
|
||||
[140, 110]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5]
|
||||
},
|
||||
// 1直流舱--并网柜
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[260, 110],
|
||||
[185, 110]
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5]
|
||||
},
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[50, 110]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
r: 3
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[260, 110]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
r: 3
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish() {
|
||||
this.textCanvasData = [
|
||||
// 并网柜--0
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[145, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.gridCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//1# 直流舱--1
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[15, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.grid"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
// //1#PCS升压一体舱--2
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.esiCab"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
width: 50
|
||||
}]
|
||||
},
|
||||
//---3
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[190, 155]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.workStatus"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 55
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
//---4
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[187, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.activePower"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 80
|
||||
}
|
||||
]
|
||||
},
|
||||
//---5
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
// //---6
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[225, 200]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50
|
||||
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
getData(val) {
|
||||
|
||||
this.stationId = val
|
||||
this.clearData()
|
||||
const api = [
|
||||
this.getMiddleData()
|
||||
];
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
workStatus(val, data) {
|
||||
if (data === 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")
|
||||
}
|
||||
}
|
||||
},
|
||||
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 = ''
|
||||
},
|
||||
getMiddleData() {
|
||||
let self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetbozhouTuopuStatus({
|
||||
stationId: this.stationId
|
||||
})
|
||||
.then(res => {
|
||||
this.textCanvasData[3].font[1].text = this.workStatus(res.data.activePowerPCS, res
|
||||
.data.flowDirection)
|
||||
this.textCanvasData[4].font[1].text = res.data.activePowerPCS !== null ? res.data
|
||||
.activePowerPCS + '' : ''
|
||||
this.textCanvasData[5].font[1].text = res.data.soc !== null ? res.data.soc + '' :
|
||||
''
|
||||
this.textCanvasData[6].font[1].text = res.data.soh !== null ? res.data.soh + '' :
|
||||
''
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 550rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
601
pages/tabbar/components/topology/third.vue
Normal file
601
pages/tabbar/components/topology/third.vue
Normal file
@ -0,0 +1,601 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="thirdcanvas" :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: [
|
||||
[260, 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: [
|
||||
[30, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[140, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[240, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "3#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [
|
||||
{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[250, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[15, 10],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[45, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[145, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[255, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[170, 35],
|
||||
[30, 30],
|
||||
],
|
||||
},
|
||||
{
|
||||
//sts
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[95, 85],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 30],
|
||||
[240, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 30],
|
||||
[110, 85],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 125],
|
||||
[110, 150],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 150],
|
||||
[60, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[160, 150],
|
||||
[160, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 150],
|
||||
[270, 150],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[270, 150],
|
||||
[270, 190],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[110, 55],
|
||||
[160, 55],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
}
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[110, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[240, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[160, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[110, 150]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[270, 190]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[160, 55]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 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: [
|
||||
[30, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "1#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[140, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "2#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[240, 250]
|
||||
],
|
||||
font: [{
|
||||
text: "3#" + this.$t("homePage.home.cabinet"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.textCanvasData.splice(5)
|
||||
const api = [this.getLeftPcs(),this.getRightPcs(),this.getCenterPcs(),this.getAmmeter()]
|
||||
Promise.all(api).finally((result) => {
|
||||
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:'triad-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[120, 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,130), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getLeftPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-pcs-left'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[0, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,0), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getCenterPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-pcs-center'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[110, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,110), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getRightPcs() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-pcs-right'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.name}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,220), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 650rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
599
pages/tabbar/components/topology/weishanhu.vue
Normal file
599
pages/tabbar/components/topology/weishanhu.vue
Normal file
@ -0,0 +1,599 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="wshcanvas" :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,
|
||||
partList: {},
|
||||
// 文字
|
||||
textCanvasData: [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[8, 25]
|
||||
],
|
||||
font: [{
|
||||
text: "380" + this.$t("homePage.home.busbar"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[28, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[12, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[155, 80]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[99, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.dieselGenerator"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[100, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[196, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[170, 210]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[288, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 210]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 225]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
},
|
||||
],
|
||||
}
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[18, 111],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
//ACDC
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/DC.png",
|
||||
coord: [
|
||||
[229, 54],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
//发电机
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/electric.png",
|
||||
coord: [
|
||||
[104, 111],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//光伏
|
||||
type: "image",
|
||||
url: "/static/topology/pv.png",
|
||||
coord: [
|
||||
[186, 135],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[279, 135],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [{
|
||||
type: "line",
|
||||
coord: [
|
||||
[8, 30],
|
||||
[318, 30],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[38, 30],
|
||||
[38, 110],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[124, 30],
|
||||
[124, 110],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[250, 30],
|
||||
[250, 55],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[250, 96],
|
||||
[250, 104],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[204, 132],
|
||||
[204, 104],
|
||||
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[204, 104],
|
||||
[298, 104],
|
||||
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[298, 132],
|
||||
[298, 104],
|
||||
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
}
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[38, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[124, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
|
||||
{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[250, 30]
|
||||
],
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[8, 25]
|
||||
],
|
||||
font: [{
|
||||
text: "380" + this.$t("homePage.home.busbar"),
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[28, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[12, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[155, 80]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[99, 170]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.dieselGenerator"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[100, 185]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[196, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[170, 210]
|
||||
],
|
||||
font: [{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[288, 195]
|
||||
],
|
||||
font: [{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 210]
|
||||
],
|
||||
font: [{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [
|
||||
[250, 225]
|
||||
],
|
||||
font: [{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val
|
||||
this.clearData()
|
||||
const api = [this.getMiddleData()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
clearData(){
|
||||
this.textCanvasData[2].font[1].text = ''
|
||||
//ACDC
|
||||
this.textCanvasData[3].font[1].text = ''
|
||||
//柴油发电机
|
||||
this.textCanvasData[5].font[1].text = ''
|
||||
//光伏
|
||||
this.textCanvasData[7].font[1].text = ''
|
||||
// 电池
|
||||
this.textCanvasData[9].font[1].text = ''
|
||||
this.textCanvasData[10].font[1].text = ''
|
||||
},
|
||||
getMiddleData() {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetWSHStatus({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
//负载
|
||||
this.textCanvasData[2].font[1].text = res.data.epsActivePower !== null ? res.data.epsActivePower + '': ''
|
||||
//ACDC
|
||||
this.textCanvasData[3].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
|
||||
//柴油发电机
|
||||
this.textCanvasData[5].font[1].text = res.data.cfActivePower !== null ? res.data.cfActivePower + '' : ''
|
||||
//光伏
|
||||
this.textCanvasData[7].font[1].text = res.data.acActivePower !== null ? res.data.acActivePower + '' : ''
|
||||
// 电池
|
||||
this.textCanvasData[9].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
|
||||
this.textCanvasData[10].font[1].text = res.data.soc !== null ? res.data.soh + '' : ''
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 500rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
589
pages/tabbar/components/topology/zhongzihuanbao.vue
Normal file
589
pages/tabbar/components/topology/zhongzihuanbao.vue
Normal file
@ -0,0 +1,589 @@
|
||||
<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: [
|
||||
{
|
||||
type: "text",
|
||||
coord: [[80, 128]],
|
||||
font: [
|
||||
{
|
||||
text: "STS",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[172, 100]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.ammeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[155, 115]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[258, 65]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[149, 215]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[35, 325]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[30, 340]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[281, 325]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[245, 340]],
|
||||
font: [
|
||||
{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[245, 355]],
|
||||
font: [
|
||||
{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
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/DC.png",
|
||||
coord: [
|
||||
[106, 188],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/pv.png",
|
||||
coord: [
|
||||
[27, 274],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[273, 274],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[38, 36],
|
||||
[274, 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, 156],
|
||||
[125, 186],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[125, 225],
|
||||
[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: [
|
||||
[47, 251],
|
||||
[47, 271],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[47, 251],
|
||||
[292, 251],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
coord: [
|
||||
[292, 251],
|
||||
[292, 271],
|
||||
],
|
||||
color: "#19875c",
|
||||
width: 2,
|
||||
dash: [10, 5],
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
coord: [
|
||||
[250, 15],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
url: "/static/topology/DC.png",
|
||||
coord: [
|
||||
[106, 188],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/pv.png",
|
||||
coord: [
|
||||
[27, 274],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/dianchi.png",
|
||||
coord: [
|
||||
[273, 274],
|
||||
[40, 40],
|
||||
],
|
||||
},
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.vuex_currentStation;
|
||||
},
|
||||
},
|
||||
|
||||
methods:{
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
type: "text",
|
||||
coord: [[80, 128]],
|
||||
font: [
|
||||
{
|
||||
text: "STS",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[172, 100]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.ammeter"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[155, 115]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left:40
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[258, 65]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.load"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[149, 215]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[35, 325]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.photovoltaic"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[30, 340]],
|
||||
font: [
|
||||
{
|
||||
text: "P(kW)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[281, 325]],
|
||||
font: [
|
||||
{
|
||||
text: this.$t("homePage.home.battery"),
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[245, 340]],
|
||||
font: [
|
||||
{
|
||||
text: "SOC(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
coord: [[245, 355]],
|
||||
font: [
|
||||
{
|
||||
text: "SOH(%)：",
|
||||
size: 12,
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
text: "",
|
||||
size: 12,
|
||||
color: "#333333",
|
||||
left: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
},
|
||||
clearData(){
|
||||
this.textCanvasData[2].font[1].text = ''
|
||||
|
||||
//ACDC
|
||||
this.textCanvasData[4].font[1].text = ''
|
||||
|
||||
//光伏
|
||||
this.textCanvasData[6].font[1].text = ''
|
||||
|
||||
//电池
|
||||
this.textCanvasData[8].font[1].text = ''
|
||||
this.textCanvasData[9].font[1].text = ''
|
||||
},
|
||||
getData(val){
|
||||
this.stationId = val.id
|
||||
this.clearData()
|
||||
const api = [this.getMiddleData()]
|
||||
Promise.all(api).finally((result) => {
|
||||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||||
.lineCanvasData, ...this.circleCanvasData
|
||||
]
|
||||
this.noloading = true
|
||||
});
|
||||
},
|
||||
getMiddleData(){
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
self.$u.api.homePageData
|
||||
.GetZzhbtatus({
|
||||
stationId: this.stationId,
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
|
||||
//电表
|
||||
this.textCanvasData[2].font[1].text = res.data.activePower !== null ? res.data.activePower + '' : ''
|
||||
|
||||
//ACDC
|
||||
this.textCanvasData[4].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
|
||||
|
||||
//光伏
|
||||
this.textCanvasData[6].font[1].text = res.data.acActivePower !== null ? res.data.acActivePower + '' : ''
|
||||
|
||||
//电池
|
||||
this.textCanvasData[8].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
|
||||
this.textCanvasData[9].font[1].text = res.data.soh !== null ? res.data.soh + '' : ''
|
||||
|
||||
// this.textCanvasData[3].font[1].text = this.partList.acActivePower !== null ? this.partList.acActivePower + '' : ''
|
||||
// //ACDC
|
||||
// this.textCanvasData[1].font[1].text = this.partList.activePowerPCS !== null ? this.partList.activePowerPCS + '' : ''
|
||||
// //电池
|
||||
// this.batteryData[2].font[1].text = this.partList.soc !== null ? this.partList.soc + '' : ''
|
||||
// this.batteryData[3].font[1].text = this.partList.soh !== null ? this.partList.soh + '' : ''
|
||||
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
reject("错误");
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
width: 650rpx;
|
||||
height: 770rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user