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

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

1、主頁面【即大區，如這裏的五華區消防大隊】是根目錄下的main-group.html、fire-bus-group下的main.html
fire-bus-group下的gisCrud.js、gisBind.js：主要是作主頁面的js，包括數據展現‘地圖等等’

2、內容分發頁面
根目錄下的main-dispatcher.html頁面主要是作內容分發
區分：var ref = getQueryString("ref"); //ref=login:從登錄頁跳轉過來;ref=map_org,地圖上點擊點位跳轉過來;

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

real-time-monitoring下的monitorCrud.js、monitorFloor_bind.js：主要製做中間的地圖模塊
prise-home下的homeCrud.js、main_bind.js：主要上方的火警、電氣火災預警等數據的顯示

4、//百度 瓦片圖

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);

瓦片圖長下面的這個樣子：

![]

5、

//加載視頻點信息
      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：是在地圖上插入攝像頭圖標

6、截圖：

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)
    }

7、
由於在這裏面定義了
ZS.MONITOR.map = g2map;
ZS.MONITOR.floor_g2map = g2map;
因此呢，在下面的指南針的方法裏面，能夠直接調用ZS.MONITOR.floor_g2map.rotate

8、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了

9、
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 style="padding-top: 20px;">
                            <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就是傳遞給接口的參數。
注意：分這兩種狀況！！

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

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;
}是否必填 字數限制大小

11、
    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建立時間選擇框

十3、列表頁，每條數據都是有一個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>

十4、若是詳情頁須要再從新調一個接口的話，那麼在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>