123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <template>
- <div class='fenbu-box'>
- <!-- 图例 -->
- <div class='legend-boxs'>
- <Legend :floors='floors' type='0' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`'></Legend>
- </div>
- <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
- <div v-show='floors.length>0' class='canvas-box'>
- <floorMap ref='floorMap' :modalHeight='modalHeight' :loadName='""' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`' :type='"floor"'></floorMap>
- </div>
- <div class='nodata' v-show='floors.length==0'>
- <img class='img1' src='@/assets/imgs/wtp.png' alt />
- <div class='no-img'>暂无分布图,请手动绘制</div>
- </div>
- </div>
- </template>
- <script>
- import floorMap from '@/components/floorMap/index.vue'
- import floorList from '@/components/floorList.vue'
- import { mapGetters } from 'vuex'
- import { queryPics } from '@/api/legendLibrary.js'
- export default {
- components: { floorMap, floorList },
- data() {
- return {
- show: false,
- floorInfo: {
- gname: 'f1',
- code: 'F1'
- },
- loadName: '',
- type: '',
- floors: [],
- modalHeight: 500, //适配底图
- }
- },
- props: ['typecode'],
- computed: {
- ...mapGetters(['floorsArr'])
- },
- mounted() {
- if (window.screen.width > 1366) {
- this.modalHeight = 700
- } else {
- this.modalHeight = 500
- }
- },
- methods: {
- emitFloor(item) {
- this.floorInfo = item
- this.$refs.floorMap.init(this.floorInfo.gname)
- },
- additionalColl() {
- this.show = !this.show
- },
- getFloorData() {
- let postParams = {
- Distinct: true,
- PageNumber: 1,
- PageSize: 500,
- Projection: ['floorId']
- }
- if (this.typecode == 'FBT1') {
- postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='FZQZL';isPub=true`
- }
- if (this.typecode == 'FBT2') {
- postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='XFBFYCFL';isPub=true`
- }
- let floor = []
- this.floors = []
- queryPics({ postParams }).then(res => {
- if (res.Total == 0) {
- this.floors = []
- } else {
- floor = res.Content
- this.floorsArr.forEach(el => {
- floor.forEach(ele => {
- if (ele.FloorId == el.gname) {
- this.floors.push({
- gname: el.gname,
- gcode: el.gcode,
- name: el.name,
- code: el.code,
- seq: el.seq
- })
- }
- })
- })
- }
- this.floorInfo = this.floors[0]
- this.init()
- })
- },
- init() {
- this.loadName = `${this.floorInfo.code}`
- },
- openFloorMap() {
- this.getFloorData()
- this.$refs.floorMap.init(this.floorInfo.gname)
- }
- }
- }
- </script>
- <style lang="less">
- .fenbu-box {
- display: flex;
- height: 100%;
- justify-content: center;
- align-items: center;
- .legend-boxs {
- position: fixed;
- z-index: 9;
- right: 32px;
- top: 155px;
- }
- .canvas-box {
- width: 100%;
- height: 100%;
- }
- .nodata {
- height: calc(100%-50px);
- .img1 {
- width: 126px;
- height: 121px;
- }
- .no-img {
- font-size: 16px;
- font-family: MicrosoftYaHei;
- color: rgba(100, 108, 115, 1);
- margin-top: 8px;
- }
- }
- }
- </style>
|