123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.06.02
- *@info:楼层列表
- */
- <template>
- <div class='floor-box'>
- <div class='floor-list'>
- <div v-if='floorsArr.length>8'>
- <i
- class='el-icon-caret-top icon-top'
- :class='{disabled:currentFloorId == floorsArr[0].seq }'
- v-if='showT'
- @click='changeFloor(1)'
- @mousedown='mousedown'
- @mouseup='mouseup'
- ></i>
- <i class='el-icon-caret-top icon-top' :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else style='color:#ccc'></i>
- </div>
- <div class='floor-out'>
- <!-- :style='{ marginTop : marginTop }' -->
- <div class='floor-center'>
- <div
- class='floor-item'
- :class='item.seq == currentFloorId?"isActive":""'
- @click='tabFloor(item,index)'
- v-for='(item,index) in floorsArr'
- :key='index'
- >{{item.code}}</div>
- </div>
- </div>
- <div v-if='floorsArr.length>8'>
- <i
- class='el-icon-caret-bottom icon-bottom'
- :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
- v-if='showB'
- @click='changeFloor(-1)'
- ></i>
- <i
- class='el-icon-caret-bottom icon-bottom'
- :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
- v-else
- style='color:#ccc'
- ></i>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- floorId: 'F1',
- showT: true,
- showB: true,
- num: 0,
- floorMapIdName: '',
- floor: {
- code: 'F1',
- gcode: '1F',
- gname: 'f1',
- name: '第1层',
- seq: 100
- },
- currentFloorId: null,
- marginTop: 0,
- startTime: '',
- endTime: ''
- }
- },
- props: {
- floorsArr: {
- type: Array
- /* default: () => {
- return [
- { name: '第6层', code: 'F6', gname: 'f6', gcode: '6F', seq: 600 },
- { name: '第5层', code: 'F5', gname: 'f5', gcode: '5F', seq: 500 },
- { name: '第4层', code: 'F4', gname: 'f4', gcode: '4F', seq: 400 },
- { name: '第3层', code: 'F3', gname: 'f3', gcode: '3F', seq: 300 },
- { name: '第2层', code: 'F2', gname: 'f2', gcode: '2F', seq: 200 },
- { name: '第1层', code: 'F1', gname: 'f1', gcode: '1F', seq: 100 },
- { name: '地下1层', code: 'B1', gname: 'b1', gcode: 'B1', seq: -100 },
- { name: '地下2层', code: 'B2', gname: 'b2', gcode: 'B2', seq: -200 },
- { name: '地下3层', code: 'B3', gname: 'b3', gcode: 'B3', seq: -300 },
- { name: '地下4层', code: 'B4', gname: 'b4', gcode: 'B4', seq: -400 }
- ]
- } */
- }
- },
- mounted() {
- this.init()
- },
- watch: {
- // 监听floorsArr的变化
- // '$store.state.floorsArr': {
- // handler(newV, oldV) {
- // newV && this.init()
- // },
- // deep: true
- // }
- },
- methods: {
- mousedown() {
- this.startTime = new Date()
- console.log()
- },
- mouseup() {
- this.endTime = new Date()
- if (this.endTime - this.startTime < 200) {
- return false
- }
- },
- init() {
- if (!this.floorsArr.length) {
- return false
- }
- this.floorIdArr = []
- this.floorsArr.map(item => {
- this.floorIdArr.push(item.seq)
- })
- this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
- this.changeFloor(0)
- },
- /**
- * @name changeFloor
- * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
- * @description 点击图例下方的,上下切换按钮
- */
- changeFloor(flag) {
- const len = this.floorIdArr.length
- let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
- // 点击上箭头
- if (flag === 1) {
- index--
- this.currentFloorId = this.floorIdArr[index]
- } else if (flag === -1) {
- //点击下箭头
- index++
- this.currentFloorId = this.floorIdArr[index]
- }
- // 数据处理
- this.handleCookie()
- // 楼层位置动画处理
- this.handlePosition(flag, index, len)
- // 处理上下按钮禁用逻辑
- this.handleUpDownStatus(index, len)
- },
- /**
- * @name handleUpDownStatus
- * @param { Number } index 当前楼层在floorIdArr中的下标
- * @param { Number } len floorIdArr的长度
- * @description 处理上下按钮禁用逻辑
- */
- handleUpDownStatus(index, len) {
- switch (index) {
- // 第一条的上箭头禁用
- case 0:
- this.currentFloorId = this.floorIdArr[0]
- this.showT = false
- this.showB = true
- break
- // 最后一条的 下箭头设置为禁用
- case len - 1:
- this.currentFloorId = this.floorIdArr[len - 1]
- this.showT = true
- this.showB = false
- break
- // 默认都可以点击
- default:
- this.showT = true
- this.showB = true
- break
- }
- },
- /**
- * @name handleCookie
- * @description cookie数据处理
- */
- handleCookie() {
- // return true
- let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
- this.$cookie.set('floorNow', currentFloor.code, 3)
- this.$cookie.set('floorMapId', currentFloor.gname, 3)
- this.$cookie.set('currentFloorId', currentFloor.seq, 3)
- this.floorId = this.$cookie.get('floorNow') || currentFloor.code
- this.floorMapIdName = this.$cookie.get('floorMapId') || currentFloor.gname
- this.$emit('emitFloor', currentFloor)
- },
- /**
- * @name tabFloor
- * @param {Object} 选中的楼层信息
- * @param {Number} 楼层信息在floorsArr数组中的位置
- */
- tabFloor(item, index) {
- this.currentFloorId = this.floorIdArr[index]
- this.handleCookie()
- this.handlePosition(1, index, this.floorIdArr.length)
- this.handleUpDownStatus(index, this.floorIdArr.length)
- },
- /**
- * @description 楼层位置动画处理
- * @param flag 是否启用动画时长 0:不启用 其他 启动
- * @param index 楼层 在floorIdArr中的下标
- * @param len floorIdArr长度
- */
- handlePosition(flag, index, len) {
- //楼层位置处理
- // 页面显示5条,当第五条以上,进行marginTop修改
- // index从0开始
- // TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
- let showNumber = 5, //页面中展示的楼层条数
- height = 32, //一个楼层的div标签高度
- timer = 500 //动画时长
- // flag 为0时,timer设置为0
- flag === 0 && (timer = 0)
- if (index >= showNumber - 1) {
- if (index < len - 1) {
- this.marginTop = -height * (index - (showNumber - 2)) + 'px'
- } else if ((index = len - 1)) {
- this.marginTop = -height * (index - (showNumber - 1)) + 'px'
- }
- } else {
- // 前 showNumber 条的margin-top设置为0
- this.marginTop = 0
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .floor-box {
- position: fixed;
- right: 32px;
- top: 196px;
- z-index: 2;
- .floor-list {
- width: 44px;
- // 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: 28px 4px;
- text-align: center;
- .floor-out {
- height: 260px;
- overflow: hidden;
- // overflow-y: auto;
- position: relative;
- // &::-webkit-scrollbar {
- // display: none;
- // }
- .floor-center {
- transition: all linear 0.8s;
- .floor-item {
- width: 36px;
- height: 32px;
- cursor: pointer;
- }
- }
- }
- .icon-top {
- text-align: center;
- font-size: 18px;
- margin: 0 auto;
- display: flex;
- justify-content: center;
- position: absolute;
- top: 0;
- right: 0;
- width: 100%;
- cursor: pointer;
- line-height: 26px;
- }
- .icon-bottom {
- text-align: center;
- font-size: 18px;
- margin: 0 auto;
- display: flex;
- justify-content: center;
- position: absolute;
- bottom: 0;
- right: 0;
- width: 100%;
- cursor: pointer;
- line-height: 26px;
- }
- .isActive {
- border-radius: 4px;
- color: #025baa;
- background: #e1f2ff;
- line-height: 32px;
- }
- }
- .disabled {
- cursor: not-allowed !important;
- }
- }
- </style>
|