新建本地缓存变量：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>