trouble_details.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  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" class="time-main">
  11. <view class="main-times">
  12. <u-form-item label="检查项名称" prop="name" ref="item1" class="par-time time-axis">
  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" class="par-time time-axis">
  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>
  36. <text ><text>现场照片:</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;" @click="viewImageBig(item.imgUrl)"></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. import {
  76. viewImgBig
  77. } from '@/utils/common.js';
  78. let that = null;
  79. import config from '@/config'
  80. const baseUrlImg=config.baseUrlImg
  81. export default {
  82. components: {
  83. navInfo
  84. },
  85. data() {
  86. return {
  87. urls:baseUrlImg,
  88. moren: `${baseUrlImg}/checkActive/moren.png`, //默认图片
  89. zhengchang: `${baseUrlImg}/checkActive/zhengchang.png`,
  90. // 数据加载中
  91. loading: false,
  92. formData:{},
  93. // 自定义表单数据
  94. // formData: {
  95. // id: '',
  96. // name: '',
  97. // position: '',
  98. // time: '',
  99. // description: '',
  100. // status: '',
  101. // people: '',
  102. // imgUrlList: [],
  103. // },
  104. }
  105. },
  106. watch: {
  107. loading: {
  108. handler(newLength, oldLength) {
  109. this.$modal.isLoadingModel(this.loading)
  110. },
  111. immediate: true
  112. }
  113. },
  114. computed: {},
  115. //目的页面接收
  116. //这里用onshow()也可以
  117. onLoad(options) {
  118. var data = options.id;
  119. this.getData(data)
  120. },
  121. onReady() {},
  122. methods: {
  123. viewImageBig(i) {
  124. let imgList=[]
  125. imgList.push(i)
  126. uni.previewImage({
  127. urls: imgList,
  128. current: i
  129. });
  130. },
  131. // =================数据转换==================
  132. // =============获取数据===================s
  133. // =============获取数据===================s
  134. // 获取数据
  135. getData(id) {
  136. this.loading = true
  137. dangerDetail({
  138. dangerId: id
  139. }).then(response => {
  140. // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接
  141. this.formData = response.data ? response.data : {},
  142. this.loading = false;
  143. });
  144. },
  145. }
  146. }
  147. </script>
  148. <style lang="scss">
  149. .buttomBorder {
  150. height: 0px;
  151. border: 1px dashed #CBD5E1;
  152. }
  153. .dashedBox {
  154. padding: 0px 30rpx;
  155. }
  156. .dashedLine {
  157. height: 3px;
  158. background-image: linear-gradient(to right, #d7d6d6 0%, #d7d6d6 50%, rgba(196, 196, 196, 0) 50%);
  159. background-size: 40px 2px;
  160. background-repeat: repeat-x;
  161. }
  162. .itemunirow {
  163. .uni-row {
  164. padding-bottom: 10px;
  165. }
  166. }
  167. .uni-container {
  168. padding: 10px;
  169. border-radius: 30px 30px 0px 0px;
  170. background: #fff;
  171. /*#ifdef H5*/
  172. margin-top: 50rpx;
  173. /* #endif */
  174. /* #ifdef MP-WEIXIN*/
  175. margin-top: 100rpx;
  176. /* #endif */
  177. z-index: 99;
  178. position: relative;
  179. }
  180. .main-times{
  181. list-style: none;
  182. position: relative;
  183. }
  184. .main-times::before{
  185. content: "";
  186. position: absolute;
  187. border:4rpx dashed rgba(33, 191, 208, 0.2) ;
  188. left: -76rpx;
  189. height: calc(100% - 20px);
  190. top: 54rpx;
  191. }
  192. </style>