win代码上传
parent
ce243f7e0a
commit
224fe342a3
|
|
@ -25,10 +25,7 @@ import org.slf4j.LoggerFactory;
|
|||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.ModelMap;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import javax.xml.crypto.Data;
|
||||
import java.net.Inet4Address;
|
||||
|
|
@ -71,7 +68,7 @@ public class RadarStatusController {
|
|||
|
||||
@PostMapping("/list")
|
||||
@ResponseBody
|
||||
public TableDataInfo list(SysRadar sysRadar) {
|
||||
public TableDataInfo list(@RequestBody SysRadar sysRadar) {
|
||||
TableDataInfo rspData = new TableDataInfo();
|
||||
List<SysRadar> radarList = service.selectRadarList(sysRadar);
|
||||
// 异步连接硬件
|
||||
|
|
@ -85,6 +82,7 @@ public class RadarStatusController {
|
|||
public void run() {
|
||||
|
||||
for (SysRadar radar : radarList) {
|
||||
System.out.println("=======radar=====");
|
||||
try {
|
||||
// ModbusResponse modbusResponse = new ModbusResponse();
|
||||
ModbusMaster master = ModbusUtils.getSlave(radar.getRadarIp(), 23);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,140 +1,162 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('自定义视图分页')" />
|
||||
<th:block th:include="include :: header('自定义视图分页')"/>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-page-size="10"
|
||||
data-show-custom-view="true" data-custom-view="customViewFormatter"
|
||||
data-show-custom-view-button="false">
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="profileTemplate">
|
||||
<div class="col-sm-4">
|
||||
<div class="contact-box">
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="text-center" >
|
||||
<img alt="image" class="img-circle m-t-xs img-responsive" src="%IMAGE%">
|
||||
<div class="m-t-xs font-bold">%radarIp%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<h3><strong>%radarLocation%</strong></h3>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="vm">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table">
|
||||
<tbody>
|
||||
<tr v-for="item in tableData" :key="item.radarIp">
|
||||
<td v-for="(value, key) in item" :key="key">{{ key }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div th:include="include :: footer"></div>
|
||||
<th:block th:include="include :: bootstrap-table-custom-view-js" />
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "system/radarStatus";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
<!-- <template id="profileTemplate">-->
|
||||
<!-- <div class="col-sm-4">-->
|
||||
<!-- <div class="contact-box">-->
|
||||
|
||||
var tableData = [];
|
||||
<!-- <div class="col-sm-4">-->
|
||||
<!-- <div class="text-center" >-->
|
||||
<!-- <img alt="image" class="img-circle m-t-xs img-responsive" src="%IMAGE%">-->
|
||||
<!-- <div class="m-t-xs font-bold">%radarIp%</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="col-sm-8">-->
|
||||
<!-- <h3><strong>%radarLocation%</strong></h3>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="clearfix"></div>-->
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
showExport: true,
|
||||
columns: [
|
||||
{
|
||||
field : 'radarIp',
|
||||
title : '雷达ip'
|
||||
},
|
||||
{
|
||||
field : 'radarLocation',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="javascript:;"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="javascript:;"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
|
||||
var socket = new WebSocket("ws://localhost/websocket");
|
||||
<div th:include="include :: footer"></div>
|
||||
<th:block th:include="include :: bootstrap-table-custom-view-js"/>
|
||||
|
||||
socket.onopen = function(event) {
|
||||
console.log("WebSocket连接已打开");
|
||||
};
|
||||
<script src="/js/vue.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
|
||||
socket.onmessage = (event)=> {
|
||||
<script th:inline="javascript">
|
||||
// var prefix = ctx + "system/radarStatus";
|
||||
// var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
var data = JSON.parse(event.data);
|
||||
console.log("接收到数据：" + data);
|
||||
$.each($.tableData, function (i, row) {
|
||||
if(row.radarIp === data.radarIp){
|
||||
console.log("rowbefore"+JSON.stringify(row))
|
||||
|
||||
row.status = data.status;
|
||||
console.log("rowafter"+JSON.stringify(row))
|
||||
}
|
||||
})
|
||||
var template = $('#profileTemplate').html()
|
||||
var view = ''
|
||||
$.each(data, function (i, row) {
|
||||
view += template
|
||||
.replace('%IMAGE%', getImageUrl(row.status))
|
||||
.replace('%radarIp%', row.radarIp)
|
||||
.replace('%radarLocation%', row.radarLocation)
|
||||
})
|
||||
|
||||
return `<div class="row mx-0">${view}</div>`
|
||||
};
|
||||
|
||||
socket.onclose = function(event) {
|
||||
console.log("WebSocket连接已关闭");
|
||||
};
|
||||
function customViewFormatter (data) {
|
||||
$.tableData = data
|
||||
var template = $('#profileTemplate').html()
|
||||
var view = ''
|
||||
$.each(data, function (i, row) {
|
||||
view += template
|
||||
.replace('%IMAGE%', getImageUrl(row.status))
|
||||
.replace('%radarIp%', row.radarIp)
|
||||
.replace('%radarLocation%', row.radarLocation)
|
||||
})
|
||||
|
||||
return `<div class="row mx-0">${view}</div>`
|
||||
}
|
||||
function getImageUrl(status) {
|
||||
if (status === 1) {
|
||||
|
||||
return "http://localhost/img/radarGreen.png";
|
||||
} else if (status === 0) {
|
||||
return "http://localhost/img/radarRed.jpg";
|
||||
new Vue({
|
||||
el: '#vm',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
total: 0,
|
||||
socketUrl: 'ws://localhost/websocket', // WebSocket服务器地址
|
||||
reconnectInterval: 5000, // 重连间隔时间
|
||||
reconnectionAttempts: Infinity,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
},
|
||||
mounted() {
|
||||
axios.post('http://localhost/system/radarStatus/list', {})
|
||||
.then((data) => {
|
||||
this.tableData = data.data.rows
|
||||
this.total = data.data.total
|
||||
console.log(this.tableData)
|
||||
console.log(this.total)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
created() {
|
||||
var socket = new WebSocket("ws://localhost/websocket");
|
||||
|
||||
socket.onopen = function(event) {
|
||||
console.log("WebSocket连接已打开");
|
||||
};
|
||||
|
||||
socket.onmessage = (event)=> {
|
||||
var data = JSON.parse(event.data);
|
||||
console.log("接收到数据：" + data);
|
||||
console.log(this.tableData)
|
||||
this.tableData = [data]
|
||||
// console.log(this.tableData)
|
||||
};
|
||||
|
||||
socket.onclose = function(event) {
|
||||
console.log("WebSocket连接已关闭");
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
// var tableData = [];
|
||||
//
|
||||
// $(function() {
|
||||
// var options = {
|
||||
// url: prefix + "/list",
|
||||
// showSearch: false,
|
||||
// showRefresh: false,
|
||||
// showToggle: false,
|
||||
// showColumns: false,
|
||||
// showExport: true,
|
||||
// columns: [
|
||||
// {
|
||||
// field : 'radarIp',
|
||||
// title : '雷达ip'
|
||||
// },
|
||||
// {
|
||||
// field : 'radarLocation',
|
||||
// title : '用户手机'
|
||||
// },
|
||||
// {
|
||||
// field: 'status',
|
||||
// title: '用户状态',
|
||||
// align: 'center',
|
||||
// formatter: function(value, row, index) {
|
||||
// return $.table.selectDictLabel(datas, value);
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// title: '操作',
|
||||
// align: 'center',
|
||||
// formatter: function(value, row, index) {
|
||||
// var actions = [];
|
||||
// actions.push('<a class="btn btn-success btn-xs" href="javascript:;"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
// actions.push('<a class="btn btn-danger btn-xs" href="javascript:;"><i class="fa fa-remove"></i>删除</a>');
|
||||
// return actions.join('');
|
||||
// }
|
||||
// }]
|
||||
// };
|
||||
// $.table.init(options);
|
||||
// });
|
||||
//
|
||||
|
||||
// function customViewFormatter (data) {
|
||||
// $.tableData = data
|
||||
// var template = $('#profileTemplate').html()
|
||||
// var view = ''
|
||||
// $.each(data, function (i, row) {
|
||||
// view += template
|
||||
// .replace('%IMAGE%', getImageUrl(row.status))
|
||||
// .replace('%radarIp%', row.radarIp)
|
||||
// .replace('%radarLocation%', row.radarLocation)
|
||||
// })
|
||||
//
|
||||
// return `<div class="row mx-0">${view}</div>`
|
||||
// }
|
||||
// function getImageUrl(status) {
|
||||
// if (status === 1) {
|
||||
//
|
||||
// return "http://localhost/img/radarGreen.png";
|
||||
// } else if (status === 0) {
|
||||
// return "http://localhost/img/radarRed.jpg";
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue