光伏功能
This commit is contained in:
huangjp
@ -61,6 +61,8 @@
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
color: #5A5A5A;
|
||||
text-align: center;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.rightMark {
|
||||
position: absolute;
|
||||
|
||||
@ -1652,9 +1652,32 @@
|
||||
<circle id="myCircle" cx="220" cy="64" r="16" fill="#0DA17D"></circle>
|
||||
<circle id="myCircle" cx="960" cy="64" r="16" fill="#FB4444"></circle>
|
||||
<!-- 动画元素 -->
|
||||
<circle id="myCircle" cx="280" cy="64" r="10" fill="#FFFFFF">
|
||||
<animate attributeName="cx" from="280" to="940" dur="800ms" fill="freeze" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle id="myCircle" cx="280" cy="64" r="15" fill="#0DA17D">
|
||||
<animate attributeName="cx" from="280" to="940" dur="3000ms" fill="freeze" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<!-- pv1 -->
|
||||
<circle cx="160" cy="680" r="16" fill="#338EFE" />
|
||||
<circle class="anim-pv1" cx="160" cy="680" r="15" fill="#338EFE" />
|
||||
<!-- pv2 -->
|
||||
<circle cx="560" cy="680" r="16" fill="#338EFE" />
|
||||
<circle class="anim-pv2" cx="560" cy="680" r="15" fill="#338EFE" />
|
||||
<!-- pcs1 -->
|
||||
<circle cx="925" cy="680" r="16" fill="#58D86B" />
|
||||
<circle class="anim-elebox1" cx="925" cy="680" r="15" fill="#58D86B" />
|
||||
<!-- pv3 -->
|
||||
<circle cx="160" cy="1230" r="16" fill="#338EFE" />
|
||||
<circle class="anim-pv3" cx="160" cy="1230" r="15" fill="#338EFE" />
|
||||
<!-- pv4 -->
|
||||
<circle cx="560" cy="1230" r="16" fill="#338EFE" />
|
||||
<circle class="anim-pv4" cx="560" cy="1230" r="15" fill="#338EFE" />
|
||||
<!-- pcs2 -->
|
||||
<circle cx="925" cy="1230" r="16" fill="#58D86B" />
|
||||
<circle class="anim-elebox2" cx="925" cy="1230" r="15" fill="#58D86B" />
|
||||
<!-- 往负载方向 -->
|
||||
<!-- <circle cx="573" cy="500" r="16" fill="#338EFE" /> -->
|
||||
<circle class="animation anim-pvele" cx="300" cy="400" r="15" fill="#338EFE" />
|
||||
<!-- <circle cx="573" cy="500" r="16" fill="#58D86B" /> -->
|
||||
<circle class="animation anim-boxele" cx="300" cy="400" r="15" fill="#58D86B" />
|
||||
</svg>
|
||||
</view>
|
||||
</template>
|
||||
@ -1675,17 +1698,17 @@
|
||||
y: 194
|
||||
},
|
||||
{
|
||||
text: '计量电表功率(kW):100',
|
||||
text: this.$t('homePage.home.workStatus') + this.$t('homePage.home.standing'),
|
||||
x: 535,
|
||||
y: 370
|
||||
},
|
||||
{
|
||||
text: '计量电表功率(kW):120',
|
||||
text: this.$t('homePage.home.activePower') + '120',
|
||||
x: 535,
|
||||
y: 420
|
||||
},
|
||||
{
|
||||
text: '运行功率',
|
||||
text: this.$t('homePage.home.operatingPower'),
|
||||
x: 58,
|
||||
y: 860
|
||||
},
|
||||
@ -1695,7 +1718,7 @@
|
||||
y: 920
|
||||
},
|
||||
{
|
||||
text: '累计电量',
|
||||
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
|
||||
x: 58,
|
||||
y: 990
|
||||
},
|
||||
@ -1705,7 +1728,7 @@
|
||||
y: 1050
|
||||
},
|
||||
{
|
||||
text: '运行功率',
|
||||
text: this.$t('homePage.home.operatingPower'),
|
||||
x: 460,
|
||||
y: 860
|
||||
},
|
||||
@ -1715,7 +1738,7 @@
|
||||
y: 920
|
||||
},
|
||||
{
|
||||
text: '累计电量',
|
||||
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
|
||||
x: 460,
|
||||
y: 990
|
||||
},
|
||||
@ -1727,28 +1750,15 @@
|
||||
{
|
||||
text: 'SOC(%):100',
|
||||
x: 810,
|
||||
y: 860
|
||||
y: 910
|
||||
},
|
||||
{
|
||||
text: 'SOH(%):100',
|
||||
x: 810,
|
||||
y: 920
|
||||
y: 960
|
||||
},
|
||||
{
|
||||
text: '有机功率',
|
||||
x: 840,
|
||||
y: 990
|
||||
},
|
||||
{
|
||||
text: '(kWh):100',
|
||||
x: 810,
|
||||
y: 1050
|
||||
},
|
||||
|
||||
|
||||
|
||||
{
|
||||
text: '运行功率',
|
||||
text: this.$t('homePage.home.operatingPower'),
|
||||
x: 58,
|
||||
y: 1420
|
||||
},
|
||||
@ -1758,7 +1768,7 @@
|
||||
y: 1480
|
||||
},
|
||||
{
|
||||
text: '累计电量',
|
||||
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
|
||||
x: 58,
|
||||
y: 1550
|
||||
},
|
||||
@ -1768,7 +1778,7 @@
|
||||
y: 1610
|
||||
},
|
||||
{
|
||||
text: '运行功率',
|
||||
text: this.$t('homePage.home.operatingPower'),
|
||||
x: 460,
|
||||
y: 1420
|
||||
},
|
||||
@ -1778,7 +1788,7 @@
|
||||
y: 1480
|
||||
},
|
||||
{
|
||||
text: '累计电量',
|
||||
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
|
||||
x: 460,
|
||||
y: 1550
|
||||
},
|
||||
@ -1790,23 +1800,13 @@
|
||||
{
|
||||
text: 'SOC(%):100',
|
||||
x: 810,
|
||||
y: 1420
|
||||
y: 1470
|
||||
},
|
||||
{
|
||||
text: 'SOH(%):100',
|
||||
x: 810,
|
||||
y: 1480
|
||||
},
|
||||
{
|
||||
text: '有机功率',
|
||||
x: 840,
|
||||
y: 1550
|
||||
},
|
||||
{
|
||||
text: '(kWh):100',
|
||||
x: 810,
|
||||
y: 1610
|
||||
},
|
||||
y: 1530
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -1837,4 +1837,86 @@
|
||||
font-size: 40px;
|
||||
fill: #7F7F7F;
|
||||
}
|
||||
.anim-pv1{
|
||||
animation: moveToplfetpv1 3s linear 0s infinite both;
|
||||
}
|
||||
@keyframes moveToplfetpv1 {
|
||||
0% { cx: 160; cy: 680; }
|
||||
10% { cx: 160; cy: 600; }
|
||||
37.5% { cx: 10; cy: 600; }
|
||||
67.5% { cx: 10; cy: 405; }
|
||||
99.9999% { cx: 180; cy: 405; }
|
||||
100% { cx: 160; cy: 680; }
|
||||
}
|
||||
.anim-pv2{
|
||||
animation: moveToplfetpv2 3.8s linear 0s infinite both;
|
||||
}
|
||||
@keyframes moveToplfetpv2 {
|
||||
0% { cx: 560; cy: 680; }
|
||||
10% { cx: 560; cy: 600; }
|
||||
57.5% { cx: 10; cy: 600; }
|
||||
77.5% { cx: 10; cy: 405; }
|
||||
99.9999% { cx: 180; cy: 405; }
|
||||
100% { cx: 560; cy: 680; }
|
||||
}
|
||||
.anim-pv3{
|
||||
animation: moveToplfetpv3 5s linear 0s infinite both;
|
||||
}
|
||||
@keyframes moveToplfetpv3 {
|
||||
0% { cx: 160; cy: 1230; }
|
||||
7% { cx: 160; cy: 1160; }
|
||||
21% { cx: 10; cy: 1160; }
|
||||
70% { cx: 10; cy: 405; }
|
||||
99.9999% { cx: 180; cy: 405; }
|
||||
100% { cx: 160; cy: 1230; }
|
||||
}
|
||||
.anim-pv4{
|
||||
animation: moveToplfetpv4 6.5s linear 0s infinite both;
|
||||
}
|
||||
@keyframes moveToplfetpv4 {
|
||||
0% { cx: 560; cy: 1230; }
|
||||
5% { cx: 560; cy: 1160; }
|
||||
45% { cx: 10; cy: 1160; }
|
||||
85% { cx: 10; cy: 405; }
|
||||
99.9999% { cx: 180; cy: 405; }
|
||||
100% { cx: 560; cy: 1230; }
|
||||
}
|
||||
.anim-elebox1{
|
||||
animation: moveToplfetbox1 5s linear 0s infinite both;
|
||||
}
|
||||
@keyframes moveToplfetbox1 {
|
||||
0% { cx: 925; cy: 680; }
|
||||
10% { cx: 925; cy: 600; }
|
||||
67.5% { cx: 10; cy: 600; }
|
||||
82.5% { cx: 10; cy: 405; }
|
||||
99.9999% { cx: 180; cy: 405; }
|
||||
100% { cx: 925; cy: 680; }
|
||||
}
|
||||
.anim-elebox2{
|
||||
animation: moveToplfetbox2 8s linear 0s infinite both;
|
||||
}
|
||||
@keyframes moveToplfetbox2 {
|
||||
0% { cx: 925; cy: 1230; }
|
||||
5% { cx: 925; cy: 1160; }
|
||||
55% { cx: 10; cy: 1160; }
|
||||
90% { cx: 10; cy: 405; }
|
||||
99.9999% { cx: 180; cy: 405; }
|
||||
100% { cx: 925; cy: 1230; }
|
||||
}
|
||||
.animation{
|
||||
animation: moveRightTopRight 5s linear 0s infinite both;
|
||||
}
|
||||
.anim-pvele{
|
||||
animation-delay: 0s;
|
||||
}
|
||||
@keyframes moveRightTopRight {
|
||||
0% { cx: 300; cy: 400; }
|
||||
15% { cx: 435; cy: 400; }
|
||||
50% { cx: 435; cy: 64; }
|
||||
99.9999% { cx: 940; cy: 64; }
|
||||
100% { cx: 300; cy: 400; }
|
||||
}
|
||||
.anim-boxele{
|
||||
animation-delay: 1s;
|
||||
}
|
||||
</style>
|
||||
@ -550,11 +550,21 @@
|
||||
<path d="M 1020,964L 1018,964L 1018,990L 1020,990L 1020,989L 1019,989L 1019,965L 1020,965Z"
|
||||
style="fill:rgb(144,188,174);" />
|
||||
<path d="M 1035,982L 1034,982L 1034,989L 1032,989L 1032,990L 1035,990Z" style="fill:rgb(144,188,174);" />
|
||||
<circle cx="155" cy="920" r="16" fill="#338EFE" />
|
||||
<circle class="anim-pv1" cx="155" cy="920" r="16" fill="#338EFE" />
|
||||
<circle cx="570" cy="920" r="16" fill="#338EFE" />
|
||||
<circle class="anim-pv2" cx="570" cy="920" r="16" fill="#338EFE" />
|
||||
<circle cx="1000" cy="920" r="16" fill="#58D86B" />
|
||||
<circle class="anim-elebox1" cx="1000" cy="920" r="16" fill="#58D86B" />
|
||||
|
||||
<!-- <circle cx="573" cy="500" r="16" fill="#338EFE" /> -->
|
||||
<circle class="anim-topright anim-pvele" cx="573" cy="500" r="16" fill="#338EFE" />
|
||||
<!-- <circle cx="573" cy="500" r="16" fill="#58D86B" /> -->
|
||||
<circle class="anim-topright anim-boxele" cx="573" cy="500" r="16" fill="#58D86B" />
|
||||
<!-- 动画元素 -->
|
||||
<circle id="myCircle" cx="280" cy="64" r="10" fill="#FFFFFF">
|
||||
<animate attributeName="cx" from="280" to="1000" dur="800ms" fill="freeze" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle id="myCircle" cx="280" cy="67" r="15" fill="#0DA17D">
|
||||
<animate attributeName="cx" from="280" to="1000" dur="3000ms" fill="freeze" repeatCount="indefinite" />
|
||||
</circle>
|
||||
</svg>
|
||||
</view>
|
||||
|
||||
@ -566,57 +576,57 @@
|
||||
return {
|
||||
tags: [
|
||||
{
|
||||
text: '100kW',
|
||||
text: '',
|
||||
x: 68,
|
||||
y: 194
|
||||
},
|
||||
{
|
||||
text: '100kW',
|
||||
text: '',
|
||||
x: 1060,
|
||||
y: 194
|
||||
},
|
||||
{
|
||||
text: '计量电表功率(kW):100',
|
||||
text: this.$t('homePage.home.workStatus') + this.$t('homePage.home.standing'),
|
||||
x: 655,
|
||||
y: 400
|
||||
},
|
||||
{
|
||||
text: '计量电表功率(kW):120',
|
||||
text: this.$t('homePage.home.activePower') + '120',
|
||||
x: 655,
|
||||
y: 460
|
||||
},
|
||||
{
|
||||
text: '运行功率',
|
||||
text: this.$t('homePage.home.operatingPower'),
|
||||
x: 48,
|
||||
y: 1110
|
||||
},
|
||||
{
|
||||
text: '(kW):100',
|
||||
text: '(kW):50',
|
||||
x: 48,
|
||||
y: 1170
|
||||
},
|
||||
{
|
||||
text: '累计电量',
|
||||
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
|
||||
x: 48,
|
||||
y: 1240
|
||||
},
|
||||
{
|
||||
text: '(kWh):100',
|
||||
text: '(kWh):220',
|
||||
x: 48,
|
||||
y: 1300
|
||||
},
|
||||
{
|
||||
text: '运行功率',
|
||||
text: this.$t('homePage.home.operatingPower'),
|
||||
x: 470,
|
||||
y: 1110
|
||||
},
|
||||
{
|
||||
text: '(kW):100',
|
||||
text: '(kW):50',
|
||||
x: 470,
|
||||
y: 1170
|
||||
},
|
||||
{
|
||||
text: '累计电量',
|
||||
text: this.$t('homePage.home.accumulatedElectricityConsumption'),
|
||||
x: 470,
|
||||
y: 1240
|
||||
},
|
||||
@ -626,25 +636,15 @@
|
||||
y: 1300
|
||||
},
|
||||
{
|
||||
text: 'SOC(%):100',
|
||||
text: 'SOC(%):73',
|
||||
x: 880,
|
||||
y: 1110
|
||||
y: 1160
|
||||
},
|
||||
{
|
||||
text: 'SOH(%):100',
|
||||
text: 'SOH(%):99',
|
||||
x: 880,
|
||||
y: 1170
|
||||
},
|
||||
{
|
||||
text: '有机功率',
|
||||
x: 920,
|
||||
y: 1230
|
||||
},
|
||||
{
|
||||
text: '(kWh):100',
|
||||
x: 900,
|
||||
y: 1300
|
||||
},
|
||||
y: 1220
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -675,4 +675,86 @@
|
||||
font-size: 40px;
|
||||
fill: #7F7F7F;
|
||||
}
|
||||
/* 通用动画点样式 */
|
||||
.anim-pv1 {
|
||||
r: 15; /* 半径 */
|
||||
fill: #338EFE; /* 颜色 */
|
||||
/* CSS 动画核心配置：动画名称 时长 时间函数 延迟 循环次数 填充模式 */
|
||||
animation: moveTopRightTop 3s linear 0s infinite both;
|
||||
}
|
||||
.anim-pv2 {
|
||||
r: 15;
|
||||
fill: #338EFE;
|
||||
animation: moveTop 2s linear 0s infinite both;
|
||||
}
|
||||
.anim-elebox1 {
|
||||
r: 15;
|
||||
fill: #58D86B;
|
||||
animation: moveTopleftTop 3s linear 0s infinite both;
|
||||
}
|
||||
/* 关键帧：定义运动轨迹（向右→向下→复位） */
|
||||
@keyframes moveTopRightTop {
|
||||
/* 0%：初始位置（cx=280, cy=67） */
|
||||
0% {
|
||||
cx: 155;
|
||||
cy: 920;
|
||||
}
|
||||
|
||||
10% {
|
||||
cx: 155;
|
||||
cy: 845;
|
||||
}
|
||||
/* 65%：向右移动（2s 完成，对应总时长 3.1s 的 65%） */
|
||||
65% {
|
||||
cx: 570; /* 横向终点 */
|
||||
cy: 845; /* 纵向保持初始 */
|
||||
}
|
||||
/* 97%：向下移动（1s 完成，对应总时长 3.1s 的 97%） */
|
||||
99.99% {
|
||||
cx: 570; /* 横向保持终点 */
|
||||
cy: 680; /* 纵向终点 */
|
||||
}
|
||||
/* 100%：瞬间复位（避免卡顿） */
|
||||
100% {
|
||||
cx: 155;
|
||||
cy: 920;
|
||||
}
|
||||
}
|
||||
@keyframes moveTop {
|
||||
0% {
|
||||
cx: 570;
|
||||
cy: 920;
|
||||
}
|
||||
99.99% {
|
||||
cx: 570;
|
||||
cy: 680;
|
||||
}
|
||||
100% {
|
||||
cx: 570;
|
||||
cy: 920;
|
||||
}
|
||||
}
|
||||
@keyframes moveTopleftTop {
|
||||
0% { cx: 1000; cy: 920; }
|
||||
10% { cx: 1000; cy: 845; }
|
||||
65% { cx: 570; cy: 845; }
|
||||
99.99% { cx: 570; cy: 680; }
|
||||
100% { cx: 1000; cy: 920; }
|
||||
}
|
||||
|
||||
.anim-topright{
|
||||
animation: moveTopRight 4s linear 0s infinite both;
|
||||
}
|
||||
.anim-pvele{
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.anim-boxele{
|
||||
animation-delay: 1s;
|
||||
}
|
||||
@keyframes moveTopRight {
|
||||
0% { cx: 573; cy: 500; }
|
||||
50% { cx: 573; cy: 67; }
|
||||
99.99% { cx: 1000; cy: 67; }
|
||||
100% { cx: 573; cy: 500; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user