<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>报告下载</title>
|
|
<script src="./jquery.min.js"></script>
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #222F3D;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Arial, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
position: relative;
|
|
top: 0px;
|
|
}
|
|
|
|
.title_name {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 3%;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
z-index: 1;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
height: 20px;
|
|
/* padding: 0; */
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
border: 1px solid #41476B;
|
|
color: #B0BDD4;
|
|
}
|
|
|
|
td {
|
|
/* width:30%; */
|
|
height: 5.6vw;
|
|
text-align: center;
|
|
border: 1px solid #41476B;
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.th td{
|
|
font-size: 2.4vw;
|
|
background-color: #172533;
|
|
border: 1px solid #41476B;
|
|
}
|
|
|
|
.color {
|
|
background-color: #1F2F3E;
|
|
}
|
|
|
|
.color1 {
|
|
background-color: #172533;
|
|
}
|
|
|
|
|
|
.table_list {
|
|
margin: 10px 0 0 0;
|
|
position: relative;
|
|
height: 93vh;
|
|
overflow-y: scroll;
|
|
width:100%;
|
|
}
|
|
|
|
.table_list::-webkit-scrollbar {
|
|
display: none
|
|
}
|
|
|
|
.btn {
|
|
width: 62%;
|
|
height: 64%;
|
|
color: #fff;
|
|
background-color: rgb(57, 129, 141);
|
|
border-radius: 5px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.point {
|
|
cursor: pointer;
|
|
}
|
|
.shipin9-1 span {
|
|
position: absolute;
|
|
left: 9%;
|
|
top: 5px;
|
|
z-index: 99;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="biankaung ">
|
|
|
|
<!-- <span class="title_name">报告</span>
|
|
<img class="title" src="./img/title.png" alt="" srcset=""> -->
|
|
<div class="table_list">
|
|
<!-- 工作票信息 -->
|
|
<div class="table_div">
|
|
<table id="list">
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
let URL='http://localhost:8081';
|
|
// let URL='http://192.168.1.235:8081';
|
|
var device_address = ''
|
|
// <!-- 获取曲目列表 -->
|
|
function selectBridSongList(address) {
|
|
device_address = address
|
|
console.log(address)
|
|
$.ajax({
|
|
//请求方式
|
|
type: 'POST',
|
|
//发送请求的地址
|
|
url: `${URL}/api/brid/selectBridSongList`,
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
//发送到服务器的数据,对象必须为key/value的格式,jquery会自动转换为字符串格式
|
|
data: JSON.stringify({bridDevice: address, }),
|
|
success: function (result) {
|
|
var str = ''
|
|
for (var i = 0; i < result.rows.length; i++) {
|
|
if (i % 2 == 0) {
|
|
str += '<tr class="color ">' +
|
|
'<td>' + Number(i+1) + '</td>' +
|
|
'<td>' + result.rows[i].name + '</td>' +
|
|
'<td>' + result.rows[i].songName + '</td>' +
|
|
'<td>' + '<div class="btn point" onclick="setMusic(\'' + result.rows[i].id + '\')">' + '设置' + '</div>' + '</td>'
|
|
'</tr>'
|
|
} else {
|
|
str += '<tr class="color1">' +
|
|
'<td>' + Number(i+1) + '</td>' +
|
|
'<td>' + result.rows[i].name + '</td>' +
|
|
'<td>' + result.rows[i].songName + '</td>' +
|
|
'<td>' + '<div class="btn point" onclick="setMusic(\'' + result.rows[i].id + '\')">' + '设置' + '</div>' + '</td>'
|
|
'</tr>'
|
|
}
|
|
}
|
|
$('#list').html(
|
|
'<tr class="th">' +
|
|
'<td>序号</td>' +
|
|
'<td>设备名</td>' +
|
|
'<td>曲目</td>' +
|
|
'<td>操作</td>' +
|
|
'</tr>' +
|
|
str
|
|
)
|
|
}
|
|
})
|
|
}
|
|
|
|
// <!-- 选择曲目 -->
|
|
function setMusic(id) {
|
|
$.ajax({
|
|
//请求方式
|
|
type: 'POST',
|
|
//发送请求的地址
|
|
url: `${URL}/api/brid/setMusic`,
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
//发送到服务器的数据,对象必须为key/value的格式,jquery会自动转换为字符串格式
|
|
data: JSON.stringify({id:id}),
|
|
success: function (result) {
|
|
if(result.code == 200){
|
|
setMusicSave(id,result.data)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
// <!-- 保存曲目 -->
|
|
function setMusicSave(id,nowSong) {
|
|
$.ajax({
|
|
//请求方式
|
|
type: 'POST',
|
|
//发送请求的地址
|
|
url: `${URL}/api/brid/setMusicSave`,
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
//发送到服务器的数据,对象必须为key/value的格式,jquery会自动转换为字符串格式
|
|
data: JSON.stringify({address:device_address,nowSong:nowSong}),
|
|
success: function (result) {
|
|
if(result.code == 200){
|
|
window.parent.close_tanchuang()
|
|
window.parent.selectBridDeviceList()
|
|
}else {
|
|
showMessage(result.msg, 'error', 1000)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//弹出的信息
|
|
function showMessage(message, type, time) {
|
|
let str = ''
|
|
if (type == 'success') {
|
|
str = '<div class="success-message" style="width: 300px;height: 40px;text-align: center;background-color:#daf5eb;;color: rgba(103,194,58,0.7);position: fixed;left: 35%;top: 5%;margin-left:-150px;margin-top:-20px;line-height: 40px;border-radius: 5px;z-index: 9999">\n' +
|
|
'<span class="mes-text">' + message + '</span></div>'
|
|
} else {
|
|
str = '<div class="error-message" style="width: 300px;height: 40px;text-align: center;background-color: #f5f0e5;color: rgba(238,99,99,0.8);position: fixed;left: 35%;top: 5%;line-height: 40px;margin-left:-150px;margin-top:-20px;border-radius: 5px;;z-index: 9999">\n' +
|
|
'<span class="mes-text">' + message + '</span></div>'
|
|
}
|
|
$('body').append(str)
|
|
setTimeout(function () {
|
|
$('.' + type + '-message').detach()
|
|
}, time)
|
|
}
|
|
</script>
|
|
|
|
</html>
|