feat: 增强 SIM 流量卡管理前端页面
This commit is contained in:
fengyarnom
parent
3ea86962a0
commit
59143eec4a
@ -34,7 +34,16 @@ public class SimCardController extends BasicController {
|
||||
private String KEY;
|
||||
|
||||
@Autowired
|
||||
private SimCardsMapper simCardsMapper;
|
||||
private GnssDeviceMapper gnssDeviceMapper;
|
||||
|
||||
@Autowired
|
||||
private TrafficCardMapper trafficCardMapper;
|
||||
|
||||
@Autowired
|
||||
private TrafficDeviceMappingMapper trafficDeviceMappingMapper;
|
||||
|
||||
@Autowired
|
||||
private TrafficRecordMapper trafficRecordMapper;
|
||||
|
||||
@RequestMapping("/page/sim_status")
|
||||
public String simStatus(Model m, HttpSession session) {
|
||||
@ -43,6 +52,20 @@ public class SimCardController extends BasicController {
|
||||
return "/page/sim_status";
|
||||
}
|
||||
|
||||
@RequestMapping("/page/sim_traffic_records")
|
||||
public String simTrafficRecords(Model m, HttpSession session) {
|
||||
initModel(m, session);
|
||||
|
||||
return "/page/sim_traffic_records";
|
||||
}
|
||||
|
||||
@RequestMapping("/page/sim_device_mapping")
|
||||
public String simDeviceMapping(Model m, HttpSession session) {
|
||||
initModel(m, session);
|
||||
|
||||
return "/page/sim_device_mapping";
|
||||
}
|
||||
|
||||
@RequestMapping("/sim/list")
|
||||
@ResponseBody
|
||||
public JSONObject list(HttpSession session,
|
||||
@ -51,37 +74,98 @@ public class SimCardController extends BasicController {
|
||||
String searchType,
|
||||
String searchContent,
|
||||
Integer status) {
|
||||
Page<SimCard> pageable = new Page<>(page, limit);
|
||||
|
||||
QueryWrapper<SimCard> queryWrapper = new QueryWrapper<>();
|
||||
|
||||
QueryWrapper<GnssDevice> deviceQueryWrapper = new QueryWrapper<>();
|
||||
|
||||
if (!StringUtils.isEmpty(searchContent)) {
|
||||
switch(searchType) {
|
||||
case "deviceId":
|
||||
queryWrapper.like("deviceid", searchContent.trim());
|
||||
deviceQueryWrapper.like("deviceid", searchContent.trim());
|
||||
break;
|
||||
case "iccid":
|
||||
queryWrapper.like("iccid", searchContent.trim());
|
||||
deviceQueryWrapper.like("iccid", searchContent.trim());
|
||||
break;
|
||||
case "simNumber":
|
||||
queryWrapper.like("msisdn", searchContent.trim());
|
||||
// 通过SIM号查找对应的ICCID，然后查询设备
|
||||
TrafficCard cardByMsisdn = trafficCardMapper.selectOne(
|
||||
new QueryWrapper<TrafficCard>().like("msisdn", searchContent.trim())
|
||||
);
|
||||
if (cardByMsisdn != null) {
|
||||
deviceQueryWrapper.eq("iccid", cardByMsisdn.getIccid());
|
||||
} else {
|
||||
deviceQueryWrapper.eq("iccid", "");
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 只查询有ICCID的设备
|
||||
deviceQueryWrapper.isNotNull("iccid");
|
||||
deviceQueryWrapper.ne("iccid", "");
|
||||
|
||||
if (status != null) {
|
||||
queryWrapper.eq("status", status);
|
||||
List<TrafficCard> cardsWithStatus = trafficCardMapper.selectList(
|
||||
new QueryWrapper<TrafficCard>().eq("status", status)
|
||||
);
|
||||
if (cardsWithStatus.isEmpty()) {
|
||||
JSONObject jsonObject = new JSONObject();
|
||||
jsonObject.put("code", 0);
|
||||
jsonObject.put("msg", "");
|
||||
jsonObject.put("count", 0);
|
||||
jsonObject.put("data", new ArrayList<>());
|
||||
return jsonObject;
|
||||
}
|
||||
|
||||
List<String> iccids = new ArrayList<>();
|
||||
for (TrafficCard card : cardsWithStatus) {
|
||||
iccids.add(card.getIccid());
|
||||
}
|
||||
deviceQueryWrapper.in("iccid", iccids);
|
||||
}
|
||||
|
||||
queryWrapper.orderByDesc("updatetime");
|
||||
IPage<SimCard> cs = simCardsMapper.selectPage(pageable, queryWrapper);
|
||||
deviceQueryWrapper.orderByDesc("deviceid");
|
||||
|
||||
Page<GnssDevice> pageable = new Page<>(page, limit);
|
||||
IPage<GnssDevice> devices = gnssDeviceMapper.selectPage(pageable, deviceQueryWrapper);
|
||||
|
||||
List<Map<String, Object>> enrichedData = new ArrayList<>();
|
||||
for (GnssDevice device : devices.getRecords()) {
|
||||
TrafficCard trafficCard = null;
|
||||
if (device.getIccid() != null && !device.getIccid().trim().isEmpty()) {
|
||||
trafficCard = trafficCardMapper.findByIccid(device.getIccid());
|
||||
}
|
||||
|
||||
Map<String, Object> deviceData = new HashMap<>();
|
||||
deviceData.put("id", device.getId());
|
||||
deviceData.put("deviceid", device.getDeviceid());
|
||||
deviceData.put("iccid", device.getIccid());
|
||||
|
||||
if (trafficCard != null) {
|
||||
deviceData.put("msisdn", trafficCard.getMsisdn());
|
||||
deviceData.put("status", trafficCard.getStatus());
|
||||
deviceData.put("remaining", trafficCard.getRemaining());
|
||||
deviceData.put("total", trafficCard.getTotal());
|
||||
deviceData.put("used", trafficCard.getUsed());
|
||||
deviceData.put("updateTime", trafficCard.getUpdateTime());
|
||||
deviceData.put("queryStatus", trafficCard.getQueryStatus());
|
||||
} else {
|
||||
deviceData.put("msisdn", "-");
|
||||
deviceData.put("status", TrafficCard.STATUS_UNKNOWN);
|
||||
deviceData.put("remaining", 0);
|
||||
deviceData.put("total", 0);
|
||||
deviceData.put("used", 0);
|
||||
deviceData.put("updateTime", null);
|
||||
deviceData.put("queryStatus", TrafficCard.QUERY_STATUS_NORMAL);
|
||||
}
|
||||
|
||||
enrichedData.add(deviceData);
|
||||
}
|
||||
|
||||
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());
|
||||
jsonObject.put("count", devices.getTotal());
|
||||
jsonObject.put("data", enrichedData);
|
||||
return jsonObject;
|
||||
}
|
||||
|
||||
@ -114,11 +198,11 @@ public class SimCardController extends BasicController {
|
||||
if (content.trim().isEmpty()) {
|
||||
throw new IllegalArgumentException("设备ID不能为空");
|
||||
}
|
||||
SimCard simCard = simCardsMapper.queryByDeviceId(content.trim());
|
||||
if (simCard == null) {
|
||||
throw new IllegalArgumentException("未找到该设备ID对应的SIM卡信息");
|
||||
GnssDevice device = gnssDeviceMapper.queryByDeviceId(content.trim());
|
||||
if (device == null || device.getIccid() == null || device.getIccid().trim().isEmpty()) {
|
||||
throw new IllegalArgumentException("未找到该设备ID或设备没有ICCID信息");
|
||||
}
|
||||
params.put("card", simCard.getIccid());
|
||||
params.put("card", device.getIccid());
|
||||
break;
|
||||
case "simNumber":
|
||||
params.put("card", content);
|
||||
@ -176,6 +260,166 @@ public class SimCardController extends BasicController {
|
||||
}
|
||||
}
|
||||
|
||||
@RequestMapping("/sim/traffic-records")
|
||||
@ResponseBody
|
||||
public JSONObject getTrafficRecords(HttpSession session,
|
||||
int page,
|
||||
int limit,
|
||||
String searchType,
|
||||
String searchContent) {
|
||||
try {
|
||||
Page<TrafficRecord> pageable = new Page<>(page, limit);
|
||||
QueryWrapper<TrafficRecord> queryWrapper = new QueryWrapper<>();
|
||||
|
||||
if (!StringUtils.isEmpty(searchContent)) {
|
||||
switch(searchType) {
|
||||
case "deviceId":
|
||||
GnssDevice device = gnssDeviceMapper.queryByDeviceId(searchContent.trim());
|
||||
if (device != null && device.getIccid() != null && !device.getIccid().trim().isEmpty()) {
|
||||
queryWrapper.eq("iccid", device.getIccid());
|
||||
} else {
|
||||
queryWrapper.eq("iccid", "");
|
||||
}
|
||||
break;
|
||||
case "iccid":
|
||||
queryWrapper.like("iccid", searchContent.trim());
|
||||
break;
|
||||
case "simNumber":
|
||||
TrafficCard cardByMsisdn = trafficCardMapper.selectOne(
|
||||
new QueryWrapper<TrafficCard>().like("msisdn", searchContent.trim())
|
||||
);
|
||||
if (cardByMsisdn != null) {
|
||||
queryWrapper.eq("iccid", cardByMsisdn.getIccid());
|
||||
} else {
|
||||
queryWrapper.eq("iccid", "");
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
queryWrapper.orderByDesc("record_time");
|
||||
IPage<TrafficRecord> records = trafficRecordMapper.selectPage(pageable, queryWrapper);
|
||||
|
||||
List<Map<String, Object>> enrichedData = new ArrayList<>();
|
||||
for (TrafficRecord record : records.getRecords()) {
|
||||
Map<String, Object> recordData = new HashMap<>();
|
||||
recordData.put("id", record.getId());
|
||||
recordData.put("iccid", record.getIccid());
|
||||
recordData.put("recordTime", record.getRecordTime());
|
||||
recordData.put("remaining", record.getRemaining());
|
||||
recordData.put("total", record.getTotal());
|
||||
recordData.put("used", record.getUsed());
|
||||
|
||||
GnssDevice device = gnssDeviceMapper.selectOne(
|
||||
new QueryWrapper<GnssDevice>().eq("iccid", record.getIccid())
|
||||
);
|
||||
if (device != null) {
|
||||
recordData.put("deviceid", device.getDeviceid());
|
||||
} else {
|
||||
recordData.put("deviceid", "无绑定设备");
|
||||
}
|
||||
|
||||
TrafficCard trafficCard = trafficCardMapper.findByIccid(record.getIccid());
|
||||
if (trafficCard != null) {
|
||||
recordData.put("msisdn", trafficCard.getMsisdn());
|
||||
} else {
|
||||
recordData.put("msisdn", "-");
|
||||
}
|
||||
|
||||
enrichedData.add(recordData);
|
||||
}
|
||||
|
||||
JSONObject jsonObject = new JSONObject();
|
||||
jsonObject.put("code", 0);
|
||||
jsonObject.put("msg", "");
|
||||
jsonObject.put("count", records.getTotal());
|
||||
jsonObject.put("data", enrichedData);
|
||||
return jsonObject;
|
||||
|
||||
} catch (Exception e) {
|
||||
JSONObject errorResponse = new JSONObject();
|
||||
errorResponse.put("code", 1);
|
||||
errorResponse.put("msg", "查询失败: " + e.getMessage());
|
||||
errorResponse.put("count", 0);
|
||||
errorResponse.put("data", new ArrayList<>());
|
||||
return errorResponse;
|
||||
}
|
||||
}
|
||||
|
||||
@RequestMapping("/sim/device-mapping")
|
||||
@ResponseBody
|
||||
public JSONObject getDeviceMapping(HttpSession session,
|
||||
int page,
|
||||
int limit,
|
||||
String searchType,
|
||||
String searchContent) {
|
||||
try {
|
||||
Page<TrafficDeviceMapping> pageable = new Page<>(page, limit);
|
||||
QueryWrapper<TrafficDeviceMapping> 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":
|
||||
TrafficCard cardByMsisdn = trafficCardMapper.selectOne(
|
||||
new QueryWrapper<TrafficCard>().like("msisdn", searchContent.trim())
|
||||
);
|
||||
if (cardByMsisdn != null) {
|
||||
queryWrapper.eq("iccid", cardByMsisdn.getIccid());
|
||||
} else {
|
||||
queryWrapper.eq("iccid", "");
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
queryWrapper.orderByDesc("start_time");
|
||||
IPage<TrafficDeviceMapping> mappings = trafficDeviceMappingMapper.selectPage(pageable, queryWrapper);
|
||||
|
||||
List<Map<String, Object>> enrichedData = new ArrayList<>();
|
||||
for (TrafficDeviceMapping mapping : mappings.getRecords()) {
|
||||
Map<String, Object> mappingData = new HashMap<>();
|
||||
mappingData.put("id", mapping.getId());
|
||||
mappingData.put("deviceId", mapping.getDeviceid());
|
||||
mappingData.put("iccid", mapping.getIccid());
|
||||
mappingData.put("startTime", mapping.getStartTime());
|
||||
mappingData.put("endTime", mapping.getEndTime());
|
||||
|
||||
mappingData.put("isActive", mapping.getEndTime() == null);
|
||||
|
||||
// 查找对应的流量卡信息
|
||||
TrafficCard trafficCard = trafficCardMapper.findByIccid(mapping.getIccid());
|
||||
if (trafficCard != null) {
|
||||
mappingData.put("msisdn", trafficCard.getMsisdn());
|
||||
} else {
|
||||
mappingData.put("msisdn", "-");
|
||||
}
|
||||
|
||||
enrichedData.add(mappingData);
|
||||
}
|
||||
|
||||
JSONObject jsonObject = new JSONObject();
|
||||
jsonObject.put("code", 0);
|
||||
jsonObject.put("msg", "");
|
||||
jsonObject.put("count", mappings.getTotal());
|
||||
jsonObject.put("data", enrichedData);
|
||||
return jsonObject;
|
||||
|
||||
} catch (Exception e) {
|
||||
JSONObject errorResponse = new JSONObject();
|
||||
errorResponse.put("code", 1);
|
||||
errorResponse.put("msg", "查询失败: " + e.getMessage());
|
||||
errorResponse.put("count", 0);
|
||||
errorResponse.put("data", new ArrayList<>());
|
||||
return errorResponse;
|
||||
}
|
||||
}
|
||||
|
||||
private String calculateSignature(Map<String, String> params) {
|
||||
try {
|
||||
List<String> paramList = new ArrayList<>();
|
||||
|
||||
@ -130,7 +130,19 @@
|
||||
"target": "_self"
|
||||
},
|
||||
{
|
||||
"title": "卡信息查询",
|
||||
"title": "流量使用记录",
|
||||
"href": "page/sim_traffic_records",
|
||||
"icon": "fa fa-minus",
|
||||
"target": "_self"
|
||||
},
|
||||
{
|
||||
"title": "设备映射记录",
|
||||
"href": "page/sim_device_mapping",
|
||||
"icon": "fa fa-minus",
|
||||
"target": "_self"
|
||||
},
|
||||
{
|
||||
"title": "卡信息聚合查询",
|
||||
"href": "page/sim_traffic_query",
|
||||
"icon": "fa fa-minus",
|
||||
"target": "_self"
|
||||
|
||||
@ -0,0 +1,164 @@
|
||||
<!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>
|
||||
<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"></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>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<table class="layui-hide" id="deviceMappingTable" lay-filter="deviceMappingFilter"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="statusTpl">
|
||||
{{# if(d.isActive){ }}
|
||||
<span class="layui-badge layui-bg-green">使用中</span>
|
||||
{{# } else { }}
|
||||
<span class="layui-badge">已结束</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></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 data_cols = [
|
||||
{field: 'deviceId', title: '设备号'},
|
||||
{field: 'iccid', title: 'ICCID'},
|
||||
{field: 'msisdn', title: 'SIM卡号'},
|
||||
{field: 'startTime', title: '开始时间', templet: "<div>{{layui.util.toDateString(d.startTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
|
||||
{field: 'endTime', title: '结束时间', templet: function(d) {
|
||||
return d.endTime ? layui.util.toDateString(d.endTime, 'yyyy-MM-dd HH:mm:ss') : '-';
|
||||
}},
|
||||
{field: 'isActive', title: '状态', templet: '#statusTpl'},
|
||||
{field: 'duration', title: '使用时长', templet: function(d) {
|
||||
if (!d.startTime) return '-';
|
||||
|
||||
var start = new Date(d.startTime);
|
||||
var end = d.endTime ? new Date(d.endTime) : new Date();
|
||||
var diffMs = end - start;
|
||||
|
||||
if (diffMs < 0) return '-';
|
||||
|
||||
var days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
|
||||
if (days > 0) {
|
||||
return days + '天' + hours + '小时';
|
||||
} else if (hours > 0) {
|
||||
return hours + '小时';
|
||||
} else {
|
||||
var minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
|
||||
return minutes + '分钟';
|
||||
}
|
||||
}}
|
||||
];
|
||||
|
||||
form.render();
|
||||
table.render({
|
||||
elem: '#deviceMappingTable',
|
||||
url: '/sim/device-mapping',
|
||||
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('deviceMappingTable', {
|
||||
page: {
|
||||
curr: 1
|
||||
}
|
||||
,where: {
|
||||
searchType: data.field.searchType,
|
||||
searchContent: data.field.searchContent
|
||||
}
|
||||
,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});
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -110,9 +110,9 @@
|
||||
function updateFlowChart(simData) {
|
||||
initEcharts();
|
||||
|
||||
var used = parseFloat(simData.used) || 0;
|
||||
var remaining = parseFloat(simData.remaining) || 0;
|
||||
var total = parseFloat(simData.total) || (used + remaining);
|
||||
var used = simData.used ? (simData.used / 1000) : 0;
|
||||
var remaining = simData.remaining ? (simData.remaining / 1000) : 0;
|
||||
var total = simData.total ? (simData.total / 1000) : (used + remaining);
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
@ -191,11 +191,17 @@
|
||||
{field: 'deviceid', title: '设备号'},
|
||||
{field: 'iccid', title: 'ICCID'},
|
||||
{field: 'msisdn', title: 'SIM 卡号'},
|
||||
{field: 'updatetime', title: '更新时间',templet: "<div>{{layui.util.toDateString(d.updatetime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
|
||||
{field: 'updateTime', title: '更新时间',templet: "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
|
||||
{field: 'status', title: '状态',templet: '#statusTpl'},
|
||||
{field: 'remaining', title: '剩余流量(MB)'},
|
||||
{field: 'used', title: '已使用流量(MB)'},
|
||||
{field: 'total', title: '总流量(MB)'}
|
||||
{field: 'remaining', title: '剩余流量(MB)', templet: function(d) {
|
||||
return d.remaining ? (d.remaining / 1000).toFixed(2) : '0';
|
||||
}},
|
||||
{field: 'used', title: '已使用流量(MB)', templet: function(d) {
|
||||
return d.used ? (d.used / 1000).toFixed(2) : '0';
|
||||
}},
|
||||
{field: 'total', title: '总流量(MB)', templet: function(d) {
|
||||
return d.total ? (d.total / 1000).toFixed(2) : '0';
|
||||
}}
|
||||
|
||||
];
|
||||
|
||||
|
||||
@ -0,0 +1,140 @@
|
||||
<!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>
|
||||
<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"></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>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<table class="layui-hide" id="trafficRecordsTable" lay-filter="trafficRecordsFilter"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></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 data_cols = [
|
||||
{field: 'deviceid', title: '设备号'},
|
||||
{field: 'iccid', title: 'ICCID'},
|
||||
{field: 'msisdn', title: 'SIM卡号'},
|
||||
{field: 'recordTime', title: '记录时间', templet: "<div>{{layui.util.toDateString(d.recordTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
|
||||
{field: 'remaining', title: '剩余流量(MB)', templet: function(d) {
|
||||
return d.remaining ? (d.remaining / 1000).toFixed(2) : '0';
|
||||
}},
|
||||
{field: 'used', title: '已使用流量(MB)', templet: function(d) {
|
||||
return d.used ? (d.used / 1000).toFixed(2) : '0';
|
||||
}},
|
||||
{field: 'total', title: '总流量(MB)', templet: function(d) {
|
||||
return d.total ? (d.total / 1000).toFixed(2) : '0';
|
||||
}}
|
||||
];
|
||||
|
||||
form.render();
|
||||
table.render({
|
||||
elem: '#trafficRecordsTable',
|
||||
url: '/sim/traffic-records',
|
||||
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('trafficRecordsTable', {
|
||||
page: {
|
||||
curr: 1
|
||||
}
|
||||
,where: {
|
||||
searchType: data.field.searchType,
|
||||
searchContent: data.field.searchContent
|
||||
}
|
||||
,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});
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user