新增 SIM 卡前端页面

sec-beidou/src/main/java/com/imdroid/beidou/controller/SimCardController.java

@@ -0,0 +1,213 @@
+package com.imdroid.beidou.controller;
+
+import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.imdroid.beidou.common.Role;
+import com.imdroid.beidou.service.CommonExcelService;
+import com.imdroid.secapi.dto.*;
+import org.apache.http.HttpEntity;
+import org.apache.http.util.EntityUtils;
+import org.apache.http.client.methods.CloseableHttpResponse;
+import org.apache.http.client.methods.HttpGet;
+import org.apache.http.impl.client.CloseableHttpClient;
+import org.apache.http.impl.client.HttpClients;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.util.StringUtils;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
+import java.math.BigDecimal;
+import java.security.MessageDigest;
+import java.time.Duration;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.*;
+
+@Controller
+public class SimCardController extends BasicController  {
+    // TODO：这里的常量应该写入 application.properties
+    private static final String BASE_URL = "http://120.78.169.220:8089";
+    private static final String USERNAME = "gzyzdz";
+    private static final String KEY = "632629d1269a202c9d49a574623e4e4c";
+
+    @Autowired
+    private SimCardsMapper simCardsMapper;
+
+    @RequestMapping("/page/sim_status")
+    public String simStatus(Model m, HttpSession session) {
+        initModel(m, session);
+
+        return "/page/sim_status";
+    }
+
+    @RequestMapping("/sim/list")
+    @ResponseBody
+    public JSONObject list(HttpSession session,
+                           int page,
+                           int limit,
+                           String searchType,
+                           String searchContent,
+                           Integer status) {
+        Page<SimCard> pageable = new Page<>(page, limit);
+
+        QueryWrapper<SimCard> queryWrapper = new QueryWrapper<>();
+
+
+        if (!StringUtils.isEmpty(searchContent)) {
+            switch(searchType) {
+                case "deviceId":
+                    queryWrapper.like("deviceid", searchContent.trim());
+                    break;
+                case "iccid":
+                    queryWrapper.like("iccid", searchContent.trim());
+                    break;
+                case "simNumber":
+                    queryWrapper.like("msisdn", searchContent.trim());
+                    break;
+            }
+        }
+        if (status != null) {
+            queryWrapper.eq("status", status);
+        }
+
+        queryWrapper.orderByDesc("updatetime");
+        IPage<SimCard> cs = simCardsMapper.selectPage(pageable, queryWrapper);
+
+        JSONObject jsonObject = new JSONObject();
+        jsonObject.put("code", 0);
+        jsonObject.put("msg", "");
+        jsonObject.put("count", cs.getTotal());
+        jsonObject.put("data", cs.getRecords());
+        System.out.println(jsonObject.toString());
+        return jsonObject;
+    }
+
+    @RequestMapping("/page/sim_traffic_query")
+    public String simTrafficQuery(Model m, HttpSession session) {
+        initModel(m, session);
+
+        return "/page/sim_traffic_query";
+    }
+
+    // 代理转发
+    @RequestMapping("/api/proxy/sim/query")
+    @ResponseBody
+    public JSONObject proxySimQuery(
+            @RequestParam String type,
+            @RequestParam String content
+    ){
+        CloseableHttpClient httpClient = null;
+        CloseableHttpResponse response = null;
+        try {
+            Map<String, String> params = new HashMap<>();
+            params.put("username", USERNAME);
+            params.put("key", KEY);
+
+            switch(type) {
+                case "iccid":
+                    params.put("card", content);
+                    break;
+                case "deviceId":
+                    if (content.trim().isEmpty()) {
+                        throw new IllegalArgumentException("设备ID不能为空");
+                    }
+                    SimCard simCard = simCardsMapper.queryByDeviceId(content.trim());
+                    if (simCard == null) {
+                        throw new IllegalArgumentException("未找到该设备ID对应的SIM卡信息");
+                    }
+                    params.put("card", simCard.getIccid());
+                    break;
+                case "simNumber":
+                    params.put("card", content);
+                    break;
+                default:
+                    throw new IllegalArgumentException("无效的查询类型: " + type);
+            }
+
+            params.put("timestamp", String.valueOf(System.currentTimeMillis() / 1000));
+
+            String signature = calculateSignature(params);
+            if (signature == null) {
+                throw new Exception("签名计算失败");
+            }
+
+            StringBuilder urlBuilder = new StringBuilder(BASE_URL);
+            urlBuilder.append("/api/Service/QueryCard?");
+            urlBuilder.append("username=").append(USERNAME);
+            urlBuilder.append("&key=").append(KEY);
+            urlBuilder.append("&card=").append(params.get("card"));
+            urlBuilder.append("&timestamp=").append(params.get("timestamp"));
+            urlBuilder.append("&signature=").append(signature);
+
+            httpClient = HttpClients.createDefault();
+            HttpGet httpGet = new HttpGet(urlBuilder.toString());
+
+            // System.out.println("Sending request: " + urlBuilder.toString());
+            response = httpClient.execute(httpGet);
+            HttpEntity entity = response.getEntity();
+
+
+            String result = EntityUtils.toString(entity);
+            // System.out.println("Received response: " + result);
+
+            return JSONObject.parseObject(result);
+
+        } catch (Exception e) {
+            // System.out.println("Query failed: " + e.getMessage());
+            JSONObject errorResponse = new JSONObject();
+            errorResponse.put("Status", 0);
+            errorResponse.put("Message", "查询失败: " + e.getMessage());
+            return errorResponse;
+
+        } finally {
+            try {
+                if (response != null) {
+                    response.close();
+                }
+                if (httpClient != null) {
+                    httpClient.close();
+                }
+            } catch (Exception e) {
+
+            }
+        }
+    }
+
+    private String calculateSignature(Map<String, String> params) {
+        try {
+            List<String> paramList = new ArrayList<>();
+            for (Map.Entry<String, String> entry : params.entrySet()) {
+                paramList.add(entry.getKey() + "=" + entry.getValue());
+            }
+            Collections.sort(paramList);
+
+            String paramString = String.join("&", paramList);
+            MessageDigest md = MessageDigest.getInstance("MD5");
+            byte[] digest = md.digest(paramString.getBytes());
+            StringBuilder sb = new StringBuilder();
+            for (byte b : digest) {
+                sb.append(String.format("%02x", b));
+            }
+            String signature = sb.toString();
+            // System.out.println("Signature: " + signature);
+            return signature;
+
+        } catch (Exception e) {
+            //System.out.println("Signature: " + e.getMessage());
+            return null;
+        }
+    }
+
+}
+
+

sec-beidou/src/main/resources/static/api/init_super_admin.json

@@ -111,6 +111,26 @@
             }
           ]
         },
+        {
+          "title": "SIM卡管理",
+          "href": "",
+          "icon": "fa fa-signal",
+          "target": "_self",
+          "child": [
+            {
+              "title": "总览",
+              "href": "page/sim_status",
+              "icon": "fa fa-minus",
+              "target": "_self"
+            },
+            {
+              "title": "卡信息查询",
+              "href": "page/sim_traffic_query",
+              "icon": "fa fa-minus",
+              "target": "_self"
+            }
+          ]
+        },
         {
           "title": "数据推送",
           "href": "",

sec-beidou/src/main/resources/static/api/init_sys_admin.json

@@ -93,6 +93,26 @@
             }
           ]
         },
+        {
+          "title": "SIM卡管理",
+          "href": "",
+          "icon": "fa fa-signal",
+          "target": "_self",
+          "child": [
+            {
+              "title": "总览",
+              "href": "page/sim_status",
+              "icon": "fa fa-minus",
+              "target": "_self"
+            },
+            {
+              "title": "卡信息查询",
+              "href": "page/sim_traffic_query",
+              "icon": "fa fa-minus",
+              "target": "_self"
+            }
+          ]
+        },
         {
           "title": "数据推送",
           "href": "",

sec-beidou/src/main/resources/templates/page/sim_status.html

@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>SIM卡信息查询</title>
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
+    <link rel="stylesheet" href="../css/public.css" media="all">
+</head>
+<body>
+<div class="layuimini-container">
+    <div class="layuimini-main">
+        <fieldset class="table-search-fieldset">
+            <legend>搜索信息</legend>
+            <div style="margin: 10px 10px 10px 10px">
+                <form class="layui-form layui-form-pane" action="" id="searchForm">
+                    <div class="layui-form-item">
+                        <div class="layui-inline">
+                            <label class="layui-form-label">查询类型</label>
+                            <div class="layui-input-inline">
+                                <select name="searchType" lay-verify="required">
+                                    <option value="deviceId">设备号</option>
+                                    <option value="iccid">ICCID</option>
+                                    <option value="simNumber">SIM卡号</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="layui-inline">
+                            <label class="layui-form-label">搜索内容</label>
+                            <div class="layui-input-inline">
+                                <input type="text" name="searchContent" id="searchInput" autocomplete="off" class="layui-input">
+                            </div>
+                        </div>
+                        <div class="layui-inline">
+                            <label class="layui-form-label">状态</label>
+                            <div class="layui-input-inline">
+                                <select name="status">
+                                    <option value="">全部</option>
+                                    <option value="1">待激活</option>
+                                    <option value="2">已激活</option>
+                                    <option value="3">停机</option>
+                                    <option value="4">注销</option>
+                                    <option value="5">库存</option>
+                                    <option value="6">可测试</option>
+                                    <option value="7">失效</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <div class="layui-inline">
+                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="searchSubmit"><i class="layui-icon">&#xe615;</i> 搜 索</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </fieldset>
+        <div class="layui-tab layui-tab-card" lay-filter="data-tab">
+            <ul class="layui-tab-title">
+                <li class="layui-this">数据表格</li>
+                <li>流量图表</li>
+            </ul>
+            <div class="layui-tab-content">
+                <div class="layui-tab-item layui-show">
+                    <table class="layui-hide" id="simTable" lay-filter="simTableFilter"></table>
+                </div>
+                <div class="layui-tab-item">
+                    <div id="trafficChart" style="min-height:300px;padding: 10px"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="../js/lay-module/echarts/echartsTheme.js" charset="utf-8"></script>
+<script src="../js/lay-module/echarts/echarts.js" charset="utf-8"></script>
+<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
+<script type="text/html" id="statusTpl">
+    {{#  if(d.status === 1){ }}
+    <span class="layui-badge layui-bg-orange">待激活</span>
+    {{#  } else if(d.status === 2){ }}
+    <span class="layui-badge layui-bg-green">已激活</span>
+    {{#  } else if(d.status === 3){ }}
+    <span class="layui-badge layui-bg-red">停机</span>
+    {{#  } else if(d.status === 4){ }}
+    <span class="layui-badge layui-bg-black">注销</span>
+    {{#  } else if(d.status === 5){ }}
+    <span class="layui-badge layui-bg-blue">库存</span>
+    {{#  } else if(d.status === 6){ }}
+    <span class="layui-badge layui-bg-cyan">可测试</span>
+    {{#  } else if(d.status === 7){ }}
+    <span class="layui-badge">失效</span>
+    {{#  } }}
+</script>
+<script th:inline="javascript">
+
+    layui.use(['form', 'table','layer','element'], function () {
+        var table = layui.table
+            ,form = layui.form
+            ,layer = layui.layer
+            ,element = layui.element;
+
+        var flowChart;
+        function initEcharts() {
+            if (!flowChart) {
+                flowChart = echarts.init(document.getElementById('trafficChart'), 'theme');
+            }
+        }
+        function updateFlowChart(simData) {
+            initEcharts();
+
+            var used = parseFloat(simData.used) || 0;
+            var remaining = parseFloat(simData.remaining) || 0;
+            var total = parseFloat(simData.total) || (used + remaining);
+
+            var option = {
+                title: {
+                    text: 'SIM卡流量使用情况',
+                    left: 'center',
+                    top: 20,
+                    textStyle: {
+                        fontSize: 16
+                    }
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{a} <br/>{b}: {c}MB ({d}%)'
+                },
+                legend: {
+                    orient: 'horizontal',  // 改为水平布局
+                    bottom: 20,           // 放在底部
+                    left: 'center',       // 居中对齐
+                    itemWidth: 25,
+                    itemHeight: 14
+                },
+                series: [
+                    {
+                        name: '流量使用情况',
+                        type: 'pie',
+                        radius: ['40%', '60%'],  // 调整饼图大小
+                        center: ['50%', '50%'],  // 居中显示
+                        avoidLabelOverlap: false,
+                        label: {
+                            show: true,
+                            position: 'outside', // 标签位置改为外部
+                            formatter: function(params) {
+                                return params.name + '\n' +
+                                    params.value + 'MB\n' +
+                                    params.percent + '%';
+                            },
+                            fontSize: 14,
+                            lineHeight: 20
+                        },
+                        labelLine: {
+                            show: true,
+                            length: 15,
+                            length2: 10
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 16,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        data: [
+                            {
+                                value: used,
+                                name: '已使用流量',
+                                itemStyle: { color: '#FF5722' }
+                            },
+                            {
+                                value: remaining,
+                                name: '剩余流量',
+                                itemStyle: { color: '#009688' }
+                            }
+                        ]
+                    }
+                ]
+            };
+
+            document.getElementById('trafficChart').style.height = '400px';
+
+            flowChart.setOption(option);
+            flowChart.resize();  // 重新调整大小
+
+        }
+
+        var data_cols = [
+            {field: 'deviceid', title: '设备号'},
+            {field: 'iccid', title: 'ICCID'},
+            {field: 'msisdn', title: 'SIM 卡号'},
+            {field: 'updatetime', title: '更新时间'},
+            {field: 'status', title: '状态',templet: '#statusTpl'},
+            {field: 'remaining', title: '剩余流量(MB)'},
+            {field: 'used', title: '已使用流量(MB)'},
+            {field: 'total', title: '总流量(MB)'}
+
+        ];
+
+        form.render();
+        table.render({
+            elem: '#simTable',
+            url: '/sim/list',
+            toolbar: '#toolbarDemo', //开启头部工具栏
+            defaultToolbar: ['filter'],
+            cols: [
+                data_cols
+            ],
+            limits: [20, 50, 100, 200, 300],
+            limit: 20,
+            page: true,
+            skin: 'line',
+            done: function(res) {
+            if(res.code !== 0) {
+                layer.msg(res.msg || '查询失败', {icon: 2});
+            }
+        }
+        });
+
+        form.verify({
+            searchContent: function(value, item) {
+                var type = $('select[name="searchType"]').val();
+                if(!value) {
+                    return '请输入搜索内容';
+                }
+                if(type === 'iccid' && !/^\d{19,20}$/.test(value)) {
+                    return 'ICCID必须是19-20位数字';
+                }
+                if(type === 'simNumber' && !/^\d{11,13}$/.test(value)) {
+                    return 'SIM卡号必须是11-13位数字';
+                }
+            }
+        });
+
+        form.on('submit(searchSubmit)', function(data){
+            var loadIndex = layer.load(1);
+            table.reload('simTable', {
+                page: {
+                    curr: 1
+                }
+                ,where: {
+                    searchType: data.field.searchType,
+                    searchContent: data.field.searchContent,
+                    status: data.field.status
+                }
+                ,done: function(res) {
+                    layer.close(loadIndex);
+                    if(res.code !== 0) {
+                        layer.msg(res.msg || '查询失败', {icon: 2});
+                    } else if(res.count === 0) {
+                        layer.msg('未找到符合条件的数据', {icon: 0});
+                    }else if(res.count === 1) {
+                        // 当查询结果只有一条数据时，使用该数据绘制饼图
+                        updateFlowChart(res.data[0]);
+                    }
+                }
+            });
+            return false;
+        });
+        //监听Tab切换，重新resize图表，否则显示不出来
+        element.on('tab(data-tab)', function(data){
+            if(data.index === 1 && flowChart) {
+                flowChart.resize();
+            }
+        });
+
+        // 监听窗口大小变化
+        window.addEventListener('resize', function() {
+            if (flowChart) {
+                flowChart.resize();
+            }
+        });
+    });
+</script>
+</body>
+</html>

sec-beidou/src/main/resources/templates/page/sim_traffic_query.html

@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>SIM卡信息查询</title>
+  <meta name="renderer" content="webkit">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
+  <link rel="stylesheet" href="../css/public.css" media="all">
+</head>
+<body>
+<div class="layuimini-container">
+  <div class="layuimini-main">
+    <fieldset class="table-search-fieldset">
+      <legend>SIM卡相关信息聚合查询</legend>
+      <div style="margin: 10px 10px 10px 10px">
+        <form class="layui-form layui-form-pane" action="" id="searchForm">
+          <div class="layui-form-item">
+            <label class="layui-form-label">搜索类型</label>
+            <div class="layui-input-inline">
+              <select id="searchType" name="searchType" lay-search="" lay-filter="searchType">
+                <option value="iccid">ICCID</option>
+                <option value="deviceId">设备ID</option>
+                <option value="simNumber">SIM卡号</option>
+              </select>
+            </div>
+          </div>
+          <div class="layui-form-item">
+            <label class="layui-form-label">搜索内容</label>
+            <div class="layui-input-block">
+              <input type="text" id="searchInput" name="searchContent" autocomplete="off" placeholder="搜索内容" lay-verify="required" class="layui-input">
+            </div>
+          </div>
+          <div class="layui-form-item">
+            <div class="layui-inline">
+              <button type="button" class="layui-btn" onclick="searchSIM()" lay-submit lay-filter="searchSubmit"><i class="layui-icon">&#xe615;</i>搜索</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </fieldset>
+
+    <div id="resultContainer" class="result-container layui-hide">
+      <div class="layui-card">
+        <div class="layui-card-body" id="resultContent">
+
+        </div>
+      </div>
+    </div>
+
+</div>
+</div>
+<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
+<script>
+  layui.use(['form', 'layer', 'element'], function(){
+    var form = layui.form;
+    var layer = layui.layer;
+    var element = layui.element;
+
+    form.render();
+    form.on('submit(searchSubmit)', function(data){
+      searchSIM();
+      return false;
+    });
+  });
+
+  function searchSIM() {
+    const searchInput = document.getElementById('searchInput');
+    const searchContent = searchInput.value.trim();
+    const searchType = document.querySelector('select[name="searchType"]').value;
+
+    if (!searchContent) {
+      layer.msg('请输入搜索内容');
+      return;
+    }
+
+    if (searchType === 'iccid' && !/^\d{19,20}$/.test(searchContent)) {
+      layer.msg('ICCID必须是19-20位数字');
+      return;
+    }
+
+    if (searchType === 'simNumber' && !/^\d{11,13}$/.test(searchContent)) {
+      layer.msg('SIM卡号必须是11-13位数字');
+      return;
+    }
+    const loadingIndex = layer.load(1, {
+      shade: [0.1, '#fff']
+    });
+
+    fetch(`/api/proxy/sim/query?type=${searchType}&content=${searchContent}`)
+            .then(response => {
+              if (!response.ok) {
+                throw new Error('Network response was not ok');
+              }
+              return response.json();
+            })
+            .then(result => {
+              layer.close(loadingIndex);
+              console.log('API Response:', result);
+
+              if (result.Status === 1 && result.Data) {
+                displayResult(result.Data);
+              } else {
+                layer.msg(result.Message || '查询失败');
+              }
+            })
+            .catch(error => {
+              layer.close(loadingIndex);
+              console.error('Error:', error);
+              layer.msg('请求处理失败：' + error.message);
+            });
+  }
+
+  function displayResult(data) {
+    const resultContainer = document.getElementById('resultContainer');
+    const resultContent = document.getElementById('resultContent');
+
+    if (!resultContainer || !resultContent) {
+      console.error('Result container elements not found');
+      return;
+    }
+
+    resultContainer.classList.remove('layui-hide');
+
+    // 格式化状态和其他信息
+    const statusText = getStatusText(data.status);
+    const statusClass = getStatusClass(data.status);
+    const operatorText = getOperatorText(data.operatortype);
+
+    // 格式化流量数据
+    const gprsInfo = {
+      total: parseFloat(data.gprs?.total) || 0,
+      used: parseFloat(data.gprs?.used) || 0,
+      left: parseFloat(data.gprs?.left) || 0
+    };
+
+    const usagePercentage = calculateUsagePercentage(gprsInfo);
+
+    resultContent.innerHTML = `
+        <table class="layui-table">
+            <tbody>
+                <tr>
+                    <td width="120">运营商</td>
+                    <td>${operatorText}</td>
+                </tr>
+                <tr>
+                    <td>ICCID</td>
+                    <td>${data.iccid || '-'}</td>
+                </tr>
+                <tr>
+                    <td>SIM卡号</td>
+                    <td>${data.msisdn || '-'}</td>
+                </tr>
+                <tr>
+                    <td>IMSI</td>
+                    <td>${data.imsi || '-'}</td>
+                </tr>
+                <tr>
+                    <td>套餐信息</td>
+                    <td>
+                        ID: ${data.packageid || '-'}<br>
+                        名称: ${data.packagename || '-'}
+                    </td>
+                </tr>
+                <tr>
+                    <td>时间信息</td>
+                    <td>
+                        激活时间: ${data.activetime || '-'}<br>
+                        有效期: ${data.starttime || '-'} 至 ${data.stoptime || '-'}<br>
+                        沉默期结束: ${data.silentdate || '-'}
+                    </td>
+                </tr>
+                <tr>
+                    <td>状态</td>
+                    <td><span class="layui-badge ${statusClass}">${statusText}</span></td>
+                </tr>
+                <tr>
+                    <td>APN信息</td>
+                    <td>
+                        ${data.apn ? `
+                            <div>ID: ${data.apn.apnid || '-'}</div>
+                            <div>状态: ${data.apn.status === '01' ?
+            '<span class="layui-badge layui-bg-green">在线</span>' :
+            '<span class="layui-badge layui-bg-gray">离线</span>'}</div>
+                            <div>IP: ${data.apn.ip || '-'}</div>
+                            <div>网络: ${getNetworkText(data.apn.rat)}</div>
+                            <div>设备状态: ${data.apn.onoffstatus === '1' ?
+            '<span class="layui-badge layui-bg-green">开机</span>' :
+            '<span class="layui-badge layui-bg-gray">关机</span>'}</div>
+                        ` : '-'}
+                    </td>
+                </tr>
+                <tr>
+                <td>GPRS流量</td>
+                <td>
+                    <div class="layui-row">
+                        <div class="layui-col-md4">总流量: ${formatFlowSize(gprsInfo.total)} MB</div>
+                        <div class="layui-col-md4">已用: ${formatFlowSize(gprsInfo.used)} MB</div>
+                        <div class="layui-col-md4">剩余: ${formatFlowSize(gprsInfo.left)} MB</div>
+                    </div>
+                    <div class="layui-progress layui-progress-big"  style="margin-top: 10px;">
+                        <div class="layui-progress-bar ${getProgressBarColor(gprsInfo)}"
+                             style="width: ${usagePercentage}%">
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    `;
+
+    // 重新渲染进度条
+    layui.element.render('progress');
+  }
+
+  function getStatusText(status) {
+    const statusMap = {
+      1: '待激活',
+      2: '已激活',
+      3: '停机',
+      4: '注销',
+      5: '库存',
+      6: '可测试',
+      7: '失效'
+    };
+    return statusMap[status] || '未知状态';
+  }
+  function getOperatorText(type) {
+    const operatorMap = {
+      1: '中国移动',
+      2: '中国联通',
+      3: '中国电信'
+    };
+    return operatorMap[type] || '未知运营商';
+  }
+  function getNetworkText(rat) {
+    const networkMap = {
+      '1': '3G',
+      '2': '2G',
+      '6': '4G',
+      '8': 'NB'
+    };
+    return networkMap[rat] || '未知网络';
+  }
+  function getStatusClass(status) {
+    const classMap = {
+      1: 'layui-bg-orange',  // 待激活
+      2: 'layui-bg-green',   // 已激活
+      3: 'layui-bg-red',     // 停机
+      4: 'layui-bg-gray',    // 注销
+      5: 'layui-bg-blue',    // 库存
+      6: 'layui-bg-cyan',    // 可测试
+      7: 'layui-bg-black'    // 失效
+    };
+    return classMap[status] || 'layui-bg-gray';
+  }
+
+  function getProgressBarColor(gprsInfo) {
+    const percentage = calculateUsagePercentage(gprsInfo);
+    if (percentage >= 90) return 'layui-bg-red';
+    if (percentage >= 70) return 'layui-bg-orange';
+    return 'layui-bg-green';
+  }
+
+  function calculateUsagePercentage(gprsInfo) {
+    // 确保所有值都是数字，并且total不为0
+    const total = parseFloat(gprsInfo.total) || 0;
+    const used = parseFloat(gprsInfo.used) || 0;
+
+    if (total <= 0) return 0;
+
+    const percentage = (used / total) * 100;
+    return Math.min(100, Math.round(percentage));
+  }
+  function formatFlowSize(size) {
+    if (typeof size !== 'number' || isNaN(size)) return '0.00';
+    return size.toFixed(2);
+  }
+
+  // 按回车键触发查询
+  document.getElementById('searchInput').addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      searchSIM();
+    }
+  });
+</script>
+</body>
+</html>