floorList.vue 10 KB

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