基于web页面开发串口程序界面---html代码
原创基于web页面开发串口程序界面---html代码
原创
MiaoGIS
修改于 2020-09-14 17:48:44
修改于 2020-09-14 17:48:44
代码实现只展示读取设备参数的功能，写入即设置设备参数目前没有开发需求。
首先是html代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>串口程序</title>
<!-- Bootstrap -->
<link href="../static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style>
#result {
width: 680px;
margin: 0;
padding: 0 30px 0 5px;
height: 260px;
color: #333;
font-size: 18px;
line-height: 28px;
}
</style>
<script type="text/template" id="tabsTemplate">
<div>
<ul id="tabs" class="nav nav-tabs" role="tablist">
<% _.each(sensors,function(item,index){ %>
<li role="presentation" class=""><a href="#sensor<%=index+1%>" id="sensor<%=index+1%>-tab" role="tab" data-toggle="tab" aria-controls="sensor<%=index+1%>" aria-expanded="false">传感器<%=index+1%></a></li>
<% })%>
</ul>
<div id="tabsContent" class="tab-content">
<% _.each(sensors,function(item,index){ %>
<div role="tabpanel" class="tab-pane fade <%if(index==0)%>active in<%;%>" id="sensor<%=index+1%>" aria-labelledby="sensor<%=index+1%>-tab">
<div class="container-fluid">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">传感器<%=index+1%>设置</h3>
</div>
<div class="panel-body" >
<div class="well well-lg">
<div class="row" data-read="<%=cmdsConfig1[index+1]%>">
<div class="col-md-1" data-field="NUM" data-type="REVERSE_STR" data-size="1">编号</div>
<div class="col-md-1" data-field="KEY" data-type="REVERSE_STR" data-size="1">关键字</div>
<div class="col-md-1" data-field="NAME" data-type="BYTES" data-size="4">名称</div>
<div class="col-md-1" data-field="DOT" data-type="REVERSE_NUMBER" data-size="1">小数点</div>
<div class="col-md-2" data-field="UNIT" data-type="REVERSE_NUMBER" data-size="1">单位</div>
<div class="col-md-1" data-field="RANGE" data-type="REVERSE_NUMBER" data-size="1">测量范围</div>
<div class="col-md-1" data-field="MAX" data-type="REVERSE_NUMBER" data-size="1">显示最大值</div>
<div class="col-md-1" data-field="MIN" data-type="REVERSE_NUMBER" data-size="1">显示最小值</div>
<div class="col-md-1" data-field="AVG" data-type="REVERSE_NUMBER" data-size="1">显示平均值</div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<div class="col-md-1"><input data-field="NUM" type="text" class="form-control" placeholder="编号"></div>
<div class="col-md-1"><input data-field="KEY" type="text" class="form-control" placeholder="关键字"></div>
<div class="col-md-1"><input data-field="NAME" type="text" class="form-control" placeholder="名称"></div>
<div class="col-md-1"><input data-field="DOT" type="text" class="form-control" placeholder="小数点"></div>
<div class="col-md-2">
<select data-field="UNIT" type="text" class="form-control" placeholder="单位" disabled>
<option value=1>%LEL</option>
<option value=2>%VOL</option>
<option value=3>ppm</option>
<option value=4>mg/m3</option>
<option value=5>umol/mol</option>
<option value=6>ug/m3</option>
<option value=7>ppb</option>
<option value=8>℃</option>
<option value=9>%RH</option>
<option value=10>°</option>
<option value=11>m/s</option>
<option value=12>kpa</option>
<option value=13>lx</option>
<option value=14>db</option>
</select>
</div>
<div class="col-md-1"><input data-field="RANGE" type="text" class="form-control" placeholder="测量范围"></div>
<div class="col-md-1"><input data-field="MAX" type="text" class="form-control" placeholder="显示最大值"></div>
<div class="col-md-1"><input data-field="MIN" type="text" class="form-control" placeholder="显示最小值"></div>
<div class="col-md-1"><input data-field="AVG" type="text" class="form-control" placeholder="显示平均值"></div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning" data-role="write">写入</button>
</div>
</div>
</div>
</div>
<div class="well well-lg">
<div class="row" data-read="<%=cmdsConfig2[index+1]%>">
<div class="col-md-1" data-field="HIGH" data-type="REVERSE_NUMBER" data-size="1">高报</div>
<div class="col-md-1" data-field="LOW" data-type="REVERSE_NUMBER" data-size="1">低报</div>
<div class="col-md-1" data-field="HEAT" data-type="REVERSE_NUMBER" data-size="1">预热时间</div>
<div class="col-md-1" data-field="AD" data-type="REVERSE_NUMBER" data-size="1">检测AD</div>
<div class="col-md-1" data-field="CONCENT" data-type="REVERSE_NUMBER" data-size="1">检测浓度</div>
<div class="col-md-1" data-field="ZERO" data-type="REVERSE_NUMBER" data-size="1">标定零点</div>
<div class="col-md-1" data-field="ZEROAD" data-type="REVERSE_NUMBER" data-size="1">零点AD</div>
<div class="col-md-1" data-field="MARK" data-type="REVERSE_NUMBER" data-size="1">标定点</div>
<div class="col-md-1" data-field="MARKAD" data-type="REVERSE_NUMBER" data-size="1">标定点AD</div>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<div class="col-md-1"><input data-field="HIGH" type="text" class="form-control" placeholder="高报"></div>
<div class="col-md-1"><input data-field="LOW" type="text" class="form-control" placeholder="低报"></div>
<div class="col-md-1"><input data-field="HEAT" type="text" class="form-control" placeholder="预热时间"></div>
<div class="col-md-1"><input data-field="AD" type="text" class="form-control" placeholder="检测AD"></div>
<div class="col-md-1"><input data-field="CONCENT" type="text" class="form-control" placeholder="检测浓度"></div>
<div class="col-md-1"><input data-field="ZERO" type="text" class="form-control" placeholder="标定零点"></div>
<div class="col-md-1"><input data-field="ZEROAD" type="text" class="form-control" placeholder="零点AD"></div>
<div class="col-md-1"><input data-field="MARK" type="text" class="form-control" placeholder="标定点"></div>
<div class="col-md-1"><input data-field="MARKAD" type="text" class="form-control" placeholder="标定点AD"></div>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning" data-role="write">写入</button>
</div>
</div>
</div>
</div>
<div class="well well-lg">
<div class="row" data-read="<%=cmdsConfig3[index+1]%>">
<div class="col-md-2" data-field="ERROR" data-type="REVERSE_NUMBER" data-size="1">错误代码</div>
<div class="col-md-2" data-field="CONTROL" data-type="REVERSE_NUMBER" data-size="1">控制字</div>
<div class="col-md-2" data-field="INTERFACE" data-type="REVERSE_NUMBER" data-size="1">硬件连接口</div>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<div class="col-md-2">
<select data-field="ERROR" type="text" class="form-control" placeholder="错误代码" disabled>
<option value=0>异常</option>
<option value=1>正常</option>
<option value=2>异常</option>
</select>
</div>
<div class="col-md-2"><input data-field="CONTROL" type="text" class="form-control" placeholder="控制字"></div>
<div class="col-md-2"><input data-field="INTERFACE" type="text" class="form-control" placeholder="硬件连接口"></div>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning" data-role="write">写入</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%})%>
</div>
</div>
</script>
<script type="text/template" id="tableTemplate">
<div class="row" data-read="01 03 00 00 00 04 09 44">
<% _.each(sensors,function(item,index){ %>
<div class="col-md-1 hide" data-field="ID<%=index+1%>" data-type="REVERSE_STR" data-size="1">标识</div>
<div class="col-md-1 hide" data-field="RAW<%=index+1%>" data-type="REVERSE_NUMBER" data-size="1">原始值</div>
<div class="col-md-1 hide" data-field="CALC<%=index+1%>" data-type="REVERSE_NUMBER" data-size="1">计算值</div>
<div class="col-md-1 hide" data-field="STATUS<%=index+1%>" data-type="REVERSE_NUMBER" data-size="1">状态</div>
<%})%>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="bs-example" data-example-id="bordered-table">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>标识</th>
<th>原始值</th>
<th>计算值</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<% _.each(sensors,function(item,index){ %>
<tr>
<th scope="row"><%=index+1%></th>
<td> <select type="text" data-field="ID<%=index+1%>" class="form-control" placeholder="标识" disabled>
<option value="0010">温度</option>
<option value="0030">湿度</option>
<option value="0016">气压</option>
<option value="0013">风速</option>
<option value="0014">风向</option>
<option value="0011">PM25</option>
<option value="0032">PM10</option>
<option value="0019">PM100</option>
<option value="0012">噪声</option>
</select> </td>
<td> <input type="text" data-field="RAW<%=index+1%>" class="form-control" placeholder="原始值"> </td>
<td> <input type="text" data-field="CALC<%=index+1%>" class="form-control" placeholder="计算值"> </td>
<td>
<select type="text" data-field="STATUS<%=index+1%>" class="form-control" placeholder="状态" disabled>
<option value=0>异常</option>
<option value=1>正常</option>
<option value=2>异常</option>
</select>
</td>
</tr>
<%})%>
</tbody>
</table>
</div>
</script>
<script type="text/template" id="bordertablepanelTemplate">
<div class="row" data-read="01 03 31 50 00 09 21 8B" data-callback="initBordertable">
<% _.each(sensors,function(item,index){ %>
<div class="col-md-1 hide" data-field="CONTROLCODE<%=index+1%>" data-type="NUMBER_BITS" data-size="1">控制字</div>
<%})%>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<% _.each(sensors,function(item,index){ %>
<div class="col-md-1 hide"><input data-field="CONTROLCODE<%=index+1%>" type="text" class="form-control" placeholder="控制字"></div>
<%})%>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning" data-role="write">写入</button>
</div>
</div>
</div>
<div class="bs-example" data-example-id="simple-table" id="bordertableContainter">
</div>
</script>
<script type="text/template" id="bordertableTemplate">
<table class="table table-bordered">
<caption>数据上传设置.</caption>
<thead>
<tr>
<th>#</th>
<th>名称</th>
<th>开启通道</th>
<th>上传控制</th>
<th>显示控制</th>
</tr>
</thead>
<tbody>
<% _.each(sensors,function(item,index){ %>
<tr>
<th scope="row"><%=index+1%></th>
<td>(读取关键字显示名称)</td>
<td><button type="button" class="btn <%if(item[0]==1)%>btn-primary<%else%>btn-default<%;%>">开启</button><button type="button" class="btn <%if(item[0]==1)%>btn-default<%else%>btn-primary<%;%>">关闭</button></td>
<td><button type="button" class="btn <%if(item.slice(-2,-1)==1)%>btn-primary<%else%>btn-default<%;%>">上传</button><button type="button" class="btn <%if(item.slice(-2,-1)==1)%>btn-default<%else%>btn-primary<%;%>">不上传</button></td>
<td><button type="button" class="btn <%if(item.slice(-1)==1)%>btn-primary<%else%>btn-default<%;%>">显示</button><button type="button" class="btn <%if(item.slice(-1)==1)%>btn-default<%else%>btn-primary<%;%>">不显示</button></td>
</tr>
<%})%>
</tbody>
</table>
</script>
<script type="text/template" id="stripedtableTemplate">
<div class="row" data-read="01 03 31 00 00 09 30 8B" data-callback="refreshBordertable">
<% _.each(sensors,function(item,index){ %>
<div class="col-md-1" data-field="KEYWORD<%=index+1%>" data-type="STR" data-size="1">传感器<%=index+1%>关键字</div>
<%})%>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<% _.each(sensors,function(item,index){ %>
<div class="col-md-1"><input data-field="KEYWORD<%=index+1%>" type="text" class="form-control" placeholder="关键字"></div>
<%})%>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning" data-role="write">写入</button>
</div>
</div>
</div>
</script>
</head>
<body>
<script class="hide" id="test" type="text/template">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<% _.each(sensors,function(item,index){ %>
<li role="presentation" class=""><a href="#sensor<%=(index+1)%>" id="sensor<%=(index+1)%>-tab" role="tab" data-toggle="tab" aria-controls="sensor<%=(index+1)%>" aria-expanded="false">传感器<%=(index+1)%></a></li>
<% }) %>
</ul>
</script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">欢迎使用</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav">
<li><a href="#system_parameter">设备系统参数</a></li>
<li><a href="#sensor_config">传感器配置信息</a></li>
<li><a href="#sensor_status">传感器工作状态</a></li>
<li><a href="#machine_status">机器状态</a></li>
<li><a href="#sensor_controlcode">传感器控制字</a></li>
<li><a href="#sensor_keyword">传感器关键字</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="bs-example" id="init">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">串口设置</button>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">串口 <span class="caret"></span></button>
<ul class="dropdown-menu" data-role="ulPort">
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">波特率<span class="caret"></span></button>
<ul class="dropdown-menu" data-role="ulBaudrate">
<li data-value="9600"><a href="#">9600</a></li>
<li data-value="19200"><a href="#">19200</a></li>
<li data-value="38400"><a href="#">38400</a></li>
<li data-value="57600"><a href="#">57600</a></li>
<li data-value="115200" class="active"><a href="#">115200</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">数据位 <span class="caret"></span></button>
<ul class="dropdown-menu" data-role="ulBytesize">
<li data-value="5"><a href="#">5</a></li>
<li data-value="6"><a href="#">6</a></li>
<li data-value="7"><a href="#">7</a></li>
<li data-value="8" class="active"><a href="#">8</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">校验位 <span class="caret"></span></button>
<ul class="dropdown-menu" data-role="ulParity">
<li data-value="N" class="active"><a href="#">None</a></li>
<li data-value="E"><a href="#">Even</a></li>
<li data-value="0"><a href="#">Odd</a></li>
<li data-value="M"><a href="#">Mark</a></li>
<li data-value="S"><a href="#">Space</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">停止位 <span class="caret"></span></button>
<ul class="dropdown-menu" data-role="ulStopbits">
<li data-value="1" class="active"><a href="#">1</a></li>
<li data-value="1.5"><a href="#">1.5</a></li>
<li data-value="2"><a href="#">2</a></li>
</ul>
</div><!-- /btn-group -->
</div>
<div class="col-md-6">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-warning" data-role="open">开始</button>
<button type="button" class="btn btn-warning" data-role="close">停止</button>
<button type="button" class="btn btn-warning" data-role="clear">清除</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="指令" id="cmdText">
<span class="input-group-btn">
<button class="btn btn-danger" type="button" data-role="send">发送!</button>
</span>
</div>
<div class="alert alert-info" role="alert" data-role="info">
<p></p>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<textarea class="form-control" placeholder="" id="result" rows=20 cols="100"></textarea>
</div>
</div>
</div>
</div><!-- /.container-fluid -->
</div>
<div class="bs-example hide" data-role="readwrite">
<div class="panel panel-danger" id="system_parameter">
<div class="panel-heading">
<h3 class="panel-title">设备系统参数</h3>
</div>
<div class="panel-body">
<div class="well well-lg">
<div class="row" data-read="01 03 10 00 00 27 10 01">
<div class="col-md-1" data-field="VERSION" data-type="REVERSE_STR" data-size="1">参数版本</div>
<div class="col-md-2" data-field="NUM" data-type="BYTES" data-size="12">设备编号</div>
<div class="col-md-2" data-field="IP1" data-type="BYTES" data-size="10">服务器IP1</div>
<div class="col-md-2" data-field="IP2" data-type="BYTES" data-size="10">服务器IP2</div>
<div class="col-md-1" data-field="PORT1" data-type="BYTES" data-size="3">服务器端口1</div>
<div class="col-md-1" data-field="PORT2" data-type="BYTES" data-size="3">服务器端口2</div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<div class="col-md-1"><input data-field="VERSION" type="text" class="form-control" placeholder="参数版本"></div>
<div class="col-md-2"><input data-field="NUM" type="text" class="form-control" placeholder="设备编号"></div>
<div class="col-md-2"><input data-field="IP1" type="text" class="form-control" placeholder="服务器IP1"></div>
<div class="col-md-2"><input data-field="IP2" type="text" class="form-control" placeholder="服务器IP2"></div>
<div class="col-md-1"><input data-field="PORT1" type="text" class="form-control" placeholder="服务器端口1"></div>
<div class="col-md-1"><input data-field="PORT2" type="text" class="form-control" placeholder="服务器端口2"></div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning" data-role="write">写入</button>
</div>
</div>
</div>
</div>
<div class="well well-lg">
<div class="row" data-read="01 03 10 27 00 3f 11 b1">
<div class="col-md-1" data-field="ENTRY" data-type="BYTES" data-size="24">接入点</div>
<div class="col-md-1" data-field="USERNAME" data-type="BYTES" data-size="24">用户名</div>
<div class="col-md-1" data-field="PASSWORD" data-type="BYTES" data-size="10">密码</div>
<div class="col-md-1" data-field="UPLOADFREQUENCY" data-type="REVERSE_NUMBER" data-size="1">上传间隔</div>
<div class="col-md-1" data-field="CONNECTFREQUENCY" data-type="REVERSE_NUMBER" data-size="1">连接服务器间隔</div>
<div class="col-md-1" data-field="CONNECTTIMEOUT" data-type="REVERSE_NUMBER" data-size="1">连接超时</div>
<div class="col-md-1" data-field="MESSAGETIMEOUT" data-type="REVERSE_NUMBER" data-size="1">通讯超时</div>
<div class="col-md-1" data-field="SERIALTIMEOUT" data-type="REVERSE_NUMBER" data-size="1">串口超时</div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<div class="col-md-1"><input type="text" data-field="ENTRY" class="form-control" placeholder="接入点"></div>
<div class="col-md-1"><input type="text" data-field="USERNAME" class="form-control" placeholder="用户名"></div>
<div class="col-md-1"><input type="text" data-field="PASSWORD" class="form-control" placeholder="密码"></div>
<div class="col-md-1"><input type="text" data-field="UPLOADFREQUENCY" class="form-control" placeholder="上传间隔"></div>
<div class="col-md-1"><input type="text" data-field="CONNECTFREQUENCY" class="form-control" placeholder="连接服务器间隔"></div>
<div class="col-md-1"><input type="text" data-field="CONNECTTIMEOUT" class="form-control" placeholder="连接超时"></div>
<div class="col-md-1"><input type="text" data-field="MESSAGETIMEOUT" class="form-control" placeholder="通讯超时"></div>
<div class="col-md-1"><input type="text" data-field="SERIALTIMEOUT" class="form-control" placeholder="串口超时"></div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning">写入</button>
</div>
</div>
</div>
</div>
<div class="well well-lg">
<div class="row" data-read="01 03 10 66 00 08 D3 A0">
<div class="col-md-1" data-field="GPSFREQUENCY" data-type="REVERSE_NUMBER" data-size="1">GPS间隔</div>
<div class="col-md-1" data-field="WORKFREQUENCY" data-type="REVERSE_NUMBER" data-size="1">采集间隔</div>
<div class="col-md-1" data-field="ADMINPASSWORD" data-type="NUMBER_HEXS" data-size="3">管理密码</div>
<div class="col-md-1" data-field="IOTPASSWORD" data-type="NUMBER_HEXS" data-size="3">平台密码</div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<div class="col-md-1"><input data-field="GPSFREQUENCY" type="text" class="form-control" placeholder="GPS间隔"></div>
<div class="col-md-1"><input data-field="WORKFREQUENCY" type="text" class="form-control" placeholder="采集间隔"></div>
<div class="col-md-1"><input data-field="ADMINPASSWORD" type="text" class="form-control" placeholder="管理密码"></div>
<div class="col-md-1"><input data-field="IOTPASSWORD" type="text" class="form-control" placeholder="平台密码"></div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning">写入</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="sensor_config">
<div class="panel-heading">
<h3 class="panel-title">传感器配置信息</h3>
</div>
<div class="panel-body">
<div class="container-fluid">
<div class="row" data-read="01 03 20 00 00 03 0b 0e" data-callback="initTabs">
<!-- 01 03 20 00 00 06 01 00 00 00 09 00 6E F6 -->
<div class="col-md-2" data-field="VERSION" data-type="REVERSE_STR" data-size="1">配置版本号</div>
<div class="col-md-2" data-field="FLAG" data-type="REVERSE_NUMBER" data-size="1">有效标志</div>
<div class="col-md-2" data-field="COUNT" data-type="REVERSE_NUMBER" data-size="1">有效传感器数量</div>
<div class="col-md-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol">
<div class="col-md-2"><input type="text" data-field="VERSION" class="form-control" placeholder="配置版本号" readonly></div>
<div class="col-md-2"><input type="text" data-field="FLAG" class="form-control" placeholder="有效标志" readonly></div>
<div class="col-md-2"><input type="text" data-field="COUNT" class="form-control" placeholder="有效传感器数量" readonly></div>
<div class="col-md-2 hide">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning">写入</button>
</div>
</div>
</div>
<div class="bs-example bs-example-tabs" id="tabsContainter">
</div>
</div>
</div>
</div>
<div class="panel panel-success" id="sensor_status">
<div class="panel-heading">
<h3 class="panel-title">传感器工作状态</h3>
</div>
<div class="panel-body" id="tableContainter">
<h3>需要读取过传感器配置信息才可使用!</h3>
</div>
</div>
<div class="panel panel-info" id="machine_status">
<div class="panel-heading">
<h3 class="panel-title">机器状态</h3>
</div>
<div class="panel-body">
<div class="row" data-read="01 03 30 00 00 08 0c 4b">
<!--01 03 20 18 00 06 02 00 03 80 00 00 A1 5B -->
<div class="col-md-2" data-field="TIME" data-type="TIME_HEX" data-size="3">设备时间</div>
<div class="col-md-1" data-field="EVOL" data-type="NUMBERS_HEX" data-size="1">外部电压</div>
<div class="col-md-1" data-field="BVOL" data-type="NUMBERS_HEX" data-size="1">电池电压</div>
<div class="col-md-1" data-field="SENDSTATUS" data-type="NUMBERS_HEX" data-size="1">数据发送状态</div>
<div class="col-md-1" data-field="SENDCOUNT" data-type="NUMBERS_HEX" data-size="1">数据发送次数</div>
<div class="col-md-1" data-field="SUCCESSCOUNT" data-type="NUMBERS_HEX" data-size="1">发送成功次数</div>
<div class="col-md-1 hide">SIM卡号</div>
<div class="col-md-1 hide">CCID号</div>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success" data-role="read">读取</button>
</div>
</div>
</div>
<div class="row" data-role="protocol" data-write="01 10 30 00 00 08">
<div class="col-md-2"><input data-field="TIME" type="text" class="form-control" placeholder="设备时间" readonly></div>
<div class="col-md-1"><input data-field="EVOL" type="text" class="form-control" placeholder="外部电压"></div>
<div class="col-md-1"><input data-field="BVOL" type="text" class="form-control" placeholder="电池电压"></div>
<div class="col-md-1"><input data-field="SENDSTATUS" type="text" class="form-control" placeholder="数据发送状态"></div>
<div class="col-md-1"><input data-field="SENDCOUNT" type="text" class="form-control" placeholder="数据发送次数"></div>
<div class="col-md-1"><input data-field="SUCCESSCOUNT" type="text" class="form-control" placeholder="发送成功次数"></div>
<div class="col-md-1 hide"><input data-field="SIM" type="text" class="form-control" placeholder="SIM卡号"></div>
<div class="col-md-1 hide"><input data-field="CCID" type="text" class="form-control" placeholder="CCID号"></div>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning" data-role="write">写入</button>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-danger" id="sensor_controlcode">
<div class="panel-heading">
<h3 class="panel-title">传感器控制字</h3>
</div>
<div class="panel-body" id="bordertablepanelContainter">
<h3>需要读取过传感器配置信息才可使用!</h3>
</div>
</div>
<div class="panel panel-warning" id="sensor_keyword">
<div class="panel-heading">
<h3 class="panel-title">传感器关键字</h3>
</div>
<div class="panel-body" id="stripedtableContainter">
<h3>需要读取过传感器配置信息才可使用!</h3>
</div>
</div>
<div class="panel panel-info hide">
<div class="panel-heading">
<h3 class="panel-title">命令参数</h3>
</div>
<div class="panel-body">
<div class="row" data-role="protocol">
<div class="col-md-6"><input data-field="CMD" type="text" class="form-control" placeholder="命令"></div>
<div class="col-md-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning" data-role="write">写入</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../static/lib/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../static/lib/underscore.js"></script>
<script src="../static/js/index.js"></script>
</body>
</html>
由于博客字数限制在5万字，其他代码见下一篇文章。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读