feat: 增强 SIM 流量卡管理前端页面
This commit is contained in:
fengyarnom
parent
3ea86962a0
commit
59143eec4a
@ -34,7 +34,16 @@ public class SimCardController extends BasicController {
|
|||||||
private String KEY;
|
private String KEY;
|
||||||
|
|
||||||
@Autowired
|
@Autowired
|
||||||
private SimCardsMapper simCardsMapper;
|
private GnssDeviceMapper gnssDeviceMapper;
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private TrafficCardMapper trafficCardMapper;
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private TrafficDeviceMappingMapper trafficDeviceMappingMapper;
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private TrafficRecordMapper trafficRecordMapper;
|
||||||
|
|
||||||
@RequestMapping("/page/sim_status")
|
@RequestMapping("/page/sim_status")
|
||||||
public String simStatus(Model m, HttpSession session) {
|
public String simStatus(Model m, HttpSession session) {
|
||||||
@ -43,6 +52,20 @@ public class SimCardController extends BasicController {
|
|||||||
return "/page/sim_status";
|
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")
|
@RequestMapping("/sim/list")
|
||||||
@ResponseBody
|
@ResponseBody
|
||||||
public JSONObject list(HttpSession session,
|
public JSONObject list(HttpSession session,
|
||||||
@ -51,37 +74,98 @@ public class SimCardController extends BasicController {
|
|||||||
String searchType,
|
String searchType,
|
||||||
String searchContent,
|
String searchContent,
|
||||||
Integer status) {
|
Integer status) {
|
||||||
Page<SimCard> pageable = new Page<>(page, limit);
|
|
||||||
|
|
||||||
QueryWrapper<SimCard> queryWrapper = new QueryWrapper<>();
|
|
||||||
|
|
||||||
|
QueryWrapper<GnssDevice> deviceQueryWrapper = new QueryWrapper<>();
|
||||||
|
|
||||||
if (!StringUtils.isEmpty(searchContent)) {
|
if (!StringUtils.isEmpty(searchContent)) {
|
||||||
switch(searchType) {
|
switch(searchType) {
|
||||||
case "deviceId":
|
case "deviceId":
|
||||||
queryWrapper.like("deviceid", searchContent.trim());
|
deviceQueryWrapper.like("deviceid", searchContent.trim());
|
||||||
break;
|
break;
|
||||||
case "iccid":
|
case "iccid":
|
||||||
queryWrapper.like("iccid", searchContent.trim());
|
deviceQueryWrapper.like("iccid", searchContent.trim());
|
||||||
break;
|
break;
|
||||||
case "simNumber":
|
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;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (status != null) {
|
|
||||||
queryWrapper.eq("status", status);
|
|
||||||
}
|
|
||||||
|
|
||||||
queryWrapper.orderByDesc("updatetime");
|
// 只查询有ICCID的设备
|
||||||
IPage<SimCard> cs = simCardsMapper.selectPage(pageable, queryWrapper);
|
deviceQueryWrapper.isNotNull("iccid");
|
||||||
|
deviceQueryWrapper.ne("iccid", "");
|
||||||
|
|
||||||
|
if (status != null) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 jsonObject = new JSONObject();
|
||||||
jsonObject.put("code", 0);
|
jsonObject.put("code", 0);
|
||||||
jsonObject.put("msg", "");
|
jsonObject.put("msg", "");
|
||||||
jsonObject.put("count", cs.getTotal());
|
jsonObject.put("count", devices.getTotal());
|
||||||
jsonObject.put("data", cs.getRecords());
|
jsonObject.put("data", enrichedData);
|
||||||
System.out.println(jsonObject.toString());
|
|
||||||
return jsonObject;
|
return jsonObject;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -114,11 +198,11 @@ public class SimCardController extends BasicController {
|
|||||||
if (content.trim().isEmpty()) {
|
if (content.trim().isEmpty()) {
|
||||||
throw new IllegalArgumentException("设备ID不能为空");
|
throw new IllegalArgumentException("设备ID不能为空");
|
||||||
}
|
}
|
||||||
SimCard simCard = simCardsMapper.queryByDeviceId(content.trim());
|
GnssDevice device = gnssDeviceMapper.queryByDeviceId(content.trim());
|
||||||
if (simCard == null) {
|
if (device == null || device.getIccid() == null || device.getIccid().trim().isEmpty()) {
|
||||||
throw new IllegalArgumentException("未找到该设备ID对应的SIM卡信息");
|
throw new IllegalArgumentException("未找到该设备ID或设备没有ICCID信息");
|
||||||
}
|
}
|
||||||
params.put("card", simCard.getIccid());
|
params.put("card", device.getIccid());
|
||||||
break;
|
break;
|
||||||
case "simNumber":
|
case "simNumber":
|
||||||
params.put("card", content);
|
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) {
|
private String calculateSignature(Map<String, String> params) {
|
||||||
try {
|
try {
|
||||||
List<String> paramList = new ArrayList<>();
|
List<String> paramList = new ArrayList<>();
|
||||||
|
|||||||
@ -130,7 +130,19 @@
|
|||||||
"target": "_self"
|
"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",
|
"href": "page/sim_traffic_query",
|
||||||
"icon": "fa fa-minus",
|
"icon": "fa fa-minus",
|
||||||
"target": "_self"
|
"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) {
|
function updateFlowChart(simData) {
|
||||||
initEcharts();
|
initEcharts();
|
||||||
|
|
||||||
var used = parseFloat(simData.used) || 0;
|
var used = simData.used ? (simData.used / 1000) : 0;
|
||||||
var remaining = parseFloat(simData.remaining) || 0;
|
var remaining = simData.remaining ? (simData.remaining / 1000) : 0;
|
||||||
var total = parseFloat(simData.total) || (used + remaining);
|
var total = simData.total ? (simData.total / 1000) : (used + remaining);
|
||||||
|
|
||||||
var option = {
|
var option = {
|
||||||
title: {
|
title: {
|
||||||
@ -191,11 +191,17 @@
|
|||||||
{field: 'deviceid', title: '设备号'},
|
{field: 'deviceid', title: '设备号'},
|
||||||
{field: 'iccid', title: 'ICCID'},
|
{field: 'iccid', title: 'ICCID'},
|
||||||
{field: 'msisdn', title: 'SIM 卡号'},
|
{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: 'status', title: '状态',templet: '#statusTpl'},
|
||||||
{field: 'remaining', title: '剩余流量(MB)'},
|
{field: 'remaining', title: '剩余流量(MB)', templet: function(d) {
|
||||||
{field: 'used', title: '已使用流量(MB)'},
|
return d.remaining ? (d.remaining / 1000).toFixed(2) : '0';
|
||||||
{field: 'total', title: '总流量(MB)'}
|
}},
|
||||||
|
{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