昆明五华参谋平台项目代码逻辑
新建本地缓存变量:fire_gsUserObj,之前两个页面使用的是同一个缓存变量:fire_userObj
一、主页面【即大区,如这里的五华区消防大队】是根目录下的main-group.html、fire-bus-group下的main.html
fire-bus-group下的gisCrud.js、gisBind.js:主要是做主页面的js,包括数据展示‘地图等等’
10余年的太白网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同,自动调整太白建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“太白网站设计”,“太白网站推广”以来,每个客户项目都认真落实执行。
二、内容分发页面
根目录下的main-dispatcher.html页面主要是做内容分发
区分:var ref = getQueryString("ref"); //ref=login:从登陆页跳转过来;ref=map_org,地图上点击点位跳转过来;
三、具体单位页面【如这里的东北师范大学】是根目录下的gsindex.html
changeUserObj():这个方法,修改缓存变量
setGlobalVal('gsUserObj',JSON.stringify(tmpObj));
real-time-monitoring下的monitorCrud.js、monitorFloor_bind.js:主要制作中间的地图模块
prise-home下的homeCrud.js、main_bind.js:主要上方的火警、电气火灾预警等数据的显示
四、//百度 瓦片图
var baiduvec = new g2.carto.TileLayer({
layerType: g2.carto.TileLayer,
tileType: g2.carto.TileType.BaiduMap,
opacity: 1.0,
visible: true,
matrix: 22,
maxZoom:18,
crossOrigin: "anonymous",
baiduType:2,
url: gisConfig.baiduImg
});
ZS.MONITOR.floor_g2map.addLayer(baiduvec);
瓦片图长下面的这个样子:
![]
五、
//加载视频点信息
loadVideoBuild: function (data) {
var elements = [];
for (var i in data) {
var point = new this.gs2.geom.Point({
x: data[i].longitude,
y: data[i].latitude,
spatialReference: this.gs2.geom.SpatialReference.EPSG3857
});
var pictureMarker = new this.gs2.syms.Picturemarkersymbol({
source: "data:image/png;base64...,
width: 40,
height: 40,
offsetX: 20,
offsetY: 20
});
var ele = new this.gs2.ele.Element({
geometry: point,
symbol: pictureMarker
});
ele.tag = data[i];
ele.type = "video";
elements.push(ele);
}
this.ZS.MONITOR.elementLayer.addElements(elements);
// 绑定地图事件
this._bind_mapEvent();
},
pictureMarker:是在地图上插入摄像头图标
六、截图:
var cutScreent =function () {
_self=this;
var div = document.createElement('div');
_self.div=div;
//设置属性信息
div.id = "g2pageLayout";
//将div的zindex设置为1让map的div遮挡专题图的div达到隐藏的效果
div.setAttribute("class", "b");
//设置样式信息
div.setAttribute("style", "top: 50; left:0; bottom: 0; right:0; position: absolute; width: 100%; background-color: #3cace7;");
//获取已有的一个div
var container = document.getElementById("container");
_self.container=container;
//将专题图div添加到已有的div中
// container.appendChild(div);
// 创建专题图地图实例
var g2pageLayout = new g2.maps.PageLayout();
// 初始化专题图地图,传入要初始化的DOM对象的id
g2pageLayout.init({targetId: 'map'});
//获取地图中的地图图层
//var layer = g2map.findLayer("basemap");
// debugger;
var layerArr=ZS.MONITOR.map.getLayers();
for(var i=0;i0;
});
});
}, 200)
}
七、
因为在这里面定义了
ZS.MONITOR.map = g2map;
ZS.MONITOR.floor_g2map = g2map;
所以呢,在下面的指南针的方法里面,可以直接调用ZS.MONITOR.floor_g2map.rotate
八、debugger打在一个方法的最上面,比如这样:
/**
- 获取点数据样式
- */
var _getElementSymbol = function(state) { debugger var source = "data:image/png;base64," width = "34"; height = "50"; switch(state) { case 0: //绿色 正常 source = "data:image/png;base64," width = "34"; height = "50"; break; case 1: //紅色 二级告警 source = "data:image/png;base64," width = "34"; height = "50"; break; case 2: //橙色 一级告警 source = "data:image/png;base64," width = "34"; height = "50"; break; case 3: //冒火的 责令整改 source = "data:image/png;base64," width = "34"; height = "68"; break; } var symbol = new g2.syms.Picturemarkersymbol({ //图片Base64编码 source: source, //图片宽度 width: width, //图片高度 height: height, //图片旋转角度 rotation: "0", //图片透明度 opacity: "1", //图片X偏移量 offsetX: height / 2, //图片Y偏移量 offsetY: width / 2 }); return symbol; }
然后,再在页面上的source源码里面,在可能会访问到的代码的左边打上断点,看看代码是否会访问到。
比如,刚刚就是没有访问到,因为,返回的state的格式的number类型,而之前的switch里面的state是string类型,匹配不上。
【注】:页面上有debugger,关闭F12,debugger断点效果会自动消失。这样的好处是不用再代码里面重复的添加删除debugger了
九、
bind和curd写法的时候,表格怎么传参数
main.html页面:
写上一个隐藏域,参数名称和name值一样,
在curd.js里面,创建表格的时候
//创建列表
var _createTable = function (id) {
var _url = forent_url.operation_url + '/user/queryUserListBySysCodeAndOrgCode';
var opt3 = {
containerId: id,
templateNum: 3,
data: {
headData: [{
prop: "loginName",
label: "单位名称",
'min-width ': "20%",
'show-overflow-tooltip': true,
align: "center"
},
}
],
currentPage: 1,
pageSize: parseInt((document.documentElement.clientHeight - 249) / 40) - 1,
total: 0,
height: document.documentElement.clientHeight - 249,
//斑马线
stripe: true,
border: true,
url: _url,
//当前第几页隐藏域
pageNoId: "pageNo",
//每页显示多少条
pageSizeId: "pageSize",
formId: 'OwnerUnitForm'
},
}
这里面有个formId,为OwnerUnitForm,和main.html里面的form的id相同,这样就将隐藏域的name值作为参数传递过去了。然后,在需要的时候给这个id等于name的隐藏域赋值即可。
分情况,一种类似于这种,参数为subCenterCode的,这种没办法创建控件,只能以隐藏域的方法传递参数
还有,如上面的unitNameDiv,单位名称,是需要自己输入的,而这种是可以作为控件创建的,那么在创建这个控件的时候:
OwnerUnitSubcenterCrud.createInput('unitNameDiv', 'unitName', '请输入单位名称检索'); // 企业名称
unitName就是传递给接口的参数。
注意:分这两种情况!!
十、
/
运营中心用户管理 ->部门管理->新建部门
/
define([], function () {
var orgObj = JSON.parse(getGlobalVal('orgObj'));
var userObj = JSON.parse(getGlobalVal('userObj'));
var INPUT = {};
var _input_create = function (id, name, val, placeholder, minNum, maxNum, required) {
var wordStr = "validate[maxSize[" + maxNum + "], minSize[" + minNum + "]]";
var _required = false;
if (required) {
wordStr = "validate[required, maxSize[" + maxNum + "], minSize[" + minNum + "]]";
_required = true;
}
var options = {
containerId: id,
data: {
name: name,
placeholder: placeholder,
width: "100%",
size: "size",
value: val,
required: _required,
validate: wordStr,
model: "orgObj_" + id
}
}
options.data["orgObj_" + id] = val;
INPUT[name] = GS.gs_input.create(options);
}
var _btnBind = function () {
// 事件绑定
$('#btn-save').on('click', function () {
var options = {
"formId": "adduserDepartment",
"promptPosition": "bottomLeft"
};
var flag = GS.gs_validate.create(options);
if (flag) {
// 防止重复提交
initLoading();
jQuery.ajax({
url: forent_url.operation_url + '/userDept/saveOrUpdateDept',
data: {
parentDeptId: '-1',
deptName: INPUT.DepartMentName.orgObj_DepartMentNameDiv,
orgCode: orgObj.orgCode,
createUserId: userObj.id,
centerType: 2
},
type: "post",
async: true,
success: function (res) {
if ("success" == res.code) {
closeLoading();
GS.$Message.success("保存成功!");
GS.gs_dialogs.closeLast();
$('#btn-refresh').trigger('click');
} else {
closeLoading();
GS.$Message.warning(res.message);
}
}
});
}
})
$('#btn-cancel').on('click', function () {
GS.gs_dialogs.closeLast();
})
}
var _initPage = function () {
_input_create('DepartMentNameDiv', 'DepartMentName', '', '请输入部门名称', '0', '32',true);
_btnBind();
}
return {
initPage: _initPage,
}
});
var options = {
"formId": "adduserDepartment",
"promptPosition": "bottomLeft"
};
var flag = GS.gs_validate.create(options); 这个是做验证,formId是要做验证的表单的id,promptPosition是验证信息的位置
验证规则就是上面的
var wordStr = "validate[maxSize[" + maxNum + "], minSize[" + minNum + "]]";
var _required = false;
if (required) {
wordStr = "validate[required, maxSize[" + maxNum + "], minSize[" + minNum + "]]";
_required = true;
}是否必填 字数限制大小
十一、
var objIframe = {
type: 1, // 默认值为0,表示信息框;1表示页面层,2表示iframe层;
url: forent_url.localHostName + "/page/system-setting/organizational-management/add.html",
title: ['单位信息', 'cursor: move;'],
width: "516px",
height: "300px",
success: function () {
$("#addUnitInfo").val(JSON.stringify(addUnitInfo));
}
};
GS.gs_dialogs.create(objIframe);
隐藏域也可以传递对象,
获取:var info = JSON.parse($("#addUnitInfo").val()); 先将对象转为字符串,再转回对象
十二
// 接收时间
noteManagementCurd.date_picker_create('timeRangeDiv', 'timeRange',start ,end);
写上timeRange,获取数据的时候就传参数timeRange,不写就不传,只通过timeRangeDiv创建时间选择框
十三、列表页,每条数据都是有一个row对象的,里面包含了该条列表所有的数据
然后,点击展开详情页的时候,load一个detail.html页面,在success回调方法里面,可以把数据直接带过去,不用再调一个详情页的接口了
methods:{
showDetails:function(row){
var accidentInfoId = row.accidentInfoId;
var objIframe = {
type: 1, // 默认值为0,表示信息框;1表示页面层,2表示iframe层;
title: "详情",
url: forent_url.localHostName + "/page/warning-disposal/ownerUndetail.html",
width: "800px",
height: "620px",
success: function () {
$("#warnId").val(row.warnId);
$("#hidden-danger-number").html(row.accidentNo);
$("#hidden-danger-time").html(row.troubleTime);
$("#unit-name").html(row.unitName);
$("#hidden-danger-service").html(row.enterpriseUnitServiceModel);
$("#device-type").html(row.deviceTypeName);
$("#device-id").html(row.deviceId);
$("#hidden-danger-from").html(row.accidentTypeText);//
$("#host-loop-location").html(row.laMake+row.laLoop+row.laPoint);
$("#device-location").html(row.deviceAddress);
$("#hidden-danger-description").html(row.faultDescribe);
$(".processStatus").html(row.processStateText)
}
}
GS.gs_dialogs.create(objIframe);
},
}
//html页面
-
隐患编号:
201809269041010
-
隐患接收时间:
-
单位名称:
-
服务模式:
十四、如果详情页需要再重新调一个接口的话,那么在success回调方法里面,就传一个接口需要的参数过去,而不是具体的数据了,然后在详情页,根据这个参数调接口,获取数据,再赛到页面里面
//行点击事件 详情
detaiClick: function (row) {
//获取id 获取数据
console.log(row)
// 点击行弹出dialog 对话框
var objIframe = {
type: 1, // 默认值为0,表示信息框;1表示页面层,2表示iframe层;
url: forent_url.localHostName + "/page/system-setting/userRole/Detail.html",
title: ['用户详情', 'cursor: move;'],
width: "400px",
height: "421px",
success: function () {
$('#detail-Id').val(row.userId);
}
};
GS.gs_dialogs.create(objIframe);
},
//js文件
jQuery.ajax({
url: forent_url.base_LocalUrl + "/user/getUserDetail",
type: 'post',
data: {
"userId": $('#detail-Id').val(),
},
success: function (res) {
app.info = res.data;
var orglist = res.data.orgList;
var temp =[]
for(var i=0;i
用户姓名:
{{info.name}}
用户名:
{{info.loginName}}
所属单位:
{{info.orgName}}
当前题目:昆明五华参谋平台项目代码逻辑
网站路径:http://scyanting.com/article/iecoho.html