初次提交
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user