1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <template>
- <div class='floorFunc-box'>
- <div class='lcgn-title'>
- <span class='span1'>{{floorInfo.code}}</span>
- </div>
- <!-- 图例 -->
- <div class='legend-boxs'>
- <Legend :floors='floorsArr' type='1' :editTips='`编辑${floorInfo.code}层楼层功能平面图`'></Legend>
- </div>
- <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
- <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
- </div>
- </template>
- <script>
- import floorMap from '@/components/floorMap/index.vue'
- import floorList from '@/components/floorList.vue'
- import { mapGetters } from 'vuex'
- export default {
- components: { floorMap, floorList },
- data() {
- return {
- show: true,
- floorInfo: {
- gname: 'f1',
- code: 'F1'
- },
- loadName: '',
- type: ''
- }
- },
- computed: {
- ...mapGetters(['floorsArr'])
- },
- methods: {
- emitFloor(item) {
- this.floorInfo = item
- this.$refs.floorMap.init(this.floorInfo.gname)
- this.init()
- },
- additionalColl() {
- this.show = !this.show
- },
- init() {
- this.loadName = `楼层功能-${this.floorInfo.code}`
- }
- },
- mounted() {
- this.init()
- this.$refs.floorMap.init(this.floorInfo.gname)
- }
- }
- </script>
- <style lang="less">
- .floorFunc-box {
- background: rgba(242, 245, 247, 1);
- height: calc(100vh - 48px);
- flex: 1;
- .lcgn-title {
- position: fixed;
- z-index: 2;
- display: block;
- top: 120px;
- left: 146px;
- width: 140px;
- height: 32px;
- background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
- box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
- color: #025baa;
- font-size: 16px;
- &::before {
- width: 2px;
- height: 16px;
- background: rgba(2, 91, 170, 1);
- display: inline-block;
- content: '';
- margin-right: 10px;
- margin-top: 8px;
- }
- .span1 {
- position: absolute;
- top: 3px;
- }
- }
- .legend-boxs {
- position: fixed;
- z-index: 9;
- right: 32px;
- top: 142px;
- }
- }
- </style>
|