增加首页数据使用量 && 增加卡清单柱状图鼠标移入显示 && 流量池使用量换算并取整

src/api/path/system.api.js

@@ -83,3 +83,9 @@ export function getSTSInfo(params) {
 export function getSTSInfoList(params) {
   return service.post('/admin/platform/customerList', params)
 }
+
+
+// 获取首页数据
+export function getHomeData(){
+  return service.get('/admin/platform/homeData')
+}

src/views/flowPool/config.js

@@ -6,6 +6,14 @@ export const columns = [
     ellipsis: true,
     width: 50,
   },
+  {
+    title: '客户名称',
+    dataIndex: "userName",
+    align: "center",
+    width: 200,
+    tooltip: true,
+    ellipsis: true,
+  },
   {
     title: window.$t("flowPool.label"),
     dataIndex: "label",
@@ -47,7 +55,7 @@ export const columns = [
     ellipsis: true,
   },
   {
-    title: window.$t("flowPool.HaveBeenUsedName"),
+    title: window.$t("flowPool.HaveBeenUsedName")+`(${'GB'})`,
     dataIndex: "dataUsage",
     align: "center",
     width: 200,
@@ -79,6 +87,14 @@ export const columnsAfter = [
     ellipsis: true,
     width: 50,
   },
+  {
+    title: '客户名称',
+    dataIndex: "userName",
+    align: "center",
+    width: 200,
+    tooltip: true,
+    ellipsis: true,
+  },
   {
     title: window.$t("flowPool.label"),
     dataIndex: "label",
@@ -128,7 +144,7 @@ export const columnsAfter = [
     ellipsis: true,
   },
   {
-    title: window.$t("flowPool.HaveBeenUsedName"),
+    title: window.$t("flowPool.HaveBeenUsedName")+`(${'GB'})`,
     dataIndex: "dataUsage",
     align: "center",
     width: 200,

src/views/flowPool/index.vue

@@ -41,6 +41,7 @@
         <a-tag :color="record.status == 1 ? '#00b42a' : '#f53f3f'">{{ trafficList.find(val => val.value ==
           record.status)?.label }}</a-tag>
       </template>
+      
 
     </a-table>
 
@@ -122,11 +123,17 @@ const intData = async (item) => {
     const sourceName = sourceList.value.find(val => val.value == item.source)?.label
     const Activated = item.cardAct + '/' + item.iccids?.length
     const HaveBeenUsed = item.size + item.sizeType
+    // 换算Gb
+    const afterFirstConversion  = item.dataUsage / 1024
+    const afterSecondConversion = afterFirstConversion / 1024;
+    const result = Math.ceil(afterSecondConversion * 100) / 100;
+    const dataUsage = result.toFixed(2);
     return {
       ...item,
       sourceName,// 运营商名称
       Activated: Activated,
       HaveBeenUsed: HaveBeenUsed,
+      dataUsage
     }
   })
 

src/views/flowPool/rearFlowPool/index.vue

@@ -113,13 +113,19 @@ const intData = async (item) => {
     )?.label;
     const Activated = item.cardAct + "/" + item.iccids?.length;
     const HaveBeenUsed = item.size + item.sizeType;
+    // 换算Gb
+    const afterFirstConversion  = item.dataUsage / 1024
+    const afterSecondConversion = afterFirstConversion / 1024;
+    const result = Math.ceil(afterSecondConversion * 100) / 100;
+    const dataUsage = result.toFixed(2);
     return {
       ...item,
       sourceName, // 运营商名称
       Activated: Activated,
       HaveBeenUsed: HaveBeenUsed,
       trafficPoolStatus,
-      size: item.size + '/' + item.sizeType
+      size: item.size + '/' + item.sizeType,
+      dataUsage
     };
   });
   pagination.value.total = data.total;
@@ -165,7 +171,7 @@ const handleDictValue = async () => {
   trafficList.value = await Getdictionary("trafficPacketStatus");
 };
 
-const handelgetCard = (item)=>{
+const handelgetCard = (item) => {
   ShowOpenExport.value = true;
 }
 

src/views/home/index.vue

@@ -56,35 +56,35 @@
           <div class="networkCard">
             <div class="title">本月异常</div>
             <div class="item">
-              <div class="txt">0</div>
+              <div class="txt">{{ simInfo.abnormalNextMonth }}</div>
               <div class="val">张</div>
             </div>
           </div>
           <div class="networkCard">
             <div class="title">下月到期</div>
             <div class="item">
-              <div class="txt">0</div>
+              <div class="txt">{{ simInfo.expiresNextMonth }}</div>
               <div class="val">张</div>
             </div>
           </div>
           <div class="networkCard">
             <div class="title">本月超停</div>
             <div class="item">
-              <div class="txt">0</div>
+              <div class="txt">{{ simInfo.exceedThisMonthStop }}</div>
               <div class="val">张</div>
             </div>
           </div>
           <div class="networkCard">
             <div class="title">本月到期</div>
             <div class="item">
-              <div class="txt">0</div>
+              <div class="txt">{{ simInfo.expiresThisMonth }}</div>
               <div class="val">张</div>
             </div>
           </div>
           <div class="networkCard">
             <div class="title">上月到期</div>
             <div class="item">
-              <div class="txt">0</div>
+              <div class="txt">{{ simInfo.expiredLastMonth }}</div>
               <div class="val">张</div>
             </div>
           </div>
@@ -102,21 +102,21 @@
           </div>
           <div class="item">
             <div class="txt">总客户</div>
-            <div class="val">0</div>
+            <div class="val">{{ customerInfo.totalCustomer }}</div>
           </div>
           <div class="item">
             <div class="txt">接入账号</div>
-            <div class="val">0</div>
+            <div class="val">{{ customerInfo.totalAccount }}</div>
           </div>
           <div class="item">
             <div class="txt">客户充值</div>
-            <div class="val">0</div>
+            <div class="val">{{ customerInfo.totalRecharge }}</div>
           </div>
           <div class="item">
             <div class="txt">已充值客户</div>
-            <div class="val">0</div>
+            <div class="val">{{ customerInfo.totalRechargedCustomer }}</div>
           </div>
-          <div class="item" v-if="userType==2">
+          <div class="item" v-if="userType == 2">
             <a-link href="link" :hoverable="false">查看接入密钥</a-link>
           </div>
         </div>
@@ -128,28 +128,28 @@
           <div class="flowCard">
             <div class="title">本月消耗流量</div>
             <div class="main">
-              <div class="value">0</div>
-              <div class="txt">MB</div>
+              <div class="value">{{ trafficInfo.totalTraffic }}</div>
+              <div class="txt">GB</div>
             </div>
           </div>
           <div class="flowCard">
             <div class="title">本月应付金额/人民币</div>
             <div class="main">
-              <div class="value">0</div>
-              <div class="txt">MB</div>
+              <div class="value">{{ trafficInfo.totalOweAmount }}</div>
+              <div class="txt">元</div>
             </div>
           </div>
           <div class="flowCard">
             <div class="title">总消耗流量</div>
             <div class="main">
-              <div class="value">0</div>
-              <div class="txt">MB</div>
+              <div class="value">{{ trafficInfo.totalAllTraffic }}</div>
+              <div class="txt">GB</div>
             </div>
           </div>
           <div class="flowCard">
             <div class="title">总支付金额/人民币</div>
             <div class="main">
-              <div class="value">0</div>
+              <div class="value">{{ trafficInfo.totalAllOweAmount }}</div>
               <div class="txt">元</div>
             </div>
           </div>
@@ -162,28 +162,28 @@
           <div class="flowCard">
             <div class="title">本月充值订单数</div>
             <div class="main">
-              <div class="value">0</div>
+              <div class="value">{{ rechargeInfo.totalRecharge }}</div>
               <div class="txt">笔</div>
             </div>
           </div>
           <div class="flowCard">
             <div class="title">本月充值订单金额/新元</div>
             <div class="main">
-              <div class="value">0</div>
+              <div class="value">{{ rechargeInfo.totalRechargeAmount }}</div>
               <div class="txt">SGD</div>
             </div>
           </div>
           <div class="flowCard">
             <div class="title">总充值订单数</div>
             <div class="main">
-              <div class="value">0</div>
+              <div class="value">{{ rechargeInfo.totalAllRecharge }}</div>
               <div class="txt">笔</div>
             </div>
           </div>
           <div class="flowCard">
             <div class="title">总充值订单金额/新元</div>
             <div class="main">
-              <div class="value">0</div>
+              <div class="value">{{ rechargeInfo.totalAllRechargeAmount }}</div>
               <div class="txt">SGD</div>
             </div>
           </div>
@@ -200,28 +200,55 @@
   </div>
 </template>
 
-<<<<<<< HEAD
-=======
 <script setup>
-import {ref,toRefs} from 'vue'
-
+import { onMounted, ref, toRefs } from 'vue'
+import { getHomeData } from '@/api/path/system.api'
 const state = ref({
   userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType,
+  customerInfo: {},
+  rechargeInfo: {},
+  simInfo: {},
+  trafficInfo: {}
 })
 
-const {userType} =toRefs(state.value)
+const { userType, customerInfo, rechargeInfo, simInfo, trafficInfo } = toRefs(state.value)
+
+const initData = async () => {
+  let res = await getHomeData()
+
+  if (res.code === 200) {
+    customerInfo.value = res.data.customerInfo
+    rechargeInfo.value = res.data.rechargeInfo
+    simInfo.value = res.data.simInfo
+    trafficInfo.value = res.data.trafficInfo
+    // 数据取整
+    trafficInfo.value.totalTraffic = handleResize(trafficInfo.value.totalTraffic)
+    trafficInfo.value.totalAllTraffic = handleResize(trafficInfo.value.totalAllTraffic)
+  }
+}
+function handleResize(data) {
+  const afterFirstConversion = data / 1024
+  const afterSecondConversion = afterFirstConversion / 1024;
+  const result = Math.ceil(afterSecondConversion * 100) / 100;
+  return result.toFixed(2)
+}
+
+onMounted(() => {
+  initData()
+})
 </script>
 
->>>>>>> dev
 <style lang="less" scoped>
 .container {
   background: transparent !important;
   padding: 0 !important;
   display: flex;
   flex-direction: row !important;
+
   .leftModel {
     flex: 1;
   }
+
   .rightModel {
     flex: none;
     width: 400px;
@@ -235,6 +262,7 @@ const {userType} =toRefs(state.value)
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
   padding: 20px;
   margin-bottom: 16px;
+
   .modelTitle {
     margin-bottom: 12px;
     font-size: 18px;
@@ -251,18 +279,23 @@ const {userType} =toRefs(state.value)
     border-radius: 6px;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
     margin-left: 16px;
+
     &:first-child {
       margin-left: 0;
     }
+
     &:nth-child(1) {
       flex: 1.5;
     }
+
     &:nth-child(2) {
       flex: 2;
     }
+
     &:nth-child(3) {
       flex: 1;
     }
+
     .title {
       font-size: 14px;
       font-weight: 400;
@@ -270,19 +303,24 @@ const {userType} =toRefs(state.value)
       color: rgba(0, 0, 0, 0.6);
       margin-bottom: 10px;
     }
+
     .item {
       display: flex;
       margin-bottom: 8px;
+
       .txt {
         margin-right: 10px;
       }
+
       .val {
         color: rgb(@blue_0);
       }
     }
+
     .list {
       display: flex;
       flex-wrap: wrap;
+
       .item {
         width: 50%;
       }
@@ -301,9 +339,11 @@ const {userType} =toRefs(state.value)
     box-sizing: border-box;
     border-radius: 6px;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+
     &:first-child {
       margin-left: 0;
     }
+
     .title {
       font-size: 14px;
       font-weight: 400;
@@ -314,9 +354,11 @@ const {userType} =toRefs(state.value)
 
     .item {
       display: flex;
+
       .txt {
         margin-right: 4px;
       }
+
       .val {
         color: #999;
       }
@@ -327,15 +369,18 @@ const {userType} =toRefs(state.value)
 .accountList {
   display: flex;
   flex-wrap: wrap;
+
   .item {
     flex: 33%;
     margin-bottom: 10px;
     display: flex;
+
     .txt {
       color: #999;
       margin-right: 16px;
       width: 100px;
     }
+
     .val {
       .arco-link {
         margin: 0 8px;
@@ -347,6 +392,7 @@ const {userType} =toRefs(state.value)
 .flowList {
   display: flex;
   flex-wrap: wrap;
+
   .flowCard {
     flex: 48%;
     background: #f7f7f7;
@@ -355,9 +401,11 @@ const {userType} =toRefs(state.value)
     border-radius: 6px;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
     margin-bottom: 16px;
+
     &:nth-child(2n) {
       margin-left: 16px;
     }
+
     .title {
       font-size: 14px;
       font-weight: 400;
@@ -370,11 +418,10 @@ const {userType} =toRefs(state.value)
       display: flex;
       justify-content: space-between;
       font-size: 20px;
-      .value {
-      }
 
-      .txt {
-      }
+      .value {}
+
+      .txt {}
     }
   }
 }

src/views/lotCard/cardList/index.vue

@@ -40,7 +40,6 @@ import { cardInfoList } from "@/api/path/lotCard.api"
 import trafficUseDialog from "./trafficUseDialog.vue";
 import { Getdictionary } from '@/mixins/index.js'
 import { sanitizeObject } from '@/utils/utils'
-import { useRouter } from "vue-router";
 import Add from './add.vue'
 import Search from '@/components/Search/index.vue'
 const { proxy } = getCurrentInstance()
@@ -61,11 +60,6 @@ const showAdd = ref(false)
 
 const trafficUseDialogRef = ref()
 
-const router = useRouter() // 使用 useRouter 来访问路由实例
-
-const routes = router.getRoutes();
-console.log(routes);
-
 
 const intData = async (item) => {
   if (item) {

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -65,8 +65,7 @@
             <a-col :span="12">
               <a-form-item :label="$t('lotCard.PackageStatus')">
                 {{
-                  dataPackage?.status == 1 ? $t('lotCard.Activated') : (dataPackage?.status == 2 ? $t('lotCard.Off') :
-                    dataPackage?.status == 3 ? $t('lotCard.expired') : $t('lotCard.NotInUse'))
+                  dataPackage?.status
                 }}
               </a-form-item>
             </a-col>
@@ -111,7 +110,7 @@
                 {{ dataPackage?.dataToday }}MB
               </a-form-item>
             </a-col> -->
-   
+
           </a-row>
         </a-form>
       </a-col>
@@ -139,7 +138,8 @@
             </a-table>
           </a-tab-pane>
           <a-tab-pane key="5" :title="$t('lotCard.UsageAmount')">
-            <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }" :pagination="pageDataAounmt" @page-change="evChangePageAounmt"/>
+            <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }" :pagination="pageDataAounmt"
+              @page-change="evChangePageAounmt" />
           </a-tab-pane>
           <a-tab-pane key="6" :title="$t('lotCard.OperationRecord')">
             <a-table :columns="columnsOperation" :data="dataOperation" :scroll="{ x: 'auto' }"
@@ -163,7 +163,7 @@
 </template>
 <script setup>
 import { onMounted, ref, h } from "vue";
-import { getDataCDR, PauseSIMService, RecoverSIMService, OperationRecord, OffSIMCard, getOrderCard,getFlowData } from '@/api/path/lotCard.api'
+import { getDataCDR, PauseSIMService, RecoverSIMService, OperationRecord, OffSIMCard, getOrderCard, getFlowData } from '@/api/path/lotCard.api'
 import { Getdictionary } from '@/mixins/index'
 import { Message, Modal } from '@arco-design/web-vue'
 // 图表插件
@@ -187,8 +187,8 @@ const pageDataAounmt = ref({
   total: 0,
   size: 10,
   current: 1,
-  source:'',
-  iccid:''
+  source: '',
+  iccid: ''
 })
 
 const pagination = ref({
@@ -212,6 +212,19 @@ const option = ref({
       type: 'bar',
     }
   ],
+  tooltip: {
+    // 触发类型，默认数据触发，可选为：'item' | 'axis'
+    trigger: 'axis',
+    // 坐标轴触发，支持的坐标轴有：'x' | 'y' | 'radius' | 'angle'
+    axisPointer: {
+      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+    },
+    // 自定义的 formatter 函数
+    formatter: function (params) {
+      var res = params[0].name + '使用量' + params[0].value + 'KB';
+       return res
+    }
+  },
 })
 
 // 卡套餐信息
@@ -254,13 +267,13 @@ const open = (data) => {
 
 const getAountData = async (type) => {
   let res = await getFlowData(type)
-  if(res.code == 200) {
-     dataAmount.value = res.data
+  if (res.code == 200) {
+    dataAmount.value = res.data.records || []
   }
   pageDataAounmt.value.total = res.total
 }
 
-const evChangePageAounmt = (e)=>{
+const evChangePageAounmt = (e) => {
   pageDataAounmt.value.current = e
   getAountData(pageDataAounmt.value)
 }
@@ -268,7 +281,7 @@ const evChangePageAounmt = (e)=>{
 const ICCIDPuyData = async (id) => {
   let res = await getOrderCard({ iccid: id, current: 1, size: 10 })
   let res1 = await Getdictionary('puyType')
-  dataTopup.value = res.data.records.map(val => {
+  dataTopup.value = (res.data.records || []).map(val => {
     const payType = res1.filter(item => item.value == val.payStatus)[0]?.label
     return {
       ...val,