医健宝-流量日志格式化

src/api/company/traffic.js

@@ -16,3 +16,12 @@ export function listTrafficRecords(query) {
   })
 }
 
+///trafficConversion
+export function trafficConversion(data) {
+  return request({
+    url: '/company/traffic/trafficConversion',
+    method: 'get',
+    params: data
+  })
+}
+

src/views/company/companyTraffic/index.vue

@@ -126,7 +126,9 @@
             placeholder="请输入充值金额(元)"
             controls-position="right"
             style="width: 100%"
+            @input="chargeAmountInput"
           />
+          <span v-if="this.amountToTraffic" class="el-form-item__error"> 约充值 {{ this.amountToTraffic }}流量 </span>
         </el-form-item>
 
         <el-form-item label="备注" prop="remark">
@@ -149,7 +151,7 @@
 </template>
 
 <script>
-import { listTrafficRecords, rechargeTraffic } from "@/api/company/traffic";
+import { listTrafficRecords, rechargeTraffic, trafficConversion } from '@/api/company/traffic'
 import { allList } from '@/api/company/company'
 import { resetForm } from '@/utils/common'
 import { delAdIqiyiAccount } from '@/api/ad/AdIqiyiAccount'
@@ -158,6 +160,7 @@ export default {
   name: "CompanyTraffic",
   data() {
     return {
+      amountToTraffic: 0,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -232,6 +235,35 @@ export default {
         this.loading = false;
       });
     },
+    /** 流量计算*/
+    chargeAmountInput() {
+      if(!this.rechargeForm.chargeAmount){
+        this.amountToTraffic = 0;
+        return;
+      }
+      trafficConversion({traffic:this.rechargeForm.chargeAmount}).then(
+        response => {
+          this.amountToTraffic = response.data;
+          //对流量值进行判断，换算成GB或TB
+          if(!this.amountToTraffic){
+            this.amountToTraffic =  "0 KB";
+          }
+          if(this.amountToTraffic < 1024){
+            this.amountToTraffic =  this.amountToTraffic + " KB";
+          }
+          else if(this.amountToTraffic < 1024 * 1024){
+            this.amountToTraffic = (this.amountToTraffic / 1024).toFixed(2) + " MB";
+          }
+          else if(this.amountToTraffic < 1024 * 1024 * 1024){
+            this.amountToTraffic = (this.amountToTraffic / (1024 * 1024)).toFixed(2) + " GB";
+          }
+          else{
+            this.amountToTraffic = (this.amountToTraffic / (1024 * 1024 * 1024)).toFixed(2) + " TB";
+          }
+        }
+      )
+    }
+    ,
     /** 搜索公司 */
     searchCompanies( query) {
       allList().then(response => {
@@ -263,20 +295,20 @@ export default {
     formatBalance(row){
       //对流量值进行判断，换算成GB或TB
       if(!row.balance){
-        return "0KB";
+        return "0 KB";
       }
       const absBalance = Math.abs(row.balance); // 获取绝对值
       if(absBalance < 1024){
-        return row.balance + "KB";
+        return row.balance + " KB";
       }
       else if(absBalance < 1024 * 1024){
-        return (row.balance / 1024).toFixed(2) + "MB";
+        return (row.balance / 1024).toFixed(2) + " MB";
       }
       else if(absBalance < 1024 * 1024 * 1024){
-        return (row.balance / (1024 * 1024)).toFixed(2) + "GB";
+        return (row.balance / (1024 * 1024)).toFixed(2) + " GB";
       }
       else{
-        return (row.balance / (1024 * 1024 * 1024)).toFixed(2) + "TB";
+        return (row.balance / (1024 * 1024 * 1024)).toFixed(2) + " TB";
       }
     },
 

src/views/company/companyTrafficLog/index.vue

@@ -91,15 +91,15 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="流量数量(KB)" align="center" prop="trafficAmount">
+      <el-table-column label="流量数量" align="center" prop="trafficAmount" >
         <template slot-scope="scope">
           <span :class="scope.row.operationType === 1 ? 'recharge' : 'deduction'">
-            {{ scope.row.operationType === 1 ? '+' : '-' }}{{ scope.row.trafficAmount }}
+            {{ scope.row.operationType === 1 ? '+' : '-' }}{{ formatTrafficAmount(scope.row)}}
           </span>
         </template>
       </el-table-column>
 
-      <el-table-column label="操作后余额(KB)" align="center" prop="balance" />
+      <el-table-column label="操作后余额" align="center" prop="balance" :formatter="formatBalance"/>
 
       <el-table-column label="操作人员" align="center" prop="userName" />
 
@@ -193,6 +193,44 @@ export default {
         this.loading = false;
       });
     },
+    formatBalance(row){
+      //对流量值进行判断，换算成GB或TB
+      if(!row.balance){
+        return "0 KB";
+      }
+      const absBalance = Math.abs(row.balance); // 获取绝对值
+      if(absBalance < 1024){
+        return row.balance + " KB";
+      }
+      else if(absBalance < 1024 * 1024){
+        return (row.balance / 1024).toFixed(2) + " MB";
+      }
+      else if(absBalance < 1024 * 1024 * 1024){
+        return (row.balance / (1024 * 1024)).toFixed(2) + " GB";
+      }
+      else{
+        return (row.balance / (1024 * 1024 * 1024)).toFixed(2) + " TB";
+      }
+    },
+    formatTrafficAmount(row){
+      //对流量值进行判断，换算成GB或TB
+      if(!row.trafficAmount){
+        return "0 KB";
+      }
+      const absBalance = Math.abs(row.trafficAmount); // 获取绝对值
+      if(absBalance < 1024){
+        return row.trafficAmount + " KB";
+      }
+      else if(absBalance < 1024 * 1024){
+        return (row.trafficAmount / 1024).toFixed(2) + " MB";
+      }
+      else if(absBalance < 1024 * 1024 * 1024){
+        return (row.trafficAmount / (1024 * 1024)).toFixed(2) + " GB";
+      }
+      else{
+        return (row.trafficAmount / (1024 * 1024 * 1024)).toFixed(2) + " TB";
+      }
+    },
 
     /** 搜索公司 */
     searchCompanies(query) {