index.vue 48 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249
  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) && smsxtArr.smsxt!="0000")||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: '全部', name: '全部' },
  493. { id: '1', name: '是' },
  494. { id: '0', name: '否' },
  495. ],
  496. sfghSelect: '全部',
  497. sbmcInput4: '',
  498. sbbhInput4: '',
  499. zysxInput4: '',
  500. msInput4: '',
  501. gdbhInput4: '',
  502. type1: 'wx',
  503. //
  504. total4: 0,
  505. page4: 1,
  506. size4: 11,
  507. searVal: '',
  508. status: [],
  509. allArr: [{ id: '全部', name: '全部' }],
  510. zt: [],
  511. sbmcInput5: '',
  512. sbbhInput5: '',
  513. wbsxjlInput5: '',
  514. rwbhInput5: '',
  515. ycgdbhInput5: '',
  516. ssmsInput5: '',
  517. iszcSelect5: '全部',
  518. statuSelect5: '全部',
  519. rwksrq: '',
  520. rwwcrq: '',
  521. ycgdtbsj: '',
  522. ycgdyssj: '',
  523. smsxtArr: {},
  524. type: '',
  525. }
  526. },
  527. components: {
  528. roomTable1,
  529. roomTable2,
  530. roomTable3,
  531. roomTable4,
  532. roomTable5,
  533. },
  534. computed: {
  535. ...mapGetters(['floorSelect', 'plazaId']),
  536. },
  537. methods: {
  538. handleClick(tab) {
  539. if (tab.label == '机房布置图') {
  540. this.Index(this.smsxtArr.smsxt)
  541. } else if (tab.label == '配电室低压柜及出线明细表') {
  542. this.Index1()
  543. this.$refs.roomTable2.computedHeight()
  544. } else if (tab.label == '机房内核心设备') {
  545. this.Index2()
  546. this.$refs.roomTable3.computedHeight()
  547. } else if (tab.label == '维修记录') {
  548. this.Index3()
  549. this.$refs.roomTable4.computedHeight()
  550. } else if (tab.label == '维保记录') {
  551. this.Index4()
  552. this.changeSelect()
  553. this.$refs.roomTable5.computedHeight()
  554. }
  555. },
  556. // 右上角的筛选点击按钮
  557. show() {
  558. this.dialogFormVisible = !this.dialogFormVisible
  559. },
  560. Index(system) {
  561. this.picFloor = this.$cookie.get('floorNow')
  562. let getParams = {
  563. typename: '位置布置图',
  564. location: this.location,
  565. module: '1002',
  566. // system: system,
  567. plazaId: this.plazaId,
  568. }
  569. if (system) {
  570. getParams.system = system
  571. }
  572. queryPic({ getParams }).then((res) => {
  573. //console.log('机房布置图', res)
  574. this.tableImg = res.data ? res.data : []
  575. //判断有没有图片,有图片默认显示按钮是第一个tab,没有图片显示的是第二个tab
  576. if (this.tableImg.length > 0) {
  577. this.activeName = '1'
  578. } else if (this.showLocationflid) {
  579. this.activeName = '2'
  580. this.Index1()
  581. } else {
  582. this.activeName = '3'
  583. this.Index2()
  584. }
  585. })
  586. },
  587. // 明细表
  588. Index1() {
  589. let getParams = {
  590. location: this.location,
  591. plazaId: this.plazaId,
  592. page: this.page1,
  593. size: this.size1,
  594. }
  595. if (this.floor2 && this.floor2 != '全部') {
  596. getParams.floor = this.floor2
  597. }
  598. if (this.ctbhInput) {
  599. if (getParams.keyword) {
  600. getParams.keyword = `${getParams.keyword + ';' + this.ctbhInput}:drawernum`
  601. } else {
  602. getParams.keyword = `${this.ctbhInput}:drawernum`
  603. }
  604. }
  605. if (this.cxggInput) {
  606. if (getParams.keyword) {
  607. getParams.keyword = `${getParams.keyword + ';' + this.cxggInput}:outspec`
  608. } else {
  609. getParams.keyword = `${this.cxggInput}:outspec`
  610. }
  611. }
  612. if (this.djbhInput) {
  613. if (getParams.keyword) {
  614. getParams.keyword = `${getParams.keyword + ';' + this.djbhInput}:wellnum`
  615. } else {
  616. getParams.keyword = `${this.djbhInput}:wellnum`
  617. }
  618. }
  619. if (this.kzhlInput) {
  620. if (getParams.keyword) {
  621. getParams.keyword = `${getParams.keyword + ';' + this.kzhlInput}:control`
  622. } else {
  623. getParams.keyword = `${this.kzhlInput}:control`
  624. }
  625. }
  626. queryDygjcxline({ getParams }).then((res) => {
  627. if (res.result == 'success') {
  628. this.loading1 = false
  629. this.total1 = res.count
  630. this.table2 = res.data ? res.data : []
  631. //console.log('明细表', res)
  632. if (this.table2.length == 0) {
  633. }
  634. }
  635. })
  636. },
  637. // 核心设备
  638. Index2() {
  639. let postParams = {
  640. location: this.location,
  641. }
  642. let data = {
  643. plazaId: this.plazaId,
  644. page: this.page2,
  645. size: this.size2,
  646. }
  647. if (this.sbjcInput) {
  648. if (data.keyword) {
  649. data.keyword = `${data.keyword + ';' + this.sbjcInput}:type_name`
  650. } else {
  651. data.keyword = `${this.sbjcInput}:type_name`
  652. }
  653. }
  654. if (this.ppxhInput) {
  655. if (data.keyword) {
  656. data.keyword = `${data.keyword + ';' + this.ppxhInput}:brand,sbxh`
  657. } else {
  658. data.keyword = `${this.ppxhInput}:brand,sbxh`
  659. }
  660. }
  661. if (this.sccsInput) {
  662. if (data.keyword) {
  663. data.keyword = `${data.keyword + ';' + this.sccsInput}:manufacturer`
  664. } else {
  665. data.keyword = `${this.sccsInput}:manufacturer`
  666. }
  667. }
  668. // if (this.floorChange) {
  669. // postParams.gcname = this.floorChange
  670. // }
  671. queryHxsb({ data, postParams }).then((res) => {
  672. this.loading2 = false
  673. this.total2 = res.data.count
  674. this.table3 = res.data.data ? res.data.data : []
  675. })
  676. },
  677. Index1Emit(val) {
  678. this.page1 = val
  679. this.Index1()
  680. },
  681. Index2Emit(val) {
  682. this.page2 = val
  683. this.Index2()
  684. },
  685. Index3Emit(val) {
  686. this.page3 = val
  687. this.Index3()
  688. },
  689. Index4Emit(val) {
  690. this.page4 = val
  691. this.Index4()
  692. },
  693. // 机房维修记录
  694. Index3() {
  695. let getParams = {
  696. location: this.location,
  697. plazaId: this.plazaId,
  698. page: this.page3,
  699. size: this.size3,
  700. orderBy: 'sjjssj,0;location,1',
  701. }
  702. if (this.sfghSelect && this.sfghSelect != '全部') {
  703. getParams.ismodel = this.sfghSelect
  704. }
  705. // 设备名称、编号
  706. if (this.sbmcInput4) {
  707. if (getParams.keyword) {
  708. getParams.keyword = `${getParams.keyword + ';' + this.sbmcInput4}:sbmc`
  709. } else {
  710. getParams.keyword = `${this.sbmcInput4}:sbmc,location`
  711. }
  712. }
  713. // 重要事项记录、描述
  714. if (this.zysxInput4) {
  715. if (getParams.keyword) {
  716. getParams.keyword = `${getParams.keyword + ';' + this.zysxInput4}:matters`
  717. } else {
  718. getParams.keyword = `${this.zysxInput4}:matters,manufacturer`
  719. }
  720. }
  721. // 搜索工单编号
  722. if (this.gdbhInput4) {
  723. if (getParams.keyword) {
  724. getParams.keyword = `${getParams.keyword + ';' + this.gdbhInput4}:wonum`
  725. } else {
  726. getParams.keyword = `${this.gdbhInput4}:wonum`
  727. }
  728. }
  729. // 填报时间
  730. if (this.tbsjDate) {
  731. getParams.reportedbyStartDate = this.tbsjDate[0] + '000000'
  732. getParams.reportedbyEndDate = this.tbsjDate[1] + '000000'
  733. }
  734. // 验收时间
  735. if (this.yssjDate) {
  736. getParams.sjjssjStartDate = this.yssjDate[0] + '000000'
  737. getParams.sjjssjEndDate = this.yssjDate[1] + '000000'
  738. }
  739. queryWxjf({ getParams }).then((res) => {
  740. //console.log('维修', res)
  741. if (res.result == 'success') {
  742. this.loading3 = false
  743. this.total3 = res.count
  744. this.table4 = res.data ? res.data : []
  745. }
  746. })
  747. },
  748. // 机房维保记录
  749. Index4() {
  750. let postParams = {}
  751. let data = {
  752. location: this.location,
  753. plazaId: this.plazaId,
  754. page: this.page4,
  755. size: this.size4,
  756. orderBy: 'wb_gzglid,0;assetnum,1;reportedby,0;',
  757. }
  758. //
  759. // 任务开始日期
  760. if (this.rwksrq) {
  761. data.sjkssjStartDate = this.rwksrq[0] + '000000'
  762. data.sjkssjEndDate = this.rwksrq[1] + '000000'
  763. }
  764. // 任务完成日期
  765. if (this.rwwcrq) {
  766. data.sjwcsjStartDate = this.rwwcrq[0] + '000000'
  767. data.sjwcsjEndDate = this.rwwcrq[1] + '000000'
  768. }
  769. // 异常工单填报时间
  770. if (this.ycgdtbsj) {
  771. data.reportdateStartDate = this.ycgdtbsj[0] + '000000'
  772. data.reportdateEndDate = this.ycgdtbsj[1] + '000000'
  773. }
  774. // 异常工单验收时间
  775. if (this.ycgdyssj) {
  776. data.sjjssjStartDate = this.ycgdyssj[0] + '000000'
  777. data.sjjssjEndDate = this.ycgdyssj[1] + '000000'
  778. }
  779. //
  780. // 是否正常
  781. if (this.iszcSelect5 && this.iszcSelect5 != '全部') {
  782. data.zt = this.iszcSelect5
  783. }
  784. // 任务状态
  785. if (this.statuSelect5 && this.statuSelect5 != '全部') {
  786. data.status = this.statuSelect5
  787. }
  788. if (this.sbmcInput5) {
  789. if (data.keyword) {
  790. data.keyword = `${data.keyword + ';' + this.sbmcInput5}:sbmc,assetnum`
  791. } else {
  792. data.keyword = `${this.sbmcInput5}:sbmc,assetnum`
  793. }
  794. }
  795. if (this.wbsxjlInput5) {
  796. if (data.keyword) {
  797. data.keyword = `${data.keyword + ';' + this.wbsxjlInput5}:matters`
  798. } else {
  799. data.keyword = `${this.wbsxjlInput5}:matters,description`
  800. }
  801. }
  802. if (this.rwbhInput5) {
  803. if (data.keyword) {
  804. data.keyword = `${data.keyword + ';' + this.rwbhInput5}:wb_gzglid`
  805. } else {
  806. data.keyword = `${this.rwbhInput5}:wb_gzglid`
  807. }
  808. }
  809. if (this.ycgdbhInput5) {
  810. if (data.keyword) {
  811. data.keyword = `${data.keyword + ';' + this.ycgdbhInput5}:wonum`
  812. } else {
  813. data.keyword = `${this.ycgdbhInput5}:wonum`
  814. }
  815. }
  816. queryWb({ data, postParams }).then((res) => {
  817. //console.log('维保', res)
  818. this.loading4 = false
  819. this.total4 = res.data.count
  820. this.table5 = res.data.data ? res.data.data : []
  821. })
  822. },
  823. confirm() {
  824. this.Index3()
  825. },
  826. confirm2() {
  827. this.Index4()
  828. },
  829. // 下拉框数据
  830. changeSelect() {
  831. this.department = []
  832. let postParams = [
  833. {
  834. columnName: { status: 'status', zt: 'zt' },
  835. tableName: 'sms_wbzy',
  836. },
  837. ]
  838. let data = {
  839. plazaId: this.plazaId,
  840. }
  841. querySelect({ data, postParams }).then((res) => {
  842. //console.log('下拉框', res)
  843. let status = [],
  844. zt = [],
  845. arr = [],
  846. arr1 = []
  847. status = res.data.data.sms_wbzy.status ? res.data.data.sms_wbzy.status : []
  848. zt = res.data.data.sms_wbzy.zt ? res.data.data.sms_wbzy.zt : []
  849. if (status.length > 0) {
  850. status.forEach((el) => {
  851. let obj = {
  852. id: el.key,
  853. name: el.value,
  854. }
  855. arr.push(obj)
  856. })
  857. this.status = this.allArr.concat(arr)
  858. console.log(this.status)
  859. }
  860. if (zt.length > 0) {
  861. zt.forEach((el) => {
  862. let obj = {
  863. id: el.key,
  864. name: el.value == '正常' ? '是' : '否',
  865. }
  866. arr1.push(obj)
  867. })
  868. this.zt = this.allArr.concat(arr1)
  869. console.log(this.zt)
  870. }
  871. })
  872. },
  873. // 查询楼层功能下的机房属于哪类设备
  874. init() {
  875. this.smsxtArr = {}
  876. let params = {
  877. getParams: {
  878. locationid: this.location,
  879. plazaId: this.plazaId,
  880. },
  881. }
  882. querySystem(params).then((res) => {
  883. this.smsxtArr = res.data ? res.data[0] : {}
  884. // 5201 设备间 5204设备间 5209设备间
  885. this.showLocationflid = false
  886. if (Object.keys(this.smsxtArr).length > 0) {
  887. let locationflid = this.smsxtArr.locationflid
  888. if (locationflid == '5201' || locationflid == '5204' || locationflid == '5209') {
  889. this.showLocationflid = true
  890. }
  891. }
  892. this.Index(this.smsxtArr.smsxt)
  893. this.content = `查看${this.$cookie.get('floorNow')}层${this.smsxtArr.smsxtname}分布图`
  894. })
  895. },
  896. // 打开机房弹框
  897. open(name) {
  898. this.visible = true
  899. this.systemName = name.name
  900. this.location = name.location
  901. this.type = name.type
  902. if (name.type == 'floor') {
  903. this.init()
  904. } else if (name.type == 'system') {
  905. let floor = this.$cookie.get('floorNow')
  906. this.content = `查看${floor}层楼层功能图`
  907. this.init()
  908. // this.Index(null)
  909. }
  910. },
  911. // 机房右上角的跳转 如果是在楼层功能打开的机房则要跳转到设备设施对应的系统\楼层 反之亦然
  912. jumpFloor() {
  913. // if (this.smsxtArr.smsxt) {
  914. if (location.pathname.split('/')[3] == 'equipment') {
  915. this.$cookie.set('categoryId', 'LCGN', 3)
  916. this.$store.commit('SETCATEGORYID', 'LCGN')
  917. this.$router.push({ path: '/home/floorFunc' })
  918. } else {
  919. this.$router.push({ path: '/home/equipment', query: { smsxt: this.smsxtArr.smsxt } })
  920. }
  921. // }
  922. },
  923. },
  924. mounted() {
  925. if (this.floorSelect.length > 0) {
  926. this.floorSelect2 = this.allArr.concat(this.floorSelect)
  927. }
  928. },
  929. }
  930. </script>
  931. <style lang="less" scoped>
  932. .compute-box {
  933. /deep/ .el-dialog__title {
  934. color: #fff;
  935. }
  936. .compute-zf {
  937. width: 15px;
  938. height: 13px;
  939. background: url('../../assets/imgs/zffz.png');
  940. background-repeat: no-repeat;
  941. background-size: 100% 100%;
  942. position: absolute;
  943. right: 74px;
  944. top: 24px;
  945. cursor: pointer;
  946. &::after {
  947. content: '';
  948. position: absolute;
  949. top: -2px;
  950. right: -16px;
  951. width: 1px;
  952. height: 15px;
  953. background: rgba(216, 216, 216, 1);
  954. }
  955. }
  956. .picker-box {
  957. display: flex;
  958. align-items: center;
  959. background: #fff;
  960. padding: 0 6px;
  961. border: 1px solid #dcdfe6;
  962. border-radius: 4px;
  963. height: 32px;
  964. box-sizing: border-box;
  965. margin-right: 12px;
  966. .picker-span {
  967. margin-right: 6px;
  968. color: rgba(0, 0, 0, 0.65);
  969. }
  970. }
  971. .compute-span {
  972. width: 100%;
  973. height: 1px;
  974. background: rgba(0, 0, 0, 0.06);
  975. margin-bottom: 20px;
  976. }
  977. .compute-center {
  978. display: flex;
  979. align-items: center;
  980. margin-bottom: 12px;
  981. }
  982. //
  983. .dialog-none {
  984. width: 100px;
  985. position: absolute;
  986. right: 0;
  987. .input-dialog {
  988. .input-dialog-top {
  989. color: #c3c7cb;
  990. cursor: pointer;
  991. position: absolute;
  992. top: -45px;
  993. right: 0px;
  994. }
  995. .input-dialog-form {
  996. padding: 20px 24px;
  997. background: rgba(255, 255, 255, 1);
  998. border-radius: 4px;
  999. border: 1px solid rgba(195, 199, 203, 1);
  1000. z-index: 99999;
  1001. position: absolute;
  1002. top: -20px;
  1003. right: 0px;
  1004. }
  1005. .input-dialog-p {
  1006. margin-bottom: 8px;
  1007. font-size: 14px;
  1008. font-family: MicrosoftYaHei;
  1009. color: rgba(100, 108, 115, 1);
  1010. line-height: 22px;
  1011. }
  1012. .input-dialog-p2 {
  1013. margin-bottom: 16px;
  1014. }
  1015. }
  1016. .input-dialog-foot {
  1017. // margin-bottom: 16px;
  1018. display: flex;
  1019. justify-content: flex-end;
  1020. }
  1021. }
  1022. .compute-tab {
  1023. padding-top: 16px;
  1024. height: 100%;
  1025. }
  1026. }
  1027. </style>
  1028. <style lang="less">
  1029. .compute-box {
  1030. .el-dialog__header {
  1031. padding: 16px 24px;
  1032. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  1033. }
  1034. .el-dialog__headerbtn .el-dialog__close {
  1035. color: #fff;
  1036. }
  1037. /deep/ .el-dialog__body {
  1038. padding: 0 24px;
  1039. height: calc(100% - 57px);
  1040. .is-active {
  1041. background: rgba(2, 91, 170, 0.15);
  1042. }
  1043. }
  1044. .compute-tab {
  1045. /deep/ .el-dialog {
  1046. // padding: 16px 20px 20px;
  1047. overflow: hidden;
  1048. .el-dialog__header {
  1049. padding: 0;
  1050. font-size: 16px;
  1051. font-family: PingFangSC-Medium, PingFang SC;
  1052. font-weight: 500;
  1053. // color: rgba(0, 0, 0, 0.85);
  1054. height: 60px;
  1055. line-height: 60px;
  1056. // background: #f1f2f2;
  1057. padding-left: 20px;
  1058. // padding-bottom: 16px;
  1059. }
  1060. .el-dialog__headerbtn {
  1061. top: 0;
  1062. }
  1063. }
  1064. .el-dialog__title {
  1065. font-size: 16px;
  1066. font-family: PingFangSC-Medium, PingFang SC;
  1067. font-weight: 500;
  1068. color: #ffffff;
  1069. line-height: 60px;
  1070. }
  1071. .el-dialog__body {
  1072. padding: 0 24px;
  1073. }
  1074. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  1075. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  1076. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  1077. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  1078. padding-left: 16px;
  1079. }
  1080. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  1081. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  1082. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  1083. .el-tabs--top .el-tabs__item.is-top:last-child {
  1084. padding-right: 16px;
  1085. }
  1086. .el-tabs__nav-wrap::after {
  1087. height: 0;
  1088. }
  1089. .el-tabs__item {
  1090. padding: 5px 16px;
  1091. height: 30px;
  1092. line-height: 22px;
  1093. font-size: 14px;
  1094. font-family: MicrosoftYaHei;
  1095. color: rgba(31, 36, 41, 1);
  1096. border: 1px solid rgba(195, 199, 203, 1);
  1097. }
  1098. /deep/ .el-tabs__item:last-child {
  1099. border-radius: 0px 4px 4px 0px;
  1100. }
  1101. /deep/ .el-tabs__item:nth-child(2) {
  1102. border-radius: 4px 0px 0px 4px;
  1103. }
  1104. .el-tabs {
  1105. height: 100%;
  1106. }
  1107. .el-tabs__content {
  1108. height: calc(100% - 45px);
  1109. /deep/ .el-tab-pane {
  1110. height: 100% !important;
  1111. .compute-item {
  1112. height: calc(100% - 44px);
  1113. .compute-table {
  1114. height: calc(100% - 71px);
  1115. }
  1116. }
  1117. }
  1118. }
  1119. .el-tabs__active-bar {
  1120. background-color: transparent !important;
  1121. }
  1122. .is-active {
  1123. color: #025baa;
  1124. border-color: #025baa;
  1125. }
  1126. .compute-table {
  1127. .el-table td,
  1128. .el-table th {
  1129. padding: 8px 0;
  1130. }
  1131. }
  1132. }
  1133. .el-input--suffix .el-input__inner {
  1134. padding-right: 20px;
  1135. }
  1136. .el-dialog__wrapper {
  1137. transition-duration: 0.3s;
  1138. }
  1139. .dialog-fade-enter-active {
  1140. animation: none !important;
  1141. }
  1142. .dialog-fade-leave-active {
  1143. transition-duration: 0.15s !important;
  1144. animation: none !important;
  1145. }
  1146. .dialog-fade-enter-active .el-dialog,
  1147. .dialog-fade-leave-active .el-dialog {
  1148. animation-fill-mode: forwards;
  1149. }
  1150. .dialog-fade-enter-active .el-dialog {
  1151. animation-duration: 0.3s;
  1152. animation-name: anim-open;
  1153. animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  1154. }
  1155. .dialog-fade-leave-active .el-dialog {
  1156. animation-duration: 0.3s;
  1157. animation-name: anim-close;
  1158. }
  1159. @keyframes anim-open {
  1160. 0% {
  1161. opacity: 0;
  1162. transform: scale3d(0, 0, 1);
  1163. }
  1164. 100% {
  1165. opacity: 1;
  1166. transform: scale3d(1, 1, 1);
  1167. }
  1168. }
  1169. @keyframes anim-close {
  1170. 0% {
  1171. opacity: 1;
  1172. }
  1173. 100% {
  1174. opacity: 0;
  1175. transform: scale3d(0.5, 0.5, 1);
  1176. }
  1177. }
  1178. .picker-box {
  1179. .el-input__inner {
  1180. border: none;
  1181. }
  1182. .el-range-editor.el-input__inner {
  1183. padding: 3px 0px;
  1184. }
  1185. .el-icon-date {
  1186. display: none;
  1187. }
  1188. .el-range__close-icon {
  1189. position: absolute;
  1190. right: 0px;
  1191. top: 2px;
  1192. }
  1193. .el-range-editor--mini .el-range-input {
  1194. font-size: 14px;
  1195. color: rgb(31, 36, 41);
  1196. }
  1197. }
  1198. }
  1199. // compute-tab 1366px适配
  1200. // @media screen and (max-width: 1366px) {
  1201. // // 表格高度设置
  1202. // .compute-tab {
  1203. // .el-tabs,
  1204. // .el-tabs__content {
  1205. // height: 470px !important;
  1206. // }
  1207. // // 机房内核心设备 padding设置
  1208. // #pane-3 {
  1209. // .compute-table .el-table td,
  1210. // .compute-box .compute-table .el-table th {
  1211. // padding: 3px 0 !important;
  1212. // }
  1213. // }
  1214. // // 维修记录,维保记录 padding设置
  1215. // #pane-4,
  1216. // #pane-5 {
  1217. // .compute-table .el-table td,
  1218. // .compute-box .compute-table .el-table th {
  1219. // padding: 0 !important;
  1220. // }
  1221. // }
  1222. // }
  1223. // }
  1224. @media screen and (max-width: 1600px) {
  1225. // 表格高度设置
  1226. // .compute-tab {
  1227. // .el-tabs,
  1228. // .el-tabs__content {
  1229. // height: 600px !important;
  1230. // }
  1231. // }
  1232. .compute-box .compute-tab .compute-table .el-table td {
  1233. padding: 4px 0;
  1234. }
  1235. }
  1236. </style>