GateWay/public/web/screen_virtual.html

195 lines
7.8 KiB
HTML
Raw Permalink Normal View History

2024-11-13 11:26:59 +08:00
<!--
* @Descripttion:
* @version:
* @Author: Baron
* @Date: 2022-07-06 10:00:11
* @LastEditors: Andy
* @LastEditTime: 2024-06-25 14:20:32
-->
<!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">
<title>虚拟遥控器</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/content.css">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=0.01, maximum-scale=1, user-scalable=yes" />
<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">
<article class="midart">
<ul class="tag_control">
<li class="control_li" onclick="location.href='screen_main.html' ">
<img src="img/delete.png" /><span>返回首页</span>
</li>
<li name="pro_butt" value="0" class="control_li">
<img src="img/compicon.png" /><span name="pro_txt">加载中</span>
</li>
</ul>
</article>
</div>
<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="result_prompt_txt" class="toast">
<span>结果内容</span>
</div>
<script>
json_id = localStorage.getItem("json_id");
var screen_virtual_reply_parse_fun;
// $(function () {
var baseHost = document.location.origin;
var g_note = []; //备注
var g_quantity = 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 screen_virtual_reply_parse(json_str) {
let json = jQuery.parseJSON(json_str);
if (("pro_manage_ok" in json.led_protocol) && (json.led_protocol.pro_manage_ok != 0)) {
result_prompt_display(2, "打开节目成功");
}
if (("pro_manage" in json.led_protocol) && (json.led_protocol.pro_manage_ok == 0)) {
g_note = json.led_protocol.pro_manage.remarks;
g_quantity = json.led_protocol.pro_manage.quantity;
pro_butt_init(g_quantity);
result_prompt_display(2, "加载成功");
}
}
screen_virtual_reply_parse_fun = screen_virtual_reply_parse;
function get_pro_manage() {
var manage = {};
// manage.jsonid = json_id;
manage = new Object();
manage.get_pro_manage = 1;
let string = JSON.stringify(manage);
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + string + "}";
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');
2025-03-26 17:10:39 +08:00
xhr.send(send_string);
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
screen_virtual_reply_parse(xhr.responseText);
}
else {
result_prompt_display(2, "加载失败");
}
}
}
else {
MQTT_send(string);
}
json_id++;
localStorage.setItem("json_id", json_id);
}
get_pro_manage();
//发送指令
function only_dis_single(data) {
manage = {};
// manage.jsonid = json_id;
manage = new Object();
manage.pro_manage = new Object();
manage.pro_manage.type = 6;
manage.pro_manage.data = parseInt(data);
let string = JSON.stringify(manage);
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + string + "}";
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')
2025-03-26 17:10:39 +08:00
xhr.send(send_string)
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
screen_virtual_reply_parse(xhr.responseText);
} else {
result_prompt_display(2, "打开节目失败");
}
}
}
}
else {
MQTT_send(string);
}
json_id++;
localStorage.setItem("json_id", json_id);
}
function pro_butt_init(len) {
if (len == 0) {
//没有节目
document.getElementsByName("pro_butt")[0].style.display = "none";
alert("节目列表为空!")
} else {
//拷贝一份
var sourceNode = document.getElementsByName("pro_butt")[0];
document.getElementsByName("pro_txt")[0].innerHTML = g_note[0]
for (var i = 1; i < len; i++) {
//创建并克隆子节点
var cloneNode = sourceNode.cloneNode(true)
cloneNode.setAttribute("value", i)
sourceNode.parentNode.appendChild(cloneNode)
document.getElementsByName("pro_txt")[i].innerHTML = g_note[i]
}
//绑定单击事件
var butts = document.getElementsByName("pro_butt");
for (var x = 0; x < g_quantity; x++) {
butts[x].onmousedown = function () {
only_dis_single(this.getAttribute("value"));
}
}
}
}
// pro_butt_init(g_quantity)
$(function () {
if (/xazn/.test(navigator.userAgent)) {
// 在App中
document.addEventListener("UniAppJSBridgeReady", function () {
get_pro_manage();
});
} else {
get_pro_manage();
}
})
</script>
</body>
</html>