CTLELE/html/updateFrame1.html

627 lines
25 KiB
HTML
Raw Normal View History

2023-08-10 10:39:56 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>唐庄变屏位图</title>
<link rel="stylesheet" type="text/css" href="../css/mui_min.css" />
<link rel="stylesheet" type="text/css" href="../css/font_awesome_min.css" />
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/frame.css" />
<link rel="stylesheet" href="../plugins/layui/css/layui.css">
<script type="text/javascript" src="../script/api.js"></script>
<style>
.font {
display: block;
}
.after {
display: block;
margin-bottom: 30px;
}
.font,
.after {
line-height: 40px;
text-align: center;
color: black;
background-image: none;
background-color: rgb(99, 187, 228);
}
.layui-layer-molv .layui-layer-title {
color: black !important;
background-color: white !important;
}
.layui-layer-molv .layui-layer-btn a {
background: #1e9fff !important;
;
border-color: #1e9fff !important;
color: white !important;
}
.layui-form-select dl dd.layui-this {
background-color: #1e9fff !important;
}
.layui-layer-content {
padding: 40px;
}
</style>
</head>
<body class="bj">
<div style="display: inline-block;vertical-align: top;margin-left: 50px;">
<h2>唐庄变屏位图</h2>
</div>
<div style="float: right;">
<button class="mui-btn mui-btn-success mui-btn-loading" style="margin-top:0;margin-right: 130px;" onclick="sign()">退出</button>
</div>
<div id="content1" style="color:#fff;">
<div class="row" style="margin-bottom: 50px;">
<div class="row_content groove_dark" id="1">
<div class="font">
<span>前id:<text class="frontid">1</text></span>
</div>
<p id="n1" class="cn_light">综合配线屏(二)</p>
<div class="after">
<span>后id:<text class="afterid">2</text></span>
</div>
</div>
<div class="row_content groove_dark" id="2">
<div class="font">
<span>前id:<text class="frontid">1</text></span>
</div>
<p id="n1" class="cn_light">综合配线屏</p>
<div class="after">
<span>后id:<text class="afterid">2</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="3">
<div class="font">
<span>前id:<text class="frontid">3</text></span>
</div>
<p id="n2" class="cn_light">光端机屏</p>
<div class="after">
<span>后id:<text class="afterid">4</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="4">
<div class="font">
<span>前id:<text class="frontid">5</text></span>
</div>
<p id="n3" class="cn_light">综合信息数据网接入设备屏</p>
<div class="after">
<span>后id:<text class="afterid">6</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="5">
<div class="font">
<span>前id:<text class="frontid">7</text></span>
</div>
<p id="n4" class="cn_light">调度数据网屏(一)</p>
<div class="after">
<span>后id:<text class="afterid">8</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="6">
<div class="font">
<span>前id:<text class="frontid">9</text></span>
</div>
<p id="n5" class="cn_light">调度数据网屏(二)</p>
<div class="after">
<span>后id:<text class="afterid">10</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="7">
<div class="font">
<span>前id:<text class="frontid">11</text></span>
</div>
<p id="n6" class="cn_light">35KV故障解列屏</p>
<div class="after">
<span>后id:<text class="afterid">12</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="8">
<div class="font">
<span>前id:<text class="frontid">13</text></span>
</div>
<p id="n7" class="cn_light">远方备度屏</p>
<div class="after">
<span>后id:<text class="afterid">14</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="9">
<div class="font">
<span>前id:<text class="frontid">15</text></span>
</div>
<p id="n8" class="cn_light">110KV故障解列屏</p>
<div class="after">
<span>后id:<text class="afterid">16</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="10">
<div class="font">
<span>前id:<text class="frontid">17</text></span>
</div>
<p id="n9" class="cn_light">唐光十二线122保护测控屏</p>
<div class="after">
<span>后id:<text class="afterid">18</text>
</span>
</div>
</div>
<span class="row_content"></span>
<span class="row_content"></span>
<span class="row_content"></span>
<div class="row_content groove_dark" id="10">
<div class="font">
<span>前id:<text class="frontid">19</text></span>
</div>
<p id="n10" class="cn_light">UPS电源屏</p>
<div class="after">
<span>后id:<text class="afterid">20</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="11">
<div class="font">
<span>前id:<text class="frontid">21</text></span>
</div>
<p id="n11" class="cn_light">交流进线屏</p>
<div class="after">
<span>后id:<text class="afterid">22</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="12">
<div class="font">
<span>前id:<text class="frontid">23</text></span>
</div>
<p id="n12" class="cn_light">交流馈线屏(一)</p>
<div class="after">
<span>后id:<text class="afterid">24</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="13">
<div class="font">
<span>前id:<text class="frontid">25</text></span>
</div>
<p id="n13" class="cn_light">交流馈线屏(二)</p>
<div class="after">
<span>后id:<text class="afterid">26</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="14">
<div class="font">
<span>前id:<text class="frontid">27</text></span>
</div>
<p id="n14" class="cn_light">直流充电屏</p>
<div class="after">
<span>后id:<text class="afterid">28</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="15">
<div class="font">
<span>前id:<text class="frontid">29</text></span>
</div>
<p id="n15" class="cn_light">直流馈线屏(一)</p>
<div class="after">
<span>后id:<text class="afterid">30</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="16">
<div class="font">
<span>前id:<text class="frontid">31</text></span>
</div>
<p id="n16" class="cn_light">直流馈线屏(二)</p>
<div class="after">
<span>后id:<text class="afterid">32</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="17">
<div class="font">
<span>前id:<text class="frontid">33</text></span>
</div>
<p id="n17" class="cn_light">蓄电池屏(一)</p>
<div class="after">
<span>后id:<text class="afterid">34</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="18">
<div class="font">
<span>前id:<text class="frontid">35</text></span>
</div>
<p id="n18" class="cn_light">蓄电池屏(二)</p>
<div class="after">
<span>后id:<text class="afterid">36</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="19">
<div class="font">
<span>前id:<text class="frontid">37</text></span>
</div>
<p id="n19" class="cn_light">视频监控屏</p>
<div class="after">
<span>后id:<text class="afterid">38</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="20">
<div class="font">
<span>前id:<text class="frontid">39</text></span>
</div>
<p id="n20" class="cn_light">电能量采集终端屏</p>
<div class="after">
<span>后id:<text class="afterid">40</text>
</span>
</div>
</div>
<span class="row_content"></span>
<div class="row_content groove_dark" id="21">
<div class="font">
<span>前id:<text class="frontid">41</text></span>
</div>
<p id="n21" class="cn_light">备用(无屏)</p>
<div class="after">
<span>后id:<text class="afterid">42</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="22">
<div class="font">
<span>前id:<text class="frontid">43</text></span>
</div>
<p id="n22" class="cn_light">备用(无屏)</p>
<div class="after">
<span>后id:<text class="afterid">44</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="23">
<div class="font">
<span>前id:<text class="frontid">45</text></span>
</div>
<p id="n23" class="cn_light">2号主变测控屏</p>
<div class="after">
<span>后id:<text class="afterid">46</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="24">
<div class="font">
<span>前id:<text class="frontid">47</text></span>
</div>
<p id="n24" class="cn_light">2号主变保护屏</p>
<div class="after">
<span>后id:<text class="afterid">48</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="25">
<div class="font">
<span>前id:<text class="frontid">49</text></span>
</div>
<p id="n25" class="cn_light">1号主变测控屏</p>
<div class="after">
<span>后id:<text class="afterid">50</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="26">
<div class="font">
<span>前id:<text class="frontid">51</text></span>
</div>
<p id="n26" class="cn_light">1号主变保护屏</p>
<div class="after">
<span>后id:<text class="afterid">52</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="27">
<div class="font">
<span>前id:<text class="frontid">53</text></span>
</div>
<p id="n27" class="cn_light">电力系统同步时钟屏</p>
<div class="after">
<span>后id:<text class="afterid">54</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="28">
<div class="font">
<span>前id:<text class="frontid">55</text></span>
</div>
<p id="n28" class="cn_light">110KV母联测控屏</p>
<div class="after">
<span>后id:<text class="afterid">56</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="29">
<div class="font">
<span>前id:<text class="frontid">57</text></span>
</div>
<p id="n29" class="cn_light">110KV分段保护测控屏</p>
<div class="after">
<span>后id:<text class="afterid">58</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="30">
<div class="font">
<span>前id:<text class="frontid">59</text></span>
</div>
<p id="n30" class="cn_light">110KV蒋唐甲线111、庆唐线121线路保护测控屏</p>
<div class="after">
<span>后id:<text class="afterid">60</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="31">
<div class="font">
<span>前id:<text class="frontid">61</text></span>
</div>
<p id="n31" class="cn_light">110KV唐方线112线路保护测控屏</p>
<div class="after">
<span>后id:<text class="afterid">62</text>
</span>
</div>
</div>
<span class="row_content"></span>
<div class="row_content groove_dark" id="32">
<div class="font">
<span>前id:<text class="frontid">63</text></span>
</div>
<p class="cn_light">监控主机屏(一)</p>
<div class="after">
<span>后id:<text class="afterid">64</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="32">
<div class="font">
<span>前id:<text class="frontid">65</text></span>
</div>
<p class="cn_light">监控主机屏(二)</p>
<div class="after">
<span>后id:<text class="afterid">66</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="34">
<div class="font">
<span>前id:<text class="frontid">67</text></span>
</div>
<p id="n34" class="cn_light">综合应用服务器屏</p>
<div class="after">
<span>后id:<text class="afterid">68</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="35">
<div class="font">
<span>前id:<text class="frontid">69</text></span>
</div>
<p id="n35" class="cn_light">Ι区数据通信网关机屏</p>
<div class="after">
<span>后id:<text class="afterid">70</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="36">
<div class="font">
<span>前id:<text class="frontid">71</text></span>
</div>
<p id="n36" class="cn_light">ΙΙ区数据通信网关机屏</p>
<div class="after">
<span>后id:<text class="afterid">72</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="37">
<div class="font">
<span>前id:<text class="frontid">73</text></span>
</div>
<p id="n37" class="cn_light">公用测控屏</p>
<div class="after">
<span>后id:<text class="afterid">74</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="38">
<div class="font">
<span>前id:<text class="frontid">75</text></span>
</div>
<p id="n38" class="cn_light">网络记录分析装置屏</p>
<div class="after">
<span>后id:<text class="afterid">76</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="39">
<div class="font">
<span>前id:<text class="frontid">77</text></span>
</div>
<p id="n39" class="cn_light">110KV故障录波屏</p>
<div class="after">
<span>后id:<text class="afterid">78</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="40">
<div class="font">
<span>前id:<text class="frontid">79</text></span>
</div>
<p id="n40" class="cn_light">频率电压紧急控制屏</p>
<div class="after">
<span>后id:<text class="afterid">80</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="41">
<div class="font">
<span>前id:<text class="frontid">81</text></span>
</div>
<p id="n41" class="cn_light">电度表屏(一)</p>
<div class="after">
<span>后id:<text class="afterid">82</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="42">
<div class="font">
<span>前id:<text class="frontid">83</text></span>
</div>
<p id="n42" class="cn_light">电度表屏(二)</p>
<div class="after">
<span>后id:<text class="afterid">84</text>
</span>
</div>
</div>
</div>
</div>
<div id="idconfig_view" style="display: none;">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">后ID</label>
<div class="layui-input-block">
<input id="afterId" type="text" name="afterId" required lay-verify="required" placeholder="请输入前ID" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">前ID</label>
<div class="layui-input-block">
<input id="fontId" type="number" name="fontId" required lay-verify="required" placeholder="请输入后ID" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../script/command.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/crc.js"></script>
<script type="text/javascript" src="../script/cache.js"></script>
<script src="../plugins/layui/layui.js"></script>
<script type="text/javascript">
var SocketServerClient = null;
var db = null;
var socketManager = null;
var layer;
layui.use(['layer', 'form'], function() {
layer = layui.layer;
});
// 初始值
apiready = function() {
db = api.require('db');
socketManager = api.require('socketManager');
initSb();
// truncate();
};
function initSb() {
// 查询数据库
select(db, 'SELECT * FROM Sb WHERE Slt="2"', function(ret, err) {
// 如果不存在数据
if (ret.status && ret.data.length == 0) {
$('.row').children('div').each(function() {
var fontId = $(this).children('div:eq(0)').children().children().text(); //设备后id
var afterId = $(this).children('div:eq(1)').children().children().text(); //设备前id
var serial = $(this).attr('id'); //序号
var name = $(this).children('p').text(); //设备名称
// 保存数据
execute(db, "INSERT INTO Sb(Name,code,Slt,FontId,AfterId,fontState,afterState) VALUES ('" + name + "','" + serial + "','2','" + fontId + "','" + afterId + "','0','0');", function(ret, err) {})
})
// 如果存在数据
} else {
ret.data.forEach(function(value, index) {
$('#' + value.Code).children('div:eq(0)').children().children().text(value.FontId);
$('#' + value.Code).children('div:eq(1)').children().children().text(value.AfterId);
$(this).children('p').text(value.Name);
})
}
})
}
//双击更改状态
$('.groove_dark').bind("click", function(e) {
var serialId = $(this).attr("id");
$("#afterId").val($(this).children("div:eq(0)").children().children().text());
$("#fontId").val($(this).children("div:eq(1)").children().children().text());
layer.open({
skin: 'layui-layer-molv',
type: 1,
area: ['40%', '35%'],
title: $(this).children("p").html(),
shadeClose: false,
content: $('#idconfig_view'),
btn: ['确定', '取消'],
yes: function(index, layero) {
var afterId = $("#afterId").val();
var fontId = $("#fontId").val();
if (afterId < 128 && fontId < 128) {
execute(db, "UPDATE Sb SET FontId ='" + afterId + "',AfterId = '" + fontId + "' WHERE Slt = '2' AND Code = '" + serialId + "';", function(ret, err) {
if (err == "") {
layer.msg("更改成功!");
} else {
layer.msg("更改失败!" + JSON.stringify(err))
}
initSb();
layer.closeAll();
})
} else {
layer.msg("情输入小于128的值")
}
},
});
})
//退出
function sign() {
api.closeWin();
}
// 测试
function test() {
$('.row').children('div').each(function() {
console.log($(this).children('p').text())
})
}
//清空数据表
function truncate() {
execute(db, "delete from Sb;", function(ret, err) {
if (ret.status == true) {
mui.toast('数据表清空成功!');
} else {
mui.toast('数据表清空失败!' + JSON.stringify(err));
}
})
}
</script>
</html>