index.vue 43 KB

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