|
@@ -9,24 +9,46 @@ defineProps({
|
|
|
tytjTransientLL: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
+ },
|
|
|
+ runing: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="circle-panel-container">
|
|
|
+ <div class="animation-circle animate" v-if="runing">
|
|
|
+ <div class='circle'>
|
|
|
+ <div class='inner'></div>
|
|
|
+ </div>
|
|
|
+ <div class='circle'>
|
|
|
+ <div class='inner'></div>
|
|
|
+ </div>
|
|
|
+ <div class='circle'>
|
|
|
+ <div class='inner'></div>
|
|
|
+ </div>
|
|
|
+ <div class='circle'>
|
|
|
+ <div class='inner'></div>
|
|
|
+ </div>
|
|
|
+ <div class='circle'>
|
|
|
+ <div class='inner'></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<h4 class="title">智能加药量</h4>
|
|
|
<div class="intellect-number">
|
|
|
<p class="num">
|
|
|
<NNumberAnimation :from="0" :to="medicineAmount || 0" :duration="1000" :precision="0"></NNumberAnimation>
|
|
|
</p>
|
|
|
- <p class="unit">L/h</p>
|
|
|
+ <p class="unit">m³/h</p>
|
|
|
</div>
|
|
|
<p class="instant-number space-x-[14px]">
|
|
|
<span class="label">瞬时加药量</span>
|
|
|
<span class="value">
|
|
|
<NNumberAnimation :from="0" :to="tytjTransientLL || 0" :duration="1000" :precision="0"></NNumberAnimation>
|
|
|
- L/h
|
|
|
+ <span>m³/h</span>
|
|
|
</span>
|
|
|
</p>
|
|
|
</div>
|
|
@@ -34,6 +56,7 @@ defineProps({
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.circle-panel-container {
|
|
|
+ position: relative;
|
|
|
@include flex(y, center, between);
|
|
|
width: 186px;
|
|
|
height: 186px;
|
|
@@ -44,6 +67,7 @@ defineProps({
|
|
|
background-size: contain;
|
|
|
font-style: normal;
|
|
|
|
|
|
+
|
|
|
.title {
|
|
|
color: #333;
|
|
|
font-size: 14px;
|
|
@@ -75,4 +99,93 @@ defineProps({
|
|
|
line-height: 10px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.animation-circle {
|
|
|
+ width: 100%;
|
|
|
+ height: 182px;
|
|
|
+ border-radius: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0%;
|
|
|
+
|
|
|
+ *,
|
|
|
+ *:before,
|
|
|
+ *:after {
|
|
|
+ box-sizing: initial;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.circle {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.circle .inner {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 100%;
|
|
|
+ border: 6px solid rgba(45, 164, 249, 0.186);
|
|
|
+ border-right: none;
|
|
|
+ border-top: none;
|
|
|
+ box-shadow: inset 0px 0px 10px rgba(133, 3, 232, 0.087);
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes spin {
|
|
|
+ from {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ -webkit-transform: rotate(360deg);
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes spin {
|
|
|
+ from {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ -webkit-transform: rotate(360deg);
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.circle:nth-of-type(0) {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+}
|
|
|
+
|
|
|
+.circle:nth-of-type(0) .inner {
|
|
|
+ -webkit-animation: spin 2s infinite linear;
|
|
|
+ animation: spin 2s infinite linear;
|
|
|
+}
|
|
|
+
|
|
|
+.circle:nth-of-type(1) {
|
|
|
+ -webkit-transform: rotate(70deg);
|
|
|
+ transform: rotate(70deg);
|
|
|
+}
|
|
|
+
|
|
|
+.circle:nth-of-type(1) .inner {
|
|
|
+ -webkit-animation: spin 2s infinite linear;
|
|
|
+ animation: spin 2s infinite linear;
|
|
|
+}
|
|
|
+
|
|
|
+.circle:nth-of-type(2) {
|
|
|
+ -webkit-transform: rotate(140deg);
|
|
|
+ transform: rotate(140deg);
|
|
|
+}
|
|
|
+
|
|
|
+.circle:nth-of-type(2) .inner {
|
|
|
+ -webkit-animation: spin 2s infinite linear;
|
|
|
+ animation: spin 2s infinite linear;
|
|
|
+}
|
|
|
+
|
|
|
+.animate {
|
|
|
+ -webkit-animation: spin 5s infinite linear;
|
|
|
+ animation: spin 5s infinite linear;
|
|
|
+}
|
|
|
</style>
|