CTLELE/html/updateFrame2.html

591 lines
24 KiB
HTML
Raw Permalink 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;color: blanchedalmond;">
<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">
<div class="row">
<div class="row_content groove_dark" id="1">
<div class="font">
<span><text class="frontid">1</text></span>
</div>
<p id="n79" class="cn_light">110KV线路电度表屏</p>
<div class="after">
<span><text class="afterid">2</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="2">
<div class="font">
<span><text class="frontid">3</text></span>
</div>
<p id="n80" class="cn_light">主变电度表屏</p>
<div class="after">
<span><text class="afterid">4</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="3">
<div class="font">
<span><text class="frontid">5</text></span>
</div>
<p id="n81" class="cn_light">35KV线路电度表屏</p>
<div class="after">
<span><text class="afterid">6</text>
</span>
</div>
</div>
<div class="row_content groove_dark" style="width: 65px;" id="4">
<div class="font">
<span style="font-size: 12px;"><text class="frontid">7</text></span>
</div>
<p id="n82" class="cn_light" style="font-size: 12px;">光端机屏</p>
<div class="after">
<span style="font-size: 12px;"><text class="afterid">8</text>
</span>
</div>
</div>
<div class="row_content groove_dark" style="width: 65px;" id="5">
<div class="font">
<span style="font-size: 12px;"><text class="frontid">9</text></span>
</div>
<p id="n83" class="cn_light" style="font-size: 12px;">综合配线屏</p>
<div class="after">
<span style="font-size: 12px;"><text class="afterid">10</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="6">
<div class="font">
<span><text class="frontid">11</text></span>
</div>
<p id="n84" class="cn_light">光配屏</p>
<div class="after">
<span><text class="afterid">12</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="7">
<div class="font">
<span><text class="frontid">13</text></span>
</div>
<p id="n85" class="cn_light">调度数据网屏</p>
<div class="after">
<span><text class="afterid">14</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="8">
<div class="font">
<span><text class="frontid">15</text></span>
</div>
<p id="n86" class="cn_light">综合应用屏</p>
<div class="after">
<span><text class="afterid">16</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="9">
<div class="font">
<span><text class="frontid">17</text></span>
</div>
<p id="n87" class="cn_light">通信库</p>
<div class="after">
<span><text class="afterid">18</text>
</span>
</div>
</div>
<span class="row_content"></span>
<div class="row_content groove_dark" id="10">
<div class="font">
<span><text class="frontid">19</text></span>
</div>
<p id="n88" class="cn_light">蓄电池(一)</p>
<div class="after">
<span><text class="afterid">20</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="11">
<div class="font">
<span><text class="frontid">21</text></span>
</div>
<p id="n89" class="cn_light">蓄电池(二)</p>
<div class="after">
<span><text class="afterid">22</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="12">
<div class="font">
<span><text class="frontid">23</text></span>
</div>
<p id="n90" class="cn_light">整流器屏</p>
<div class="after">
<span><text class="afterid">24</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="13">
<div class="font">
<span><text class="frontid">25</text></span>
</div>
<p id="n91" class="cn_light">直流馈线屏</p>
<div class="after">
<span><text class="afterid">26</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="14">
<div class="font">
<span><text class="frontid">27</text></span>
</div>
<p id="n92" class="cn_light">交流馈线屏(一)</p>
<div class="after">
<span><text class="afterid">28</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="15">
<div class="font">
<span><text class="frontid">29</text></span>
</div>
<p id="n93" class="cn_light">交流电源屏</p>
<div class="after">
<span><text class="afterid">30</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="16">
<div class="font">
<span><text class="frontid">31</text></span>
</div>
<p id="n94" class="cn_light">交流馈线屏(二)</p>
<div class="after">
<span><text class="afterid">32</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="17">
<div class="font">
<span><text class="frontid">33</text></span>
</div>
<p id="n95" class="cn_light">通信UPS电源屏</p>
<div class="after">
<span><text class="afterid">34</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="18">
<div class="font">
<span><text class="frontid">35</text></span>
</div>
<p id="n96" class="cn_light">智能变电站辅助系统综合监控屏</p>
<div class="after">
<span><text class="afterid">36</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="19">
<div class="font">
<span><text class="frontid">37</text></span>
</div>
<p id="n97" class="cn_light">110KV线路测控屏</p>
<div class="after">
<span><text class="afterid">38</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="20">
<div class="font">
<span><text class="frontid">39</text></span>
</div>
<p id="n98" class="cn_light">UPS电源屏(二)</p>
<div class="after">
<span><text class="afterid">40</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="21">
<div class="font">
<span><text class="frontid">41</text></span>
</div>
<p id="n99" class="cn_light">UPS电源屏(一)</p>
<div class="after">
<span><text class="afterid">42</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="22">
<div class="font">
<span><text class="frontid">43</text></span>
</div>
<p id="n100" class="cn_light">122甲醇线线路保护屏</p>
<div class="after">
<span><text class="afterid">44</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="23">
<div class="font">
<span><text class="frontid">45</text></span>
</div>
<p id="n101" class="cn_light">121水磁线保护屏</p>
<div class="after">
<span><text class="afterid">46</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="24">
<div class="font">
<span><text class="frontid">47</text></span>
</div>
<p id="n102" class="cn_light">111徐磁线保护屏</p>
<div class="after">
<span><text class="afterid">48</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="25">
<div class="font">
<span><text class="frontid">49</text></span>
</div>
<p id="n103" class="cn_light">110KV故障录波屏</p>
<div class="after">
<span><text class="afterid">50</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="26">
<div class="font">
<span><text class="frontid">51</text></span>
</div>
<p id="n104" class="cn_light">110KV备自投及母联100保护测控屏</p>
<div class="after">
<span><text class="afterid">52</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="27">
<div class="font">
<span><text class="frontid">53</text></span>
</div>
<p id="n105" class="cn_light">112磁兴线保护屏</p>
<div class="after">
<span><text class="afterid">54</text>
</span>
</div>
</div>
<span class="row_content"></span>
<span class="row_content"></span>
<span class="row_content"></span>
<span class="row_content"></span>
<span class="row_content"></span>
<span class="row_content"></span>
<div class="row_content groove_dark" id="28">
<div class="font">
<span><text class="frontid">55</text></span>
</div>
<p id="n106" class="cn_light">35KV线路保护测控屏(二)</p>
<div class="after">
<span><text class="afterid">56</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="29">
<div class="font">
<span><text class="frontid">57</text></span>
</div>
<p id="n107" class="cn_light">35KV线路保护测控屏(一)</p>
<div class="after">
<span><text class="afterid">58</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="30">
<div class="font">
<span><text class="frontid">59</text></span>
</div>
<p id="n108" class="cn_light">电力系统同步时钟及故障解列屏</p>
<div class="after">
<span><text class="afterid">60</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="31">
<div class="font">
<span><text class="frontid">61</text></span>
</div>
<p id="n109" class="cn_light">1号主变保护屏</p>
<div class="after">
<span><text class="afterid">62</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="32">
<div class="font">
<span><text class="frontid">63</text></span>
</div>
<p id="n110" class="cn_light">1号主变测控屏</p>
<div class="after">
<span><text class="afterid">64</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="33">
<div class="font">
<span><text class="frontid">65</text></span>
</div>
<p id="n111" class="cn_light">2号主变保护屏</p>
<div class="after">
<span><text class="afterid">66</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="34">
<div class="font">
<span><text class="frontid">67</text></span>
</div>
<p id="n112" class="cn_light">2号主变测控屏</p>
<div class="after">
<span><text class="afterid">68</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="35">
<div class="font">
<span><text class="frontid">69</text></span>
</div>
<p id="n113" class="cn_light">Ι区数据通信网关机屏</p>
<div class="after">
<span><text class="afterid">70</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="36">
<div class="font">
<span><text class="frontid">71</text></span>
</div>
<p id="n114" class="cn_light">35KV 10KV备自投及10KV电压并列屏</p>
<div class="after">
<span><text class="afterid">72</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="37">
<div class="font">
<span><text class="frontid">73</text></span>
</div>
<p id="n115" class="cn_light">110KV及35KV电压并列屏</p>
<div class="font">
<span><text class="afterid">74</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="38">
<div class="font">
<span><text class="frontid">75</text></span>
</div>
<p id="n116" class="cn_light">110KV及10KV母联测控屏</p>
<div class="after">
<span><text class="afterid">76</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="39">
<div class="font">
<span><text class="frontid">77</text></span>
</div>
<p id="n117" class="cn_light">公用测控屏</p>
<div class="after">
<span><text class="afterid">78</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="3"', 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 + "','3','" + 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 = '3' 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>