Compare commits
No commits in common. "d388b848e5374c0ab64a6839d375c0cb166fb4f5" and "9f6cd91639424dcf36ffdd1ad0adcfa88cb45c6b" have entirely different histories.
d388b848e5
...
9f6cd91639
@ -26,6 +26,4 @@ public class DeviceCmd {
|
||||
String name;
|
||||
Short type;
|
||||
String content;
|
||||
Integer sort;
|
||||
|
||||
}
|
||||
|
||||
@ -183,7 +183,7 @@ public class CmdLineController extends BasicController{
|
||||
public JSONObject listCmd(int page, int limit) {
|
||||
Page<DeviceCmd> pageable = new Page<>(page, limit);
|
||||
QueryWrapper<DeviceCmd> queryWrapper = new QueryWrapper<>();
|
||||
queryWrapper.orderByAsc("sort");
|
||||
queryWrapper.orderByDesc("id");
|
||||
IPage<DeviceCmd> cs = deviceCmdMapper.selectPage(pageable, queryWrapper);
|
||||
|
||||
JSONObject jsonObject = new JSONObject();
|
||||
@ -208,19 +208,10 @@ public class CmdLineController extends BasicController{
|
||||
return jsonObject;
|
||||
}
|
||||
|
||||
private int getMaxSort() {
|
||||
QueryWrapper<DeviceCmd> queryWrapper = new QueryWrapper<>();
|
||||
queryWrapper.orderByDesc("sort");
|
||||
queryWrapper.last("limit 1");
|
||||
DeviceCmd maxSortCmd = deviceCmdMapper.selectOne(queryWrapper);
|
||||
return maxSortCmd != null ? maxSortCmd.getSort() : 0;
|
||||
}
|
||||
|
||||
@PostMapping("/gnss/cmd/add")
|
||||
@ResponseBody
|
||||
public String addCmd(@RequestBody JSONObject object) throws Exception {
|
||||
DeviceCmd deviceCmd = JSONObject.toJavaObject(object,DeviceCmd.class);
|
||||
deviceCmd.setSort(getMaxSort() + 1);
|
||||
int num = deviceCmdMapper.insert(deviceCmd);
|
||||
|
||||
if (num == 0) {
|
||||
@ -238,7 +229,6 @@ public class CmdLineController extends BasicController{
|
||||
return HttpResult.failed();
|
||||
} else return HttpResult.ok();
|
||||
}
|
||||
|
||||
@PostMapping("/gnss/cmd/go_top")
|
||||
@ResponseBody
|
||||
public String topCmd(@RequestParam int id) throws Exception {
|
||||
@ -246,75 +236,14 @@ public class CmdLineController extends BasicController{
|
||||
if(cmd == null) return HttpResult.failed();
|
||||
|
||||
QueryWrapper<DeviceCmd> queryWrapper = new QueryWrapper<>();
|
||||
queryWrapper.orderByAsc("sort");
|
||||
queryWrapper.orderByDesc("id");
|
||||
queryWrapper.last("limit 1");
|
||||
DeviceCmd minSortCmd = deviceCmdMapper.selectOne(queryWrapper);
|
||||
|
||||
if(minSortCmd != null && !minSortCmd.getId().equals(cmd.getId())) {
|
||||
cmd.setSort(minSortCmd.getSort() - 1);
|
||||
deviceCmdMapper.updateById(cmd);
|
||||
DeviceCmd cmdMaxId = deviceCmdMapper.selectOne(queryWrapper);
|
||||
if(!cmdMaxId.getId().equals(cmd.getId())){
|
||||
deviceCmdMapper.deleteById(cmd.getId());
|
||||
cmd.setId(cmdMaxId.getId()+1);
|
||||
deviceCmdMapper.insert(cmd);
|
||||
}
|
||||
|
||||
return HttpResult.ok();
|
||||
}
|
||||
|
||||
@PostMapping("/gnss/cmd/go_bottom")
|
||||
@ResponseBody
|
||||
public String bottomCmd(@RequestParam int id) throws Exception {
|
||||
DeviceCmd cmd = deviceCmdMapper.selectById(id);
|
||||
if(cmd == null) return HttpResult.failed();
|
||||
|
||||
cmd.setSort(getMaxSort() + 1);
|
||||
deviceCmdMapper.updateById(cmd);
|
||||
|
||||
return HttpResult.ok();
|
||||
}
|
||||
|
||||
@PostMapping("/gnss/cmd/move_up")
|
||||
@ResponseBody
|
||||
public String moveUpCmd(@RequestParam int id) throws Exception {
|
||||
DeviceCmd cmd = deviceCmdMapper.selectById(id);
|
||||
if(cmd == null) return HttpResult.failed();
|
||||
|
||||
QueryWrapper<DeviceCmd> queryWrapper = new QueryWrapper<>();
|
||||
queryWrapper.lt("sort", cmd.getSort());
|
||||
queryWrapper.orderByDesc("sort");
|
||||
queryWrapper.last("limit 1");
|
||||
DeviceCmd prevCmd = deviceCmdMapper.selectOne(queryWrapper);
|
||||
|
||||
if(prevCmd != null) {
|
||||
int tempSort = cmd.getSort();
|
||||
cmd.setSort(prevCmd.getSort());
|
||||
prevCmd.setSort(tempSort);
|
||||
|
||||
deviceCmdMapper.updateById(cmd);
|
||||
deviceCmdMapper.updateById(prevCmd);
|
||||
}
|
||||
|
||||
return HttpResult.ok();
|
||||
}
|
||||
|
||||
@PostMapping("/gnss/cmd/move_down")
|
||||
@ResponseBody
|
||||
public String moveDownCmd(@RequestParam int id) throws Exception {
|
||||
DeviceCmd cmd = deviceCmdMapper.selectById(id);
|
||||
if(cmd == null) return HttpResult.failed();
|
||||
|
||||
QueryWrapper<DeviceCmd> queryWrapper = new QueryWrapper<>();
|
||||
queryWrapper.gt("sort", cmd.getSort());
|
||||
queryWrapper.orderByAsc("sort");
|
||||
queryWrapper.last("limit 1");
|
||||
DeviceCmd nextCmd = deviceCmdMapper.selectOne(queryWrapper);
|
||||
|
||||
if(nextCmd != null) {
|
||||
int tempSort = cmd.getSort();
|
||||
cmd.setSort(nextCmd.getSort());
|
||||
nextCmd.setSort(tempSort);
|
||||
|
||||
deviceCmdMapper.updateById(cmd);
|
||||
deviceCmdMapper.updateById(nextCmd);
|
||||
}
|
||||
|
||||
return HttpResult.ok();
|
||||
}
|
||||
|
||||
@ -326,17 +255,4 @@ public class CmdLineController extends BasicController{
|
||||
return HttpResult.failed();
|
||||
} else return HttpResult.ok();
|
||||
}
|
||||
|
||||
@PostMapping("/gnss/cmd/update")
|
||||
@ResponseBody
|
||||
public String updateCmd(@RequestBody JSONObject object) throws Exception {
|
||||
DeviceCmd deviceCmd = JSONObject.toJavaObject(object, DeviceCmd.class);
|
||||
int num = deviceCmdMapper.updateById(deviceCmd);
|
||||
|
||||
if (num == 0) {
|
||||
return HttpResult.failed();
|
||||
} else {
|
||||
return HttpResult.ok();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
package com.imdroid.beidou.controller;
|
||||
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
|
||||
import com.baomidou.mybatisplus.core.metadata.IPage;
|
||||
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
|
||||
import com.github.yulichang.query.MPJQueryWrapper;
|
||||
@ -46,26 +45,6 @@ public class IndexController extends BasicController{
|
||||
int noGGA = 0;
|
||||
int noFix = 0;
|
||||
|
||||
//未推送设备数（同时满足：非SAAS服务商、使用状态正常、fwd_group_id和fwd_group_id2都为"不推送"的设备）
|
||||
Long deviceNoFwdNum;
|
||||
QueryWrapper<GnssDevice> noFwdQueryWrapper = new QueryWrapper<>();
|
||||
if (tenantId != Tenant.SAAS_PROVIDER_ID) {
|
||||
// 非SAAS服务商查询当前租户
|
||||
noFwdQueryWrapper.eq("tenantid", tenantId);
|
||||
} else {
|
||||
// SAAS服务商查询所有非SAAS的租户
|
||||
noFwdQueryWrapper.ne("tenantid", Tenant.SAAS_PROVIDER_ID);
|
||||
}
|
||||
// 使用状态正常
|
||||
noFwdQueryWrapper.eq("opmode", GnssDevice.OP_MODE_USE);
|
||||
// 设备类型为测站（非基站）
|
||||
noFwdQueryWrapper.eq("devicetype", GnssDevice.TYPE_ROVER);
|
||||
// fwd_group_id为"不推送"
|
||||
noFwdQueryWrapper.eq("fwd_group_id", GnssGroupFwd.FWD_TYPE_NONE);
|
||||
// fwd_group_id2为"不推送"或为null
|
||||
noFwdQueryWrapper.and(wrapper -> wrapper.eq("fwd_group_id2", GnssGroupFwd.FWD_TYPE_NONE).or().isNull("fwd_group_id2"));
|
||||
deviceNoFwdNum = gnssDeviceMapper.selectCount(noFwdQueryWrapper);
|
||||
|
||||
List<GnssStatusJoin> deviceList;
|
||||
if(tenantId == Tenant.SAAS_PROVIDER_ID){
|
||||
deviceList = statusMapper.queryDeployed();
|
||||
@ -115,7 +94,6 @@ public class IndexController extends BasicController{
|
||||
m.addAttribute("warningTotalNum", warning1Num+warning2Num);
|
||||
m.addAttribute("noGGA", noGGA);
|
||||
m.addAttribute("noFix", noFix);
|
||||
m.addAttribute("deviceNoFwdNum", deviceNoFwdNum);
|
||||
m.addAttribute("deviceList", deviceList);
|
||||
|
||||
return "/page/device_overview";
|
||||
@ -171,13 +149,6 @@ public class IndexController extends BasicController{
|
||||
else if(query.equals("nogga")){
|
||||
queryWrapper.isNull("latitude");
|
||||
}
|
||||
else if(query.equals("no_fwd")){
|
||||
// 查询同时满足：使用状态正常、设备类型为测站、fwd_group_id和fwd_group_id2都为"不推送"的设备
|
||||
queryWrapper.eq("d.opmode", GnssDevice.OP_MODE_USE)
|
||||
.eq("d.devicetype", GnssDevice.TYPE_ROVER)
|
||||
.eq("d.fwd_group_id", GnssGroupFwd.FWD_TYPE_NONE)
|
||||
.and(wrapper -> wrapper.eq("d.fwd_group_id2", GnssGroupFwd.FWD_TYPE_NONE).or().isNull("d.fwd_group_id2"));
|
||||
}
|
||||
session.setAttribute("query",query);
|
||||
}
|
||||
|
||||
|
||||
@ -6,64 +6,28 @@
|
||||
<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">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
||||
<link rel="stylesheet" href="../css/public.css" media="all">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.5.0/ol.css">
|
||||
<style>
|
||||
.top-panel {
|
||||
border: 1px solid #eceff9;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.top-panel > .layui-card-body{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.stats-panel > .layui-card-body {
|
||||
height: auto;
|
||||
min-height: 60px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.top-panel-number{
|
||||
/* line-height: 60px; // 删除或注释掉这一行 */
|
||||
line-height:60px;
|
||||
font-size: 30px;
|
||||
border-right:1px solid #eceff9;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; /* 可选：让数字水平居中 */
|
||||
}
|
||||
.top-panel-tips{
|
||||
line-height:30px;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flex-row > .layui-col-xs12,
|
||||
.flex-row > .layui-col-md6 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.stats-panel .layui-col-xs3 a,
|
||||
.stats-panel .layui-col-md4 a,
|
||||
.stats-panel .layui-col-xs3 div a,
|
||||
.stats-panel .layui-col-md4 div a {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
@ -90,72 +54,22 @@
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
.btn:hover, .btn.active {
|
||||
.btn:hover {
|
||||
background-color: rgba(27, 142, 236, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
#map-container {
|
||||
height: 85vh;
|
||||
width: 100%;
|
||||
padding:0px;
|
||||
position: relative;
|
||||
}
|
||||
.map-control-card {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
min-width: 220px;
|
||||
}
|
||||
.map-control-card .title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #1aa094;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
border: 1px solid #e6e6e6;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.search-box button {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
background-color: #1aa094;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-box button:hover {
|
||||
background-color: #148e83;
|
||||
}
|
||||
.map-controls select {
|
||||
width: 100%;
|
||||
border: 1px solid #e6e6e6;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/ol@v10.5.0/dist/ol.js"></script>
|
||||
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4ef46ba62e8fba67b53a0becca4d05da">
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="layuimini-main">
|
||||
|
||||
<div class="layui-row layui-col-space30 flex-row" style="margin-bottom: 2em;">
|
||||
<div class="layui-row layui-col-space30">
|
||||
<div class="layui-col-xs12 layui-col-md6">
|
||||
<div class="layui-card top-panel stats-panel">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">设备数量</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
@ -163,9 +77,8 @@
|
||||
<a style="color: #1aa094" th:text="${deviceOnlineNum}">2,020</a><br>
|
||||
</div>
|
||||
<div class="layui-col-xs3 layui-col-md4">
|
||||
<a href="#" onclick="queryDevices('offline')" style="color: #bd3004" th:text="'掉线数 '+${deviceOfflineNum}">0</a>
|
||||
<div th:if="${deviceNoFwdNum>0}"><a href="#" onclick="queryDevices('no_fwd')" style="color: #bd3004" th:text="'未推送数 '+${deviceNoFwdNum}">0</a></div>
|
||||
<div th:if="${noFix>0}"><a href="#" onclick="queryDevices('nofixed')" style="color: #bd3004" th:text="'长期无效解 '+${noFix}">0</a></div>
|
||||
<a href="#" onclick="queryDevices('offline')" style="color: #bd3004" th:text="'掉线数 '+${deviceOfflineNum}">0</a><br>
|
||||
<div th:if="${noFix>0}"><a href="#" onclick="queryDevices('nofixed')" style="color: #bd3004" th:text="'长期无效解 '+${noFix}">0</a><br></div>
|
||||
<a style="color: #000000" th:text="'装机量 '+${deviceDeployedNum}">2020</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -173,7 +86,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-md6">
|
||||
<div class="layui-card top-panel stats-panel">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">告警统计</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
@ -181,9 +94,9 @@
|
||||
<a style="color: #f6c102" th:text="${warningTotalNum}">20</a><br>
|
||||
</div>
|
||||
<div class="layui-col-xs3 layui-col-md4">
|
||||
<a href="#" onclick="queryDevices('warning2')" style="color: #bd3004" th:text="'严重 '+${warning2Num}">5</a>
|
||||
<a href="#" onclick="queryDevices('warning2')" style="color: #bd3004" th:text="'严重 '+${warning2Num}">5</a><br>
|
||||
<a href="#" onclick="queryDevices('warning1')" style="color: #f6c102" th:text="'一般 '+${warning1Num}">20</a>
|
||||
<div th:if="${noGGA>0}"><a href="#" onclick="queryDevices('nogga')" style="color: #e7be1d" th:text="'无GGA '+${noGGA}">0</a></div>
|
||||
<div th:if="${noGGA>0}"><a href="#" onclick="queryDevices('nogga')" style="color: #e7be1d" th:text="'无GGA '+${noGGA}">0</a><br></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -194,607 +107,231 @@
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-card top-panel">
|
||||
<ul class="btn-wrap" style="z-index: 99;">
|
||||
<li class="light btn" id="btn-all" onclick="showAll()">全部</li>
|
||||
<li class="night btn" id="btn-warning1" onclick="showWarning1()">一般告警</li>
|
||||
<li class="night btn active" id="btn-warning2" onclick="showWarning2()">严重告警</li>
|
||||
<li class="night btn" id="btn-device-locate" style="display: none; min-width: 120px;"> 设备定位: <span id="current-device-id"></span> </li>
|
||||
<li class="light btn" onclick="showAll()">全部</li>
|
||||
<li class="night btn" onclick="showWarning1()">一般告警</li>
|
||||
<li class="night btn" onclick="showWarning2()">严重告警</li>
|
||||
</ul>
|
||||
<div id="map-container" class="layui-card-body">
|
||||
<div class="map-control-card">
|
||||
|
||||
<div class="map-controls">
|
||||
<form class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<select id="mapTypeSelect" lay-filter="mapType">
|
||||
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
|
||||
<option value="tianditu_normal">天地图-矢量</option>
|
||||
<option value="amap_satellite">高德-卫星影像</option>
|
||||
<option value="amap">高德-矢量</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" id="deviceSearch" placeholder="输入设备编号搜索">
|
||||
<button onclick="searchDevice()">搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map-container" class="layui-card-body" style="height: 85vh;weight :100vw"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||||
|
||||
<script th:inline="javascript">
|
||||
var map;
|
||||
var vectorSource;
|
||||
var vectorLayer;
|
||||
var currentBaseLayer;
|
||||
var greenFeatures = [];
|
||||
var orangeFeatures = [];
|
||||
var redFeatures = [];
|
||||
var marker_state = 3; // 1:all; 2:orange; 3:red
|
||||
var allFeatures = []; // 存储所有设备标记，用于搜索功能
|
||||
var currentSearchedDevice = null; // 当前搜索的设备ID
|
||||
var myLocationFeature = null; // 存储"我的位置"标记
|
||||
var myLocationInterval; // 存储定时更新位置的interval对象
|
||||
|
||||
// 天地图 API 密钥（fengyarnom@gmail.com）
|
||||
var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
|
||||
|
||||
var deviceList = [
|
||||
var greenMarkers=[];
|
||||
var orangeMarkers=[];
|
||||
var redMarkers=[];
|
||||
var greenLabels=[];
|
||||
var orangeLabels=[];
|
||||
var redLabels=[];
|
||||
var batch_id = 0;
|
||||
var deviceList=
|
||||
[
|
||||
[# th:each="device : ${deviceList}"]
|
||||
{
|
||||
deviceid: [[${device.deviceid}]],
|
||||
{deviceid:[[${device.deviceid}]],
|
||||
latitude:[[${device.latitude}]],
|
||||
longitude:[[${device.longitude}]],
|
||||
warning: [[${device.warning}]]
|
||||
},
|
||||
warning:[[${device.warning}]]},
|
||||
[/]
|
||||
];
|
||||
var marker_state = 0;//0: translating; 1:all; 2:orange; 3:red
|
||||
|
||||
var pi = 3.14159265358979324;
|
||||
var a = 6378245.0;
|
||||
var ee = 0.00669342162296594323;
|
||||
var map = new BMapGL.Map("map-container");
|
||||
var convertor = new BMapGL.Convertor();
|
||||
var loc_green = new BMapGL.Icon("../images/loc1_green.png", new BMapGL.Size(18, 24));
|
||||
var loc_red = new BMapGL.Icon("../images/loc1_red.png", new BMapGL.Size(18, 24));
|
||||
var loc_orange = new BMapGL.Icon("../images/loc1_orange.png", new BMapGL.Size(18, 24));
|
||||
var loc_blue = new BMapGL.Icon("../images/loc_blue.png", new BMapGL.Size(18, 24));
|
||||
|
||||
/*判断是否在国内，不在国内则不做偏移*/
|
||||
function outOfChina(lon, lat) {
|
||||
if ((lon < 72.004 || lon > 137.8347) && (lat < 0.8293 || lat > 55.8271)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function transformLat(x, y) {
|
||||
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
|
||||
ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
function transformLon(x, y) {
|
||||
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
|
||||
ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
function transform(wgLat, wgLon) {
|
||||
var mars_point = {lon: 0, lat: 0};
|
||||
if (outOfChina(wgLon, wgLat)) {
|
||||
mars_point.lat = wgLat;
|
||||
mars_point.lon = wgLon;
|
||||
return mars_point;
|
||||
}
|
||||
var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
|
||||
var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
|
||||
var radLat = wgLat / 180.0 * pi;
|
||||
var magic = Math.sin(radLat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
var sqrtMagic = Math.sqrt(magic);
|
||||
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
|
||||
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
|
||||
mars_point.lat = wgLat + dLat;
|
||||
mars_point.lon = wgLon + dLon;
|
||||
return mars_point;
|
||||
}
|
||||
|
||||
var mapLayers = {
|
||||
amap: new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
|
||||
})
|
||||
}),
|
||||
amap_satellite: new ol.layer.Group({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
tianditu_satellite: new ol.layer.Group({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
tianditu_normal: new ol.layer.Group({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: 'https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
};
|
||||
initialize();
|
||||
myLocation();
|
||||
|
||||
function initialize() {
|
||||
vectorSource = new ol.source.Vector();
|
||||
vectorLayer = new ol.layer.Vector({
|
||||
source: vectorSource
|
||||
});
|
||||
var point = new BMapGL.Point(116.404, 39.915);
|
||||
map.centerAndZoom(point, 7);
|
||||
map.enableScrollWheelZoom(true);
|
||||
//map.setMapType(BMAP_SATELLITE_MAP);
|
||||
|
||||
var initialMapType = document.getElementById('mapTypeSelect').value;
|
||||
currentBaseLayer = mapLayers[initialMapType];
|
||||
|
||||
map = new ol.Map({
|
||||
target: 'map-container',
|
||||
layers: [
|
||||
currentBaseLayer,
|
||||
vectorLayer
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.fromLonLat([116.404, 39.915]),
|
||||
zoom: 7
|
||||
})
|
||||
});
|
||||
if (deviceList.length > 0) {
|
||||
var centerLat = 0;
|
||||
var centerLon = 0;
|
||||
|
||||
//console.log(deviceList);
|
||||
for(var i=0; i<deviceList.length; i++) {
|
||||
centerLat += deviceList[i].latitude;
|
||||
centerLon += deviceList[i].longitude;
|
||||
}
|
||||
|
||||
if(deviceList.length>0) {
|
||||
centerLat = centerLat/deviceList.length;
|
||||
centerLon = centerLon/deviceList.length;
|
||||
|
||||
map.getView().setCenter(ol.proj.fromLonLat([centerLon, centerLat]));
|
||||
map.setCenter(new BMapGL.Point(centerLon,centerLat));
|
||||
}
|
||||
marker_state = 0;
|
||||
|
||||
addDeviceMarkers();
|
||||
myLocation();
|
||||
startLocationUpdates(); // 启动位置定时更新
|
||||
}
|
||||
function switchMapType(mapType) {
|
||||
console.log('切换地图类型到:', mapType);
|
||||
map.removeLayer(currentBaseLayer);
|
||||
currentBaseLayer = mapLayers[mapType];
|
||||
map.getLayers().insertAt(0, currentBaseLayer);
|
||||
translateCallback = function (data){
|
||||
if(data.status === 0) {
|
||||
var i=0;
|
||||
for(; i<data.points.length; i++){
|
||||
var label = new BMapGL.Label(deviceList[batch_id+i].deviceid,
|
||||
{
|
||||
position: data.points[i], // 指定文本标注所在的地理位置
|
||||
offset: new BMapGL.Size(10, 10) // 设置文本偏移量
|
||||
}); // 创建文本标注对象
|
||||
|
||||
// 更新我的位置标记，使用正确的坐标系
|
||||
updateMyLocationForMapType(mapType);
|
||||
|
||||
// 更新设备标记
|
||||
addDeviceMarkers();
|
||||
}
|
||||
|
||||
// 根据地图类型更新我的位置标记
|
||||
function updateMyLocationForMapType(mapType) {
|
||||
if (myLocationFeature) {
|
||||
// 获取原始坐标
|
||||
var originalCoords = myLocationFeature.get('originalCoords');
|
||||
if (originalCoords) {
|
||||
var lat = originalCoords.lat;
|
||||
var lon = originalCoords.lon;
|
||||
var coordinates;
|
||||
|
||||
// 根据地图类型进行坐标转换
|
||||
if (mapType === 'amap' || mapType === 'amap_satellite') {
|
||||
// 高德地图使用GCJ-02坐标系，需要转换
|
||||
var gcjCoord = transform(lat, lon);
|
||||
coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
|
||||
} else {
|
||||
// 天地图使用CGCS2000/WGS84坐标系，直接使用
|
||||
coordinates = ol.proj.fromLonLat([lon, lat]);
|
||||
}
|
||||
|
||||
// 更新位置标记的几何坐标
|
||||
myLocationFeature.getGeometry().setCoordinates(coordinates);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addDeviceMarkers() {
|
||||
// 保存我的位置标记
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
// 清除现有标记
|
||||
vectorSource.clear();
|
||||
greenFeatures = [];
|
||||
orangeFeatures = [];
|
||||
redFeatures = [];
|
||||
allFeatures = [];
|
||||
|
||||
for (var i = 0; i < deviceList.length; i++) {
|
||||
var device = deviceList[i];
|
||||
var mapCoordinates;
|
||||
var currentMapType = document.getElementById('mapTypeSelect').value;
|
||||
if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
|
||||
// 高德地图 WGS84 转换为 GCJ-02
|
||||
var gcjCoord = transform(device.latitude, device.longitude);
|
||||
mapCoordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
|
||||
} else {
|
||||
// 天地图 CGCS2000，2000国家大地坐标系，与WGS84实质一样
|
||||
mapCoordinates = ol.proj.fromLonLat([device.longitude, device.latitude]);
|
||||
}
|
||||
|
||||
var feature = new ol.Feature({
|
||||
geometry: new ol.geom.Point(mapCoordinates),
|
||||
deviceInfo: device
|
||||
var marker;
|
||||
if(deviceList[batch_id+i].warning == 2) {
|
||||
marker = new BMapGL.Marker(data.points[i], {
|
||||
icon: loc_red
|
||||
});
|
||||
|
||||
var iconSrc;
|
||||
var color = '#000';
|
||||
|
||||
if (device.warning == 2) {
|
||||
iconSrc = '../images/loc1_red.png';
|
||||
redFeatures.push(feature);
|
||||
} else if (device.warning == 1) {
|
||||
iconSrc = '../images/loc1_orange.png';
|
||||
orangeFeatures.push(feature);
|
||||
} else {
|
||||
iconSrc = '../images/loc1_green.png';
|
||||
greenFeatures.push(feature);
|
||||
redMarkers.push(marker);
|
||||
redLabels.push(label);
|
||||
}
|
||||
|
||||
var style = new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
src: iconSrc,
|
||||
scale: 1
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
text: device.deviceid,
|
||||
offsetY: -30,
|
||||
fill: new ol.style.Fill({ color: color }),
|
||||
stroke: new ol.style.Stroke({ color: '#fff', width: 2 }),
|
||||
font: '12px Arial'
|
||||
})
|
||||
else if(deviceList[batch_id+i].warning == 1) {
|
||||
marker = new BMapGL.Marker(data.points[i], {
|
||||
icon: loc_orange
|
||||
});
|
||||
|
||||
feature.setStyle(style);
|
||||
allFeatures.push(feature);
|
||||
vectorSource.addFeature(feature);
|
||||
orangeMarkers.push(marker);
|
||||
orangeLabels.push(label);
|
||||
}
|
||||
else {
|
||||
marker = new BMapGL.Marker(data.points[i], {
|
||||
icon: loc_green
|
||||
});
|
||||
greenMarkers.push(marker);
|
||||
greenLabels.push(label);
|
||||
}
|
||||
|
||||
if (savedMyLocationFeature) {
|
||||
vectorSource.addFeature(savedMyLocationFeature);
|
||||
// 点标记添加点击事件
|
||||
map.addOverlay(marker);
|
||||
map.addOverlay(label);
|
||||
|
||||
}
|
||||
|
||||
if (currentSearchedDevice) {
|
||||
filterByDeviceId(currentSearchedDevice);
|
||||
} else {
|
||||
if (marker_state === 2) {
|
||||
hideGreen();
|
||||
hideRed();
|
||||
} else if (marker_state === 3) {
|
||||
hideGreen();
|
||||
hideOrange();
|
||||
}
|
||||
batch_id+=10;
|
||||
// 函数内定时器的回调函数会继续调用 timer()
|
||||
if(batch_id<deviceList.length) {
|
||||
setTimeout(() => {
|
||||
timer();
|
||||
}, 500);
|
||||
}
|
||||
else marker_state = 1;
|
||||
}
|
||||
|
||||
//每秒转换10个坐标，否则会受百度并发限制
|
||||
function timer() {
|
||||
var pointArr = [];
|
||||
var count = batch_id+10;
|
||||
var totalNum = deviceList.length;
|
||||
if(count>totalNum) count=totalNum;
|
||||
|
||||
for (var i = batch_id; i < count; i++) {
|
||||
point = new BMapGL.Point(deviceList[i].longitude, deviceList[i].latitude);
|
||||
pointArr.push(point);
|
||||
}
|
||||
|
||||
convertor.translate(pointArr, 1, 5, translateCallback);
|
||||
}
|
||||
|
||||
// 启动函数
|
||||
timer();
|
||||
}
|
||||
|
||||
function myLocation(){
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
var lon = position.coords.longitude;
|
||||
var lat = position.coords.latitude;
|
||||
var currentMapType = document.getElementById('mapTypeSelect').value;
|
||||
var coordinates;
|
||||
|
||||
if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
|
||||
// 高德地图使用GCJ-02坐标系，需要转换
|
||||
var gcjCoord = transform(lat, lon);
|
||||
coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
|
||||
} else {
|
||||
// 天地图使用CGCS2000/WGS84坐标系，直接使用
|
||||
coordinates = ol.proj.fromLonLat([lon, lat]);
|
||||
}
|
||||
|
||||
// 如果已经存在位置标记，则先移除
|
||||
if (myLocationFeature) {
|
||||
vectorSource.removeFeature(myLocationFeature);
|
||||
}
|
||||
|
||||
myLocationFeature = new ol.Feature({
|
||||
geometry: new ol.geom.Point(coordinates),
|
||||
isMyLocation: true,
|
||||
originalCoords: {lat: lat, lon: lon}
|
||||
var geolocation = new BMapGL.Geolocation();
|
||||
geolocation.getCurrentPosition(function(r){
|
||||
if(this.getStatus() == BMAP_STATUS_SUCCESS){
|
||||
var mk = new BMapGL.Marker(r.point, {
|
||||
icon: loc_blue
|
||||
});
|
||||
|
||||
var style = new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
src: '../images/loc_blue.png',
|
||||
scale: 1
|
||||
})
|
||||
map.addOverlay(mk);
|
||||
map.panTo(r.point);
|
||||
}
|
||||
});
|
||||
|
||||
myLocationFeature.setStyle(style);
|
||||
vectorSource.addFeature(myLocationFeature);
|
||||
map.getView().setCenter(coordinates);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function startLocationUpdates() {
|
||||
if (myLocationInterval) {
|
||||
clearInterval(myLocationInterval);
|
||||
}
|
||||
|
||||
myLocationInterval = setInterval(function() {
|
||||
myLocation();
|
||||
}, 10 * 60 * 1000); // 10 min = 10 * 60 * 1000ms
|
||||
}
|
||||
|
||||
function showAll(){
|
||||
document.getElementById('btn-all').classList.add('active');
|
||||
document.getElementById('btn-warning1').classList.remove('active');
|
||||
document.getElementById('btn-warning2').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
|
||||
currentSearchedDevice = null;
|
||||
document.getElementById('deviceSearch').value = '';
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
vectorSource.clear();
|
||||
|
||||
if (savedMyLocationFeature) {
|
||||
vectorSource.addFeature(savedMyLocationFeature);
|
||||
}
|
||||
|
||||
for (var i = 0; i < allFeatures.length; i++) {
|
||||
vectorSource.addFeature(allFeatures[i]);
|
||||
}
|
||||
|
||||
if(marker_state == 2){
|
||||
showGreen();
|
||||
showRed();
|
||||
marker_state = 1;
|
||||
}
|
||||
else if(marker_state == 3){
|
||||
showGreen();
|
||||
showOrange();
|
||||
marker_state = 1;
|
||||
}
|
||||
}
|
||||
|
||||
function showWarning1(){
|
||||
document.getElementById('btn-all').classList.remove('active');
|
||||
document.getElementById('btn-warning1').classList.add('active');
|
||||
document.getElementById('btn-warning2').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
|
||||
currentSearchedDevice = null;
|
||||
document.getElementById('deviceSearch').value = '';
|
||||
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
vectorSource.clear();
|
||||
|
||||
if (savedMyLocationFeature) {
|
||||
vectorSource.addFeature(savedMyLocationFeature);
|
||||
}
|
||||
|
||||
for (var i = 0; i < allFeatures.length; i++) {
|
||||
vectorSource.addFeature(allFeatures[i]);
|
||||
}
|
||||
|
||||
if(marker_state == 1){
|
||||
hideGreen();
|
||||
hideRed();
|
||||
marker_state = 2;
|
||||
}
|
||||
else if(marker_state == 3){
|
||||
hideRed();
|
||||
showOrange();
|
||||
marker_state = 2;
|
||||
}
|
||||
}
|
||||
|
||||
function showWarning2(){
|
||||
document.getElementById('btn-all').classList.remove('active');
|
||||
document.getElementById('btn-warning1').classList.remove('active');
|
||||
document.getElementById('btn-warning2').classList.add('active');
|
||||
document.getElementById('btn-device-locate').classList.remove('active');
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
|
||||
currentSearchedDevice = null;
|
||||
document.getElementById('deviceSearch').value = '';
|
||||
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
vectorSource.clear();
|
||||
|
||||
if (savedMyLocationFeature) {
|
||||
vectorSource.addFeature(savedMyLocationFeature);
|
||||
}
|
||||
|
||||
for (var i = 0; i < allFeatures.length; i++) {
|
||||
vectorSource.addFeature(allFeatures[i]);
|
||||
}
|
||||
|
||||
if(marker_state == 1){
|
||||
hideGreen();
|
||||
hideOrange();
|
||||
marker_state = 3;
|
||||
}
|
||||
else if(marker_state == 2){
|
||||
hideOrange();
|
||||
showRed();
|
||||
marker_state = 3;
|
||||
}
|
||||
}
|
||||
|
||||
function showGreen(){
|
||||
for (var i = 0; i < greenFeatures.length; i++) {
|
||||
if (!vectorSource.hasFeature(greenFeatures[i])) {
|
||||
vectorSource.addFeature(greenFeatures[i]);
|
||||
}
|
||||
for(var i=0; i<greenMarkers.length; i++){
|
||||
map.addOverlay(greenMarkers[i]);
|
||||
map.addOverlay(greenLabels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function showOrange(){
|
||||
for (var i = 0; i < orangeFeatures.length; i++) {
|
||||
if (!vectorSource.hasFeature(orangeFeatures[i])) {
|
||||
vectorSource.addFeature(orangeFeatures[i]);
|
||||
}
|
||||
for(var i=0; i<orangeMarkers.length; i++){
|
||||
map.addOverlay(orangeMarkers[i]);
|
||||
map.addOverlay(orangeLabels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function showRed(){
|
||||
for (var i = 0; i < redFeatures.length; i++) {
|
||||
if (!vectorSource.hasFeature(redFeatures[i])) {
|
||||
vectorSource.addFeature(redFeatures[i]);
|
||||
}
|
||||
for(var i=0; i<redMarkers.length; i++){
|
||||
map.addOverlay(redMarkers[i]);
|
||||
map.addOverlay(redLabels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function hideGreen(){
|
||||
for (var i = 0; i < greenFeatures.length; i++) {
|
||||
vectorSource.removeFeature(greenFeatures[i]);
|
||||
for(var i=0; i<greenMarkers.length; i++){
|
||||
map.removeOverlay(greenMarkers[i]);
|
||||
map.removeOverlay(greenLabels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function hideOrange(){
|
||||
for (var i = 0; i < orangeFeatures.length; i++) {
|
||||
vectorSource.removeFeature(orangeFeatures[i]);
|
||||
for(var i=0; i<orangeMarkers.length; i++){
|
||||
map.removeOverlay(orangeMarkers[i]);
|
||||
map.removeOverlay(orangeLabels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function hideRed(){
|
||||
for (var i = 0; i < redFeatures.length; i++) {
|
||||
vectorSource.removeFeature(redFeatures[i]);
|
||||
for(var i=0; i<redMarkers.length; i++){
|
||||
map.removeOverlay(redMarkers[i]);
|
||||
map.removeOverlay(redLabels[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function searchDevice() {
|
||||
var deviceId = document.getElementById('deviceSearch').value.trim();
|
||||
|
||||
if (!deviceId) {
|
||||
currentSearchedDevice = null;
|
||||
vectorSource.clear();
|
||||
|
||||
for (var i = 0; i < allFeatures.length; i++) {
|
||||
vectorSource.addFeature(allFeatures[i]);
|
||||
}
|
||||
|
||||
if (marker_state === 2) {
|
||||
hideGreen();
|
||||
hideRed();
|
||||
} else if (marker_state === 3) {
|
||||
hideGreen();
|
||||
hideOrange();
|
||||
}
|
||||
|
||||
document.getElementById('btn-device-locate').style.display = 'none';
|
||||
updateFilterButtonsState(marker_state);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
currentSearchedDevice = deviceId;
|
||||
filterByDeviceId(deviceId);
|
||||
}
|
||||
|
||||
function locateDeviceOnMap(deviceId, latitude, longitude) {
|
||||
currentSearchedDevice = deviceId;
|
||||
filterByDeviceId(deviceId);
|
||||
|
||||
var layerIndex = layer.index;
|
||||
layer.close(layerIndex);
|
||||
|
||||
layer.msg('已定位到设备: ' + deviceId);
|
||||
}
|
||||
|
||||
function updateFilterButtonsState(state) {
|
||||
document.getElementById('btn-all').classList.remove('active');
|
||||
document.getElementById('btn-warning1').classList.remove('active');
|
||||
document.getElementById('btn-warning2').classList.remove('active');
|
||||
|
||||
if (state === 1) {
|
||||
document.getElementById('btn-all').classList.add('active');
|
||||
} else if (state === 2) {
|
||||
document.getElementById('btn-warning1').classList.add('active');
|
||||
} else if (state === 3) {
|
||||
document.getElementById('btn-warning2').classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function filterByDeviceId(deviceId) {
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
vectorSource.clear();
|
||||
|
||||
if (savedMyLocationFeature) {
|
||||
vectorSource.addFeature(savedMyLocationFeature);
|
||||
}
|
||||
|
||||
var found = false;
|
||||
|
||||
for (var i = 0; i < allFeatures.length; i++) {
|
||||
var feature = allFeatures[i];
|
||||
var deviceInfo = feature.get('deviceInfo');
|
||||
|
||||
if (deviceInfo && deviceInfo.deviceid.includes(deviceId)) {
|
||||
vectorSource.addFeature(feature);
|
||||
found = true;
|
||||
|
||||
// 将地图中心移动到该设备位置
|
||||
var geometry = feature.getGeometry();
|
||||
var deviceCoord = geometry.getCoordinates();
|
||||
map.getView().setCenter(deviceCoord);
|
||||
map.getView().setZoom(15);
|
||||
}
|
||||
}
|
||||
|
||||
if (!found) {
|
||||
layer.msg('未找到设备: ' + deviceId);
|
||||
|
||||
if (marker_state === 1) {
|
||||
showAll();
|
||||
} else if (marker_state === 2) {
|
||||
showWarning1();
|
||||
} else if (marker_state === 3) {
|
||||
showWarning2();
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('current-device-id').textContent = deviceId;
|
||||
document.getElementById('btn-device-locate').style.display = 'block';
|
||||
document.getElementById('btn-device-locate').classList.add('active');
|
||||
document.getElementById('btn-all').classList.remove('active');
|
||||
document.getElementById('btn-warning1').classList.remove('active');
|
||||
document.getElementById('btn-warning2').classList.remove('active');
|
||||
}
|
||||
layui.use(['form'], function(){
|
||||
var form = layui.form;
|
||||
form.on('select(mapType)', function(data){
|
||||
switchMapType(data.value);
|
||||
});
|
||||
|
||||
initialize();
|
||||
|
||||
showWarning2();
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||||
<script>
|
||||
function queryDevices(status_type){
|
||||
var index = layer.open({
|
||||
title: '',
|
||||
|
||||
@ -12,45 +12,17 @@
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.ctx-menu-container {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border: 1px solid #d2d2d2;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.12);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.ctx-menu-container li {
|
||||
padding: 7px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ctx-menu-container li:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.ctx-submenu {
|
||||
padding-left: 20px;
|
||||
display: none;
|
||||
}
|
||||
.active-row {
|
||||
background-color: #f2f2f2 !important;
|
||||
}
|
||||
.highlight-row {
|
||||
background-color: #fffdd1 !important;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-form layuimini-form">
|
||||
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
|
||||
<input type="hidden" name="device_id" id="device_id" th:value="${device_id}">
|
||||
<input type="hidden" name="send_channel" id="send_channel" th:value="${send_channel}">
|
||||
</div>
|
||||
<input type="hidden" name="device_id" id="device_id">
|
||||
<input type="hidden" name="send_channel" id="send_channel">
|
||||
|
||||
<div id="cmdFormDialog" style="display: none; padding: 20px;">
|
||||
<form class="layui-form" lay-filter="cmdForm">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-body">
|
||||
<input type="hidden" name="id" id="id">
|
||||
|
||||
<div class="layui-form-item">
|
||||
@ -63,7 +35,7 @@
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">指令类型</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="type" id="type" lay-filter="type">
|
||||
<select name="type" lay-filter="type">
|
||||
<option value="0">GNSS</option>
|
||||
<option value="10">DTU</option>
|
||||
<option value="2">MPU</option>
|
||||
@ -80,190 +52,62 @@
|
||||
<textarea name="content" id="content" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="ctx-menu-container" id="rightMenu">
|
||||
<ul>
|
||||
<li id="ctx-menu-edit">编辑</li>
|
||||
<li id="ctx-menu-send">发送</li>
|
||||
<li id="ctx-menu-top">置顶</li>
|
||||
<li id="ctx-menu-up">上移</li>
|
||||
<li id="ctx-menu-down">下移</li>
|
||||
<li id="ctx-menu-bottom">置底</li>
|
||||
<li id="ctx-menu-delete">删除</li>
|
||||
</ul>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||||
<script type="text/html" id="toolbarDemo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="add">添加指令</button>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit" id="btnEdit" disabled>编辑</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="go_top" id="btnTop" disabled>置顶</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="move_up" id="btnUp" disabled>上移</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="move_down" id="btnDown" disabled>下移</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="go_bottom" id="btnBottom" disabled>置底</button>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete" id="btnDelete" disabled>删除</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="currentTableBar">
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="use">发送</a>
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="go_top">置顶</a>
|
||||
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
|
||||
</script>
|
||||
|
||||
<script th:inline="javascript">
|
||||
layui.use(['form', 'table', 'layer'], function () {
|
||||
layui.use(['form', 'table'], function () {
|
||||
var $ = layui.$,
|
||||
form = layui.form,
|
||||
table = layui.table,
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
var iframeIndex = parent.layer.getFrameIndex(window.name);
|
||||
var isMoving = false;
|
||||
var lastMovedId = null;
|
||||
var isManualOperation = false;
|
||||
|
||||
/**
|
||||
* 初始化表单，要加上，不然刷新部分组件可能会不加载
|
||||
*/
|
||||
form.render();
|
||||
|
||||
var selectedRow = null;
|
||||
|
||||
|
||||
var tableIns = table.render({
|
||||
table.render({
|
||||
elem: '#currentTableId',
|
||||
url: '/gnss/cmd/list',
|
||||
toolbar: '#toolbarDemo', // 指定工具栏
|
||||
defaultToolbar: ['filter', 'exports', 'print'], // 默认工具栏
|
||||
cols: [[
|
||||
{type: 'checkbox', fixed: 'left'}, // 添加复选框
|
||||
cols: [
|
||||
[
|
||||
{field: 'name', title: '指令名称',width:'20%'},
|
||||
{field: 'type', title: '类型',templet: '#typeTrans'},
|
||||
{field: 'content', title: '指令',width:'40%'},
|
||||
{title: '操作', toolbar: '#currentTableBar', width: 100} // 只保留发送按钮
|
||||
]],
|
||||
{title: '操作', toolbar: '#currentTableBar', align: "center", minWidth: 180}
|
||||
]
|
||||
],
|
||||
limits: [10, 15, 20, 25, 50, 100],
|
||||
limit: 10,
|
||||
page: true,
|
||||
skin: 'line',
|
||||
done: function(res, curr, count) {
|
||||
// 表格加载完成后，检查是否有需要选中的行
|
||||
// 这个部分是需要连续上移或者下移
|
||||
//
|
||||
if (lastMovedId && !isManualOperation) {
|
||||
var data = res.data;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].id == lastMovedId) {
|
||||
var index = i;
|
||||
var tr = $('.layui-table-body').find('tr[data-index="' + index + '"]');
|
||||
tr.find('.layui-form-checkbox').click();
|
||||
tr.addClass('highlight-row');
|
||||
setTimeout(function() {
|
||||
tr.removeClass('highlight-row');
|
||||
}, 1000);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
selectedRow = null;
|
||||
updateToolbarStatus();
|
||||
isMoving = false;
|
||||
isManualOperation = false;
|
||||
}
|
||||
});
|
||||
|
||||
function updateToolbarStatus() {
|
||||
var checkStatus = table.checkStatus('currentTableId');
|
||||
var hasSelection = checkStatus.data.length > 0;
|
||||
var isSingleSelection = checkStatus.data.length === 1;
|
||||
// 只能删除，其他的不给点
|
||||
$('#btnEdit').prop('disabled', !isSingleSelection);
|
||||
$('#btnTop').prop('disabled', !isSingleSelection);
|
||||
$('#btnUp').prop('disabled', !isSingleSelection);
|
||||
$('#btnDown').prop('disabled', !isSingleSelection);
|
||||
$('#btnBottom').prop('disabled', !isSingleSelection);
|
||||
$('#btnDelete').prop('disabled', !hasSelection);
|
||||
|
||||
if (isSingleSelection) {
|
||||
$('#btnEdit,#btnTop,#btnUp,#btnDown,#btnBottom').removeClass('layui-btn-disabled');
|
||||
} else {
|
||||
$('#btnEdit,#btnTop,#btnUp,#btnDown,#btnBottom').addClass('layui-btn-disabled');
|
||||
}
|
||||
|
||||
if (hasSelection) {
|
||||
$('#btnDelete').removeClass('layui-btn-disabled');
|
||||
} else {
|
||||
$('#btnDelete').addClass('layui-btn-disabled');
|
||||
}
|
||||
}
|
||||
|
||||
table.on('checkbox(currentTableFilter)', function(obj) {
|
||||
updateToolbarStatus();
|
||||
|
||||
if (obj.type === 'one' && !obj.checked) {
|
||||
isManualOperation = true;
|
||||
lastMovedId = null;
|
||||
}
|
||||
});
|
||||
|
||||
// table.on('rowDouble(currentTableFilter)', function(obj) {
|
||||
// var data = obj.data;
|
||||
// editCmd(data);
|
||||
// });
|
||||
|
||||
table.on('sort(currentTableFilter)', function(obj){
|
||||
isManualOperation = true;
|
||||
lastMovedId = null;
|
||||
skin: 'line'
|
||||
});
|
||||
|
||||
table.on('tool(currentTableFilter)', function (obj) {
|
||||
isManualOperation = true;
|
||||
lastMovedId = null;
|
||||
|
||||
var data = obj.data;
|
||||
if (obj.event === 'use') {
|
||||
sendCmd(data);
|
||||
}
|
||||
});
|
||||
|
||||
function editCmd(data) {
|
||||
form.val("cmdForm", {
|
||||
"id": data.id,
|
||||
"name": data.name,
|
||||
"type": data.type,
|
||||
"content": data.content
|
||||
});
|
||||
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '编辑指令',
|
||||
area: ['500px', '400px'],
|
||||
content: $('#cmdFormDialog'),
|
||||
btn: ['保存', '取消'],
|
||||
yes: function(index, layero) {
|
||||
saveCmd(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
layer.close(index);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sendCmd(data) {
|
||||
parent.setCmd(data.type, data.content);
|
||||
var deviceId = $('#device_id').val();
|
||||
var sendChannel = $('#send_channel').val();
|
||||
|
||||
$.ajax({
|
||||
type:"POST",
|
||||
url:"/gnss/config_cmd",
|
||||
data: {
|
||||
'device_id': deviceId,
|
||||
'send_channel': sendChannel,
|
||||
'device_id':[[${device_id}]],
|
||||
'send_channel':[[${send_channel}]],
|
||||
'cmd_type':data.type,
|
||||
'tx_win':data.content
|
||||
},
|
||||
@ -276,258 +120,57 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function deleteCmd(id) {
|
||||
layer.confirm('确定删除此指令?', function(index) {
|
||||
else if (obj.event === 'delete') {
|
||||
layer.confirm('确定删除'+data.name+"?", function(index){
|
||||
$.ajax({
|
||||
type:"POST",
|
||||
url:"/gnss/cmd/delete",
|
||||
data:{
|
||||
'del_id':id
|
||||
'del_id':data.id
|
||||
},
|
||||
success: function (data) {
|
||||
tableIns.reload();
|
||||
layer.close(index);
|
||||
//data是cotroller相应处理函数的返回值
|
||||
table.reload('currentTableId');
|
||||
},
|
||||
error: function () {
|
||||
console.log("ajax error");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 监听头工具栏事件
|
||||
table.on('toolbar(currentTableFilter)', function(obj){
|
||||
var checkStatus = table.checkStatus(obj.config.id);
|
||||
var data = checkStatus.data; // 获取选中的数据
|
||||
|
||||
// 如果不是移动操作，重置lastMovedId
|
||||
if (obj.event !== 'move_up' && obj.event !== 'move_down' &&
|
||||
obj.event !== 'go_top' && obj.event !== 'go_bottom') {
|
||||
lastMovedId = null;
|
||||
isManualOperation = true;
|
||||
}
|
||||
|
||||
switch(obj.event){
|
||||
case 'add':
|
||||
// 清空表单
|
||||
form.val("cmdForm", {
|
||||
"id": "",
|
||||
"name": "",
|
||||
"type": 0,
|
||||
"content": ""
|
||||
});
|
||||
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '添加指令',
|
||||
area: ['500px', '400px'],
|
||||
content: $('#cmdFormDialog'),
|
||||
btn: ['保存', '取消'],
|
||||
yes: function(index, layero) {
|
||||
saveCmd(index);
|
||||
},
|
||||
btn2: function(index, layero) {
|
||||
layer.close(index);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'edit':
|
||||
if(data.length === 1) {
|
||||
editCmd(data[0]);
|
||||
}
|
||||
break;
|
||||
case 'delete':
|
||||
if(data.length === 0) {
|
||||
layer.msg('请选择要删除的数据');
|
||||
return;
|
||||
}
|
||||
layer.confirm('确定删除选中的 ' + data.length + ' 条数据?', function(index) {
|
||||
var deleteCount = 0;
|
||||
var totalCount = data.length;
|
||||
|
||||
for(var i = 0; i < data.length; i++) {
|
||||
else if (obj.event === 'go_top') {
|
||||
$.ajax({
|
||||
type:"POST",
|
||||
url:"/gnss/cmd/delete",
|
||||
url:"/gnss/cmd/go_top",
|
||||
data:{
|
||||
'del_id': data[i].id
|
||||
'id':data.id
|
||||
},
|
||||
success: function() {
|
||||
deleteCount++;
|
||||
if(deleteCount === totalCount) {
|
||||
tableIns.reload();
|
||||
layer.close(index);
|
||||
}
|
||||
success: function (data) {
|
||||
table.reload('currentTableId');
|
||||
},
|
||||
error: function () {
|
||||
console.log("ajax error");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'go_top':
|
||||
if(data.length === 1) {
|
||||
moveCmd(data[0].id, 'go_top');
|
||||
}
|
||||
break;
|
||||
case 'move_up':
|
||||
if(data.length === 1) {
|
||||
moveCmd(data[0].id, 'move_up');
|
||||
}
|
||||
break;
|
||||
case 'move_down':
|
||||
if(data.length === 1) {
|
||||
moveCmd(data[0].id, 'move_down');
|
||||
}
|
||||
break;
|
||||
case 'go_bottom':
|
||||
if(data.length === 1) {
|
||||
moveCmd(data[0].id, 'go_bottom');
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
function saveCmd(index) {
|
||||
var formData = form.val("cmdForm");
|
||||
|
||||
if(!formData.name) {
|
||||
layer.msg('指令名称不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
var url = formData.id ? "/gnss/cmd/update" : "/gnss/cmd/add";
|
||||
|
||||
form.on('submit(saveBtn)', function (data) {
|
||||
$.ajax({
|
||||
type:"POST",
|
||||
url: url,
|
||||
url:"/gnss/cmd/add",
|
||||
contentType: "application/json;charset=UTF-8",
|
||||
data: JSON.stringify(formData),
|
||||
data: JSON.stringify(data.field),
|
||||
success: function (result) {
|
||||
// 关闭弹窗
|
||||
layer.close(index);
|
||||
|
||||
// 刷新表格
|
||||
tableIns.reload();
|
||||
layer.msg('保存成功');
|
||||
table.reload('currentTableId');
|
||||
},
|
||||
error: function () {
|
||||
console.log("ajax error");
|
||||
layer.msg('保存失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 移动指令（包括置顶、上移、下移、置底）
|
||||
function moveCmd(id, moveType) {
|
||||
// 如果当前正在进行移动操作，则忽略本次请求
|
||||
if (isMoving) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置锁定状态
|
||||
isMoving = true;
|
||||
|
||||
// 记录移动的行ID
|
||||
lastMovedId = id;
|
||||
|
||||
$.ajax({
|
||||
type:"POST",
|
||||
url:"/gnss/cmd/" + moveType,
|
||||
data:{
|
||||
'id': id
|
||||
},
|
||||
success: function() {
|
||||
tableIns.reload();
|
||||
},
|
||||
error: function() {
|
||||
console.log("ajax error");
|
||||
isMoving = false;
|
||||
lastMovedId = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var rightMenu = $('#rightMenu');
|
||||
$(document).on('contextmenu', '.layui-table-view .layui-table-body table tr', function(e) {
|
||||
var index = $(this).attr('data-index');
|
||||
var tableData = table.cache['currentTableId'];
|
||||
selectedRow = tableData[index];
|
||||
|
||||
$('.layui-table-body tr').removeClass('active-row');
|
||||
$(this).addClass('active-row');
|
||||
var mouseX = e.pageX;
|
||||
var mouseY = e.pageY;
|
||||
rightMenu.css({
|
||||
left: mouseX,
|
||||
top: mouseY
|
||||
}).show();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$(document).click(function() {
|
||||
rightMenu.hide();
|
||||
});
|
||||
|
||||
$('#ctx-menu-edit').click(function() {
|
||||
if(selectedRow) {
|
||||
editCmd(selectedRow);
|
||||
rightMenu.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#ctx-menu-send').click(function() {
|
||||
if(selectedRow) {
|
||||
sendCmd(selectedRow);
|
||||
rightMenu.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#ctx-menu-top').click(function() {
|
||||
if(selectedRow) {
|
||||
moveCmd(selectedRow.id, 'go_top');
|
||||
rightMenu.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#ctx-menu-up').click(function() {
|
||||
if(selectedRow) {
|
||||
moveCmd(selectedRow.id, 'move_up');
|
||||
rightMenu.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#ctx-menu-down').click(function() {
|
||||
if(selectedRow) {
|
||||
moveCmd(selectedRow.id, 'move_down');
|
||||
rightMenu.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#ctx-menu-bottom').click(function() {
|
||||
if(selectedRow) {
|
||||
moveCmd(selectedRow.id, 'go_bottom');
|
||||
rightMenu.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#ctx-menu-delete').click(function() {
|
||||
if(selectedRow) {
|
||||
deleteCmd(selectedRow.id);
|
||||
rightMenu.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.layui-table-page a', function() {
|
||||
lastMovedId = null;
|
||||
isManualOperation = true;
|
||||
});
|
||||
|
||||
$(document).on('click', '.layui-table-tool-panel li', function() {
|
||||
lastMovedId = null;
|
||||
isManualOperation = true;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -12,65 +12,6 @@
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.layui-btn-normal {
|
||||
background-color: #1aa094;
|
||||
}
|
||||
.icon-btn {
|
||||
/* width: 30px; */
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
}
|
||||
.layui-table-fixed-l .layui-table-body {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.layui-btn-normal:hover {
|
||||
background-color: #148e83;
|
||||
}
|
||||
.layui-table-fixed-l .layui-table-body {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.layui-table-cell {
|
||||
height: auto;
|
||||
line-height: 28px;
|
||||
padding: 6px 15px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.layui-btn-xs {
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.device-id-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #4b97d5f5;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
width: 100%;
|
||||
}
|
||||
.device-id-btn:hover {
|
||||
background-color: #339af0;
|
||||
}
|
||||
.device-id-btn i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.icon-only-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #1aa094;
|
||||
}
|
||||
.icon-only-btn:hover {
|
||||
color: #148e83;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -87,49 +28,34 @@
|
||||
form = layui.form,
|
||||
table = layui.table;
|
||||
var iframeIndex = parent.layer.getFrameIndex(window.name);
|
||||
/**
|
||||
* 初始化表单，要加上，不然刷新部分组件可能会不加载
|
||||
*/
|
||||
form.render();
|
||||
|
||||
table.render({
|
||||
elem: '#currentTableId',
|
||||
url: '/gnss/q_status/list',
|
||||
cols: [[
|
||||
{field: 'deviceid', title: '设备号', width: 120, templet: '#deviceIdTpl', align: 'center',sort: true},
|
||||
{field: 'devicetype', title: '设备类型', templet: '#typeTrans', width: 100},
|
||||
{field: 'project_id', title: '项目号', width: 100},
|
||||
{field: 'name', title: '工点', width: 150},
|
||||
{field: 'updatetime', title: '更新时间', templet: "<div>{{layui.util.toDateString(d.updatetime, 'yyyy-MM-dd HH:mm:ss')}}</div>", width: 170},
|
||||
{field: 'state', title: '状态', templet: '#stateTrans', width: 80, align: 'center'},
|
||||
{field: 'warning', title: '告警', templet: '#warningTrans', width: 80, align: 'center'},
|
||||
{field: 'voltage', title: '电压', width: 80},
|
||||
{field: 'temperature', title: '温度', width: 80},
|
||||
{field: 'humidity', title: '湿度', width: 80},
|
||||
{field: 'rssi', title: '信号', width: 80},
|
||||
{field: 'pitch', title: 'x倾角', width: 80},
|
||||
{field: 'roll', title: 'y倾角', width: 80},
|
||||
{field: 'satelliteinuse', title: '使用卫星数', width: 110},
|
||||
{field: 'latitude', title: '纬度', hide: true},
|
||||
{field: 'longitude', title: '经度', hide: true}
|
||||
{field: 'deviceid', title: '设备号', sort: true},
|
||||
{field: 'devicetype', title: '设备类型',templet: '#typeTrans'},
|
||||
{field: 'project_id', title: '项目号'},
|
||||
{field: 'name', title: '工点'},
|
||||
{field: 'updatetime', title: '更新时间', templet: "<div>{{layui.util.toDateString(d.updatetime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
|
||||
{field: 'state', title: '状态',templet: '#stateTrans'},
|
||||
{field: 'warning', title: '告警',templet: '#warningTrans'},
|
||||
{field: 'voltage', title: '电压'},
|
||||
{field: 'temperature', title: '温度'},
|
||||
{field: 'humidity', title: '湿度'},
|
||||
{field: 'rssi', title: '信号'},
|
||||
{field: 'pitch', title: 'x倾角'},
|
||||
{field: 'roll', title: 'y倾角'},
|
||||
{field: 'satelliteinuse', title: '使用卫星数'}
|
||||
]],
|
||||
limits: [10, 15, 20, 25, 50, 100],
|
||||
limit: 15,
|
||||
page: true,
|
||||
skin: 'line',
|
||||
even: true,
|
||||
loading: true,
|
||||
text: {
|
||||
none: '暂无符合条件的设备'
|
||||
}
|
||||
});
|
||||
|
||||
table.on('tool(currentTableFilter)', function(obj) {
|
||||
var data = obj.data;
|
||||
if (obj.event === 'locate') {
|
||||
if (data.latitude && data.longitude) {
|
||||
parent.locateDeviceOnMap(data.deviceid, data.latitude, data.longitude);
|
||||
} else {
|
||||
layer.msg('设备无经纬度信息，无法定位');
|
||||
}
|
||||
}
|
||||
skin: 'line'
|
||||
});
|
||||
|
||||
});
|
||||
@ -166,11 +92,5 @@
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="deviceIdTpl">
|
||||
<div class="device-id-btn" lay-event="locate">
|
||||
<i class="layui-icon layui-icon-location"></i>{{d.deviceid}}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user