index.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <div class="app-container dataStatistics">
  3. <div class="title-box">
  4. <div :class="pageType == 1?'checkTitle':''" @click="checkTitleButton(1)">
  5. <p>按实验室</p>
  6. <p></p>
  7. </div>
  8. <div :class="pageType == 2?'checkTitle':''" @click="checkTitleButton(2)">
  9. <p>按安全隐患</p>
  10. <p></p>
  11. </div>
  12. <div :class="pageType == 3?'checkTitle':''" @click="checkTitleButton(3)">
  13. <p>按检查指标</p>
  14. <p></p>
  15. </div>
  16. <div :class="pageType == 4?'checkTitle':''" @click="checkTitleButton(4)">
  17. <p>按检查内容</p>
  18. <p></p>
  19. </div>
  20. </div>
  21. <laboratoryStatistics v-if="pageType == 1"></laboratoryStatistics>
  22. <safetyHazardStatistics v-if="pageType == 2"></safetyHazardStatistics>
  23. <checkIndexStatistics v-if="pageType == 3" :propsData="propsData"></checkIndexStatistics>
  24. <inspectContent v-if="pageType == 4" ></inspectContent>
  25. </div>
  26. </template>
  27. <script>
  28. import laboratoryStatistics from './laboratoryStatistics.vue'
  29. import safetyHazardStatistics from './safetyHazardStatistics.vue'
  30. import checkIndexStatistics from './checkIndexStatistics.vue'
  31. import inspectContent from './inspectContent.vue'
  32. export default {
  33. name: 'index',
  34. components: {
  35. laboratoryStatistics,
  36. safetyHazardStatistics,
  37. checkIndexStatistics,
  38. inspectContent
  39. },
  40. data(){
  41. return{
  42. pageType:1,
  43. propsData:{
  44. jumpType:false,
  45. }
  46. }
  47. },
  48. created(){
  49. if(this.$route.query.type){
  50. this.$set(this,'pageType',3);
  51. }
  52. },
  53. mounted(){
  54. },
  55. methods:{
  56. checkTitleButton(type){
  57. if(this.pageType != type){
  58. this.$set(this,'pageType',type);
  59. }
  60. }
  61. }
  62. }
  63. </script>
  64. <style scoped lang="scss">
  65. .dataStatistics{
  66. flex:1;
  67. display: flex;
  68. flex-direction: column;
  69. overflow: hidden;
  70. *{
  71. font-weight: 500;
  72. }
  73. .title-box{
  74. display: flex;
  75. height:80px;
  76. border-bottom:1px solid #d8d8d8;
  77. padding:0 40px;
  78. div{
  79. height:80px;
  80. margin-right:80px;
  81. cursor: pointer;
  82. p:nth-child(1){
  83. width:80px;
  84. font-size:16px;
  85. text-align: center;
  86. color:#333;
  87. line-height:40px;
  88. height:40px;
  89. margin-top:20px;
  90. }
  91. p:nth-child(2){
  92. width:60px;
  93. height: 4px;
  94. border-radius:4px;
  95. margin:0 10px;
  96. }
  97. }
  98. .checkTitle{
  99. p:nth-child(1){
  100. color:#0045AF;
  101. }
  102. p:nth-child(2){
  103. background-color: #0045AF;
  104. }
  105. }
  106. }
  107. }
  108. </style>