trouble_xf_deetails.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  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="70" labelAlign="left">
  11. <view class="">
  12. <view class="itemunirow">
  13. <uni-row class="demo-uni-row " :gutter="20" width="100%">
  14. <uni-col :span="16">
  15. <text class="text-df text-1cut ">检查项名称:{{formData.inspName}}</text>
  16. </uni-col>
  17. <!-- <uni-col :span="8">
  18. <text class="text-df text-1cut ">检查人:{{formData.avatar}}</text>
  19. </uni-col> -->
  20. </uni-row>
  21. <uni-row class="demo-uni-row " :gutter="20" width="100%">
  22. <uni-col :span="16">
  23. <!-- <uni-row class="demo-uni-row " :gutter="20" width="100%">
  24. <uni-col :span="24">
  25. <text class="text-df text-1cut ">处理时间:{{formData.handleTime}}</text>
  26. </uni-col>
  27. </uni-row> -->
  28. <uni-row class="demo-uni-row " :gutter="20" width="100%">
  29. <uni-col :span="24">
  30. <text class="text-df text-1cut ">检查内容:{{formData.inspContent}} </text>
  31. </uni-col>
  32. </uni-row>
  33. </uni-col>
  34. <!-- <uni-col :span="8">
  35. <u--image :showLoading="true" :src="formData.url" width="80px" height="80px">
  36. </u--image>
  37. </uni-col> -->
  38. </uni-row>
  39. </view>
  40. <view class="dashedBox">
  41. <view class="dashedLine">
  42. </view>
  43. </view>
  44. <view class="padding-top-sm">
  45. <view class="">
  46. <text>设施情况:</text>
  47. <u-list>
  48. <u-list-item v-for="(item,index) in formData.fpdList" :key="index" link>
  49. <uni-row class="demo-uni-row " :gutter="20" width="100%">
  50. <uni-col :span="16">
  51. <text class="text-df text-1cut ">设备名称:{{item.fpdName}}</text>
  52. </uni-col>
  53. <uni-col :span="8">
  54. <text class="text-df text-1cut ">设备二维码:</text>
  55. </uni-col>
  56. </uni-row>
  57. <uni-row class="demo-uni-row " :gutter="20" width="100%">
  58. <uni-col :span="16">
  59. <uni-row class="demo-uni-row " :gutter="20" width="100%">
  60. <uni-col :span="24">
  61. <text class="text-df text-1cut ">设备编号:{{item.fpdCode}}</text>
  62. </uni-col>
  63. </uni-row>
  64. <uni-row class="demo-uni-row " :gutter="20" width="100%">
  65. <uni-col :span="24">
  66. <text
  67. class="text-df text-1cut ">隐患描述:{{item.dangerDescribe}}</text>
  68. </uni-col>
  69. </uni-row>
  70. <uni-row class="demo-uni-row " :gutter="20" width="100%">
  71. <uni-col :span="24">
  72. <text class="padding-tb-sm">检查结果:</text>
  73. <view class="flex flex-wrap" style="margin-top: 20rpx;">
  74. <view v-for="(items,indexs) in item.hisFpdResultList"
  75. :key="indexs"
  76. class="flex flex-direction-row align-center padding-lr-sm">
  77. <u--image :showLoading="true" v-if="items.resValue=='1'"
  78. :src="zhengchang" width="34rpx" height="34rpx">
  79. </u--image>
  80. <text class="text-1cut padding-left-sm "
  81. v-if="items.resValue=='1'">{{items.resLable}}</text>
  82. </view>
  83. </view>
  84. <!-- <text class="text-df text-1cut ">设备位置:{{item.fpdLocal}}</text> -->
  85. </uni-col>
  86. </uni-row>
  87. </uni-col>
  88. <uni-col :span="8">
  89. <u--image :showLoading="true" :src="item.fpdQcode" width="80px"
  90. height="80px"></u--image>
  91. </uni-col>
  92. </uni-row>
  93. <!-- <view class="padding-tb-sm">
  94. <view class=" ">
  95. <view class="dashedLine">
  96. </view>
  97. </view>
  98. </view> -->
  99. <view class="padding-tb-sm">
  100. <view class=" ">
  101. <view class="dashedLine">
  102. </view>
  103. </view>
  104. </view>
  105. <text>现场照片:</text>
  106. <view class="padding-lr-lg flex flex-direction-row" style="justify-content: space-around;margin-top: 10px;">
  107. <u--image v-if="item.imgUrl1" :showLoading="true" :src="item.imgUrl1"
  108. width="80px" height="80px"></u--image>
  109. <u--image v-if="item.imgUrl2" :showLoading="true"
  110. :src="item.imgUrl2" width="80px" height="80px"></u--image>
  111. <u--image v-if="item.imgUrl3" :showLoading="true"
  112. :src="item.imgUrl3" width="80px" height="80px"></u--image>
  113. <!-- <view class="padding-lr-lg flex flex-direction-row">
  114. <u--image v-if="item.hisFpd.imgUrl1" :showLoading="true"
  115. :src="item.hisFpd.imgUrl1" width="80px" height="80px"></u--image>
  116. <u--image v-if="item.hisFpd.imgUrl2" :showLoading="true"
  117. :src="item.hisFpd.imgUrl2" width="80px" height="80px"></u--image>
  118. <u--image v-if="item.hisFpd.imgUrl3" :showLoading="true"
  119. :src="item.hisFpd.imgUrl3" width="80px" height="80px"></u--image> -->
  120. <!-- <u-album :urls="formData.imgurl"></u-album> -->
  121. <!-- </view> -->
  122. </view>
  123. </u-list-item>
  124. </u-list>
  125. </view>
  126. </view>
  127. </view>
  128. </u--form>
  129. </view>
  130. <!-- 加载中 -->
  131. <isLodingModel></isLodingModel>
  132. </view>
  133. </view>
  134. </template>
  135. <script>
  136. import {
  137. getOneDenger, // 获得单个隐患详情
  138. } from "@/api/hiddenTrouble";
  139. import {
  140. dangerDetailbyFpd, // 隐患查看详情(消防设施)
  141. dangerDetail // 隐患查看详情
  142. } from "@/api/hiddenTrouble";
  143. import {
  144. uploadAvatar
  145. } from "@/api/system/user"
  146. import {
  147. DICT_TYPE,
  148. getDictDatas
  149. } from "@/utils/dict";
  150. let that = null;
  151. import config from '@/config'
  152. const baseUrlImg = config.baseUrlImg
  153. import navInfo from '@/pagesA/components/my-nav/nav'
  154. export default {
  155. components: {
  156. navInfo
  157. },
  158. data() {
  159. return {
  160. urls: baseUrlImg,
  161. moren: `${baseUrlImg}/checkActive/moren.png`, //默认图片
  162. zhengchang: `${baseUrlImg}/checkActive/zhengchang.png`,
  163. // 数据加载中
  164. loading: false,
  165. // 自定义表单数据
  166. formData: {
  167. id: '',
  168. name: '',
  169. position: '',
  170. time: '',
  171. description: '',
  172. status: '',
  173. people: '',
  174. imgurl: [],
  175. },
  176. }
  177. },
  178. watch: {
  179. loading: {
  180. handler(newLength, oldLength) {
  181. this.$modal.isLoadingModel(this.loading)
  182. },
  183. immediate: true
  184. }
  185. },
  186. computed: {},
  187. //目的页面接收
  188. //这里用onshow()也可以
  189. onLoad(options) {
  190. console.log("options: ", options);
  191. var data = options.id;
  192. console.log(data)
  193. this.getData(data)
  194. },
  195. // onLoad: function(option) {
  196. // that = this;
  197. // const eventChannel = this.getOpenerEventChannel();
  198. // // eventChannel.emit('acceptDataFromOpenedPage', {
  199. // // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  200. // eventChannel.on('acceptDataFromOpenerPage', function(val) {
  201. // console.log(' val', val)
  202. // that.getData(val.id)
  203. // })
  204. // },
  205. onReady() {},
  206. methods: {
  207. // =================数据转换==================
  208. // =============获取数据===================s
  209. // =============获取数据===================s
  210. // 获取数据
  211. getData(id) {
  212. console.log('id', id);
  213. this.loading = true
  214. dangerDetailbyFpd({
  215. dangerId: id
  216. }).then(response => {
  217. console.log(response);
  218. // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接
  219. this.formData = response.data ? response.data : {}
  220. this.loading = false;
  221. // this.formData.imgurl = ['https://cdn.uviewui.com/uview/swiper/swiper3.png',
  222. // 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  223. // 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  224. // ]
  225. this.loading = false;
  226. });
  227. },
  228. }
  229. }
  230. </script>
  231. <style lang="scss" scoped>
  232. .buttomBorder {
  233. height: 0px;
  234. border: 1px dashed #CBD5E1;
  235. }
  236. .dashedBox {
  237. padding: 0px 30rpx;
  238. }
  239. .dashedLine {
  240. height: 3px;
  241. background-image: linear-gradient(to right, #d7d6d6 0%, #d7d6d6 50%, rgba(196, 196, 196, 0) 50%);
  242. background-size: 40px 2px;
  243. background-repeat: repeat-x;
  244. }
  245. .itemunirow {
  246. .uni-row {
  247. padding-bottom: 20px;
  248. }
  249. }
  250. .uni-container {
  251. padding: 10px;
  252. border-radius: 30px 30px 0px 0px;
  253. background: #fff;
  254. /*#ifdef H5*/
  255. margin-top: 50rpx;
  256. /* #endif */
  257. /* #ifdef MP-WEIXIN*/
  258. margin-top: 100rpx;
  259. /* #endif */
  260. z-index: 9999999;
  261. position: relative;
  262. }
  263. </style>