流量包

src/i18n/zh/flowPool.js

@@ -6,18 +6,31 @@ export default {
     trafficPoolStatus: "流量池状态",
     simRariffId: "资费ID",
     expireTime: "过期时间",
+    updated_at: "更新日期",
 
+    id: "序号",
     poolNumber: "流量池编号",
     cardRariffName: "卡资费名称",
     cardFlow: "卡套餐",
     cardNum: "已激活卡数/总卡数量",
     UsedMonth: "本月已用",
     surplusFlow: "剩余流量",
-    totalFlow: "总流量",
+    totalFlow: "已使用流量/总流量",
     warnStatus: "预警状态",
     exceededFlow: "已超流量",
 
+    // 预警
+    proportion: "总用量占比",
+    shutdown: "达量停机",
+    netWork: "达量断网",
+    remind: "提醒次数",
+    singleWarn: "单次用量预警",
+    poolWarn: "池已用量预警",
+    earlyWarn: "达量预警",
+
     // 按钮
     Detail: "查看池",
-
+    exportCard: "导卡",
+    warnTabs: "预警设置",
+    infoTabs: "基础信息",
 }

src/i18n/zh/tariffManagement.js

@@ -10,6 +10,7 @@ export default {
     bagSize: "资费包大小",
     pricing: "标准价格",
     settlementCycle: "周期限制",// 结算周期
+    settlementCycleLabel: "周期限制(月)",// 结算周期
 
     billingMethod: "计费方式",
     sourcePrice: "来源价格",
@@ -20,6 +21,9 @@ export default {
     feeCode: '资费编码',
     feeStatus: "状态",
 
+    cycleBuy: "订购周期",
+    priceplan: "超套价格",
+
     // 按钮
     addPlanBtn: "添加资费计划"
 }

src/views/flowPool/config.js

@@ -5,13 +5,14 @@ export const columns = [
     // { title: window.$t('flowPool.trafficPoolStatus'), dataIndex: 'trafficPoolStatus', align: 'center', width: 200 },
     { title: window.$t('flowPool.source'), dataIndex: 'sourceName', align: 'center', width: 200 },
     { title: window.$t('flowPool.cardRariffName'), dataIndex: 'cardRariffName', align: 'center', width: 200 },
-    { title: window.$t('flowPool.cardFlow'), dataIndex: 'cardFlow', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.cardFlow'), dataIndex: 'cardFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.cardNum'), dataIndex: 'cardNum', align: 'center', width: 200 },
-    { title: window.$t('flowPool.UsedMonth'), dataIndex: 'UsedMonth', align: 'center', width: 200 },
-    { title: window.$t('flowPool.surplusFlow'), dataIndex: 'surplusFlow', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.UsedMonth'), dataIndex: 'UsedMonth', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.surplusFlow'), dataIndex: 'surplusFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.totalFlow'), dataIndex: 'totalFlow', align: 'center', width: 200 },
-    { title: window.$t('flowPool.warnStatus'), dataIndex: 'warnStatus', align: 'center', width: 200 },
-    { title: window.$t('flowPool.exceededFlow'), dataIndex: 'exceededFlow', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.warnStatus'), dataIndex: 'warnStatus', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.exceededFlow'), dataIndex: 'exceededFlow', align: 'center', width: 200 },
+    { title: window.$t('flowPool.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
     {
         title: window.$t('global.common.operations'),
         dataIndex: 'id',

src/views/flowPool/index.vue

@@ -32,12 +32,12 @@
 
         <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }">
             <template #id="{ record }">
-                <!-- 查看 -->
-                <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(3, record)">{{
-                    $t('flowPool.Detail') }}</a>
                 <!-- 修改 -->
                 <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)">{{
                     $t('form.Edit') }}</a>
+                <!-- 导卡 -->
+                <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(3, record)">{{
+                    $t('flowPool.exportCard') }}</a>
                 <!-- 删除 -->
                 <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
                     :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)">
@@ -51,246 +51,207 @@
 
         <!-- 弹框 -->
         <a-modal :title="typeCurrent == 1 ? $t('form.Add') : typeCurrent == 2 ? $t('form.Edit') : $t('flowPool.Detail')"
-            v-model:visible="visible" @onCancel="resetForm" centered :maskClosable="false" :footer="null">
-            <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit">
-                <a-form-item :label="$t('flowPool.label')" field="label">
-                    <a-input v-model="formState.label" />
-                </a-form-item>
-                <a-form-item :label="$t('flowPool.source')" field="source">
-                    <a-select v-model="formState.source"
-                        :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.source')">
-                        <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{ item.label
-                            }}</a-option>
-                    </a-select>
-                </a-form-item>
-                <a-form-item :label="$t('flowPool.trafficPoolStatus')" field="status">
-                    <a-select v-model="formState.status"
-                        :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolStatus')">
-                        <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{ item.label
-                            }}</a-option>
-                    </a-select>
-                </a-form-item>
-                <a-form-item :label="$t('flowPool.trafficPoolType')" field="traffic_pool_type">
-                    <a-select v-model="formState.traffic_pool_type"
-                        :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolType')">
-                        <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{ item.label
-                            }}</a-option>
-                    </a-select>
-                </a-form-item>
-                <a-form-item>
-                    <a-button type="primary" html-type="submit" style="margin-right: 10px;">{{ $t('form.Confirm')
-                        }}</a-button>
-                    <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
-                </a-form-item>
-            </a-form>
+            v-model:visible="visible" @onCancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">
+
+            <a-tabs v-model:active-key="activeKey">
+                <a-tab-pane key="1" :title="$t('flowPool.infoTabs')">
+                    <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit">
+                        <a-form-item :label="$t('flowPool.label')" field="label"
+                            :placeholder="$t('form.PleaseEnterThe') + $t('flowPool.label')">
+                            <a-input v-model="formState.label" />
+                        </a-form-item>
+                        <a-form-item :label="$t('flowPool.source')" field="source">
+                            <a-select v-model="formState.source"
+                                :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.source')">
+                                <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{ item.label
+                                    }}</a-option>
+                            </a-select>
+                        </a-form-item>
+                        <a-form-item :label="$t('flowPool.trafficPoolStatus')" field="status">
+                            <a-select v-model="formState.status"
+                                :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolStatus')">
+                                <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{ item.label
+                                    }}</a-option>
+                            </a-select>
+                        </a-form-item>
+                        <a-form-item :label="$t('flowPool.trafficPoolType')" field="traffic_pool_type">
+                            <a-select v-model="formState.traffic_pool_type"
+                                :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolType')">
+                                <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{ item.label
+                                    }}</a-option>
+                            </a-select>
+                        </a-form-item>
+                        <a-form-item>
+                            <a-button type="primary" html-type="submit" style="margin-right: 10px;">{{
+                                $t('form.Confirm')
+                            }}</a-button>
+                            <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
+                        </a-form-item>
+                    </a-form>
+                </a-tab-pane>
+                <a-tab-pane key="2" :title="$t('flowPool.warnTabs')">
+                    <a-form :model="formWarning" direction="inline">
+                        <div class="form-pool-tit">
+                            <div class="pool-icon"></div>
+                            客户端·池预警设置
+                        </div>
+                        <a-form-item field="totalDosage" tooltip="请输入" label="总用量占比">
+                            <a-input-number v-model="formWarning.totalDosage" :style="{ width: '320px' }"
+                                placeholder="请输入" allow-clear hide-button>
+                                <template #suffix>
+                                    %
+                                </template>
+                            </a-input-number>
+                            <a-checkbox value="1" v-model="formWarning.totalDosageCheck">达量预警</a-checkbox>
+                        </a-form-item>
+                        <a-form-item field="stoppagePool" label="达量停机">
+                            <a-select v-model="formWarning.stoppagePool" placeholder="请选择" :style="{ width: '320px' }"
+                                allow-clear>
+                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                                    :label="item.label" />
+                            </a-select>
+                            <a-checkbox value="1" v-model="formWarning.stoppagePoolCheck">达量停机</a-checkbox>
+                        </a-form-item>
+                        <a-form-item field="stopNetworkPool" label="达量断网">
+                            <a-select v-model="formWarning.stopNetworkPool" placeholder="请选择"
+                                :style="{ width: '320px' }" allow-clear>
+                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                                    :label="item.label" />
+                            </a-select>
+                            <a-checkbox value="1" v-model="formWarning.stopNetworkPoolCheck">达量断网</a-checkbox>
+                        </a-form-item>
+                        <a-form-item field="remindTotal" label="提醒次数">
+                            <a-input-number v-model="formWarning.remindTotal" :style="{ width: '320px' }"
+                                placeholder="请输入" allow-clear hide-button>
+                                <template #suffix>
+                                    次/月
+                                </template>
+                            </a-input-number>
+                        </a-form-item>
+                        <div class="form-pool-tit">
+                            <div class="pool-icon"></div>
+                            客户端·单卡预警设置
+                        </div>
+                        <a-form-item field="oneCardWarning" tooltip="请输入" label="单卡用量预警">
+                            <a-input-number v-model="formWarning.oneCardWarning" :style="{ width: '320px' }"
+                                placeholder="请输入" allow-clear hide-button>
+                            </a-input-number>
+                            <a-checkbox value="1" v-model="formWarning.outTotalCheck">达量预警</a-checkbox>
+                        </a-form-item>
+                        <a-form-item field="stoppageCard" label="达量停机">
+                            <a-select v-model="formWarning.stoppageCard" placeholder="请选择" :style="{ width: '320px' }"
+                                allow-clear>
+                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                                    :label="item.label" />
+                            </a-select>
+                            <a-checkbox value="1" v-model="formWarning.stoppageCardCheck">达量停机</a-checkbox>
+                        </a-form-item>
+                        <a-form-item field="stopNetworkCard" label="达量断网">
+                            <a-select v-model="formWarning.stopNetworkCard" placeholder="请选择"
+                                :style="{ width: '320px' }" allow-clear>
+                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                                    :label="item.label" />
+                            </a-select>
+                            <a-checkbox value="1" v-model="formWarning.stopNetworkCardCheck">达量断网</a-checkbox>
+                        </a-form-item>
+                        <div class="form-pool-tit">
+                            <div class="pool-icon"></div>
+                            管理端预警设置
+                        </div>
+                        <a-form-item field="poolUsedWarning" tooltip="请输入" label="池已用量预警">
+                            <a-input-number v-model="formWarning.poolUsedWarning" :style="{ width: '320px' }"
+                                placeholder="请输入" allow-clear hide-button>
+                                <template #suffix>
+                                    %
+                                </template>
+                            </a-input-number>
+                            <a-checkbox value="1" v-model="formWarning.poolUsedCheck">达量预警</a-checkbox>
+                        </a-form-item>
+                        <a-form-item field="stoppageManagement" label="达量停机">
+                            <a-select v-model="formWarning.stoppageManagement" placeholder="请选择"
+                                :style="{ width: '320px' }" allow-clear>
+                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                                    :label="item.label" />
+                            </a-select>
+                            <a-checkbox value="1" v-model="formWarning.stoppageManagementCheck">达量停机</a-checkbox>
+                        </a-form-item>
+                        <a-form-item field="stopNetworkManagement" label="达量断网">
+                            <a-select v-model="formWarning.stopNetworkManagement" placeholder="请选择"
+                                :style="{ width: '320px' }" allow-clear>
+                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                                    :label="item.label" />
+                            </a-select>
+                            <a-checkbox value="1" v-model="formWarning.stopNetworkManagementCheck">达量断网</a-checkbox>
+                        </a-form-item>
+                        <a-form-item>
+                            <a-button type="primary" html-type="submit" @click="resetForm"
+                                style="margin-right: 10px;">{{
+                                    $t('form.Confirm')
+                                }}</a-button>
+                            <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
+                        </a-form-item>
+                    </a-form>
+                </a-tab-pane>
+            </a-tabs>
+
         </a-modal>
 
-        <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1400px">
+        <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1000px">
             <template #title>
-                卡详情
+                批量导入
             </template>
             <div class="export-box">
-                <div class="box-item">
-                    <div class="export-box-item">
-                        <div class="box-item-title">
-                            <div class="title-icon"></div>
-                            基本信息
+                <div class="export-box-item">
+                    <div class="box-item-title">
+                        <div class="title-icon"></div>
+                        批量导入
+                    </div>
+                    <div class="box-item-content">
+                        <div class="item-txt">
+                            <div class="item-txt-title">标题</div>
+                            <div class="item-txt-text">联通流量卡</div>
                         </div>
-                        <div class="box-item-content">
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">ICCID</div>
-                                    <div class="item-txt-text">0989719841741478635014818</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">MSISDN</div>
-                                    <div class="item-txt-text">0989719841741478635014818</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">IMSI</div>
-                                    <div class="item-txt-text">0989719841741478635014818</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">IMEI</div>
-                                    <div class="item-txt-text">0989719841741478635014818</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">激活日期</div>
-                                    <div class="item-txt-text">2024-09-20 00:18:37</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">卡到期日期</div>
-                                    <div class="item-txt-text">2024-09-20 00:18:37</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">沉默到期日期</div>
-                                    <div class="item-txt-text">2024-09-20 00:18:37</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">网络类型</div>
-                                    <div class="item-txt-text">4G</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">订单编号</div>
-                                    <div class="item-txt-text">12322327776754</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">池名称/编号</div>
-                                    <div class="item-txt-text">泰国5万共享池/00170</div>
-                                </div>
-                            </div>
-                            <div class="item-txt"
-                                style="padding-top:20px;border-top:1px solid rgba(0, 0, 0, 0.1);margin-top: 20px;">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">订单编号</div>
-                                    <div class="item-txt-text">12322327776754</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">池名称/编号</div>
-                                    <div class="item-txt-text">泰国5万共享池/00170</div>
-                                </div>
-                            </div>
-                            <div class="item-txt"
-                                style="padding-bottom:20px;border-bottom:1px solid rgba(0, 0, 0, 0.1);margin-bottom: 20px">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">订单编号</div>
-                                    <div class="item-txt-text">12322327776754</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">池名称/编号</div>
-                                    <div class="item-txt-text">泰国5万共享池/00170</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">运营商类型</div>
-                                    <div class="item-txt-text">国际本地</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">运营商名称</div>
-                                    <div class="item-txt-text">泰国AIS</div>
-                                </div>
-                            </div>
+                        <div class="item-txt">
+                            <div class="item-txt-title">标题</div>
+                            <div class="item-txt-text">联通流量卡</div>
                         </div>
-                    </div>
-                    <div class="export-box-item" style="margin-top:20px;">
-                        <div class="box-item-title">
-                            <div class="title-icon"></div>
-                            当前套餐信息
+                        <div class="item-txt">
+                            <div class="item-txt-title"></div>
+                            <div class="item-txt-text"><a-upload action="/">
+                                    <template #upload-button>
+                                        <a-button type="primary">导入</a-button>
+                                    </template>
+                                </a-upload></div>
                         </div>
-                        <div class="box-item-content">
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">当前套餐</div>
-                                    <div class="item-txt-text">100M每月</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">套餐计费周期</div>
-                                    <div class="item-txt-text">按月</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">最短订购周期</div>
-                                    <div class="item-txt-text">36个月</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">最长订购周期</div>
-                                    <div class="item-txt-text">--</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">套餐开始时间</div>
-                                    <div class="item-txt-text">2024-09-20 10:00:13</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">套餐结束时间</div>
-                                    <div class="item-txt-text">2024-09-20 10:00:13</div>
-                                </div>
-                            </div>
-                            <div class="item-txt"
-                                style="padding-top:20px;border-top:1px solid rgba(0, 0, 0, 0.1);margin-top: 20px;">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">已用套餐流量</div>
-                                    <div class="item-txt-text">28M</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">剩余套餐流量</div>
-                                    <div class="item-txt-text">72M</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">已用加油包流量</div>
-                                    <div class="item-txt-text">8M</div>
+                    </div>
+                </div>
+                <div class="export-box-item" style="margin-top:20px;">
+                    <div class="box-item-title">
+                        <div class="title-icon"></div>
+                        导入结果
+                    </div>
+                    <div class="box-item-content">
+                        <a-table :columns="columnsExport" :data="dataExport">
+                            <template #operate="{ record }">
+                                <a-button @click="openContract(record)" type="text">下载</a-button>
+                            </template>
+                            <template #status="{ record }">
+                                <div class="export-status" v-if="record.status == 1">
+                                    <div class="status-icon" style="background: rgba(82, 196, 27, 1);"></div>
+                                    导入成功
                                 </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">剩余加油包流量</div>
-                                    <div class="item-txt-text">--</div>
+                                <div class="export-status" v-if="record.status == 2">
+                                    <div class="status-icon" style="background: rgba(250, 173, 20, 1);"></div>
+                                    部分成功
                                 </div>
-                            </div>
-                            <div class="item-txt" style="margin-top:20px;">
-                                <div class="item-txt-box" v-for="item in 5" :key="item">
-                                    <a-button type="primary">同步卡信息</a-button>
+                                <div class="export-status" v-if="record.status == 3">
+                                    <div class="status-icon" style="background: rgba(247, 66, 75, 1);"></div>
+                                    校验失败
                                 </div>
-                            </div>
-                        </div>
+                            </template>
+                        </a-table>
                     </div>
                 </div>
-                <div class="box-item" style="padding-left:40px;box-sizing:border-box;">
-                    <a-tabs default-active-key="1">
-                        <a-tab-pane key="1" title="月用量">
-                            <div class="echarts-box">
-                                <div ref="chartDom" class="chart-dom"></div>
-                            </div>
-                        </a-tab-pane>
-                        <a-tab-pane key="2" title="卡套餐信息">
-                            <a-table :columns="columnsExport" :data="dataExport">
-                                <template #operate="{ record }">
-                                    <a-button @click="openContract(record)" type="text">下载</a-button>
-                                </template>
-                                <template #status="{ record }">
-                                    <div class="export-status" v-if="record.status == 1">
-                                        <div class="status-icon" style="background: rgba(82, 196, 27, 1);"></div>
-                                        导入成功
-                                    </div>
-                                    <div class="export-status" v-if="record.status == 2">
-                                        <div class="status-icon" style="background: rgba(250, 173, 20, 1);"></div>
-                                        部分成功
-                                    </div>
-                                    <div class="export-status" v-if="record.status == 3">
-                                        <div class="status-icon" style="background: rgba(247, 66, 75, 1);"></div>
-                                        校验失败
-                                    </div>
-                                </template>
-                            </a-table>
-                        </a-tab-pane>
-                        <a-tab-pane key="3" title="预警信息">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                        <a-tab-pane key="4" title="充值记录">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                        <a-tab-pane key="5" title="使用量记录">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                        <a-tab-pane key="6" title="操作记录">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                        <a-tab-pane key="7" title="售后">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                    </a-tabs>
-                </div>
             </div>
         </a-modal>
     </div>
@@ -303,7 +264,6 @@ import { columns } from "./config";
 import { Message, Notification } from '@arco-design/web-vue'
 import { deleteTrafficPool, addTrafficPool, updateTrafficPool, trafficPoolList } from "@/api/path/flowPool.api"
 import { enum_dict } from "@/hooks/enum";
-import { useSystemStore } from '@/store/modules/systemStore'
 
 
 const { proxy } = getCurrentInstance()
@@ -312,47 +272,6 @@ const searchForm = ref({
     "label": "",
 });
 
-const tableData = ref([
-    {
-        label: "监控1G月租",
-        source: "泰国AIS",// 运营商名称
-        trafficPoolType: "前向池",
-        trafficPoolStatus: "前向池",
-        simRariffId: "1",
-        expireTime: "2025-01-02 15:04:05",
-
-        poolNumber: "NR026",
-        cardRariffName: "监控1G月租",
-        cardFlow: "1G/月",
-        cardNum: "11/100",
-        UsedMonth: "1.00G",
-        surplusFlow: "99.0G",
-        totalFlow: "100.0G",
-        warnStatus: "正常",
-        exceededFlow: "--",
-    },
-    {
-        label: "监控1G月租",
-        source: "泰国AIS",// 运营商名称
-        trafficPoolType: "后向池",
-        trafficPoolStatus: "后向池",
-        simRariffId: "1",
-        expireTime: "2025-01-02 15:04:05",
-
-        poolNumber: "NR027",
-        cardRariffName: "监控1G月租",
-        cardFlow: "1G/月",
-        cardNum: "11/100",
-        UsedMonth: "1.00G",
-        surplusFlow: "99.0G",
-        totalFlow: "100.0G",
-        warnStatus: "告警",
-        exceededFlow: "0.2G",
-    },
-])
-
-
-
 const dataSource = ref([]);
 const route = useRoute();
 const pagination = ref({
@@ -431,6 +350,7 @@ const resetSearch = () => {
 
 
 // -------------------弹窗数据------------------------------------
+const activeKey = ref('1');
 const visible = ref(false);
 const typeCurrent = ref(null);
 const sourceList = ref([])
@@ -510,6 +430,30 @@ const formState = ref({
     // ICCID列表
     "iccids": ["89852342022040149139", "89852342022060861597"]
 });
+const formWarning = reactive({
+    // 总用量占比
+    totalDosage: null,
+    // 总用量占比达量预警
+    totalDosageCheck: '',
+    // 达量停机
+    stoppagePool: '',
+    stoppagePoolCheck: '',
+    stopNetworkPool: '',
+    stopNetworkPoolCheck: '',
+    remindTotal: null,
+    oneCardWarning: null,
+    outTotalCheck: '',
+    stoppageCard: '',
+    stoppageCardCheck: '',
+    stopNetworkCard: '',
+    stopNetworkCardCheck: '',
+    poolUsedWarning: null,
+    poolUsedCheck: '',
+    stoppageManagement: '',
+    stoppageManagementCheck: '',
+    stopNetworkManagement: '',
+    stopNetworkManagementCheck: '',
+})
 
 const rules = {
     label: [{ required: true, trigger: 'change', }],
@@ -526,6 +470,28 @@ const rules = {
     currency: [{ required: true, trigger: 'change', }],
 };
 
+// 流量池用户选项
+const poolUser = [
+    { value: 1, label: '阿里巴巴' },
+    { value: 2, label: '腾讯' },
+    { value: 3, label: '字节跳动' },
+    { value: 4, label: '百度' },
+    { value: 5, label: '小红书' },
+
+];
+const customerNameOpt = [
+    { value: 1, label: '广州联通' },
+    { value: 2, label: '湖北移动' },
+    { value: 3, label: '浙江电信' },
+    { value: 4, label: '湖北联通' },
+    { value: 5, label: '湖北电信' },
+
+];
+const earlyList = [
+    { value: 1, label: '手工停机' },
+
+];
+
 
 // 提交
 const handleSubmit = ({ values, errors }) => {
@@ -566,7 +532,10 @@ const dictShowModel = (type, data) => {
     }
     formRef.value.resetFields();
     typeCurrent.value = type;
-    visible.value = true;
+    activeKey.value = "1"
+    nextTick(() => {
+        visible.value = true;
+    });
     // 编辑
     if (type == 2) {
         // Object.assign(formState.value, data);
@@ -610,13 +579,12 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-.head-title-right {
-    .m-r-10 {
-        margin-right: 10px;
-    }
-
+.m-r-10 {
+    margin-right: 10px;
 }
 
+.head-title-right {}
+
 .search-section {
     margin-top: 20px;
     margin-bottom: 20px;
@@ -654,101 +622,105 @@ silent-expire-alarm {
 }
 
 
-.export-box {
-    width: 100%;
+.echarts-box {
+    // width: 100%;
     display: flex;
-    justify-content: space-between;
-    // align-items: center;
+    justify-content: center;
     overflow: hidden;
 
-    .box-item {
-        width: 100%;
-        overflow: hidden;
+    .chart-dom {
+        width: 700px !important;
+        height: 400px !important;
+    }
+}
 
-        .export-box-item {
-            .box-item-title {
-                display: flex;
-                // align-items: center;
-                font-family: PingFang SC;
-                font-size: 16px;
-                font-weight: 600;
-                line-height: 24px;
-                color: rgba(0, 0, 0, 0.85);
-                margin-bottom: 10px;
+.form-item-space-item {
+    background-color: #f2f3f5;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
 
-                .title-icon {
-                    margin-right: 10px;
-                    width: 4px;
-                    height: 16px;
-                    background: #1B5DF8;
+.form-pool-tit {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .pool-icon {
+        margin-right: 10px;
+        width: 4px;
+        height: 16px;
+        background: #1B5DF8;
+        font-size: 14px;
+        color: #6C6E70;
+        font-family: PingFang SC;
+
+    }
+}
+
+
+.export-box {
+    .export-box-item {
+        .box-item-title {
+            display: flex;
+            align-items: center;
+            font-family: PingFang SC;
+            font-size: 16px;
+            font-weight: 600;
+            line-height: 24px;
+            color: rgba(0, 0, 0, 0.85);
+            margin-bottom: 10px;
+
+            .title-icon {
+                margin-right: 10px;
+                width: 4px;
+                height: 16px;
+                background: #1B5DF8;
 
-                }
             }
+        }
+
+        .box-item-content {
+            .item-txt {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
 
-            .box-item-content {
-                .item-txt {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-bottom: 10px;
-
-                    .item-txt-box {
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-
-                        .item-txt-title {
-                            margin-right: 10px;
-                            //styleName: Body/Medium;
-                            font-family: PingFang SC;
-                            font-size: 14px;
-                            font-weight: 400;
-                            line-height: 22px;
-                            color: rgba(0, 0, 0, 0.4);
-                        }
-
-                        .item-txt-text {
-                            font-family: PingFang SC;
-                            font-size: 14px;
-                            font-weight: 400;
-                            line-height: 22px;
-                            text-align: left;
-                            color: rgba(51, 51, 51, 1);
-                        }
-                    }
+                .item-txt-title {
+                    width: 300px;
+                    text-align: right;
+                    margin-right: 10px;
                 }
 
-                .export-status {
+                .item-txt-text {
                     font-family: PingFang SC;
                     font-size: 14px;
                     font-weight: 400;
                     line-height: 22px;
                     text-align: left;
-                    color: rgba(51, 51, 51, 1);
-                    display: flex;
-                    align-items: center;
-
-                    .status-icon {
-                        width: 6px;
-                        height: 6px;
-                        border-radius: 50%;
-                        margin-right: 10px;
-                    }
+                    color: #1B5DF8;
+
                 }
             }
-        }
-    }
-}
 
-.echarts-box {
-    // width: 100%;
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
+            .export-status {
+                font-family: PingFang SC;
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 22px;
+                text-align: left;
+                color: rgba(51, 51, 51, 1);
+                display: flex;
+                align-items: center;
 
-    .chart-dom {
-        width: 700px !important;
-        height: 400px !important;
+                .status-icon {
+                    width: 6px;
+                    height: 6px;
+                    border-radius: 50%;
+                    margin-right: 10px;
+                }
+            }
+        }
     }
 }
 </style>

src/views/supplier/trafficList/index.vue

@@ -43,7 +43,8 @@
 
     </a-table>
 
-    <!-- New data package form dialog -->
+
+
     <new-data-package-form v-model:visible="newDataPackageFormVisible" :editMode="editMode" :editData="editData"
       @submit="handleNewDataPackageSubmit" />
   </div>