floorList.vue 9.3 KB

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