|
|
@@ -1,117 +1,161 @@
|
|
|
<template>
|
|
|
- <a-modal width="60%" :visible="visible" :title="'卡详情' + Card_info.iccid" :hide-cancel='true'
|
|
|
- :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel" >
|
|
|
+ <a-modal width="70%" :visible="visible" :title="'卡详情' + Card_info.iccid" :hide-cancel='true'
|
|
|
+ :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel" draggable>
|
|
|
<!-- 卡片信息 -->
|
|
|
<a-row class="grid-demo" :gutter="24">
|
|
|
<a-col :span="12">
|
|
|
<a-form :model="Card_info" auto-label-width label-align="left" class="toal_Form">
|
|
|
<a-row :gutter="10">
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="ICCID" >
|
|
|
+ <a-form-item label="ICCID">
|
|
|
{{ Card_info.iccid }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
-
|
|
|
+
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="IMSI" >
|
|
|
+ <a-form-item label="IMSI">
|
|
|
{{ Card_info.account }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="SIM绑定的IMSI" >
|
|
|
+ <a-form-item label="SIM绑定的IMSI">
|
|
|
{{ Card_info.currentImsi }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="SIM货币余额" >
|
|
|
+ <a-form-item label="SIM货币余额">
|
|
|
{{ Card_info.moneyBalances }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="激活日期" >
|
|
|
+ <a-form-item label="激活日期">
|
|
|
{{ Card_info.activeTime }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="到期日期" >
|
|
|
+ <a-form-item label="到期日期">
|
|
|
{{ Card_info.closeTime }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="有效期" >
|
|
|
+ <a-form-item label="有效期">
|
|
|
{{ Card_info.validMonth }}月
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="供应商" >
|
|
|
+ <a-form-item label="供应商">
|
|
|
{{ Card_info.currentImsiProvider }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
<p>当前套餐信息</p>
|
|
|
- <a-form :model="Card_info" auto-label-width label-align="left" class="toal_Form">
|
|
|
- <a-row :gutter="10">
|
|
|
+ <a-form :model="dataPackage" auto-label-width label-align="left">
|
|
|
+ <a-row :gutter="10" wrap>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="套餐名称" >
|
|
|
- {{ Card_info.iccid }}
|
|
|
+ <a-form-item label="套餐名称">
|
|
|
+ {{ dataPackage?.productName }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
-
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="IMSI" >
|
|
|
- {{ Card_info.account }}
|
|
|
+ <a-form-item label="套餐状态">
|
|
|
+ {{ dataPackage?.status == 1 ? '已激活' : (dataPackage?.status == 2 ? '关闭' :
|
|
|
+ dataPackage?.status == 3 ? '已过期' : '未使用') }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="SIM绑定的IMSI" >
|
|
|
- {{ Card_info.currentImsi }}
|
|
|
+ <a-form-item label="有效期">
|
|
|
+ {{ dataPackage?.validMonth }}月
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="SIM货币余额" >
|
|
|
- {{ Card_info.moneyBalances }}
|
|
|
+ <a-form-item label="是否赠送套餐">
|
|
|
+ {{ dataPackage?.present == 0 ? '否' : '是' }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="激活日期" >
|
|
|
- {{ Card_info.activeTime }}
|
|
|
+ <a-form-item label="套餐激活日期">
|
|
|
+ {{ dataPackage?.activeTime }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="到期日期" >
|
|
|
- {{ Card_info.closeTime }}
|
|
|
+ <a-form-item label="套餐过期日期">
|
|
|
+ {{ dataPackage?.expiryTime }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
+ <div class="line"></div>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="有效期" >
|
|
|
- {{ Card_info.validMonth }}月
|
|
|
+ <a-form-item label="套餐可用流量">
|
|
|
+ {{ dataPackage?.dataTotal == -1 ? '无限流量' : dataPackage?.dataTotal }}MB
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="供应商" >
|
|
|
- {{ Card_info.currentImsiProvider }}
|
|
|
+ <a-form-item label="套餐已使用流量">
|
|
|
+ {{ dataPackage?.dataUsage }}MB
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="套餐今日使用流量">
|
|
|
+ {{ dataPackage?.dataToday }}MB
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="套餐有效天数">
|
|
|
+ {{ dataPackage?.validDays }}
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <div>col - 12</div>
|
|
|
+ <a-tabs>
|
|
|
+ <a-tab-pane key="1" title="月用量">
|
|
|
+ <div class="chart">
|
|
|
+ <div ref="chartContainer" style="width: 100%;height: 100%;" />
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="2" title="卡套餐信息">
|
|
|
+ <a-table :columns="columnsCard" :data="dataCard" :scroll="{ x: 'auto' }" :pagination="false"/>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="3" title="预警信息">
|
|
|
+ Content of Tab Panel 3
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="4" title="充值记录">
|
|
|
+ <a-table :columns="columnsTopup" :data="dataTopup" />
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="5" title="使用量">
|
|
|
+ <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }" :pagination="false"/>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="6" title="操作记录">
|
|
|
+ Content of Tab Panel 3
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="footer_button">
|
|
|
+ <a-button type="primary" status="warning">同步卡信息 V</a-button>
|
|
|
+ <a-button type="primary" status="warning">停复机 V</a-button>
|
|
|
+ <a-button type="primary" status="warning">断复机 V</a-button>
|
|
|
+ <a-button type="primary" status="warning">校准用量</a-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { onMounted, ref, getCurrentInstance } from "vue";
|
|
|
-import { orderFlowData, orderList } from '@/api/path/lotCard.api'
|
|
|
-import { Getdictionary } from '@/mixins/index.js'
|
|
|
-
|
|
|
+import { onMounted, ref, nextTick } from "vue";
|
|
|
+import { getDataCDR ,getDataCDRDate} from '@/api/path/lotCard.api'
|
|
|
+import { Getdictionary } from '@/mixins/index'
|
|
|
+// 图表插件
|
|
|
+import * as echarts from "echarts";
|
|
|
const props = defineProps({
|
|
|
});
|
|
|
|
|
|
const emit = defineEmits(['submit']);
|
|
|
+const visible = ref(false)
|
|
|
const Card_info = ref({})
|
|
|
+const dataPackage = ref()
|
|
|
const dataSource = ref([]);
|
|
|
const pagination = ref({
|
|
|
total: 0,
|
|
|
@@ -119,23 +163,184 @@ const pagination = ref({
|
|
|
current: 1,
|
|
|
})
|
|
|
|
|
|
-const visible = ref(false)
|
|
|
+const chartContainer = ref(null)
|
|
|
+const chart = ref(null)
|
|
|
+// 图表插件
|
|
|
+const option = ref({
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ type: 'bar',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+})
|
|
|
+
|
|
|
+// 卡套餐信息
|
|
|
+const columnsCard = [
|
|
|
+ {
|
|
|
+ title: '套餐名称',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ }, {
|
|
|
+ title: '套餐状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '有效期(月)',
|
|
|
+ dataIndex: 'validMonth',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '可用流量',
|
|
|
+ dataIndex: 'dataTotal',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '已使用流量',
|
|
|
+ dataIndex: 'dataUsage',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '今日使用流量',
|
|
|
+ dataIndex: 'dataToday',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '套餐有效期(天数)',
|
|
|
+ dataIndex: 'validDays',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '激活日期',
|
|
|
+ dataIndex: 'activeTime',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '过期日期',
|
|
|
+ dataIndex: 'expiryTime',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+]
|
|
|
+const dataCard = ref([])
|
|
|
+
|
|
|
+// 充值信息
|
|
|
+const columnsTopup = [
|
|
|
+ {
|
|
|
+ title: '订单号',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'ICCID',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '购买套餐',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '订单类型',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '套餐价格',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '运营商',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '支付状态',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '下单日期',
|
|
|
+ dataIndex: 'productName',
|
|
|
+ },
|
|
|
+]
|
|
|
+const dataTopup = ref([])
|
|
|
+// 使用量
|
|
|
+const columnsAmount = [
|
|
|
+ {
|
|
|
+ title: '编号',
|
|
|
+ dataIndex: 'productId',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'IMIS',
|
|
|
+ dataIndex: 'imsi',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
|
|
|
+ {
|
|
|
+ title: 'SIM账户(卡号)',
|
|
|
+ dataIndex: 'account',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '流量(MB)',
|
|
|
+ dataIndex: 'usage',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '流量产生国家货地区编号',
|
|
|
+ dataIndex: 'countryNo',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '详单日期',
|
|
|
+ dataIndex: 'date',
|
|
|
+ align: 'center', ellipsis: true
|
|
|
+ },
|
|
|
+]
|
|
|
+const dataAmount = ref([])
|
|
|
const open = (data) => {
|
|
|
if (!data) {
|
|
|
return
|
|
|
}
|
|
|
dataSource.value = []
|
|
|
- Card_info.value = {...data,...data.Info,...data.Info.dataPackage}
|
|
|
- delete Card_info.value.Info
|
|
|
- console.log(Card_info.value);
|
|
|
-
|
|
|
+ Card_info.value = data
|
|
|
+ dataPackage.value = data.dataPackage[0]
|
|
|
+ // 卡套餐信息
|
|
|
+ dataCard.value = (data.dataPackage || []).map(val=>{
|
|
|
+ const status = val.status == 1 ? '已激活' : (val.status == 2 ? '关闭' :
|
|
|
+ val.status == 3 ? '已过期' : '未使用')
|
|
|
+ const tatal = val.dataTotal==-1?'无限流量':val.dataTotal
|
|
|
+ return {
|
|
|
+ ...val,
|
|
|
+ status:status,
|
|
|
+ dataTotal:tatal
|
|
|
+ }
|
|
|
+ })
|
|
|
intData()
|
|
|
visible.value = true
|
|
|
}
|
|
|
|
|
|
+// 使用量
|
|
|
const intData = async () => {
|
|
|
-
|
|
|
+ let sourceName = await Getdictionary('source')
|
|
|
+ // 获取今天的日期
|
|
|
+ const today = new Date();
|
|
|
+ const toDay = today.toISOString().split('T')[0];
|
|
|
+ const pastDate = new Date(today);
|
|
|
+ pastDate.setMonth(today.getMonth() - 3); // 减去三个月
|
|
|
+ const formattedDate = pastDate.toISOString().split('T')[0];
|
|
|
+ let res = await getDataCDR({ iccid: Card_info.value.iccid, source: sourceName.find(val => val.label == Card_info.value.source)?.value, startDate: formattedDate, endDate: toDay })
|
|
|
+ dataAmount.value = (res.data || []).map(val => {
|
|
|
+ const set = '+' + val.countryNo
|
|
|
+ return {
|
|
|
+ ...val,
|
|
|
+ countryNo: set
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const evChangePage = (page) => {
|
|
|
@@ -153,15 +358,44 @@ const handleCancel = () => {
|
|
|
|
|
|
defineExpose({ open })
|
|
|
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ chart.value = echarts.init(chartContainer.value) // 初始化图表实例
|
|
|
+
|
|
|
+ chart.value.setOption(option.value) // 设置图表配置项
|
|
|
+ })
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
-.toal_Form{
|
|
|
+.toal_Form {
|
|
|
padding-bottom: 10px;
|
|
|
- border-bottom: 1px solid #ccc ;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
}
|
|
|
-p{
|
|
|
+
|
|
|
+p {
|
|
|
font-size: 20px;
|
|
|
color: black;
|
|
|
}
|
|
|
+
|
|
|
+.line {
|
|
|
+ margin: 15px 0;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.footer_button {
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+
|
|
|
+ button {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.chart {
|
|
|
+ height: 310px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
</style>
|
