流量池管理

src/views/flowPool/config.js

@@ -0,0 +1,23 @@
+export const columns = [
+    { title: window.$t('flowPool.poolNumber'), dataIndex: 'poolNumber', align: 'center', width: 200 },
+    { title: window.$t('flowPool.label'), dataIndex: 'label', align: 'center', width: 200 },
+    { title: window.$t('flowPool.trafficPoolType'), dataIndex: 'trafficPoolType', align: 'center', width: 200 },
+    // { 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.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.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('global.common.operations'),
+        dataIndex: 'id',
+        slotName: 'id',
+        align: 'center',
+        width: 180,
+        fixed: "right",
+    }
+]

src/views/flowPool/index-jiu.vue

@@ -0,0 +1,620 @@
+<!-- 流量池 -->
+<template>
+    <div class="silent-expire-alarm">
+        <!-- 搜索条件区 -->
+        <div class="search-section">
+            <a-form :model="searchForm" layout="inline">
+                <a-form-item field="poolNumber" label="ICCID">
+                    <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
+                </a-form-item>
+                <a-form-item>
+                    <a-space>
+                        <a-button type="primary" @click="handleSearch">搜索</a-button>
+                        <a-button @click="resetSearch">重置</a-button>
+                    </a-space>
+                </a-form-item>
+            </a-form>
+        </div>
+        <!-- 数据表格 -->
+        <a-table row-key="poolNumber" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection"
+            :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: 'auto' }">
+            <template #operate="{ record }">
+                <!-- <a-button @click="openContract(record)" type="text">卡操作</a-button>
+                <a-button @click="openContract(record)" type="text">换卡</a-button>
+                <a-button @click="openContract(record)" type="text">充值二维码</a-button> -->
+                <a-button @click="exportCard(record)" type="text">卡详情</a-button>
+            </template>
+        </a-table>
+        <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1400px">
+            <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>
+                        <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>
+                    </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">
+                            <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 class="item-txt-box">
+                                    <div class="item-txt-title">剩余加油包流量</div>
+                                    <div class="item-txt-text">--</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>
+                            </div>
+                        </div>
+                    </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>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import * as echarts from 'echarts'
+// 创造一个响应式对象来保存echarts对象
+const chartDom = ref(null);
+let chartInstance = null;
+
+// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
+onMounted(async () => {
+    await nextTick(); // 确保DOM已经渲染完成
+    chartInstance = echarts.init(chartDom.value);
+    const option = {
+        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, 20, 28, 100, 123, 134],
+                type: 'bar'
+            }
+        ]
+    };
+    chartInstance.setOption(option);
+});
+
+// 销毁ECharts实例
+onUnmounted(() => {
+    if (chartInstance != null && chartInstance.dispose) {
+        chartInstance.dispose();
+    }
+});
+const selectedKeys = ref([]);
+const rowSelection = reactive({
+    type: 'checkbox',
+    showCheckedAll: true,
+    onlyCurrent: false,
+});
+const searchForm = reactive({
+    cardNumber: '',
+    customerName: '',
+});
+// 流量池用户选项
+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 moneyNameOpt = [
+    { value: 1, label: '移动20G' },
+    { value: 2, label: '监控1G月租' },
+    { value: 3, label: '联通100G' },
+    { value: 4, label: '电信200G' },
+    { value: 5, label: '监控2G月租' },
+
+];
+const columns = [
+    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1, width: 80 },
+    { title: '流量池编号', dataIndex: 'poolNumber', width: 150, align: 'center' },
+    { title: '流量池名称', dataIndex: 'poolName', width: 120, align: 'center' },
+    { title: '供应商名称', dataIndex: 'customerName', width: 120, align: 'center' },
+    { title: '资费名称', dataIndex: 'moneyName', width: 120, align: 'center' },
+    { title: '已激活卡数/总卡数量', dataIndex: 'cardMsg', width: 200, align: 'center' },
+    { title: '已使用流量/总流量(G)', dataIndex: 'trafficMsg', width: 200, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
+    { title: '更新日期', dataIndex: 'updateTime' },
+    { title: '操作', slotName: 'operate', align: 'center', width: 400, fixed: 'right' },
+];
+const tableData = ref([
+    {
+        poolNumber: '13800138001',
+        poolName: '广州移动',
+        customerName: '泰国True',
+        moneyName: '移动200G',
+        cardMsg: '11/100',
+        trafficMsg: '20/200',
+        updateTime: '2024-10-11'
+        // operate:'上传合同'
+    },
+    {
+        poolNumber: '13800138002',
+        poolName: '广州移动',
+        customerName: '泰国True',
+        moneyName: '移动200G',
+        cardMsg: '11/100',
+        trafficMsg: '20/200',
+        updateTime: '2024-10-11'
+        // operate:'上传合同'
+    },
+    {
+        poolNumber: '13800138003',
+        poolName: '广州移动',
+        customerName: '泰国True',
+        moneyName: '移动200G',
+        cardMsg: '11/100',
+        trafficMsg: '20/200',
+        updateTime: '2024-10-11'
+        // operate:'上传合同'
+    },
+    {
+        poolNumber: '13800138004',
+        poolName: '广州移动',
+        customerName: '泰国True',
+        moneyName: '移动200G',
+        cardMsg: '11/100',
+        trafficMsg: '20/200',
+        updateTime: '2024-10-11'
+        // operate:'上传合同'
+    },
+    // 可以添加更多模拟数据...
+]);
+// 上传合同的弹框
+const pagination = reactive({
+    total: tableData.value.length,
+    current: 1,
+    pageSize: 10,
+});
+const openContract = (item) => {
+    console.log(item, '???')
+};
+const handleSearch = () => {
+    console.log('Search form data:', searchForm);
+    Message.success('执行搜索操作');
+};
+const resetSearch = () => {
+    Object.keys(searchForm).forEach(key => {
+        if (Array.isArray(searchForm[key])) {
+            searchForm[key] = [];
+        } else {
+            searchForm[key] = null;
+        }
+    });
+    Message.success('搜索条件已重置');
+};
+// 新增流量池时的基本信息
+const formPool = reactive({
+    poolNumber: '',
+    poolName: '',
+    customerName: '',
+    moneyName: '',
+    user: ''
+})
+const formWarning = reactive({
+    // 总用量占比
+    totalDosage: '',
+    // 总用量占比达量预警
+    totalDosageCheck: '',
+    // 达量停机
+    stoppagePool: '',
+    stoppagePoolCheck: '',
+    stopNetworkPool: '',
+    stopNetworkPoolCheck: '',
+    remindTotal: '',
+    oneCardWarning: '',
+    outTotalCheck: '',
+    stoppageCard: '',
+    stoppageCardCheck: '',
+    stopNetworkCard: '',
+    stopNetworkCardCheck: '',
+    poolUsedWarning: '',
+    poolUsedCheck: '',
+    stoppageManagement: '',
+    stoppageManagementCheck: '',
+    stopNetworkManagement: '',
+    stopNetworkManagementCheck: '',
+})
+const openExport = ref(false);
+const columnsExport = [
+    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
+    {
+        title: '操作人',
+        dataIndex: 'name',
+    },
+    {
+        title: '导入时间',
+        dataIndex: 'exportTime',
+    },
+    {
+        title: '完成时间',
+        dataIndex: 'successTime',
+    },
+    {
+        title: '状态',
+        slotName: 'status',
+        align: 'center'
+    },
+    { title: '操作', slotName: 'operate', align: 'center' },
+];
+const dataExport = reactive([{
+    key: '1',
+    name: 'Jane Doe',
+    exportTime: '2024-10-13 22:20:01',
+    successTime: '2024-10-13 22:20:01',
+    status: 1
+}, {
+    key: '2',
+    name: 'Alisa Ross',
+    exportTime: '2024-10-13 22:20:01',
+    successTime: '2024-10-13 22:20:01',
+    status: 2
+}, {
+    key: '3',
+    name: 'Kevin Sandra',
+    exportTime: '2024-10-13 22:20:01',
+    successTime: '2024-10-13 22:20:01',
+    status: 3
+}, {
+    key: '4',
+    name: 'Ed Hellen',
+    exportTime: '2024-10-13 22:20:01',
+    successTime: '2024-10-13 22:20:01',
+    status: 2
+}, {
+    key: '5',
+    name: 'William Smith',
+    exportTime: '2024-10-13 22:20:01',
+    successTime: '2024-10-13 22:20:01',
+    status: 3
+}]);
+// 点击导卡按钮
+const exportCard = () => {
+    openExport.value = true;
+};
+const onChange = () => {
+}
+const handleOk = () => {
+}
+const handleCancel = () => {
+}
+</script>
+
+<style scoped lang="less">
+.silent-expire-alarm {
+    padding: 20px !important;
+    // background: #fcf;
+}
+
+.search-section {
+    margin-bottom: 20px;
+}
+
+.arco-table-th {
+    white-space: nowrap;
+}
+
+.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 {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    // align-items: center;
+    overflow: hidden;
+
+    .box-item {
+        width: 100%;
+        overflow: hidden;
+
+        .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;
+                    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);
+                        }
+                    }
+                }
+
+                .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;
+
+                    .status-icon {
+                        width: 6px;
+                        height: 6px;
+                        border-radius: 50%;
+                        margin-right: 10px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.echarts-box {
+    // width: 100%;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+
+    .chart-dom {
+        width: 700px !important;
+        height: 400px !important;
+    }
+}
+</style>

src/views/flowPool/index.vue

@@ -1,79 +1,90 @@
 <!-- 流量池 -->
 <template>
-    <div class="silent-expire-alarm">
+    <div class="container">
+        <div class="head-title">
+            <span>{{ route.meta.title }} </span>
+            <span class="head-title-right">
+                <a-button class="m-r-10" type="primary" @click="dictShowModel(1, null)">{{ $t('form.Add') }}</a-button>
+            </span>
+        </div>
         <!-- 搜索条件区 -->
         <div class="search-section">
             <a-form :model="searchForm" layout="inline">
-                <a-form-item field="poolNumber" label="ICCID">
-                    <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
-                </a-form-item>
-                <a-form-item field="poolNumber" label="IMSI">
-                    <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
-                </a-form-item>
-                <a-form-item field="poolNumber" label="IMEI">
-                    <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
-                </a-form-item>
-                <a-form-item field="poolNumber" label="MSISDN">
-                    <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
-                </a-form-item>
-                <a-form-item field="poolNumber" label=" 用户">
-                    <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
+                <a-form-item field="label" :label="$t('flowPool.label')">
+                    <a-input v-model="searchForm.label" :placeholder="$t('lotCard.please') + $t('flowPool.label')"
+                        allow-clear />
                 </a-form-item>
-                <a-form-item field="poolNumber" label="订单编号">
-                    <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
-                </a-form-item>
-                <a-form-item field="customerName" label="运营商">
-                    <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
-                        <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
+                <a-form-item field="trafficPoolType" :label="$t('flowPool.trafficPoolType')">
+                    <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 field="customerName" label="卡套餐">
-                    <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
-                        <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
-                    </a-select>
+                <a-form-item>
+                    <a-space>
+                        <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
+                        <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
+                    </a-space>
                 </a-form-item>
-                <a-form-item field="customerName" label="流量状态">
-                    <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
-                        <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
-                    </a-select>
+            </a-form>
+        </div>
+
+        <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-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
+                    :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)">
+                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{ $t('form.Delete')
+                        }}</a>
+                </a-popconfirm>
+            </template>
+
+        </a-table>
+
+
+        <!-- 弹框 -->
+        <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 field="customerName" label="卡状态">
-                    <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
-                        <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
+                <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 field="customerName" label="预警状态">
-                    <a-select v-model="value" :style="{ width: '200px' }" placeholder="Please select ...">
-                        <a-option v-for="item of poolUser" :value="item.value" :label="item.label" :key="item.value" />
+                <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 field="customerName" label="沉默期时间">
-                    <a-date-picker style="width: 200px;" />
-                </a-form-item>
-                <a-form-item field="customerName" label="卡导入时间">
-                    <a-range-picker @change="onChange" @select="onSelect" style="width: 254px;" />
-                </a-form-item>
-                <a-form-item field="customerName" label="卡到期时间">
-                    <a-range-picker @change="onChange" @select="onSelect" style="width: 254px;" />
+                <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-space>
-                        <a-button type="primary" @click="handleSearch">搜索</a-button>
-                        <a-button @click="resetSearch">重置</a-button>
-                    </a-space>
+                    <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>
-        </div>
-        <!-- 数据表格 -->
-        <a-table row-key="poolNumber" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection"
-            :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '650px' }">
-            <template #operate="{ record }">
-                <a-button @click="openContract(record)" type="text">卡操作</a-button>
-                <a-button @click="openContract(record)" type="text">换卡</a-button>
-                <a-button @click="openContract(record)" type="text">充值二维码</a-button>
-                <a-button @click="exportCard(record)" type="text">卡详情</a-button>
-            </template>
-        </a-table>
+        </a-modal>
+
         <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1400px">
             <template #title>
                 卡详情
@@ -286,193 +297,147 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';
-import { Message } from '@arco-design/web-vue';
-import * as echarts from 'echarts'
-// 创造一个响应式对象来保存echarts对象
-const chartDom = ref(null);
-let chartInstance = null;
-
-// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
-onMounted(async () => {
-    await nextTick(); // 确保DOM已经渲染完成
-    chartInstance = echarts.init(chartDom.value);
-    const option = {
-        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, 20, 28, 100, 123, 134],
-                type: 'bar'
-            }
-        ]
-    };
-    chartInstance.setOption(option);
-});
+import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue";
+import { useRoute } from "vue-router";
+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'
 
-// 销毁ECharts实例
-onUnmounted(() => {
-    if (chartInstance != null && chartInstance.dispose) {
-        chartInstance.dispose();
-    }
-});
-const selectedKeys = ref([]);
-const rowSelection = reactive({
-    type: 'checkbox',
-    showCheckedAll: true,
-    onlyCurrent: false,
-});
-const searchForm = reactive({
-    cardNumber: '',
-    customerName: '',
-});
-// 流量池用户选项
-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 moneyNameOpt = [
-    { value: 1, label: '移动20G' },
-    { value: 2, label: '监控1G月租' },
-    { value: 3, label: '联通100G' },
-    { value: 4, label: '电信200G' },
-    { value: 5, label: '监控2G月租' },
+const { proxy } = getCurrentInstance()
+const formRef = ref()
+const searchForm = ref({
+    "label": "",
+});
 
-];
-const columns = [
-    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1, width: 80 },
-    { title: '流量池编号', dataIndex: 'poolNumber', width: 150, align: 'center' },
-    { title: '流量池名称', dataIndex: 'poolName', width: 120, align: 'center' },
-    { title: '供应商名称', dataIndex: 'customerName', width: 120, align: 'center' },
-    { title: '资费名称', dataIndex: 'moneyName', width: 120, align: 'center' },
-    { title: '已激活卡数/总卡数量', dataIndex: 'cardMsg', width: 200, align: 'center' },
-    { title: '已使用流量/总流量(G)', dataIndex: 'trafficMsg', width: 200, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime' },
-    { title: '操作', slotName: 'operate', align: 'center', width: 400, fixed: 'right' },
-];
 const tableData = ref([
     {
-        poolNumber: '13800138001',
-        poolName: '广州移动',
-        customerName: '泰国True',
-        moneyName: '移动200G',
-        cardMsg: '11/100',
-        trafficMsg: '20/200',
-        updateTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        poolNumber: '13800138002',
-        poolName: '广州移动',
-        customerName: '泰国True',
-        moneyName: '移动200G',
-        cardMsg: '11/100',
-        trafficMsg: '20/200',
-        updateTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        poolNumber: '13800138003',
-        poolName: '广州移动',
-        customerName: '泰国True',
-        moneyName: '移动200G',
-        cardMsg: '11/100',
-        trafficMsg: '20/200',
-        updateTime: '2024-10-11'
-        // operate:'上传合同'
+        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: "--",
     },
     {
-        poolNumber: '13800138004',
-        poolName: '广州移动',
-        customerName: '泰国True',
-        moneyName: '移动200G',
-        cardMsg: '11/100',
-        trafficMsg: '20/200',
-        updateTime: '2024-10-11'
-        // operate:'上传合同'
+        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 pagination = reactive({
-    total: tableData.value.length,
-    current: 1,
+])
+
+
+
+const dataSource = ref([]);
+const route = useRoute();
+const pagination = ref({
+    total: 0,
     pageSize: 10,
+    current: 1,
+})
+
+
+
+
+const rowSelection = reactive({
+    type: 'checkbox',
+    showCheckedAll: true,
+    onlyCurrent: false,
 });
-const openContract = (item) => {
-    console.log(item, '???')
+const selectedKeys = ref([])
+
+
+
+const intData = async () => {
+    const param = {
+        current: pagination.value.current,
+        size: pagination.value.pageSize,
+        ...searchForm.value,
+    }
+    const { data } = await trafficPoolList(param)
+    dataSource.value = (data.records || []).map((item, index) => {
+        const trafficPoolType = typeList.value.find(val => val.value == item.traffic_pool_type)?.label
+        const warnStatus = trafficList.value.find(val => val.value == item.status)?.label
+        const sourceName = sourceList.value.find(val => val.value == item.source)?.label
+        return {
+            ...item,
+            sourceName,// 运营商名称
+            trafficPoolType,
+            poolNumber: "NR0" + (index + 1),
+            cardRariffName: "监控1G月租",
+            cardFlow: "1G/月",
+            cardNum: "11/100",
+            UsedMonth: "1.00G",
+            surplusFlow: "99.0G",
+            totalFlow: "100.0G",
+            warnStatus,
+            exceededFlow: "--",
+        }
+    })
+    pagination.value.total = data.total
+}
+
+
+
+
+// 删除
+const handleDel = async (id) => {
+    const { code } = await deleteTrafficPool({ id })
+    if (code == 200) {
+        Message.success({
+            content: "删除成功！",
+            duration: 2000,
+        })
+        intData()
+    }
 };
+
+//
+
 const handleSearch = () => {
-    console.log('Search form data:', searchForm);
-    Message.success('执行搜索操作');
-};
+    intData()
+}
 const resetSearch = () => {
-    Object.keys(searchForm).forEach(key => {
-        if (Array.isArray(searchForm[key])) {
-            searchForm[key] = [];
-        } else {
-            searchForm[key] = null;
-        }
-    });
-    Message.success('搜索条件已重置');
-};
-// 新增流量池时的基本信息
-const formPool = reactive({
-    poolNumber: '',
-    poolName: '',
-    customerName: '',
-    moneyName: '',
-    user: ''
-})
-const formWarning = reactive({
-    // 总用量占比
-    totalDosage: '',
-    // 总用量占比达量预警
-    totalDosageCheck: '',
-    // 达量停机
-    stoppagePool: '',
-    stoppagePoolCheck: '',
-    stopNetworkPool: '',
-    stopNetworkPoolCheck: '',
-    remindTotal: '',
-    oneCardWarning: '',
-    outTotalCheck: '',
-    stoppageCard: '',
-    stoppageCardCheck: '',
-    stopNetworkCard: '',
-    stopNetworkCardCheck: '',
-    poolUsedWarning: '',
-    poolUsedCheck: '',
-    stoppageManagement: '',
-    stoppageManagementCheck: '',
-    stopNetworkManagement: '',
-    stopNetworkManagementCheck: '',
-})
+    proxy.$refs.formRef.resetFields()
+    intData()
+}
+
+
+
+
+// -------------------弹窗数据------------------------------------
+const visible = ref(false);
+const typeCurrent = ref(null);
+const sourceList = ref([])
+const trafficList = ref([])
+const typeList = ref([])
+
+// 详情---------------------------
 const openExport = ref(false);
 const columnsExport = [
     { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
@@ -526,49 +491,169 @@ const dataExport = reactive([{
     successTime: '2024-10-13 22:20:01',
     status: 3
 }]);
-// 点击导卡按钮
-const exportCard = () => {
-    openExport.value = true;
+// -------------------------------
+
+const formState = ref({
+    "id": "",
+    // 流量包名称
+    "label": "",
+    // 流量池类型: 1: 前流量池 2: 后流量池
+    "traffic_pool_type": "",
+    // 来源
+    "source": "",
+    // 流量包状态：1：正常（发布计划状态）2：线下暂停销售
+    "status": "",
+    // 流量池ID
+    "sim_tariff_id": 0,
+    // 过期时间
+    "expire_time": "",
+    // ICCID列表
+    "iccids": ["89852342022040149139", "89852342022060861597"]
+});
+
+const rules = {
+    label: [{ required: true, trigger: 'change', }],
+    sim_data_plan_id: [{ required: true, trigger: 'change', }],
+    user_id: [{ required: true, trigger: 'change', }],
+    source: [{ required: true, trigger: 'change', }],
+    traffic_type: [{ required: true, trigger: 'change', }],
+    billing_type: [{ required: true, trigger: 'change', }],
+    bag_size: [{ required: true, trigger: 'change', }],
+    billing_cycle: [{ required: true, trigger: 'change', }],
+    traffic_pool_type: [{ required: true, trigger: 'change', }],
+    settlement_cycle: [{ required: true, trigger: 'change', }],
+    pricing: [{ required: true, trigger: 'change', }],
+    currency: [{ required: true, trigger: 'change', }],
 };
-const onChange = () => {
+
+
+// 提交
+const handleSubmit = ({ values, errors }) => {
+    formRef.value.validate(async (errors) => {
+        if (!errors) {
+            values.user_id = Number(values.user_id)
+            if (formState.value.id) {
+                const { code, data } = await updateTrafficPool(values)
+
+                if (code == 200) {
+                    Message.success({
+                        content: "修改成功！",
+                        duration: 2000,
+                    })
+                    visible.value = false;
+                    intData()
+                }
+            } else {
+                const { code, data } = await addTrafficPool(values)
+                if (code == 200) {
+                    Message.success({
+                        content: "添加成功！",
+                        duration: 2000,
+                    })
+                    visible.value = false;
+                    intData()
+                }
+            }
+        }
+    });
+
 }
+// 弹框
+const dictShowModel = (type, data) => {
+    if (type == 3) {
+        openExport.value = true;
+        return
+    }
+    formRef.value.resetFields();
+    typeCurrent.value = type;
+    visible.value = true;
+    // 编辑
+    if (type == 2) {
+        // Object.assign(formState.value, data);
+        Object.keys(formState.value).forEach(key => {
+            if (data[key]) {
+                formState.value[key] = data[key]
+            }
+        });
+    }
+
+}
+// 取消
+const resetForm = () => {
+    visible.value = false;
+    formRef.value.resetFields();
+}
+
+// 卡详情
+
 const handleOk = () => {
 }
 const handleCancel = () => {
 }
+// --------------------------------------------------------
+// 获取字典
+const handleDictValue = () => {
+    const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
+    sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
+    trafficList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFIC_PACKET_STATUS)
+    typeList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFIC_POOL_TYPE)
+}
+
+
+onMounted(() => {
+    handleDictValue()
+    intData()
+})
+
+
+
 </script>
 
 <style scoped lang="less">
-.silent-expire-alarm {
-    padding: 20px !important;
-    // background: #fcf;
+.head-title-right {
+    .m-r-10 {
+        margin-right: 10px;
+    }
+
 }
 
 .search-section {
+    margin-top: 20px;
     margin-bottom: 20px;
 }
 
-.arco-table-th {
-    white-space: nowrap;
-}
+.container {
+    .head-title {
+        display: flex;
+        justify-content: space-between;
+    }
 
-.form-pool-tit {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
+    .form-row {
+        display: flex;
 
-    .pool-icon {
-        margin-right: 10px;
-        width: 4px;
-        height: 16px;
-        background: #1B5DF8;
-        font-size: 14px;
-        color: #6C6E70;
-        font-family: PingFang SC;
+        .form-row-col {
+            width: 25%;
+            display: flex;
+            align-items: center;
 
+            .form-row-label {
+                width: 120px;
+                text-align: right;
+            }
+        }
     }
 }
 
+silent-expire-alarm {
+    padding: 20px !important;
+    // background: #fcf;
+}
+
+.search-section {
+    margin-bottom: 20px;
+}
+
+
 .export-box {
     width: 100%;
     display: flex;