光伏功能
This commit is contained in:
huangjp
@ -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