index.vue 43 KB

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