index.vue 43 KB

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