eqDialog.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
  7. <el-tab-pane v-for='(value,index) in dialogInfo.children' :key='"u"+index' :label='`${value.label}`' :name='`${value.id}`'>
  8. <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
  9. <rotation :rotationImg='rotationImg'></rotation>
  10. </div>
  11. <tableList v-if='value.id=="GDWB1"' ref='list'></tableList>
  12. <tableList v-if='value.id=="GDWB2"' ref='list'></tableList>
  13. <tableList v-else ref='list'></tableList>
  14. </el-tab-pane>
  15. </el-tabs>
  16. </el-dialog>
  17. </div>
  18. </template>
  19. <script>
  20. import tableList from './table/eqListTable'
  21. export default {
  22. props: ['systemName'],
  23. data() {
  24. return {
  25. activeName: '',
  26. visible: false,
  27. dialogInfo: {},
  28. rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
  29. }
  30. },
  31. mounted() {},
  32. components: { tableList },
  33. methods: {
  34. showModal(item) {
  35. this.visible = true
  36. this.dialogInfo = item
  37. if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
  38. this.activeName = this.dialogInfo.children[0].id
  39. console.log(this.activeName)
  40. }
  41. },
  42. handleClick(tab, event) {
  43. console.log(tab, event)
  44. }
  45. }
  46. }
  47. </script>
  48. <style lang="less" scoped>
  49. .top {
  50. width: 1366px;
  51. height: 1px;
  52. background: rgba(0, 0, 0, 0.06);
  53. margin-bottom: 20px;
  54. }
  55. </style>
  56. <style lang="less">
  57. .dialog-container {
  58. .el-dialog__header {
  59. padding: 16px 24px;
  60. }
  61. .el-dialog__title {
  62. font-size: 16px;
  63. font-family: PingFangSC-Medium, PingFang SC;
  64. font-weight: 500;
  65. color: rgba(0, 0, 0, 0.85);
  66. line-height: 24px;
  67. }
  68. .el-dialog__body {
  69. padding: 0 24px;
  70. }
  71. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  72. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  73. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  74. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  75. padding-left: 16px;
  76. }
  77. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  78. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  79. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  80. .el-tabs--top .el-tabs__item.is-top:last-child {
  81. padding-right: 16px;
  82. }
  83. .el-tabs__nav-wrap::after {
  84. height: 0;
  85. }
  86. .el-tabs__item {
  87. padding: 5px 16px;
  88. height: 30px;
  89. line-height: 22px;
  90. font-size: 14px;
  91. font-family: MicrosoftYaHei;
  92. color: rgba(31, 36, 41, 1);
  93. border: 1px solid rgba(195, 199, 203, 1);
  94. }
  95. .el-tabs__active-bar {
  96. background-color: transparent !important;
  97. }
  98. .is-active {
  99. color: #025baa;
  100. border-color: #025baa;
  101. }
  102. }
  103. </style>