2246 lines
46 KiB
Vue
2246 lines
46 KiB
Vue
<template>
|
||
<view class="warp">
|
||
<topoCanvas ref="topoCanvasRef" 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: [
|
||
[275, 60]
|
||
],
|
||
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, 150]
|
||
],
|
||
font: [{
|
||
text: this.$t('homePage.home.operatingPower'),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[80, 165]
|
||
],
|
||
font: [{
|
||
text: '(kW)',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[155, 150]
|
||
],
|
||
font: [{
|
||
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[155, 165]
|
||
],
|
||
font: [{
|
||
text: '(kWh)',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[240, 150]
|
||
],
|
||
font: [{
|
||
text: 'SOC',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[240, 165]
|
||
],
|
||
font: [{
|
||
text: '(%)',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[280, 150]
|
||
],
|
||
font: [{
|
||
text: 'SOH',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[280, 165]
|
||
],
|
||
font: [{
|
||
text: '(%)',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
|
||
],
|
||
|
||
// 图片
|
||
imageCanvasData: [
|
||
{
|
||
//负载
|
||
type: "image",
|
||
url: "/static/topology/pv8pcs4.png",
|
||
coord: [
|
||
[10, 10],
|
||
[320, 420],
|
||
]
|
||
}
|
||
],
|
||
// 线
|
||
lineCanvasData: [],
|
||
// 静态点
|
||
circleCanvasData: [
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[65, 27]
|
||
],
|
||
color: "#0DA17D",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[250, 27]
|
||
],
|
||
color: "#FB4444",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 182]
|
||
],
|
||
color: "#338EFE",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 204]
|
||
],
|
||
color: "#338EFE",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 226]
|
||
],
|
||
color: "#58D86B",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 248]
|
||
],
|
||
color: "#338EFE",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 270]
|
||
],
|
||
color: "#338EFE",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 292]
|
||
],
|
||
color: "#58D86B",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 314]
|
||
],
|
||
color: "#338EFE",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 336]
|
||
],
|
||
color: "#338EFE",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 358]
|
||
],
|
||
color: "#58D86B",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 380]
|
||
],
|
||
color: "#338EFE",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 402]
|
||
],
|
||
color: "#338EFE",
|
||
isMove: false,
|
||
r: 3,
|
||
},
|
||
{
|
||
type: "circle",
|
||
coord: [
|
||
[38, 424]
|
||
],
|
||
color: "#58D86B",
|
||
isMove: false,
|
||
r: 3,
|
||
}
|
||
],
|
||
animationId: null, // requestAnimationFrame ID
|
||
movingPoints: [
|
||
// 点1：左上角 → 向右移动
|
||
{
|
||
x: 65,
|
||
y: 27,
|
||
path: [{
|
||
x: 65,
|
||
y: 27
|
||
}, // 起点
|
||
{
|
||
x: 250,
|
||
y: 27
|
||
} // 终点
|
||
],
|
||
color:'#0DA17D',
|
||
currentStep: 0, // 当前在路径的哪一步
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-1'
|
||
},
|
||
// 点2：左上角 → 向右 → 向下 → 向左
|
||
{
|
||
x: 65,
|
||
y: 27,
|
||
path: [{
|
||
x: 65,
|
||
y: 27
|
||
},
|
||
{
|
||
x: 122,
|
||
y: 27
|
||
},
|
||
{
|
||
x: 122,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 90,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#0DA17D',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-2'
|
||
},
|
||
// 点3：中间右 → 向右 → 向上 → 向左
|
||
{
|
||
x: 90,
|
||
y: 112,
|
||
path: [{
|
||
x: 90,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 122,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 122,
|
||
y: 27
|
||
},
|
||
{
|
||
x: 250,
|
||
y: 27
|
||
}
|
||
],
|
||
color:'#0DA17D',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-3'
|
||
},
|
||
// 点4：中间左 → 向左 → 向下 → 向右
|
||
{
|
||
x: 55,
|
||
y: 112,
|
||
path: [{
|
||
x: 55,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 226
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 226
|
||
}
|
||
],
|
||
color:'#0DA17D',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-4'
|
||
},
|
||
// 点5：中间左 → 向左 → 向下 → 向右
|
||
{
|
||
x: 55,
|
||
y: 112,
|
||
path: [{
|
||
x: 55,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 292
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 292
|
||
}
|
||
],
|
||
color:'#0DA17D',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-5'
|
||
},
|
||
// 点6：中间左 → 向左 → 向下 → 向右
|
||
{
|
||
x: 55,
|
||
y: 112,
|
||
path: [{
|
||
x: 55,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 358
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 358
|
||
}
|
||
],
|
||
color:'#0DA17D',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-6'
|
||
},
|
||
// 点7：中间左 → 向左 → 向下 → 向右
|
||
{
|
||
x: 55,
|
||
y: 112,
|
||
path: [{
|
||
x: 55,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 424
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 424
|
||
}
|
||
],
|
||
color:'#0DA17D',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-7'
|
||
},
|
||
// 点8：pv1 → 向左 → 向下 → 向右
|
||
{
|
||
x: 38,
|
||
y: 182,
|
||
path: [{
|
||
x: 38,
|
||
y: 182
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 182
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 226
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 226
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-8'
|
||
},
|
||
// 点9：pv1 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 182,
|
||
path: [{
|
||
x: 38,
|
||
y: 182
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 182
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-9'
|
||
},
|
||
// 点10：pv2 → 向左 → 向下 → 向右
|
||
{
|
||
x: 38,
|
||
y: 204,
|
||
path: [{
|
||
x: 38,
|
||
y: 204
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 204
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 226
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 226
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-10'
|
||
},
|
||
// 点11：pv2 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 204,
|
||
path: [{
|
||
x: 38,
|
||
y: 204
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 204
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-11'
|
||
},
|
||
// 点12：pcs1 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 226,
|
||
path: [{
|
||
x: 38,
|
||
y: 226
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 226
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#58D86B',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-12'
|
||
},
|
||
// 点13：pv3 → 向左 → 向下 → 向右
|
||
{
|
||
x: 38,
|
||
y: 248,
|
||
path: [{
|
||
x: 38,
|
||
y: 248
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 248
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 292
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 292
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-13'
|
||
},
|
||
// 点14：pv3 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 248,
|
||
path: [{
|
||
x: 38,
|
||
y: 248
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 248
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-14'
|
||
},
|
||
// 点15：pv4 → 向左 → 向下 → 向右
|
||
{
|
||
x: 38,
|
||
y: 270,
|
||
path: [{
|
||
x: 38,
|
||
y: 270
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 270
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 292
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 292
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-15'
|
||
},
|
||
// 点16：pv4 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 270,
|
||
path: [{
|
||
x: 38,
|
||
y: 270
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 270
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-16'
|
||
},
|
||
// 点17：pcs2 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 292,
|
||
path: [{
|
||
x: 38,
|
||
y: 292
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 292
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#58D86B',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-17'
|
||
},
|
||
// 点18：pv5 → 向左 → 向下 → 向右
|
||
{
|
||
x: 38,
|
||
y: 314,
|
||
path: [{
|
||
x: 38,
|
||
y: 314
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 314
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 358
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 358
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-18'
|
||
},
|
||
// 点19：pv5 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 314,
|
||
path: [{
|
||
x: 38,
|
||
y: 314
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 314
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-19'
|
||
},
|
||
// 点20：pv6 → 向左 → 向下 → 向右
|
||
{
|
||
x: 38,
|
||
y: 336,
|
||
path: [{
|
||
x: 38,
|
||
y: 336
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 336
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 358
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 358
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-20'
|
||
},
|
||
// 点21：pv6 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 336,
|
||
path: [{
|
||
x: 38,
|
||
y: 336
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 336
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-21'
|
||
},
|
||
// 点22：pcs3 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 358,
|
||
path: [{
|
||
x: 38,
|
||
y: 358
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 358
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#58D86B',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-22'
|
||
},
|
||
// 点23：pv7 → 向左 → 向下 → 向右
|
||
{
|
||
x: 38,
|
||
y: 380,
|
||
path: [{
|
||
x: 38,
|
||
y: 380
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 380
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 424
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 424
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-23'
|
||
},
|
||
// 点24：pv7 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 380,
|
||
path: [{
|
||
x: 38,
|
||
y: 380
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 380
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-24'
|
||
},
|
||
// 点25：pv8 → 向左 → 向下 → 向右
|
||
{
|
||
x: 38,
|
||
y: 402,
|
||
path: [{
|
||
x: 38,
|
||
y: 402
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 402
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 424
|
||
},
|
||
{
|
||
x: 38,
|
||
y: 424
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-25'
|
||
},
|
||
// 点26：pv8 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 402,
|
||
path: [{
|
||
x: 38,
|
||
y: 402
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 402
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#338EFE',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-26'
|
||
},
|
||
// 点27：pcs4 → 向左 → 向上 → 向右
|
||
{
|
||
x: 38,
|
||
y: 424,
|
||
path: [{
|
||
x: 38,
|
||
y: 424
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 424
|
||
},
|
||
{
|
||
x: 11,
|
||
y: 112
|
||
},
|
||
{
|
||
x: 55,
|
||
y: 112
|
||
}
|
||
],
|
||
color:'#58D86B',
|
||
currentStep: 0,
|
||
isActive: false, // 标识动画是否激活
|
||
id: 'point-27'
|
||
}
|
||
|
||
],
|
||
pointSpeed: 1, // 移动速度（像素/帧）
|
||
kWValues: {
|
||
pv1:null,
|
||
pv2:null,
|
||
pv3:null,
|
||
pv4:null,
|
||
pv5:null,
|
||
pv6:null,
|
||
pv7:null,
|
||
pv8:null,
|
||
pcs1:null,
|
||
pcs2:null,
|
||
pcs3:null,
|
||
pcs4:null
|
||
}
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
currentStation() {
|
||
return this.vuex_currentStation;
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
// 强制取消动画帧
|
||
if (this.animationId) {
|
||
if (typeof requestAnimationFrame !== 'undefined') {
|
||
cancelAnimationFrame(this.animationId);
|
||
} else {
|
||
clearTimeout(this.animationId);
|
||
}
|
||
this.animationId = null; // 重置ID
|
||
}
|
||
// 重置所有动态点状态
|
||
this.movingPoints.forEach(point => {
|
||
point.isActive = false;
|
||
point.currentStep = 0;
|
||
point.x = point.path[0].x;
|
||
point.y = point.path[0].y;
|
||
});
|
||
// 清空canvasData
|
||
this.canvasData = [];
|
||
},
|
||
watch:{
|
||
stationId(newVal,oldVal){
|
||
if (newVal) {
|
||
this.getData(newVal);
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 启动动画
|
||
startAnimation() {
|
||
const canvasRef = this.$refs.topoCanvasRef;
|
||
if (!canvasRef) return;
|
||
|
||
// 清除旧动画
|
||
if (this.animationId !== null) {
|
||
if (requestAnimationFrame && this.animationId) {
|
||
cancelAnimationFrame(this.animationId);
|
||
} else {
|
||
clearTimeout(this.animationId);
|
||
}
|
||
this.animationId = null;
|
||
}
|
||
|
||
// 直接启动新动画
|
||
this.animate();
|
||
},
|
||
|
||
animate() {
|
||
const canvasRef = this.$refs.topoCanvasRef;
|
||
if (!canvasRef) return;
|
||
|
||
const animateFrame = () => {
|
||
// 1. 更新移动点的位置
|
||
this.movingPoints.forEach(point => {
|
||
if (!point.isActive) return;
|
||
const currentIndex = point.currentStep;
|
||
const nextTarget = point.path[currentIndex + 1];
|
||
|
||
if (!nextTarget) {
|
||
point.x = point.path[0].x;
|
||
point.y = point.path[0].y;
|
||
point.currentStep = 0;
|
||
return;
|
||
}
|
||
|
||
const dx = nextTarget.x - point.x;
|
||
const dy = nextTarget.y - point.y;
|
||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||
|
||
if (distance < this.pointSpeed) {
|
||
point.x = nextTarget.x;
|
||
point.y = nextTarget.y;
|
||
point.currentStep++;
|
||
} else {
|
||
point.x += (dx / distance) * this.pointSpeed;
|
||
point.y += (dy / distance) * this.pointSpeed;
|
||
}
|
||
});
|
||
|
||
// 2. 更新 canvasData 中的动态点
|
||
this.updateMovingPoints();
|
||
|
||
// 3. 清除并重绘
|
||
canvasRef.clear();
|
||
canvasRef.draw(null);
|
||
|
||
// 4. 继续下一帧（✅ 安全判断）
|
||
if (typeof requestAnimationFrame !== 'undefined') {
|
||
this.animationId = requestAnimationFrame(animateFrame);
|
||
} else {
|
||
this.animationId = setTimeout(animateFrame, 16);
|
||
}
|
||
};
|
||
|
||
// 启动第一帧（✅ 安全判断）
|
||
if (typeof requestAnimationFrame !== 'undefined') {
|
||
requestAnimationFrame(animateFrame);
|
||
} else {
|
||
setTimeout(animateFrame, 16);
|
||
}
|
||
},
|
||
updateMovingPoints() {
|
||
this.movingPoints.forEach(point => {
|
||
const dataIndex = this.canvasData.findIndex(item => item.id === point.id);
|
||
if (dataIndex !== -1) {
|
||
this.canvasData[dataIndex].coord = [
|
||
[point.x, point.y]
|
||
];
|
||
}
|
||
});
|
||
},
|
||
changeEnglish(){
|
||
this.textCanvasData = [
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[275, 60]
|
||
],
|
||
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: [
|
||
[80, 150]
|
||
],
|
||
font: [{
|
||
text: this.$t('homePage.home.operatingPower'),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[80, 165]
|
||
],
|
||
font: [{
|
||
text: '(kW)',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[155, 150]
|
||
],
|
||
font: [{
|
||
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[155, 165]
|
||
],
|
||
font: [{
|
||
text: '(kWh)',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[240, 150]
|
||
],
|
||
font: [{
|
||
text: 'SOC',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[240, 165]
|
||
],
|
||
font: [{
|
||
text: '(%)',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[280, 150]
|
||
],
|
||
font: [{
|
||
text: 'SOH',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},
|
||
{
|
||
type: "text",
|
||
coord: [
|
||
[280, 165]
|
||
],
|
||
font: [{
|
||
text: '(%)',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
]
|
||
|
||
},
|
||
getData(val){
|
||
// 彻底重置画布数据
|
||
this.canvasData = [];
|
||
// 重置所有点状态
|
||
this.movingPoints.forEach(point => (point.isActive = false,point.isMove = false,point.currentStep = 0,point.x = point.path[0].x,point.y = point.path[0].y));
|
||
this.stationId = val
|
||
this.textCanvasData.splice(10)
|
||
const api = [ this.getpv1(), this.getpv2(), this.getPcs1(),
|
||
this.getpv3(), this.getpv4(), this.getPcs2(),
|
||
this.getpv5(), this.getpv6(), this.getPcs3(),
|
||
this.getpv7(), this.getpv8(), this.getPcs4(),
|
||
this.getacdcCenter(), this.getAmmeter()
|
||
]
|
||
Promise.all(api).finally((result) => {
|
||
// 获取三个 kW 值
|
||
const {pv1,pv2,pv3,pv4,pv5,pv6,pv7,pv8,pcs1,pcs2,pcs3,pcs4} = this.kWValues;
|
||
const pvvalues = [pv1,pv2,pv3,pv4,pv5,pv6,pv7,pv8];
|
||
const pcsvalues = [pcs1,pcs2,pcs3,pcs4];
|
||
const pvallZero = pvvalues.every(v => v === 0);
|
||
const anyPositive = pvvalues.some(v => v > 1);
|
||
const anyNegative = pvvalues.some(v => v < 0);
|
||
const pcsanyNegative = pvvalues.some(v => v < 15);
|
||
|
||
// 重置所有点（确保干净）
|
||
this.movingPoints.forEach(p => (p.isActive = false));
|
||
// 条件3：全部为0 → 只显示点1
|
||
if (pvallZero) {
|
||
this.movingPoints.find(p => p.id === 'point-1').isActive = true;
|
||
if(pcsanyNegative){
|
||
this.movingPoints.find(p => p.id === 'point-2').isActive = true;
|
||
this.movingPoints.find(p => p.id === 'point-4').isActive = true;
|
||
this.movingPoints.find(p => p.id === 'point-5').isActive = true;
|
||
this.movingPoints.find(p => p.id === 'point-6').isActive = true;
|
||
this.movingPoints.find(p => p.id === 'point-7').isActive = true;
|
||
}
|
||
} else {
|
||
// 条件1：任一大于0 → 点6运动
|
||
if (anyPositive) {
|
||
this.movingPoints.find(p => p.id === 'point-3').isActive = true;
|
||
}
|
||
// 再设置其他点显示逻辑
|
||
this.updatePvPcsPoints();
|
||
}
|
||
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
||
.lineCanvasData, ...this.circleCanvasData
|
||
]
|
||
// 动态添加 movingPoints
|
||
this.movingPoints.forEach(point => {
|
||
this.canvasData.push({
|
||
type: "circle",
|
||
id: point.id,
|
||
coord: [
|
||
[point.x, point.y]
|
||
],
|
||
color: point.color,
|
||
r: 3,
|
||
isMove: true
|
||
});
|
||
});
|
||
this.noloading = true
|
||
this.$nextTick(() => {
|
||
this.startAnimation();
|
||
});
|
||
});
|
||
},
|
||
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()
|
||
})
|
||
})
|
||
|
||
},
|
||
|
||
updatePvPcsPoints() {
|
||
const {pv1,pv2,pv3,pv4,pv5,pv6,pv7,pv8,pcs1,pcs2,pcs3,pcs4} = this.kWValues;
|
||
|
||
// 处理左边：点8、9、10、11、12
|
||
const point8 = this.movingPoints.find(p => p.id === 'point-8');
|
||
const point9 = this.movingPoints.find(p => p.id === 'point-9');
|
||
const point10 = this.movingPoints.find(p => p.id === 'point-10');
|
||
const point11 = this.movingPoints.find(p => p.id === 'point-11');
|
||
const point12 = this.movingPoints.find(p => p.id === 'point-12');
|
||
if(pv1 > 1){
|
||
point8.isActive = true;
|
||
point9.isActive = true;
|
||
}else if (pv1 < 1){
|
||
point8.isActive = false;
|
||
point9.isActive = false;
|
||
}
|
||
if(pv2 > 1){
|
||
point10.isActive = true;
|
||
point11.isActive = true;
|
||
}else if (pv2 < 1){
|
||
point10.isActive = false;
|
||
point11.isActive = false;
|
||
}
|
||
if(pcs1 > 5){
|
||
point12.isActive = true;
|
||
}
|
||
// 处理左边：点13、14、15、16、17
|
||
const point13 = this.movingPoints.find(p => p.id === 'point-13');
|
||
const point14 = this.movingPoints.find(p => p.id === 'point-14');
|
||
const point15 = this.movingPoints.find(p => p.id === 'point-15');
|
||
const point16 = this.movingPoints.find(p => p.id === 'point-16');
|
||
const point17 = this.movingPoints.find(p => p.id === 'point-17');
|
||
if(pv3 > 1){
|
||
point13.isActive = true;
|
||
point14.isActive = true;
|
||
}else if (pv3 < 1){
|
||
point13.isActive = false;
|
||
point14.isActive = false;
|
||
}
|
||
if(pv4 > 1){
|
||
point15.isActive = true;
|
||
point16.isActive = true;
|
||
}else if (pv4 < 1){
|
||
point15.isActive = false;
|
||
point16.isActive = false;
|
||
}
|
||
if(pcs2 > 5){
|
||
point17.isActive = true;
|
||
}
|
||
// 处理左边：点18、19、20、21、22
|
||
const point18 = this.movingPoints.find(p => p.id === 'point-18');
|
||
const point19 = this.movingPoints.find(p => p.id === 'point-19');
|
||
const point20 = this.movingPoints.find(p => p.id === 'point-20');
|
||
const point21 = this.movingPoints.find(p => p.id === 'point-21');
|
||
const point22 = this.movingPoints.find(p => p.id === 'point-22');
|
||
if(pv5 > 1){
|
||
point18.isActive = true;
|
||
point19.isActive = true;
|
||
}else if (pv5 < 1){
|
||
point18.isActive = false;
|
||
point19.isActive = false;
|
||
}
|
||
if(pv6 > 1){
|
||
point20.isActive = true;
|
||
point21.isActive = true;
|
||
}else if (pv6 < 1){
|
||
point20.isActive = false;
|
||
point21.isActive = false;
|
||
}
|
||
if(pcs3 > 5){
|
||
point22.isActive = true;
|
||
}
|
||
// 处理左边：点23、24、25、26、27
|
||
const point23 = this.movingPoints.find(p => p.id === 'point-23');
|
||
const point24 = this.movingPoints.find(p => p.id === 'point-24');
|
||
const point25 = this.movingPoints.find(p => p.id === 'point-25');
|
||
const point26 = this.movingPoints.find(p => p.id === 'point-26');
|
||
const point27 = this.movingPoints.find(p => p.id === 'point-27');
|
||
if(pv7 > 1){
|
||
point23.isActive = true;
|
||
point24.isActive = true;
|
||
}else if (pv7 < 1){
|
||
point23.isActive = false;
|
||
point24.isActive = false;
|
||
}
|
||
if(pv8 > 1){
|
||
point25.isActive = true;
|
||
point26.isActive = true;
|
||
}else if (pv8 < 1){
|
||
point25.isActive = false;
|
||
point26.isActive = false;
|
||
}
|
||
if(pcs4 > 5){
|
||
point27.isActive = true;
|
||
}
|
||
|
||
},
|
||
|
||
getacdcCenter() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-acdc-center'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
// 这里可以根据实际需求处理交直流中心数据
|
||
})
|
||
}
|
||
resolve()
|
||
})
|
||
.catch(reject); // 新增错误捕获
|
||
})
|
||
},
|
||
|
||
getpv1() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pv-1'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
if (index == 0 && item.deviceType.includes('mppt')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pv1 = value; // 只记录
|
||
}
|
||
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80 + index * 75, 188]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240, 188]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[280, 188]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
} else {
|
||
this.kWValues.pv1 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pv1 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getpv2() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pv-2'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
if (index == 0 && item.deviceType.includes('mppt')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pv2 = value; // 只记录
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80 + index * 75, 208]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240, 208]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[280, 208]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
} else {
|
||
this.kWValues.pv2 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pv2 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getPcs1() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pcs-1'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80, 228]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[155, 228]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
res.data.forEach((item, index) => {
|
||
if (item.name.includes('SOC')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pcs1 = value;
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240 + index * 40, 228]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
} else {
|
||
this.kWValues.pcs1 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pcs1 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getpv3() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pv-3'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
if (index == 0 && item.deviceType.includes('mppt')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pv3 = value; // 只记录
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80 + index * 75, 250]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240, 250]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[280, 250]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
} else {
|
||
this.kWValues.pv3 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pv3 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getpv4() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pv-4'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
if (index == 0 && item.deviceType.includes('mppt')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pv4 = value; // 只记录
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80 + index * 75, 272]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240, 272]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[280, 272]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
} else {
|
||
this.kWValues.pv4 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pv4 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getPcs2() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pcs-2'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80, 294]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[155, 294]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
res.data.forEach((item, index) => {
|
||
if (item.name.includes('SOC')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pcs2 = value;
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240 + index * 40, 294]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
} else {
|
||
this.kWValues.pcs2 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pcs2 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getpv5() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pv-5'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
if (index == 0 && item.deviceType.includes('mppt')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pv5 = value; // 只记录
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80 + index * 75, 316]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240, 316]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[280, 316]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
} else {
|
||
this.kWValues.pv5 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pv5 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getpv6() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pv-6'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
if (index == 0 && item.deviceType.includes('mppt')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pv6 = value; // 只记录
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80 + index * 75, 338]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240, 338]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[280, 338]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
} else {
|
||
this.kWValues.pv6 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pv6 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getPcs3() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pcs-3'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80, 360]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[155, 360]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
res.data.forEach((item, index) => {
|
||
if (item.name.includes('SOC')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pcs3 = value;
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240 + index * 40, 360]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
} else {
|
||
this.kWValues.pcs3 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pcs3 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getpv7() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pv-7'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
if (index == 0 && item.deviceType.includes('mppt')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pv7 = value; // 只记录
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80 + index * 75, 382]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240, 382]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[280, 382]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
} else {
|
||
this.kWValues.pv7 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pv7 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getpv8() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pv-8'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
res.data.forEach((item, index) => {
|
||
if (index == 0 && item.deviceType.includes('mppt')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pv8 = value; // 只记录
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80 + index * 75, 404]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240, 404]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[280, 404]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
} else {
|
||
this.kWValues.pv8 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pv8 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
},
|
||
|
||
getPcs4() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetDynamicConfig({
|
||
stationId: this.stationId,
|
||
pageLocation: 'triad-pcs-4'
|
||
})
|
||
.then((res) => {
|
||
if (res.data && res.data.length) {
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[80, 426]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
},{
|
||
type: "text",
|
||
coord: [
|
||
[155, 426]
|
||
],
|
||
font: [{
|
||
text: '--',
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
}
|
||
)
|
||
res.data.forEach((item, index) => {
|
||
if (item.name.includes('SOC')) {
|
||
const value = parseFloat(item.value);
|
||
this.kWValues.pcs4 = value;
|
||
}
|
||
this.textCanvasData.push({
|
||
type: "text",
|
||
coord: [
|
||
[240 + index * 40, 426]
|
||
],
|
||
font: [{
|
||
text: `${item.value}`,
|
||
size: 12,
|
||
color: "#666666",
|
||
width: 50,
|
||
}]
|
||
})
|
||
})
|
||
} else {
|
||
this.kWValues.pcs4 = 0; // 没数据视为 0
|
||
}
|
||
resolve()
|
||
}).catch(() => {
|
||
this.kWValues.pcs4 = 0; // 出错也视为 0
|
||
resolve();
|
||
})
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.warp {
|
||
width: 650rpx;
|
||
height: 900rpx;
|
||
position: relative;
|
||
}
|
||
</style> |