win代码上传
parent
224fe342a3
commit
31e9e8edba
|
|
@ -3,160 +3,88 @@
|
||||||
<head>
|
<head>
|
||||||
<th:block th:include="include :: header('自定义视图分页')"/>
|
<th:block th:include="include :: header('自定义视图分页')"/>
|
||||||
<meta charset="UTF-8">
|
<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>
|
</head>
|
||||||
<body class="gray-bg">
|
<body class="gray-bg">
|
||||||
|
<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">
|
||||||
<div id="vm">
|
<img class="cell_image" alt="image" :src="getImageUrl(item.status)">
|
||||||
<div class="row">
|
<p class="cell_p">{{item.radarIp}}</p>
|
||||||
<div class="col-sm-12 select-table table-striped">
|
<p class="cell_p">{{item.radarLocation}}</p>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</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>
|
<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">
|
<script th:inline="javascript">
|
||||||
// var prefix = ctx + "system/radarStatus";
|
|
||||||
// var datas = [[${@dict.getType('sys_normal_disable')}]];
|
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#vm',
|
el: '#vm',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tableData: [],
|
tableData: [],
|
||||||
total: 0,
|
|
||||||
socketUrl: 'ws://localhost/websocket', // WebSocket服务器地址
|
|
||||||
reconnectInterval: 5000, // 重连间隔时间
|
|
||||||
reconnectionAttempts: Infinity,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
axios.post('http://localhost/system/radarStatus/list', {})
|
axios.post('http://localhost/system/radarStatus/list', {})
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
this.tableData = data.data.rows
|
this.tableData = data.data.rows
|
||||||
this.total = data.data.total
|
|
||||||
console.log(this.tableData)
|
|
||||||
console.log(this.total)
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
var socket = new WebSocket("ws://localhost/websocket");
|
var socket = new WebSocket("ws://localhost/websocket");
|
||||||
|
|
||||||
socket.onopen = function(event) {
|
socket.onopen = function (event) {
|
||||||
console.log("WebSocket连接已打开");
|
console.log("WebSocket连接已打开");
|
||||||
};
|
};
|
||||||
|
|
||||||
socket.onmessage = (event)=> {
|
socket.onmessage = (event) => {
|
||||||
var data = JSON.parse(event.data);
|
var data = JSON.parse(event.data);
|
||||||
console.log("接收到数据：" + data);
|
console.log("接收到数据：" + JSON.stringify(data));
|
||||||
console.log(this.tableData)
|
this.tableData.forEach(item => {
|
||||||
this.tableData = [data]
|
if (item.radarIp === data.radarIp) {
|
||||||
// console.log(this.tableData)
|
item.status = data.status
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
socket.onclose = function(event) {
|
socket.onclose = function (event) {
|
||||||
console.log("WebSocket连接已关闭");
|
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>
|
</script>
|
||||||
</body>
|
</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>
|
</html>
|
||||||
Loading…
Reference in New Issue