shelfconfig.html 12.4 KB
<span style="font-size:18px;"><!DOCTYPE html>
<html lang="zh-cn">
<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>
<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">{{ _('亮灯料架') }}</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="{{ url_for('index') }}">{{ _('控制') }}</a></li>
            <li><a href="{{ url_for('ledtest') }}">{{ _('测试') }}</a> </li>
            <li class="active"><a href="{{ url_for('shelfconfig') }}">{{ _('料架配置') }}</a> </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
          <div>
            <a href="{{ url_for('set_language', language='zh') }}" >简体中文</a>
            <a href="{{ url_for('set_language', language='en') }}" >English</a>
          </div>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
 
<div class="container-fluid">
  <div class="row">
 
    <div class="col-md-6">
      <h2>{{ _('料架系统') }}</h2>
      <hr class="divider">
        <!-- 上传文件 -->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">{{ _('配置文件') }}</h3>
          </div>
            <div style="width:100%;height:50px">
                <div id="div_torrent" style="overflow:hidden">
                    <a id="btn_file" href="javascript:;" class="file" style="margin-top:5px;margin-bottom:5px;float:left;">{{ _('选择文件') }}
                       <input type="file" name="FileUpload" id="FileUpload" accept=".csv">
                    </a>
                    <input id="btn_upload" type="button" value={{ _('上传') }} onclick="upfile()" class="file" style="float:right;width:65px; height: 33px;left: 4px;background-color:rgba(255, 206, 68, 0.6);cursor:hand;margin-top:5px;margin-bottom:5px;margin-right:5px;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" placeholder="请填入服务器地址"/>
                </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" placeholder="请填入料架编号"/>
                </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">
              <!-- <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">
      <h2>{{ _('运行日志&状态信息') }}</h2>
      <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="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)
            },
            error:function(e){
                    alert("未获取到状态信息");
            }
        })
      }

      // function backup(){
      //   if (confirm("确认备份")) {
      //       $.ajax({
      //         url:"/backup",
      //         type:"post",
      //         // data:JSON.stringify(data),
      //         contentType: "application/json",
      //         dataType: 'json',
      //         success:function(data){
      //           $("#operation").html(data.operation)
      //           alert("backup success");
      //         },
      //         error:function(e){
      //                 alert("error");
      //         }
      //     })
      //   }
      //   else {
      //       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 openteamview(){
        if (confirm("确认打开")) {
            $.ajax({
              url:"/openteamview",
              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("已取消");
          }
      }

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