554 lines
22 KiB
HTML
554 lines
22 KiB
HTML
<!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" style="color:#fff;">
|
|
<div class="row" style="margin-bottom: 50px;width: 100%;">
|
|
<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">通信EPON设备屏</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">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="3">
|
|
<div class="font">
|
|
<span>后id:<text class="frontid">5</text></span>
|
|
</div>
|
|
<p id="n3" class="cn_light">UPS电源屏</p>
|
|
<div class="after">
|
|
<span>前id:<text class="afterid">6</text>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="row_content groove_dark" id="4">
|
|
<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="5">
|
|
<div class="font">
|
|
<span>后id:<text class="frontid">9</text></span>
|
|
</div>
|
|
<p id="n5" class="cn_light">35KV线路电度表屏(35kvI段)</p>
|
|
<div class="after">
|
|
<span>前id:<text class="afterid">10</text>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="row_content groove_dark" id="6">
|
|
<div class="font">
|
|
<span>后id:<text class="frontid">11</text></span>
|
|
</div>
|
|
<p id="n6" class="cn_light">110V出线、35KV线路电度表屏(35kvII段)</p>
|
|
<div class="after">
|
|
<span>前id:<text class="afterid">12</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="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="8">
|
|
<div class="font">
|
|
<span>后id:<text class="frontid">15</text></span>
|
|
</div>
|
|
<p id="n8" class="cn_light">光端机屏</p>
|
|
<div class="after">
|
|
<span>前id:<text class="afterid">16</text>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="row_content groove_dark" id="9">
|
|
<div class="font">
|
|
<span>后id:<text class="frontid">17</text></span>
|
|
</div>
|
|
<p id="n9" class="cn_light">通信综合配线屏</p>
|
|
<div class="after">
|
|
<span>前id:<text class="afterid">18</text>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<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">110KV分段保护屏</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>
|
|
<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">35KV线路保护测控屏(一)</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">35KV线路保护测控屏(二)</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">母联300及500备自投屏</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">110kv线路及母联测控屏</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">110kv露黑乙线112线路保护屏</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">110kv露黑乙线111线路保护屏</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">110KV故障录波器屏</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">35KV及10KV电压并列屏</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">1号主变测控屏</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">2号主变测控屏</p>
|
|
<div class="after">
|
|
<span>前id:<text class="afterid">62</text>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="row_content groove_dark" id="32">
|
|
<div class="font">
|
|
<span>后id:<text class="frontid">63</text></span>
|
|
</div>
|
|
<p id="n32" class="cn_light">故障并列屏</p>
|
|
<div class="after">
|
|
<span>前id:<text class="afterid">64</text>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="row_content groove_dark" id="33">
|
|
<div class="font">
|
|
<span>后id:<text class="frontid">65</text></span>
|
|
</div>
|
|
<p id="n33" class="cn_light">GPS时钟同步屏</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">2号主变保护屏</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">1号主变保护屏</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>
|
|
</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="1"', 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 + "','1','" + 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 = '1' 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> |