gasreport.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view class="gas-report" name="gasreport">
  3. <u-navbar :title="gasTitle" :safeAreaInsetTop="true" leftIcon="list" @leftClick="handlerToggle"> </u-navbar>
  4. <view class="gas-content">
  5. <component :is="loadComponent" :firstAddress="firstAddress" :secondAddress="secondAddress"
  6. :firstTj="firstTj" :secondTj="secondTj"></component>
  7. </view>
  8. <!-- 导航弹出层 -->
  9. <view class="popup-modal">
  10. <popupModal :showModel="showModel" @handlerClick="handlerClick"></popupModal>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. import api from "@/api/api";
  16. import popupModal from './components/popupModal.vue'
  17. import gasFill from './components/gasFill.vue'
  18. import gasTask from './components/gasTask.vue'
  19. import gasRecordCard from './components/gasRecordCard.vue'
  20. export default {
  21. name: 'gasreport',
  22. components: {
  23. popupModal,
  24. gasFill,
  25. gasTask,
  26. gasRecordCard
  27. },
  28. data() {
  29. return {
  30. gasTitle: '',//标题
  31. showModel: false,//是否打开弹出层
  32. loadComponent: 'gasFill',//默认加载组件
  33. taskTj: {},
  34. firstAddress: '',//一次线路
  35. secondAddress: '',//二次线路
  36. firstTj: [],//一次统计
  37. secondTj: [],//二次统计
  38. };
  39. },
  40. computed: {
  41. },
  42. mounted() {
  43. this.queryNowGasInfoByUser()
  44. },
  45. methods: {
  46. //切换导航
  47. handlerToggle() {
  48. this.showModel = !this.showModel
  49. },
  50. //导航栏点击
  51. handlerClick(data) {
  52. let that = this
  53. switch (data) {
  54. case '瓦斯巡检记录卡管理':
  55. that.loadComponent = 'gasRecordCard'
  56. that.gasTitle = '瓦斯巡检记录卡管理'
  57. that.showModel = false
  58. break;
  59. case '早班':
  60. that.loadComponent = 'gasTask'
  61. that.gasTitle = '早班巡检任务'
  62. that.firstAddress = that.taskTj.addressEarly1
  63. that.secondAddress = that.taskTj.addressEarly2
  64. that.firstTj = that.taskTj.arrayEarly1
  65. that.secondTj = that.taskTj.arrayEarly2
  66. that.showModel = false
  67. break;
  68. case '中班':
  69. that.loadComponent = 'gasTask'
  70. that.gasTitle = '中班巡检任务'
  71. that.firstAddress = that.taskTj.addressNoon1
  72. that.secondAddress = that.taskTj.addressNoon2
  73. that.firstTj = that.taskTj.arrayNoon1
  74. that.secondTj = that.taskTj.arrayNoon2
  75. that.showModel = false
  76. break;
  77. case '夜班':
  78. that.loadComponent = 'gasTask'
  79. that.gasTitle = '夜班巡检任务'
  80. that.firstAddress = that.taskTj.addressNight1
  81. that.secondAddress = that.taskTj.addressNight2
  82. that.firstTj = that.taskTj.arrayNight1
  83. that.secondTj = that.taskTj.arrayNight2
  84. that.showModel = false
  85. break;
  86. case '瓦斯巡检填报':
  87. that.loadComponent = 'gasFill'
  88. that.gasTitle = '瓦斯巡检填报'
  89. that.showModel = false
  90. break;
  91. }
  92. },
  93. //获取card列表
  94. queryNowGasInfoByUser() {
  95. let that = this
  96. new Promise((resolve, reject) => {
  97. api
  98. .queryNowGasInfoByUser({})
  99. .then((response) => {
  100. if (response.data.code == 200) {
  101. that.taskTj=response.data.result
  102. } else {
  103. reject(response);
  104. }
  105. })
  106. .catch((error) => {
  107. console.log("catch===>response", response);
  108. reject(error);
  109. });
  110. });
  111. },
  112. },
  113. };
  114. </script>
  115. <style lang="scss" scoped>
  116. .gas-report {
  117. position: relative;
  118. box-sizing: border-box;
  119. .gas-content {
  120. height: 708px;
  121. margin-top: 85px;
  122. overflow-y: auto;
  123. .popup-modal {
  124. position: absolute;
  125. top: 45px;
  126. left: 0;
  127. height: 748px;
  128. width: 240px;
  129. }
  130. }
  131. }
  132. </style>