461 lines
20 KiB
HTML
461 lines
20 KiB
HTML
<!--
|
||
* @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);
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('post', baseHost + '/communication', true);
|
||
xhr.setRequestHeader('content-type', 'application/json');
|
||
xhr.send(string);
|
||
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);
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('post', baseHost + '/communication', true);
|
||
xhr.setRequestHeader('content-type', 'application/json');
|
||
xhr.send(string);
|
||
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);
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest()
|
||
xhr.open('post', baseHost + '/communication', true)
|
||
xhr.setRequestHeader('content-type', 'application/json')
|
||
xhr.send(string);
|
||
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);
|
||
result_prompt_display(1, "发送中...");
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest()
|
||
xhr.open('post', baseHost + '/communication', true)
|
||
xhr.setRequestHeader('content-type', 'application/json')
|
||
xhr.send(string)
|
||
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 + "¬e=" + 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>
|