index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <!-- 设备设施 -->
  3. <div id='equipment'>
  4. <div class='eq-top'>
  5. <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
  6. <img :src='item.id==systemId?item.icon1:item.icon' />
  7. {{item.name}}
  8. </span>
  9. </div>
  10. <div class='eq-bottom'>
  11. <div class='eq-left'>
  12. <ul>
  13. <li
  14. class='li-style'
  15. :class='{"is-active": eve.id}'
  16. v-for='(eve,index) in everySystem'
  17. :key='"o"+index'
  18. @click='dialogVisible(eve)'
  19. >
  20. <span class='circle'></span>
  21. <span class='hanzi'>{{eve.label}}</span>
  22. </li>
  23. </ul>
  24. </div>
  25. <div class='eq-right'>
  26. <div class='eq-right-bottom'>
  27. <div class='title-box'>
  28. <!-- <img src='@/assets/imgs/mainIcon.png' /> -->
  29. <div class='eq-title'>
  30. <span>{{floorInfo.code}}</span>
  31. </div>
  32. </div>
  33. <div class='eq-content'>
  34. <div class='legend-boxs'>
  35. <Legend></Legend>
  36. </div>
  37. <floorMap ref='floorMap'></floorMap>
  38. <div class='additional-box'>
  39. <div class='additional' @click='additionalColl'>
  40. <img src='../../assets/imgs/bg.png' alt />
  41. </div>
  42. <el-collapse-transition>
  43. <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
  44. </el-collapse-transition>
  45. </div>
  46. </div>
  47. <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
  48. </div>
  49. </div>
  50. <!-- <editList></editList> -->
  51. </div>
  52. <eq-dialog ref='dialog' :systemName='systemName' :smsxt='smsxt'></eq-dialog>
  53. </div>
  54. </template>
  55. <script>
  56. import floorList from '@/components/floorList.vue'
  57. import floorMap from '@/components/floorMap/index.vue'
  58. import eqDialog from './eqDialog'
  59. import editList from '@/components/edit.vue'
  60. import { system, floors } from '@/utils/plugins/components.js'
  61. export default {
  62. data() {
  63. return {
  64. system,
  65. floors,
  66. everySystem: [],
  67. systemId: 1,
  68. systemName: '供电系统',
  69. floorInfo: {
  70. gname: 'f1',
  71. code: 'F1'
  72. },
  73. smsxt: '1001',
  74. dialogInfo: {},
  75. brand: [], //品牌
  76. manufacturer: [],
  77. show: false
  78. }
  79. },
  80. components: { floorList, eqDialog, floorMap, editList },
  81. methods: {
  82. // 查询tab页
  83. tabSyatem(item) {
  84. this.systemId = item.id
  85. this.everySystem = item.children
  86. this.systemName = item.name
  87. this.smsxt = item.smsxt
  88. },
  89. emitFloor(item) {
  90. console.log('item', item)
  91. this.floorInfo = item
  92. this.$refs.floorMap.init(this.floorInfo.gname)
  93. },
  94. dialogVisible(eve) {
  95. console.log(eve)
  96. this.$refs.dialog.showModal(eve)
  97. },
  98. additionalColl() {
  99. this.show = !this.show
  100. }
  101. },
  102. mounted() {
  103. this.everySystem = this.system[0].children
  104. this.$refs.floorMap.init(this.floorInfo.gname)
  105. }
  106. }
  107. </script>
  108. <style lang="less" scoped>
  109. #equipment {
  110. background: rgba(242, 245, 247, 1);
  111. display: flex;
  112. flex: 1;
  113. .eq-top {
  114. margin-left: 260px;
  115. padding-top: 24px;
  116. position: fixed;
  117. z-index: 3;
  118. min-width: 1300px;
  119. .eq-system {
  120. padding: 12px 20px;
  121. background: #fff;
  122. font-size: 16px;
  123. cursor: pointer;
  124. img {
  125. width: 16px;
  126. height: 16px;
  127. margin-right: 4px;
  128. margin-bottom: 3px;
  129. }
  130. }
  131. .isActive {
  132. color: #025baa;
  133. font-weight: bolder;
  134. background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
  135. }
  136. }
  137. .eq-bottom {
  138. display: flex;
  139. flex: 1;
  140. .eq-left {
  141. position: fixed;
  142. z-index: 2;
  143. width: 260px;
  144. padding-top: 100px;
  145. color: #646c73;
  146. font-size: 14px;
  147. height: 100%;
  148. background: rgba(242, 245, 247, 1);
  149. }
  150. .li-style {
  151. margin-left: 28px;
  152. // padding: 9px 6px;
  153. cursor: pointer;
  154. .circle {
  155. width: 6px;
  156. height: 6px;
  157. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  158. border-radius: 50%;
  159. display: inline-block;
  160. margin-right: 10px;
  161. }
  162. .hanzi {
  163. padding: 10px 2px;
  164. width: 200px;
  165. display: inline-block;
  166. &:hover {
  167. color: rgba(2, 91, 170, 1);
  168. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  169. }
  170. }
  171. }
  172. .eq-right {
  173. flex: 1;
  174. .eq-right-bottom {
  175. display: flex;
  176. flex: 1;
  177. .title-box {
  178. position: fixed;
  179. z-index: 2;
  180. top: 146px;
  181. left: 260px;
  182. display: flex;
  183. img {
  184. margin-top: -5px;
  185. }
  186. .eq-title {
  187. width: 140px;
  188. height: 32px;
  189. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  190. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  191. color: #025baa;
  192. font-size: 16px;
  193. &::before {
  194. width: 2px;
  195. height: 16px;
  196. background: rgba(2, 91, 170, 1);
  197. display: inline-block;
  198. content: '';
  199. margin-right: 10px;
  200. margin-top: 8px;
  201. }
  202. }
  203. }
  204. .eq-content {
  205. flex: 1;
  206. .legend-boxs {
  207. position: fixed;
  208. z-index: 9;
  209. right: 32px;
  210. top: 160px;
  211. }
  212. .additional-box {
  213. position: relative;
  214. .additional {
  215. width: 44px;
  216. height: 44px;
  217. background: rgba(255, 255, 255, 1);
  218. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  219. border-radius: 2px;
  220. position: fixed;
  221. right: 32px;
  222. top: 420px;
  223. z-index: 2;
  224. display: flex;
  225. justify-content: center;
  226. align-items: center;
  227. cursor: pointer;
  228. img {
  229. width: 20px;
  230. height: 20px;
  231. }
  232. }
  233. .add-img {
  234. width: 560px;
  235. height: 325px;
  236. background: #ffffff;
  237. -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  238. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  239. border-radius: 2px;
  240. border: 1px solid #e4e5e7;
  241. position: absolute;
  242. right: 77px;
  243. top: 93px;
  244. z-index: 2;
  245. }
  246. }
  247. }
  248. }
  249. }
  250. }
  251. }
  252. </style>
  253. <style lang="less">
  254. .el-table {
  255. th {
  256. background: rgba(248, 249, 250, 1);
  257. font-size: 12px;
  258. padding: 8px 0;
  259. color: #646a73;
  260. }
  261. td {
  262. font-size: 14px;
  263. color: #1f2429;
  264. padding: 8px 0;
  265. overflow: hidden;
  266. text-overflow: ellipsis;
  267. white-space: nowrap;
  268. }
  269. }
  270. </style>