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>8'>
  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' :style='{ height:conHeight + "px" }'>
  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>8'>
  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. conHeight: 0 // floor-out 的高度
  65. }
  66. },
  67. props: {
  68. floorsArr: {
  69. type: Array,
  70. default: () => {
  71. return []
  72. }
  73. },
  74. // 默认true,
  75. // 1. 切换楼层后,是否触发 cookie,vuex数据修改,
  76. // 2. 在fenbuPic组件中为false, 1)不触发cookie,vuex , 2) 选中的楼层ID,为楼层列表数组floorIdArr的第0个
  77. changeDataFlag: {
  78. type: Boolean,
  79. default: true
  80. }
  81. },
  82. computed: {
  83. ...mapGetters(['legendTable'])
  84. },
  85. mounted() {
  86. window.vm = this
  87. this.init()
  88. },
  89. methods: {
  90. /**
  91. * @description 点击上箭头,marginTop<0时执行楼层滚动
  92. */
  93. increase() {
  94. let marginTop = parseInt(this.marginTop)
  95. marginTop < 0 && this.changeFloor(1, this.currIndex)
  96. },
  97. /**
  98. * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
  99. */
  100. decrease() {
  101. let marginTop = Math.abs(parseInt(this.marginTop)),
  102. marginTopMax = Math.abs(parseInt(this.marginTopMax))
  103. marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
  104. },
  105. init() {
  106. if (!this.floorsArr.length) {
  107. return false
  108. }
  109. this.floorIdArr = []
  110. this.floorsArr.map(item => {
  111. this.floorIdArr.push(item.seq)
  112. })
  113. this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
  114. // bug fix 修复 fenbuPic 弹窗中,楼层不能选中的问题
  115. // 如果 floorIdArr 不在 floorIdArr数组中,或者changeDataFlag为false(弹窗组件中的楼层组件),使用 floorIdArr[0], 而不使用 cookie
  116. let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
  117. if (index === -1 || !this.changeDataFlag) {
  118. this.currentFloorId = this.floorIdArr[0]
  119. }
  120. // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
  121. this.conHeight = this.floorsArr.length * 37.5
  122. this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
  123. this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
  124. this.marginTopMax = -(this.floorIdArr.length - this.showNumber) * this.height
  125. this.changeFloor(0, index)
  126. },
  127. /**
  128. * @name changeFloor
  129. * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
  130. * @description 点击图例下方的,上下切换按钮
  131. */
  132. changeFloor(flag, index) {
  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. let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
  153. if (currentFloor) {
  154. // 如果 changeDataFlag为true(不是在 分布图弹窗组件中的 楼层组件),设置cookie,vuex
  155. if (this.changeDataFlag) {
  156. this.$cookie.set('floorNow', currentFloor.code || '', 3)
  157. this.$cookie.set('floorMapId', currentFloor.gname, 3)
  158. this.$cookie.set('currentFloorId', currentFloor.seq, 3)
  159. this.floorId = this.$cookie.get('floorNow') || currentFloor.code
  160. this.floorMapIdName = this.$cookie.get('floorMapId') || currentFloor.gname
  161. store.commit('SETCURRENTFLOOR', currentFloor)
  162. }
  163. this.$emit('emitFloor', currentFloor)
  164. }
  165. },
  166. /**
  167. * @name tabFloor
  168. * @param {Object} item 选中的楼层信息
  169. * @param {Number} index 楼层信息在floorsArr数组中的位置
  170. */
  171. tabFloor(item, index) {
  172. this.currentFloorId = this.floorIdArr[index]
  173. this.handleCookie()
  174. this.handlePosition(2, index, this.floorIdArr.length)
  175. this.viewLengend()
  176. },
  177. viewLengend() {
  178. if (this.legendTable.length > 0) {
  179. this.$store.commit('SETSHOWVIEW', 1)
  180. } else {
  181. this.$store.commit('SETSHOWVIEW', 0)
  182. }
  183. },
  184. /**
  185. * @description 楼层位置动画处理
  186. * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
  187. * @param index 楼层 在floorIdArr中的下标
  188. * @param len floorIdArr长度
  189. */
  190. handlePosition(flag, index, len) {
  191. // 取出当前 marginTop
  192. let marginTop = parseInt(this.marginTop)
  193. switch (flag) {
  194. // 初始化进入页面,位置处理
  195. case 0:
  196. // 直接点击楼层,滚动楼层
  197. case 2:
  198. // 将 marginTop 设置为对应的index 应滚动的距离
  199. marginTop = -index * this.height
  200. // marginTop 过大时,取最大值marginTopMax
  201. if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
  202. marginTop = parseInt(this.marginTopMax)
  203. }
  204. // marginTop>0时,取0,防止楼层上边出现空白
  205. marginTop = marginTop >= 0 ? 0 : marginTop
  206. // index为0,marginTop设置为0
  207. index == 0 && (marginTop = 0)
  208. // index为最后一个,设置为最大marginTopMax
  209. index == len - 1 && (marginTop = parseInt(this.marginTopMax))
  210. this.marginTop = marginTop + 'px'
  211. break
  212. // 1:向上滚动楼层
  213. case 1:
  214. this.marginTop = marginTop + this.height + 'px'
  215. break
  216. // -1向下滚动楼层
  217. case -1:
  218. this.marginTop = marginTop + this.height * -1 + 'px'
  219. break
  220. default:
  221. break
  222. }
  223. }
  224. }
  225. }
  226. </script>
  227. <style lang="less" scoped>
  228. .floor-box {
  229. .floor-list {
  230. width: 44px;
  231. // height: 212px;
  232. background: rgba(255, 255, 255, 1);
  233. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  234. border-radius: 2px;
  235. position: relative;
  236. padding: 6px 4px;
  237. text-align: center;
  238. .floor-out {
  239. // max-height: 300px; //TODO:
  240. min-height: 38px;
  241. overflow: hidden;
  242. position: relative;
  243. overflow-y: auto;
  244. &::-webkit-scrollbar {
  245. display: none;
  246. }
  247. .floor-center {
  248. transition: all linear 0.5s;
  249. .floor-item {
  250. line-height: 28px;
  251. height: 28px;
  252. cursor: pointer;
  253. position: relative;
  254. &::after {
  255. position: absolute;
  256. left: 50%;
  257. margin-left: -20%;
  258. bottom: -6px;
  259. content: '';
  260. width: 14px;
  261. height: 1px;
  262. background: rgba(195, 199, 203, 1);
  263. border: 0px solid rgba(228, 229, 231, 1);
  264. }
  265. & + .floor-item {
  266. margin-top: 10px;
  267. }
  268. }
  269. }
  270. }
  271. .icon-top {
  272. cursor: pointer;
  273. height: 18px;
  274. img {
  275. width: 18px;
  276. height: 100%;
  277. margin-top: -10px;
  278. }
  279. }
  280. .icon-bottom {
  281. cursor: pointer;
  282. height: 18px;
  283. img {
  284. width: 18px;
  285. height: 100%;
  286. margin-top: -10px;
  287. }
  288. }
  289. .isActive {
  290. border-radius: 4px;
  291. color: #025baa;
  292. background: #e1f2ff;
  293. }
  294. }
  295. .disabled {
  296. cursor: not-allowed !important;
  297. }
  298. }
  299. </style>