index.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <div class='equipment-facilities'>
  3. <!-- 左侧菜单 -->
  4. <SystemMenu class='left' @chooseSystem='changeSystem' />
  5. <div class='right'>
  6. <div class='top'>
  7. <!-- <van-cell :title='`消防电系统原理示意图`' :border='false' is-link :value='`19条`' @click='handleClick' />
  8. <van-cell :title='`消防喷淋系统示意图`' :border='false' is-link value='无' @click='handleClick' />
  9. <van-cell :title='`消防窗喷系统示意图`' :border='false' is-link value='无' @click='handleClick' />
  10. <van-cell :title='`配电室低压柜及出线明细`' :border='false' is-link value='无' @click='handleClick' />
  11. <van-cell :title='`消防泵房引出管路分布图`' :border='false' is-link value='无' @click='handleClick' />
  12. <van-cell :title='`楼层分布+其他数据`' :border='false' is-link value='无' @click='handleClick' />-->
  13. <van-cell
  14. v-for='(item,index ) in listData[smsxt]'
  15. :key='index'
  16. :title='item.text'
  17. :border='false'
  18. is-link
  19. value='无'
  20. @click='handleClick(item)'
  21. />
  22. </div>
  23. <!-- 分割线 -->
  24. <div class='divider'></div>
  25. <!-- 设备卡片 -->
  26. <div class='card-container'>
  27. <m-card class='card' :type='item' name='消防主机' :total='50' :numer='3' v-for='item in 5' :key='item' @click.native='goToEquipment(item)' />
  28. </div>
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. import Vue from 'vue'
  34. import { Cell } from 'vant'
  35. Vue.use(Cell)
  36. import SystemMenu from '@/components/systemMenu'
  37. import MCard from '@/components/equipmentFacilities/Card'
  38. export default {
  39. name: 'EquipmentFacilities',
  40. props: {},
  41. components: { SystemMenu, MCard },
  42. data() {
  43. return {
  44. smsxt: '1001', //系统值,默认供电系统
  45. listData: {
  46. //上部列表数据
  47. 1001: [
  48. //供电
  49. { text: '供电系统原理图', dataType: 'img', id: '' },
  50. { text: '机房平面布置图', dataType: 'room', id: '' },
  51. { text: '配电室低压柜及出现明细', id: '' },
  52. { text: '楼层分布', dataType: 'floor', id: '' },
  53. { text: '电井控制商铺范围', id: '' },
  54. ],
  55. 1002: [
  56. //暖通
  57. { text: '空调系统原理图', type: 'img', id: '' },
  58. { text: '分水器之路分布图', id: '' },
  59. { text: '机房平面布置图', id: '' },
  60. { text: '楼层分布', id: '' },
  61. ],
  62. 1003: [
  63. //消防
  64. { text: '消防电系统原理示意图', id: '' },
  65. { text: '消防喷淋系统示意图', id: '' },
  66. { text: '消防窗喷系统示意图', id: '' },
  67. { text: '消火栓系统示意图', id: '' },
  68. { text: '消防泵房引出管理分布图', id: '' },
  69. { text: '机房平面布置图', id: '' },
  70. { text: '楼层分布+附加数据', id: '' },
  71. ],
  72. 1004: [
  73. //弱电
  74. { text: '门禁管理系统原理图', id: '' },
  75. { text: 'BA楼宇智能化系统原理图', id: '' },
  76. { text: '机房平面布置图', id: '' },
  77. { text: '楼层分布', id: '' },
  78. ],
  79. 1005: [
  80. //给排水
  81. { text: '给水系统原理示意图', id: '' },
  82. { text: '排水系统原理示意图', id: '' },
  83. { text: '机房平面布置图', id: '' },
  84. { text: '楼层分布', id: '' },
  85. ],
  86. 1006: [
  87. //电梯
  88. { text: '扶梯原理图', id: '' },
  89. { text: '直梯原理图', id: '' },
  90. { text: '楼层分布', id: '' },
  91. ],
  92. 1007: [
  93. // 燃气
  94. { text: '燃气系统原理示意图', id: '' },
  95. { text: '楼层分布', id: '' },
  96. ],
  97. 1008: [
  98. // 土建
  99. { text: '建筑立面图', id: '' },
  100. { text: '石材铺装', id: '' },
  101. ],
  102. },
  103. }
  104. },
  105. beforeMount() {},
  106. mounted() {},
  107. methods: {
  108. /**
  109. * 左侧菜单切换事件
  110. * @param { String } text 系统名称
  111. * @param { String } category 系统拼音简称 NTXT ...
  112. * @param { String } smsxt 系统id? 1001 - 1008
  113. */
  114. changeSystem({ text, categoryId, smsxt }) {
  115. console.log(text, categoryId, smsxt)
  116. this.smsxt = smsxt
  117. },
  118. handleClick(item) {
  119. console.log(item)
  120. },
  121. goToEquipment(data) {
  122. console.log(data)
  123. },
  124. },
  125. }
  126. </script>
  127. <style lang='less' scoped>
  128. .equipment-facilities {
  129. width: 100%;
  130. height: calc(100% - 100px);
  131. padding: 0;
  132. display: flex;
  133. .left {
  134. width: 80px;
  135. height: 100%;
  136. }
  137. .right {
  138. flex: 1;
  139. height: 100%;
  140. padding: 16px 16px 16px 12px;
  141. overflow: auto;
  142. .top {
  143. width: 100%;
  144. /deep/ .van-cell {
  145. font-size: 14px;
  146. font-weight: 400;
  147. color: #333333;
  148. background: #f8f9fa;
  149. border-radius: 4px;
  150. margin-bottom: 4px;
  151. .van-cell__value {
  152. width: 40px;
  153. flex: none;
  154. }
  155. }
  156. }
  157. .divider {
  158. border-bottom: 1px solid #e6e6e6;
  159. margin: 20px 0;
  160. }
  161. .card-container {
  162. width: 100%;
  163. display: flex;
  164. flex-wrap: wrap;
  165. flex-flow: wrap;
  166. .card {
  167. flex: 1;
  168. width: 48%;
  169. margin: 2% 1%;
  170. min-width: 48%; // 加入这两个后每个item的宽度就生效了
  171. max-width: 48%; // 加入这两个后每个item的宽度就生效了
  172. height: 110px;
  173. }
  174. }
  175. }
  176. }
  177. </style>