feat: 准备制作动效

src/assets/images/control/line-right-1.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="141" height="166" viewBox="0 0 141 166" fill="none">
+  <path d="M1 164.58L109.06 159.904C109.915 159.867 110.662 159.316 110.951 158.51L140.468 76.0659C140.783 75.1852 140.48 74.202 139.723 73.6525L40.2105 1.42188L38 4.50098" stroke="#A1A1A1" stroke-opacity="0.5"/>
+</svg>

src/assets/images/control/line-right-2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="134" height="73" viewBox="0 0 134 73" fill="none">
+  <path d="M133.158 3.15841L122.368 0.263672L101.284 56.0604C100.984 56.8532 100.238 57.3891 99.3913 57.42L-0.000183105 61.0531V72.3689L108.587 67.6929C109.441 67.6561 110.189 67.1061 110.478 66.3013L133.158 3.15841Z" fill="#2BCD87"/>
+</svg>

src/assets/images/control/line-right-3.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="111" height="7" viewBox="0 0 111 7" fill="none">
+  <path d="M110.474 0.84375L0.999945 5.58059" stroke="#1689ED" stroke-width="1.57895"/>
+</svg>

src/views/control/CirclePanel.vue

@@ -0,0 +1,62 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="circle-panel-container">
+    <h4 class="title">智能加药量</h4>
+    <div class="intellect-number">
+      <p class="num">100.80</p>
+      <p class="unit">L/h</p>
+    </div>
+    <p class="instant-number space-x-[14px]">
+      <span class="label">瞬时加药量</span>
+      <span class="value">97.40L/h</span>
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.circle-panel-container {
+  @include flex(y, center, between);
+  width: 186px;
+  height: 186px;
+  padding: 28px 0px 40px 0px;
+  background:
+    url("@/assets/images/control/number-card-middle.svg") center center no-repeat,
+    url("@/assets/images/control/number-card-middle2.svg") center bottom no-repeat;
+  background-size: contain;
+  font-style: normal;
+
+  .title {
+    color: #333;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .intellect-number {
+    text-align: center;
+
+    .num {
+      color: #1A2029;
+      font-family: "DIN Alternate";
+      font-size: 42px;
+      font-weight: bold;
+      line-height: 42px;
+    }
+
+    .unit {
+      color: #4E4E4E;
+      font-size: 10px;
+      font-weight: bold;
+    }
+  }
+
+  .instant-number {
+    color: #333;
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 10px;
+  }
+}
+</style>

src/views/control/MedicinalView.vue

@@ -12,6 +12,7 @@ import TheResultPanel from './components/TheResultPanel.vue';
 import TheEchartPanel from './components/TheEchartPanel.vue';
 
 import NumberPanel from './NumberPanel.vue';
+import CirclePanel from './CirclePanel.vue';
 
 const message = useMessage();
 const isVisibleBtn = ref(true);
@@ -384,24 +385,10 @@ onMounted(async () => {
                 </ul>
               </div>
               <div class="result-content">
-                <div class="number_card space-x-[72px]">
-                  <NumberPanel direction="left"></NumberPanel>
-                  <!-- <div class="left">
-                    <div class="animate-card left-animate">
-                      <span class="number">5.9</span>
-                    </div>
-                    <span class="sub-title">智能控制系数</span>
-                  </div> -->
-                  <div class="middel"></div>
-                  <div class="right">
-                    <div class="animate-card right-animate">
-                      <span class="number">
-                        <i>122</i>
-                        <span>mg/L</span>
-                      </span>
-                    </div>
-                    <span class="sub-title">硝酸盐智能设定</span>
-                  </div>
+                <div class="number_card space-x-[20px]">
+                  <NumberPanel direction="left" title="智能控制系数" :value="123"></NumberPanel>
+                  <CirclePanel></CirclePanel>
+                  <NumberPanel direction="right" title="硝酸盐智能设定" unit="mg/L" :value="22"></NumberPanel>
                 </div>
                 <div class="progress_card space-y-[8px]">
                   <span class="time">模型更新时间： 2025-04-11 12:11:11</span>

src/views/control/NumberPanel.vue

@@ -1,42 +1,121 @@
 <script setup>
+import { NNumberAnimation } from 'naive-ui';
+
 const props = defineProps({
   direction: {
     type: String,
   },
+  title: {
+    type: String,
+    default: ''
+  },
+  unit: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: Number,
+    default: 0
+  }
 })
 </script>
 
 <template>
-  <div class="number-panel-container space-y-[6px]">
-    <div :class="['number-panel-inner', 'direction-' + direction ]"></div>
+  <div :class="['number-panel-container', 'space-y-[6px]', direction]">
+    <div :class="['number-panel-inner', 'direction-' + direction ]">
+      <span class="number">
+        <NNumberAnimation :from="0" :to="value" :duration="1000" :precision="0"></NNumberAnimation>
+      </span>
+      <span class="unit" v-if="unit">mg/L</span>
+    </div>
     <div class="sub-title">
-      <span>智能控制系数</span>
+      <span>{{ title }}</span>
     </div>
   </div>
 </template>
 
 
-<style lang="scss">
+<style lang="scss" scoped>
 .number-panel-container {
   width: 194px;
-  background: #ccc;
 
   .number-panel-inner {
+    position: relative;
     width: 140px;
     height: 164px;
+
+    .number {
+      position: absolute;
+      color: #1A2029;
+      font-family: "DIN Alternate";
+      font-size: 52px;
+      font-style: normal;
+      font-weight: 700;
+    }
   }
 
   .sub-title {
     width: 100%;
-    padding-right: 20px;
     text-align: center;
+    color: #333;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
   }
 
   .direction-left {
     background: url("@/assets/images/control/line-left-1.svg") left center no-repeat,
     url("@/assets/images/control/line-left-2.svg") right bottom no-repeat,
-    url("@/assets/images/control/line-left-3.svg") right bottom no-repeat;
-    // background: red;
+    url("@/assets/images/control/line-left-3.svg") right 159px no-repeat,
+    url("@/assets/images/control/line-left-4.png") 10px -4px no-repeat;
+    background-size: auto auto, auto auto, auto auto, 100% 110%;
+
+    .number {
+      top: 30px;
+      right: 0;
+    }
+
+    .sub-title {
+      padding-right: 20px;
+    }
+  }
+
+  .direction-right {
+    background: url("@/assets/images/control/line-right-1.svg") right center no-repeat,
+    url("@/assets/images/control/line-right-2.svg") left bottom no-repeat,
+    url("@/assets/images/control/line-right-3.svg") left 158px no-repeat,
+    url("@/assets/images/control/line-right-4.png") 10px -4px no-repeat;
+    background-size: auto auto, auto auto, auto auto, 100% 110%;
+
+    .number {
+      top: 30px;
+      left: 0;
+    }
+    
+    .unit {
+      position: absolute;
+      top: 96px;
+      left: 4px;
+      color: #000;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: normal;
+    }
+  }
+}
+
+.left {
+  .sub-title {
+    padding-right: 20px;
+  }
+}
+
+.right {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-end;
+  .sub-title {
+    padding-left: 30px;
   }
 }
 </style>