dangerareacheckdetail.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <!--
  2. * @Title:
  3. * @Description: 巡查历史信息
  4. * @Author: swp
  5. * @Date: 2022-08-24 10:49:21
  6. * @LastEditors:
  7. * @LastEditTime: 2022-08-24 10:49:21
  8. -->
  9. <template>
  10. <view class="wrap">
  11. <uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
  12. @clickLeft="toBack">
  13. <view class="nav-title">
  14. <text>{{title}}</text>
  15. </view>
  16. </uni-nav-bar>
  17. <view class="container">
  18. <uni-card title="危险区及行政区">
  19. <view class="list-item-block">
  20. <view class="line">
  21. <text class="lable">危险区:</text>
  22. <text class="content">{{data.dangerAreaName}}</text>
  23. </view>
  24. <view class="line">
  25. <text class="lable">行政区:</text>
  26. <text class="content">{{data.fullAadName}}</text>
  27. </view>
  28. </view>
  29. </uni-card>
  30. <uni-card title="定位信息">
  31. <view class="list-item-block">
  32. <view class="line">
  33. <text class="lable">经纬度:</text>
  34. <text class="content">{{data.longitude}},{{data.latitude}}</text>
  35. </view>
  36. <view class="line">
  37. <text class="lable">定位地址:</text>
  38. <text class="content">{{data.address}}</text>
  39. </view>
  40. <view class="line">
  41. <text class="lable">山洪沟名称:</text>
  42. <text class="content">{{data.riverName}}</text>
  43. </view>
  44. </view>
  45. </uni-card>
  46. <uni-card title="巡查反馈">
  47. <view class="list-item-block">
  48. <view v-if="data.isFlood==1" class="line">
  49. <text class="lable">是否有山洪:</text>
  50. <text class="content" style="padding-left:0px">有</text>
  51. </view>
  52. <view v-else class="line">
  53. <text class="lable">是否有山洪:</text>
  54. <text class="content" style="padding-left:0px">无</text>
  55. </view>
  56. <view v-if="data.isDamage==1" class="line">
  57. <text class="lable">是否成灾:</text>
  58. <text class="content" style="padding-left:0px">是</text>
  59. </view>
  60. <view v-else class="line">
  61. <text class="lable">是否成灾:</text>
  62. <text class="content" style="padding-left:0px">否</text>
  63. </view>
  64. <view v-if="data.isWarn==1" class="line">
  65. <text class="lable">是否预警:</text>
  66. <text class="content" style="padding-left:0px">是</text>
  67. </view>
  68. <view v-else class="line">
  69. <text class="lable">是否预警:</text>
  70. <text class="content" style="padding-left:0px">否</text>
  71. </view>
  72. <view v-if="data.isWarn==1" class="line">
  73. <text class="lable">预警信息:</text>
  74. <text class="content" style="padding-left:0px">{{data.warnInfo}}</text>
  75. </view>
  76. <view v-if="data.isTransfer==1" class="line">
  77. <text class="lable">是否转移:</text>
  78. <text class="content" style="padding-left:0px">是</text>
  79. </view>
  80. <view v-else class="line">
  81. <text class="lable">是否转移:</text>
  82. <text class="content" style="padding-left:0px">否</text>
  83. </view>
  84. <view v-if="data.isTransfer ==1" class="line">
  85. <text class="lable">转移信息:</text>
  86. <text class="content" style="padding-left:0px">{{data.transferInfo}}</text>
  87. </view>
  88. <view class="line">
  89. <text class="lable">备注:</text>
  90. <text class="content">{{data.remark}}</text>
  91. </view>
  92. </view>
  93. </uni-card>
  94. <uni-card title="巡查照片">
  95. <view class="view-flex-cc">
  96. <image v-for="(item, index) in checkPhotos" :key="index" class="cover-image" mode="widthFix"
  97. style="width: 100%;margin-bottom: 10px;" :src="toOss(item)">
  98. </image>
  99. </view>
  100. </uni-card>
  101. </view>
  102. </view>
  103. </template>
  104. <script>
  105. import http from '@/http/api.js';
  106. import {
  107. oss
  108. } from '@/common/setting';
  109. export default {
  110. components: {},
  111. onLoad(option) {
  112. let params = {};
  113. params['id'] = option.id;
  114. this.getDetail(params);
  115. },
  116. data() {
  117. return {
  118. title: '巡查详情',
  119. pageSize: 10,
  120. pageCurrent: 1,
  121. total: 0,
  122. list: [],
  123. query: {},
  124. checkPhotos: [],
  125. data: {},
  126. }
  127. },
  128. computed: {},
  129. onShow() {},
  130. methods: {
  131. toOss(path) {
  132. return oss + path;
  133. },
  134. //返回上一页
  135. toBack() {
  136. uni.navigateBack({
  137. delta: 1
  138. })
  139. },
  140. // 分页触发
  141. pageChange(e) {
  142. this.pageCurrent = e.current;
  143. this.getPage()
  144. },
  145. getDetail(params = {}) {
  146. let that = this;
  147. Object.assign(this.query, params);
  148. http.request({
  149. url: '/galaxy-business/yj/check/detail',
  150. method: 'GET',
  151. params: this.query
  152. }).then(res => {
  153. if (res.success) {
  154. that.data = res.data;
  155. let photos = res.data['checkPhotos'];
  156. if (null != photos && photos.length > 0) {
  157. let photoList = photos.split(",");
  158. that.checkPhotos = photoList;
  159. }
  160. }
  161. }).catch(err => {
  162. console.log(err)
  163. })
  164. },
  165. }
  166. }
  167. </script>
  168. <style lang="scss" scoped>
  169. </style>