電子檔案項目記錄

一、從archivesList.vue 的 toDetail 方法進入頁面

<el-tabs v-model="activeName" class="top-tab" @tab-click="handleClick">
    <el-tab-pane label="設備標點" name="equipmentPoint">
        <EquipmentPoint v-if="activeName === 'equipmentPoint'"/>
    </el-tab-pane>
</el-tabs>

v-model的值綁定選項卡的 name值，點擊的時候，activeName的值動態改變為選項卡的name值，當到哪一個tab頁的時候，就渲染對應的組件

equipmentPoint組件
使用了：
<G2MapDetail </G2MapDetail>組件
里面又有三個組件，分別是：
Search、Plantu、Floor

Search組件：

獲取樓棟下拉框信息：
getLouDong()方法
傳入unitId，通過findBuildByUnitId接口獲取數據
因為unitId是通過archivesList.vue組件傳入的，如果直接存到store里面，那么會在刷新頁面的時候丟失，所以需要存入localstorage里面：localStorage.setItem("unitId", unitId);
在Search.vue組件里面的mounted方法里面：
this.$store.commit('updateShUnitId', localStorage.getItem("unitId"))存到store里面，以后要用到這個unitId，就可以直接使用：var unitId = this.$store.state.shUnitId;獲取

<el-col :span="5" class="text-2">
        <label>樓棟：</label>
        <el-select v-model.trim="formInline.area" placeholder="" @change="selectTypeName">
            <el-option v-for="item in areaOpts" :key="item.buildId" :label="item.buildName" :value="item.buildId"></el-option>
        </el-select>
</el-col>

:label="item.buildName"：顯示的是下拉框里面的值
v-model.trim="formInline.area"：顯示的是輸入框里面的值

點擊查詢按鈕：觸發一個searchBtn事件

searchBtn: function () {
    var that = this;
    this.$store.commit('updateZSCurrentBuildname', this.buildName);
    this.$store.commit('updateZSCurrentBuild', this.formInline.area);
    this.$store.commit('updateZSdeviceId', this.formInline.deviceId);
    this.$store.commit('updateZSdeviceTypeId', this.ZS.MONITOR.deviceQueryType);
    this.$emit("searchFloor", {  //向父組件觸發一個emit事件searchFloor
        buildId: that.formInline.area,
        unitId:that.$store.state.shUnitId,
        floorId:that.$store.state.ZS.MONITOR.currentFloor,
        deviceId: that.formInline.deviceId,
        deviceTypeIds:that.ZS.MONITOR.deviceQueryType
    })
}

Floor組件：
默認會初始調用：getFloorListByBuildId，里面有一個commit，that.$store.commit('updateZSCurrentFloorObj', Math.random());
這樣，會觸發Plantu組件：里面的watch，然后會調用里面的
addPicToMap(picUrl, buildId, floorId)方法
主要是獲取floorArr，樓層信息
使用getFloorListByBuildId方法，
當有buildId的時候【這種情況屬于點擊查詢按鈕】，直接調用getFloorInfoByUnitIdAndBuildId接口，傳入unitId和buildId，獲取樓層信息，floorData = data[key];填充floorArr
當沒有buildId的時候【這種情況屬于，剛剛打開頁面的情況，沒有點擊搜索按鈕】，先通過findBuildByUnitId接口，傳入unitId，獲取buildId，默認為data.data[0].buildId，第一層樓，然后在調用getFloorInfoByUnitIdAndBuildId接口獲取樓層信息

Plantu組件：
初始調用addPicToMap(picUrl, buildId, floorId)方法
然后，調用loadEquipmentPoint方法
設備標點：
that.drawPoint(equip['longitude'], equip['latitude'], iconUrl, equip);
地圖上有地圖和設備點，設備點是標上去的，地圖只是一張圖片而已
picUrl就是底層圖片地圖

picUrl從哪里來的呢？
Floor組件，里面有
that.$emit("changeFloorPic", floorData && JSON.stringify(floorData) != '{}' ? floorData : data[0]);方法，
父組件G2MapDetail.vue接收：v-on:changeFloorPic="changeFloorPic"
改變floorObj
Plantu里面使用prop接收floorObj，然后在watch里面改變地圖的圖片
這幾天修復的標點bug，主要屬于數據不全的情況下導致的，比如沒有圖紙等等
沒有圖紙，導致沒有圖層容器

if(!_this.$refs.myplantu.ZS.MONITOR.deviceLayer){
    //創建元素圖層
        var elementLayer = new _this.gs2.lys.ElementLayer();
        _this.$refs.myplantu.ZS.MONITOR.floor_g2map.addLayer(elementLayer);
        _this.$refs.myplantu.ZS.MONITOR.deviceLayer = elementLayer; //全局標點使用

        //創建tooltip管理
        _this.$refs.myplantu.ZS.MONITOR.floor_tooltipWare = new _this.gs2.ext.TooltipWare({
            excluseLayerIds: elementLayer.getLayerId(),
            map: _this.$refs.myplantu.ZS.MONITOR.floor_g2map
        });
}else{
     _this.$refs.myplantu.ZS.MONITOR.deviceLayer.clear();
}

沒有元素圖層就先創建一個，有的話就先清空，很牛逼！

加載圖層，知情書有img.onload方法，在沒有圖紙的情況下，使用img.onerror方法
然后，由于清除圖層會有緩存，所以在圖紙路徑后面加了一個隨機數作為清緩存，這樣使得圖紙可以馬上出現

that.ZS.MONITOR.floor_imageLayer = new that.gs2.lys.ImageLayer({
    imageType: 702,
    extent: [
        0,
        0,
        w,
        h
    ], //圖片范圍，請按照坐標系的范圍給出，此為3857的坐標系范圍        
    url: picUrl+"?" + Math.random() // 圖層服務 url
});

'$store.state.floorDetailObj': function (newVal, oldVal) {

        if (this.floorObj ) {
            var nowUrl = "";
            if(this.floorObj.floorAreaImg){
                     nowUrl = api.forent_url.pic_url + "/floorImage/" + this.floorObj.floorAreaImg;
            }else{
                 nowUrl = api.forent_url.pic_url + "/floorImage/blank.png";
            }

            this.addPicToMap(nowUrl, 

            this.$store.state.ZS.MONITOR.currentBuild,
            (this.$store.state.ZS.MONITOR.currentFloor ? this.$store.state.ZS.MONITOR.currentFloor : this.floorObj.floorId)
            );
        }
        if (this.ZS.MONITOR.floor_tooltipWare) this.ZS.MONITOR.floor_tooltipWare.clear();

    },

有圖紙的情況下，使用圖紙，沒圖紙的情況下，使用默認圖層，一張白紙

縱觀這次修改bug，主要原因是因為沒有圖紙，導致報錯，導致代碼沒法繼續往下走，所以，要修改的部分主要集中在圖紙不存在的情況下，怎么做捕獲錯誤以及相對應的處理

二、代碼執行順序，頁面剛剛打開時候的執行順序
1、plantu.vue this.getIconConfig();方法
2、floor.vue getFloorListByBuildId方法，這里面的一段代碼：that.$store.commit('updateZSCurrentFloorObj', Math.random());觸發了plantu里面的watch監聽：'$store.state.floorDetailObj'，

if (this.floorObj ) {
    var nowUrl = "";
    if(this.floorObj.floorAreaImg){
             nowUrl = api.forent_url.pic_url + "/floorImage/" + this.floorObj.floorAreaImg;
    }else{
         nowUrl = api.forent_url.pic_url + "/floorImage/blank.png";
    }
    this.addPicToMap(nowUrl, 
    this.$store.state.ZS.MONITOR.currentBuild,
    (this.$store.state.ZS.MONITOR.currentFloor ? this.$store.state.ZS.MONITOR.currentFloor : this.floorObj.floorId)
    );
}

從而調用了plantu里面的addPicToMap方法，

3、plantu.vue addPicToMap方法
4、plantu.vue loadDevice方法，調用了getEquipmentListByFloorId方法，=》取得了左邊設備坐標的信息，傳到了表格里面
同時，這里面有個回調函數loadEquipmentPoint
5、plantu.vue loadEquipmentPoint方法
里面的這個方法是that.drawPoint(equip['longitude'], equip['latitude'], iconUrl, equip);在圖紙上進行設備標點
6、至此完結。

三、點擊搜索，頁面代碼的執行順序
1、點擊搜索，獲取搜索參數，觸發父組件G2MapDetail.vue，的searchFloor方法

分2種情況：第一次進來，肯定沒有圖紙和點設備等信息，所以需要一步步的獲取
第二次進來，因為是搜索，區別只是點的設備信息的不同，所以不需要獲取樓層信息和平面圖信息，只需要獲取到點設備的信息即可

ZS.MONITOR.deviceLayer是各種圖紙、點等元素的根本載體

1.1、當前緩存里面的buildId不等于參數傳過來的buildId，更改緩存里面的buildId，然后執行floor.vue里面的getFloorListByBuildId方法

that.floorArr = data; 取得樓層數據
【注】：樓棟有多個樓層，每個樓層自帶自己的平面圖url
that.$store.commit('updateZSCurrentFloor',data[0].floorId); 存當前樓層的id
that.$store.commit('updateZSCurrentFloorObj', Math.random());
觸發：'$store.state.floorDetailObj'的改變，在plantu里面有監聽這個，這個一旦改變，會對頁面的表格數據、平面圖、設備點進行重新繪畫及數據改變，使用的是方法：addPicToMap()，傳三個參數：picUrl, buildId, floorId
that.$emit("changeFloorPic", floorData && JSON.stringify(floorData) != '{}' ? floorData : data[0]);

1.2、當前緩存里面的buildId等于參數傳過來的buildId，調接口getDeviceListByCondition
說明已經打開過頁面，且圖紙設備數據都已經渲染過了，所以需要
如果有圖紙，先清空，然后再重新繪制，
如果沒有圖紙，先創建圖紙模板容器

if(!_this.$refs.myplantu.ZS.MONITOR.deviceLayer){  //沒有圖層，先創建
    //創建元素圖層
        var elementLayer = new _this.gs2.lys.ElementLayer();
        _this.$refs.myplantu.ZS.MONITOR.floor_g2map.addLayer(elementLayer);
        _this.$refs.myplantu.ZS.MONITOR.deviceLayer = elementLayer; //全局標點使用

        //創建tooltip管理
        _this.$refs.myplantu.ZS.MONITOR.floor_tooltipWare = new _this.gs2.ext.TooltipWare({
            excluseLayerIds: elementLayer.getLayerId(),
            map: _this.$refs.myplantu.ZS.MONITOR.floor_g2map
        });
}else{
     _this.$refs.myplantu.ZS.MONITOR.deviceLayer.clear();  //有圖層，清空
}
_this.$refs.myplantu.ZS.MONITOR.floor_tooltipWare.clear();
_this.$refs.myplantu.loadEquipmentPoint(data.data);

調方法loadEquipmentPoint，加載樓層設備點信息

四、表格需要加個自定義屬性prop="laLoopLaPoint"

這種寫法不行：

<el-table-column
    prop="laLoopLaPoint"
    label="回路點位"
    :show-overflow-tooltip="true"
    width="100">
</el-table-column>

然后在tableData里面添加自定義屬性laLoopLaPoint是不行的
正確寫法：

<el-table-column
    label="回路點位"
    :show-overflow-tooltip="true"
    width="100">
    <template slot-scope="scope">
         {{ scope.row.laLoop + '-'+ scope.row.laPoint}}
    </template>
</el-table-column>