1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.06.08
- *@info 机房信息主页
- */
- <template>
- <div class='compute-box'>
- <el-dialog :title='`${systemName}`||"机房"' :visible.sync='visible' :fullscreen='true'>
- <div class='compute-span'></div>
- <el-tooltip class='item' effect='dark' :content='content' placement='top'>
- <div class='compute-zf' @click='jumpFloor'></div>
- </el-tooltip>
- <div class='compute-tab'>
- <el-tabs v-model='activeName' @tab-click='handleClick' ref='elTabs'>
- <el-tab-pane label='机房布置图' name='1' v-if='tableImg.length>0'>
- <room-table1 v-if='tableImg.length>=0' :tableImg='tableImg'></room-table1>
- </el-tab-pane>
- <el-tab-pane label='配电室低压柜及出线明细表' name='2' v-if='systemName=="配电室机房"'>
- <div class='compute-center'>
- <Select
- width='200'
- @change='Index1'
- v-model='floor2'
- tipPlace='top'
- caption='楼层:'
- :selectdata='floorSelect'
- :placeholder='"请选择"'
- style='margin-right:12px'
- ></Select>
- <el-input
- clearable
- @change='Index1'
- v-model='ctbhInput'
- placeholder='搜索抽屉编号'
- size='small'
- prefix-icon='el-icon-search'
- style='width:200px;margin-right:12px'
- ></el-input>
- <el-input
- clearable
- @change='Index1'
- v-model='cxggInput'
- placeholder='搜索出线规格'
- size='small'
- prefix-icon='el-icon-search'
- style='width:200px;margin-right:12px'
- ></el-input>
- <el-input
- clearable
- @change='Index1'
- v-model='djbhInput'
- placeholder='搜索电井编号'
- size='small'
- prefix-icon='el-icon-search'
- style='width:200px;margin-right:12px'
- ></el-input>
- <el-input
- clearable
- @change='Index1'
- v-model='kzhlInput'
- placeholder='搜索控制回路'
- size='small'
- prefix-icon='el-icon-search'
- style='width:200px;margin-right:12px'
- ></el-input>
- </div>
- <room-table2
- v-if='table2.length>=0'
- :table2='table2'
- :loading='loading1'
- :page='page1'
- :total='total1'
- :size='size1'
- @Index1Emit='Index1Emit'
- ></room-table2>
- </el-tab-pane>
- <el-tab-pane label='机房内核心设备' name='3'>
- <div class='compute-center'>
- <el-input
- clearable
- placeholder='搜索设备简称'
- size='small'
- prefix-icon='el-icon-search'
- v-model='sbjcInput'
- @change='Index2'
- style='width:200px;margin-right:12px'
- ></el-input>
- <el-input
- clearable
- @change='Index2'
- placeholder='搜索品牌、型号'
- size='small'
- prefix-icon='el-icon-search'
- v-model='ppxhInput'
- style='width:200px;margin-right:12px'
- ></el-input>
- <Select
- width='200'
- @change='Index2'
- tipPlace='top'
- v-model='floorChange'
- caption='楼层:'
- :selectdata='floorSelect'
- :placeholder='"请选择"'
- style='margin-right:12px'
- ></Select>
- <el-input
- clearable
- @change='Index2'
- placeholder='搜索生产厂商'
- size='small'
- prefix-icon='el-icon-search'
- v-model='sccsInput'
- style='width:200px;margin-right:12px'
- ></el-input>
- </div>
- <room-table3
- v-if='table3.length>=0'
- :table3='table3'
- :loading='loading2'
- :page='page2'
- :total='total2'
- :size='size2'
- :floorChange='floorChange'
- @Index2Emit='Index2Emit'
- ></room-table3>
- </el-tab-pane>
- <el-tab-pane label='维修记录' name='4'>
- <div class='compute-center'>
- <el-input
- clearable
- @change='Index3'
- placeholder='搜索设备名称、编号'
- size='small'
- prefix-icon='el-icon-search'
- v-model='sbmcInput4'
- style='width:200px;margin-right:12px'
- ></el-input>
- <el-input
- clearable
- @change='Index3'
- placeholder='搜索重要事项记录、描述'
- size='small'
- prefix-icon='el-icon-search'
- v-model='zysxInput4'
- style='width:200px;margin-right:12px'
- ></el-input>
- <Select
- @change='Index3'
- width='200'
- tipPlace='top'
- caption='是否更换:'
- v-model='sfghSelect'
- :selectdata='isReplaceData'
- :placeholder='"请选择"'
- style='margin-right:12px'
- ></Select>
- <el-input
- clearable
- @change='Index3'
- placeholder='搜索工单编号'
- size='small'
- prefix-icon='el-icon-search'
- v-model='gdbhInput4'
- style='width:200px;margin-right:12px'
- ></el-input>
- <div class='picker-box'>
- <span class='picker-span'>填报日期:</span>
- <el-date-picker
- style='width:190px'
- v-model='tbsjDate'
- value-format='yyyyMMdd'
- type='daterange'
- @change='Index3'
- size='mini'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- </div>
- <!-- <p class='input-dialog-p'>填报日期</p>
- <p class='input-dialog-p2'>
- <el-date-picker
- clearable
- v-model='tbsjDate'
- value-format='yyyyMMdd'
- type='daterange'
- size='mini'
- style='margin-right:12px;width:200px'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- </p>-->
- </div>
- <div class='dialog-none'>
- <div class='input-dialog'>
- <div class='input-dialog-top' @click='show'>
- <img src='@/assets/imgs/select.png' />
- 筛选
- </div>
- <div class='input-dialog-form' v-if='dialogFormVisible'>
- <p class='input-dialog-p'>验收日期</p>
- <p class='input-dialog-p2'>
- <el-date-picker
- clearable
- v-model='yssjDate'
- value-format='yyyyMMdd'
- type='daterange'
- size='mini'
- style='margin-right:12px;width:200px'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- </p>
- <!-- <p class='input-dialog-p'>工单编号</p>
- <p class='input-dialog-p2'>
- <el-input
- clearable
- placeholder
- style='width:200px;'
- size='mini'
- prefix-icon='el-icon-search'
- v-model='gdbhInput4'
- ></el-input>
- </p>-->
- <p class='input-dialog-foot'>
- <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
- <el-button type='primary' @click='confirm
- ' size='mini'>确 定</el-button>
- </p>
- </div>
- </div>
- </div>
- <room-table4
- v-if='table4.length>=0'
- :table4='table4'
- :loading='loading3'
- :page='page3'
- :total='total3'
- :size='size3'
- @Index3Emit='Index3Emit'
- ></room-table4>
- </el-tab-pane>
- <el-tab-pane label='维保记录' name='5'>
- <div class='compute-center'>
- <el-input
- @change='Index4'
- clearable
- placeholder='搜索设备名称、编号'
- size='small'
- prefix-icon='el-icon-search'
- v-model='sbmcInput5'
- style='margin-right:12px;width:220px;'
- ></el-input>
- <el-input
- @change='Index4'
- clearable
- placeholder='搜索核心维保事项记录描述'
- size='small'
- prefix-icon='el-icon-search'
- v-model='wbsxjlInput5'
- style='margin-right:12px;width:220px;'
- ></el-input>
- <el-input
- @change='Index4'
- clearable
- placeholder='搜索任务编号'
- size='small'
- prefix-icon='el-icon-search'
- v-model='rwbhInput5'
- style='margin-right:12px;width:220px;'
- ></el-input>
- <Select
- @change='Index4'
- width='220'
- tipPlace='top'
- v-model='statuSelect5'
- caption='任务状态'
- v-if='status.length>0'
- :selectdata='status'
- :placeholder='"请选择"'
- style='margin-right:12px'
- ></Select>
- <Select
- width='220'
- tipPlace='top'
- v-model='iszcSelect5'
- caption='是否正常:'
- v-if='zt.length>0'
- :selectdata='zt'
- :placeholder='"请选择"'
- style='margin-right:12px'
- ></Select>
- </div>
- <div class='dialog-none'>
- <div class='input-dialog'>
- <div class='input-dialog-top' @click='show'>
- <img src='@/assets/imgs/select.png' />
- 筛选
- </div>
- <div class='input-dialog-form' v-if='dialogFormVisible'>
- <p class='input-dialog-p'>任务开始日期</p>
- <p class='input-dialog-p2'>
- <el-date-picker
- clearable
- value-format='yyyyMMdd'
- type='daterange'
- size='mini'
- v-model='rwksrq'
- style='width:200px'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- </p>
- <p class='input-dialog-p'>任务完成日期</p>
- <p class='input-dialog-p2'>
- <el-date-picker
- clearable
- value-format='yyyyMMdd'
- type='daterange'
- size='mini'
- v-model='rwwcrq'
- style='width:200px'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- </p>
- <!-- <el-input
- @change='Index4'
- clearable
- placeholder='异常工单编号'
- size='small'
- prefix-icon='el-icon-search'
- v-model='ycgdbhInput5'
- style='margin-right:12px;width:220px;'
- ></el-input>-->
- <p class='input-dialog-p'>异常工单编号</p>
- <p class='input-dialog-p2'>
- <el-input
- clearable
- placeholder='异常工单编号'
- size='small'
- prefix-icon='el-icon-search'
- v-model='ycgdbhInput5'
- style='width:200px;'
- ></el-input>
- </p>
- <p class='input-dialog-p'>异常工单填报日期</p>
- <p class='input-dialog-p2'>
- <el-date-picker
- clearable
- value-format='yyyyMMdd'
- type='daterange'
- size='mini'
- v-model='ycgdtbsj'
- style='width:200px'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- </p>
- <p class='input-dialog-p'>异常工单验收日期</p>
- <p class='input-dialog-p2'>
- <el-date-picker
- clearable
- value-format='yyyyMMdd'
- type='daterange'
- size='mini'
- style='width:200px'
- range-separator='-'
- start-placeholder
- end-placeholder
- v-model='ycgdyssj'
- ></el-date-picker>
- </p>
- <p class='input-dialog-foot'>
- <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
- <el-button type='primary' @click='confirm2' size='mini'>确 定</el-button>
- </p>
- </div>
- </div>
- </div>
- <room-table5
- v-if='table5.length>=0'
- :table5='table5'
- :loading='loading4'
- :page='page4'
- :total='total4'
- :size='size4'
- @Index4Emit='Index4Emit'
- ></room-table5>
- </el-tab-pane>
- </el-tabs>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import { queryEquipmentList } from '@/api/equipmentList.js'
- import { queryDygjcxline, queryHxsb, queryWxjf, queryWb, querySystem } from '@/api/room.js'
- import roomTable1 from './room1'
- import roomTable2 from './room2'
- import roomTable3 from './room3'
- import roomTable4 from './room4'
- import roomTable5 from './room5'
- import { mapGetters } from 'vuex'
- import { querySelect, queryPic } from '@/api/public.js'
- import { Select } from 'meri-design'
- export default {
- data() {
- return {
- content: '',
- activeName: '1',
- visible: false,
- dialogFormVisible: false,
- systemName: '',
- loading: true,
- loading1: true,
- loading2: true,
- loading3: true,
- loading4: true,
- table2: [],
- table3: [],
- table4: [],
- table5: [],
- //
- total: 0,
- page: 1,
- size: 10,
- picFloor: '',
- tableImg: [],
- //
- total1: 0,
- page1: 1,
- size1: 10,
- floor2: '',
- ctbhInput: '',
- cxggInput: '',
- djbhInput: '',
- kzhlInput: '',
- //
- total2: 0,
- page2: 1,
- size2: 10,
- sccsInput: '',
- ppxhInput: '',
- sbjcInput: '',
- floorChange: '',
- //
- total3: 0,
- page3: 1,
- size3: 11,
- tbsjDate: '',
- yssjDate: '',
- // 是否更换配件
- isReplaceData: [
- { id: '1', name: '是' },
- { id: '0', name: '否' }
- ],
- sfghSelect: '',
- sbmcInput4: '',
- sbbhInput4: '',
- zysxInput4: '',
- msInput4: '',
- gdbhInput4: '',
- type1: 'wx',
- //
- total4: 0,
- page4: 1,
- size4: 11,
- searVal: '',
- status: [],
- zt: [],
- sbmcInput5: '',
- sbbhInput5: '',
- wbsxjlInput5: '',
- rwbhInput5: '',
- ycgdbhInput5: '',
- ssmsInput5: '',
- iszcSelect5: '',
- statuSelect5: '',
- rwksrq: '',
- rwwcrq: '',
- ycgdtbsj: '',
- ycgdyssj: '',
- smsxtArr: { smsx: '1001', smsxtname: '供电系统' }
- }
- },
- components: {
- roomTable1,
- roomTable2,
- roomTable3,
- roomTable4,
- roomTable5
- },
- computed: {
- ...mapGetters(['floorSelect', 'plazaId'])
- },
- methods: {
- handleClick(tab) {
- if (tab.label == '机房布置图') {
- this.Index(this.smsxtArr.smsxt)
- } else if (tab.label == '配电室低压柜及出线明细表') {
- this.Index1()
- } else if (tab.label == '机房内核心设备') {
- this.Index2()
- } else if (tab.label == '维修记录') {
- this.Index3()
- } else if (tab.label == '维保记录') {
- this.Index4()
- this.changeSelect()
- }
- },
- // 右上角的筛选点击按钮
- show() {
- this.dialogFormVisible = !this.dialogFormVisible
- },
- Index(system) {
- this.picFloor = this.$cookie.get('floorNow')
- let getParams = {
- typename: '位置布置图',
- location: '1809',
- module: '1002',
- // system: system,
- plazaId: this.plazaId
- }
- if (system) {
- getParams.system = system
- }
- queryPic({ getParams }).then(res => {
- //console.log('机房布置图', res)
- this.tableImg = res.data ? res.data : []
- //判断有没有图片,有图片默认显示按钮是第一个tab,没有图片显示的是第二个tab
- if (this.tableImg.length > 0) {
- this.activeName = '1'
- } else if (this.systemName == '配电室机房') {
- this.activeName = '2'
- this.Index1()
- } else {
- this.activeName = '3'
- this.Index2()
- }
- })
- },
- // 明细表
- Index1() {
- let getParams = {
- location: '1890',
- plazaId: this.plazaId,
- page: this.page1,
- size: this.size1
- }
- if (this.floor2) {
- getParams.floor = this.floor2
- }
- if (this.ctbhInput) {
- if (getParams.keyword) {
- getParams.keyword = `${getParams.keyword + ';' + this.ctbhInput}:drawernum`
- } else {
- getParams.keyword = `${this.ctbhInput}:drawernum`
- }
- }
- if (this.cxggInput) {
- if (getParams.keyword) {
- getParams.keyword = `${getParams.keyword + ';' + this.cxggInput}:outspec`
- } else {
- getParams.keyword = `${this.cxggInput}:outspec`
- }
- }
- if (this.djbhInput) {
- if (getParams.keyword) {
- getParams.keyword = `${getParams.keyword + ';' + this.djbhInput}:wellnum`
- } else {
- getParams.keyword = `${this.djbhInput}:wellnum`
- }
- }
- if (this.kzhlInput) {
- if (getParams.keyword) {
- getParams.keyword = `${getParams.keyword + ';' + this.kzhlInput}:control`
- } else {
- getParams.keyword = `${this.kzhlInput}:control`
- }
- }
- queryDygjcxline({ getParams }).then(res => {
- if (res.result == 'success') {
- this.loading1 = false
- this.total1 = res.count
- this.table2 = res.data ? res.data : []
- //console.log('明细表', res)
- if (this.table2.length == 0) {
- }
- }
- })
- },
- // 核心设备
- Index2() {
- let postParams = {}
- let data = {
- location: '1890',
- plazaId: this.plazaId,
- page: this.page2,
- size: this.size2
- }
- if (this.sbjcInput) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.sbjcInput}:sbjc`
- } else {
- data.keyword = `${this.sbjcInput}:sbjc`
- }
- }
- if (this.ppxhInput) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.ppxhInput}:brand,sbxh`
- } else {
- data.keyword = `${this.ppxhInput}:brand,sbxh`
- }
- }
- if (this.sccsInput) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.sccsInput}:manufacturer`
- } else {
- data.keyword = `${this.sccsInput}:manufacturer`
- }
- }
- if (this.floorChange) {
- postParams.gname = this.floorChange
- }
- queryHxsb({ data, postParams }).then(res => {
- this.loading2 = false
- this.total2 = res.data.count
- this.table3 = res.data.data ? res.data.data : []
- })
- },
- Index1Emit(val) {
- this.page1 = val
- this.Index1()
- },
- Index2Emit(val) {
- this.page2 = val
- this.Index2()
- },
- Index3Emit(val) {
- this.page3 = val
- this.Index3()
- },
- Index4Emit(val) {
- this.page4 = val
- this.Index4()
- },
- // 机房维修记录
- Index3() {
- let getParams = {
- location: '1890',
- plazaId: this.plazaId,
- page: this.page3,
- size: this.size3,
- orderBy: 'sjjssj,0;location,1'
- }
- if (this.sfghSelect) {
- getParams.ismodel = this.sfghSelect
- }
- // 设备名称、编号
- if (this.sbmcInput4) {
- if (getParams.keyword) {
- getParams.keyword = `${getParams.keyword + ';' + this.sbmcInput4}:sbmc`
- } else {
- getParams.keyword = `${this.sbmcInput4}:sbmc,location`
- }
- }
- // 重要事项记录、描述
- if (this.zysxInput4) {
- if (getParams.keyword) {
- getParams.keyword = `${getParams.keyword + ';' + this.zysxInput4}:matters`
- } else {
- getParams.keyword = `${this.zysxInput4}:matters,manufacturer`
- }
- }
- // 填报时间
- if (this.tbsjDate) {
- getParams.reportedbyStartDate = this.tbsjDate[0] + '000000'
- getParams.reportedbyEndDate = this.tbsjDate[1] + '000000'
- }
- // 验收时间
- if (this.yssjDate) {
- getParams.sjjssjStartDate = this.yssjDate[0] + '000000'
- getParams.sjjssjEndDate = this.yssjDate[1] + '000000'
- }
- queryWxjf({ getParams }).then(res => {
- //console.log('维修', res)
- if (res.result == 'success') {
- this.loading3 = false
- this.total3 = res.count
- this.table4 = res.data ? res.data : []
- }
- })
- },
- // 机房维保记录
- Index4() {
- let postParams = {}
- let data = {
- location: '1890',
- plazaId: this.plazaId,
- page: this.page4,
- size: this.size4,
- orderBy: 'wb_gzglid,0;assetnum,1;reportedby,0;'
- }
- //
- // 任务开始日期
- if (this.rwksrq) {
- data.sjkssjStartDate = this.rwksrq[0] + '000000'
- data.sjkssjEndDate = this.rwksrq[1] + '000000'
- }
- // 任务完成日期
- if (this.rwwcrq) {
- data.sjwcsjStartDate = this.rwwcrq[0] + '000000'
- data.sjwcsjEndDate = this.rwwcrq[1] + '000000'
- }
- // 异常工单填报时间
- if (this.ycgdtbsj) {
- data.reportdateStartDate = this.ycgdtbsj[0] + '000000'
- data.reportdateEndDate = this.ycgdtbsj[1] + '000000'
- }
- // 异常工单验收时间
- if (this.ycgdyssj) {
- data.sjjssjStartDate = this.ycgdyssj[0] + '000000'
- data.sjjssjEndDate = this.ycgdyssj[1] + '000000'
- }
- //
- // 是否正常
- if (this.iszcSelect5) {
- data.zt = this.iszcSelect5
- }
- // 任务状态
- if (this.statuSelect5) {
- data.status = this.statuSelect5
- }
- if (this.sbmcInput5) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.sbmcInput5}:sbmc,assetnum`
- } else {
- data.keyword = `${this.sbmcInput5}:sbmc,assetnum`
- }
- }
- if (this.wbsxjlInput5) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.wbsxjlInput5}:matters`
- } else {
- data.keyword = `${this.wbsxjlInput5}:matters,description`
- }
- }
- if (this.rwbhInput5) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.rwbhInput5}:wb_gzglid`
- } else {
- data.keyword = `${this.rwbhInput5}:wb_gzglid`
- }
- }
- if (this.ycgdbhInput5) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.ycgdbhInput5}:wonum`
- } else {
- data.keyword = `${this.ycgdbhInput5}:wonum`
- }
- }
- queryWb({ data, postParams }).then(res => {
- //console.log('维保', res)
- this.loading4 = false
- this.total4 = res.data.count
- this.table5 = res.data.data ? res.data.data : []
- })
- },
- confirm() {
- this.Index3()
- },
- confirm2() {
- this.Index4()
- },
- // 下拉框数据
- changeSelect() {
- this.department = []
- let postParams = [
- {
- columnName: { status: 'status', zt: 'zt' },
- tableName: 'v_glsms_wbzy'
- }
- ]
- let data = {
- plazaId: this.plazaId
- }
- querySelect({ data, postParams }).then(res => {
- //console.log('下拉框', res)
- let status = [],
- zt = []
- status = res.data.data.v_glsms_wbzy.status ? res.data.data.v_glsms_wbzy.status : []
- zt = res.data.data.v_glsms_wbzy.zt ? res.data.data.v_glsms_wbzy.zt : []
- if (status.length > 0) {
- status.forEach(el => {
- let obj = {
- id: el.key,
- name: el.value
- }
- this.status.push(obj)
- })
- }
- if (zt.length > 0) {
- zt.forEach(el => {
- let obj = {
- id: el.key,
- name: el.value == '正常' ? '是' : '否'
- }
- this.zt.push(obj)
- })
- }
- })
- },
- // 查询楼层功能下的机房属于哪类设备
- init() {
- this.smsxtArr = []
- let params = {
- getParams: {
- locationid: '1890',
- plazaId: this.plazaId
- }
- }
- querySystem(params).then(res => {
- this.smsxtArr = res.data ? res.data[0] : {}
- this.Index(this.smsxtArr.smsxt)
- this.content = `查看${this.$cookie.get('floorNow')}层${this.smsxtArr.smsxtname}分布图`
- })
- },
- // 打开机房弹框
- open(name) {
- this.visible = true
- this.systemName = name.name
- if (name.type == 'floor') {
- this.init()
- } else if (name.type == 'system') {
- let floor = this.$cookie.get('floorNow')
- this.content = `查看${floor}层楼层功能图`
- this.Index(null)
- }
- },
- // 机房右上角的跳转 如果是在楼层功能打开的机房则要跳转到设备设施对应的系统\楼层 反之亦然
- jumpFloor() {
- if (this.smsxtArr.smsxt) {
- if (location.pathname.split('/')[3] == 'equipment') {
- this.$router.push({ path: '/home/floorFunc' })
- } else {
- this.$router.push({ path: '/home/equipment', query: { smsxt: this.smsxtArr.smsxt } })
- }
- }
- }
- },
- mounted() {}
- }
- </script>
- <style lang="less" scoped>
- .compute-box {
- .compute-zf {
- width: 15px;
- height: 13px;
- background: url('../../assets/imgs/zffx.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- position: absolute;
- right: 74px;
- top: 25px;
- cursor: pointer;
- &::after {
- content: '';
- position: absolute;
- right: -16px;
- width: 1px;
- height: 16px;
- background: rgba(216, 216, 216, 1);
- }
- }
- .picker-box {
- display: flex;
- align-items: center;
- background: #fff;
- padding: 0 6px;
- border: 1px solid #dcdfe6;
- border-radius: 4px;
- height: 32px;
- box-sizing: border-box;
- margin-right: 12px;
- .picker-span {
- margin-right: 6px;
- color: rgba(0, 0, 0, 0.65);
- }
- }
- .compute-span {
- width: 100%;
- height: 1px;
- background: rgba(0, 0, 0, 0.06);
- margin-bottom: 20px;
- }
- .compute-center {
- display: flex;
- align-items: center;
- margin-bottom: 12px;
- }
- //
- .dialog-none {
- width: 100px;
- position: absolute;
- right: 0;
- .input-dialog {
- .input-dialog-top {
- color: #c3c7cb;
- cursor: pointer;
- position: absolute;
- top: -45px;
- right: 0px;
- }
- .input-dialog-form {
- padding: 20px 24px;
- background: rgba(255, 255, 255, 1);
- border-radius: 4px;
- border: 1px solid rgba(195, 199, 203, 1);
- z-index: 99999;
- position: absolute;
- top: -20px;
- right: 0px;
- }
- .input-dialog-p {
- margin-bottom: 8px;
- font-size: 14px;
- font-family: MicrosoftYaHei;
- color: rgba(100, 108, 115, 1);
- line-height: 22px;
- }
- .input-dialog-p2 {
- margin-bottom: 16px;
- }
- }
- .input-dialog-foot {
- // margin-bottom: 16px;
- display: flex;
- justify-content: flex-end;
- }
- }
- .compute-tab {
- margin-top: 16px;
- padding: 0 24px;
- }
- }
- </style>
- <style lang="less">
- .compute-box {
- .el-dialog {
- padding: 16px 20px 20px;
- overflow: hidden;
- .el-dialog__header {
- padding: 0;
- font-size: 16px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
- line-height: 24px;
- padding-bottom: 16px;
- }
- }
- .compute-tab {
- .el-dialog__title {
- font-size: 16px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
- line-height: 24px;
- }
- .el-dialog__body {
- padding: 0 24px;
- }
- .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
- .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
- .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
- .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
- padding-left: 16px;
- }
- .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
- .el-tabs--bottom .el-tabs__item.is-top:last-child,
- .el-tabs--top .el-tabs__item.is-bottom:last-child,
- .el-tabs--top .el-tabs__item.is-top:last-child {
- padding-right: 16px;
- }
- .el-tabs__nav-wrap::after {
- height: 0;
- }
- .el-tabs__item {
- padding: 5px 16px;
- height: 30px;
- line-height: 22px;
- font-size: 14px;
- font-family: MicrosoftYaHei;
- color: rgba(31, 36, 41, 1);
- border: 1px solid rgba(195, 199, 203, 1);
- }
- /deep/ .el-tabs__item:last-child {
- border-radius: 0px 4px 4px 0px;
- }
- /deep/ .el-tabs__item:nth-child(2) {
- border-radius: 4px 0px 0px 4px;
- }
- .el-tabs,
- .el-tabs__content {
- height: 800px;
- }
- .el-tabs__active-bar {
- background-color: transparent !important;
- }
- .is-active {
- color: #025baa;
- border-color: #025baa;
- }
- .compute-table {
- .el-table td,
- .el-table th {
- padding: 8px 0;
- }
- }
- }
- .el-input--suffix .el-input__inner {
- padding-right: 20px;
- }
- .el-dialog__wrapper {
- transition-duration: 0.3s;
- }
- .dialog-fade-enter-active {
- animation: none !important;
- }
- .dialog-fade-leave-active {
- transition-duration: 0.15s !important;
- animation: none !important;
- }
- .dialog-fade-enter-active .el-dialog,
- .dialog-fade-leave-active .el-dialog {
- animation-fill-mode: forwards;
- }
- .dialog-fade-enter-active .el-dialog {
- animation-duration: 0.3s;
- animation-name: anim-open;
- animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
- }
- .dialog-fade-leave-active .el-dialog {
- animation-duration: 0.3s;
- animation-name: anim-close;
- }
- @keyframes anim-open {
- 0% {
- opacity: 0;
- transform: scale3d(0, 0, 1);
- }
- 100% {
- opacity: 1;
- transform: scale3d(1, 1, 1);
- }
- }
- @keyframes anim-close {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- transform: scale3d(0.5, 0.5, 1);
- }
- }
- .picker-box {
- .el-input__inner {
- border: none;
- }
- .el-range-editor.el-input__inner {
- padding: 3px 0px;
- }
- .el-icon-date {
- display: none;
- }
- .el-range__close-icon {
- position: absolute;
- right: 0px;
- top: 2px;
- }
- .el-range-editor--mini .el-range-input {
- font-size: 14px;
- color: rgb(31, 36, 41);
- }
- }
- }
- </style>
|