spotCheckResult.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="result-pages">
  3. <view class="results" v-if="pageData">
  4. <view class="results-head">
  5. <view>{{pageData.name}}-{{pageData.storeName}}-{{pageData.createDate}}</view>
  6. <view>任务的点检结果</view>
  7. <view>
  8. <view class="r-totals">{{pageData.totalTargetCount}}</view>
  9. <view>点检总数</view>
  10. </view>
  11. </view>
  12. <view class="results-items">
  13. <view>
  14. <view class="hg">{{pageData.passTargetCount}}</view>
  15. <view>合格项数</view>
  16. </view>
  17. <view>
  18. <view class="bhg">{{pageData.notPassTargetCount}}</view>
  19. <view>不合格项数</view>
  20. </view>
  21. <view>
  22. <view class="bsy">{{pageData.notWorkTargetCount}}</view>
  23. <view>不适用项数</view>
  24. </view>
  25. </view>
  26. </view>
  27. <view v-else>
  28. <view class="loadingStyle">
  29. <u-loading mode="circle"></u-loading>
  30. <view>正在加载</view>
  31. </view>
  32. </view>
  33. <view class="result-back">
  34. <u-button type="primary" :style="{background: $config('buttonColors')}" @click="goBack">返回任务列表</u-button>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. import { getTaskDetail } from '@/api/task';
  40. export default {
  41. data() {
  42. return {
  43. pageData: null,
  44. id: ''
  45. }
  46. },
  47. onLoad(options) {
  48. this.id = options.id
  49. this.getDetail()
  50. },
  51. methods: {
  52. goBack(){
  53. uni.navigateBack()
  54. },
  55. getDetail(){
  56. getTaskDetail({id:this.id}).then(res => {
  57. this.pageData = res.data || null
  58. })
  59. }
  60. }
  61. }
  62. </script>
  63. <style lang="scss">
  64. .result-pages{
  65. .loadingStyle{
  66. text-align: center;
  67. padding: 10vh 0 10vh 0;
  68. }
  69. .results{
  70. padding: 20upx;
  71. background: #fff;
  72. margin-bottom: 25upx;
  73. .results-head{
  74. text-align: center;
  75. padding: 20upx 0;
  76. .r-totals{
  77. width: 160upx;
  78. height: 160upx;
  79. display: inline-block;
  80. line-height: 160upx;
  81. background: #ffaa00;
  82. border-radius: 100%;
  83. color: #fff;
  84. font-size: 60upx;
  85. margin: 20upx 0;
  86. }
  87. }
  88. .results-items{
  89. display: flex;
  90. align-items: center;
  91. border-top: 1px solid #eee;
  92. border-bottom: 1px solid #eee;
  93. padding: 20upx 0;
  94. margin-top: 20upx;
  95. > view{
  96. width: 33.3%;
  97. border-right: 1px solid #eee;
  98. text-align: center;
  99. &:last-child{
  100. border: 0;
  101. }
  102. >view{
  103. &:first-child{
  104. font-size: 40upx;
  105. margin-bottom: 10upx;
  106. }
  107. }
  108. .hg{
  109. color: #55aa00;
  110. }
  111. .bhg{
  112. color: #FF0000;
  113. }
  114. .bsy{
  115. color: #007AFF;
  116. }
  117. }
  118. }
  119. }
  120. .result-back{
  121. padding: 20upx 50upx;
  122. }
  123. }
  124. </style>