index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <div class='analysis-table'>
  3. <div class='module-navs-container'>
  4. <div>
  5. <div
  6. v-for='(item) in navList'
  7. :key='"key_" + item.id'
  8. class='item-nav'
  9. :class='{"nav-active": item.isActive}'
  10. @click='changeModule(item.id)'
  11. >
  12. <NavTable v-if='item.imgType === "table"' />
  13. <NavApply v-if='item.imgType === "apply"' />
  14. <NavGantt v-if='item.imgType === "gantt"' />
  15. <div>{{item.name}}</div>
  16. </div>
  17. </div>
  18. </div>
  19. <div class='module'>
  20. <CoreDeviceReport v-if='curModule.id === 1' />
  21. <SpecificationUpdateRecord v-if='curModule.id === 2' />
  22. <GanttChart v-if='curModule.id === 3' />
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. import NavTable from '../../assets/svg/table.svg'
  28. import NavApply from '../../assets/svg/apply.svg'
  29. import NavGantt from '../../assets/svg/gantt_chart.svg'
  30. import CoreDeviceReport from './CoreDeviceReport'
  31. import SpecificationUpdateRecord from './SpecificationUpdateRecord'
  32. import GanttChart from './GanttChart'
  33. import _ from 'lodash'
  34. export default {
  35. data() {
  36. return {
  37. navList: [
  38. { id: 1, name: '核心设备报表', imgType: 'table', isActive: true },
  39. { id: 2, name: '说明书更新记录', imgType: 'apply', isActive: false },
  40. { id: 3, name: '事项甘特图', imgType: 'gantt', isActive: false }
  41. ],
  42. curModule: {} // 当前选中的模块
  43. }
  44. },
  45. components: {
  46. NavTable,
  47. NavApply,
  48. NavGantt,
  49. CoreDeviceReport,
  50. SpecificationUpdateRecord,
  51. GanttChart
  52. },
  53. mounted() {
  54. const { query } = this.$route
  55. if (!_.isEmpty(query)) {
  56. if (query.module === 'specification') {
  57. _.map(this.navList, o => {
  58. return (o.isActive = o.id === 2)
  59. })
  60. } else if (query.module === 'gantt') {
  61. _.map(this.navList, o => {
  62. return (o.isActive = o.id === 3)
  63. })
  64. }
  65. }
  66. this.findCurModule()
  67. },
  68. methods: {
  69. /**
  70. * 查询当前选中模块
  71. */
  72. findCurModule() {
  73. this.curModule = _.find(this.navList, item => {
  74. return item.isActive
  75. })
  76. },
  77. /**
  78. * 切换模块
  79. */
  80. changeModule(id) {
  81. _.map(this.navList, item => {
  82. return (item.isActive = item.id === id)
  83. })
  84. this.findCurModule()
  85. }
  86. }
  87. }
  88. </script>
  89. <style lang="less" scoped>
  90. .analysis-table {
  91. height: calc(100% - 48px);
  92. background: #f2f5f7;
  93. .module-navs-container {
  94. margin: 12px 0;
  95. display: flex;
  96. justify-content: center;
  97. > div {
  98. display: flex;
  99. }
  100. }
  101. .item-nav {
  102. padding-top: 12px;
  103. padding-bottom: 12px;
  104. padding-left: 20px;
  105. padding-right: 16px;
  106. display: flex;
  107. align-items: center;
  108. background: #fff;
  109. cursor: pointer;
  110. > svg {
  111. margin-right: 6px;
  112. }
  113. > div:last-child {
  114. font-size: 16px;
  115. color: #1f2429;
  116. line-height: 22px;
  117. }
  118. }
  119. .nav-active {
  120. background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
  121. > svg {
  122. stroke: #025baa;
  123. }
  124. > div:last-child {
  125. color: #025baa;
  126. }
  127. }
  128. .module {
  129. width: 100%;
  130. height: calc(100% - 70px);
  131. }
  132. }
  133. </style>