JayJiaJun/GateWay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
GateWay/public/web/screen_program.html

465 lines
21 KiB
HTML
Raw Permalink Normal View History

11.13
2024-11-13 11:26:59 +08:00
<!--
* @Descripttion:
* @version:
* @Author: Eugene
* @Date: 2022-07-18 15:56:54
* @LastEditors: Andy
* @LastEditTime: 2024-06-25 14:11:05
-->
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="js/webView.js"></script>
<meta charset="UTF-8">
<meta http-equiv="max-age" content="31536000">
<meta http-equiv="Pragma" content="public">
<meta http-equiv="Cache-control" content="public">
<meta http-equiv="Cache" content="public">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=0.01, maximum-scale=1, user-scalable=yes" />
<title>我的节目页面</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/content.css">
<link rel="stylesheet" href="css/style.css">
<link rel="prefetch" href="content_pattern1.html">
<link rel="prefetch" href="screen_main.html">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/MQTT_port.js"></script>
<script> src = "js/jsonid.js"</script>
</head>
</head>
<body>
<div class="contain">
<div class="screen">
<div class="item_list">
<p>节目列表</p>
<div class="pro">
<p class="list">
</p>
</div>
<div class="pro_right">
<div class="pro_icon">
<span><img name="delete_n" id="delete1" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set1" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch1" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<!-- <div class="clear"></div> -->
<div class="pro_icon">
<span><img name="delete_n" id="delete2" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set2" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch2" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<!-- <div class="clear"></div> -->
<div class="pro_icon">
<span><img name="delete_n" id="delete3" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set3" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch3" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<div class="pro_icon">
<span><img name="delete_n" id="delete4" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set4" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch4" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<div class="pro_icon">
<span><img name="delete_n" id="delete5" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set5" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch5" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<div class="pro_icon">
<span><img name="delete_n" id="delete6" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set6" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch6" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<div class="pro_icon">
<span><img name="delete_n" id="delete7" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set7" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch7" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<div class="pro_icon">
<span><img name="delete_n" id="delete8" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set8" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch8" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<div class="pro_icon">
<span><img name="delete_n" id="delete9" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set9" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch9" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
<div class="pro_icon">
<span><img name="delete_n" id="delete10" src="img/delete.png" alt=""></span>
<span><img name="setting" id="set10" src="img/setting.png" alt=""></span>
<input name="switch_n" id="switch10" class="bs_switch" type="checkbox" data-on="ON"
data-off="OFF" checked="">
</div>
</div>
</div>
<div class="clear"></div>
<article class="pro_insert">
<ul class="pro_bottom">
<li class="pro_li">
<a href="screen_main.html"><img id="home" src="img/home.png" alt=""><span
id="home">返回</span></a>
</li>
<li class="pro_li">
<img id="insert" src="img/insert.png" alt=""><span id="insert">添加</span>
</li>
<li class="pro_li">
<img id="refresh" src="img/refresh.png" alt=""><span id="refresh">刷新</span>
</li>
</ul>
</article>
</div>
<!-- 添加节目弹窗 开始 -->
<div class="ground" id="Ground"></div>
<div class="my_contain" id="popup">
<div class="screen_box">
<ul>
<li>
<input type="text" id="content" maxlength="5" placeholder="请输入备注名字"><br>
</li>
</ul>
<button name="submit" id="new_program">新建</button><br>
<button name="cancel" id="cancel">取消</button>
</div>
<div class="toast">
<span>节目备注不能为空</span>
</div>
</div>
<!-- 添加节目弹窗 end -->
<footer>
<ul>
<li><a href="screen_main.html">首页</a></li>
<li><a href="screen_par.html">屏参</a></li>
<li><a class="active" href="screen_program.html">节目管理</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<div style="height:80px" hidden="hidden"></div>
</footer>
<div id='a' class="toast">
<span>加载中....</span>
</div>
<div id="b" class="toast">
<span>加载失败</span>
</div>
<div id='c' class="toast">
<span>删除中....</span>
</div>
<div id="d" class="toast">
<span>删除失败</span>
</div>
<div id='e' class="toast">
<span>设置中....</span>
</div>
<div id="f" class="toast">
<span>设置失败</span>
</div>
<div id="result_prompt_txt" class="toast">
<span>结果内容</span>
</div>
</div>
<script>
var program_list_reply_parse_fun;
var g_quantity = 0;
var play_mode = 0;
const g_max = 10;
json_id = localStorage.getItem("json_id");
// $(function () {
var baseHost = document.location.origin
var count = 0;
//mode 提示消息显示模式(0关闭 1显示 3显示特定时间) txt显示内容
function result_prompt_display(mode, txt) {
document.getElementById("result_prompt_txt").getElementsByTagName("span")[0].innerHTML = txt;
if (mode == 0) {
$("#result_prompt_txt").css("display", "none");
} else if (mode == 1) {
$("#result_prompt_txt").css("display", "flex");
} else {
$("#result_prompt_txt").css("display", "flex");
setTimeout(function () {
$("#result_prompt_txt").css("display", "none");
}, 500);
}
}
/*********************************************************节目管理->添加节目**************************************************/
/***滑动限制***/
function stop() {
var mo = function (e) {
e.preventDefault();
};
document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", mo, false); //禁止页面滑动
}
/***取消滑动限制***/
function move() {
var mo = function (e) {
e.preventDefault();
};
document.body.style.overflow = ''; //出现滚动条
document.removeEventListener("touchmove", mo, false);
}
/*点击弹出按钮*/
function popBox() {
stop();
document.getElementById("popup").style.display = "block";
document.getElementById("Ground").style.display = "block";
document.getElementById("content").value = "";
};
/*点击关闭弹窗*/
function closeBox() {
move();
document.getElementById("popup").style.display = "none";
document.getElementById("Ground").style.display = "none";
}
function program_list_reply_parse(json_str) {
if (json_str == "") {
return;
}
let json = jQuery.parseJSON(json_str);
if ("pro_manage" in json.led_protocol) {
if (json.led_protocol.pro_manage_ok == 1) {
closeBox();
display(json.led_protocol);
}
else if ((json.led_protocol.pro_manage_ok == 4) || (json.led_protocol.pro_manage_ok == 5)) {
switch_display(json.led_protocol);
}
else {
display(json.led_protocol);
}
result_prompt_display(2, "节目操作成功");
}
}
program_list_reply_parse_fun = program_list_reply_parse;
$('#new_program').on('click', function () {
var cont = $('#content').val()
if (cont.trim().length) {
var manage = {};
// manage.jsonid = json_id;
manage = new Object();
manage.pro_manage = new Object();
manage.pro_manage.type = 1;
manage.pro_manage.data = (parseInt(g_quantity));
manage.pro_manage.remarks = new Array();
manage.pro_manage.remarks[0] = cont;
let string = JSON.stringify(manage);
3.26
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + string + "}";
11.13
2024-11-13 11:26:59 +08:00
if (MQTT_MODE == 0) {
var xhr = new XMLHttpRequest();
xhr.open('post', baseHost + '/communication', true);
xhr.setRequestHeader('content-type', 'application/json');
3.26
2025-03-26 17:10:39 +08:00
xhr.send(send_string);
11.13
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 || xhr.status == 200) {
program_list_reply_parse(xhr.responseText);
}
}
}
else {
MQTT_send(string);
}
} else if (!cont.trim().length) {
result_prompt_display(2, "节目备注不能为空");
}
json_id++;
localStorage.setItem("json_id", json_id);
})
$('#cancel').on('click', function () {
closeBox();
})
$('#insert').on('click', function () {
//alert("请输入节目备注名称！")
if (g_quantity < 10) {
popBox(); //window.location.href = './new_program.html?' + "quantity=" + g_quantity
} else {
alert('节目已达上限！')
}
})
/*********************************************************节目管理->刷新节目**************************************************/
function get_pro_manage() {
var manage = {};
// manage.jsonid = json_id;
manage = new Object();
manage.get_pro_manage = 1;
let string = JSON.stringify(manage);
3.26
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + string + "}";
11.13
2024-11-13 11:26:59 +08:00
if (MQTT_MODE == 0) {
var xhr = new XMLHttpRequest();
xhr.open('post', baseHost + '/communication', true);
xhr.setRequestHeader('content-type', 'application/json');
3.26
2025-03-26 17:10:39 +08:00
xhr.send(send_string);
11.13
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
program_list_reply_parse(xhr.responseText);
}
else {
result_prompt_display(2, "加载失败");
}
}
}
else {
MQTT_send(string);
}
}
$('#refresh').on('click', function () {
result_prompt_display(1, "加载中...");
get_pro_manage();
})
/*********************************************************节目管理->删除节目**************************************************/
//删除栈中第一个节目，起始索引为0
function del_icon(data) {
manage = {};
// manage.jsonid = json_id;
manage = new Object();
manage.pro_manage = new Object();
manage.pro_manage.type = 2;
manage.pro_manage.data = data;
result_prompt_display(1, "删除中...");
let string = JSON.stringify(manage);
3.26
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + string + "}";
11.13
2024-11-13 11:26:59 +08:00
if (MQTT_MODE == 0) {
var xhr = new XMLHttpRequest()
xhr.open('post', baseHost + '/communication', true)
xhr.setRequestHeader('content-type', 'application/json')
3.26
2025-03-26 17:10:39 +08:00
xhr.send(send_string);
11.13
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if ((xhr.readyState == 4) && (xhr.status == 200)) {
program_list_reply_parse(xhr.responseText);
} else {
result_prompt_display(2, "删除失败");
}
}
}
else {
MQTT_send(string);
}
json_id++;
localStorage.setItem("json_id", json_id);
}
$("[name = 'delete_n']").off("click");
$("[name = 'delete_n']").on("click", function () {
let num = $("[name='delete_n']").index(this);
del_icon(num)
});
/*********************************************************节目管理->开启或关闭节目**************************************************/
function switch_display(obj) {
console.log(JSON.stringify(obj))
for (i = 1; i <= g_max; i++) {
if (obj.pro_manage.play_flag[i - 1] == 0) {
var el = document.getElementById("switch" + i);
el.checked = false;
} else {
var el = document.getElementById("switch" + i);
el.checked = true;
}
}
}
function open_or_close_play(type, data) {
manage = {};
// manage.jsonid = json_id;
manage = new Object()
manage.pro_manage = new Object();
manage.pro_manage.type = type;
manage.pro_manage.data = data;
let string = JSON.stringify(manage);
3.26
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + string + "}";
11.13
2024-11-13 11:26:59 +08:00
result_prompt_display(1, "发送中...");
if (MQTT_MODE == 0) {
var xhr = new XMLHttpRequest()
xhr.open('post', baseHost + '/communication', true)
xhr.setRequestHeader('content-type', 'application/json')
3.26
2025-03-26 17:10:39 +08:00
xhr.send(send_string)
11.13
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
program_list_reply_parse(xhr.responseText);
} else {
result_prompt_display(2, "发送失败");
}
}
}
}
else {
MQTT_send(string);
}
json_id++;
localStorage.setItem("json_id", json_id);
}
$("[name = 'switch_n']").off("click");
$("[name = 'switch_n']").on("click", function () {
let num = $("[name='switch_n']").index(this);
if (this.checked == true) {
open_or_close_play(4, num)
} else {
open_or_close_play(5, num)
}
});
/*********************************************************节目管理->设置节目**************************************************/
var note;
$("[name = 'setting']").off("click");
$("[name = 'setting']").on("click", function () {
let num = $("[name='setting']").index(this);
window.location.href = "content_pattern1.html?" + "pro_num=" + num + "&note=" + note[num]
});
$('.list').on('click', 'p', function () {
$(this).toggleClass('bordercolor')
})
function display(obj) {
note = obj.pro_manage.remarks;
g_quantity = obj.pro_manage.quantity;
for (var i = 1; i <= g_max; i++) {
$("#delete" + i).hide()
}
for (var i = 1; i <= g_max; i++) {
$("#set" + i).hide()
}
for (var i = 1; i <= g_max; i++) {
$("#switch" + i).hide()
}
$('.list').empty()
for (i = 0; i < g_quantity; i++) {
var itemHTML = '<p>' + note[i] + '</p>'
$('.list').append(itemHTML).css('background', '#1c7fc3')
var num = i + 1
$("#delete" + num).show()
$("#set" + num).show()
$("#switch" + num).show()
}
switch_display(obj);
}
// get_pro_manage();
$(function () {
if (/xazn/.test(navigator.userAgent)) {
// 在App中
document.addEventListener("UniAppJSBridgeReady", function () {
get_pro_manage();
});
} else {
get_pro_manage();
}
})
</script>
</body>
</html>
Reference in New Issue Copy Permalink