123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <template>
- <div class='floorFunc-box'>
- <div class='eq-title'>
- <span>{{floorInfo.code}}</span>
- </div>
- <!-- 图例 -->
- <div class='legend-boxs'>
- <Legend></Legend>
- </div>
- <floor-list @emitFloor='emitFloor'></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'></floorMap>
- </div>
- </template>
- <script>
- import floorMap from '@/components/floorMap/index.vue'
- import floorList from '@/components/floorList.vue'
- export default {
- components: { floorMap, floorList },
- data() {
- return {
- show: false,
- floorInfo: {
- gname: 'f1',
- code: 'F1'
- }
- }
- },
- methods: {
- emitFloor(item) {
- this.floorInfo = item
- // this.$refs.floorMap.init(this.floorInfo.gname)
- },
- additionalColl() {
- this.show = !this.show
- }
- },
- mounted() {
- // 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;
- .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>
|