|
@@ -1,57 +1,63 @@
|
|
<template>
|
|
<template>
|
|
<!-- 设备设施的三级路由的tabs -->
|
|
<!-- 设备设施的三级路由的tabs -->
|
|
<div class='dialog-container'>
|
|
<div class='dialog-container'>
|
|
- <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
|
|
|
|
- <!-- 除了清单和原理页面,别的都有记录事项detailDialog页面 -->
|
|
|
|
- <div slot='title' class='header-title' v-if='Object.keys(dialogInfo).length>0'>
|
|
|
|
- <span class='title-name'>{{systemName}}-{{dialogInfo.label}}</span>
|
|
|
|
- <img v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL"' src='../../assets/imgs/zy1.png' @click='visibalBox' alt />
|
|
|
|
- </div>
|
|
|
|
- <!-- 没有tab的页面 -->
|
|
|
|
- <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length==0'>
|
|
|
|
- <!-- 原理图 -->
|
|
|
|
- <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
|
|
|
|
- <rotation :rotationImg='rotationImg'></rotation>
|
|
|
|
|
|
+ <Modal :show='visible' :title='`${systemName}-${dialogInfo.label}`' mode='full' @close='modalClose' @confirm='modalConfirm'>
|
|
|
|
+ <template #content>
|
|
|
|
+ <!-- 除了清单和原理页面,别的都有记录事项detailDialog页面 -->
|
|
|
|
+ <div slot='title' class='header-title' v-if='Object.keys(dialogInfo).length>0'>
|
|
|
|
+ <!-- <span class='title-name'>{{systemName}}-{{dialogInfo.label}}</span> -->
|
|
|
|
+ <img
|
|
|
|
+ v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL" && dialogInfo.id.slice(0,4)!="GJSP"'
|
|
|
|
+ src='../../assets/imgs/zy1.png'
|
|
|
|
+ @click='visibalBox'
|
|
|
|
+ alt
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
- <!-- 土建系统主要材料清单 -->
|
|
|
|
- <tj-table v-else-if='dialogInfo.id.slice(0,4)=="TJQD"' :param='param'></tj-table>
|
|
|
|
- <!-- 主要设备清单 标准设备表格 -->
|
|
|
|
- <standTable v-else-if='dialogInfo.id.slice(2,4)=="QD"' :param='param' :major='dialogInfo.id'></standTable>
|
|
|
|
- <!-- 电井商铺范围清单 -->
|
|
|
|
- <djsp-table v-else-if='dialogInfo.id.slice(0,4)=="GJSP"'></djsp-table>
|
|
|
|
- <!-- 查看图纸 -->
|
|
|
|
- <look-page v-else-if='dialogInfo.id.slice(2,4)=="TZ"' param major></look-page>
|
|
|
|
- </div>
|
|
|
|
- <!-- 有tab的页面 -->
|
|
|
|
- <div v-else>
|
|
|
|
- <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
|
|
|
|
- <el-tab-pane
|
|
|
|
- v-for='(value,index) in dialogInfo.children'
|
|
|
|
- :key='"u"+index'
|
|
|
|
- :label='`${value.label}`'
|
|
|
|
- :name='`${value.param.tab_code}`'
|
|
|
|
- >
|
|
|
|
- <!-- 有tab的原理图 -->
|
|
|
|
- <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
|
|
|
|
- <rotation :rotationImg='rotationImg'></rotation>
|
|
|
|
- </div>
|
|
|
|
- <!-- 主要设备清单 标准设备表格加tab -->
|
|
|
|
- <tableList v-else-if='value.id.slice(0,4)=="RDQD"' :param='param' ref='list1' major='弱电'></tableList>
|
|
|
|
- <tableList v-else-if='value.id.slice(0,4)=="NTQD"' :param='param' ref='list2' major='暖通'></tableList>
|
|
|
|
- <!-- 维保表格 -->
|
|
|
|
- <wb-table v-else-if='value.id.slice(2,4)=="WB"' :smsxt='smsxt' :major='dialogInfo.id'></wb-table>
|
|
|
|
- <!-- 维修的表格 -->
|
|
|
|
- <wx-table v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt' :major='dialogInfo.id'></wx-table>
|
|
|
|
- <!-- 专维 -->
|
|
|
|
- <zw-table v-else-if='value.id.slice(2,4)=="ZW"' :smsxt='smsxt' :major='dialogInfo.id'></zw-table>
|
|
|
|
- <!-- 其他 -->
|
|
|
|
- <other-table v-else-if='value.id.slice(2,4)=="QT"' :smsxt='smsxt' :major='dialogInfo.id'></other-table>
|
|
|
|
- <!-- 建筑立面图 -->
|
|
|
|
- <tj-build-table v-else-if='value.id.slice(0,4)=="TJLM"'></tj-build-table>
|
|
|
|
- </el-tab-pane>
|
|
|
|
- </el-tabs>
|
|
|
|
- </div>
|
|
|
|
- </el-dialog>
|
|
|
|
|
|
+ <!-- 没有tab的页面 -->
|
|
|
|
+ <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length==0' style='margin:16px 24px 0 24px'>
|
|
|
|
+ <!-- 原理图 -->
|
|
|
|
+ <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
|
|
|
|
+ <rotation :rotationImg='rotationImg'></rotation>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 土建系统主要材料清单 -->
|
|
|
|
+ <tj-table v-else-if='dialogInfo.id.slice(0,4)=="TJQD"' :param='param'></tj-table>
|
|
|
|
+ <!-- 主要设备清单 标准设备表格 -->
|
|
|
|
+ <standTable v-else-if='dialogInfo.id.slice(2,4)=="QD"' :param='param' :major='dialogInfo.id'></standTable>
|
|
|
|
+ <!-- 电井商铺范围清单 -->
|
|
|
|
+ <djsp-table v-else-if='dialogInfo.id.slice(0,4)=="GJSP"'></djsp-table>
|
|
|
|
+ <!-- 查看图纸 -->
|
|
|
|
+ <look-page v-else-if='dialogInfo.id.slice(2,4)=="TZ"' param major></look-page>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 有tab的页面 -->
|
|
|
|
+ <div v-else style='margin:16px 24px 0 24px;'>
|
|
|
|
+ <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
|
|
|
|
+ <el-tab-pane
|
|
|
|
+ v-for='(value,index) in dialogInfo.children'
|
|
|
|
+ :key='"u"+index'
|
|
|
|
+ :label='`${value.label}`'
|
|
|
|
+ :name='`${value.param.tab_code}`'
|
|
|
|
+ @click='tabClick(value)'
|
|
|
|
+ >
|
|
|
|
+ <!-- 有tab的原理图 -->
|
|
|
|
+ <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
|
|
|
|
+ <rotation :rotationImg='rotationImg'></rotation>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 主要设备清单 标准设备表格加tab -->
|
|
|
|
+ <tableList v-else-if='value.id.slice(0,4)=="RDQD"' :param='param' ref='list1' major='弱电'></tableList>
|
|
|
|
+ <tableList v-else-if='value.id.slice(0,4)=="NTQD"' :param='param' ref='list2' major='暖通'></tableList>
|
|
|
|
+ <!-- 维保表格 -->
|
|
|
|
+ <wb-table v-else-if='value.id.slice(2,4)=="WB"' :smsxt='smsxt' :major='dialogInfo.id'></wb-table>
|
|
|
|
+ <!-- 维修的表格 -->
|
|
|
|
+ <wx-table v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt' :major='dialogInfo.id'></wx-table>
|
|
|
|
+ <!-- 专维 -->
|
|
|
|
+ <zw-table v-else-if='value.id.slice(2,4)=="ZW"' :smsxt='smsxt' :major='dialogInfo.id'></zw-table>
|
|
|
|
+ <!-- 其他 -->
|
|
|
|
+ <other-table v-else-if='value.id.slice(2,4)=="QT"' :smsxt='smsxt' :major='dialogInfo.id'></other-table>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ </el-tabs>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </Modal>
|
|
<!--记录表格 -->
|
|
<!--记录表格 -->
|
|
<record-dialog ref='Dialog'></record-dialog>
|
|
<record-dialog ref='Dialog'></record-dialog>
|
|
</div>
|
|
</div>
|
|
@@ -67,7 +73,7 @@ import otherTable from './table/otherTable'
|
|
import wxTable from './table/wxTable'
|
|
import wxTable from './table/wxTable'
|
|
import recordDialog from './table/recordDialog'
|
|
import recordDialog from './table/recordDialog'
|
|
import djspTable from './table/djspTable'
|
|
import djspTable from './table/djspTable'
|
|
-import { queryPic } from '@/api/public.js'
|
|
|
|
|
|
+import { queryPic, queryTab } from '@/api/public.js'
|
|
export default {
|
|
export default {
|
|
props: ['systemName', 'smsxt'],
|
|
props: ['systemName', 'smsxt'],
|
|
data() {
|
|
data() {
|
|
@@ -75,46 +81,98 @@ export default {
|
|
activeName: '',
|
|
activeName: '',
|
|
visible: false,
|
|
visible: false,
|
|
dialogInfo: {},
|
|
dialogInfo: {},
|
|
- param: '',
|
|
|
|
- rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
|
|
|
|
|
|
+ param: '', //区分清单tab
|
|
|
|
+ typecode: '', //区分原理图的tab
|
|
|
|
+ rotationImg: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {},
|
|
mounted() {},
|
|
components: { tableList, tjTable, wbTable, zwTable, lookPage, standTable, otherTable, wxTable, recordDialog, djspTable },
|
|
components: { tableList, tjTable, wbTable, zwTable, lookPage, standTable, otherTable, wxTable, recordDialog, djspTable },
|
|
methods: {
|
|
methods: {
|
|
|
|
+ modalClose() {
|
|
|
|
+ this.visible = false
|
|
|
|
+ },
|
|
|
|
+ modalConfirm() {
|
|
|
|
+ console.log('alertConfirm')
|
|
|
|
+ },
|
|
|
|
+ //打开弹窗
|
|
showModal(item) {
|
|
showModal(item) {
|
|
this.visible = true
|
|
this.visible = true
|
|
this.dialogInfo = item
|
|
this.dialogInfo = item
|
|
if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
|
|
if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
|
|
this.activeName = this.dialogInfo.children[0].param.tab_code
|
|
this.activeName = this.dialogInfo.children[0].param.tab_code
|
|
|
|
+ this.typecode = this.dialogInfo.children[0].param.type_code
|
|
|
|
+ if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL') {
|
|
|
|
+ this.isShowTab()
|
|
|
|
+ this.initImage(this.typecode)
|
|
|
|
+ }
|
|
} else {
|
|
} else {
|
|
this.activeName = this.dialogInfo.param.tab_code
|
|
this.activeName = this.dialogInfo.param.tab_code
|
|
|
|
+ this.typecode = this.dialogInfo.param.type_code
|
|
|
|
+ if (this.dialogInfo.id.slice(2, 4) == 'YL') {
|
|
|
|
+ this.isShowTab()
|
|
|
|
+ this.initImage(this.typecode)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ console.log(this.dialogInfo)
|
|
this.param = this.activeName
|
|
this.param = this.activeName
|
|
},
|
|
},
|
|
- handleClick(tab) {
|
|
|
|
- console.log(tab)
|
|
|
|
|
|
+ //点击tab函数
|
|
|
|
+ handleClick(tab, event) {
|
|
|
|
+ console.log(tab.index)
|
|
if (this.param) {
|
|
if (this.param) {
|
|
this.param = tab.name
|
|
this.param = tab.name
|
|
} else if (this.smsxt) {
|
|
} else if (this.smsxt) {
|
|
this.smsxt = tab.name
|
|
this.smsxt = tab.name
|
|
}
|
|
}
|
|
this.activeName = tab.name
|
|
this.activeName = tab.name
|
|
- this.initImage()
|
|
|
|
|
|
+ //原理图的tab怎么传typecode
|
|
|
|
+ if (this.dialogInfo.children.length > 0) {
|
|
|
|
+ this.typecode = this.dialogInfo.children[`${tab.index}`].param.type_code
|
|
|
|
+ }
|
|
|
|
+ this.initImage(this.typecode)
|
|
|
|
+ },
|
|
|
|
+ tabClick(value) {
|
|
|
|
+ console.log(value, '-----.')
|
|
},
|
|
},
|
|
-
|
|
|
|
visibalBox() {
|
|
visibalBox() {
|
|
this.$refs.Dialog.open(this.dialogInfo.id)
|
|
this.$refs.Dialog.open(this.dialogInfo.id)
|
|
},
|
|
},
|
|
- initImage() {
|
|
|
|
|
|
+ //系统原理图接口
|
|
|
|
+ initImage(typecode) {
|
|
let getParams = {
|
|
let getParams = {
|
|
- data: { tyepcode: 8, plazaId: '1001145', system: this.systemName.slice(0, 2) },
|
|
|
|
- params: {}
|
|
|
|
|
|
+ data: {
|
|
|
|
+ plazaId: this.$store.state.plazaId,
|
|
|
|
+ system: this.systemName.slice(0, 2),
|
|
|
|
+ tyepcode: typecode
|
|
|
|
+ }
|
|
}
|
|
}
|
|
queryPic(getParams).then(res => {
|
|
queryPic(getParams).then(res => {
|
|
- console.log('resres', res)
|
|
|
|
this.rotationImg = res.data
|
|
this.rotationImg = res.data
|
|
})
|
|
})
|
|
|
|
+ },
|
|
|
|
+ //原理图没图片不显示tab
|
|
|
|
+ isShowTab() {
|
|
|
|
+ let data = {
|
|
|
|
+ plazaId: this.$store.state.plazaId,
|
|
|
|
+ major: this.systemName.slice(0, 2)
|
|
|
|
+ }
|
|
|
|
+ let postParams = []
|
|
|
|
+ if (this.dialogInfo.children.length == 0) {
|
|
|
|
+ postParams[0].params.tyepcode = this.dialogInfo.param.type_code
|
|
|
|
+ postParams[0].tableName = 'v_glsms_confrguring'
|
|
|
|
+ } else {
|
|
|
|
+ this.dialogInfo.children.forEach(el => {
|
|
|
|
+ postParams.push({
|
|
|
|
+ 'params.tyepcode': el.param.type_code,
|
|
|
|
+ tableName: 'v_glsms_confrguring'
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ queryTab({ data, postParams }).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -127,6 +185,11 @@ export default {
|
|
color: #000;
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
+ .header-title {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 15px;
|
|
|
|
+ left: 220px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.top {
|
|
.top {
|
|
width: 1366px;
|
|
width: 1366px;
|
|
@@ -186,5 +249,8 @@ export default {
|
|
color: #025baa;
|
|
color: #025baa;
|
|
border-color: #025baa;
|
|
border-color: #025baa;
|
|
}
|
|
}
|
|
|
|
+ .p-modal-content {
|
|
|
|
+ overflow-y: hidden;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|