新建本地缓存变量:fire_gsUserObj,之前两个页面使用的是同一个缓存变量:fire_userObj
一、主页面【即大区,如这里的五华区消防大队】是根目录下的main-group.html、fire-bus-group下的main.html
fire-bus-group下的gisCrud.js、gisBind.js:主要是做主页面的js,包括数据展示‘地图等等’
二、内容分发页面
根目录下的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;i<layerArr.length;i++){
//将底图图层添加到专题图地图
// g2pageLayout.addLayer(layerArr[i]);
}
g2pageLayout.addLayer(layerArr[1]);
//构造一个专题图专题元素图层,用于对专题元素进行操作
var patternLayer = new g2.lys.PatternLayer({map: g2pageLayout});
//获取专题地图的中心点
var center = g2pageLayout.getCenter();
//获取地图当前的比例尺(返回的是以米为单位),作为比例尺元素的值
var scale = '1:{0}'.replace('{0}', g2pageLayout.getScale());
//构造一个比例尺专题元素,并显示在地图的中心
// (专题元素包括:文本专题元素,图片专题元素,图例专题元素,指北针专题元素,比例尺专题元素)
var scaleBar = new g2.carto.ScaleBar({
name: 'scaleBar1',
x: center[0], //放置在地图x轴坐标
y: center[1], //放置在地图y轴坐标
scale: scale, //显示的比例尺内容
unit: '米', //要显示的比例尺单位
background: "#99CC33", //显示的底色
width: 120, //显示的长度
height: 30 //显示的宽度
});
setTimeout(function () {
//调用导出专题图api,输入名称,并设置导出成功回调
g2pageLayout.export("pageLayout.png", function () {
//清空
jQuery('#map').find('.ol-viewport')
.filter(function(){
return jQuery(this).prev().length>0;
});
});
}, 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页面:
<form id="OwnerUnitForm">
<input type="hidden" name="subCenterCode" id="subCenterCode">
<table class="yy-table yy-tableFix yy-tableF">
<tbody>
<tr>
<td >
<div class="gs-el-input">
<div id="unitNameDiv"></div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
写上一个隐藏域,参数名称和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);
<input type="hidden" id="addUnitInfo" /> 隐藏域也可以传递对象,
获取: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页面
<ul class="items">
<li class="item">
<span class="info-title left">隐患编号:</span>
<b class="content" id="hidden-danger-number">201809269041010</b>
</li>
<li class="item">
<span class=" info-title">隐患接收时间:</span>
<b class="content" id="hidden-danger-time"></b>
</li>
<li class="item">
<span class="info-title left">单位名称:</span>
<b class="content" id="unit-name"></b>
</li>
<li class="item">
<span class="info-title left">服务模式:</span>
<b class="content" id="hidden-danger-service"></b>
</li>
</ul>
十四、如果详情页需要再重新调一个接口的话,那么在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<orglist.length;i++){
temp.push(orglist[i].orgName)
}
app.functionNames = temp.join(",");
}
});
//detail页面
<ul>
<li class="i-2">
<em class="label before">用户姓名:</em>
<div class="name">{{info.name}}</div>
</li>
<li class="i-1">
<em class="label before">用户名:</em>
<div class="name">{{info.loginName}}</div>
</li>
<li class="i-2">
<em class="label">所属单位:</em>
<div class="name">{{info.orgName}}</div>
</li>
</ul>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。