前端首页新增部门红包展示和优化营期页面跳动问题

src/views/index.vue

@@ -218,15 +218,26 @@
             </div>
 
             <div class="internetbox-messge">
-              <div class="internet-card">
-                <img src="../assets/images/message.png" alt="">
-
-                <span class="internet-title">
-                  短信剩余条数 (条)
-                </span>
+              <div class="internet-item">
+                <div class="item-left">
+                  <img src="../assets/images/message.png" alt="">
+                  <span>短信剩余条数 (条)</span>
+                </div>
+                <div class="item-right">{{ smsRemainCount }}</div>
               </div>
-              <div class="internet-number">
-                0
+              <div class="internet-item">
+                <div class="item-left">
+                  <img src="../assets/images/liuliang.png" alt="">
+                  <span>未分配流量</span>
+                </div>
+                <div class="item-right">{{ formatBytesDt(flowNum) }}</div>
+              </div>
+              <div class="internet-item">
+                <div class="item-left">
+                  <img src="../assets/images/hongbao_views.png" alt="">
+                  <span>未分配红包 (元)</span>
+                </div>
+                <div class="item-right">{{ redPackage }}</div>
               </div>
             </div>
           </div>
@@ -912,6 +923,8 @@ export default {
   components: {CountTo},
   data() {
     return {
+      redPackage: 0,
+      flowNum:0,
       promptList:[],
       dialogVisible: false,
       medicalMallConfig:{},
@@ -1071,6 +1084,8 @@ export default {
         this.manualTodayUser = res.data.manualTodayUser;
         this.automaticTotalUser = res.data.automaticTotalUser;
         this.automaticTodayUser = res.data.automaticTodayUser;
+        this.redPackage = res.data.redPackage;
+        this.flowNum = res.data.flowNum;
       })
     },
     statisticsStroe(){
@@ -1230,6 +1245,33 @@ export default {
       // 如果是负数，返回带负号的值
       return isNegative ? `-${result}` : result;
     },
+    /**
+     * 将字节数转换为合适的单位表示（Byte、KB、MB、GB、TB）
+     * @param {number} bytes - 字节数
+     * @param {number} [decimals=2] - 小数点后保留的位数
+     * @returns {string} 格式化后的字符串，包含数值和单位
+     */
+    formatBytesDt(bytes, decimals = 2) {
+      const isNegative = bytes < 0;  // 判断是否为负数
+      bytes = Math.abs(bytes);  // 获取绝对值
+
+      if (bytes === 0) return '0 Byte';
+
+      const k = 1024;
+      const sizes = ['Byte', 'KB', 'MB', 'GB', 'TB'];
+
+      // 计算合适的单位级别
+      let i = Math.floor(Math.log(bytes) / Math.log(k));
+
+      // 转换为对应单位的值
+      const value = bytes / Math.pow(k, i);
+      i += 1;
+      // 格式化为指定小数位的字符串
+      const result = parseFloat(value.toFixed(decimals)) + ' ' + sizes[Math.min(i, sizes.length - 1)];
+
+      // 如果是负数，返回带负号的值
+      return isNegative ? `-${result}` : result;
+    },
     // 手动刷新
     manualRefresh() {
       this.refresh();
@@ -2296,4 +2338,37 @@ export default {
     }
   }
 }
+.internetbox-messge {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 15px;
+}
+
+.internet-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  color: white;
+  line-height: 1.5;
+}
+
+.item-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.item-left img {
+  width: 18px;
+  height: 18px;
+  filter: brightness(0) invert(1);
+}
+
+.item-right {
+  font-size: 18px;
+  font-weight: bold;
+  font-family: 'BebasNeue', monospace;
+}
 </style>