update PanelGroup.vue

src/views/dashboard/PanelGroup.vue

@@ -6,10 +6,8 @@
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" v-waves>
+          <div class="card-panel-text" v-waves>在线用户</div>
-            在线用户
+          <div id="onlineNum" class="card-panel-num">{{ state.onlineUserNum }}</div>
-          </div>
-          <vue-number-roll-plus :number="onlineUserNum" background="transparent" />
         </div>
       </div>
     </el-col>
@@ -19,10 +17,8 @@
           <svg-icon icon-class="message" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" v-waves>
+          <div class="card-panel-text" v-waves>消息</div>
-            消息
+          <div class="card-panel-num" id="messageNum">{{ state.chatNum }}</div>
-          </div>
-          <vue-number-roll-plus :number="18888" background="transparent" />
         </div>
       </div>
     </el-col>
@@ -32,10 +28,8 @@
           <svg-icon icon-class="money" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" v-waves>
+          <div class="card-panel-text" v-waves>金额</div>
-            金额
+          <div id="amount" class="card-panel-num">{{ state.amount }}</div>
-          </div>
-          <vue-number-roll-plus :number="9288" background="transparent" />
         </div>
       </div>
     </el-col>
@@ -45,32 +39,35 @@
           <svg-icon icon-class="shopping" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" v-waves>
+          <div class="card-panel-text" v-waves>订单</div>
-            订单
+          <div id="order" class="card-panel-num">{{ state.order }}</div>
-          </div>
-          <vue-number-roll-plus :number="13500" background="transparent" />
         </div>
       </div>
     </el-col>
   </el-row>
 </template>
 
-<script>
+<script setup>
-import VueNumberRollPlus from 'vue3-number-roll-plus'
+import { CountUp } from 'countup.js'
-import 'vue3-number-roll-plus/main.css'
+const emit = defineEmits()
-import { mapGetters } from 'vuex'
+const { proxy } = getCurrentInstance()
-export default {
+
-  components: {
+const state = reactive({
-    VueNumberRollPlus,
+  chatNum: 1390,
-  },
+  onlineNum: computed(() => {
-  computed: {
+    return proxy.$store.getters.onlineUserNum
-    ...mapGetters(['onlineUserNum']),
+  }),
-  },
+  amount: 99998,
-  methods: {
+  order: 1999,
-    handleSetLineChartData(type) {
+})
-      this.$emit('handleSetLineChartData', type)
+onMounted(() => {
-    },
+  new CountUp('messageNum', state.chatNum).start(),
-  },
+    new CountUp('onlineNum', state.onlineNum).start(),
+    new CountUp('amount', state.amount).start(),
+    new CountUp('order', state.order).start()
+})
+function handleSetLineChartData(type) {
+  emit('handleSetLineChartData', type)
 }
 </script>