|
|
@@ -10,6 +10,7 @@
|
|
|
<link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
|
|
|
<link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
|
|
|
<link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
|
|
|
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
|
|
|
<style>
|
|
|
/* 面包屑导航 */
|
|
|
|
|
|
@@ -48,7 +49,7 @@
|
|
|
}
|
|
|
|
|
|
.warnSetDiv{
|
|
|
- margin-top: 30px;
|
|
|
+ /* margin-top: 30px; */
|
|
|
}
|
|
|
|
|
|
.warnSetDiv .layui-input-block {
|
|
|
@@ -58,6 +59,9 @@
|
|
|
.warnSetDiv .layui-form-item .layui-input-inline {
|
|
|
width: 25%;
|
|
|
}
|
|
|
+ .warnSetDiv .layui-form-item .layui-input-inline.layui-input-inline-title{
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
|
|
|
/* 筛选框 */
|
|
|
|
|
|
@@ -70,7 +74,33 @@
|
|
|
margin-top: 30px;
|
|
|
}
|
|
|
|
|
|
- /* */
|
|
|
+ /* select2 */
|
|
|
+
|
|
|
+ .select2-container .select2-selection--single {
|
|
|
+ height: 38px;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
|
+ line-height: 38px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
|
+ height: 38px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .currEquip {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ /* 表单 */
|
|
|
+ .layui-form{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .layui-form-item .layui-input-block span{
|
|
|
+ color: #23a3ee;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -88,83 +118,46 @@
|
|
|
<!-- 内容 -->
|
|
|
<div class="mainContent">
|
|
|
<div class="widget-title">
|
|
|
- <button type="button" class="layui-btn layui-btn-normal layui-btn-sm fr" onclick="selectModelFun()">园区筛选</button>
|
|
|
- <h2>阈值设置
|
|
|
- <span id="Uptime">草莓园商情站-设备：20126555</span>
|
|
|
- </h2>
|
|
|
+ <h2>阈值设置</h2>
|
|
|
+ </div>
|
|
|
+ <div class="currEquip">
|
|
|
+ 当前设备：
|
|
|
+ {% if equip_list|length %}
|
|
|
+ <select class="currEquipSelect" name="state" id="equipSelect">
|
|
|
+ {% for equip in equip_list %}
|
|
|
+ <option value="{{equip.equip_id}}">{{equip.equip_id}}</option>
|
|
|
+ {% endfor %}
|
|
|
+ </select>
|
|
|
+ {% else %} 当前暂无设备 {% endif %}
|
|
|
</div>
|
|
|
<div class="warnSetDiv">
|
|
|
<form class="layui-form" action="">
|
|
|
- <div class="layui-form-item">
|
|
|
- <div class="layui-input-block">空气温度</div>
|
|
|
- <div class="layui-input-block">
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最小值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="适宜值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最大值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <div class="layui-input-block">空气湿度</div>
|
|
|
- <div class="layui-input-block">
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最小值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="适宜值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最大值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <div class="layui-input-block">光照强度</div>
|
|
|
- <div class="layui-input-block">
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最小值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="适宜值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最大值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div id="warnForm" >
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <div class="layui-input-block">风向</div>
|
|
|
+ <!-- <div class="layui-form-item">
|
|
|
+ <div class="layui-input-block">空气温度</div>
|
|
|
<div class="layui-input-block">
|
|
|
<div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最小值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="适宜值" autocomplete="off" class="layui-input">
|
|
|
+ <select name="city" lay-verify="required">
|
|
|
+ <option value="">最小值</option>
|
|
|
+ <option value="0">最大值</option>
|
|
|
+ </select>
|
|
|
</div>
|
|
|
<div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最大值" autocomplete="off" class="layui-input">
|
|
|
+ <input type="text" name="title" required lay-verify="required" placeholder="阈值" autocomplete="off" class="layui-input">
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <div class="layui-input-block">风速</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="layui-form-item ">
|
|
|
+ <div class="layui-input-block"><span>预警号码</span></div>
|
|
|
<div class="layui-input-block">
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最小值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="适宜值" autocomplete="off" class="layui-input">
|
|
|
- </div>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input type="text" name="title" required lay-verify="required" placeholder="最大值" autocomplete="off" class="layui-input">
|
|
|
+ <div class="layui-input-inline layui-input-inline-title">
|
|
|
+ <input type="text" name="tel" maxlength="11" lay-verify="userphone" placeholder="预警手机号" autocomplete="off" class="layui-input">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-input-block">
|
|
|
@@ -177,59 +170,28 @@
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <!-- 筛选框 -->
|
|
|
- <div id="selectModel" class="selectModel">
|
|
|
- <!-- <div class="widget-title">
|
|
|
- <h2>条件帅选
|
|
|
- <span id="Uptime"></span>
|
|
|
- </h2>
|
|
|
- </div> -->
|
|
|
- <div>
|
|
|
- <form class="layui-form" action="">
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label">园区</label>
|
|
|
- <div class="layui-input-block">
|
|
|
- <select name="city" lay-verify="required">
|
|
|
- <option value=""></option>
|
|
|
- <option value="0">草莓</option>
|
|
|
- <option value="1">苹果</option>
|
|
|
- <option value="2">香蕉</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label">设备</label>
|
|
|
- <div class="layui-input-block">
|
|
|
- <select name="city" lay-verify="required">
|
|
|
- <option value=""></option>
|
|
|
- <option value="0">20195221</option>
|
|
|
- <option value="1">20195222</option>
|
|
|
- <option value="2">20195223</option>
|
|
|
- <option value="3">20195224</option>
|
|
|
- <option value="4">20195225</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="layui-form-item">
|
|
|
- <div class="layui-input-block">
|
|
|
- <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
|
|
|
- <button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
<script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
|
|
|
<script src="{% static '/lib/layui/layui.js'%}"></script>
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
|
|
|
<script>
|
|
|
var element, laydate, laypage, form;
|
|
|
layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
|
|
|
- // layer = layui.layer;
|
|
|
+ layer = layui.layer;
|
|
|
laydate = layui.laydate;
|
|
|
laypage = layui.laypage;
|
|
|
form = layui.form;
|
|
|
+ // select2
|
|
|
+ $('.currEquipSelect').select2({
|
|
|
+ width: 217
|
|
|
+ });
|
|
|
+ //select2事件
|
|
|
+ $(".currEquipSelect").on("change", function () {
|
|
|
+ var data = $(this).val();
|
|
|
+ getthreVal(data)
|
|
|
+ console.log(data)
|
|
|
+ });
|
|
|
+ console.log($('.currEquipSelect').val())
|
|
|
//执行一个laydate实例
|
|
|
laydate.render({
|
|
|
elem: '#timSelectBox' //指定元素
|
|
|
@@ -240,23 +202,140 @@
|
|
|
$('#tableEnd').val(dateArray[1])
|
|
|
}
|
|
|
});
|
|
|
+ form.verify({
|
|
|
+ userphone: function(value, item){ //value：表单的值、item：表单的DOM对象
|
|
|
+ if(value !='' ){
|
|
|
+ if(!/^1[3|4|5|6|7|8|9]\d{9}$/.test(value)){
|
|
|
+ return '请输入正确手机号';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- })
|
|
|
+ form.on('select', function(data){
|
|
|
+ console.log(data.othis.parents('.layui-form-item').find('.threshold').val(''))
|
|
|
+ });
|
|
|
+ //监听提交
|
|
|
+ form.on('submit(formDemo)', function (data) {
|
|
|
+ var field = data.field;
|
|
|
+ var dat = {};
|
|
|
+ for(var i = 1;i<=30;i++){
|
|
|
+ var typeNum = 'typeNum'+i;
|
|
|
+ var thresholdVal = 'thresholdVal'+i;
|
|
|
+ if(field[typeNum] != undefined){
|
|
|
+ var keyEl = 'e'+i;
|
|
|
+ dat[keyEl] = field[typeNum]+'#'+field[thresholdVal]
|
|
|
+ }
|
|
|
+ if(i == 30){
|
|
|
+ console.log(dat)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var equip_id = $('#equipSelect').val()
|
|
|
+ var alarm = {
|
|
|
+ dat:dat,
|
|
|
+ tel:field.tel,
|
|
|
+ equip_id:equip_id
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ url: 'dorm_pub1',
|
|
|
+ data: {
|
|
|
+ alarm:JSON.stringify(alarm)
|
|
|
+ },
|
|
|
+ type: 'post',
|
|
|
+ success: function (data) {
|
|
|
+ if (data) {
|
|
|
+ if (window.id !== '') {
|
|
|
+ layer.msg("发布成功，等待审核", { icon: 1 });
|
|
|
+ } else {
|
|
|
+ layer.msg("发布成功，等待审核", { icon: 1 });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (window.id !== '') {
|
|
|
+ parent.layer.msg("发布失败", { icon: 2 });
|
|
|
+ } else {
|
|
|
+ layer.msg("发布失败", { icon: 2 });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function (type) {
|
|
|
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return false;
|
|
|
|
|
|
+ });
|
|
|
|
|
|
- function selectModelFun() {
|
|
|
- layui.use(['layer'], function () {
|
|
|
- layer = layui.layer;
|
|
|
- var index = layer.open({
|
|
|
- type: 1,
|
|
|
- title: '园区筛选',
|
|
|
- content: $('#selectModel'),
|
|
|
- area: ['500px', '250px']
|
|
|
- })
|
|
|
+ })
|
|
|
+ function getthreVal(data){
|
|
|
+ var imei = $('#equipSelect').val()
|
|
|
+ $.ajax({
|
|
|
+ url: 'qxz_alarm',
|
|
|
+ data: {
|
|
|
+ imei:imei
|
|
|
+ },
|
|
|
+ type: 'post',
|
|
|
+ success: function (data) {
|
|
|
+ renderHtml(data);
|
|
|
+ },
|
|
|
+ error: function (type) {
|
|
|
+ var data = {
|
|
|
+ alarm:'{"dat":{"e8":"1#5","e2":"0#7","e3":"0#3","e4":"0#2","e5":"1#56"},"tel":"","equip_id":"16057231"}',
|
|
|
+ conf: {e8: "盐分", e2: "温度#°", e3: "雨量",e4: "气压#hpa",e5: ""}
|
|
|
+ }
|
|
|
+ renderHtml(data);
|
|
|
+ }
|
|
|
})
|
|
|
-
|
|
|
}
|
|
|
+ var data = {
|
|
|
+ alarm:'{"dat":{"e6":"0#","e2":"0#","e3":"0#3","e4":"0#2","e5":"1#56"},"tel":"","equip_id":"16057231"}',
|
|
|
+ conf: {e6: "ces", e2: "", e3: "",e4: "风向#°",e5: "数字气压#hpa"}
|
|
|
+ }
|
|
|
+ renderHtml(data);
|
|
|
+ function renderHtml(data){
|
|
|
+ var dat = eval('('+data.alarm+')').dat;
|
|
|
+ var conf = data.conf;
|
|
|
+ var html = '';
|
|
|
+ for(var i = 1;i<=30;i++){
|
|
|
+ var keyEl = 'e'+i;
|
|
|
+ if(conf[keyEl]){
|
|
|
+ var unit = conf[keyEl].split('#')[0];
|
|
|
+ var typenum = dat[keyEl].split('#')[0];
|
|
|
+ var val = dat[keyEl].split('#')[1] || '';
|
|
|
+ html += '<div class="layui-form-item">'+
|
|
|
+ '<div class="layui-input-block"><span class="eleTitle">'+unit+'</span></div>'+
|
|
|
+ '<div class="layui-input-block">'+
|
|
|
+ '<div class="layui-input-inline layui-input-inline-title">'+
|
|
|
+ '<select name="typeNum'+i+'" lay-verify="required">';
|
|
|
+ if(typenum==0){
|
|
|
+ html +='<option value="0" selected>最小值</option>'+
|
|
|
+ '<option value="1">最大值</option>';
|
|
|
+ }else if(typenum==1){
|
|
|
+ html +='<option value="0">最小值</option>'+
|
|
|
+ '<option value="1" selected>最大值</option>';
|
|
|
+ }else{
|
|
|
+ html +='<option value="">请选择</option>'+
|
|
|
+ '<option value="0">最小值</option>'+
|
|
|
+ '<option value="1">最大值</option>';
|
|
|
+ }
|
|
|
+
|
|
|
+ html +='</select>'+
|
|
|
+ '</div>'+
|
|
|
+ '<div class="layui-input-inline">'+
|
|
|
+ '<input type="number" name="thresholdVal'+i+'" value="'+val+'" placeholder="阈值" autocomplete="off" class="layui-input threshold">'+
|
|
|
+ '</div>'+
|
|
|
+ '</div>'+
|
|
|
+ '</div>'
|
|
|
+ }
|
|
|
+ if(i == 30){
|
|
|
+ $('#warnForm').html(html)
|
|
|
+ layui.use(['form'], function () {
|
|
|
+ form = layui.form;
|
|
|
+ form.render('select'); //刷新select选择框渲染
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
</script>
|
|
|
</body>
|
|
|
|
