效果图
1.使用iframe引入页面
// 初始化右侧页面
createHtml: function(flag) {
$("#_result").css('width','100%');
$("#_result").css('height','100%');
if(flag) {
var page = `
<div style="width:100%; height:100%">
<iframe frameborder="no" scrolling-y="yes" allowtransparency="yes" src="../business/ak_business/html/ak_xmtj/ak_fxpgjgtj.html?"
style="list-style:none;width:100%;height:100%;"></iframe>
</div>`;
}else {
var page = `
<div style="width:100%; height:100%">
<iframe frameborder="no" scrolling-y="yes" allowtransparency="yes" src="../business/ak_business/html/ak_xmtj/ak_fxsjjgtj.html?"
style="list-style:none;width:100%;height:100%;"></iframe>
</div>`;
}
$('#_result').html(page);
var docuWidth = $(document).width();
_slipWin.upws(docuWidth*0.27);
_slipWin.show();
$(".rightCallBackBox").height($("#ak_left4").height());
},
根据业务区分, flag 判断是引用不同 的页面,此段代码是放在三维部分触发,引用的页面在业务页面 结构内
2.html页面
iframe引入的html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/rightPage_common.css"/>
<style type="text/css">
</style>
</head>
<body class="page-header-fixed page-sidebar-closed-hide-logo page-sidebar-closed-hide-logo" style="background-color: rgba(0,0,0,0);">
<!--#include virtual="../../common/head_global.html"-->
<!--#include virtual="../../common/head_theme.html"-->
<!-- 风险事件机构统计 -->
<div class="panel-heading">
<span id="head_title"></span>
<img id="imgSlide" src="../../../build/slipWin/up.png">
<span id="head_total"></span>
</div>
<div class="panel-body" id="slide_body" style="display: none;">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:3px;opacity: 0.7;">
<!-- 风险等级 -->
<div class="col-md-2">
<select id="severityCode" class="form-control" placeholder=""></select>
</div>
<!-- 风险状态 -->
<div class="col-md-2">
<select id="state" class="form-control" data-size="3">
<option value ="">全部风险状态</option>
<option value ="10">新建</option>
<option value ="20">跟踪进展中</option>
<option value ="30">处置完毕</option>
</select>
</div>
</div>
<div class="form-group" style="margin-top:3px;opacity: 0.7;">
<!-- 单位层级 -->
<div class="col-md-2">
<select id="unitHierarchy" class="form-control" placeholder=""></select>
</div>
<!-- 风险事件大类 -->
<div class="col-md-2">
<select id="riskEventFirst" class="form-control" data-size="3"></select>
</div>
</div>
<!-- 国家/省市 -->
<div class="form-group" style="margin-top:3px;opacity: 0.7;">
<div class="col-md-2">
<select id="areaSecondCode" class="form-control" placeholder=""></select>
</div>
<div class="col-md-2"></div>
</div>
<!-- 查询图标 -->
<!-- <div class="form-group" style="margin-top:3px;opacity: 0.75;">
<div class="col-md-2" style="display: flex;justify-content: start;position: relative;width: 94%;">
<input type="text" class="form-control serach_input" id="projectName" placeholder="请输入项目名称:" autocomplete="off">
<a href="javaScripts:;" class="serach_img" id="btn_query1"></a>
</div>
</div> -->
<div class="form-group" style="margin-top:3px;margin-bottom: 0;justify-content: start;">
<div class="col-md-3" style="margin-left: 8px;">
<button type="button" id="btn_query" class="btn btn-primary" style="margin-left:5px;background-color: #1a4264;" >查询</button>
<button type="button" id="btn_reset" class="btn btn-primary" style="margin-left:5px;background-color: #1a4264;" >重置</button>
</div>
</div>
</form>
</div>
<div id="body"></div>
<!-- 有意思的是, 只有在 html 目录下创建的文件, bottom.html 文件才会生效. -->
<!--#include virtual="../../common/bottom.html"-->
<script src="../../common/assets/global/plugins/bootstrap/js/bootstrap-paginator.js" type="text/javascript" charset="utf-8"></script>
</body>
<script type="text/javascript" src="../../js/ak_xmtj/ak_fxsjjgtj.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
ak_fxsjjgtj.init();
});
</script>
</html>
3.脚本
初始化查询条件,并调用后台接口方法
// 接收请求的参数
initSearch: function() {
this.offset = this.pagesize * (this.page - 1);
ak_fxsjjgtj.temp = {
Authorization:akglobe_config.token,
limit: 10,
offset: this.offset,
severityCode: $("#severityCode").val(), // 风险等级
state: $("#state").val(), // 风险状态
unitHierarchy: $("#unitHierarchy").val(), // 单位层级
riskEventFirst: $("#riskEventFirst").val(), // 风险事件大类
// name: $("#projectName").val(), // 项目名称中文
areaSecondCode: $("#areaSecondCode").val(), // 国家/省市
}
ak_fxsjjgtj.getDate(); // 请求列表数据
},
调用后端接口,将获取的到数据传到回调函数中
// 请求列表数据接口查询
getDate: function() {
var options = new Object();
options.url = "/manage-api/TRiskTjfxController/getRiskEventCountry";
options.type = "GET";
options.data = ak_fxsjjgtj.temp;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
ak_fxsjjgtj.callBackGET(data);
}
// 如果是测试环境 使用假数据
if(parent.typep002==2){
ak_fxsjjgtj.callBackGET(ak_ztqg.getRiskEventCountry);
}else{
akglobe_config.ajaxQuery(options);
}
},
在回调函数中调用初始化html和初始化分页方法
callBackGET:function(data){
if(!data) return;
$("#head_total").text(`(${data.total}个)`); // 标题旁边的总数
ak_fxsjjgtj.initList(data); // 初始化 html 内容
ak_fxsjjgtj.initPage(data); // 初始化分页
},
初始化html
// 初始化 html 内容
initList: function(data) {
var data = data.rows;
var html = "";
html += "<div id='pageid_obstacle' style='overflow-y:auto;overflow-x:hidden;margin-top:10px;'>";
html += ak_fxsjjgtj.htmlTable(data); // 列表和分页 html 结构。
html += "</div>";
html += "<div id='pagebottom_poi' class=\"pageListbottom\"></div>";
html += `<div id="Paginator" style="text-align: center"> <ul id="pageLimit"></ul> </div>`;
$('#body').html(html);
},
htmlTable: function(r) {
var comlist = r;
var length = r.length;
var table = [];
for(var i=0;i< length;i++){
var db = comlist[i];
var code = db.code; // 国家/省市编码
var name = db.name; // 名称
// 超出的字符用省略号表示
if(name) {
if(name.length > 15) {
name = name.substr(0, 15) + '...';
}
}else{
name = "";
}
var num = db.num; // 数量
var x = db.x; // 纬度
var y = db.y; // 经度
var jsonstr = JSON.stringify(db); // 将json对象转换为json字符串
var index = i + 1;
// 第一行
table.push("<div style='position:relative'><input type='button' class='callBack_button1' style='width:80%;height:27px;margin-left: 10%;' value='"+name+"' onclick='ak_fxsjjgtj.handleEvent("+jsonstr+")' />");
table.push("<div style='position: absolute;width: 30px;height: 20px;top: 4px;left: 10%;color: #0a69fb;background-color: #d6c6ff;border-bottom-right-radius: 50%;border-top-right-radius: 50%;text-align: center;line-height: 20px;'>"+index+"</div>");
table.push("</div>");
// 第二行
table.push("<div style='width: 80%;height: 30px;margin:0 auto;display:flex;justify-content:space-between;align-items: center;font-weight: normal;margin-bottom: 10px;'>");
table.push("<div style=''><span style='color:#fff'>数量:</span> <a style='color:white;'>"+num+"</a></div>");
table.push("<div style=''><a style='color: #00FFFF' src='javaScript:;' onclick='ak_fxsjjgtj.handleEvent2("+code+")'>风险事件</a></div>");
table.push("</div>");
}
return table.join("");
},
在全局变量中设置分页默认值
page: 1, // 当前的页数
pagesize: 10, // 一页几行
offset: 0, // 用于计算当前页数
初始化分页
// 初始化分页
initPage: function(data) {
data.currenPage = parseInt(data.currenPage/this.pagesize+1);
if(data.currenPage == 1 || data.currenPage == data.pageCount) {
var currenPage = data.currenPage;
}else if(data.currenPage == 0){
var currenPage = data.currenPage + 1;
}else {
var currenPage = data.currenPage;
}
$('#pageLimit').bootstrapPaginator({
bootstrapMajorVersion: 3, //对应bootstrap版本
currentPage: currenPage, //当前页
totalPages: data.pageCount == 0 ? 1 : data.pageCount, // 总页数
size:"normal", //分页大小
alignment:"right",
numberOfPages: 5, //显示的页数
// itemTexts: function (type, page, current) {
// switch (type) {
// case "first": return "首页";
// case "prev": return "上一页";
// case "next": return "下一页";
// case "last": return "末页";
// case "page": return page;
// }
// },
/**
* 分页点击事件
* @param event [jquery对象]
* @param originalEvent [dom原生对象]
* @param type [按钮类型]
* @param page [点击按钮对应的页码]
*/
onPageClicked: function (event, originalEvent, type, page) {
// render(page);//根据点击页数渲染页面
ak_fxsjjgtj.page = page; // 点击的页数
ak_fxsjjgtj.initSearch(); // 接收请求的参数
}
});
},
4.完整js脚本
// 风险事件国家统计
var ak_fxsjjgtj = {
temp: null, // 风险事件国家统计 请求的参数
temp2: null, // 专门处理所有数据标注的参数
page: 1, // 当前的页数
pagesize: 10, // 一页几行
offset: 0, // 用于计算当前页数
init: function() {
$("#head_title").text("风险事件国家数量统计"); // 标题
this.initSearch(); // 接收请求的参数
this.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
this.ButtonInit(); // 初始化 Button 的点击事件
//this.initSelect(); // 初始化下拉框
// this.initDatepicker(); // 初始化时间控件
this.initSlide(); // 初始化条件滑动和滑出
},
// 初始化时间控件
initDatepicker:function (){
// 日期控件初始化
$("#startTime").datepicker({
format: 'yyyy-mm-dd',
minView:'month',
language: 'zh-CN',
autoclose:true
}).on("click",function(){
$("#startTime").datepicker("setEndDate", $("#startTime").val())
});
$("#endTime").datepicker({
format: 'yyyy-mm-dd',
minView:'month',
language: 'zh-CN',
autoclose:true
}).on("click",function(){
$("#endTime").datepicker("setStartDate",$("#endTime").val())
});
},
// 初始化条件滑动和滑出
initSlide: function() {
// 标题
$(".panel-heading").click(function(){
var img = $("#imgSlide").attr("src");
if(img == '../../../build/slipWin/down.png') {
$("#imgSlide").attr("src", '../../../build/slipWin/up.png');
}else {
$("#imgSlide").attr("src", '../../../build/slipWin/down.png');
}
$("#slide_body").slideToggle("slow");
});
},
// 初始化下拉框
initSelect: function() {
// 风险等级
var options=new Object();
options.url="/manage-api/TRiskDictionController/TObjSelect";
options.defualtOption="全部风险等级";
options.data = {
codeSetId: 'fxdj'
}
options.id="severityCode";
akglobe_config.SelectInit(options);
// 单位层级
var options=new Object();
options.url="/manage-api/TRiskDictionController/TObjSelect";
options.defualtOption="全部单位层级";
options.data = {
codeSetId: 'dwcj'
}
options.id="unitHierarchy";
akglobe_config.SelectInit(options);
// 风险事件大类
var options=new Object();
options.url="/manage-api/TRiskDictionController/TObjSelect";
options.defualtOption="全部风险事件大类";
options.data = {
codeSetId: 'fxsjfl',
parentId: '0'
}
options.id="riskEventFirst";
akglobe_config.SelectInit(options);
// 国家/省市
var options = new Object();
options.url = "/manage-api/TRiskDictionController/TObjSelect";
options.defualtOption = "全部国家/省市";
options.data = {
codeSetId: 'gjdq',
}
options.id = "areaSecondCode";
akglobe_config.SelectInit(options);
},
// 获得 iframe 嵌套页面参数值的通用函数
getQuery: function(url, name) {
// console.log(url);
var index = url.indexOf('?'); // 获取 ? 的位置
// 如果没有参数, 返回 null
if (index !== -1) {
var query = url.substring(index + 1).split('&'); // 截取字符串 分割字符串为数组
// console.log(query) // (2)['pageIndex=1', 'pageSize=10']
for (let i = 0; i < query.length; i++) {
// console.log(query[i].split('='))
var itemArr = query[i].split('=') // 分割每个参数的键值对,
if (itemArr[0] === name) { // 判断是否为要找的键名
return itemArr[1] // 返回对应键值对的值
}
}
}
return null
},
// 接收请求的参数
initSearch: function() {
this.offset = this.pagesize * (this.page - 1);
ak_fxsjjgtj.temp = {
Authorization:akglobe_config.token,
limit: 10,
offset: this.offset,
severityCode: $("#severityCode").val(), // 风险等级
state: $("#state").val(), // 风险状态
unitHierarchy: $("#unitHierarchy").val(), // 单位层级
riskEventFirst: $("#riskEventFirst").val(), // 风险事件大类
// name: $("#projectName").val(), // 项目名称中文
areaSecondCode: $("#areaSecondCode").val(), // 国家/省市
}
ak_fxsjjgtj.getDate(); // 请求列表数据
},
// 请求列表数据接口查询
getDate: function() {
var options = new Object();
options.url = "/manage-api/TRiskTjfxController/getRiskEventCountry";
options.type = "GET";
options.data = ak_fxsjjgtj.temp;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
ak_fxsjjgtj.callBackGET(data);
}
// 如果是测试环境 使用假数据
if(parent.typep002==2){
ak_fxsjjgtj.callBackGET(ak_ztqg.getRiskEventCountry);
}else{
akglobe_config.ajaxQuery(options);
}
},
callBackGET:function(data){
if(!data) return;
$("#head_total").text(`(${data.total}个)`); // 标题旁边的总数
ak_fxsjjgtj.initList(data); // 初始化 html 内容
ak_fxsjjgtj.initPage(data); // 初始化分页
},
// 接收请求的参数2, 专门是所有数据都标注.
initSearch2: function() {
ak_fxsjjgtj.temp2 = {
Authorization:akglobe_config.token,
severityCode: $("#severityCode").val(), // 风险等级
state: $("#state").val(), // 风险状态
unitHierarchy: $("#unitHierarchy").val(), // 单位层级
riskEventFirst: $("#riskEventFirst").val(), // 风险事件大类
// name: $("#projectName").val(), // 项目名称中文
areaSecondCode: $("#areaSecondCode").val(), // 国家/省市
}
ak_fxsjjgtj.getDate2(); // 所有数据标注数据接口
},
// 所有数据标注数据接口
getDate2: function() {
var options = new Object();
options.url = "/manage-api/TRiskTjfxController/getRiskEventCountry";
options.type = "GET";
options.data = ak_fxsjjgtj.temp2;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
ak_fxsjjgtj.callBackGET2(data);
}
// 如果是测试环境 使用假数据
if(parent.typep002==2){
ak_fxsjjgtj.callBackGET2(ak_ztqg.getRiskEventCountry);
}else{
akglobe_config.ajaxQuery(options);
}
},
callBackGET2:function(data){
if(!data) return;
parent.ak_left_click4.top3CallBackFxsj(data.rows); // 初始化三维标注
},
// 初始化 html 内容
initList: function(data) {
var data = data.rows;
var html = "";
html += "<div id='pageid_obstacle' style='overflow-y:auto;overflow-x:hidden;margin-top:10px;'>";
html += ak_fxsjjgtj.htmlTable(data); // 列表和分页 html 结构。
html += "</div>";
html += "<div id='pagebottom_poi' class=\"pageListbottom\"></div>";
html += `<div id="Paginator" style="text-align: center"> <ul id="pageLimit"></ul> </div>`;
$('#body').html(html);
},
htmlTable: function(r) {
var comlist = r;
var length = r.length;
var table = [];
for(var i=0;i< length;i++){
var db = comlist[i];
var code = db.code; // 国家/省市编码
var name = db.name; // 名称
// 超出的字符用省略号表示
if(name) {
if(name.length > 15) {
name = name.substr(0, 15) + '...';
}
}else{
name = "";
}
var num = db.num; // 数量
var x = db.x; // 纬度
var y = db.y; // 经度
var jsonstr = JSON.stringify(db); // 将json对象转换为json字符串
var index = i + 1;
// 第一行
table.push("<div style='position:relative'><input type='button' class='callBack_button1' style='width:80%;height:27px;margin-left: 10%;' value='"+name+"' onclick='ak_fxsjjgtj.handleEvent("+jsonstr+")' />");
table.push("<div style='position: absolute;width: 30px;height: 20px;top: 4px;left: 10%;color: #0a69fb;background-color: #d6c6ff;border-bottom-right-radius: 50%;border-top-right-radius: 50%;text-align: center;line-height: 20px;'>"+index+"</div>");
table.push("</div>");
// 第二行
table.push("<div style='width: 80%;height: 30px;margin:0 auto;display:flex;justify-content:space-between;align-items: center;font-weight: normal;margin-bottom: 10px;'>");
table.push("<div style=''><span style='color:#fff'>数量:</span> <a style='color:white;'>"+num+"</a></div>");
table.push("<div style=''><a style='color: #00FFFF' src='javaScript:;' onclick='ak_fxsjjgtj.handleEvent2("+code+")'>风险事件</a></div>");
table.push("</div>");
}
return table.join("");
},
// 子页面向父页面传值
handleEvent: function (jsonstr) {
// parent.ak_left_click3.clearTop2fgs();
// parent.ak_fgsObject_position.getData5(jsonstr); // 直接调用父元素的方法
parent.ak_commonQuery.clicklabelNewCountry(jsonstr); // 直接调用父元素的方法
},
// 跳转到详情页面
handleEvent2: function(id) {
var db = {};
db.areaSecondCode = id; // 国家/省市编码
db.levelCode = $("#severityCode").val(); // 风险等级
db.state = $("#state").val(); // 风险状态
db.unitHierarchy = $("#unitHierarchy").val(); // 单位层级
db.riskEventFirst = $("#riskEventFirst").val(); // 风险事件大类
akglobe_config.setDDoptions(db, "ak_fxsjjgtjList"); // 设置要传递的参数
window.open(ak_config.tm_urm+'ak_business/html/ak_fxpg/ak_fxsjjgtjList.html');
},
// 初始化分页
initPage: function(data) {
data.currenPage = parseInt(data.currenPage/this.pagesize+1);
if(data.currenPage == 1 || data.currenPage == data.pageCount) {
var currenPage = data.currenPage;
}else if(data.currenPage == 0){
var currenPage = data.currenPage + 1;
}else {
var currenPage = data.currenPage;
}
$('#pageLimit').bootstrapPaginator({
bootstrapMajorVersion: 3, //对应bootstrap版本
currentPage: currenPage, //当前页
totalPages: data.pageCount == 0 ? 1 : data.pageCount, // 总页数
size:"normal", //分页大小
alignment:"right",
numberOfPages: 5, //显示的页数
// itemTexts: function (type, page, current) {
// switch (type) {
// case "first": return "首页";
// case "prev": return "上一页";
// case "next": return "下一页";
// case "last": return "末页";
// case "page": return page;
// }
// },
/**
* 分页点击事件
* @param event [jquery对象]
* @param originalEvent [dom原生对象]
* @param type [按钮类型]
* @param page [点击按钮对应的页码]
*/
onPageClicked: function (event, originalEvent, type, page) {
// render(page);//根据点击页数渲染页面
ak_fxsjjgtj.page = page; // 点击的页数
ak_fxsjjgtj.initSearch(); // 接收请求的参数
}
});
},
// 初始化 Button 的点击事件
ButtonInit: function() {
// 查询 按钮
$("#btn_query").click(function () {
ak_fxsjjgtj.initSearch(); // 接收请求的参数
ak_fxsjjgtj.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
});
$("#btn_query1").click(function () {
ak_fxpgjgtj.initSearch(); // 接收请求的参数
ak_fxpgjgtj.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
});
// 重置 按钮
$("#btn_reset").click(function () {
$("#severityCode").val(''); // 风险等级
$("#state").val(''); // 风险状态
$("#unitHierarchy").val(''); // 单位层级
$("#riskEventFirst").val(''); // 风险事件大类
$("#areaSecondCode").val(''); // 国家/省市
ak_fxsjjgtj.initSelect(); // 初始化下拉框
ak_fxsjjgtj.initSearch(); // 接收请求的参数
ak_fxsjjgtj.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
});
// 风险等级 下拉框改变
$("#severityCode").change(function () {
ak_fxsjjgtj.initSearch(); // 接收请求的参数
ak_fxsjjgtj.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
});
// 风险状态 下拉框改变
$("#state").change(function () {
ak_fxsjjgtj.initSearch(); // 接收请求的参数
ak_fxsjjgtj.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
});
// 单位层级 下拉框改变
$("#unitHierarchy").change(function () {
ak_fxsjjgtj.initSearch(); // 接收请求的参数
ak_fxsjjgtj.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
});
// 风险事件大类 下拉框改变
$("#riskEventFirst").change(function () {
ak_fxsjjgtj.initSearch(); // 接收请求的参数
ak_fxsjjgtj.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
});
// 国家/省市 下拉框改变
$("#areaSecondCode").change(function () {
ak_fxsjjgtj.initSearch(); // 接收请求的参数
ak_fxsjjgtj.initSearch2(); // 接收请求的参数2, 专门是所有数据都标注.
});
},
//转换日期格式(时间戳转换为datetime格式)
changeDateFormat2:function (cellval) {
var dateVal = cellval + "";
if (cellval != null) {
var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return date.getFullYear() + "-" + month + "-" + currentDate + " ";
}
},
}