增加数字动画显示，提升逼格

src/pages/components/Fac.vue

@@ -24,28 +24,46 @@
                     <tr style="background-color:transparent">
                         <td style="border:0">
                             <div class="littleFont">成本<span style="color:#27e6ff">（总能耗）</span></div>
-                            <div style="font-size: 32px;font-weight: bold;">{{ costTotalTrans(deviceStatData.avgMonth.costTotal) }}<span style="font-size: 12px;">{{ deviceStatData.avgMonth.costTotal>10000?'万元/日':'元/日' }}</span></div>
+                            <div style="font-size: 32px;font-weight: bold;">
+                                <NumberAnimation :value="costTotalTrans(deviceStatData.avgMonth.costTotal)" :decimal="0" />
+                                <span style="font-size: 12px;">{{ deviceStatData.avgMonth.costTotal>10000?'万元/日':'元/日' }}</span>
+                            </div>
                         </td>
                         <td style="border:0;padding-left: 40px;">
                             <div class="littleFont">经编<span style="color:#27e6ff">（单位能耗）</span></div>
-                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">{{ deviceStatData.avgMonth.costJb }}<span style="font-size: 12px;"> 元/米</span></div>
+                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">
+                                <NumberAnimation :value="deviceStatData.avgMonth.costJb" :decimal="0" />
+                                <span style="font-size: 12px;"> 元/米</span>
+                            </div>
                         </td>
                         <td style="border:0;padding-left: 40px;">
                             <div class="littleFont">染整<span style="color:#27e6ff">（单位能耗）</span></div>
-                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">{{ deviceStatData.avgMonth.costRz }}<span style="font-size: 12px;"> 元/米</span></div>
+                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">
+                                <NumberAnimation :value="deviceStatData.avgMonth.costRz" :decimal="0" />
+                                <span style="font-size: 12px;"> 元/米</span>
+                            </div>
                         </td>
                         <td style="border-bottom: 0;border-right: 1px solid #146c86;padding-left: 20px;">&nbsp;</td>
                         <td style="border:0;padding-left: 40px;">
                             <div class="littleFont">经编<span style="color:#27e6ff">（产出）</span></div>
-                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.yieldJb }}<span style="font-size: 12px;"> 米/日</span></div>
+                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">
+                                <NumberAnimation :value="deviceStatData.avgMonth.yieldJb" :decimal="0" />
+                                <span style="font-size: 12px;"> 米/日</span>
+                            </div>
                         </td>
                         <td style="border:0;padding-left: 40px;">
                             <div class="littleFont">经编<span style="color:#27e6ff">（平均嫁动率）</span></div>
-                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.jdl }}<span style="font-size: 12px;"> %</span></div>
+                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">
+                                <NumberAnimation :value="deviceStatData.avgMonth.jdl" :decimal="0" />
+                                <span style="font-size: 12px;"> %</span>
+                            </div>
                         </td>
                         <td style="border:0;padding-left: 40px;">
                             <div class="littleFont">染整<span style="color:#27e6ff">（产出）</span></div>
-                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.yieldRz }}<span style="font-size: 12px;"> 米/日</span></div>
+                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">
+                                <NumberAnimation :value="deviceStatData.avgMonth.yieldRz" :decimal="0" />
+                                <span style="font-size: 12px;"> 米/日</span>
+                            </div>
                         </td>
                     </tr>
                 </tbody>
@@ -59,7 +77,10 @@
             </div>
             <div style="padding-left: 25px;color: #27e6ff;width: 100%;">
                 <div class="littleFont">产量（今日）</div>
-                <div style="font-size: 22px;font-weight: bold;">{{ deviceStatData.currYield.jb.yield }}<span class="littleFont">米</span></div>
+                <div style="font-size: 22px;font-weight: bold;">
+                    <NumberAnimation :value="deviceStatData.currYield.jb.yield" :decimal="0" />
+                    <span class="littleFont">米</span>
+                </div>
                 <div style="position: relative;margin-top: 5px;">
                     <div class="abs fac_progress_value" :style="{width:(deviceStatData.currYield.jb.yield/deviceStatData.currYield.jb.yieldMax*100)+'%',backgroundColor: '#008899'}"></div>
                     <div class="abs fac_progress" style="background-color: #072e47;"></div>
@@ -67,8 +88,15 @@
             </div>
             <div style="padding-left: 25px;color: #27e6ff;margin-top: 25px;width: 100%;">
                 <div class="littleFont"><span>开机数（今日）</span><span style="float: right;">总数</span></div>
-                <div style="font-size: 22px;"><b>{{ deviceStatData.currYield.jb.openNum }}<span class="littleFont">台</span></b>
-                    <b style="float: right;">{{ deviceStatData.currYield.jb.totalNum }}<span class="littleFont">台</span></b>
+                <div style="font-size: 22px;">
+                    <b>
+                        <NumberAnimation :value="deviceStatData.currYield.jb.openNum" :decimal="0" />
+                        <span class="littleFont">台</span>
+                    </b>
+                    <b style="float: right;">
+                        <NumberAnimation :value="deviceStatData.currYield.jb.totalNum" :decimal="0" />
+                        <span class="littleFont">台</span>
+                    </b>
                 </div>
                 <div style="position: relative;margin-top: 5px;">
                     <div class="abs fac_progress_value" :style="{width:deviceStatData.currYield.jb.openRatio+'%',backgroundColor: '#008899'}"></div>
@@ -84,7 +112,10 @@
             </div>
             <div style="padding-left: 25px;color: #27e6ff;width: 100%;">
                 <div class="littleFont">印染（今日）</div>
-                <div style="font-size: 22px;font-weight: bold;">{{ deviceStatData.currYield.rz.yield }}<span class="littleFont">米</span></div>
+                <div style="font-size: 22px;font-weight: bold;">
+                    <NumberAnimation :value="deviceStatData.currYield.rz.yield" :decimal="0" />
+                    <span class="littleFont">米</span>
+                </div>
                 <div style="position: relative;margin-top: 5px;">
                     <div class="abs fac_progress_value" :style="{width:(deviceStatData.currYield.rz.yield/deviceStatData.currYield.rz.yieldMax*100)+'%'}"></div>
                     <div class="abs fac_progress"></div>
@@ -92,8 +123,15 @@
             </div>
             <div style="padding-left: 25px;color: #27e6ff;margin-top: 25px;width: 100%;">
                 <div class="littleFont"><span>开机数（今日）</span><span style="float: right;">总数</span></div>
-                <div style="font-size: 22px;"><b>{{ deviceStatData.currYield.rz.openNum }}<span class="littleFont">台</span></b>
-                    <b style="float: right;">{{ deviceStatData.currYield.rz.totalNum }}<span class="littleFont">台</span></b>
+                <div style="font-size: 22px;">
+                    <b>
+                        <NumberAnimation :value="deviceStatData.currYield.rz.openNum" :decimal="0" />
+                        <span class="littleFont">台</span>
+                    </b>
+                    <b style="float: right;">
+                        <NumberAnimation :value="deviceStatData.currYield.rz.totalNum" :decimal="0" />
+                        <span class="littleFont">台</span>
+                    </b>
                 </div>
                 <div style="position: relative;margin-top: 5px;">
                     <div class="abs fac_progress_value" :style="{width:deviceStatData.currYield.rz.openRatio+'%'}"></div>
@@ -128,7 +166,11 @@ import { ref,onMounted,watch,emit,onUnmounted } from 'vue';
 import {useRouter} from 'vue-router';
 import api from "@/api/system";
 import * as echarts from 'echarts';
+import NumberAnimation from './NumberAnimation.vue';
 export default {
+    components: {
+        NumberAnimation
+    },
     props:{
         facModelLoadState:{
             type:Boolean,

src/pages/components/In02.vue

@@ -40,41 +40,77 @@
             <div class="data_row content" style="display:flex;width:100%;height:calc(134px*var(--hRate));font-weight:normal;font-size: 24px;">
                 <div style="width:15%;">
                     <div class="littleFont">米数</div>
-                    <div class="label">{{ ReplaceNull(indexjsondata.efficiency.totalLength,'-') }}<span  class="unitname">米</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(indexjsondata.efficiency.totalLength,'0')" :decimal="0" />
+                        <span class="unitname">米</span>
+                    </div>
                     <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">重量</div>
-                    <div class="label">{{ ReplaceNull(indexjsondata.efficiency.totalWeight,'-') }}<span  class="unitname">吨</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(indexjsondata.efficiency.totalWeight,'0')" :decimal="2" />
+                        <span class="unitname">吨</span>
+                    </div>
                 </div>
                 <div style="margin: 0 5%; width:1px;border-left:1px solid #168895 ;"></div>
                 <div style="width:11%;height: 100%;">
                     <div class="littleFont">设备<span style="color:#27e6ff">（开机）</span></div>
-                    <div class="label" @click="openStopView" title="查看设备停机状态分析" style="cursor: pointer;text-decoration: underline;">{{ ReplaceNull(alarmjsondata.device.online,'-') }}<span  class="unitname">台</span></div>
+                    <div class="label" @click="openStopView" title="查看设备停机状态分析" style="cursor: pointer;text-decoration: underline;">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.online,'0')" :decimal="0" />
+                        <span class="unitname">台</span>
+                    </div>
                     <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">设备<span style="color:#27e6ff">（总数）</span></div>
-                    <div class="label">{{ ReplaceNull(alarmjsondata.device.total,'-') }}<span  class="unitname">台</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.total,'0')" :decimal="0" />
+                        <span class="unitname">台</span>
+                    </div>
                 </div>
                 <div style="margin: 0 5%; width:1px;border-left:1px solid #168895 ;"></div>
                 <div>
                     <div class="littleFont">落卷停机数</div>
-                    <div class="label">{{ ReplaceNull(alarmjsondata.device.stop6,'-') }}<span class="unitname">台</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stop6,'0')" :decimal="0" />
+                        <span class="unitname">台</span>
+                    </div>
                     <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">其他停机数</div>
-                    <div class="label">{{ ReplaceNull(alarmjsondata.device.alarm,'-') }}<span class="unitname">台</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.alarm,'0')" :decimal="0" />
+                        <span class="unitname">台</span>
+                    </div>
                 </div>
                 <div style="width:15%;">
                     <div class="littleFont">断纱停机数</div>
-                    <div class="label">{{ ReplaceNull(alarmjsondata.device.stop2,'-') }}<span class="unitname">台</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stop2,'0')" :decimal="0" />
+                        <span class="unitname">台</span>
+                    </div>
                     <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">盘头小于200圈</div>
-                    <div class="label">{{ ReplaceNull(alarmjsondata.device.stopPan,'-') }}<span class="unitname">台</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stopPan,'0')" :decimal="0" />
+                        <span class="unitname">台</span>
+                    </div>
                 </div>
                 <div>
                     <div class="littleFont">停经片停机数</div>
-                    <div  class="label">{{ ReplaceNull(alarmjsondata.device.stop1,'-') }}<span class="unitname">台</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stop1,'0')" :decimal="0" />
+                        <span class="unitname">台</span>
+                    </div>
                     <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">当前开机率</div>
-                    <div class="label">{{ ReplaceNull(alarmjsondata.device.runningRatio,'-') }}<span class="unitname">%</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.runningRatio,'0')" :decimal="2" />
+                        <span class="unitname">%</span>
+                    </div>
                 </div>
                 <div>
                     <div class="littleFont">叫料数</div>
-                    <div class="label">{{ ReplaceNull(alarmjsondata.device.stop8,'-') }}<span class="unitname">台</span></div>
+                    <div class="label">
+                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stop8,'0')" :decimal="0" />
+                        <span class="unitname">台</span>
+                    </div>
                   <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">当日开机率</div>
-                  <div class="label">{{ ReplaceNull(indexjsondata.device.runningRatio,'-') }}<span class="unitname">%</span></div>
+                  <div class="label">
+                      <NumberAnimation :value="ReplaceNull(indexjsondata.device.runningRatio,'0')" :decimal="2" />
+                      <span class="unitname">%</span>
+                  </div>
                 </div>
             </div>
         </div>
@@ -343,9 +379,11 @@ import Imp12 from "../imp/imp12.vue"
 import Imp13 from "../imp/imp13.vue"
 import Imp14 from "../imp/imp14.vue"
 import Imp15 from "../imp/imp15.vue"
+import NumberAnimation from './NumberAnimation.vue'
 export default {
     components:{
         Imp01,Imp02,Imp03,Imp04,Imp05,Imp06,Imp08,Imp10,Imp11,Imp12,Imp13,Imp14,Imp15,
+        NumberAnimation
     },
     props:{
         clickEvent:{

src/pages/components/In03.vue

@@ -52,15 +52,24 @@
                         <tr style="background-color:transparent">
                             <td style="border:0">
                                 <div class="littleFont">产线<span style="color:#27e6ff">（开动）</span></div>
-                                <div style="font-size: 32px;">{{ ReplaceNull(deviceStatData.status.openProd,'-') }}<span style="font-size: 12px;">条</span></div>
+                                <div style="font-size: 32px;">
+                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.openProd,'0')" :decimal="0" />
+                                    <span style="font-size: 12px;">条</span>
+                                </div>
                             </td>
                             <td style="border:0;padding-left: 40px;">
                                 <div class="littleFont">设备<span style="color:#27e6ff">（开机）</span></div>
-                                <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ ReplaceNull(deviceStatData.status.open,'-') }}<span style="font-size: 12px;"> 台</span></div>
+                                <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">
+                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.open,'0')" :decimal="0" />
+                                    <span style="font-size: 12px;"> 台</span>
+                                </div>
                             </td>
                             <td style="border:0;padding-left: 40px;">
                                 <div class="littleFont">设备<span style="color:#27e6ff">（总数）</span></div>
-                                <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ ReplaceNull(deviceStatData.status.total,'-') }}<span style="font-size: 12px;"> 台</span></div>
+                                <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">
+                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.total,'0')" :decimal="0" />
+                                    <span style="font-size: 12px;"> 台</span>
+                                </div>
                             </td>
                         </tr>
                     </tbody>
@@ -73,15 +82,24 @@
                         <tr style="background-color:transparent">
                             <td style="border:0">
                                 <div class="littleFont">白坯<span style="color:#27e6ff">（投放量）</span></div>
-                                <div style="font-size: 32px;">{{ ReplaceNull(deviceStatData.status.baiPei,'-') }}<span style="font-size: 12px;">米</span></div>
+                                <div style="font-size: 32px;">
+                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.baiPei,'0')" :decimal="0" />
+                                    <span style="font-size: 12px;">米</span>
+                                </div>
                             </td>
                             <td style="border:0;padding-left: 40px;">
                                 <div class="littleFont">产量<span style="color:#27e6ff">（米数）</span></div>
-                                <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ ReplaceNull(deviceStatData.status.length,'-') }}<span style="font-size: 12px;"> 米</span></div>
+                                <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">
+                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.length,'0')" :decimal="0" />
+                                    <span style="font-size: 12px;"> 米</span>
+                                </div>
                             </td>
                             <td style="border:0;padding-left: 40px;">
                                 <div class="littleFont">产量<span style="color:#27e6ff">（重量）</span></div>
-                                <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ReplaceNull(deviceStatData.status.weight,'-') }}<span style="font-size: 12px;"> 吨</span></div>
+                                <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">
+                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.weight,'0')" :decimal="2" />
+                                    <span style="font-size: 12px;"> 吨</span>
+                                </div>
                             </td>
                         </tr>
                     </tbody>
@@ -193,7 +211,11 @@ import api from "@/api/system";
 import * as echarts from 'echarts';
 import { ElDatePicker,ElMessage } from 'element-plus';
 import 'element-plus/dist/index.css'; // 确保导入样式文件
+import NumberAnimation from './NumberAnimation.vue';
 export default {
+    components: {
+        NumberAnimation
+    },
     props:{
         clickEvent:{
             type:Object,