|
@@ -0,0 +1,311 @@
|
|
|
+<template>
|
|
|
+ <div class='floor-box'>
|
|
|
+ <div class='floor-list'>
|
|
|
+ <div class='icon-top' v-if='floorsArr.length>8'>
|
|
|
+ <i class="iconfont wanda-top" style="color:#9ca2a9;font-size:12px;" v-show='parseInt(marginTop) !== 0'
|
|
|
+ v-repeat-click='increase'></i>
|
|
|
+ <i class="iconfont wanda-top" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
|
|
|
+ v-show='parseInt(marginTop) === 0'></i>
|
|
|
+ <!-- @click='changeFloor(1,currIndex)' -->
|
|
|
+ <!-- <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/images/iconBlackTop.png' alt />
|
|
|
+ <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/images/iconLightTop.png' alt /> -->
|
|
|
+ </div>
|
|
|
+ <div id="floorBox" class='floor-out' :style='{ height:conHeight + "px" }'>
|
|
|
+ <!-- 放开marginTop样式 -->
|
|
|
+ <!-- <div class='floor-center' :style='{ marginTop : marginTop }'> -->
|
|
|
+ <div class='floor-center'>
|
|
|
+ <div class='floor-item' :class='item.gname == currentFloorId?"isActive":""' @click='tabFloor(item,index)'
|
|
|
+ v-for='(item,index) in floorsArr' :key='index'>{{item.code}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='icon-bottom' v-if='floorsArr.length>8'>
|
|
|
+ <i class="iconfont wanda-bottom" style="color:#9ca2a9;font-size:12px;"
|
|
|
+ v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'></i>
|
|
|
+ <i class="iconfont wanda-bottom" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
|
|
|
+ v-show='parseInt(marginTop) === marginTopMax'></i>
|
|
|
+ <!-- v-repeat-click='decrease' -->
|
|
|
+ <!-- <img v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'
|
|
|
+ src='@/assets/images/iconBlackBottom.png' alt />
|
|
|
+ <img class='disabled' v-show='parseInt(marginTop) === marginTopMax' src='@/assets/images/iconLightBottom.png'
|
|
|
+ alt /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import RepeatClick from '@/directives/repeat-click'
|
|
|
+
|
|
|
+export default {
|
|
|
+ directives: {
|
|
|
+ repeatClick: RepeatClick,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentFloorId: null,
|
|
|
+ marginTop: 0,
|
|
|
+ marginTopMax: 0,
|
|
|
+ showNumber: 8, //需要展示的楼层数 //TODO:
|
|
|
+ height: 38, //一个楼层的高度
|
|
|
+ currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
|
|
|
+ conHeight: 0, // floor-out 的高度
|
|
|
+ direction: 1, //1:竖屏;2:横屏
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ floorsArr: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let listener = document.getElementById('floorBox')
|
|
|
+ listener.addEventListener('scroll', () => {
|
|
|
+ console.log(document.getElementById('floorBox').scrollTop)
|
|
|
+ })
|
|
|
+ window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (window.orientation === 0 || window.orientation === 180) {
|
|
|
+ this.direction = 1;
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ if (window.orientation === 90 || window.orientation === -90) {
|
|
|
+ this.direction = 2;
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ }, 300)
|
|
|
+ },false);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * @description 点击上箭头,marginTop<0时执行楼层滚动
|
|
|
+ */
|
|
|
+ increase() {
|
|
|
+ const marginTop = parseInt(this.marginTop)
|
|
|
+ marginTop < 0 && this.changeFloor(1, this.currIndex)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
|
|
|
+ */
|
|
|
+ decrease() {
|
|
|
+ const marginTop = Math.abs(parseInt(this.marginTop)),
|
|
|
+ marginTopMax = Math.abs(parseInt(this.marginTopMax))
|
|
|
+ marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ if (this.direction == 1) {
|
|
|
+ // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
|
|
|
+ this.height = 38
|
|
|
+ this.conHeight = this.floorsArr.length * 38
|
|
|
+ this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
|
|
|
+ this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
|
|
|
+
|
|
|
+ this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
|
|
|
+ // this.changeFloor(0, 0);
|
|
|
+ // this.tabFloor(this.floorsArr[0], 0);
|
|
|
+ } else if (this.direction == 2) {
|
|
|
+ this.height = 34.5
|
|
|
+ this.conHeight = this.floorsArr.length * 30
|
|
|
+ this.conHeight = this.conHeight >= 240 ? 240 : this.conHeight
|
|
|
+ this.showNumber = this.floorsArr.length > 7 ? 7 : this.floorsArr.length
|
|
|
+ this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name changeFloor
|
|
|
+ * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
|
|
|
+ * @description 点击图例下方的,上下切换按钮
|
|
|
+ */
|
|
|
+ changeFloor(flag, index) {
|
|
|
+ const len = this.floorsArr.length
|
|
|
+ this.currIndex = index
|
|
|
+ // 点击上箭头
|
|
|
+ if (flag === 1) {
|
|
|
+ index--
|
|
|
+ this.currIndex = index
|
|
|
+ } else if (flag === -1) {
|
|
|
+ //点击下箭头
|
|
|
+ index++
|
|
|
+ this.currIndex = index
|
|
|
+ }
|
|
|
+ this.handlePosition(flag, index, len)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name tabFloor
|
|
|
+ * @param {Object} item 选中的楼层信息
|
|
|
+ * @param {Number} index 楼层信息在floorsArr数组中的位置
|
|
|
+ */
|
|
|
+ tabFloor(item, index) {
|
|
|
+ this.currentFloorId = item.gname;
|
|
|
+ this.$emit("emitFloor", item)
|
|
|
+ this.handlePosition(2, index, this.floorsArr.length)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 楼层位置动画处理
|
|
|
+ * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
|
|
|
+ * @param index 楼层 floorsArr
|
|
|
+ * @param len floorsArr
|
|
|
+ */
|
|
|
+ handlePosition(flag, index, len) {
|
|
|
+ // 取出当前 marginTop
|
|
|
+ let marginTop = parseInt(this.marginTop)
|
|
|
+ switch (flag) {
|
|
|
+ // 初始化进入页面,位置处理
|
|
|
+ case 0:
|
|
|
+ // 直接点击楼层,滚动楼层
|
|
|
+ case 2:
|
|
|
+ // 将 marginTop 设置为对应的index 应滚动的距离
|
|
|
+ marginTop = -index * this.height
|
|
|
+ // marginTop 过大时,取最大值marginTopMax
|
|
|
+ if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
|
|
|
+ marginTop = parseInt(this.marginTopMax)
|
|
|
+ }
|
|
|
+ // marginTop>0时,取0,防止楼层上边出现空白
|
|
|
+ marginTop = marginTop >= 0 ? 0 : marginTop
|
|
|
+ // index为0,marginTop设置为0
|
|
|
+ index == 0 && (marginTop = 0)
|
|
|
+ // index为最后一个,设置为最大marginTopMax
|
|
|
+ index == len - 1 && (marginTop = parseInt(this.marginTopMax))
|
|
|
+ this.marginTop = marginTop + 'px'
|
|
|
+ let floorBox = document.getElementById("floorBox")
|
|
|
+ if (this.direction == 1) {
|
|
|
+ let offsetLen = index - 6
|
|
|
+ floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
|
|
|
+ } else if (this.direction == 2) {
|
|
|
+ let offsetLen = index - 5
|
|
|
+ floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
|
|
|
+ }
|
|
|
+ break
|
|
|
+ // 1:向上滚动楼层
|
|
|
+ case 1:
|
|
|
+ this.marginTop = marginTop + this.height + 'px'
|
|
|
+ break
|
|
|
+ // -1向下滚动楼层
|
|
|
+ case -1:
|
|
|
+ this.marginTop = marginTop + this.height * -1 + 'px'
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ floorsArr: {
|
|
|
+ handler() {
|
|
|
+ if (window.orientation === 0 || window.orientation === 180) {
|
|
|
+ this.direction = 1;
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ if (window.orientation === 90 || window.orientation === -90) {
|
|
|
+ this.direction = 2;
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.floor-box {
|
|
|
+ .floor-list {
|
|
|
+ width: 40px;
|
|
|
+ // height: 212px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
|
+ border-radius: 2px;
|
|
|
+ position: relative;
|
|
|
+ padding: 6px 4px;
|
|
|
+ text-align: center;
|
|
|
+ .floor-out {
|
|
|
+ // max-height: 300px; //TODO:
|
|
|
+ min-height: 38px;
|
|
|
+ overflow-x: hidden;
|
|
|
+ position: relative;
|
|
|
+ overflow-y: scroll;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor-center {
|
|
|
+ transition: all linear 0.5s;
|
|
|
+ .floor-item {
|
|
|
+ line-height: 28px;
|
|
|
+ height: 28px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -20%;
|
|
|
+ bottom: -6px;
|
|
|
+ content: "";
|
|
|
+ width: 14px;
|
|
|
+ height: 1px;
|
|
|
+ background: rgba(195, 199, 203, 1);
|
|
|
+ border: 0px solid rgba(228, 229, 231, 1);
|
|
|
+ }
|
|
|
+ & + .floor-item {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-top {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ .icon-bottom {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ .isActive {
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #025baa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .disabled {
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 横屏
|
|
|
+@media screen and (orientation: landscape) {
|
|
|
+ .floor-box {
|
|
|
+ .floor-list {
|
|
|
+ width: 30px;
|
|
|
+ .floor-out {
|
|
|
+ .floor-center {
|
|
|
+ .floor-item {
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -20%;
|
|
|
+ bottom: -2px;
|
|
|
+ content: "";
|
|
|
+ width: 10px;
|
|
|
+ height: 1px;
|
|
|
+ background: rgba(195, 199, 203, 1);
|
|
|
+ border: 0px solid rgba(228, 229, 231, 1);
|
|
|
+ }
|
|
|
+ & + .floor-item {
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-top {
|
|
|
+ height: 10px;
|
|
|
+ }
|
|
|
+ .icon-bottom {
|
|
|
+ height: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|