win代码上传
parent
224fe342a3
commit
31e9e8edba
|
|
@ -3,160 +3,88 @@
|
|||
<head>
|
||||
<th:block th:include="include :: header('自定义视图分页')"/>
|
||||
<meta charset="UTF-8">
|
||||
<script src="/js/vue.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
|
||||
|
||||
|
||||
<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 id="vm" style="padding: 24px">
|
||||
<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;background: white">
|
||||
<div v-for="item in tableData" style="height:100px;width: 100px;margin-left: 10px;margin-top: 20px">
|
||||
<img class="cell_image" alt="image" :src="getImageUrl(item.status)">
|
||||
<p class="cell_p">{{item.radarIp}}</p>
|
||||
<p class="cell_p">{{item.radarLocation}}</p>
|
||||
</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>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<div th:include="include :: footer"></div>
|
||||
<th:block th:include="include :: bootstrap-table-custom-view-js"/>
|
||||
|
||||
<script src="/js/vue.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
|
||||
<script th:inline="javascript">
|
||||
// var prefix = ctx + "system/radarStatus";
|
||||
// var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
new Vue({
|
||||
el: '#vm',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
total: 0,
|
||||
socketUrl: 'ws://localhost/websocket', // WebSocket服务器地址
|
||||
reconnectInterval: 5000, // 重连间隔时间
|
||||
reconnectionAttempts: Infinity,
|
||||
}
|
||||
},
|
||||
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) {
|
||||
socket.onopen = function (event) {
|
||||
console.log("WebSocket连接已打开");
|
||||
};
|
||||
|
||||
socket.onmessage = (event)=> {
|
||||
socket.onmessage = (event) => {
|
||||
var data = JSON.parse(event.data);
|
||||
console.log("接收到数据：" + data);
|
||||
console.log(this.tableData)
|
||||
this.tableData = [data]
|
||||
// console.log(this.tableData)
|
||||
console.log("接收到数据：" + JSON.stringify(data));
|
||||
this.tableData.forEach(item => {
|
||||
if (item.radarIp === data.radarIp) {
|
||||
item.status = data.status
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
socket.onclose = function(event) {
|
||||
socket.onclose = function (event) {
|
||||
console.log("WebSocket连接已关闭");
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getImageUrl(status) {
|
||||
if (status === 1) {
|
||||
return "http://localhost/img/radarGreen.png";
|
||||
} else if (status === 0) {
|
||||
return "http://localhost/img/radarRed.jpg";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 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>
|
||||
|
||||
<style>
|
||||
.cell_image{
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
.cell_p{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue