真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

電子檔案項(xiàng)目記錄

一、從archivesList.vue 的 toDetail 方法進(jìn)入頁面
電子檔案項(xiàng)目記錄

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供尖扎網(wǎng)站建設(shè)、尖扎做網(wǎng)站、尖扎網(wǎng)站設(shè)計(jì)、尖扎網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、尖扎企業(yè)網(wǎng)站模板建站服務(wù)，十年尖扎做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

v-model的值綁定選項(xiàng)卡的 name值，點(diǎn)擊的時(shí)候，activeName的值動(dòng)態(tài)改變?yōu)檫x項(xiàng)卡的name值，當(dāng)?shù)侥囊粋€(gè)tab頁的時(shí)候，就渲染對(duì)應(yīng)的組件

equipmentPoint組件
使用了：
組件
里面又有三個(gè)組件，分別是：
Search、Plantu、Floor

Search組件：
電子檔案項(xiàng)目記錄
獲取樓棟下拉框信息：
getLouDong()方法
傳入unitId，通過findBuildByUnitId接口獲取數(shù)據(jù)
因?yàn)閡nitId是通過archivesList.vue組件傳入的，如果直接存到store里面，那么會(huì)在刷新頁面的時(shí)候丟失，所以需要存入localstorage里面：localStorage.setItem("unitId", unitId);
在Search.vue組件里面的mounted方法里面：
this.$store.commit('updateShUnitId', localStorage.getItem("unitId"))存到store里面，以后要用到這個(gè)unitId，就可以直接使用：var unitId = this.$store.state.shUnitId;獲取

:label="item.buildName"：顯示的是下拉框里面的值
v-model.trim="formInline.area"：顯示的是輸入框里面的值電子檔案項(xiàng)目記錄

點(diǎn)擊查詢按鈕：觸發(fā)一個(gè)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", {  //向父組件觸發(fā)一個(gè)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組件：
默認(rèn)會(huì)初始調(diào)用：getFloorListByBuildId，里面有一個(gè)commit，that.$store.commit('updateZSCurrentFloorObj', Math.random());
這樣，會(huì)觸發(fā)Plantu組件：里面的watch，然后會(huì)調(diào)用里面的
addPicToMap(picUrl, buildId, floorId)方法
主要是獲取floorArr，樓層信息
使用getFloorListByBuildId方法，
當(dāng)有buildId的時(shí)候【這種情況屬于點(diǎn)擊查詢按鈕】，直接調(diào)用getFloorInfoByUnitIdAndBuildId接口，傳入unitId和buildId，獲取樓層信息，floorData = data[key];填充floorArr
當(dāng)沒有buildId的時(shí)候【這種情況屬于，剛剛打開頁面的情況，沒有點(diǎn)擊搜索按鈕】，先通過findBuildByUnitId接口，傳入unitId，獲取buildId，默認(rèn)為data.data[0].buildId，第一層樓，然后在調(diào)用getFloorInfoByUnitIdAndBuildId接口獲取樓層信息

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

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

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

        //創(chuàng)建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();
}

沒有元素圖層就先創(chuàng)建一個(gè)，有的話就先清空，很牛逼！

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

that.ZS.MONITOR.floor_imageLayer = new that.gs2.lys.ImageLayer({
    imageType: 702,
    extent: [
        0,
        0,
        w,
        h
    ], //圖片范圍，請(qǐng)按照坐標(biāo)系的范圍給出，此為3857的坐標(biāo)系范圍        
    url: picUrl+"?" + Math.random() // 圖層服務(wù) 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();

    },

有圖紙的情況下，使用圖紙，沒圖紙的情況下，使用默認(rèn)圖層，一張白紙

縱觀這次修改bug，主要原因是因?yàn)闆]有圖紙，導(dǎo)致報(bào)錯(cuò)，導(dǎo)致代碼沒法繼續(xù)往下走，所以，要修改的部分主要集中在圖紙不存在的情況下，怎么做捕獲錯(cuò)誤以及相對(duì)應(yīng)的處理

二、代碼執(zhí)行順序，頁面剛剛打開時(shí)候的執(zhí)行順序
1、plantu.vue this.getIconConfig();方法
2、floor.vue getFloorListByBuildId方法，這里面的一段代碼：that.$store.commit('updateZSCurrentFloorObj', Math.random());觸發(fā)了plantu里面的watch監(jiān)聽：'$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)
    );
}

從而調(diào)用了plantu里面的addPicToMap方法，

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

三、點(diǎn)擊搜索，頁面代碼的執(zhí)行順序
1、點(diǎn)擊搜索，獲取搜索參數(shù)，觸發(fā)父組件G2MapDetail.vue，的searchFloor方法

分2種情況：第一次進(jìn)來，肯定沒有圖紙和點(diǎn)設(shè)備等信息，所以需要一步步的獲取
第二次進(jìn)來，因?yàn)槭撬阉?，區(qū)別只是點(diǎn)的設(shè)備信息的不同，所以不需要獲取樓層信息和平面圖信息，只需要獲取到點(diǎn)設(shè)備的信息即可

ZS.MONITOR.deviceLayer是各種圖紙、點(diǎn)等元素的根本載體

1.1、當(dāng)前緩存里面的buildId不等于參數(shù)傳過來的buildId，更改緩存里面的buildId，然后執(zhí)行floor.vue里面的getFloorListByBuildId方法

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

1.2、當(dāng)前緩存里面的buildId等于參數(shù)傳過來的buildId，調(diào)接口getDeviceListByCondition
說明已經(jīng)打開過頁面，且圖紙?jiān)O(shè)備數(shù)據(jù)都已經(jīng)渲染過了，所以需要
如果有圖紙，先清空，然后再重新繪制，
如果沒有圖紙，先創(chuàng)建圖紙模板容器

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

        //創(chuàng)建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);

調(diào)方法loadEquipmentPoint，加載樓層設(shè)備點(diǎn)信息

四、表格需要加個(gè)自定義屬性prop="laLoopLaPoint"
電子檔案項(xiàng)目記錄
這種寫法不行：

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

當(dāng)前標(biāo)題：電子檔案項(xiàng)目記錄
路徑分享：http://weahome.cn/article/psjcpo.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部