index.vue 47 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.06.08
  4. *@info 机房信息主页
  5. */
  6. <template>
  7. <div class='compute-box'>
  8. <el-dialog :title='`${systemName}`' :visible.sync='visible' :fullscreen='true'>
  9. <el-tooltip
  10. class='item'
  11. effect='dark'
  12. :content='content'
  13. placement='top'
  14. v-if='(type=="floor"&& Object.keys(smsxtArr).length>0)||type=="system"'
  15. >
  16. <div class='compute-zf' @click='jumpFloor'></div>
  17. </el-tooltip>
  18. <div class='compute-tab'>
  19. <el-tabs v-model='activeName' @tab-click='handleClick' ref='elTabs'>
  20. <el-tab-pane label='机房布置图' name='1' v-if='tableImg.length>0'>
  21. <room-table1 v-if='tableImg.length>=0' :tableImg='tableImg'></room-table1>
  22. </el-tab-pane>
  23. <el-tab-pane label='配电室低压柜及出线明细表' name='2' v-if='showLocationflid'>
  24. <div class='compute-center'>
  25. <Select
  26. width='200'
  27. @change='Index1'
  28. v-model='floor2'
  29. tipPlace='top'
  30. caption='楼层:'
  31. :selectdata='floorSelect2'
  32. :placeholder='"请选择"'
  33. style='margin-right:12px'
  34. ></Select>
  35. <el-input
  36. clearable
  37. @keyup.enter.native='Index1'
  38. @blur='Index1'
  39. v-model='ctbhInput'
  40. placeholder='搜索抽屉编号'
  41. size='small'
  42. prefix-icon='el-icon-search'
  43. style='width:200px;margin-right:12px'
  44. ></el-input>
  45. <el-input
  46. clearable
  47. @keyup.enter.native='Index1'
  48. @blur='Index1'
  49. v-model='cxggInput'
  50. placeholder='搜索出线规格'
  51. size='small'
  52. prefix-icon='el-icon-search'
  53. style='width:200px;margin-right:12px'
  54. ></el-input>
  55. <el-input
  56. clearable
  57. @keyup.enter.native='Index1'
  58. @blur='Index1'
  59. v-model='djbhInput'
  60. placeholder='搜索电井编号'
  61. size='small'
  62. prefix-icon='el-icon-search'
  63. style='width:200px;margin-right:12px'
  64. ></el-input>
  65. <el-input
  66. clearable
  67. @keyup.enter.native='Index1'
  68. @blur='Index1'
  69. v-model='kzhlInput'
  70. placeholder='搜索控制回路'
  71. size='small'
  72. prefix-icon='el-icon-search'
  73. style='width:200px;margin-right:12px'
  74. ></el-input>
  75. </div>
  76. <room-table2
  77. ref='roomTable2'
  78. v-if='table2.length>=0'
  79. :table2='table2'
  80. :loading='loading1'
  81. :page='page1'
  82. :total='total1'
  83. :size='size1'
  84. @Index1Emit='Index1Emit'
  85. ></room-table2>
  86. </el-tab-pane>
  87. <el-tab-pane label='机房内核心设备' name='3'>
  88. <div class='compute-center'>
  89. <el-input
  90. clearable
  91. placeholder='搜索设备简称'
  92. size='small'
  93. prefix-icon='el-icon-search'
  94. v-model='sbjcInput'
  95. @keyup.enter.native='Index2'
  96. @blur='Index2'
  97. style='width:200px;margin-right:12px'
  98. ></el-input>
  99. <el-input
  100. clearable
  101. @keyup.enter.native='Index2'
  102. @blur='Index2'
  103. placeholder='搜索品牌、型号'
  104. size='small'
  105. prefix-icon='el-icon-search'
  106. v-model='ppxhInput'
  107. style='width:200px;margin-right:12px'
  108. ></el-input>
  109. <!-- <Select
  110. width='200'
  111. @change='Index2'
  112. tipPlace='top'
  113. v-model='floorChange'
  114. caption='楼层:'
  115. :selectdata='floorSelect'
  116. :placeholder='"请选择"'
  117. style='margin-right:12px'
  118. ></Select>-->
  119. <el-input
  120. clearable
  121. @keyup.enter.native='Index2'
  122. @blur='Index2'
  123. placeholder='搜索生产厂商'
  124. size='small'
  125. prefix-icon='el-icon-search'
  126. v-model='sccsInput'
  127. style='width:200px;margin-right:12px'
  128. ></el-input>
  129. </div>
  130. <room-table3
  131. ref='roomTable3'
  132. v-if='table3.length>=0'
  133. :table3='table3'
  134. :systemName='systemName'
  135. :loading='loading2'
  136. :page='page2'
  137. :total='total2'
  138. :size='size2'
  139. :location='location'
  140. @Index2Emit='Index2Emit'
  141. ></room-table3>
  142. </el-tab-pane>
  143. <el-tab-pane label='维修记录' name='4'>
  144. <div class='compute-center'>
  145. <el-input
  146. clearable
  147. @keyup.enter.native='Index3'
  148. @blur='Index3'
  149. placeholder='搜索设备名称、编号'
  150. size='small'
  151. prefix-icon='el-icon-search'
  152. v-model='sbmcInput4'
  153. style='width:200px;margin-right:12px'
  154. ></el-input>
  155. <el-input
  156. clearable
  157. @keyup.enter.native='Index3'
  158. @blur='Index3'
  159. placeholder='搜索事项类型、事项描述'
  160. size='small'
  161. prefix-icon='el-icon-search'
  162. v-model='zysxInput4'
  163. style='width:200px;margin-right:12px'
  164. ></el-input>
  165. <Select
  166. @change='Index3'
  167. width='200'
  168. tipPlace='top'
  169. caption='是否更换:'
  170. v-model='sfghSelect'
  171. :selectdata='isReplaceData'
  172. :placeholder='"请选择"'
  173. style='margin-right:12px'
  174. ></Select>
  175. <el-input
  176. clearable
  177. @keyup.enter.native='Index3'
  178. @blur='Index3'
  179. placeholder='搜索工单编号'
  180. size='small'
  181. prefix-icon='el-icon-search'
  182. v-model='gdbhInput4'
  183. style='width:200px;margin-right:12px'
  184. ></el-input>
  185. <div class='picker-box'>
  186. <span class='picker-span'>填报日期:</span>
  187. <el-date-picker
  188. style='width:190px'
  189. v-model='tbsjDate'
  190. value-format='yyyyMMdd'
  191. type='daterange'
  192. @change='Index3'
  193. size='mini'
  194. range-separator='-'
  195. start-placeholder
  196. end-placeholder
  197. ></el-date-picker>
  198. </div>
  199. <!-- <p class='input-dialog-p'>填报日期</p>
  200. <p class='input-dialog-p2'>
  201. <el-date-picker
  202. clearable
  203. v-model='tbsjDate'
  204. value-format='yyyyMMdd'
  205. type='daterange'
  206. size='mini'
  207. style='margin-right:12px;width:200px'
  208. range-separator='-'
  209. start-placeholder
  210. end-placeholder
  211. ></el-date-picker>
  212. </p>-->
  213. </div>
  214. <div class='dialog-none'>
  215. <div class='input-dialog'>
  216. <div class='input-dialog-top' @click='show'>
  217. <img src='@/assets/imgs/select.png' />
  218. 筛选
  219. </div>
  220. <div class='input-dialog-form' v-if='dialogFormVisible'>
  221. <p class='input-dialog-p'>验收日期</p>
  222. <p class='input-dialog-p2'>
  223. <el-date-picker
  224. clearable
  225. v-model='yssjDate'
  226. value-format='yyyyMMdd'
  227. type='daterange'
  228. size='mini'
  229. style='margin-right:12px;width:200px'
  230. range-separator='-'
  231. start-placeholder
  232. end-placeholder
  233. ></el-date-picker>
  234. </p>
  235. <!-- <p class='input-dialog-p'>工单编号</p>
  236. <p class='input-dialog-p2'>
  237. <el-input
  238. clearable
  239. placeholder
  240. style='width:200px;'
  241. size='mini'
  242. prefix-icon='el-icon-search'
  243. v-model='gdbhInput4'
  244. ></el-input>
  245. </p>-->
  246. <p class='input-dialog-foot'>
  247. <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
  248. <el-button type='primary' @click='confirm
  249. ' size='mini'>确 定</el-button>
  250. </p>
  251. </div>
  252. </div>
  253. </div>
  254. <room-table4
  255. ref='roomTable4'
  256. v-if='table4.length>=0'
  257. :table4='table4'
  258. :loading='loading3'
  259. :page='page3'
  260. :total='total3'
  261. :size='size3'
  262. @Index3Emit='Index3Emit'
  263. ></room-table4>
  264. </el-tab-pane>
  265. <el-tab-pane label='维保记录' name='5'>
  266. <div class='compute-center'>
  267. <el-input
  268. @keyup.enter.native='Index4'
  269. @blur='Index4'
  270. clearable
  271. placeholder='搜索设备名称、编号'
  272. size='small'
  273. prefix-icon='el-icon-search'
  274. v-model='sbmcInput5'
  275. style='margin-right:12px;width:220px;'
  276. ></el-input>
  277. <el-input
  278. @keyup.enter.native='Index4'
  279. @blur='Index4'
  280. clearable
  281. placeholder='搜索核心维保事项记录描述'
  282. size='small'
  283. prefix-icon='el-icon-search'
  284. v-model='wbsxjlInput5'
  285. style='margin-right:12px;width:220px;'
  286. ></el-input>
  287. <el-input
  288. @keyup.enter.native='Index4'
  289. @blur='Index4'
  290. clearable
  291. placeholder='搜索任务编号'
  292. size='small'
  293. prefix-icon='el-icon-search'
  294. v-model='rwbhInput5'
  295. style='margin-right:12px;width:220px;'
  296. ></el-input>
  297. <Select
  298. @change='Index4'
  299. width='220'
  300. tipPlace='top'
  301. v-model='statuSelect5'
  302. caption='任务状态:'
  303. v-if='status.length>0'
  304. :selectdata='status'
  305. :placeholder='"请选择"'
  306. style='margin-right:12px'
  307. ></Select>
  308. <Select
  309. width='220'
  310. tipPlace='top'
  311. v-model='iszcSelect5'
  312. caption='是否正常:'
  313. v-if='zt.length>0'
  314. :selectdata='zt'
  315. :placeholder='"请选择"'
  316. style='margin-right:12px'
  317. ></Select>
  318. </div>
  319. <div class='dialog-none'>
  320. <div class='input-dialog'>
  321. <div class='input-dialog-top' @click='show'>
  322. <img src='@/assets/imgs/select.png' />
  323. 筛选
  324. </div>
  325. <div class='input-dialog-form' v-if='dialogFormVisible'>
  326. <p class='input-dialog-p'>任务开始日期</p>
  327. <p class='input-dialog-p2'>
  328. <el-date-picker
  329. clearable
  330. value-format='yyyyMMdd'
  331. type='daterange'
  332. size='mini'
  333. v-model='rwksrq'
  334. style='width:200px'
  335. range-separator='-'
  336. start-placeholder
  337. end-placeholder
  338. ></el-date-picker>
  339. </p>
  340. <p class='input-dialog-p'>任务完成日期</p>
  341. <p class='input-dialog-p2'>
  342. <el-date-picker
  343. clearable
  344. value-format='yyyyMMdd'
  345. type='daterange'
  346. size='mini'
  347. v-model='rwwcrq'
  348. style='width:200px'
  349. range-separator='-'
  350. start-placeholder
  351. end-placeholder
  352. ></el-date-picker>
  353. </p>
  354. <!-- <el-input
  355. @change='Index4'
  356. clearable
  357. placeholder='异常工单编号'
  358. size='small'
  359. prefix-icon='el-icon-search'
  360. v-model='ycgdbhInput5'
  361. style='margin-right:12px;width:220px;'
  362. ></el-input>-->
  363. <p class='input-dialog-p'>异常工单编号</p>
  364. <p class='input-dialog-p2'>
  365. <el-input
  366. clearable
  367. placeholder='异常工单编号'
  368. size='small'
  369. prefix-icon='el-icon-search'
  370. v-model='ycgdbhInput5'
  371. style='width:200px;'
  372. ></el-input>
  373. </p>
  374. <p class='input-dialog-p'>异常工单填报日期</p>
  375. <p class='input-dialog-p2'>
  376. <el-date-picker
  377. clearable
  378. value-format='yyyyMMdd'
  379. type='daterange'
  380. size='mini'
  381. v-model='ycgdtbsj'
  382. style='width:200px'
  383. range-separator='-'
  384. start-placeholder
  385. end-placeholder
  386. ></el-date-picker>
  387. </p>
  388. <p class='input-dialog-p'>异常工单验收日期</p>
  389. <p class='input-dialog-p2'>
  390. <el-date-picker
  391. clearable
  392. value-format='yyyyMMdd'
  393. type='daterange'
  394. size='mini'
  395. style='width:200px'
  396. range-separator='-'
  397. start-placeholder
  398. end-placeholder
  399. v-model='ycgdyssj'
  400. ></el-date-picker>
  401. </p>
  402. <p class='input-dialog-foot'>
  403. <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
  404. <el-button type='primary' @click='confirm2' size='mini'>确 定</el-button>
  405. </p>
  406. </div>
  407. </div>
  408. </div>
  409. <room-table5
  410. ref='roomTable5'
  411. v-if='table5.length>=0'
  412. :table5='table5'
  413. :loading='loading4'
  414. :page='page4'
  415. :total='total4'
  416. :size='size4'
  417. @Index4Emit='Index4Emit'
  418. ></room-table5>
  419. </el-tab-pane>
  420. </el-tabs>
  421. </div>
  422. </el-dialog>
  423. </div>
  424. </template>
  425. <script>
  426. import { queryEquipmentList } from '@/api/equipmentList.js'
  427. import { queryDygjcxline, queryHxsb, queryWxjf, queryWb, querySystem } from '@/api/room.js'
  428. import roomTable1 from './room1'
  429. import roomTable2 from './room2'
  430. import roomTable3 from './room3'
  431. import roomTable4 from './room4'
  432. import roomTable5 from './room5'
  433. import { mapGetters } from 'vuex'
  434. import { querySelect, queryPic } from '@/api/public.js'
  435. import { Select } from 'meri-design'
  436. export default {
  437. data() {
  438. return {
  439. content: '',
  440. activeName: '1',
  441. location: '',
  442. visible: false,
  443. dialogFormVisible: false,
  444. systemName: '',
  445. loading: true,
  446. loading1: true,
  447. loading2: true,
  448. loading3: true,
  449. loading4: true,
  450. table2: [],
  451. table3: [],
  452. table4: [],
  453. table5: [],
  454. showLocationflid: false,
  455. //
  456. total: 0,
  457. page: 1,
  458. size: 10,
  459. picFloor: '',
  460. tableImg: [],
  461. //
  462. total1: 0,
  463. page1: 1,
  464. size1: 10,
  465. floor2: '全部',
  466. ctbhInput: '',
  467. cxggInput: '',
  468. djbhInput: '',
  469. kzhlInput: '',
  470. allArr: [
  471. {
  472. id: '全部',
  473. name: '全部'
  474. }
  475. ],
  476. //
  477. total2: 0,
  478. page2: 1,
  479. size2: 10,
  480. sccsInput: '',
  481. ppxhInput: '',
  482. sbjcInput: '',
  483. // floorChange: '',
  484. //
  485. total3: 0,
  486. page3: 1,
  487. size3: 11,
  488. tbsjDate: '',
  489. yssjDate: '',
  490. // 是否更换配件
  491. isReplaceData: [
  492. { id: '1', name: '是' },
  493. { id: '0', name: '否' }
  494. ],
  495. sfghSelect: '',
  496. sbmcInput4: '',
  497. sbbhInput4: '',
  498. zysxInput4: '',
  499. msInput4: '',
  500. gdbhInput4: '',
  501. type1: 'wx',
  502. //
  503. total4: 0,
  504. page4: 1,
  505. size4: 11,
  506. searVal: '',
  507. status: [],
  508. zt: [],
  509. sbmcInput5: '',
  510. sbbhInput5: '',
  511. wbsxjlInput5: '',
  512. rwbhInput5: '',
  513. ycgdbhInput5: '',
  514. ssmsInput5: '',
  515. iszcSelect5: '',
  516. statuSelect5: '',
  517. rwksrq: '',
  518. rwwcrq: '',
  519. ycgdtbsj: '',
  520. ycgdyssj: '',
  521. smsxtArr: {},
  522. type: ''
  523. }
  524. },
  525. components: {
  526. roomTable1,
  527. roomTable2,
  528. roomTable3,
  529. roomTable4,
  530. roomTable5
  531. },
  532. computed: {
  533. ...mapGetters(['floorSelect', 'plazaId'])
  534. },
  535. methods: {
  536. handleClick(tab) {
  537. if (tab.label == '机房布置图') {
  538. this.Index(this.smsxtArr.smsxt)
  539. } else if (tab.label == '配电室低压柜及出线明细表') {
  540. this.Index1()
  541. this.$refs.roomTable2.computedHeight()
  542. } else if (tab.label == '机房内核心设备') {
  543. this.Index2()
  544. this.$refs.roomTable3.computedHeight()
  545. } else if (tab.label == '维修记录') {
  546. this.Index3()
  547. this.$refs.roomTable4.computedHeight()
  548. } else if (tab.label == '维保记录') {
  549. this.Index4()
  550. this.changeSelect()
  551. this.$refs.roomTable5.computedHeight()
  552. }
  553. },
  554. // 右上角的筛选点击按钮
  555. show() {
  556. this.dialogFormVisible = !this.dialogFormVisible
  557. },
  558. Index(system) {
  559. this.picFloor = this.$cookie.get('floorNow')
  560. let getParams = {
  561. typename: '位置布置图',
  562. location: this.location,
  563. module: '1002',
  564. // system: system,
  565. plazaId: this.plazaId
  566. }
  567. if (system) {
  568. getParams.system = system
  569. }
  570. queryPic({ getParams }).then(res => {
  571. //console.log('机房布置图', res)
  572. this.tableImg = res.data ? res.data : []
  573. //判断有没有图片,有图片默认显示按钮是第一个tab,没有图片显示的是第二个tab
  574. if (this.tableImg.length > 0) {
  575. this.activeName = '1'
  576. } else if (this.showLocationflid) {
  577. this.activeName = '2'
  578. this.Index1()
  579. } else {
  580. this.activeName = '3'
  581. this.Index2()
  582. }
  583. })
  584. },
  585. // 明细表
  586. Index1() {
  587. let getParams = {
  588. location: this.location,
  589. plazaId: this.plazaId,
  590. page: this.page1,
  591. size: this.size1
  592. }
  593. if (this.floor2 && this.floor2 != '全部') {
  594. getParams.floor = this.floor2
  595. }
  596. if (this.ctbhInput) {
  597. if (getParams.keyword) {
  598. getParams.keyword = `${getParams.keyword + ';' + this.ctbhInput}:drawernum`
  599. } else {
  600. getParams.keyword = `${this.ctbhInput}:drawernum`
  601. }
  602. }
  603. if (this.cxggInput) {
  604. if (getParams.keyword) {
  605. getParams.keyword = `${getParams.keyword + ';' + this.cxggInput}:outspec`
  606. } else {
  607. getParams.keyword = `${this.cxggInput}:outspec`
  608. }
  609. }
  610. if (this.djbhInput) {
  611. if (getParams.keyword) {
  612. getParams.keyword = `${getParams.keyword + ';' + this.djbhInput}:wellnum`
  613. } else {
  614. getParams.keyword = `${this.djbhInput}:wellnum`
  615. }
  616. }
  617. if (this.kzhlInput) {
  618. if (getParams.keyword) {
  619. getParams.keyword = `${getParams.keyword + ';' + this.kzhlInput}:control`
  620. } else {
  621. getParams.keyword = `${this.kzhlInput}:control`
  622. }
  623. }
  624. queryDygjcxline({ getParams }).then(res => {
  625. if (res.result == 'success') {
  626. this.loading1 = false
  627. this.total1 = res.count
  628. this.table2 = res.data ? res.data : []
  629. //console.log('明细表', res)
  630. if (this.table2.length == 0) {
  631. }
  632. }
  633. })
  634. },
  635. // 核心设备
  636. Index2() {
  637. let postParams = {
  638. location: this.location
  639. }
  640. let data = {
  641. plazaId: this.plazaId,
  642. page: this.page2,
  643. size: this.size2
  644. }
  645. if (this.sbjcInput) {
  646. if (data.keyword) {
  647. data.keyword = `${data.keyword + ';' + this.sbjcInput}:type_name`
  648. } else {
  649. data.keyword = `${this.sbjcInput}:type_name`
  650. }
  651. }
  652. if (this.ppxhInput) {
  653. if (data.keyword) {
  654. data.keyword = `${data.keyword + ';' + this.ppxhInput}:brand,sbxh`
  655. } else {
  656. data.keyword = `${this.ppxhInput}:brand,sbxh`
  657. }
  658. }
  659. if (this.sccsInput) {
  660. if (data.keyword) {
  661. data.keyword = `${data.keyword + ';' + this.sccsInput}:manufacturer`
  662. } else {
  663. data.keyword = `${this.sccsInput}:manufacturer`
  664. }
  665. }
  666. // if (this.floorChange) {
  667. // postParams.gname = this.floorChange
  668. // }
  669. queryHxsb({ data, postParams }).then(res => {
  670. this.loading2 = false
  671. this.total2 = res.data.count
  672. this.table3 = res.data.data ? res.data.data : []
  673. })
  674. },
  675. Index1Emit(val) {
  676. this.page1 = val
  677. this.Index1()
  678. },
  679. Index2Emit(val) {
  680. this.page2 = val
  681. this.Index2()
  682. },
  683. Index3Emit(val) {
  684. this.page3 = val
  685. this.Index3()
  686. },
  687. Index4Emit(val) {
  688. this.page4 = val
  689. this.Index4()
  690. },
  691. // 机房维修记录
  692. Index3() {
  693. let getParams = {
  694. location: this.location,
  695. plazaId: this.plazaId,
  696. page: this.page3,
  697. size: this.size3,
  698. orderBy: 'sjjssj,0;location,1'
  699. }
  700. if (this.sfghSelect) {
  701. getParams.ismodel = this.sfghSelect
  702. }
  703. // 设备名称、编号
  704. if (this.sbmcInput4) {
  705. if (getParams.keyword) {
  706. getParams.keyword = `${getParams.keyword + ';' + this.sbmcInput4}:sbmc`
  707. } else {
  708. getParams.keyword = `${this.sbmcInput4}:sbmc,location`
  709. }
  710. }
  711. // 重要事项记录、描述
  712. if (this.zysxInput4) {
  713. if (getParams.keyword) {
  714. getParams.keyword = `${getParams.keyword + ';' + this.zysxInput4}:matters`
  715. } else {
  716. getParams.keyword = `${this.zysxInput4}:matters,manufacturer`
  717. }
  718. }
  719. // 搜索工单编号
  720. if (this.gdbhInput4) {
  721. if (getParams.keyword) {
  722. getParams.keyword = `${getParams.keyword + ';' + this.gdbhInput4}:wonum`
  723. } else {
  724. getParams.keyword = `${this.gdbhInput4}:wonum`
  725. }
  726. }
  727. // 填报时间
  728. if (this.tbsjDate) {
  729. getParams.reportedbyStartDate = this.tbsjDate[0] + '000000'
  730. getParams.reportedbyEndDate = this.tbsjDate[1] + '000000'
  731. }
  732. // 验收时间
  733. if (this.yssjDate) {
  734. getParams.sjjssjStartDate = this.yssjDate[0] + '000000'
  735. getParams.sjjssjEndDate = this.yssjDate[1] + '000000'
  736. }
  737. queryWxjf({ getParams }).then(res => {
  738. //console.log('维修', res)
  739. if (res.result == 'success') {
  740. this.loading3 = false
  741. this.total3 = res.count
  742. this.table4 = res.data ? res.data : []
  743. }
  744. })
  745. },
  746. // 机房维保记录
  747. Index4() {
  748. let postParams = {}
  749. let data = {
  750. location: this.location,
  751. plazaId: this.plazaId,
  752. page: this.page4,
  753. size: this.size4,
  754. orderBy: 'wb_gzglid,0;assetnum,1;reportedby,0;'
  755. }
  756. //
  757. // 任务开始日期
  758. if (this.rwksrq) {
  759. data.sjkssjStartDate = this.rwksrq[0] + '000000'
  760. data.sjkssjEndDate = this.rwksrq[1] + '000000'
  761. }
  762. // 任务完成日期
  763. if (this.rwwcrq) {
  764. data.sjwcsjStartDate = this.rwwcrq[0] + '000000'
  765. data.sjwcsjEndDate = this.rwwcrq[1] + '000000'
  766. }
  767. // 异常工单填报时间
  768. if (this.ycgdtbsj) {
  769. data.reportdateStartDate = this.ycgdtbsj[0] + '000000'
  770. data.reportdateEndDate = this.ycgdtbsj[1] + '000000'
  771. }
  772. // 异常工单验收时间
  773. if (this.ycgdyssj) {
  774. data.sjjssjStartDate = this.ycgdyssj[0] + '000000'
  775. data.sjjssjEndDate = this.ycgdyssj[1] + '000000'
  776. }
  777. //
  778. // 是否正常
  779. if (this.iszcSelect5) {
  780. data.zt = this.iszcSelect5
  781. }
  782. // 任务状态
  783. if (this.statuSelect5) {
  784. data.status = this.statuSelect5
  785. }
  786. if (this.sbmcInput5) {
  787. if (data.keyword) {
  788. data.keyword = `${data.keyword + ';' + this.sbmcInput5}:sbmc,assetnum`
  789. } else {
  790. data.keyword = `${this.sbmcInput5}:sbmc,assetnum`
  791. }
  792. }
  793. if (this.wbsxjlInput5) {
  794. if (data.keyword) {
  795. data.keyword = `${data.keyword + ';' + this.wbsxjlInput5}:matters`
  796. } else {
  797. data.keyword = `${this.wbsxjlInput5}:matters,description`
  798. }
  799. }
  800. if (this.rwbhInput5) {
  801. if (data.keyword) {
  802. data.keyword = `${data.keyword + ';' + this.rwbhInput5}:wb_gzglid`
  803. } else {
  804. data.keyword = `${this.rwbhInput5}:wb_gzglid`
  805. }
  806. }
  807. if (this.ycgdbhInput5) {
  808. if (data.keyword) {
  809. data.keyword = `${data.keyword + ';' + this.ycgdbhInput5}:wonum`
  810. } else {
  811. data.keyword = `${this.ycgdbhInput5}:wonum`
  812. }
  813. }
  814. queryWb({ data, postParams }).then(res => {
  815. //console.log('维保', res)
  816. this.loading4 = false
  817. this.total4 = res.data.count
  818. this.table5 = res.data.data ? res.data.data : []
  819. })
  820. },
  821. confirm() {
  822. this.Index3()
  823. },
  824. confirm2() {
  825. this.Index4()
  826. },
  827. // 下拉框数据
  828. changeSelect() {
  829. this.department = []
  830. let postParams = [
  831. {
  832. columnName: { status: 'status', zt: 'zt' },
  833. tableName: 'sms_wbzy'
  834. }
  835. ]
  836. let data = {
  837. plazaId: this.plazaId
  838. }
  839. querySelect({ data, postParams }).then(res => {
  840. //console.log('下拉框', res)
  841. let status = [],
  842. zt = []
  843. status = res.data.data.sms_wbzy.status ? res.data.data.sms_wbzy.status : []
  844. zt = res.data.data.sms_wbzy.zt ? res.data.data.sms_wbzy.zt : []
  845. if (status.length > 0) {
  846. status.forEach(el => {
  847. let obj = {
  848. id: el.key,
  849. name: el.value
  850. }
  851. this.status.push(obj)
  852. })
  853. }
  854. if (zt.length > 0) {
  855. zt.forEach(el => {
  856. let obj = {
  857. id: el.key,
  858. name: el.value == '正常' ? '是' : '否'
  859. }
  860. this.zt.push(obj)
  861. })
  862. }
  863. })
  864. },
  865. // 查询楼层功能下的机房属于哪类设备
  866. init() {
  867. this.smsxtArr = {}
  868. let params = {
  869. getParams: {
  870. locationid: this.location,
  871. plazaId: this.plazaId
  872. }
  873. }
  874. querySystem(params).then(res => {
  875. this.smsxtArr = res.data ? res.data[0] : {}
  876. // 5201 设备间 5204设备间 5209设备间
  877. this.showLocationflid = false
  878. if (Object.keys(this.smsxtArr).length > 0) {
  879. let locationflid = this.smsxtArr.locationflid
  880. if (locationflid == '5201' || locationflid == '5204' || locationflid == '5209') {
  881. this.showLocationflid = true
  882. }
  883. }
  884. this.Index(this.smsxtArr.smsxt)
  885. this.content = `查看${this.$cookie.get('floorNow')}层${this.smsxtArr.smsxtname}分布图`
  886. })
  887. },
  888. // 打开机房弹框
  889. open(name) {
  890. this.visible = true
  891. this.systemName = name.name
  892. this.location = name.location
  893. this.type = name.type
  894. if (name.type == 'floor') {
  895. this.init()
  896. } else if (name.type == 'system') {
  897. let floor = this.$cookie.get('floorNow')
  898. this.content = `查看${floor}层楼层功能图`
  899. this.Index(null)
  900. }
  901. },
  902. // 机房右上角的跳转 如果是在楼层功能打开的机房则要跳转到设备设施对应的系统\楼层 反之亦然
  903. jumpFloor() {
  904. // if (this.smsxtArr.smsxt) {
  905. if (location.pathname.split('/')[3] == 'equipment') {
  906. this.$router.push({ path: '/home/floorFunc' })
  907. } else {
  908. this.$router.push({ path: '/home/equipment', query: { smsxt: this.smsxtArr.smsxt } })
  909. }
  910. // }
  911. }
  912. },
  913. mounted() {
  914. if (this.floorSelect.length > 0) {
  915. this.floorSelect2 = this.allArr.concat(this.floorSelect)
  916. }
  917. }
  918. }
  919. </script>
  920. <style lang="less" scoped>
  921. .compute-box {
  922. /deep/ .el-dialog__title {
  923. color: #fff;
  924. }
  925. .compute-zf {
  926. width: 15px;
  927. height: 13px;
  928. background: url('../../assets/imgs/zffz.png');
  929. background-repeat: no-repeat;
  930. background-size: 100% 100%;
  931. position: absolute;
  932. right: 74px;
  933. top: 24px;
  934. cursor: pointer;
  935. &::after {
  936. content: '';
  937. position: absolute;
  938. top: -2px;
  939. right: -16px;
  940. width: 1px;
  941. height: 15px;
  942. background: rgba(216, 216, 216, 1);
  943. }
  944. }
  945. .picker-box {
  946. display: flex;
  947. align-items: center;
  948. background: #fff;
  949. padding: 0 6px;
  950. border: 1px solid #dcdfe6;
  951. border-radius: 4px;
  952. height: 32px;
  953. box-sizing: border-box;
  954. margin-right: 12px;
  955. .picker-span {
  956. margin-right: 6px;
  957. color: rgba(0, 0, 0, 0.65);
  958. }
  959. }
  960. .compute-span {
  961. width: 100%;
  962. height: 1px;
  963. background: rgba(0, 0, 0, 0.06);
  964. margin-bottom: 20px;
  965. }
  966. .compute-center {
  967. display: flex;
  968. align-items: center;
  969. margin-bottom: 12px;
  970. }
  971. //
  972. .dialog-none {
  973. width: 100px;
  974. position: absolute;
  975. right: 0;
  976. .input-dialog {
  977. .input-dialog-top {
  978. color: #c3c7cb;
  979. cursor: pointer;
  980. position: absolute;
  981. top: -45px;
  982. right: 0px;
  983. }
  984. .input-dialog-form {
  985. padding: 20px 24px;
  986. background: rgba(255, 255, 255, 1);
  987. border-radius: 4px;
  988. border: 1px solid rgba(195, 199, 203, 1);
  989. z-index: 99999;
  990. position: absolute;
  991. top: -20px;
  992. right: 0px;
  993. }
  994. .input-dialog-p {
  995. margin-bottom: 8px;
  996. font-size: 14px;
  997. font-family: MicrosoftYaHei;
  998. color: rgba(100, 108, 115, 1);
  999. line-height: 22px;
  1000. }
  1001. .input-dialog-p2 {
  1002. margin-bottom: 16px;
  1003. }
  1004. }
  1005. .input-dialog-foot {
  1006. // margin-bottom: 16px;
  1007. display: flex;
  1008. justify-content: flex-end;
  1009. }
  1010. }
  1011. .compute-tab {
  1012. padding-top: 16px;
  1013. height: 100%;
  1014. }
  1015. }
  1016. </style>
  1017. <style lang="less">
  1018. .compute-box {
  1019. .el-dialog__header {
  1020. padding: 16px 24px;
  1021. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  1022. }
  1023. .el-dialog__headerbtn .el-dialog__close {
  1024. color: #fff;
  1025. }
  1026. /deep/ .el-dialog__body {
  1027. padding: 0 24px;
  1028. height: calc(100% - 57px);
  1029. .is-active {
  1030. background: rgba(2, 91, 170, 0.15);
  1031. }
  1032. }
  1033. .compute-tab {
  1034. /deep/ .el-dialog {
  1035. // padding: 16px 20px 20px;
  1036. overflow: hidden;
  1037. .el-dialog__header {
  1038. padding: 0;
  1039. font-size: 16px;
  1040. font-family: PingFangSC-Medium, PingFang SC;
  1041. font-weight: 500;
  1042. // color: rgba(0, 0, 0, 0.85);
  1043. height: 60px;
  1044. line-height: 60px;
  1045. // background: #f1f2f2;
  1046. padding-left: 20px;
  1047. // padding-bottom: 16px;
  1048. }
  1049. .el-dialog__headerbtn {
  1050. top: 0;
  1051. }
  1052. }
  1053. .el-dialog__title {
  1054. font-size: 16px;
  1055. font-family: PingFangSC-Medium, PingFang SC;
  1056. font-weight: 500;
  1057. color: #ffffff;
  1058. line-height: 60px;
  1059. }
  1060. .el-dialog__body {
  1061. padding: 0 24px;
  1062. }
  1063. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  1064. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  1065. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  1066. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  1067. padding-left: 16px;
  1068. }
  1069. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  1070. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  1071. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  1072. .el-tabs--top .el-tabs__item.is-top:last-child {
  1073. padding-right: 16px;
  1074. }
  1075. .el-tabs__nav-wrap::after {
  1076. height: 0;
  1077. }
  1078. .el-tabs__item {
  1079. padding: 5px 16px;
  1080. height: 30px;
  1081. line-height: 22px;
  1082. font-size: 14px;
  1083. font-family: MicrosoftYaHei;
  1084. color: rgba(31, 36, 41, 1);
  1085. border: 1px solid rgba(195, 199, 203, 1);
  1086. }
  1087. /deep/ .el-tabs__item:last-child {
  1088. border-radius: 0px 4px 4px 0px;
  1089. }
  1090. /deep/ .el-tabs__item:nth-child(2) {
  1091. border-radius: 4px 0px 0px 4px;
  1092. }
  1093. .el-tabs {
  1094. height: 100%;
  1095. }
  1096. .el-tabs__content {
  1097. height: calc(100% - 45px);
  1098. /deep/ .el-tab-pane {
  1099. height: 100% !important;
  1100. .compute-item {
  1101. height: calc(100% - 44px);
  1102. .compute-table {
  1103. height: calc(100% - 71px);
  1104. }
  1105. }
  1106. }
  1107. }
  1108. .el-tabs__active-bar {
  1109. background-color: transparent !important;
  1110. }
  1111. .is-active {
  1112. color: #025baa;
  1113. border-color: #025baa;
  1114. }
  1115. .compute-table {
  1116. .el-table td,
  1117. .el-table th {
  1118. padding: 8px 0;
  1119. }
  1120. }
  1121. }
  1122. .el-input--suffix .el-input__inner {
  1123. padding-right: 20px;
  1124. }
  1125. .el-dialog__wrapper {
  1126. transition-duration: 0.3s;
  1127. }
  1128. .dialog-fade-enter-active {
  1129. animation: none !important;
  1130. }
  1131. .dialog-fade-leave-active {
  1132. transition-duration: 0.15s !important;
  1133. animation: none !important;
  1134. }
  1135. .dialog-fade-enter-active .el-dialog,
  1136. .dialog-fade-leave-active .el-dialog {
  1137. animation-fill-mode: forwards;
  1138. }
  1139. .dialog-fade-enter-active .el-dialog {
  1140. animation-duration: 0.3s;
  1141. animation-name: anim-open;
  1142. animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  1143. }
  1144. .dialog-fade-leave-active .el-dialog {
  1145. animation-duration: 0.3s;
  1146. animation-name: anim-close;
  1147. }
  1148. @keyframes anim-open {
  1149. 0% {
  1150. opacity: 0;
  1151. transform: scale3d(0, 0, 1);
  1152. }
  1153. 100% {
  1154. opacity: 1;
  1155. transform: scale3d(1, 1, 1);
  1156. }
  1157. }
  1158. @keyframes anim-close {
  1159. 0% {
  1160. opacity: 1;
  1161. }
  1162. 100% {
  1163. opacity: 0;
  1164. transform: scale3d(0.5, 0.5, 1);
  1165. }
  1166. }
  1167. .picker-box {
  1168. .el-input__inner {
  1169. border: none;
  1170. }
  1171. .el-range-editor.el-input__inner {
  1172. padding: 3px 0px;
  1173. }
  1174. .el-icon-date {
  1175. display: none;
  1176. }
  1177. .el-range__close-icon {
  1178. position: absolute;
  1179. right: 0px;
  1180. top: 2px;
  1181. }
  1182. .el-range-editor--mini .el-range-input {
  1183. font-size: 14px;
  1184. color: rgb(31, 36, 41);
  1185. }
  1186. }
  1187. }
  1188. // compute-tab 1366px适配
  1189. // @media screen and (max-width: 1366px) {
  1190. // // 表格高度设置
  1191. // .compute-tab {
  1192. // .el-tabs,
  1193. // .el-tabs__content {
  1194. // height: 470px !important;
  1195. // }
  1196. // // 机房内核心设备 padding设置
  1197. // #pane-3 {
  1198. // .compute-table .el-table td,
  1199. // .compute-box .compute-table .el-table th {
  1200. // padding: 3px 0 !important;
  1201. // }
  1202. // }
  1203. // // 维修记录,维保记录 padding设置
  1204. // #pane-4,
  1205. // #pane-5 {
  1206. // .compute-table .el-table td,
  1207. // .compute-box .compute-table .el-table th {
  1208. // padding: 0 !important;
  1209. // }
  1210. // }
  1211. // }
  1212. // }
  1213. @media screen and (max-width: 1600px) {
  1214. // 表格高度设置
  1215. // .compute-tab {
  1216. // .el-tabs,
  1217. // .el-tabs__content {
  1218. // height: 600px !important;
  1219. // }
  1220. // }
  1221. .compute-box .compute-tab .compute-table .el-table td {
  1222. padding: 4px 0;
  1223. }
  1224. }
  1225. </style>