更新 number组件渲染逻辑

src/components/Number.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="number-box">
     <div
-      v-for="(item, index) in arr"
+      v-for="(item, index) in data"
       :key="item.title"
       :class="['box', 'df', 'aic', `${index == 2 ? '' : 'mb45'}`]"
     >
@@ -11,7 +11,7 @@
       <div class="count">
         <div class="title mb2">{{ item.title }}</div>
         <div class="number pl10">
-          <span :id="item.icon">{{ item.num }}</span>
+          <span :id="item.icon"></span>
           <span style="font-size: 10px">个</span>
         </div>
       </div>
@@ -20,12 +20,16 @@
 </template>
 
 <script>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import CountUp from "countup";
+import store from "store/index";
 import exchangeUrl from "utils/exchangeUrl";
 
 export default {
-  setup() {
+  props: {
+    data: Array,
+  },
+  setup(props) {
     let options = {
       useEasing: true, // 过渡动画效果，默认ture
       smartEasingThreshold: 2000,
@@ -36,28 +40,29 @@ export default {
       prefix: "", // 前置符号
       suffix: "", // 后置符号，可汉字
     };
+    watch(
+      () => props.data,
+      (a, b) => {
+        init();
+      }
+    );
 
-    let arr = ref([
-      { icon: "loading", title: "装货中船舶数量", num: 0 },
-      { icon: "transit", title: "运输中船舶数量", num: 0 },
-      { icon: "unloading", title: "卸货中船舶数量", num: 0 },
-    ]);
-    function init(arr = [16090, 20090, 69422]) {
+    function init() {
+      if (store.state.currentTabText == "数字化赋能中心") return;
       // target,startVal,endVal,decimals,duration,options
       // dom节点, 初始值,  结束值, 小数位数, 过渡几秒 , 初始参数
-      let num1 = new CountUp("loading", 0, arr[0], 0, 3, options),
-        num2 = new CountUp("transit", 0, arr[1], 0, 3, options),
-        num3 = new CountUp("unloading", 0, arr[2], 0, 3, options);
-      num1.start();
-      num2.start();
-      num3.start();
+      setTimeout(() => {
+        for (let i of props.data) {
+          let num1 = new CountUp(i.icon, 0, i.num, 0, 2, options);
+          num1.start();
+        }
+      }, 100);
     }
 
     onMounted(() => {
       init();
     });
     return {
-      arr,
       init,
       exchangeUrl,
     };

src/router/index.js

@@ -20,7 +20,7 @@ const router = createRouter({
       path: "/digitalEmpowermentCenter",
       name: "digitalEmpowermentCenter",
       meta: {
-        title: "Index",
+        title: "数字化赋能中心",
       },
       component: () => import("../views/digitalEmpowermentCenter.vue"),
     },

src/store/index.js

@@ -3,7 +3,7 @@ import { createStore } from "vuex";
 const store = createStore({
   state: {
     isLogin: false,
-    currentTabText: "环境中心",
+    currentTabText: "运输安全管理中心",
     cargoOwnerInfo: {
       cargoOwnerName: "货主王",
       cargo: "石油焦",
@@ -86,6 +86,7 @@ const store = createStore({
       cargoOwner: "货主王",
       cargoStatus: 0,
     },
+    numbers: [],
   },
   mutations: {
     changeLogin(state, b) {
@@ -100,6 +101,9 @@ const store = createStore({
     setShipInfo(state, info) {
       state.shipInfo = info;
     },
+    setNumbers(state, numbers) {
+      state.numbers = numbers;
+    },
   },
   actions: {
     Login({ commit }, userInfo) {
@@ -116,6 +120,20 @@ const store = createStore({
         resolve(0);
       });
     },
+    GetNumbers({ commit, state }, type) {
+      return new Promise((resolve, reject) => {
+        let arr1 = [
+          { icon: "loading", title: "装货中船舶数量", num: 22033 },
+          { icon: "transit", title: "运输中船舶数量", num: 12312 },
+          { icon: "unloading", title: "卸货中船舶数量", num: 87655 },
+        ];
+        let arr2 = [
+          { icon: "ship-fill-2", title: "装货中船舶数量", num: 16090 },
+          { icon: "ship-line", title: "运输中船舶数量", num: 20090 },
+        ];
+        resolve(type ? arr1 : arr2);
+      });
+    },
   },
 });
 

src/views/transportationSafetyCenter.vue

@@ -7,6 +7,7 @@
     ></ShipSearch>
     <NumberVue
       v-if="this.$store.state.currentTabText != '环境中心'"
+      :data="arr"
       style="position: absolute; top: 0; left: 0"
     ></NumberVue>
     <SafetyModule
@@ -31,7 +32,8 @@
 <script>
 import ShipSearch from "comps/ShipSearch.vue";
 import router from "router/index";
-import { ref, onMounted } from "vue";
+import store from "store/index";
+import { ref, onMounted, watch } from "vue";
 export default {
   components: {
     ShipSearch,
@@ -46,12 +48,26 @@ export default {
       bmap.value.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
       bmap.value.enableScrollWheelZoom(true);
     }
+    watch(
+      () => store.state.currentTabText,
+      (a, b) => {
+        getNumbers(a == "运输安全管理中心");
+      }
+    );
+    let arr = ref([]);
+    async function getNumbers(b) {
+      store.dispatch("GetNumbers", b).then((e) => {
+        arr.value = e;
+      });
+    }
 
     onMounted(() => {
       // initMap();
+      getNumbers(store.state.currentTabText == "运输安全管理中心");
     });
     return {
       initMap,
+      arr,
     };
   },
 };