floorList.vue 11 KB

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