floorList.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.06.02
  4. *@info:楼层列表
  5. */
  6. <template>
  7. <div class='floor-box'>
  8. <div class='floor-list'>
  9. <div v-if='floorsArr.length>8'>
  10. <i
  11. class='el-icon-caret-top icon-top'
  12. :class='{disabled:currentFloorId == floorsArr[0].seq }'
  13. v-if='showT'
  14. @click='changeFloor(1)'
  15. @mousedown='mousedown'
  16. @mouseup='mouseup'
  17. ></i>
  18. <i class='el-icon-caret-top icon-top' :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else style='color:#ccc'></i>
  19. </div>
  20. <div class='floor-out'>
  21. <!-- :style='{ marginTop : marginTop }' -->
  22. <div class='floor-center'>
  23. <div
  24. class='floor-item'
  25. :class='item.seq == currentFloorId?"isActive":""'
  26. @click='tabFloor(item,index)'
  27. v-for='(item,index) in floorsArr'
  28. :key='index'
  29. >{{item.code}}</div>
  30. </div>
  31. </div>
  32. <div v-if='floorsArr.length>8'>
  33. <i
  34. class='el-icon-caret-bottom icon-bottom'
  35. :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
  36. v-if='showB'
  37. @click='changeFloor(-1)'
  38. ></i>
  39. <i
  40. class='el-icon-caret-bottom icon-bottom'
  41. :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
  42. v-else
  43. style='color:#ccc'
  44. ></i>
  45. </div>
  46. </div>
  47. </div>
  48. </template>
  49. <script>
  50. export default {
  51. data() {
  52. return {
  53. floorId: 'F1',
  54. showT: true,
  55. showB: true,
  56. num: 0,
  57. floorMapIdName: '',
  58. floor: {
  59. code: 'F1',
  60. gcode: '1F',
  61. gname: 'f1',
  62. name: '第1层',
  63. seq: 100
  64. },
  65. currentFloorId: null,
  66. marginTop: 0,
  67. startTime: '',
  68. endTime: ''
  69. }
  70. },
  71. props: {
  72. floorsArr: {
  73. type: Array
  74. /* default: () => {
  75. return [
  76. { name: '第6层', code: 'F6', gname: 'f6', gcode: '6F', seq: 600 },
  77. { name: '第5层', code: 'F5', gname: 'f5', gcode: '5F', seq: 500 },
  78. { name: '第4层', code: 'F4', gname: 'f4', gcode: '4F', seq: 400 },
  79. { name: '第3层', code: 'F3', gname: 'f3', gcode: '3F', seq: 300 },
  80. { name: '第2层', code: 'F2', gname: 'f2', gcode: '2F', seq: 200 },
  81. { name: '第1层', code: 'F1', gname: 'f1', gcode: '1F', seq: 100 },
  82. { name: '地下1层', code: 'B1', gname: 'b1', gcode: 'B1', seq: -100 },
  83. { name: '地下2层', code: 'B2', gname: 'b2', gcode: 'B2', seq: -200 },
  84. { name: '地下3层', code: 'B3', gname: 'b3', gcode: 'B3', seq: -300 },
  85. { name: '地下4层', code: 'B4', gname: 'b4', gcode: 'B4', seq: -400 }
  86. ]
  87. } */
  88. }
  89. },
  90. mounted() {
  91. this.init()
  92. },
  93. watch: {
  94. // 监听floorsArr的变化
  95. // '$store.state.floorsArr': {
  96. // handler(newV, oldV) {
  97. // newV && this.init()
  98. // },
  99. // deep: true
  100. // }
  101. },
  102. methods: {
  103. mousedown() {
  104. this.startTime = new Date()
  105. console.log()
  106. },
  107. mouseup() {
  108. this.endTime = new Date()
  109. if (this.endTime - this.startTime < 200) {
  110. return false
  111. }
  112. },
  113. init() {
  114. if (!this.floorsArr.length) {
  115. return false
  116. }
  117. this.floorIdArr = []
  118. this.floorsArr.map(item => {
  119. this.floorIdArr.push(item.seq)
  120. })
  121. this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
  122. this.changeFloor(0)
  123. },
  124. /**
  125. * @name changeFloor
  126. * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
  127. * @description 点击图例下方的,上下切换按钮
  128. */
  129. changeFloor(flag) {
  130. const len = this.floorIdArr.length
  131. let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
  132. // 点击上箭头
  133. if (flag === 1) {
  134. index--
  135. this.currentFloorId = this.floorIdArr[index]
  136. } else if (flag === -1) {
  137. //点击下箭头
  138. index++
  139. this.currentFloorId = this.floorIdArr[index]
  140. }
  141. // 数据处理
  142. this.handleCookie()
  143. // 楼层位置动画处理
  144. this.handlePosition(flag, index, len)
  145. // 处理上下按钮禁用逻辑
  146. this.handleUpDownStatus(index, len)
  147. },
  148. /**
  149. * @name handleUpDownStatus
  150. * @param { Number } index 当前楼层在floorIdArr中的下标
  151. * @param { Number } len floorIdArr的长度
  152. * @description 处理上下按钮禁用逻辑
  153. */
  154. handleUpDownStatus(index, len) {
  155. switch (index) {
  156. // 第一条的上箭头禁用
  157. case 0:
  158. this.currentFloorId = this.floorIdArr[0]
  159. this.showT = false
  160. this.showB = true
  161. break
  162. // 最后一条的 下箭头设置为禁用
  163. case len - 1:
  164. this.currentFloorId = this.floorIdArr[len - 1]
  165. this.showT = true
  166. this.showB = false
  167. break
  168. // 默认都可以点击
  169. default:
  170. this.showT = true
  171. this.showB = true
  172. break
  173. }
  174. },
  175. /**
  176. * @name handleCookie
  177. * @description cookie数据处理
  178. */
  179. handleCookie() {
  180. // return true
  181. let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
  182. this.$cookie.set('floorNow', currentFloor.code, 3)
  183. this.$cookie.set('floorMapId', currentFloor.gname, 3)
  184. this.$cookie.set('currentFloorId', currentFloor.seq, 3)
  185. this.floorId = this.$cookie.get('floorNow') || currentFloor.code
  186. this.floorMapIdName = this.$cookie.get('floorMapId') || currentFloor.gname
  187. this.$emit('emitFloor', currentFloor)
  188. },
  189. /**
  190. * @name tabFloor
  191. * @param {Object} 选中的楼层信息
  192. * @param {Number} 楼层信息在floorsArr数组中的位置
  193. */
  194. tabFloor(item, index) {
  195. this.currentFloorId = this.floorIdArr[index]
  196. this.handleCookie()
  197. this.handlePosition(1, index, this.floorIdArr.length)
  198. this.handleUpDownStatus(index, this.floorIdArr.length)
  199. },
  200. /**
  201. * @description 楼层位置动画处理
  202. * @param flag 是否启用动画时长 0:不启用 其他 启动
  203. * @param index 楼层 在floorIdArr中的下标
  204. * @param len floorIdArr长度
  205. */
  206. handlePosition(flag, index, len) {
  207. //楼层位置处理
  208. // 页面显示5条,当第五条以上,进行marginTop修改
  209. // index从0开始
  210. // TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
  211. let showNumber = 5, //页面中展示的楼层条数
  212. height = 32, //一个楼层的div标签高度
  213. timer = 500 //动画时长
  214. // flag 为0时,timer设置为0
  215. flag === 0 && (timer = 0)
  216. if (index >= showNumber - 1) {
  217. if (index < len - 1) {
  218. this.marginTop = -height * (index - (showNumber - 2)) + 'px'
  219. } else if ((index = len - 1)) {
  220. this.marginTop = -height * (index - (showNumber - 1)) + 'px'
  221. }
  222. } else {
  223. // 前 showNumber 条的margin-top设置为0
  224. this.marginTop = 0
  225. }
  226. }
  227. }
  228. }
  229. </script>
  230. <style lang="less" scoped>
  231. .floor-box {
  232. position: fixed;
  233. right: 32px;
  234. top: 196px;
  235. z-index: 2;
  236. .floor-list {
  237. width: 44px;
  238. // height: 212px;
  239. background: rgba(255, 255, 255, 1);
  240. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  241. border-radius: 2px;
  242. position: relative;
  243. padding: 28px 4px;
  244. text-align: center;
  245. .floor-out {
  246. height: 260px;
  247. overflow: hidden;
  248. // overflow-y: auto;
  249. position: relative;
  250. // &::-webkit-scrollbar {
  251. // display: none;
  252. // }
  253. .floor-center {
  254. transition: all linear 0.8s;
  255. .floor-item {
  256. width: 36px;
  257. height: 32px;
  258. cursor: pointer;
  259. }
  260. }
  261. }
  262. .icon-top {
  263. text-align: center;
  264. font-size: 18px;
  265. margin: 0 auto;
  266. display: flex;
  267. justify-content: center;
  268. position: absolute;
  269. top: 0;
  270. right: 0;
  271. width: 100%;
  272. cursor: pointer;
  273. line-height: 26px;
  274. }
  275. .icon-bottom {
  276. text-align: center;
  277. font-size: 18px;
  278. margin: 0 auto;
  279. display: flex;
  280. justify-content: center;
  281. position: absolute;
  282. bottom: 0;
  283. right: 0;
  284. width: 100%;
  285. cursor: pointer;
  286. line-height: 26px;
  287. }
  288. .isActive {
  289. border-radius: 4px;
  290. color: #025baa;
  291. background: #e1f2ff;
  292. line-height: 32px;
  293. }
  294. }
  295. .disabled {
  296. cursor: not-allowed !important;
  297. }
  298. }
  299. </style>