legendBox.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <!-- 设备右侧点击图例按钮显示的图例弹框 -->
  3. <div class='box'>
  4. <div class='legend-box' v-if='isShow'>
  5. <a-table :columns='columns' :data-source='data' :row-selection='rowSelection' :pagination='false' size='small' />
  6. <div class='switch-btn'>
  7. <a-switch @change='changeSwitch' size='small' />&nbsp;&nbsp;隐藏数量为0的项目
  8. </div>
  9. <div class='remark'>
  10. 注:1.主要设备房包括:制冷机房、生活水泵房、消防泵房
  11. <p>2.图例后 的数字,代表此位置的数量</p>
  12. <p>&nbsp;&nbsp;&nbsp;&nbsp;3.B2-1至B2-8为防火分区编号</p>
  13. </div>
  14. </div>
  15. <div v-if='!isShow && showPic' class='pic-box'>
  16. <img src='@/assets/imgs/eq.jpg' alt />
  17. </div>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. isShow: false,
  25. showPic: false,
  26. columns: [
  27. {
  28. title: '项目',
  29. dataIndex: 'projectName',
  30. key: 'projectName'
  31. },
  32. {
  33. title: '数量',
  34. dataIndex: 'count',
  35. key: 'count'
  36. },
  37. {
  38. title: '单位',
  39. dataIndex: 'unit',
  40. key: 'unit'
  41. },
  42. {
  43. title: '图例',
  44. dataIndex: 'legend',
  45. key: 'legend'
  46. }
  47. ],
  48. data: [
  49. {
  50. projectName: '建筑面积',
  51. count: '18500',
  52. unit: 'm2',
  53. legend: '——'
  54. },
  55. {
  56. projectName: '建筑面积',
  57. count: '18500',
  58. unit: 'm2',
  59. legend: '——'
  60. },
  61. {
  62. projectName: '建筑面积',
  63. count: '18500',
  64. unit: 'm2',
  65. legend: '——'
  66. },
  67. {
  68. projectName: '建筑面积',
  69. count: '18500',
  70. unit: 'm2',
  71. legend: '——'
  72. },
  73. {
  74. projectName: '建筑面积',
  75. count: '18500',
  76. unit: 'm2',
  77. legend: '——'
  78. },
  79. {
  80. projectName: '建筑面积',
  81. count: '18500',
  82. unit: 'm2',
  83. legend: '——'
  84. },
  85. {
  86. projectName: '建筑面积',
  87. count: '18500',
  88. unit: 'm2',
  89. legend: '——'
  90. },
  91. {
  92. projectName: '建筑面积',
  93. count: '18500',
  94. unit: 'm2',
  95. legend: '——'
  96. },
  97. {
  98. projectName: '建筑面积',
  99. count: '18500',
  100. unit: 'm2',
  101. legend: '——'
  102. },
  103. {
  104. projectName: '建筑面积',
  105. count: '18500',
  106. unit: 'm2',
  107. legend: '——'
  108. }
  109. ],
  110. rowSelection: {
  111. onChange: (selectedRowKeys, selectedRows) => {
  112. //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  113. },
  114. onSelect: (record, selected, selectedRows) => {
  115. //console.log(record, selected, selectedRows)
  116. },
  117. onSelectAll: (selected, selectedRows, changeRows) => {
  118. //console.log(selected, selectedRows, changeRows)
  119. }
  120. }
  121. }
  122. },
  123. computed: {},
  124. methods: {
  125. changeSwitch(checked) {
  126. //console.log(`a-switch to ${checked}`)
  127. },
  128. open() {
  129. this.isShow = !this.isShow
  130. },
  131. openPic() {
  132. this.showPic = !this.showPic
  133. }
  134. }
  135. }
  136. </script>
  137. <style lang="less" scoped>
  138. .box {
  139. .legend-box {
  140. width: 387px;
  141. height: 546px;
  142. background: rgba(255, 255, 255, 1);
  143. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  144. border-radius: 2px;
  145. border: 1px solid rgba(228, 229, 231, 1);
  146. position: fixed;
  147. z-index: 2;
  148. right: 80px;
  149. top: 164px;
  150. padding: 16px 0;
  151. overflow-y: auto;
  152. .switch-btn {
  153. position: absolute;
  154. bottom: 78px;
  155. right: 16px;
  156. color: #646c73;
  157. }
  158. .remark {
  159. position: absolute;
  160. bottom: 16px;
  161. left: 16px;
  162. p {
  163. padding-left: 28px;
  164. margin-bottom: 0;
  165. }
  166. }
  167. }
  168. .pic-box {
  169. width: 387px;
  170. height: 346px;
  171. background: rgba(255, 255, 255, 1);
  172. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  173. border-radius: 2px;
  174. border: 1px solid rgba(228, 229, 231, 1);
  175. position: fixed;
  176. z-index: 2;
  177. right: 80px;
  178. top: 405px;
  179. padding: 16px 0;
  180. overflow-y: auto;
  181. }
  182. }
  183. </style>
  184. <style lang="less" >
  185. .box {
  186. .legend-box {
  187. th {
  188. background: rgba(2, 91, 170, 0.1) !important;
  189. font-size: 12px;
  190. font-family: PingFangSC-Medium, PingFang SC;
  191. font-weight: border;
  192. color: #000;
  193. }
  194. }
  195. }
  196. </style>