index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <div id='equipment'>
  3. <div class='eq-top'>
  4. <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
  5. <img :src='item.id==systemId?item.icon1:item.icon' />
  6. {{item.name}}
  7. </span>
  8. </div>
  9. <div class='eq-bottom'>
  10. <div class='eq-left'>
  11. <ul>
  12. <li
  13. class='li-style'
  14. :class='{"is-active": eve.id}'
  15. v-for='(eve,index) in everySystem'
  16. :key='"o"+index'
  17. @click='dialogVisible(eve)'
  18. >
  19. <span class='circle'></span>
  20. {{eve.label}}
  21. </li>
  22. </ul>
  23. </div>
  24. <div class='eq-right'>
  25. <div class='eq-right-bottom'>
  26. <div class='eq-title'>
  27. <span>{{floorInfo.floorName}}</span>
  28. </div>
  29. <div class='eq-content'>
  30. <floorMap ref='floorMap'></floorMap>
  31. <bottomLayer></bottomLayer>
  32. </div>
  33. <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
  34. </div>
  35. </div>
  36. <editList></editList>
  37. </div>
  38. <eq-dialog ref='dialog' :systemName='systemName'></eq-dialog>
  39. </div>
  40. </template>
  41. <script>
  42. import floorList from '@/components/floorList.vue'
  43. import floorMap from '@/components/floorMap/index.vue'
  44. import eqDialog from './eqDialog'
  45. import bottomLayer from './bottomLayer'
  46. import editList from '@/components/edit.vue'
  47. import { system, floors } from '@/utils/plugins/components.js'
  48. import { getFloorList } from '@/api/public.js'
  49. import { querySelect, queryTab } from '@/api/public.js'
  50. export default {
  51. data() {
  52. return {
  53. system,
  54. floors,
  55. everySystem: [],
  56. systemId: 1,
  57. systemName: '供电系统',
  58. floorInfo: {
  59. floorName: 'F1',
  60. floorId: 'f1'
  61. },
  62. dialogInfo: {},
  63. brand: [], //品牌
  64. manufacturer: []
  65. }
  66. },
  67. components: { floorList, eqDialog, floorMap, bottomLayer, editList },
  68. methods: {
  69. // 查询下拉框
  70. query() {
  71. let postParams = [
  72. {
  73. columnName: { brand: 'brand', manufacturer: 'manufacturer' }, //列名称
  74. params: {
  75. // classstructureid: '1572'
  76. },
  77. tableName: 'glsms_asset' //视图名称
  78. }
  79. ]
  80. let data = {
  81. major: '弱电',
  82. plazaId: '1001145'
  83. }
  84. querySelect({ data, postParams }).then(res => {
  85. this.brand = res.data.data.glsms_asset.brand
  86. this.manufacturer = res.data.data.glsms_asset.manufacturer
  87. })
  88. },
  89. tabFind() {
  90. let postParams = [
  91. {
  92. params: {
  93. classstructureid: '1593'
  94. },
  95. tableName: 'glsms_asset' //视图名称
  96. }
  97. ]
  98. let data = {
  99. major: '弱电',
  100. plazaId: '1001145'
  101. }
  102. queryTab({ data, postParams }).then(res => {
  103. console.log(res.data.data)
  104. })
  105. },
  106. // 查询tab页
  107. tabSyatem(item) {
  108. this.systemId = item.id
  109. this.everySystem = item.children
  110. this.systemName = item.name
  111. },
  112. emitFloor(item) {
  113. this.floorInfo = item
  114. this.$refs.floorMap.init()
  115. },
  116. dialogVisible(eve) {
  117. console.log(eve)
  118. this.$refs.dialog.showModal(eve)
  119. // this.dialogInfo = eve
  120. }
  121. },
  122. mounted() {
  123. this.query()
  124. this.tabFind()
  125. this.everySystem = this.system[0].children
  126. // this.$refs.floorMap.init()
  127. // getFloorList({ plazaId: '964' }).then(res => {
  128. // console.log('12313', res)
  129. // })
  130. // this.$refs.dialog.init()
  131. // this.$refs.floorMap.init()
  132. }
  133. }
  134. </script>
  135. <style lang="less" scoped>
  136. #equipment {
  137. background: rgba(242, 245, 247, 1);
  138. display: flex;
  139. flex: 1;
  140. .eq-top {
  141. margin-left: 240px;
  142. padding-top: 24px;
  143. position: fixed;
  144. z-index: 3;
  145. min-width: 1300px;
  146. .eq-system {
  147. padding: 12px 23px;
  148. color: #1f2429;
  149. background: #fff;
  150. font-size: 16px;
  151. cursor: pointer;
  152. img {
  153. width: 16px;
  154. height: 16px;
  155. margin-right: 4px;
  156. margin-bottom: 3px;
  157. }
  158. }
  159. .isActive {
  160. color: #025baa;
  161. }
  162. }
  163. .eq-bottom {
  164. display: flex;
  165. flex: 1;
  166. .eq-left {
  167. position: fixed;
  168. z-index: 2;
  169. // width: 196px;
  170. padding-top: 100px;
  171. color: #646c73;
  172. font-size: 14px;
  173. height: 100%;
  174. // background: rgba(242, 245, 247, 1);
  175. }
  176. .li-style {
  177. padding: 0 0 18px 35px;
  178. cursor: pointer;
  179. .circle {
  180. width: 6px;
  181. height: 6px;
  182. // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  183. border-radius: 50%;
  184. display: inline-block;
  185. margin-right: 10px;
  186. }
  187. }
  188. .is-active {
  189. // background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  190. }
  191. .eq-right {
  192. flex: 1;
  193. .eq-right-bottom {
  194. display: flex;
  195. flex: 1;
  196. .eq-title {
  197. position: fixed;
  198. z-index: 2;
  199. top: 146px;
  200. left: 242px;
  201. width: 141px;
  202. height: 32px;
  203. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  204. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  205. color: #025baa;
  206. font-size: 16px;
  207. &::before {
  208. width: 2px;
  209. height: 16px;
  210. background: rgba(2, 91, 170, 1);
  211. display: inline-block;
  212. content: '';
  213. margin-right: 10px;
  214. margin-top: 8px;
  215. }
  216. }
  217. .eq-content {
  218. flex: 1;
  219. }
  220. }
  221. }
  222. }
  223. }
  224. </style>