電子檔案項目記錄

一、從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裏面改變地圖的圖片