Electronic archives project records

First, enter the page from toDetail method of archivesList.vue

<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 value of the name value of the Bindings tab, click on the time value of activeName dynamically change the name value of the tab, where when a tab page, you render the corresponding components

equipmentPoint components
used:
<G2MapDetail </ G2MapDetail> components
which have three components, namely:
Search, Plantu, Floor

Search components:

acquisition BAN drop-down box Information:
getLouDong () method
passing unitId, interface to obtain data by findBuildByUnitId
because unitId is passed through archivesList.vue components, if direct deposit to store inside, then refresh the page will be lost in time , it is necessary to deposit inside localstorage: localStorage.setItem ( "unitId", unitId );
inside Search.vue assembly mounted inside methods:
. $ store.commit the this ( 'updateShUnitId', localStorage.getItem ( "UnitID")) stored inside the store, after the UnitID to use, can be used directly: var unitId = this $ store.state.shUnitId; acquisition.

<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": inside the drop-down box displays the value of
v-model.trim = "formInline.area": displays the value input box inside

Click the Query button: to trigger an event 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 components:
default initial call: getFloorListByBuildId, which has a commit, that $ store.commit ( 'updateZSCurrentFloorObj ', Math.random ());.
In this way, it will trigger Plantu components: the inside of the watch, then calls inside
addPicToMap (picUrl, buildId, floorId) method
is mainly acquired floorArr, floor information
using getFloorListByBuildId method,
when there buildId of [this case] belongs to click the search button, a direct call getFloorInfoByUnitIdAndBuildId interfaces, incoming unitId and buildId, get floor information, floorData = data [key]; filling floorArr
when no buildId when [this case belong, just open the case of the page, click on the search button] is not, first by findBuildByUnitId interfaces, incoming unitId, get buildId, the default is data.data [0 ] .buildId, first-floor, and then call getFloorInfoByUnitIdAndBuildId interface to obtain information on floor

Plantu components:
the initial call addPicToMap (picUrl, buildId, floorId) method
is then called method loadEquipmentPoint
apparatus punctuation:
that.drawPoint (Equip [ 'longitude'], Equip [ 'Latitude'], the iconUrl, Equip);
map and map point equipment, equipment point is marked up, the map is just a picture of it
picUrl is the underlying map