207版本：canvas电流流向功能，海外自定义电价功能
This commit is contained in:
huangjp
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="secondcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
<topoCanvas ref="topoCanvasRef" cId="secondcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@ -266,7 +266,175 @@
|
||||
isMove: false,
|
||||
r: 3,
|
||||
},
|
||||
]
|
||||
],
|
||||
animationId: null, // requestAnimationFrame ID
|
||||
movingPoints: [
|
||||
// 点1：左上角 → 向右移动
|
||||
{
|
||||
x: 60,
|
||||
y: 30,
|
||||
path: [{
|
||||
x: 60,
|
||||
y: 30
|
||||
}, // 起点
|
||||
{
|
||||
x: 240,
|
||||
y: 30
|
||||
} // 终点
|
||||
],
|
||||
currentStep: 0, // 当前在路径的哪一步
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-1'
|
||||
},
|
||||
// 点2：左上角 → 向右 → 向下
|
||||
{
|
||||
x: 60,
|
||||
y: 30,
|
||||
path: [{
|
||||
x: 60,
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 85
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-2'
|
||||
},
|
||||
// 点3：中间下 → 向下 → 向左 → 向下
|
||||
{
|
||||
x: 110,
|
||||
y: 127,
|
||||
path: [{
|
||||
x: 110,
|
||||
y: 127
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 60,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 60,
|
||||
y: 190
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-3'
|
||||
},
|
||||
// 点5：中间下 → 向下 → 向右 → 向下
|
||||
{
|
||||
x: 110,
|
||||
y: 127,
|
||||
path: [{
|
||||
x: 110,
|
||||
y: 127
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 270,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 270,
|
||||
y: 190
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-5'
|
||||
},
|
||||
// 点6：中间上 → 向上 → 向右
|
||||
{
|
||||
x: 110,
|
||||
y: 85,
|
||||
path: [{
|
||||
x: 110,
|
||||
y: 85
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 240,
|
||||
y: 30
|
||||
} // 终点
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-6'
|
||||
},
|
||||
// 点7：左下角 → 向上 → 向右 → 向上
|
||||
{
|
||||
x: 60,
|
||||
y: 190,
|
||||
path: [{
|
||||
x: 60,
|
||||
y: 190
|
||||
},
|
||||
{
|
||||
x: 60,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 127
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-7'
|
||||
},
|
||||
// 点9：右下角 → 向上 → 向左 → 向上
|
||||
{
|
||||
x: 270,
|
||||
y: 190,
|
||||
path: [{
|
||||
x: 270,
|
||||
y: 190
|
||||
},
|
||||
{
|
||||
x: 270,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 127
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-9'
|
||||
}
|
||||
],
|
||||
pointSpeed: 1.5, // 移动速度（像素/帧）
|
||||
kWValues: {
|
||||
left: null, // 存储 getLeftPcs 的 kW 值
|
||||
right: null // 存储 getRightPcs 的 kW 值
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -274,8 +442,117 @@
|
||||
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 = [
|
||||
{
|
||||
@ -332,14 +609,66 @@
|
||||
|
||||
},
|
||||
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(3)
|
||||
const api = [this.getLeftPcs(),this.getRightPcs(),this.getAmmeter()]
|
||||
Promise.all(api).finally((result) => {
|
||||
// 获取三个 kW 值
|
||||
const {
|
||||
left,
|
||||
right
|
||||
} = this.kWValues;
|
||||
const values = [left, right];
|
||||
const allZero = values.every(v => v === 0);
|
||||
const anyPositive = values.some(v => v > 0);
|
||||
const anyNegative = values.some(v => v < 0);
|
||||
|
||||
// 重置所有点（确保干净）
|
||||
this.movingPoints.forEach(p => (p.isActive = false));
|
||||
|
||||
// 条件3：全部为0 → 只显示点1
|
||||
if (allZero) {
|
||||
this.movingPoints.find(p => p.id === 'point-1').isActive = true;
|
||||
}
|
||||
// 否则按原逻辑处理
|
||||
else {
|
||||
// 条件1：任一大于0 → 点6运动
|
||||
if (anyPositive) {
|
||||
this.movingPoints.find(p => p.id === 'point-1').isActive = true;
|
||||
this.movingPoints.find(p => p.id === 'point-2').isActive = true;
|
||||
}
|
||||
// 条件2：任一小于0 → 点1和点2运动
|
||||
if (anyNegative) {
|
||||
this.movingPoints.find(p => p.id === 'point-6').isActive = true;
|
||||
}
|
||||
|
||||
// 再设置点3~9的显示逻辑
|
||||
this.updatePcsPoints();
|
||||
}
|
||||
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: "#3AECA1",
|
||||
r: 3,
|
||||
isMove: true
|
||||
});
|
||||
});
|
||||
this.noloading = true
|
||||
this.$nextTick(() => {
|
||||
this.startAnimation();
|
||||
});
|
||||
});
|
||||
},
|
||||
countChineseAndEnglishCharacters(str, x) {
|
||||
@ -406,7 +735,10 @@
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
if (item.name.includes('kW')) { // 检查是否包含'kW'
|
||||
const value = parseFloat(item.value);
|
||||
this.kWValues.left = value; // 只记录
|
||||
}
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
@ -435,9 +767,13 @@
|
||||
)
|
||||
|
||||
})
|
||||
} else {
|
||||
this.kWValues.left = 0; // 没数据视为 0
|
||||
}
|
||||
|
||||
resolve()
|
||||
}).catch(() => {
|
||||
this.kWValues.left = 0; // 出错也视为 0
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
|
||||
@ -453,7 +789,10 @@
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
if (item.name.includes('kW')) { // 检查是否包含'kW'
|
||||
const value = parseFloat(item.value);
|
||||
this.kWValues.right = value;
|
||||
}
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
type: "text",
|
||||
@ -482,12 +821,49 @@
|
||||
)
|
||||
|
||||
})
|
||||
} else {
|
||||
this.kWValues.right = 0;
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.kWValues.right = 0;
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
updatePcsPoints() {
|
||||
const { left, right } = this.kWValues;
|
||||
|
||||
// 处理左边：点3 和 点7
|
||||
const point3 = this.movingPoints.find(p => p.id === 'point-3');
|
||||
const point7 = this.movingPoints.find(p => p.id === 'point-7');
|
||||
|
||||
if (left === 0) {
|
||||
point3.isActive = false;
|
||||
point7.isActive = false;
|
||||
} else if (left > 0) {
|
||||
point3.isActive = true;
|
||||
point7.isActive = false;
|
||||
} else if (left < 0) {
|
||||
point3.isActive = false;
|
||||
point7.isActive = true;
|
||||
}
|
||||
// 处理右边：点5 和 点9
|
||||
const point5 = this.movingPoints.find(p => p.id === 'point-5');
|
||||
const point9 = this.movingPoints.find(p => p.id === 'point-9');
|
||||
|
||||
if (right === 0) {
|
||||
point5.isActive = false;
|
||||
point9.isActive = false;
|
||||
} else if (right > 0) {
|
||||
point5.isActive = true;
|
||||
point9.isActive = false;
|
||||
} else if (right < 0) {
|
||||
point5.isActive = false;
|
||||
point9.isActive = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas :cId="canvasId" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading" />
|
||||
<topoCanvas ref="topoCanvasRef" :cId="canvasId" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@ -214,7 +214,65 @@
|
||||
r: 3
|
||||
},
|
||||
|
||||
]
|
||||
],
|
||||
animationId: null, // requestAnimationFrame ID
|
||||
movingPoints: [
|
||||
// 点1：左上角 → 向右移动
|
||||
{
|
||||
x: 50,
|
||||
y: 110,
|
||||
path: [{
|
||||
x: 50,
|
||||
y: 110
|
||||
}, // 起点
|
||||
{
|
||||
x: 140,
|
||||
y: 110
|
||||
} // 终点
|
||||
],
|
||||
currentStep: 0, // 当前在路径的哪一步
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-1'
|
||||
},
|
||||
// 点2：左上角 → 向右移动
|
||||
{
|
||||
x: 185,
|
||||
y: 110,
|
||||
path: [{
|
||||
x: 185,
|
||||
y: 110
|
||||
}, // 起点
|
||||
{
|
||||
x: 260,
|
||||
y: 110
|
||||
} // 终点
|
||||
],
|
||||
currentStep: 0, // 当前在路径的哪一步
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-2'
|
||||
},
|
||||
// 点3：左上角 → 向右移动
|
||||
{
|
||||
x: 260,
|
||||
y: 110,
|
||||
path: [{
|
||||
x: 260,
|
||||
y: 110
|
||||
}, // 起点
|
||||
{
|
||||
x: 185,
|
||||
y: 110
|
||||
} // 终点
|
||||
],
|
||||
currentStep: 0, // 当前在路径的哪一步
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-3'
|
||||
}
|
||||
],
|
||||
pointSpeed: 1.5, // 移动速度（像素/帧）
|
||||
kWValues: {
|
||||
right: null // 存储 getRightPcs 的 kW 值
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -222,8 +280,119 @@
|
||||
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){
|
||||
console.log(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 = [
|
||||
// 并网柜--0
|
||||
@ -351,17 +520,42 @@
|
||||
]
|
||||
},
|
||||
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.clearData()
|
||||
const api = [
|
||||
this.getMiddleData()
|
||||
];
|
||||
Promise.all(api).finally((result) => {
|
||||
// 重置所有点（确保干净）
|
||||
this.movingPoints.forEach(p => (p.isActive = false));
|
||||
this.movingPoints.find(p => p.id === 'point-1').isActive = true;
|
||||
// 再设置点2-3的显示逻辑
|
||||
this.updatePcsPoints();
|
||||
|
||||
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: "#3AECA1",
|
||||
r: 3,
|
||||
isMove: true
|
||||
});
|
||||
});
|
||||
this.noloading = true
|
||||
this.$nextTick(() => {
|
||||
this.startAnimation();
|
||||
});
|
||||
});
|
||||
},
|
||||
workStatus(val, data) {
|
||||
@ -401,18 +595,45 @@
|
||||
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 + '' :
|
||||
''
|
||||
if (res.data) {
|
||||
const value = parseFloat(res.data.activePowerPCS);
|
||||
this.kWValues.right = value;
|
||||
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 + '' :
|
||||
''
|
||||
} else {
|
||||
this.kWValues.right = 0;
|
||||
}
|
||||
resolve()
|
||||
}).catch(() => {
|
||||
this.kWValues.right = 0;
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
updatePcsPoints() {
|
||||
const { right } = this.kWValues;
|
||||
// 处理右边：点5 和 点9
|
||||
const point2 = this.movingPoints.find(p => p.id === 'point-2');
|
||||
const point3 = this.movingPoints.find(p => p.id === 'point-3');
|
||||
|
||||
if (right === 0) {
|
||||
point2.isActive = false;
|
||||
point3.isActive = false;
|
||||
} else if (right > 0) {
|
||||
point2.isActive = true;
|
||||
point3.isActive = false;
|
||||
} else if (right < 0) {
|
||||
point2.isActive = false;
|
||||
point3.isActive = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="warp">
|
||||
<topoCanvas cId="thirdcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
|
||||
<topoCanvas ref="topoCanvasRef" cId="thirdcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData"
|
||||
:noloading="noloading" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@ -13,10 +14,9 @@
|
||||
return {
|
||||
canvasData: [],
|
||||
partList: {},
|
||||
noloading:false,
|
||||
noloading: false,
|
||||
// 文字
|
||||
textCanvasData: [
|
||||
{
|
||||
textCanvasData: [{
|
||||
type: "text",
|
||||
coord: [
|
||||
[260, 65]
|
||||
@ -81,8 +81,7 @@
|
||||
],
|
||||
|
||||
// 图片
|
||||
imageCanvasData: [
|
||||
{
|
||||
imageCanvasData: [{
|
||||
//负载
|
||||
type: "image",
|
||||
url: "/static/topology/load.png",
|
||||
@ -92,65 +91,64 @@
|
||||
],
|
||||
},
|
||||
{
|
||||
//电网
|
||||
type: "image",
|
||||
url: "/static/topology/dianwang.png",
|
||||
coord: [
|
||||
[15, 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: [
|
||||
[45, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//一体舱
|
||||
type: "image",
|
||||
url: "/static/topology/yiticang.png",
|
||||
coord: [
|
||||
[145, 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/yiticang.png",
|
||||
coord: [
|
||||
[255, 195],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
{
|
||||
//电表
|
||||
type: "image",
|
||||
url: "/static/topology/ammeter.png",
|
||||
coord: [
|
||||
[170, 35],
|
||||
[30, 30],
|
||||
],
|
||||
//电表
|
||||
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],
|
||||
],
|
||||
//sts
|
||||
type: "image",
|
||||
url: "/static/topology/yitigui.png",
|
||||
coord: [
|
||||
[95, 85],
|
||||
[30, 40],
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
|
||||
],
|
||||
// 线
|
||||
lineCanvasData: [
|
||||
{
|
||||
lineCanvasData: [{
|
||||
type: "line",
|
||||
coord: [
|
||||
[60, 30],
|
||||
@ -233,8 +231,7 @@
|
||||
|
||||
],
|
||||
// 点
|
||||
circleCanvasData: [
|
||||
{
|
||||
circleCanvasData: [{
|
||||
type: "circle",
|
||||
coord: [
|
||||
[60, 30]
|
||||
@ -306,8 +303,227 @@
|
||||
color: "#3AECA1",
|
||||
isMove: false,
|
||||
r: 3,
|
||||
}
|
||||
],
|
||||
|
||||
animationId: null, // requestAnimationFrame ID
|
||||
movingPoints: [
|
||||
// 点1：左上角 → 向右移动
|
||||
{
|
||||
x: 60,
|
||||
y: 30,
|
||||
path: [{
|
||||
x: 60,
|
||||
y: 30
|
||||
}, // 起点
|
||||
{
|
||||
x: 240,
|
||||
y: 30
|
||||
} // 终点
|
||||
],
|
||||
currentStep: 0, // 当前在路径的哪一步
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-1'
|
||||
},
|
||||
]
|
||||
// 点2：左上角 → 向右 → 向下
|
||||
{
|
||||
x: 60,
|
||||
y: 30,
|
||||
path: [{
|
||||
x: 60,
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 85
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-2'
|
||||
},
|
||||
// 点3：中间下 → 向下 → 向左 → 向下
|
||||
{
|
||||
x: 110,
|
||||
y: 127,
|
||||
path: [{
|
||||
x: 110,
|
||||
y: 127
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 60,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 60,
|
||||
y: 190
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-3'
|
||||
},
|
||||
// 点4：中间下 → 向下 → 向右 → 向下
|
||||
{
|
||||
x: 110,
|
||||
y: 127,
|
||||
path: [{
|
||||
x: 110,
|
||||
y: 127
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 160,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 160,
|
||||
y: 190
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-4'
|
||||
},
|
||||
// 点5：中间下 → 向下 → 向右 → 向下
|
||||
{
|
||||
x: 110,
|
||||
y: 127,
|
||||
path: [{
|
||||
x: 110,
|
||||
y: 127
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 270,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 270,
|
||||
y: 190
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-5'
|
||||
},
|
||||
// 点6：中间上 → 向上 → 向右
|
||||
{
|
||||
x: 110,
|
||||
y: 85,
|
||||
path: [{
|
||||
x: 110,
|
||||
y: 85
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 240,
|
||||
y: 30
|
||||
} // 终点
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-6'
|
||||
},
|
||||
// 点7：左下角 → 向上 → 向右 → 向上
|
||||
{
|
||||
x: 60,
|
||||
y: 190,
|
||||
path: [{
|
||||
x: 60,
|
||||
y: 190
|
||||
},
|
||||
{
|
||||
x: 60,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 127
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-7'
|
||||
},
|
||||
// 点8：底部中间 → 向上 → 向左 → 向上
|
||||
{
|
||||
x: 160,
|
||||
y: 190,
|
||||
path: [{
|
||||
x: 160,
|
||||
y: 190
|
||||
},
|
||||
{
|
||||
x: 160,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 127
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-8'
|
||||
},
|
||||
// 点9：右下角 → 向上 → 向左 → 向上
|
||||
{
|
||||
x: 270,
|
||||
y: 190,
|
||||
path: [{
|
||||
x: 270,
|
||||
y: 190
|
||||
},
|
||||
{
|
||||
x: 270,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 150
|
||||
},
|
||||
{
|
||||
x: 110,
|
||||
y: 127
|
||||
}
|
||||
],
|
||||
currentStep: 0,
|
||||
isActive: false, // 标识动画是否激活
|
||||
id: 'point-9'
|
||||
}
|
||||
],
|
||||
pointSpeed: 1.5, // 移动速度（像素/帧）
|
||||
kWValues: {
|
||||
left: null, // 存储 getLeftPcs 的 kW 值
|
||||
center: null, // 存储 getCenterPcs 的 kW 值
|
||||
right: null // 存储 getRightPcs 的 kW 值
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -315,11 +531,119 @@
|
||||
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: {
|
||||
changeEnglish(){
|
||||
this.textCanvasData = [
|
||||
{
|
||||
// 启动动画
|
||||
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: [
|
||||
[260, 65]
|
||||
@ -383,37 +707,104 @@
|
||||
|
||||
]
|
||||
},
|
||||
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
|
||||
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(5); // 清除文本数据
|
||||
|
||||
const api = [this.getLeftPcs(), this.getCenterPcs(), this.getRightPcs(), this.getAmmeter()];
|
||||
|
||||
Promise.all(api).finally(() => {
|
||||
// 获取三个 kW 值
|
||||
const {
|
||||
left,
|
||||
center,
|
||||
right
|
||||
} = this.kWValues;
|
||||
const values = [left, center, right];
|
||||
const allZero = values.every(v => v === 0);
|
||||
const anyPositive = values.some(v => v > 0);
|
||||
const anyNegative = values.some(v => v < 0);
|
||||
|
||||
// 重置所有点（确保干净）
|
||||
this.movingPoints.forEach(p => (p.isActive = false));
|
||||
|
||||
// 条件3：全部为0 → 只显示点1
|
||||
if (allZero) {
|
||||
this.movingPoints.find(p => p.id === 'point-1').isActive = true;
|
||||
}
|
||||
// 否则按原逻辑处理
|
||||
else {
|
||||
// 条件1：任一大于0 → 点6运动
|
||||
if (anyPositive) {
|
||||
this.movingPoints.find(p => p.id === 'point-1').isActive = true;
|
||||
this.movingPoints.find(p => p.id === 'point-2').isActive = true;
|
||||
}
|
||||
// 条件2：任一小于0 → 点1和点2运动
|
||||
if (anyNegative) {
|
||||
this.movingPoints.find(p => p.id === 'point-6').isActive = true;
|
||||
}
|
||||
|
||||
// 再设置点3~9的显示逻辑
|
||||
this.updatePcsPoints();
|
||||
}
|
||||
|
||||
// 重新构建 canvasData
|
||||
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: "#3AECA1",
|
||||
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(){
|
||||
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'
|
||||
pageLocation: 'triad-ammeter'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[120, 80 + index * 15]
|
||||
@ -424,11 +815,11 @@
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,130), 80 + index * 15]
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 130), 80 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
@ -436,60 +827,62 @@
|
||||
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()
|
||||
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) => {
|
||||
if (item.name.includes('kW')) { // 检查是否包含'kW'
|
||||
const value = parseFloat(item.value);
|
||||
this.kWValues.left = value; // 只记录
|
||||
}
|
||||
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,
|
||||
}]
|
||||
}, )
|
||||
|
||||
})
|
||||
} else {
|
||||
this.kWValues.left = 0; // 没数据视为 0
|
||||
}
|
||||
resolve()
|
||||
}).catch(() => {
|
||||
this.kWValues.left = 0; // 出错也视为 0
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
|
||||
@ -500,14 +893,16 @@
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-pcs-center'
|
||||
pageLocation: 'triad-pcs-center'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
if (item.name.includes('kW')) { // 检查是否包含'kW'
|
||||
const value = parseFloat(item.value);
|
||||
this.kWValues.center = value;
|
||||
}
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[110, 265 + index * 15]
|
||||
@ -518,11 +913,11 @@
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,110), 265 + index * 15]
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 110), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
@ -530,16 +925,20 @@
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
}, )
|
||||
|
||||
})
|
||||
} else {
|
||||
this.kWValues.center = 0;
|
||||
}
|
||||
|
||||
|
||||
resolve()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.kWValues.center = 0;
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
getRightPcs() {
|
||||
let self = this;
|
||||
@ -547,14 +946,16 @@
|
||||
self.$u.api.homePageData
|
||||
.GetDynamicConfig({
|
||||
stationId: this.stationId,
|
||||
pageLocation:'triad-pcs-right'
|
||||
pageLocation: 'triad-pcs-right'
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.data && res.data.length){
|
||||
res.data.forEach((item,index) => {
|
||||
|
||||
this.textCanvasData.push(
|
||||
{
|
||||
if (res.data && res.data.length) {
|
||||
res.data.forEach((item, index) => {
|
||||
if (item.name.includes('kW')) { // 检查是否包含'kW'
|
||||
const value = parseFloat(item.value);
|
||||
this.kWValues.right = value;
|
||||
}
|
||||
this.textCanvasData.push({
|
||||
type: "text",
|
||||
coord: [
|
||||
[220, 265 + index * 15]
|
||||
@ -565,11 +966,11 @@
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
{
|
||||
}, {
|
||||
type: "text",
|
||||
coord: [
|
||||
[this.countChineseAndEnglishCharacters(item.name,220), 265 + index * 15]
|
||||
[this.countChineseAndEnglishCharacters(item
|
||||
.name, 220), 265 + index * 15]
|
||||
],
|
||||
font: [{
|
||||
text: `${item.value}`,
|
||||
@ -577,17 +978,74 @@
|
||||
color: "#666666",
|
||||
width: 50,
|
||||
}]
|
||||
},
|
||||
)
|
||||
|
||||
}, )
|
||||
|
||||
})
|
||||
} else {
|
||||
this.kWValues.right = 0;
|
||||
}
|
||||
|
||||
|
||||
resolve()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.kWValues.right = 0;
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
updatePcsPoints() {
|
||||
const {
|
||||
left,
|
||||
center,
|
||||
right
|
||||
} = this.kWValues;
|
||||
|
||||
// 处理左边：点3 和 点7
|
||||
const point3 = this.movingPoints.find(p => p.id === 'point-3');
|
||||
const point7 = this.movingPoints.find(p => p.id === 'point-7');
|
||||
|
||||
if (left === 0) {
|
||||
point3.isActive = false;
|
||||
point7.isActive = false;
|
||||
} else if (left > 0) {
|
||||
point3.isActive = true;
|
||||
point7.isActive = false;
|
||||
} else if (left < 0) {
|
||||
point3.isActive = false;
|
||||
point7.isActive = true;
|
||||
}
|
||||
|
||||
// 处理中间：点4 和 点8
|
||||
const point4 = this.movingPoints.find(p => p.id === 'point-4');
|
||||
const point8 = this.movingPoints.find(p => p.id === 'point-8');
|
||||
|
||||
if (center === 0) {
|
||||
point4.isActive = false;
|
||||
point8.isActive = false;
|
||||
} else if (center > 0) {
|
||||
point4.isActive = true;
|
||||
point8.isActive = false;
|
||||
} else if (center < 0) {
|
||||
point4.isActive = false;
|
||||
point8.isActive = true;
|
||||
}
|
||||
|
||||
// 处理右边：点5 和 点9
|
||||
const point5 = this.movingPoints.find(p => p.id === 'point-5');
|
||||
const point9 = this.movingPoints.find(p => p.id === 'point-9');
|
||||
|
||||
if (right === 0) {
|
||||
point5.isActive = false;
|
||||
point9.isActive = false;
|
||||
} else if (right > 0) {
|
||||
point5.isActive = true;
|
||||
point9.isActive = false;
|
||||
} else if (right < 0) {
|
||||
point5.isActive = false;
|
||||
point9.isActive = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -598,4 +1056,4 @@
|
||||
height: 650rpx;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user