{% extends "protocolTools/index.html" %}
{% block title %}carSimulater{% endblock %}
{% block content_01 %}
<script src="../../static/js/protocolTools/carsimulater.js"></script>
<style>
    .nav-pills li {
        margin-bottom:5px;
    }
    .form-control {
        display:inline;
        width:160px;
    }
    .protocol_content:after{
        clear:both;
        display:block;
        content:" ";
    }

    .protocol_content li {
        width:250px;
        _background:yellow;
        list-style:none;
        margin-top:5px;
        float:left;
    }
    .protocol_content label{
        width:90px;
        text-align:right;
    }
</style>
<div id="container2" style="width:83%;min-height:750px;float:left;_background:grey;margin-top:50px;">
    {% block content_02 %}
    <ul class="nav nav-pills" style="font-size:14px;">
        <li role="presentation"><a id="setting_tab" {% if arg.path[2]=="M_setting_page" %} class="link-tab" {% endif %} onclick="carSimulaterTab(this)">设置</b></a></li>
        <li role="presentation"><a id="carsimulater_tab" {% if arg.path[2]=="M_carSimulater_page" %} class="link-tab" {% endif %} onclick="carSimulaterTab(this)">模拟器</b></a></li>
        <li role="presentation"><a id="carsimulaterData_tab" {% if arg.path[2]=="M_carSimulaterData_page" %} class="link-tab" {% endif %} onclick="carSimulaterTab(this)">查询车数据</b></a></li>
    </ul>
    {% endblock %}
    {% block content_1 %}
    <div id="container3" style="width:100%;min-height:750px;float:left;_background:green;margin-top:10px;_border-top: 1px solid #eee;">
        <div style="width:100%;padding-bottom:10px;border-bottom: 1px solid #eee;">
            <span><label>车机Id：</label><input id="carId" type="text" class="form-control" value="M202003060520"></span>
            <span><label>消息流水号：</label><input id="WATER_CODE" style="width:60px;" type="text" class="form-control" value="1"></span>
            <span><label>上报间隔（秒）：</label><input id="durTime" style="width:60px;" type="text" class="form-control" value="5"></span>
            <span><label>设置超时时间：</label><input style="width:80px;" id="timeout" type="text" class="form-control" value="36000"></span>
        </div>
        <div style="width:100%;padding-bottom:10px;border-bottom: 1px solid #eee;">
            <h4>点击登录按钮发送报文：</h4>
            <div style="display: block; width: 100%; border-width: 1px; border-style: solid; border-color: darkgray; border-radius: 10px; padding: 2px; margin-top: 5px;">
                <h5><b>登录报文数据：</b></h5>
                <ul class="protocol_content" style="padding:0px;">
                    <li style="width:320px;"><label>CPU-ID：</label><input style="width:220px;" id="cpuId" type="text" class="form-control" value="CPU-ID001122334455667788"></li>
                    <li><label style="word-break:break-all;font-size:12px;">SIM卡IMSI号：</label><input id="imsi" type="text" class="form-control" value="IMSI13145678902"></li>
                    <li style="width:300px;"><label style="word-break:break-all;font-size:12px;">SIM卡CCID号：</label><input style="width:200px;" id="ccid" type="text" class="form-control" value="CCID1122334455667788"></li>
                    <li><label style="word-break:break-all;font-size:10px;">GSM模块IMEI码：</label><input id="imei" type="text" class="form-control" value="IMEI12233445566"></li>
                </ul>

                <ul class="protocol_content" style="padding:0px;">
                    <li style="width:320px;"><label style="word-break:break-all;font-size:12px;">车机版本信息：</label><input style="width:220px;" id="verInfo" type="text" class="form-control" value="M100AB01010.0000"></li>
                    <li><label>编译日期：</label><input id="compileDate" type="text" class="form-control" value="2020-03-23"></li>
                    <li style="width:300px;"><label style="word-break:break-all;font-size:12px;">GSM模块型号：</label><input style="width:200px;" id="GSM" type="text" class="form-control" value="GSM_123456"></li>
                </ul>
            </div>
        </div>
        <div style="display: block; width: 100%; border-width: 1px; border-style: solid; border-color: darkgray; border-radius: 10px; padding: 2px; margin-top: 5px;">
            <h5><b>GPS行驶轨迹设置：</b></h5>
            <div class="input-group" style="width:380px;padding-bottom:10px;margin-left:10px;display:inline;">
                <form id="form" enctype="multipart/form-data">
                    <input type="file" id="fileAttach" name="file" class="form-control" style="display:inline;width:250px;"/>
                    <input type="button" onclick="uploadFile()" value="上传" class="form-control" style="display:inline;width:80px;font-weight: bolder;"/>
                </form>
            </div>
            <span style="margin-left:10px;"><label>选择轨迹：</label><select id="selectGPSLine" class="form-control" style="width:250px;">
                {% for key,value in arg["gpsLines"].items() %}
                <option value="{{ key }}">{{ value }}</option>
                {% endfor %}
            </select></span>
            <a style="margin-left:10px;font-weight:bold;" onclick="download_sample()">下载示例轨迹</a>
<!--            <label><input style="margin-left:30px;" type="checkbox" id="ignition" />轨迹管理</label>-->
<!--            <div style="display: block;margin:10px; width: 95%; border-width: 1px; border-style: solid; border-color: darkgray; border-radius: 10px; padding: 2px; margin-top: 5px;">-->
<!--            </div>-->
        </div>
        <div style="display: block; width: 100%; border-width: 1px; border-style: solid; border-color: darkgray; border-radius: 10px; padding: 2px; margin-top: 5px;">
            <h5><b>行驶参数设置：</b></h5>
            <span><label>速度(Km/h)：</label><input type="text" id="carSpeed" class="form-control" style="display:inline;width:80px;" value="60"/></span>
            <span><label>油耗(Km/L)：</label><input type="text" id="oilExpend" class="form-control" style="display:inline;width:80px;" value="10"/></span>
            <span><label>是否循环行驶：</label><select style="width:80px;" id="travelLoop" class="form-control">
                <option value="0">否</option>
                <option value="1">是</option></select><label style="font-size:9px;width: 100px;">开启后会在所选择的轨迹上来回行驶</label></span>
        </div>
        <div style="width:100%;padding-bottom:10px;border-bottom: 1px solid #eee;">
            <h3>操作：</h3>
            <button id="connect_B" type="button" class="btn btn-primary" onclick="connect()">1、连网</button>
            <button id="fire_B" type="button" class="btn btn-primary" onclick="login()">2、登录</button>
            <button id="login_B" type="button" class="btn btn-primary" onclick="fire()">3、点火</button>
            <button id="run_B" type="button" class="btn btn-primary" onclick="startTravel()">4、行驶</button>
            <button id="stopRun_B" type="button" class="btn btn-primary" onclick="stopTravel()">5、停止行驶</button>
            <button id="unFire_B" type="button" class="btn btn-primary" onclick="unFire()">6、熄火</button>
            <button id="unConnect_B" type="button" class="btn btn-primary" onclick="stopConnect()">7、断网</button>
            <button id="unConnectAll_B" type="button" class="btn btn-danger" onclick="reset()">复位</button>
            <button id="clear_B" type="button" class="btn btn-warning" onclick="clearlog()">清空日志</button>
            <span style="margin-left:20px;"><label>当前状态：</label><input id="curStatus" value="断网" disabled="disabled" class="form-control" style="font-weight: bold;width:85px;color:red;border-width: 1px; border-style: solid; border-color: darkgray; border-radius: 10px;"></span>
        </div>
        <div style="width:100%;padding-bottom:60px;border-bottom: 1px solid #eee;">
            <h3>日志：</h3>
            <textarea id="showFeedback" style="width:100%;padding:5px;padding-bottom:60px;" rows="10"></textarea>
        </div>
        <div style="width:100%;padding-bottom:10px;border-bottom: 1px solid #eee;">
        <h4>查询今日车机行驶数据</h4>
        <span>
            <button id="searchCarData" type="button" class="btn btn-primary" id="saveSetting">查询</button>
        </span>
    </div>
    <H3 style="border-bottom: 1px solid #eee;">返回信息：</H3>
    <div style="width:100%;padding:5px;margin-top:10px;">
        <textarea id="searchCardataShow" style="width:100%;padding:5px;" rows="8"></textarea>
    </div>
    </div>
<script>
//通过函数获取页面参数
function getPageData(){
    var data = {};
    var carId = $("#carId").val()
    var WATER_CODE = $("#WATER_CODE").val()
    var durTime = $("#durTime").val()
    var timeout = $("#timeout").val()
    data["carId"] = carId
    data["WATER_CODE"] = WATER_CODE
    data["durTime"] = durTime
    data["timeout"] = timeout
    //登录数据
    data["login"] = {}
    var cpuId = $("#cpuId").val()
    var imsi = $("#imsi").val()
    var ccid = $("#ccid").val()
    var imei = $("#imei").val()
    data["login"]["cpuId"] = cpuId
    data["login"]["imsi"] = imsi
    data["login"]["ccid"] = ccid
    data["login"]["imei"] = imei
    //版本数据
    data["version"] = {}
    var verInfo = $("#verInfo").val()
    var compileDate = $("#compileDate").val()
    var GSM = $("#GSM").val()
    data["version"]["verInfo"] = verInfo
    data["version"]["compileDate"] = compileDate
    data["version"]["GSM"] = GSM
    //GPS轨迹数据
    var gpsLine = $("#selectGPSLine").val()
    data["gpsLine"] = gpsLine
    //行驶参数数据
    data["travelData"] = {}
    var carSpeed = $("#carSpeed").val()
    var oilExpend = $("#oilExpend").val()
    var travelLoop = $("#travelLoop").val()
    data["travelData"]["carSpeed"] = carSpeed
    data["travelData"]["oilExpend"] = oilExpend
    data["travelData"]["travelLoop"] = travelLoop
    return data;
}
//连接
function connect(){
    var data = getPageData()
    url = "/protocolTools/M_carSimulater_process/createConect";
    sendjson(data,url);
    //setTimeout(function(){
    //    WebSocketTest()
    //},1000);      //1秒之后启动websocket连接
    WebSocketTest()
    $("#curStatus").val("连网")
}
//登录
function login(){
    var data = getPageData()
     $("#curStatus").val("登录")
    url = "/protocolTools/M_carSimulater_process/login";
    sendjson(data,url);
}
//点火
function fire(){
    var data = getPageData()
    url = "/protocolTools/M_carSimulater_process/fire";
    sendjson(data,url);
     $("#curStatus").val("点火")
}
//行驶
function startTravel(){
    var data = getPageData()
    url = "/protocolTools/M_carSimulater_process/startTravel";
    sendjson(data,url);
    $("#curStatus").val("行驶")
}
//停止行驶
function stopTravel(){
    var data = {};
    url = "/protocolTools/M_carSimulater_process/stopTravel";
    send(data,url);
    $("#curStatus").val("点火")
}
//熄火
function unFire(){
    var data = getPageData()
    url = "/protocolTools/M_carSimulater_process/unFire";
    sendjson(data,url);
     $("#curStatus").val("熄火")
}
//断开连接
function stopConnect(){
    var data = {};
    url = "/protocolTools/M_carSimulater_process/closeConect";
    send(data,url);
    endService()
     $("#curStatus").val("断网")
}
//复位
function reset(){
    var data = {};
    url = "/protocolTools/M_carSimulater_process/reset";
    send(data,url);
    $("#showFeedback").val("")
    endService()
     $("#curStatus").val("断网")
}
//清空日志
function clearlog(){
    $("#showFeedback").val("")
}
//非json方式发送数据
function send(data,url){
    var host = window.location.host;
    $.ajax({
        //url:"http://" + host + "/protocolTools/M_carSimulater_process/porcessSocketSetting",
        url:"http://" + host + url,
        type:"post",
        data:data,
        dataType:"json",
        success:function(data){
            if(data.status == 200){
                //window.location.reload()
                var curTime = getCurTime();
                var txt = $("#showFeedback").val()
                txt = txt + "[" + curTime + "] " + data.message + "\n"
                $("#showFeedback").val(txt)
            }else{
            var curTime = getCurTime();
                var txt = $("#showFeedback").val()
                txt = txt + "[" + curTime + "] " + data.message + "\n"
                $("#showFeedback").val(txt)
                alert(data.message);
            }
        }
    });
}
//json方式发送数据
function sendjson(data,url){
    var host = window.location.host;
    $.ajax({
        //url:"http://" + host + "/protocolTools/M_carSimulater_process/porcessSocketSetting",
        url:"http://" + host + url,
        type:"post",
        data:JSON.stringify(data),
        contentType:"application/json",
        dataType:"json",
        success:function(data){
            if(data.status == 200){
                //window.location.reload()
                var curTime = getCurTime();
                var txt = $("#showFeedback").val()
                txt = txt + "[" + curTime + "] " + data.message + "\n"
                $("#showFeedback").val(txt)
            }else{
            var curTime = getCurTime();
                var txt = $("#showFeedback").val()
                txt = txt + "[" + curTime + "] " + data.message + "\n"
                $("#showFeedback").val(txt)
                alert(data.message);
            }
        }
    });
}
///////////////////////////////// websocket 代码开始 /////////////////////////////////
client = "0"
ws = null;
i = 1;
(function(){
     ws = null;
     i = 1;
})()

function WebSocketTest(){
      if ("WebSocket" in window){
          console.log("您的浏览器支持 WebSocket!");
          var domain = document.domain;
          ws = new WebSocket("ws://" + domain + ":5005");
          ws.onopen = function(){
                console.log("socket 已经连接上！")
          };
          ws.onmessage = function (evt) {
                var received_msg = JSON.parse(evt.data)
                var curTime = getCurTime();
                if(received_msg["code"] == "0001"){           //0001代表连接消息通信
                    client = received_msg["client"]
                }
                var text = $("#showFeedback").val()
                if(text == ""){
                    text = text + "[" + curTime + "] " + received_msg["msg"] + "\n";
                }else{
                    text = text + "[" + curTime + "] " + received_msg["msg"] + "\n";
                    $('#showFeedback').scrollTop($('#showFeedback')[0].scrollHeight);
                }
                $("#showFeedback").val(text)
          };
          ws.onclose = function(){
                alert("连接已关闭...");      // 关闭 websocket
          };
      }else{
                alert("您的浏览器不支持 WebSocket!");      // 浏览器不支持 WebSocket
      }
}

function sendMsg(){
    var msg = $("#sendMsg").val()
    var data = {};
    data["code"] = "0002";                        //0002代表普通消息通信
    data["client"] = client;
    data["msg"] = msg;
    data = JSON.stringify(data)
    ws.send(data);
}

function endService(){
    var msg = ""
    var data = {};
    data["code"] = "0003";                        //0002代表普通消息通信
    data["client"] = client;
    data["msg"] = msg;
    data = JSON.stringify(data)
    ws.send(data);
}

function myclose(){
    var data = {};
    data["code"] = "0000";                      //0000代表关闭服务器套接字程序
    data["client"] = client;
    data["msg"] = "";
    data = JSON.stringify(data);
    ws.send(data);
    ws.close();
    console.log("执行了socket服务的关闭操作...");
}
///////////////////////////////// websocket 代码结束 /////////////////////////////////
function uploadFile(){
    var form = new FormData(document.getElementById("form"));
    var host = window.location.host;
    $.ajax({
        url:"http://" + host + "/protocolTools/M_carSimulater_process/fileUplad",
        type:"post",
        data:form,
        cache: false,
        processData: false,
        contentType: false,
        success:function(data){
            //提交成功
            if (data.status == "200") {
                $("#fileAttach").val("")
                $("#selectGPSLine").prepend("<option value=" + data.file.filenameOri + ">" + data.file.filename + "</option>")
                alert("sucess")
            }else{
                alert("fail")
            }
        },
        error:function(data){
            var result=document.getElementById("Result");
            result.innerHTML="服务器错误";
        }
    });
}

function download_sample(){
    var host = window.location.host;
    window.location.href = "http://" + host + "/protocolTools/M_carSimulater_process/sampleDowload"
}

//查询车机今日行驶数据
$("#searchCarData").click(function(){
    var carId = $("#carId").val();
    var data = {};
    data["carId"] = carId;

    var host = window.location.host;
    $.ajax({
        url:"http://" + host + "/protocolTools/M_carSimulater_process/searchCarsimulaterData",
        type:"post",
        data:data,
        dataType:"json",
        success:function(data){
            if(data.status == 200){
                //window.location.reload()
                msg = data.message
                $("#searchCardataShow").val(msg)
            }else{
                $("#searchCardataShow").val(data.message)
                alert(data.message);
            }
        }
    });
});
</script>
    {% endblock %}
</div>
{% endblock %}