induction_config.html 12.3 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 
<title>{{ _('感应式料架系统') }}</title>
<link rel="icon" href="/static/favicon.ico">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
 
<style>
  body{
    margin-top: 65px;
  }
  .col-md-2{
    background-color: #ccc;
    /*?*/
    height: 600px;
  }
  #left-content{
    margin-top: 20px;
  }
  .list-group{
    padding-left: 0;
  }
  #panel-group{
    margin-top: 20px;
  }
  #onebtn{
    margin: 10px 0;
  }
  #btngroup button{
    width: 100%;
  }
  .progress{
    margin-top: 15px;
  }
  .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
  }
  .file input {
      position: absolute;
      font-size: 100px;
      right: 0;
      top: 0;
      opacity: 0;
  }
  .file:hover {
      background: #AADFFD;
      border-color: #78C3F3;
      color: #004974;
      text-decoration: none;
  }
 
</style>
 
</head>
 
<body style="font-size:18px;">
    {% set index=3 %}
    {% import 'head.html' as head with context%}
    {{ head }}
<div class="container-fluid">
  <div class="row">
 
    <div class="col-md-6">
      <hr class="divider">
        <!-- 上传文件 -->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">{{ _('配置文件') }}</h3>
          </div>
            <div style="width:100%;height:50px;margin: 10px;">
                <div id="div_torrent" style="overflow:hidden">
                    <a id="btn_file" href="javascript:;" class="file" style="float:left;">{{ _('选择文件') }}
                       <input type="file" name="FileUpload" id="FileUpload" accept=".csv">
                    </a>
                    <input id="btn_upload" type="button" value={{ _('上传') }} onclick="upfile()" class="file"
                     style="margin-right: 30px;float:right;width:85px; height: 33px;left: 4px;background-color:rgba(255, 206, 68, 0.6);cursor:hand;border-color:red"/>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title">{{ _('服务器配置') }}</h3>
          </div>
          <div class="panel-body">
                <!-- <label for="cha" class="col-sm-3">服务器地址</label> -->
                <div class="input-group">
                  <span class="input-group-addon">{{ _('服务器地址') }}:</span>
                  <input type="text" class="form-control" id="ip" />
                </div>
                <br>
                <!-- <label for="cha1" class="col-sm-3">料架序列号</label> -->
                <div class="input-group">
                  <span class="input-group-addon">{{ _('料架序列号') }}:</span>
                  <input type="text" class="form-control" id="cid" />
                </div>
                <br>
                <input type="button" value="{{ _('保存') }}" class="btn btn-info" onclick="updateip()"/>
          </div>
        </div>
        <div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title">{{ _('设置串口&地址') }}</h3>
          </div>
          <div class="panel-body">
                <label for="stock_cha1" class="col-sm-3">{{ _('串口号') }}</label>
                <div class="col-sm-8">
                  <input id="serial_num">
                </div>
                <div class="col-sm-12" style="margin: 3px;" ></div>
                <label for="cha2" class="col-sm-3">{{ _('地址') }}</label>
                <div class="col-sm-8">
                    <input id="addrs">
                </div>
                <div class="col-sm-12">
                  <input type="button" value={{ _('保存') }} class="btn btn-warning" onclick="updateserial()"/>

                  <!-input type="button" value={{ _('同步颜色信息') }} class="btn btn-info" onclick="sendcolor()"/-->
                </div><!-- /.col-sm-4 -->
          </div>
        </div>
        <!--div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title">{{ _('控制器备份&升级') }}</h3>
          </div>
          <div class="panel-body">
              < !-- <input type="button" value="软件备份" class="btn btn-info" onclick="backup()"/> -- >
              <input type="button" value={{ _('料架升级') }} class="btn btn-info" onclick="upgrade()"/>
              < !-- <input type="button" value={{ _('teamview') }} class="btn btn-info" onclick="openteamview()"/> -- >
          </div>
        </div-->
    </div>
    <div class="col-md-6">
      <hr class="divider">        
        <div id="panel-group">
          <!-- 1 -->
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">{{ _('消息') }}</h3>
            </div>
            <div class="panel-body">
              <div class="alert alert-info" role="alert">
                <p>
                {{ _('运行状态') }}:<span id="shelfstate"></span>
                </p>
              </div>
              <!-- <div class="alert alert-info" role="alert">
                <p>
                {{ _('配置文件加载状态') }}:<span id="shelfstate">{{ config_state }}</span>
                </p>
              </div> -->
              <div class="alert alert-info" role="alert">
                <p>
                {{ _('服务器地址') }}:<span id="ipconfig"></span>
                </p>
              </div>
              <div class="alert alert-info" role="alert">
                <p>
                {{ _('料架序列号') }}:<span id="ccid"></span>
                </p>
              </div>
              <div class="alert alert-info" role="alert">
                <p>
                {{ _('操作提醒') }}:<span id="operation"></span>
                </p>
              </div>
              <div class="alert alert-info" role="alert">
                <p>
                {{ _('串口号&地址') }}:<span id="ad_serial"></span>
                </p>
              </div>
              <div class="alert alert-info" role="alert">
                <p>
                {{ _('软件版本') }}:<span id="version"></span>
                </p>
              </div>
            </div>
          </div>
        </div>
    </div>
    </div>
    
  </div>
 
<script>
    $(document).ready(function () {
        getstate();
        // jsondata();
        console.log('success');
        });
    function upfile() {
           var shelfstate = document.getElementById("shelfstate").innerHTML
           if (shelfstate == "{{_('运行中')}}") {alert("{{_('料架运行中,请关闭后再进行配置')}}")
           }
           else {
            var fileObj = document.getElementById("FileUpload").files[0];
           if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
           alert("{{_('请选择文件')}}");
           return;
           }if(fileObj.size>5242880)
           {
                alert("文件限制最大 5Mb");
                return;
           }
           var formFile = new FormData();
           formFile.append("action", "UploadTorrentPath");
           formFile.append("file", fileObj); //加入文件对象
           var data = formFile;
           $.ajax({
               url: "/upload/",
               data: data,
               type: "Post",
               dataType: "json",
               cache: false,//上传文件无需缓存
               processData: false,//用于对data参数进行序列化处理 这里必须false
               contentType: false, //必须
               success: function (result) {
                   alert("{{_('上传完成!')}}");
               },
                error: function (xmlrequest, textStatus, errorThrown) {
                    alert("{{_('上传失败!')}}");
                //alert("error:" + textStatus + errorThrown + ":" + JSON.stringify(xmlrequest));
                console.log("error:" + textStatus + errorThrown + ":" + JSON.stringify(xmlrequest));
            }
           })
           }
       }

       function updateip(){
        var shelfstate = document.getElementById("shelfstate").innerHTML
        if (shelfstate == "{{_('运行中')}}") {alert("{{_('料架运行中,请关闭后再进行配置')}}")
        }
        else {
          var data = {"ip":document.getElementById("ip").value,
                      "cid":document.getElementById("cid").value}
          if (data['ip'] == ""&&data['cid'] == "") {alert("{{_('不能提交空数据')}}")}
          else {
            $.ajax({
              url:"/updateip",
              type:"post",
              data:JSON.stringify(data),
              contentType: "application/json",
              dataType: 'json',
              success:function(data){
                console.log(data)
                $("#ipconfig").html(data[0].ip)
                $("#ccid").html(data[0].cid)
                      alert("{{_('保存成功')}}");
              },
              error:function(e){
                      alert("error");
              }
          })
          }
          }
      }

      // 获取开机关机状态
      function getstate(){
        // var form= new FormData(document.getElementById("test_form"));
        $.ajax({
            url:"/getstate",
            type:"post",
            // data:form,
            dataType: 'json',
            processData:false,
            contentType:false,
            success:function(data){
                console.log(data)
                if (data[0].state == 'on') {$("#shelfstate").html("{{_('运行中')}}");}
                else if (data[0].state == 'off') {$("#shelfstate").html("{{_('已关闭')}}");}
                else {$("#shelfstate").html("{{_('未初始化')}}");}
                // $("#shelfstate").html("<b>已关闭</b>")
                // $("#testinfo").html(data[0].msg)
                // $("#gpioconfig").html(data[0].gpio)
                $("#ipconfig").html(data[0].ipconfig['ip'])
                $("#ccid").html(data[0].ipconfig['cid'])
                $("#version").html(data[0].version)
                $("#ad_serial").html(data[0].ad_serial)
            },
            error:function(e){
                    alert("{{_('未获取到状态信息')}}");
            }
        })
      }

      function upgrade(){
        if (confirm("检查并升级最新最新版本")) {
            $.ajax({
              url:"/upgrade",
              type:"post",
              // data:JSON.stringify(data),
              contentType: "application/json",
              dataType: 'json',
              success:function(data){
                $("#operation").html(data.operation)
                alert(data.operation);
              },
              error:function(e){
                      alert("升级成功,请刷新浏览器");
              }
          })
        }
        else {
            alert("已取消");
          }
      }

      function updateserial(){
            var data = {"serial_num":document.getElementById("serial_num").value,
                    "addrs":document.getElementById("addrs").value}
            $.ajax({
              url:"/update_serial",
              type:"post",
              data:JSON.stringify(data),
              contentType: "application/json",
              dataType: 'json',
              success:function(data){
                $("#operation").html(data.addr)
                $("#ad_serial").html(data.addr)
                alert(data.addr);
              },
              error:function(e){
                      alert("error");
              }
          })
        }

    // 同步颜色信息
    function sendcolor(){
            $.ajax({
              url:"/sendcolor",
              type:"post",
              // data:JSON.stringify(data),
              contentType: "application/json",
              dataType: 'json',
              success:function(data){
                $("#operation").html(data.msg)
                alert(data.msg);
              },
              error:function(e){
                      alert("error");
              }
          })
        }

</script>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>