開發的第一個工具
阿新 • • 發佈：2019-01-10
第一次寫前端頁面，一臉懵比，東拼西湊算是湊出來了
只是記錄一下。。。那天忘了前端怎麼寫，還可以抄襲下。。。哈哈哈
<%@ page import="java.text.SimpleDateFormat" %> <%@ page import="java.util.Date" %> <%@ page import="java.util.Calendar" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <%@page isELIgnored="false"%> <!DOCTYPE html> <html> <head> <meta content="text/html; charset=UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> window.onload = function () { showProvince(); showCity(); } //載入省下拉資料 function showProvince() { $.ajax({ url : "${ctx}/queryProvince", //獲取controller方法地址 type : "get", dataType : "json", success : function(result) { var h = ""; $.each(result, function(key, value) { if(key == 0){ h += "<option value=''>--請選擇--</option>"; } h += "<option value='" + value.provinceId + "' name='" +value.provinceName+"'>" + value.provinceName //下拉框迴圈資料 + "</option>"; }); $("#cmbProvince").append(h);//append 新增進去並展示 $("#cmbProvince").on( "change", function() { $("#provinceId").val( $("#cmbProvince option:selected").val()); $("#provinceName").val( $("#cmbProvince option:selected").text()); }) } }); } //載入市下拉資料 function showCity(obj){ $("#cmbCity").empty();// 清空市 $("#cmbArea").empty();// 清空市 $.ajax({ url : "${ctx}/queryCity?provinceId="+obj.options[obj.selectedIndex].value, type : "get", dataType : "json", success : function(result) { var h = ""; $.each(result, function(key, value) { if(key == 0){ h += "<option value=''>--請選擇--</option>"; } h += "<option value='" + value.cityId + "'>" + value.cityName //下拉框迴圈資料 + "</option>"; }); $("#cmbCity").append(h);//append 新增進去並展示 $("#cmbCity").on( "change", function() { $("#cityId").val( $("#cmbCity option:selected").val()); $("#cityName").val( $("#cmbCity option:selected").text()); }) } }); } //載入區下拉資料 function showArea(objs){ $("#geo_code").empty();// 清空市 //alert(obj.options[obj.selectedIndex].value); $.ajax({ url : "${ctx}/queryArea?cityId="+objs.options[objs.selectedIndex].value, //所需要的列表介面地址 type : "get", dataType : "json", success : function(result) { var h = ""; $.each(result, function(key, value) { /*if(key == 0){ h += "<option value=''>--請選擇--</option>"; }*/ h += "<option name='"+ value.areaId +"' value='" +value.extra+"'>" + value.areaName //下拉框迴圈資料 + "</option>"; }); $("#geo_code").append(h);//append 新增進去並展示 $("#geo_code").on( "change", function() { $("#areaId").val( $("#geo_code option:selected").val()); $("#areaName").val( $("#geo_code option:selected").text()); }) } }); } </script> <style> .middle_content { height: 100px; margin: 0 auto; display: none; } .progress_div { margin: 0 auto; } .progress_number { text-align: center; font-size: 30px; } .modal-dialog { position: static; } .modal-title{ text-align: center; } .modall-dialog { position: static; } .modall-title{ text-align: center; } </style> </head> <body> <div class="content-wrapper"> <div class="content" style="margin: 50px auto;"> <div class="row"> <div class="col-md-3"> <label class="col-md-5">操 作 人</label> <input type="text" class="form-control" name="campaigndefid" id="operator" placeholder="請輸入操作人" style="width: 50%"> </div> <div class="col-md-3" id="effect"> <label class="col-md-5">出單環境</label> <div class="form-group" id="repocn"> <select class="form-control" name="relationselectmenu" id="environment" style="width: 50%" onchange="aaa(this)"> <option value="uat">UAT環境</option> <option value="itest">測試環境</option> </select> <input type="text" class="form-control" name="campaigndefid" id="versions" placeholder="請輸入版本號" style="width: 45%; position: absolute; top: 0; left: 105%; display: none"> <input type="text" class="form-control" name="campaigndefid" id="portIP" placeholder="請輸入IP和埠號" style="width: 45%; position: absolute; top: 0; left: 166%; display: none"> <script type="text/javascript"> //獲取當前頁面的url var testUrl = window.location.href; //設定要比對的url var compareUrl = "http://10.253.24.59:8088/grace/index"; //與測試環境的url做對比 if(testUrl==compareUrl){ //當條件成立時，顯示版本號和IP輸入框 $('#versions').css('display','block'); $('#portIP').css('display','block'); //移除value值為uat的 option $("#environment option[value='uat']").remove(); }else { //當條件不成立時，不顯示版本號和IP輸入框 $('#versions').css('display','none'); $('#portIP').css('display','none'); //移除value值為itest的 option $("#environment option[value='itest']").remove(); } </script> </div> </div> </div> <div class="row"> <div class="col-md-3"> <% //日期程式碼，當前日期減7天的日期 Date date=new Date(); Calendar calendar = Calendar.getInstance(); calendar.setTime(date); calendar.add(calendar.DATE, -7); date = calendar.getTime(); SimpleDateFormat format= new SimpleDateFormat("yyyy-MM-dd"); String dateString = format.format(date); %> <label class="col-md-5">初登日期</label> <!--呼叫dateString 日期值--> <input type="text" class="form-control" name="campaigndefid" id="vehicleRegisterDate"value="<%=dateString%>" placeholder="請選擇初登日期" style="width: 50%"> <%@ include file="./Date.jsp"%> </div> <div class="col-md-3"> <label class="col-md-5">渠 道</label> <select class="form-control" name="packagedefidq" id="campaignId" style="width: 50%"> <option value="1000095012">車掙</option> <option value="10002155398">小米</option> <option value="1000130005">易車</option> <option value="1000585011">滴滴出行</option> </select> </div> <div class="col-md-3" id="familyrelation"> <div class="form-group" id="repocnlistDiv2" style="width: 100%"> <label class="col-md-5" style="float: left;">出單地區</label> <div class="float:left;"> <select class="form-control" id="cmbProvince" name="cmbProvince" style="width: 50%" onchange="showCity(this)"></select> <select class="form-control" id="cmbCity" name="cmbCity" style="width: 45%; position: absolute; top: 0; left: 93%;" onchange="showArea(this)" ></select> <select class="form-control" id="geo_code" name="geo_code" style="width: 45%; position: absolute; top: 0; left: 142.5%; display: none"></select> </div> </div> </div> </div> <div class="row"> <div class="col-md-3" > <label class="col-md-5">出單型別</label> <div class="form-group" id="repocnlist"> <select class="form-control" name="relationselectmenu" id="insureType" value="" style="width: 50%"> <option value="交商">交商</option> <option value="單商">單商</option> <option value="單交">單交</option> </select> </div> </div> <div class="col-md-3" id="effectno"> <label class="col-md-5">生成數量</label> <input type="text" class="form-control" name="campaigndefid" id="createAmount" value="1" placeholder="請輸入出單數量" style="width: 50%" onkeyup="value=value.replace(/[^\d]/g,'')"> <!--正則表示式input框只能填數字：“onkeyup="value=value.replace(/[^\d]/g,'')”--> </div> <div class="col-md-3" id="effecti"> <label class="col-md-5">業務場景</label> <div class="form-group" id="repocnl"> <select class="form-control" id="cmbProvincel" name="cmbProvincel" style="width: 50%"></select> <select class="form-control" id="cmbCityl" name="cmbCityl" style="width: 45%; position: absolute; top: 0; left: 93%;"></select> <select class="form-control" id="vehicle_brand" name="vehicle_brand" style="width: 45%; position: absolute; top: 0; left: 142.5%;"></select> <!--匯入rVehicleName.jsp檔案--> <%@ include file="./rVehicleName.jsp"%> </div> </div> </div> <br> <div class="row"> <div class="col-md-offset-5 col-md-6" id="policygeneratelabel"> <input type="button" value="環境檢測" id="Detection" class="btn btn-primary" data-toggle="modal" onclick="CreateBridgePolicyno()" style="font-weight: bold;"/> <input type="button" value="批量生成" id="create" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="font-weight: bold;"/> <input type="button" value="匯出檔案" id="export" class="btn btn-primary" data-toggle="modal" style="font-weight: bold;"/> <script> //置灰批量生成按鈕 //document.getElementById("create").setAttribute("disabled", true); //置灰匯出檔案按鈕 document.getElementById("export").setAttribute("disabled", true); </script> </div> </div> </div> </div> <!--進度條--> <div> <div style="margin-left: 1%"><span id="jindu">出單進度</span></div> <br> <div class="progress" style="display: block; height: 10%"> <div class="progress-bar" id="progressBar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:6%;"> <div class="progress_number"> <span class="number" style="font-size: 18px;">0</span> <span class="percent" style="font-size: 18px;">%</span> </div> </div> </div> </div> <div class="portlet box light-grey"> <div class="portlet-title"> <div class="caption"><i class="icon-table"></i>生成結果列表</div> </div> <div class="dataTables_wrapper form-inline" role="grid" style="text-align: center; vertical-align: middle;"> <div class="table-scrollable"> <table class="table table-striped table-bordered table-hover" id="data-table"> <thead> <tr> <th style="text-align: center; vertical-align: middle;">批次號</th> <th style="text-align: center; vertical-align: middle;">車架號</th> <th style="text-align: center; vertical-align: middle;">車牌號</th> <th style="text-align: center; vertical-align: middle;">商業險保單號</th> <th style="text-align: center; vertical-align: middle;">交強險保單號</th> <th style="text-align: center; vertical-align: middle;">出單狀態</th> </tr> </thead> <tbody id="tbodytalbe"> </tbody> </table> </div> <!-- 分頁--> <div class="col-md-5 col-sm-12" style="text-align: left;"> <div class="dataTables_info">(每頁顯示${10}條，共<span id="resDiv">0</span>條記錄)</div> </div> <div class="col-md-7 col-sm-12" style="text-align: right;"> <div class="dataTables_paginate paging_bootstrap"> <ul class="pagination"> <li id="lastPages" class="next"> <a id="lastPage">上一頁</a> </li> <li id="nextPage" class="next"> <a>下一頁</a> </li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript"> //獲取當前頁面的url var testUrll = window.location.href; //設定要比對的url var compareUrll = "http://10.253.4.247:7080/grace/index"; //與UAT環境的url做對比 if(compareUrll ==testUrl){ //當條件成立時，隱藏環境檢測按鈕 $('#Detection').css('display','none'); } var number = 0; var getBatchId = '';//定義變數接收batchId var get_finishcount = ''; function doProgressBarLoading() { $(".number").text(number); if(number>6){ $("#progressBar").css({"width":number+"%"}); } } var createAmount = ''; var pageNumNextPage = '';//點選下一頁獲取到的psgeNum var startl = null $('#create').click(function () { //清空table內容 $("#data-table tr:not(:first)").html(""); //清空total $("#resDiv").empty(); //重置進度條顏色 $("#progressBar").css({"width":"6"+"%"}); //重置進度條百分比 $('.number').html("0"); //新增匯出檔案的置灰屬性 $('#export').attr('disabled','disabled') //前臺頁面欄位 var operator = $("#operator").val(); var campaignId = $("#campaignId").val(); var environment = $("#environment").val(); var cmbCity = $("#cmbCity").val(); var insureType = $("#insureType").val(); var vehicleRegisterDate = $("#vehicleRegisterDate").val(); var cmbProvincel = $("#cmbProvincel").val(); createAmount = $("#createAmount").val(); var vehicle_brand = $("#vehicle_brand").val(); var geo_code = $("#geo_code").val(); var cmbProvince=$("#cmbProvince").find("option:selected").text(); var versions = $("#versions").val(); var portIP=$("#portIP").val(); var datas = { // 前臺傳值 "operator": operator, "campaignId": campaignId, "environment": environment, "vehicleRegisterDate": vehicleRegisterDate, "cmbCity": cmbCity, "insureType": insureType, "cmbProvincel": cmbProvincel, "createAmount": createAmount, "vehicle_brand": vehicle_brand, "geo_code": geo_code, //"cmbProvince":cmbProvince, "portIP":portIP, "versions":versions } if(cmbProvince == "" || cmbProvince=="--請選擇--"||cmbCity == "" || cmbCity=="--請選擇--" ){ alert("請選擇正確的省、市、區"); }else { clearInterval(startl); // 第一個介面 $.ajax({ url: "${ctx}/apply",//介面地址 data: datas, type: 'POST', dataType: 'JSON', //async:false, success: function (data) { // 請求成功返回的資料 console.log(data) getBatchId = data.batchId; console.log(getBatchId) $('#jindu').html("資料生成中，請稍等..."); //location.reload(); //置灰批量生成按鈕 $('#create').attr('disabled','disabled') startl = setInterval(getDatas,3000) }, error: function (err) { //失敗 console.log(err) } }) } console.log(getBatchId) }); // 第二個介面 function getDatas() { console.log(getBatchId) $.ajax({ url: "${ctx}/querystatus",//介面地址 data: {'batchId':getBatchId}, type: 'POST', dataType: 'JSON', //async:false, success: function (datas) { // 請求成功返回的資料 console.log(datas) get_message = datas.message; get_finishcount = datas.finishcount; console.log(get_finishcount) get_status = datas.status; number = parseInt(Number(get_finishcount) / Number(createAmount) *100); console.log(get_status,number) doProgressBarLoading(); $(".middle_content").css("display", "block"); $(".modal-backdrop").css("display", "none"); if(get_status == "Fail"){ //首先關閉第二個介面的持續請求 clearInterval(startl); $('#jindu').html("出單失敗..."); //移除批量生成按鈕的置灰屬性 $('#create').attr('disabled',false) alert(get_message); } if(get_status == "Success" ){ //首先關閉第二個介面的持續請求 clearInterval(startl); //替換進度條提示資訊 $('#jindu').html("出單已完成..."); //移除批量生成按鈕的置灰屬性 $('#create').attr('disabled',false) //移除匯出檔案的置灰屬性 $('#export').removeAttr('disabled','disabled') // 當條件成立時，呼叫第三個介面 getOrders(); } if (get_status=="Half success"){ //首先關閉第二個介面的持續請求 clearInterval(startl); //替換進度條提示資訊 $('#jindu').html("出單已完成，由於環境因素部分失敗..."); //移除批量生成按鈕的置灰屬性 $('#create').attr('disabled',false) //移除匯出檔案的置灰屬性 $('#export').removeAttr('disabled','disabled') //展示後臺報錯資訊 alert(get_message); // 當條件成立時，呼叫第三個介面 getOrders(); } }, error: function (err) { //失敗 console.log(err) } }) } //第三個介面 function getOrders(){ $.ajax({ url: "${ctx}/queryBatchOrders",//介面地址 //pageNo是頁碼，這裡寫死預設第一頁 data: {"batchId": getBatchId,"pageNo":1}, type: 'get', dataType: 'JSON', success: function (result) { $('#export').attr('disabled',false) //獲取返回的total值，也就是總條數 var total = result.total console.log(total) //然後把resDiv，span的值替換成total $('#resDiv').html(total); // 請求成功返回的資料 var listt = result.list var hlistt=""; $.each(listt,function(i,value){ hlistt+= "<tr><td>"+value.batchId+"</td><td>"+value.vehicle_FrameNo+"</td><td>"+value.vehicle_licenceCode+"</td><td>"+value.businessPolicyNo+"</td><td>"+value.compelPolicyNo+"</td><td>"+value.status+"</td></tr>"; }); $("#tbodytalbe").append(hlistt); $('body').css('overflow','scroll') $("#tbodytalbe").on( "change", function() { $("#tbodytalbe").val( $("#tbodytalbe").text()); }) }, error: function (err) { //失敗 console.log(err) } }) } //點選下一頁 $(function () { $('#nextPage').click(function (){ pageNumNextPage++ console.log(pageNumNextPage) $.ajax({ url: "${ctx}/queryBatchOrders",//介面地址 data: {"batchId": getBatchId,"pageNo":pageNumNextPage}, type: 'post', dataType: 'JSON', success: function (result) { console.log(result) var total = result.total pagesNumLastPage = result.pageNum; console.log(total) $('#resDiv').html(total); $('#tbodytalbe').empty('tr');//清空上一頁資料 // 請求成功返回的資料 var listt = result.list var hlistt=""; $.each(listt,function(i,value){ hlistt+= "<tr><td>"+value.batchId+"</td><td>"+value.vehicle_FrameNo+"</td><td>"+value.vehicle_licenceCode+"</td><td>"+value.businessPolicyNo+"</td><td>"+value.compelPolicyNo+"</td><td>"+value.status+"</td></tr>"; }); $("#tbodytalbe").append(hlistt); $("#tbodytalbe").on( "change", function() { $("#tbodytalbe").val( $("#tbodytalbe").text()); }) }, error: function (err) { //失敗 console.log(err) } }) }) }) // 點選上一頁 $(function () { $('#lastPages').click(function (){ console.log(pageNumNextPage+'-----') pageNumNextPage-- console.log(pageNumNextPage+'+++++') $.ajax({ url: "${ctx}/queryBatchOrders",//介面地址 data: {"batchId": getBatchId,"pageNo":pageNumNextPage}, type: 'post', dataType: 'JSON', success: function (result) { console.log(result) var total = result.total console.log(total) $('#resDiv').html(total); $('#tbodytalbe').empty('tr') // 請求成功返回的資料 var listt = result.list var hlistt=""; $.each(listt,function(i,value){ hlistt+= "<tr><td>"+value.batchId+"</td><td>"+value.vehicle_FrameNo+"</td><td>"+value.vehicle_licenceCode+"</td><td>"+value.businessPolicyNo+"</td><td>"+value.compelPolicyNo+"</td><td>"+value.status+"</td></tr>"; }); $("#tbodytalbe").append(hlistt); $("#tbodytalbe").on( "change", function() { $("#tbodytalbe").val( $("#tbodytalbe").text()); }) }, error: function (err) { //失敗 console.log(err) } }) }) }) //環境檢測介面 $('#Detection').click(function () { var cmbProvince=$("#cmbProvince").find("option:selected").text(); if(cmbProvince == "" || cmbProvince=="--請選擇--"){ alert("請選擇地區"); }else { alert("環境檢測中，請點選確定按鈕..."); $('#Detection').removeAttr('disabled','disabled') var testIng ={ 'cmbProvince':cmbProvince } $.ajax({ url: "${ctx}/verifyEnv",//介面地址 data: testIng, type: 'POST', dataType: 'JSON', //ajax同步操作，不寫這個是預設非同步 //async:false, success: function (test) { // 請求成功返回的資料 console.log(test); $('#Detection').removeAttr('disabled','none') var test_text = testerr.responseText; if (testerr_text == "success"){ alert("環境正常"); //刪除 批量生成按鈕的置灰屬性 $('#create').attr('disabled',false) } if (test_text == "環境監測失敗！"){ alert("環境異常！"); } }, error: function (testerr) { //失敗 console.log(testerr) $('#Detection').removeAttr('disabled','none') var testerr_text = testerr.responseText; if (testerr_text == "success"){ alert("環境正常"); //刪除 批量生成按鈕的置灰屬性 $('#create').attr('disabled',false) } if (testerr_text== "環境監測失敗！"){ alert("環境異常！"); } } }) } }) //下載檔案 $('#export').click(function(){ if(getBatchId==""){ alert("請先出單！") }else { var $eleForm = $("<form method='post'></form>"); //介面地址，post請求，引數值加在了URL後邊 $eleForm.attr("action","${ctx}/export?batchId="+getBatchId); $(document.body).append($eleForm); //提交表單，實現下載? $eleForm.submit(); alert("資料生成中請稍等...") } }); </script> </body> </html>