123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- <template>
- <!-- 设备设施的三级路由的tabs -->
- <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>
- </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'></wb-table>
- <!-- 维修的表格 -->
- <wx-table v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt'></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>
- <!--记录表格 -->
- <record-dialog ref='Dialog'></record-dialog>
- </div>
- </template>
- <script>
- import tableList from './table/eqListTable'
- import tjTable from './table/tjTable'
- import wbTable from './table/wbTable'
- import zwTable from './table/zwTable'
- import lookPage from './table/lookPageTable'
- import standTable from './table/standTable'
- import otherTable from './table/otherTable'
- import wxTable from './table/wxTable'
- import recordDialog from './table/recordDialog'
- import djspTable from './table/djspTable'
- import { queryPic } from '@/api/public.js'
- export default {
- props: ['systemName', 'smsxt'],
- data() {
- return {
- activeName: '',
- visible: false,
- dialogInfo: {},
- param: '',
- rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
- }
- },
- mounted() {
- this.initImage()
- },
- components: { tableList, tjTable, wbTable, zwTable, lookPage, standTable, otherTable, wxTable, recordDialog, djspTable },
- methods: {
- showModal(item) {
- this.visible = true
- this.dialogInfo = item
- if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
- this.activeName = this.dialogInfo.children[0].param.tab_code
- } else {
- this.activeName = this.dialogInfo.param.tab_code
- }
- this.param = this.activeName
- },
- handleClick(tab) {
- if (this.param) {
- this.param = tab.name
- } else if (this.smsxt) {
- this.smsxt = tab.name
- }
- this.activeName = tab.name
- },
- visibalBox() {
- this.$refs.Dialog.open()
- },
- initImage() {
- let getParams = {
- data: { tyepcode: 8, plazaId: '1001145' },
- params: {}
- }
- queryPic(getParams).then(res => {
- console.log('resres', res)
- this.rotationImg = res.data
- })
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .dialog-container {
- .title-name {
- font-size: 16px;
- padding-right: 6px;
- color: #000;
- font-weight: bold;
- }
- }
- .top {
- width: 1366px;
- height: 1px;
- background: rgba(0, 0, 0, 0.06);
- margin-bottom: 20px;
- }
- </style>
- <style lang="less" >
- .dialog-container {
- .el-dialog__header {
- padding: 16px 24px;
- }
- .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;
- height: 90%;
- }
- .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);
- }
- .el-tabs,
- .el-tabs__content {
- height: 700px;
- }
- .el-tabs__active-bar {
- background-color: transparent !important;
- }
- .is-active {
- color: #025baa;
- border-color: #025baa;
- }
- }
- </style>
|