trouble_details.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <view class="">
  3. <navInfo :title="'隐患详情'"></navInfo>
  4. <view class="bgTopImg">
  5. <image slot="right" :src="`${urls}/navBg@2x.png`" class="bgTopImg"></image>
  6. </view>
  7. <view class=" uni-container">
  8. <view class=" flex flex-direction width100">
  9. <!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
  10. <u--form ref="uForm" :model="formData" labelPosition="left" labelWidth="90" labelAlign="left">
  11. <view class="" >
  12. <u-form-item label="检查项名称" prop="name" ref="item1">
  13. <text class="text-1cut padding-sm">{{formData.inspName}}</text>
  14. </u-form-item>
  15. <u-form-item label="检查日期" prop="inspectTime" ref="item1">
  16. <text class="text-1cut padding-sm"> {{formData.inspectTime}} </text>
  17. </u-form-item>
  18. <u-form-item label="检查内容" prop="description" ref="item1">
  19. <text class=" padding-sm"> {{formData.description}}</text>
  20. </u-form-item>
  21. <view class="dashedBox">
  22. <view class="dashedLine">
  23. </view>
  24. </view>
  25. <u-form-item label="检查结果" prop="result" ref="item1" labelPosition="top">
  26. <view class="flex flex-wrap padding-top-sm ">
  27. <view v-for="(item,index) in formData.hisResultList" :key="index"
  28. class="flex flex-direction-row align-center padding-lr-sm">
  29. <u--image :showLoading="true" :src="item.resValue==1?zhengchang:moren" width="34rpx" height="34rpx"></u--image>
  30. <text class="text-1cut padding-left-sm ">{{item.resLable}}</text>
  31. </view>
  32. </view>
  33. </u-form-item>
  34. <view class="padding-top-sm">
  35. <view class="">
  36. <text>现场照片:</text>
  37. <view class="padding-tb-sm">
  38. <view class="dashedBox ">
  39. <view class="dashedLine">
  40. </view>
  41. </view>
  42. </view>
  43. <view class=" flex flex-direction-row">
  44. <view class="padding-lr-lg" v-for="(item,index) in formData.imgUrlList" :key="index">
  45. <image :src="item.imgUrl" style="width:120rpx;height: 120rpx;"></image>
  46. <!-- <u-album :urls="item.imgUrl"></u-album> 不显示-->
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </u--form>
  53. </view>
  54. <!-- 加载中 -->
  55. <isLodingModel></isLodingModel>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. import navInfo from '@/pagesA/components/my-nav/nav'
  61. import {
  62. getOneDenger, // 获得单个隐患详情
  63. } from "@/api/hiddenTrouble";
  64. import {
  65. dangerDetailbyFpd, // 隐患查看详情(消防设施)
  66. dangerDetail // 隐患查看详情
  67. } from "@/api/hiddenTrouble";
  68. import {
  69. uploadAvatar
  70. } from "@/api/system/user"
  71. import {
  72. DICT_TYPE,
  73. getDictDatas
  74. } from "@/utils/dict";
  75. let that = null;
  76. import config from '@/config'
  77. const baseUrlImg=config.baseUrlImg
  78. export default {
  79. components: {
  80. navInfo
  81. },
  82. data() {
  83. return {
  84. urls:baseUrlImg,
  85. moren: `${baseUrlImg}/checkActive/moren.png`, //默认图片
  86. zhengchang: `${baseUrlImg}/checkActive/zhengchang.png`,
  87. // 数据加载中
  88. loading: false,
  89. formData:{},
  90. // 自定义表单数据
  91. // formData: {
  92. // id: '',
  93. // name: '',
  94. // position: '',
  95. // time: '',
  96. // description: '',
  97. // status: '',
  98. // people: '',
  99. // imgUrlList: [],
  100. // },
  101. }
  102. },
  103. watch: {
  104. loading: {
  105. handler(newLength, oldLength) {
  106. this.$modal.isLoadingModel(this.loading)
  107. },
  108. immediate: true
  109. }
  110. },
  111. computed: {},
  112. //目的页面接收
  113. //这里用onshow()也可以
  114. onLoad(options) {
  115. console.log("options: ", options);
  116. var data = options.id;
  117. console.log(data)
  118. this.getData(data)
  119. },
  120. onReady() {},
  121. methods: {
  122. // =================数据转换==================
  123. // =============获取数据===================s
  124. // =============获取数据===================s
  125. // 获取数据
  126. getData(id) {
  127. console.log('id', id);
  128. this.loading = true
  129. dangerDetail({
  130. dangerId: id
  131. }).then(response => {
  132. console.log(response);
  133. // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接
  134. this.formData = response.data ? response.data : {},
  135. this.loading = false;
  136. });
  137. },
  138. }
  139. }
  140. </script>
  141. <style lang="scss">
  142. .buttomBorder {
  143. height: 0px;
  144. border: 1px dashed #CBD5E1;
  145. }
  146. .dashedBox {
  147. padding: 0px 30rpx;
  148. }
  149. .dashedLine {
  150. height: 3px;
  151. background-image: linear-gradient(to right, #d7d6d6 0%, #d7d6d6 50%, rgba(196, 196, 196, 0) 50%);
  152. background-size: 40px 2px;
  153. background-repeat: repeat-x;
  154. }
  155. .itemunirow {
  156. .uni-row {
  157. padding-bottom: 10px;
  158. }
  159. }
  160. .uni-container {
  161. padding: 10px;
  162. border-radius: 30px 30px 0px 0px;
  163. background: #fff;
  164. /*#ifdef H5*/
  165. margin-top: 50rpx;
  166. /* #endif */
  167. /* #ifdef MP-WEIXIN*/
  168. margin-top: 100rpx;
  169. /* #endif */
  170. z-index: 9999999;
  171. position: relative;
  172. }
  173. </style>