index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  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 v-for='(eve,index) in everySystem' :key='"o"+index'>
  13. <li class='li-style' :class='{"is-active": eve.id}' @click='dialogVisible(eve)'>
  14. <span class='circle'></span>
  15. <span class='hanzi'>{{eve.label}}</span>
  16. </li>
  17. </ul>
  18. </div>
  19. <div class='eq-right'>
  20. <div class='eq-right-bottom'>
  21. <div class='title-box'>
  22. <div class='eq-title'>
  23. <span>{{floorInfo.code}}</span>
  24. </div>
  25. </div>
  26. <div class='eq-content'>
  27. <div class='legend-boxs'>
  28. <Legend :systemName='systemName' :floors='floorsArr' type='1'></Legend>
  29. </div>
  30. <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
  31. <div class='additional-box' v-if='fqPic.length>0'>
  32. <div class='additional' @click='additionalColl'>
  33. <img src='../../assets/imgs/bg.png' alt />
  34. </div>
  35. <el-collapse-transition>
  36. <div v-if='show' class='add-img'>图</div>
  37. </el-collapse-transition>
  38. </div>
  39. </div>
  40. <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
  41. </div>
  42. </div>
  43. </div>
  44. <eq-dialog ref='dialog' :systemName='systemName' :smsxt='smsxt' @emitCount='emitCount'></eq-dialog>
  45. </div>
  46. </template>
  47. <script>
  48. import floorList from '@/components/floorList.vue'
  49. import floorMap from '@/components/floorMap/index.vue'
  50. import eqDialog from './eqDialog'
  51. import editList from '@/components/edit.vue'
  52. import { system } from '@/utils/plugins/components.js'
  53. import { queryPic } from '@/api/public.js'
  54. import { mapGetters } from 'vuex'
  55. export default {
  56. data() {
  57. return {
  58. system,
  59. everySystem: [],
  60. systemId: 1,
  61. categoryId: 'GDXT',
  62. systemName: '供电系统',
  63. floorInfo: {
  64. gname: 'f1',
  65. code: 'F1'
  66. },
  67. smsxt: '1001',
  68. dialogInfo: {},
  69. brand: [], //品牌
  70. manufacturer: [],
  71. show: false,
  72. fqPic: [],
  73. loadName: '',
  74. type: '',
  75. objCount: []
  76. }
  77. },
  78. components: { floorList, eqDialog, floorMap, editList },
  79. methods: {
  80. // 查询tab页
  81. tabSyatem(item) {
  82. console.log(item)
  83. this.systemId = item.id
  84. this.everySystem = item.children
  85. this.systemName = item.name
  86. this.smsxt = item.smsxt
  87. this.$cookie.set('categoryId', item.categoryId, 3)
  88. this.$refs.floorMap.init(this.floorInfo.gname)
  89. if (this.smsxt == '1003' || this.smsxt == '1004') {
  90. this.Index()
  91. }
  92. this.init()
  93. },
  94. //判断有没有原理图,如果没有则不出现系统原理图列表li
  95. emitCount(objCount) {
  96. this.objCount = objCount
  97. },
  98. emitFloor(item) {
  99. this.floorInfo = item
  100. this.$refs.floorMap.init(this.floorInfo.gname)
  101. this.init()
  102. },
  103. dialogVisible(eve) {
  104. this.$refs.dialog.showModal(eve)
  105. },
  106. additionalColl() {
  107. this.show = !this.show
  108. },
  109. Index() {
  110. let picFloor = this.$cookie.get('floorNow')
  111. let getParams = {
  112. module: '1003',
  113. floor: picFloor,
  114. plazaId: this.$store.state.plazaId
  115. }
  116. if (this.smsxt) {
  117. getParams.system = this.smsxt
  118. }
  119. queryPic({ getParams }).then(res => {
  120. //console.log('分区图', res)
  121. this.fqPic = res.data
  122. })
  123. },
  124. init() {
  125. this.loadName = `设备设施-${this.systemName}-${this.floorInfo.code}`
  126. },
  127. // 从设备设施进入的机房
  128. queryType(val) {
  129. this.type = val
  130. console.log(this.type)
  131. }
  132. },
  133. mounted() {
  134. console.log('smsxtsmsxtsmsxt', this.$route.query.smsxt)
  135. if (this.$route.query.smsxt) {
  136. this.smsxt = this.$route.query.smsxt
  137. this.system.forEach(el => {
  138. if (el.smsxt == this.smsxt) {
  139. this.everySystem = el.children
  140. this.systemName = el.name
  141. this.systemId = el.id
  142. }
  143. })
  144. }
  145. this.everySystem = this.system[0].children
  146. this.init()
  147. this.$refs.floorMap.init(this.floorInfo.gname)
  148. },
  149. computed: {
  150. ...mapGetters(['floorsArr'])
  151. }
  152. }
  153. </script>
  154. <style lang="less" scoped>
  155. #equipment {
  156. background: rgba(242, 245, 247, 1);
  157. display: flex;
  158. flex: 1;
  159. overflow: hidden;
  160. .eq-top {
  161. margin-left: 260px;
  162. padding-top: 24px;
  163. position: fixed;
  164. z-index: 3;
  165. min-width: 1300px;
  166. .eq-system {
  167. padding: 12px 20px;
  168. background: #fff;
  169. font-size: 16px;
  170. cursor: pointer;
  171. img {
  172. width: 16px;
  173. height: 16px;
  174. margin-right: 4px;
  175. margin-bottom: 3px;
  176. }
  177. }
  178. .isActive {
  179. color: #025baa;
  180. font-weight: bolder;
  181. background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
  182. }
  183. }
  184. .eq-bottom {
  185. display: flex;
  186. flex: 1;
  187. .eq-left {
  188. position: fixed;
  189. z-index: 2;
  190. width: 260px;
  191. padding-top: 100px;
  192. color: #646c73;
  193. font-size: 14px;
  194. height: 100%;
  195. background: rgba(242, 245, 247, 1);
  196. }
  197. .li-style {
  198. margin-left: 28px;
  199. // padding: 9px 6px;
  200. cursor: pointer;
  201. .circle {
  202. width: 6px;
  203. height: 6px;
  204. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  205. border-radius: 50%;
  206. display: inline-block;
  207. margin-right: 10px;
  208. }
  209. .hanzi {
  210. padding: 10px 2px;
  211. width: 200px;
  212. display: inline-block;
  213. &:hover {
  214. color: rgba(2, 91, 170, 1);
  215. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  216. }
  217. }
  218. }
  219. .eq-right {
  220. flex: 1;
  221. .eq-right-bottom {
  222. display: flex;
  223. flex: 1;
  224. height: 100%;
  225. .title-box {
  226. position: fixed;
  227. z-index: 2;
  228. top: 146px;
  229. left: 260px;
  230. display: flex;
  231. img {
  232. margin-top: -5px;
  233. }
  234. .eq-title {
  235. width: 140px;
  236. height: 32px;
  237. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  238. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  239. color: #025baa;
  240. font-size: 16px;
  241. &::before {
  242. width: 2px;
  243. height: 16px;
  244. background: rgba(2, 91, 170, 1);
  245. display: inline-block;
  246. content: '';
  247. margin-right: 10px;
  248. margin-top: 8px;
  249. }
  250. }
  251. }
  252. .eq-content {
  253. flex: 1;
  254. .legend-boxs {
  255. position: fixed;
  256. z-index: 9;
  257. right: 32px;
  258. top: 160px;
  259. }
  260. .additional-box {
  261. position: relative;
  262. .additional {
  263. width: 44px;
  264. height: 44px;
  265. background: rgba(255, 255, 255, 1);
  266. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  267. border-radius: 2px;
  268. position: fixed;
  269. right: 32px;
  270. top: 420px;
  271. z-index: 2;
  272. display: flex;
  273. justify-content: center;
  274. align-items: center;
  275. cursor: pointer;
  276. img {
  277. width: 20px;
  278. height: 20px;
  279. }
  280. }
  281. .add-img {
  282. width: 560px;
  283. height: 325px;
  284. background: #ffffff;
  285. -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  286. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  287. border-radius: 2px;
  288. border: 1px solid #e4e5e7;
  289. position: absolute;
  290. right: 77px;
  291. top: 93px;
  292. z-index: 2;
  293. }
  294. }
  295. }
  296. }
  297. }
  298. }
  299. }
  300. </style>
  301. <style lang="less">
  302. .el-table {
  303. th {
  304. background: rgba(248, 249, 250, 1);
  305. font-size: 12px;
  306. padding: 8px 0;
  307. color: #646a73;
  308. }
  309. td {
  310. font-size: 14px;
  311. color: #1f2429;
  312. padding: 8px 0;
  313. overflow: hidden;
  314. text-overflow: ellipsis;
  315. white-space: nowrap;
  316. }
  317. }
  318. </style>