CTLELE/html/frame2.html

1405 lines
61 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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" href="../css/bootstrap_min.css">
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/frame.css" />
<script type="text/javascript" src="../script/api.js"></script>
</head>
<body class="bj">
<div style="display: inline-block;vertical-align: top;margin-left: 50px;color: white;">
<h2>磁窑堡变屏位图</h2>
</div>
<div style="display: inline-block;vertical-align: top;margin-left: 30px;">
<button id="batch_btn" class="mui-btn mui-btn-warning " style="margin: 0;" onclick="batchlogin()">批量操作</button>
</div>
<div style="margin-left: 30px;display: inline-block;vertical-align: top;font-size: 30px;display: none;" id="bat">
<button class="mui-btn mui-btn-royal" style="margin: 0;" onclick="execComm()">执行命令</button>
<button class="mui-btn mui-btn-royal" style="margin: 0;" onclick="batchDeploy()">全部布防</button>
<button class="mui-btn mui-btn-royal" style="margin: 0;" onclick="batchDisarm()">全部撤防</button>
</div>
<div style="float: right;">
<button class="mui-btn mui-btn-danger" style="margin-top:0;" onclick="sign()">退出登录</button>
</div>
<div id="content1">
<div class="row">
<div class="row_content groove_dark" id="1">
<div class="font">
<span class="hide"><text class="frontid">1</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n79" class="cn_light">110KV线路电度表屏</p>
<div class="after">
<span class="hide"><text class="afterid">2</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="2">
<div class="font">
<span class="hide"><text class="frontid">3</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n80" class="cn_light">主变电度表屏</p>
<div class="after">
<span class="hide"><text class="afterid">4</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="3">
<div class="font">
<span class="hide"><text class="frontid">5</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n81" class="cn_light">35KV线路电度表屏</p>
<div class="after">
<span class="hide"><text class="afterid">6</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" style="width: 65px;" id="4">
<div class="font">
<span class="hide"><text class="frontid">7</text></span>
</div>
<p id="n82" class="cn_light" style="font-size: 12px;">光端机屏</p>
<div class="after">
<span class="hide" 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 class="hide" 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 class="hide" style="font-size: 12px;"><text class="afterid">10</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="6">
<div class="font">
<span class="hide"><text class="frontid">11</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n84" class="cn_light">光配屏</p>
<div class="after">
<span class="hide"><text class="afterid">12</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="7">
<div class="font">
<span class="hide"><text class="frontid">13</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n85" class="cn_light">调度数据网屏</p>
<div class="after">
<span class="hide"><text class="afterid">14</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="8">
<div class="font">
<span class="hide"><text class="frontid">15</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n86" class="cn_light">综合应用屏</p>
<div class="after">
<span class="hide"><text class="afterid">16</text>
</span>
</div>
</div>
<div class="row_content groove_dark" id="9">
<div class="font">
<span class="hide"><text class="frontid">17</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n87" class="cn_light">通信库</p>
<div class="after">
<span class="hide"><text class="afterid">18</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<span class="row_content"></span>
<div class="row_content groove_dark" id="10">
<div class="font">
<span class="hide"><text class="frontid">19</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n88" class="cn_light">蓄电池(一)</p>
<div class="after">
<span class="hide"><text class="afterid">20</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="11">
<div class="font">
<span class="hide"><text class="frontid">21</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n89" class="cn_light">蓄电池(二)</p>
<div class="after">
<span class="hide"><text class="afterid">22</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="12">
<div class="font">
<span class="hide"><text class="frontid">23</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n90" class="cn_light">整流器屏</p>
<div class="after">
<span class="hide"><text class="afterid">24</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="13">
<div class="font">
<span class="hide"><text class="frontid">25</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n91" class="cn_light">直流馈线屏</p>
<div class="after">
<span class="hide"><text class="afterid">26</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="14">
<div class="font">
<span class="hide"><text class="frontid">27</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n92" class="cn_light">交流馈线屏(一)</p>
<div class="after">
<span class="hide"><text class="afterid">28</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="15">
<div class="font">
<span class="hide"><text class="frontid">29</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n93" class="cn_light">交流电源屏</p>
<div class="after">
<span class="hide"><text class="afterid">30</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="16">
<div class="font">
<span class="hide"><text class="frontid">31</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n94" class="cn_light">交流馈线屏(二)</p>
<div class="after">
<span class="hide"><text class="afterid">32</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="17">
<div class="font">
<span class="hide"><text class="frontid">33</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n95" class="cn_light">通信UPS电源屏</p>
<div class="after">
<span class="hide"><text class="afterid">34</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="18">
<div class="font">
<span class="hide"><text class="frontid">35</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n96" class="cn_light">智能变电站辅助系统综合监控屏</p>
<div class="after">
<span class="hide"><text class="afterid">36</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="19">
<div class="font">
<span class="hide"><text class="frontid">37</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n97" class="cn_light">110KV线路测控屏</p>
<div class="after">
<span class="hide"><text class="afterid">38</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="20">
<div class="font">
<span class="hide"><text class="frontid">39</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n98" class="cn_light">UPS电源屏(二)</p>
<div class="after">
<span class="hide"><text class="afterid">40</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="21">
<div class="font">
<span class="hide"><text class="frontid">41</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n99" class="cn_light">UPS电源屏(一)</p>
<div class="after">
<span class="hide"><text class="afterid">42</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="22">
<div class="font">
<span class="hide"><text class="frontid">43</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n100" class="cn_light">122甲醇线线路保护屏</p>
<div class="after">
<span class="hide"><text class="afterid">44</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="23">
<div class="font">
<span class="hide"><text class="frontid">45</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n101" class="cn_light">121水磁线保护屏</p>
<div class="after">
<span class="hide"><text class="afterid">46</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="24">
<div class="font">
<span class="hide"><text class="frontid">47</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n102" class="cn_light">111徐磁线保护屏</p>
<div class="after">
<span class="hide"><text class="afterid">48</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="25">
<div class="font">
<span class="hide"><text class="frontid">49</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n103" class="cn_light">110KV故障录波屏</p>
<div class="after">
<span class="hide"><text class="afterid">50</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="26">
<div class="font">
<span class="hide"><text class="frontid">51</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n104" class="cn_light">110KV备自投及母联100保护测控屏</p>
<div class="after">
<span class="hide"><text class="afterid">52</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="27">
<div class="font">
<span class="hide"><text class="frontid">53</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n105" class="cn_light">112磁兴线保护屏</p>
<div class="after">
<span class="hide"><text class="afterid">54</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</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 class="hide"><text class="frontid">55</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n106" class="cn_light">35KV线路保护测控屏(二)</p>
<div class="after">
<span class="hide"><text class="afterid">56</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="29">
<div class="font">
<span class="hide"><text class="frontid">57</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n107" class="cn_light">35KV线路保护测控屏(一)</p>
<div class="after">
<span class="hide"><text class="afterid">58</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="30">
<div class="font">
<span class="hide"><text class="frontid">59</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n108" class="cn_light">电力系统同步时钟及故障解列屏</p>
<div class="after">
<span class="hide"><text class="afterid">60</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="31">
<div class="font">
<span class="hide"><text class="frontid">61</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n109" class="cn_light">1号主变保护屏</p>
<div class="after">
<span class="hide"><text class="afterid">62</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="32">
<div class="font">
<span class="hide"><text class="frontid">63</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n110" class="cn_light">1号主变测控屏</p>
<div class="after">
<span class="hide"><text class="afterid">64</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="33">
<div class="font">
<span class="hide"><text class="frontid">65</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n111" class="cn_light">2号主变保护屏</p>
<div class="after">
<span class="hide"><text class="afterid">66</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="34">
<div class="font">
<span class="hide"><text class="frontid">67</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n112" class="cn_light">2号主变测控屏</p>
<div class="after">
<span class="hide"><text class="afterid">68</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="35">
<div class="font">
<span class="hide"><text class="frontid">69</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n113" class="cn_light">Ι区数据通信网关机屏</p>
<div class="after">
<span class="hide"><text class="afterid">70</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="36">
<div class="font">
<span class="hide"><text class="frontid">71</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n114" class="cn_light">35KV 10KV备自投及10KV电压并列屏</p>
<div class="after">
<span class="hide"><text class="afterid">72</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="37">
<div class="font">
<span class="hide"><text class="frontid">73</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n115" class="cn_light">110KV及35KV电压并列屏</p>
<div class="after">
<span class="hide"><text class="afterid">74</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="38">
<div class="font">
<span class="hide"><text class="frontid">75</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n116" class="cn_light">110KV及10KV母联测控屏</p>
<div class="after">
<span class="hide"><text class="afterid">76</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
<div class="row_content groove_dark" id="39">
<div class="font">
<span class="hide"><text class="frontid">77</text></span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
<p id="n117" class="cn_light">公用测控屏</p>
<div class="after">
<span class="hide"><text class="afterid">78</text>
</span>
<span class="batch">
<img src="../image/sure.png" style="height: 20px;width: 20px;float: right;">
</span>
</div>
</div>
</div>
</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 type="text/javascript">
var SocketServerClient = null;
var db = null;
var socketManager = null;
var ipadd = '';
var port = 0;
var redColor = "rgb(255, 0, 0)";
var greenColor = "rgb(12, 247, 12)";
// 初始值
apiready = function() {
db = api.require('db');
socketManager = api.require('socketManager');
initSb();
jian();
ipconfig();
// truncate();
};
function ipconfig() {
//查询ip数据库
select(db, 'SELECT * FROM Ipconfig;', function(ret, err) {
console.log("ipconfig" + JSON.stringify(ret))
var iparray = ret.data;
if (iparray != '' && iparray != null) {
ipadd = iparray[0].ipadd;
port = iparray[0].port;
} else {
alert("未初始化配置,请先用管理员账号登录进行初始化配置")
}
})
}
//退出
function sign() {
mui.confirm("你确定要退出吗?", "", ['确定', '取消'], function(ret) {
if (ret.index == 0) {
api.closeWin();
}
})
}
//监听
function jian() {
api.addEventListener({
name: 'myEvent'
}, function(ret, err) {
if (ret.value.state == 'no') {
abc();
}
}); //放的位置无限制写在apiready最开始即可
}
function abc() {
window.location.reload(); //刷新页面
}
// 跳转到设置界面
function stnup() {
openHtml('settings', 'settings.html', {})
}
function openHtml(name, url) {
api.openWin({
name: name,
reload: true,
url: url
});
}
//查询数据库(根据id)
function selectid() {
for (var i = 0; i <= 43; i++) {
selectfromid(i);
}
}
// 初始化查询设备数据
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 code = $(this).attr("id"); //设备序号
var name = $(this).children('p').text(); //设备名称
var fontId = $(this).children('div:eq(0)').children('span:eq(0)').children().text(); //前id
var afterId = $(this).children('div:eq(1)').children('span:eq(0)').children().text(); //后id
// 插入
execute(db, "INSERT INTO Sb(Name,code,Slt,FontId,AfterId,fontState,afterState) VALUES ('" + name + "','" + code + "','3','" + fontId + "','" + afterId + "','0','0');", function(ret, err) {})
})
} else {
//如果查到数据了
ret.data.forEach(function(value, index) {
console.log(JSON.stringify(value))
$('#' + value.Code).children('div:eq(0)').children('span:eq(0)').children().text(value.FontId); //前id
$('#' + value.Code).children('div:eq(1)').children().children().text(value.AfterId); //后id
$('#' + value.Code).children('p').text(value.Name); //名称
// 根据数据库更改前状态
if (value.fontState == 0) { //前状态未知
$('#' + value.Code).children('div:eq(0)').css('background', 'linear-gradient(to right,red 50%,rgb(12, 247, 12) 50%)')
} else if (value.fontState == 1) { //前状态上升
$('#' + value.Code).children('div:eq(0)').css('background', greenColor)
} else if (value.fontState == 2) { //前状态下降
$('#' + value.Code).children('div:eq(0)').css('background', redColor)
}
// 根据数据库更改后状态
if (value.afterState == 0) { //后状态未知
$('#' + value.Code).children('div:eq(1)').css('background', 'linear-gradient(to right,red 50%,rgb(12, 247, 12) 50%)')
} else if (value.afterState == 1) { //后状态上升
$('#' + value.Code).children('div:eq(1)').css('background', greenColor)
} else if (value.afterState == 2) { //后状态下降
$('#' + value.Code).children('div:eq(1)').css('background', redColor)
}
})
}
})
}
//清空数据表
function truncate() {
execute(db, "delete from Sb;", function(ret, err) {
if (ret.status == true) {
mui.toast('数据表清空成功!');
// location.reload();
} else {
mui.toast('数据表清空失败!' + JSON.stringify(err));
}
})
}
// 执行命令
function execComm() {
//loading带文字
api.showProgress({
title: '命令下发中',
text: "请稍后……",
modal: false
});
var str2 = '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111';
var sbArr = [];
$('.row').children('div').each(function() {
var fontId = $(this).children('div:eq(0)').children('span:eq(0)').children().text(); //前id
var afterId = $(this).children('div:eq(1)').children('span:eq(0)').children().text(); //后id
var fontState = $(this).children('div:eq(0)').css('background-color'); //前状态
var afterState = $(this).children('div:eq(1)').css('background-color'); //后状态
var serialId = $(this).attr('id'); //序号
var sbObj = new Object();
sbObj.Code = serialId;
if (fontState == "rgb(255, 0, 0)") {
sbObj.fontState = 2;
str2 = replaceStr1(str2, (fontId - 1), '0');
} else {
sbObj.fontState = 1;
}
if (afterState == "rgb(255, 0, 0)") {
str2 = replaceStr1(str2, (afterId - 1), '0');
sbObj.afterState = 2;
} else {
sbObj.afterState = 1;
}
sbArr.push(sbObj);
})
console.log(str2);
//sendStr为要发送的数据
var sendStr = bin_to_hex(str2).slice(0, 2) + " " +
bin_to_hex(str2).slice(2, 4) + ' ' +
bin_to_hex(str2).slice(4, 6) + ' ' +
bin_to_hex(str2).slice(6, 8) + ' ' +
bin_to_hex(str2).slice(8, 10) + ' ' +
bin_to_hex(str2).slice(10, 12) + ' ' +
bin_to_hex(str2).slice(12, 14) + ' ' +
bin_to_hex(str2).slice(14, 16) + ' ' +
bin_to_hex(str2).slice(16, 18) + ' ' +
bin_to_hex(str2).slice(18, 20) + ' ' +
bin_to_hex(str2).slice(20, 22) + ' ' +
bin_to_hex(str2).slice(22, 24) + ' ' +
bin_to_hex(str2).slice(24, 26) + ' ' +
bin_to_hex(str2).slice(16, 18) + ' ' +
bin_to_hex(str2).slice(28, 30) + ' ' +
bin_to_hex(str2).slice(30, 32);
//需要效验的数据
var intended = '00 17 03 00 01 ' + sendStr + ' 01 00 00 00 ';
//组装数据
var sendmess = 'FE FE FE 7C 00 17 03 00 01 ' + sendStr + '01 00 00 00' + CRCdata(intended) + ' 16';
var v4 = sendmess.replace(/\s*/g, "");
var sid1;
createTcp(socketManager, ipadd, port, function(ret, err) {
console.log(JSON.stringify(ret))
if (ret.state == 201) {
api.hideProgress();
api.alert({
title: '',
msg: '请检查IP和端口配置',
}, function(ret, err) {
});
}
if (ret.state == 202) {
api.hideProgress();
api.confirm({
title: '',
msg: '连接超时,是否重试?',
buttons: ['确定', '取消']
}, function(ret, err) {
if (ret.buttonIndex == 1) {
execComm();
}
});
}
if (ret.state == 102) {
sid1 = ret.sid;
var Cr1 = '00 17 03 00 01 ' + sendStr + ' 01 00 00 00 ';
var v1 = 'FE FE FE 7C 00 17 03 00 01 ' + sendStr + ' 01 00 00 00 ' + CRCdata(intended) + ' 16';
var v4 = v1.replace(/\s*/g, "").toUpperCase();
stringToByte(v4);
var v5 = window.btoa(String.fromCharCode(...new Uint8Array(bytes)))
witeTcp(socketManager, sid1, v5, function(ret, err) {})
}
if (ret.state == 103) {
close(socketManager, sid1, function(ret, err) {});
//更新数据库
sbArr.forEach(function(item, index) {
updatestate(item.Code, "font", item.fontState)
updatestate(item.Code, "after", item.afterState)
});
api.hideProgress();
api.toast({
msg: '命令执行成功',
duration: 2000,
location: 'middle'
});
}
})
}
var bytes = new Array();
//字符串转byte数组
function stringToByte(str) {
var len, c;
bytes.length = 0;
len = str.length / 2;
for (var i = 0; i < len; i++) {
c = str.charCodeAt(i);
var num1, num2, num3;
num1 = str.charCodeAt(2 * i);
num2 = str.charCodeAt(2 * i + 1);
if ((num1 >= 65) & (num1 <= 70)) {
num1 = num1 - 65 + 10
} else if ((num1 >= 48) & (num1 <= 57)) {
num1 = num1 - 48
}
if ((num2 >= 65) & (num2 <= 70)) {
num2 = num2 - 65 + 10
} else if ((num2 >= 48) & (num2 <= 57)) {
num2 = num2 - 48
}
num3 = num1 * 16 + num2;
bytes.push(num3);
}
return bytes;
}
//字符串转base64
function encode(str) {
// 对字符串进行编码
var encode = encodeURI(str);
// 对编码的字符串转化base64
var base64 = btoa(encode);
return base64;
}
//解码
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
function base64_decode(input) {
var output = new Array();
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
var orig_input = input;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
if (orig_input != input)
alert("Warning! Characters outside Base64 range in input string ignored.");
if (input.length % 4) {
alert("Error: Input length is not a multiple of 4 bytes.");
return "";
}
var j = 0;
while (i < input.length) {
enc1 = keyStr.indexOf(input.charAt(i++));
enc2 = keyStr.indexOf(input.charAt(i++));
enc3 = keyStr.indexOf(input.charAt(i++));
enc4 = keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output[j++] = chr1;
if (enc3 != 64)
output[j++] = chr2;
if (enc4 != 64)
output[j++] = chr3;
}
return output;
}
var hD = '0123456789ABCDEF';
function dec2hex(d) {
var h = hD.substr(d & 15, 1);
while (d > 15) {
d >>= 4;
h = hD.substr(d & 15, 1) + h;
}
return h;
}
// 批量选择
function batchlogin() {
if ($('#bat').css('display') == "inline-block") {
$('#bat').css('display', 'none');
$("#batch_btn").addClass("mui-btn-warning");
$("#batch_btn").removeClass("mui-btn-royal");
$("#batch_btn").text("批量操作");
//移除监听事件
$('.font').unbind("click");
$('.after').unbind("click");
//刷新设备状态
initSb();
} else {
$("#batch_btn").text("批量模式");
$('#bat').css('display', 'inline-block');
$("#batch_btn").removeClass("mui-btn-warning");
$("#batch_btn").addClass("mui-btn-royal");
// 前批量选择//如果是红的变成绿的,如果绿的变成红的
$('.font').click(function(e) {
var bgi = $(event.currentTarget).css('background-image');
var bgc = $(event.currentTarget).css('background-color');
if (bgi == "linear-gradient(to right, rgb(255, 0, 0) 50%, rgb(12, 247, 12) 50%)" || bgc == "rgb(12, 247, 12)") {
$(event.currentTarget).css('background-image', "none")
$(event.currentTarget).css('background-color', "rgb(255, 0, 0)")
} else {
$(event.currentTarget).css('background-image', "none")
$(event.currentTarget).css('background-color', "rgb(12, 247, 12)")
}
})
// 后批量选择 //如果是红的变成绿的,如果绿的变成红的
$('.after').click(function(e) {
var bgi = $(event.currentTarget).css('background-image');
var bgc = $(event.currentTarget).css('background-color');
if (bgi == "linear-gradient(to right, rgb(255, 0, 0) 50%, rgb(12, 247, 12) 50%)" || bgc == "rgb(12, 247, 12)") {
$(event.currentTarget).css('background-image', "none")
$(event.currentTarget).css('background-color', "rgb(255, 0, 0)")
} else {
$(event.currentTarget).css('background-image', "none")
$(event.currentTarget).css('background-color', "rgb(12, 247, 12)")
}
})
}
}
// 双击设备名称时更改名称
$('.cn_light').dblclick(function(e) {
if ($('#bat').css('display') == "inline-block") {
return;
}
var serial = $(e.currentTarget).parent().attr("id"); // 序号
var name = $(event.currentTarget).text(); // 设备名称
mui.confirm("选择你要进行的操作", name, ["更改名称", "取消"], function(ret) {
if (ret.index == 0) { //更改名称
var updateName = prompt("请输入名称:");
execute(db, "UPDATE Sb SET Name='" + updateName + "' WHERE Slt = '3' AND Code='" + serial + "';", function(ret, err) {})
$(e.currentTarget).text(updateName);
}
})
})
// 前控制
$('.font').dblclick(function(e) {
if ($('#bat').css('display') == "inline-block") {
return;
}
var fontId = $(event.currentTarget).children('span:eq(0)').children().text(); //前id
var name = $(event.currentTarget).next("p").text(); // 设备名称
var serial = $(e.currentTarget).parent().attr("id"); // 序号
mui.confirm("选择你要进行的操作", name, ["前布防", "前撤防", "前停止", "取消"], function(fontRet) {
if (fontRet.index == 0) { //前布防
troops(serial, fontId, "font");
} else if (fontRet.index == 1) { //前撤防
disarm(serial, fontId, "font");
} else if (fontRet.index == 2) { //前停止
stop(serial, fontId, "font");
}
})
})
// 后控制
$('.after').dblclick(function(e) {
if ($('#bat').css('display') == "inline-block") {
return;
}
var afterId = $(event.currentTarget).children('span:eq(0)').children().text(); //后id
var name = $(event.currentTarget).prev("p").text(); // 设备名称
var serial = $(e.currentTarget).parent().attr("id"); // 序号
mui.confirm("选择你要进行的操作", name, ["后布防", "后撤防", "后停止", "取消"], function(afterRet) {
if (afterRet.index == 0) { //后布防
troops(serial, afterId, "after");
} else if (afterRet.index == 1) { //后撤防
disarm(serial, afterId, "after");
} else if (afterRet.index == 2) { //后停止
stop(serial, afterId, "after");
}
})
})
// 布防 serial序号equipmentId设备id,type是分辨前后控制
function troops(serial, equipmentId, type) {
//loading带文字
api.showProgress({
title: '命令下发中',
text: "请稍后……",
modal: false
});
var sid1;
createTcp(socketManager, ipadd, port, function(ret, err) {
console.log("**************" + JSON.stringify(ret))
if (ret.state == 201) {
api.hideProgress();
api.alert({
title: '',
msg: '请检查IP和端口配置',
}, function(ret, err) {
});
}
if (ret.state == 202) {
api.hideProgress();
alert("连接超时");
return;
}
if (ret.state == 102) {
sid1 = ret.sid;
var Crl = '00 0A 02 FF FF ' + toHex16(equipmentId) + ' 00 00 00 00 00';
var v1 = 'FE FE FE 7C 00 0A 02 FF FF ' + toHex16(equipmentId) + ' 00 00 00 00 00 ' + CRCdata(Crl) + ' 16';
var v4 = v1.replace(/\s*/g, "");
stringToByte(v4);
var v5 = window.btoa(String.fromCharCode(...new Uint8Array(bytes)));
witeTcp(socketManager, sid1, v5, function(ret, err) {})
}
if (ret.state == 103) {
console.log("!!!!!!!!!!" + sid1);
select(db, 'SELECT * FROM Sb where Slt="3" and Code="' + serial + '"', function(ret, err) {
if (ret.data.length > 0) {
// 如果是前布防
if (type == "font") {
execute(db, "update Sb set fontState='2',fontId=" + equipmentId + " where Slt='3' and Code='" + serial + "'", function(ret, err) {
console.log(JSON.stringify(err))
})
$("#" + serial).children("div:eq(0)").css("background-image", 'none');
$("#" + serial).children("div:eq(0)").css("background-color", redColor)
// 如果是后布防
} else if (type == "after") {
execute(db, "update Sb set afterState='2',aterId=" + equipmentId + " where Slt='3' and Code='" + serial + "'", function(ret, errr) {
console.log(JSON.stringify(err))
})
$("#" + serial).children("div:eq(1)").css("background-image", 'none');
$("#" + serial).children("div:eq(1)").css("background-color", redColor)
}
}
close(socketManager, sid1, function(ret, err) {});
})
api.hideProgress();
api.toast({
msg: '命令执行成功',
duration: 2000,
location: 'middle'
});
}
})
}
// 撤防
function disarm(serial, equipmentId, type) {
//loading带文字
api.showProgress({
title: '命令下发中',
text: "请稍后……",
modal: false
});
var sid1;
createTcp(socketManager, ipadd, port, function(ret, err) {
console.log("**************" + JSON.stringify(ret))
if (ret.state == 201) {
api.hideProgress();
api.alert({
title: '',
msg: '请检查IP和端口配置',
}, function(ret, err) {
});
}
if (ret.state == 202) {
api.hideProgress();
alert("连接超时");
return;
}
if (ret.state == 102) {
sid1 = ret.sid;
var Crl = '00 0A 02 FF FF ' + toHex16(equipmentId) + ' 01 00 00 00 00';
var v1 = 'FE FE FE 7C 00 0A 02 FF FF ' + toHex16(equipmentId) + ' 01 00 00 00 00 ' + CRCdata(Crl) + ' 16';
var v4 = v1.replace(/\s*/g, "");
stringToByte(v4);
var v5 = window.btoa(String.fromCharCode(...new Uint8Array(bytes)));
witeTcp(socketManager, sid1, v5, function(ret, err) {})
}
if (ret.state == 103) {
select(db, 'SELECT * FROM Sb where Slt="3" and Code="' + serial + '"', function(ret, err) {
if (ret.data.length > 0) {
// 如果是前撤防
if (type == "font") {
execute(db, "update Sb set fontState='1',fontId=" + equipmentId + " where Slt='3' and Code='" + serial + "'", function(ret, err) {
console.log(JSON.stringify(err))
})
$('#' + serial).children("div:eq(0)").css("background-image", 'none');
$('#' + serial).children("div:eq(0)").css("background-color", greenColor);
// 如果是后撤防
} else if (type == "after") {
execute(db, "update Sb set afterState='1',afterId=" + equipmentId + " where Slt='3' and Code='" + serial + "'", function(ret, errr) {
console.log(JSON.stringify(err))
})
$('#' + serial).children("div:eq(1)").css("background-image", 'none');
$('#' + serial).children("div:eq(1)").css("background-color", greenColor);
}
}
close(socketManager, sid1, function(ret, err) {});
})
api.hideProgress();
api.toast({
msg: '命令执行成功',
duration: 2000,
location: 'middle'
});
}
})
}
// 停止
function stop(serial, equipmentId, type) {
//loading带文字
api.showProgress({
title: '命令下发中',
text: "请稍后……",
modal: false
});
var sid1;
createTcp(socketManager, ipadd, port, function(ret, err) {
console.log("**************" + JSON.stringify(ret))
if (ret.state == 201) {
api.hideProgress();
api.alert({
title: '',
msg: '请检查IP和端口配置',
}, function(ret, err) {
});
}
if (ret.state == 202) {
alert("连接超时");
return;
}
if (ret.state == 102) {
sid1 = ret.sid;
var Crl = '00 0A 02 FF FF ' + toHex16(equipmentId) + ' 02 00 00 00 00';
var v1 = 'FE FE FE 7C 00 0A 02 FF FF ' + toHex16(equipmentId) + ' 02 00 00 00 00 ' + CRCdata(Crl) + ' 16';
var v4 = v1.replace(/\s*/g, "");
stringToByte(v4);
var v5 = window.btoa(String.fromCharCode(...new Uint8Array(bytes)));
witeTcp(socketManager, sid1, v5, function(ret, err) {})
}
if (ret.state == 103) {
select(db, 'SELECT * FROM Sb where Slt="3" and Code="' + serial + '"', function(ret, err) {
if (ret.data.length > 0) {
// 如果是前停止
if (type == "font") {
execute(db, "update Sb set fontState='0',fontId=" + equipmentId + " where Slt='3' and Code='" + serial + "'", function(ret, err) {
console.log(JSON.stringify(err))
})
$('#' + serial).children("div:eq(0)").css("background-color", "none");
$('#' + serial).children("div:eq(0)").css("background-image", "linear-gradient(to right, rgb(255, 0, 0) 50%, rgb(12, 247, 12) 50%)");
// 如果是后停止
} else if (type == "after") {
execute(db, "update Sb set afterState='0',afterId=" + equipmentId + " where Slt='3' and Code='" + serial + "'", function(ret, errr) {
console.log(JSON.stringify(err))
})
$('#' + serial).children("div:eq(1)").css("background-color", "none");
$('#' + serial).children("div:eq(1)").css("background-image", "linear-gradient(to right, rgb(255, 0, 0) 50%, rgb(12, 247, 12) 50%)");
}
}
close(socketManager, sid1, function(ret, err) {});
})
api.hideProgress();
api.toast({
msg: '命令执行成功',
duration: 2000,
location: 'middle'
});
}
})
}
//批量布防
function batchDeploy() {
$(".font").css("background-image", "none");
$(".font").css("background-color", "rgb(255, 0, 0)");
$(".after").css("background-image", "none");
$(".after").css("background-color", "rgb(255, 0, 0)");
}
//批量撤防
function batchDisarm() {
$(".font").css("background-image", "none");
$(".font").css("background-color", "rgb(12, 247, 12)");
$(".after").css("background-image", "none");
$(".after").css("background-color", "rgb(12, 247, 12)");
}
//修改状态 serial是序号,type是区分是前布防还是后布防,str是数据库插入的值
function updatestate(serial, type, str) {
//查询
select(db, "SELECT * FROM Sb WHERE Slt = '3' AND Code = '" + serial + "';", function(ret, err) {
if (type == "font") { // 前更改
if (ret.data.length > 0) {
execute(db, "UPDATE Sb SET fontState = '" + str + "' WHERE Slt = '3' AND Code = '" + serial + "'", function(ret, err) { //更改数据库
if (err != "") {
alert("更改数据库失败" + err);
}
});
}
} else if (type == "after") { // 后更改
if (ret.data.length > 0) {
execute(db, "UPDATE Sb SET afterState = '" + str + "' WHERE Slt = '3' AND Code = '" + serial + "'", function(ret, err) {
if (err != "") {
alert("更改数据库失败" + err);
}
});
}
}
})
}
//二进制转为十六进制
function bin_to_hex(str) {
let hex_array = [{
key: 0,
val: "0000"
}, {
key: 1,
val: "0001"
}, {
key: 2,
val: "0010"
}, {
key: 3,
val: "0011"
}, {
key: 4,
val: "0100"
}, {
key: 5,
val: "0101"
}, {
key: 6,
val: "0110"
}, {
key: 7,
val: "0111"
}, {
key: 8,
val: "1000"
}, {
key: 9,
val: "1001"
}, {
key: 'a',
val: "1010"
}, {
key: 'b',
val: "1011"
}, {
key: 'c',
val: "1100"
}, {
key: 'd',
val: "1101"
}, {
key: 'e',
val: "1110"
}, {
key: 'f',
val: "1111"
}]
let value = ''
let list = []
if (str.length % 4 !== 0) {
let a = "0000"
let b = a.substring(0, 4 - str.length % 4)
str = b.concat(str)
}
while (str.length > 4) {
list.push(str.substring(0, 4))
str = str.substring(4);
}
list.push(str)
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < hex_array.length; j++) {
if (list[i] == hex_array[j].val) {
value = value.concat(hex_array[j].key)
break
}
}
}
return value
}
// 替换字符串
const replaceStr1 = (str, index, char) => {
const strAry = str.split('');
strAry[index] = char;
return strAry.join('');
}
</script>
</html>