昆明五華參謀平臺項目代碼邏輯

新建本地緩存變量：fire_gsUserObj，之前兩個頁面使用的是同一個緩存變量：fire_userObj

一、主頁面【即大區(qū)，如這里的五華區(qū)消防大隊】是根目錄下的main-group.html、fire-bus-group下的main.html
fire-bus-group下的gisCrud.js、gisBind.js：主要是做主頁面的js，包括數(shù)據(jù)展示‘地圖等等’

二、內(nèi)容分發(fā)頁面
根目錄下的main-dispatcher.html頁面主要是做內(nèi)容分發(fā)
區(qū)分：var ref = getQueryString("ref"); //ref=login:從登陸頁跳轉(zhuǎn)過來;ref=map_org,地圖上點擊點位跳轉(zhuǎn)過來;

三、具體單位頁面【如這里的東北師范大學(xué)】是根目錄下的gsindex.html
changeUserObj()：這個方法，修改緩存變量
setGlobalVal('gsUserObj',JSON.stringify(tmpObj));

real-time-monitoring下的monitorCrud.js、monitorFloor_bind.js：主要制作中間的地圖模塊
prise-home下的homeCrud.js、main_bind.js：主要上方的火警、電氣火災(zāi)預(yù)警等數(shù)據(jù)的顯示

四、//百度 瓦片圖

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：是在地圖上插入攝像頭圖標(biāo)

六、截圖：

var cutScreent =function () {
        _self=this;
        var div = document.createElement('div');
        _self.div=div;
        //設(shè)置屬性信息
        div.id = "g2pageLayout";
        //將div的zindex設(shè)置為1讓map的div遮擋專題圖的div達(dá)到隱藏的效果
        div.setAttribute("class", "b");
        //設(shè)置樣式信息
        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);
        // 創(chuàng)建專題圖地圖實例
        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]);
        //構(gòu)造一個專題圖專題元素圖層，用于對專題元素進(jìn)行操作
        var patternLayer = new g2.lys.PatternLayer({map: g2pageLayout});
        //獲取專題地圖的中心點
        var center = g2pageLayout.getCenter();
        //獲取地圖當(dāng)前的比例尺（返回的是以米為單位），作為比例尺元素的值
        var scale = '1:{0}'.replace('{0}', g2pageLayout.getScale());
        //構(gòu)造一個比例尺專題元素,并顯示在地圖的中心
        // (專題元素包括：文本專題元素，圖片專題元素，圖例專題元素，指北針專題元素，比例尺專題元素)
        var scaleBar = new g2.carto.ScaleBar({
            name: 'scaleBar1',
            x: center[0],   //放置在地圖x軸坐標(biāo)
            y: center[1],   //放置在地圖y軸坐標(biāo)
            scale: scale,   //顯示的比例尺內(nèi)容
            unit: '米',   //要顯示的比例尺單位
            background: "#99CC33",   //顯示的底色
            width: 120,   //顯示的長度
            height: 30    //顯示的寬度
        });
        setTimeout(function () {
            //調(diào)用導(dǎo)出專題圖api，輸入名稱，并設(shè)置導(dǎo)出成功回調(diào)
            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;
所以呢，在下面的指南針的方法里面，可以直接調(diào)用ZS.MONITOR.floor_g2map.rotate

八、debugger打在一個方法的最上面，比如這樣：
/**

• 獲取點數(shù)據(jù)樣式
• */

  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:
              //冒火的 責(zé)令整改
              source = "data:image/png;base64,"
              width = "34";
              height = "68";
              break;
      }
      var symbol = new g2.syms.Picturemarkersymbol({
          //圖片Base64編碼
          source: source,
          //圖片寬度
          width: width,
          //圖片高度
          height: height,
          //圖片旋轉(zhuǎn)角度
          rotation: "0",
          //圖片透明度
          opacity: "1",
          //圖片X偏移量
          offsetX: height / 2,
          //圖片Y偏移量
          offsetY: width / 2
      });
      return symbol;
  }

  然后，再在頁面上的source源碼里面，在可能會訪問到的代碼的左邊打上斷點，看看代碼是否會訪問到。
  比如，剛剛就是沒有訪問到，因為，返回的state的格式的number類型，而之前的switch里面的state是string類型，匹配不上。

【注】：頁面上有debugger，關(guān)閉F12，debugger斷點效果會自動消失。這樣的好處是不用再代碼里面重復(fù)的添加刪除debugger了

九、
bind和curd寫法的時候，表格怎么傳參數(shù)
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>

寫上一個隱藏域，參數(shù)名稱和name值一樣，
在curd.js里面，創(chuàng)建表格的時候
//創(chuàng)建列表

  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,
                //當(dāng)前第幾頁隱藏域
                pageNoId: "pageNo",
                //每頁顯示多少條
                pageSizeId: "pageSize",
                formId: 'OwnerUnitForm'
            },
        }

這里面有個formId，為OwnerUnitForm，和main.html里面的form的id相同，這樣就將隱藏域的name值作為參數(shù)傳遞過去了。然后，在需要的時候給這個id等于name的隱藏域賦值即可。

分情況，一種類似于這種，參數(shù)為subCenterCode的，這種沒辦法創(chuàng)建控件，只能以隱藏域的方法傳遞參數(shù)
還有，如上面的unitNameDiv，單位名稱，是需要自己輸入的，而這種是可以作為控件創(chuàng)建的，那么在創(chuàng)建這個控件的時候：
OwnerUnitSubcenterCrud.createInput('unitNameDiv', 'unitName', '請輸入單位名稱檢索'); // 企業(yè)名稱

unitName就是傳遞給接口的參數(shù)。
注意：分這兩種情況??！

十、
/
運營中心用戶管理 ->部門管理->新建部門
/

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) {
                // 防止重復(fù)提交
                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是驗證信息的位置
驗證規(guī)則就是上面的
var wordStr = "validate[maxSize[" + maxNum + "], minSize[" + minNum + "]]";
var _required = false;
if (required) {
wordStr = "validate[required, maxSize[" + maxNum + "], minSize[" + minNum + "]]";
_required = true;
}是否必填 字?jǐn)?shù)限制大小

    十一、
    var objIframe = {
                type: 1, // 默認(rèn)值為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" /> 隱藏域也可以傳遞對象，
                        獲?。簐ar info = JSON.parse($("#addUnitInfo").val());  先將對象轉(zhuǎn)為字符串，再轉(zhuǎn)回對象

十二
// 接收時間
noteManagementCurd.date_picker_create('timeRangeDiv', 'timeRange',start ,end);
寫上timeRange，獲取數(shù)據(jù)的時候就傳參數(shù)timeRange，不寫就不傳，只通過timeRangeDiv創(chuàng)建時間選擇框

十三、列表頁，每條數(shù)據(jù)都是有一個row對象的，里面包含了該條列表所有的數(shù)據(jù)
然后，點擊展開詳情頁的時候，load一個detail.html頁面，在success回調(diào)方法里面，可以把數(shù)據(jù)直接帶過去，不用再調(diào)一個詳情頁的接口了

methods:{
    showDetails:function(row){ 
                    var accidentInfoId = row.accidentInfoId;
                    var objIframe = {
                        type: 1, // 默認(rèn)值為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">服務(wù)模式：</span>
            <b class="content" id="hidden-danger-service"></b>
    </li>
    </ul>

十四、如果詳情頁需要再重新調(diào)一個接口的話，那么在success回調(diào)方法里面，就傳一個接口需要的參數(shù)過去，而不是具體的數(shù)據(jù)了，然后在詳情頁，根據(jù)這個參數(shù)調(diào)接口，獲取數(shù)據(jù)，再賽到頁面里面

//行點擊事件 詳情
detaiClick: function (row) {
        //獲取id  獲取數(shù)據(jù)
    console.log(row)
        //  點擊行彈出dialog 對話框
        var objIframe = {
                type: 1, // 默認(rèn)值為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>