eqDialog.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <!-- 设备设施的三级路由的tabs -->
  3. <div class='dialog-container'>
  4. <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
  5. <div class='top'></div>
  6. <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
  7. <rotation :rotationImg='rotationImg'></rotation>
  8. </div>
  9. <tj-table v-else-if='Object.keys(dialogInfo).length>0 && dialogInfo.id.slice(0,4)=="TJQD"' major='土建'></tj-table>
  10. <GDQDTable v-else-if='Object.keys(dialogInfo).length>0 && dialogInfo.id.slice(0,4)=="GDQD"' major></GDQDTable>
  11. <look-page v-else-if='Object.keys(dialogInfo).length>0 && dialogInfo.id.slice(2,4)=="TZ"' param major></look-page>
  12. <div v-else>
  13. <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
  14. <el-tab-pane
  15. v-for='(value,index) in dialogInfo.children'
  16. :key='"u"+index'
  17. :label='`${value.label}`'
  18. :name='`${value.param.tab_code}`'
  19. >
  20. <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
  21. <rotation :rotationImg='rotationImg'></rotation>
  22. </div>
  23. <tableList v-else-if='value.id.slice(0,4)=="RDQD"' ref='list1' :param='param' major='弱电'></tableList>
  24. <tableList v-else-if='value.id.slice(0,4)=="NTQD"' ref='list2' :param='param' major='暖通'></tableList>
  25. <wb-table v-else-if='value.id.slice(2,4)=="WX"' param major='维修'></wb-table>
  26. <zw-table v-else-if='value.id.slice(2,4)=="ZW"' param major='专维'></zw-table>
  27. <wb-table v-else-if='value.id.slice(2,4)=="WB"' param major='维保'></wb-table>
  28. </el-tab-pane>
  29. </el-tabs>
  30. </div>
  31. </el-dialog>
  32. </div>
  33. </template>
  34. <script>
  35. import tableList from './table/eqListTable'
  36. import tjTable from './table/tjTable'
  37. import wbTable from './table/wbTable'
  38. import zwTable from './table/zwTable'
  39. import lookPage from './table/lookPageTable'
  40. import GDQDTable from './table/GDQDTable'
  41. export default {
  42. props: ['systemName'],
  43. data() {
  44. return {
  45. activeName: '',
  46. visible: false,
  47. dialogInfo: {},
  48. param: '',
  49. rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
  50. }
  51. },
  52. mounted() {
  53. // if (this.$refs.list1) {
  54. // this.$refs.list1.getList(this.activeName)
  55. // }
  56. },
  57. components: { tableList, tjTable, wbTable, zwTable, lookPage, GDQDTable },
  58. methods: {
  59. showModal(item) {
  60. this.visible = true
  61. this.dialogInfo = item
  62. if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
  63. this.activeName = this.dialogInfo.children[0].param.tab_code
  64. }
  65. },
  66. handleClick(tab) {
  67. this.param = tab.name
  68. console.log(tab)
  69. }
  70. }
  71. }
  72. </script>
  73. <style lang="less" scoped>
  74. .top {
  75. width: 1366px;
  76. height: 1px;
  77. background: rgba(0, 0, 0, 0.06);
  78. margin-bottom: 20px;
  79. }
  80. </style>
  81. <style lang="less" >
  82. .dialog-container {
  83. .el-dialog__header {
  84. padding: 16px 24px;
  85. }
  86. .el-dialog__title {
  87. font-size: 16px;
  88. font-family: PingFangSC-Medium, PingFang SC;
  89. font-weight: 500;
  90. color: rgba(0, 0, 0, 0.85);
  91. line-height: 24px;
  92. }
  93. .el-dialog__body {
  94. padding: 0 24px;
  95. height: 90%;
  96. }
  97. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  98. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  99. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  100. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  101. padding-left: 16px;
  102. }
  103. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  104. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  105. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  106. .el-tabs--top .el-tabs__item.is-top:last-child {
  107. padding-right: 16px;
  108. }
  109. .el-tabs__nav-wrap::after {
  110. height: 0;
  111. }
  112. .el-tabs__item {
  113. padding: 5px 16px;
  114. height: 30px;
  115. line-height: 22px;
  116. font-size: 14px;
  117. font-family: MicrosoftYaHei;
  118. color: rgba(31, 36, 41, 1);
  119. border: 1px solid rgba(195, 199, 203, 1);
  120. }
  121. .el-tabs,
  122. .el-tabs__content {
  123. height: 700px;
  124. }
  125. .el-tabs__active-bar {
  126. background-color: transparent !important;
  127. }
  128. .is-active {
  129. color: #025baa;
  130. border-color: #025baa;
  131. }
  132. }
  133. </style>