|
@@ -0,0 +1,127 @@
|
|
|
+<template>
|
|
|
+ <div class='fenbu-box'>
|
|
|
+ <!-- 图例 -->
|
|
|
+ <div class='legend-boxs'>
|
|
|
+ <Legend></Legend>
|
|
|
+ </div>
|
|
|
+ <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
|
|
|
+ <!-- <div class='additional-box'>
|
|
|
+ <div class='additional' @click='additionalColl'>
|
|
|
+ <img src='../../assets/imgs/bg.png' alt />
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>-->
|
|
|
+ <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: false,
|
|
|
+ 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">
|
|
|
+.fenbu-box {
|
|
|
+ background: rgba(242, 245, 247, 1);
|
|
|
+ height: calc(100vh - 48px);
|
|
|
+ flex: 1;
|
|
|
+ .eq-title {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 2;
|
|
|
+ top: 92px;
|
|
|
+ left: 242px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .legend-boxs {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 9;
|
|
|
+ right: 32px;
|
|
|
+ top: 155px;
|
|
|
+ }
|
|
|
+ .additional-box {
|
|
|
+ position: relative;
|
|
|
+ .additional {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
|
+ border-radius: 2px;
|
|
|
+ position: fixed;
|
|
|
+ right: 32px;
|
|
|
+ top: 420px;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-img {
|
|
|
+ width: 560px;
|
|
|
+ height: 325px;
|
|
|
+ background: #ffffff;
|
|
|
+ -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #e4e5e7;
|
|
|
+ position: absolute;
|
|
|
+ right: 77px;
|
|
|
+ top: 93px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|