作为一个测试，第一次写前端页面，一脸懵比，东拼西凑算是凑出来了
只是记录一下。。。那天忘了前端怎么写，还可以抄袭下。。。哈哈哈
<%@ 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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
