base.html 6.8 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 rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> -->
<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>
 
</head>
 
<body>
    {% set index=1 %}
    {% import 'head.html' as head with context%}
    {{ head }}
 
<div class="container-fluid">
  <div class="row">
 
    <div class="col-md-6">
      <h2>{{ _('料架系统') }}</h2>
      <hr class="divider">
        <!-- 料架启动关闭 -->
        <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">{{ _('开关') }}</h3>
          </div>
            <div class="panel-body">
              <input type="button" value={{ _('启动') }} class="btn btn-info" onclick="startpost()"/>
              <input type="button" value={{ _('停止') }} class="btn btn-warning" onclick="stoppost()"/>
          </div>
        </div>

        <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="testinfo">{{ _('加载成功') if config_state else _('加载失败,请在配置页面上传配置文件') }}</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="poststate"></span>
                </p>
              </div>
            </div>
          </div>
        </div>
        
    </div>
    <div class="col-md-6">
      <h2>{{ _('运行日志&状态信息') }}</h2>
      <hr class="divider">        
        <!-- 日志下载 -->
        <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">{{ _('日志下载') }}</h3>
          </div>
          <div class="panel-body">
            <a type="button" class="btn btn-warning" href="{{ url_for('download') }}">{{ _('下载日志') }}</a>
          </div>
        </div>

        <!-- 日志显示 -->
        <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">{{ _('日志') }}</h3>
          </div>
          <div class="panel-body">
            <div id="logmsg" style="overflow:auto;height: 400px;background:#000; color:green"></div>
          </div>
        </div>
    </div>
    </div>
    
  </div>
 
<script>
    $(document).ready(function () {
        getstate();
        taillog();
        console.log('success');
        });

      function startpost(){
        $.ajax({
            url:"/startpost",
            type:"post",
            // data:form,
            dataType: 'json',
            processData:false,
            contentType:false,
            success:function(data){
                if (data[0].state == 'on') {$("#shelfstate").html("{{ _('运行中') }}");}
                else if (data[0].state == 'off') {$("#shelfstate").html("{{ _('已关闭') }}");}
                else {$("#shelfstate").html("{{ _('未初始化') }}");}
                // console.log(data)
                alert (data[0].msg)
            },
            error:function(e){
                    alert("{{ _('启动失败') }}");
            }
        })
      }

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

      // 获取开机关机状态
      function taillog(){
        // var form= new FormData(document.getElementById("test_form"));
        $.ajax({
            url:"/taillog",
            type:"post",
            // data:form,
            dataType: 'json',
            processData:false,
            contentType:false,
            success:function(data){
                $("#logmsg").html(data.msg)
                $("#poststate").html(data.poststate)
            },
            error:function(e){
            }
        })
      }

      setInterval(function(){
                taillog();
            }, 3000);
</script>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>