Browse Source

feat: 更新中间东环

sunxiao 6 days ago
parent
commit
2482c62ff3
3 changed files with 123 additions and 6 deletions
  1. 2 2
      .env.development
  2. 115 2
      src/views/control/CirclePanel.vue
  3. 6 2
      src/views/control/MedicinalView.vue

+ 2 - 2
.env.development

@@ -1,5 +1,5 @@
 # 请求地址
 # 请求地址
-# VITE_BASE_URL=http://chat.sequoialibra.com:81/apiServe/
-VITE_BASE_URL=http://192.168.40.21:8080/
+VITE_BASE_URL=http://chat.sequoialibra.com:81/apiServe/
+# VITE_BASE_URL=http://192.168.40.21:8080/
 # 请求前缀
 # 请求前缀
 VITE_BASE_PREFIX='' 
 VITE_BASE_PREFIX='' 

+ 115 - 2
src/views/control/CirclePanel.vue

@@ -9,24 +9,46 @@ defineProps({
   tytjTransientLL: {
   tytjTransientLL: {
     type: Number,
     type: Number,
     default: 0
     default: 0
+  },
+  runing: {
+    type: Boolean,
+    default: false
   }
   }
 })
 })
 </script>
 </script>
 
 
 <template>
 <template>
   <div class="circle-panel-container">
   <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>
     <h4 class="title">智能加药量</h4>
     <div class="intellect-number">
     <div class="intellect-number">
       <p class="num">
       <p class="num">
         <NNumberAnimation :from="0" :to="medicineAmount || 0" :duration="1000" :precision="0"></NNumberAnimation>
         <NNumberAnimation :from="0" :to="medicineAmount || 0" :duration="1000" :precision="0"></NNumberAnimation>
       </p>
       </p>
-      <p class="unit">L/h</p>
+      <p class="unit">/h</p>
     </div>
     </div>
     <p class="instant-number space-x-[14px]">
     <p class="instant-number space-x-[14px]">
       <span class="label">瞬时加药量</span>
       <span class="label">瞬时加药量</span>
       <span class="value">
       <span class="value">
         <NNumberAnimation :from="0" :to="tytjTransientLL || 0" :duration="1000" :precision="0"></NNumberAnimation>
         <NNumberAnimation :from="0" :to="tytjTransientLL || 0" :duration="1000" :precision="0"></NNumberAnimation>
-        L/h
+        <span>m³/h</span>
       </span>
       </span>
     </p>
     </p>
   </div>
   </div>
@@ -34,6 +56,7 @@ defineProps({
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .circle-panel-container {
 .circle-panel-container {
+  position: relative;
   @include flex(y, center, between);
   @include flex(y, center, between);
   width: 186px;
   width: 186px;
   height: 186px;
   height: 186px;
@@ -44,6 +67,7 @@ defineProps({
   background-size: contain;
   background-size: contain;
   font-style: normal;
   font-style: normal;
 
 
+
   .title {
   .title {
     color: #333;
     color: #333;
     font-size: 14px;
     font-size: 14px;
@@ -75,4 +99,93 @@ defineProps({
     line-height: 10px;
     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>
 </style>

+ 6 - 2
src/views/control/MedicinalView.vue

@@ -71,7 +71,7 @@ const handleUpdateParams = () => {
 const getNumVal = (type, n1, n2) => {
 const getNumVal = (type, n1, n2) => {
 
 
   if ( type == 0 ) {
   if ( type == 0 ) {
-    return Math.max(n1, n2);
+    return Math.max(Number(n1.toFixed(2)), Number(n2.toFixed(2)));
   }
   }
 
 
   if ( type == 1 ) {
   if ( type == 1 ) {
@@ -323,7 +323,11 @@ onUnmounted(() => {
               <div class="result-content">
               <div class="result-content">
                 <div class="number_card space-x-[20px]">
                 <div class="number_card space-x-[20px]">
                   <NumberPanel direction="left" title="智能控制系数" :value="panelResultData.kzxs"></NumberPanel>
                   <NumberPanel direction="left" title="智能控制系数" :value="panelResultData.kzxs"></NumberPanel>
-                  <CirclePanel :medicineAmount="panelResultData.calculateVal" :tytjTransientLL="panelResultData.realValue"></CirclePanel>
+                  <CirclePanel
+                    :runing="systemSwitchType"
+                    :medicineAmount="panelResultData.calculateVal"
+                    :tytjTransientLL="panelResultData.realValue"
+                  ></CirclePanel>
                   <NumberPanel direction="right" title="硝酸盐智能设定" unit="mg/L" :value="panelResultData.htfksd"></NumberPanel>
                   <NumberPanel direction="right" title="硝酸盐智能设定" unit="mg/L" :value="panelResultData.htfksd"></NumberPanel>
                 </div>
                 </div>
                 <div class="progress_card space-y-[8px]">
                 <div class="progress_card space-y-[8px]">